From a93e2aa863b078180f688f7fa20b0c69d38a2d99 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 7 Jan 2026 11:01:54 -0600
Subject: [PATCH 01/21] Theme provider

---
 src/components/AdminSidebar.js | 80 ++++++++++++++++++++++++----------
 src/index.js                   | 10 ++++-
 src/layouts/AdminLayout.js     |  5 ++-
 3 files changed, 71 insertions(+), 24 deletions(-)

diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index fc70405..ffc10bf 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useTheme } from 'next-themes';
 import { useAuth } from '../context/AuthContext';
 import api from '../utils/api';
 import { Badge } from './ui/badge';
@@ -23,16 +24,20 @@ import {
   HardDrive,
   Repeat,
   Heart,
+  Sun,
+  Moon,
 } from 'lucide-react';
 
 const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const { user, logout } = useAuth();
+  const { theme, setTheme } = useTheme();
   const [pendingCount, setPendingCount] = useState(0);
   const [storageUsed, setStorageUsed] = useState(0);
   const [storageLimit, setStorageLimit] = useState(0);
   const [storagePercentage, setStoragePercentage] = useState(0);
+  const isDark = theme === 'dark';
 
   // Fetch pending approvals count
   useEffect(() => {
@@ -86,6 +91,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
     navigate('/login');
   };
 
+  const handleThemeToggle = () => {
+    setTheme(isDark ? 'light' : 'dark');
+  };
+
   const navItems = [
     {
       name: 'Dashboard',
@@ -211,7 +220,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         >
           {/* Active border */}
           {active && !item.disabled && (
-            <div className="absolute left-0 top-0 bottom-0 w-1 bg-[#ff9e77] rounded-r" />
+            <div className="absolute left-0 top-0 bottom-0 w-1 bg-accent rounded-r" />
           )}
 
           <Icon className="h-5 w-5 flex-shrink-0" />
@@ -225,7 +234,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                 </Badge>
               )}
               {item.badge > 0 && !item.disabled && (
-                <Badge className="bg-[#ff9e77] text-white text-xs px-2 py-0.5">
+                <Badge className="bg-accent foreground text-xs px-2 py-0.5">
                   {item.badge}
                 </Badge>
               )}
@@ -234,7 +243,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
 
           {/* Badge when collapsed */}
           {!isOpen && item.badge > 0 && !item.disabled && (
-            <div className="absolute -top-1 -right-1 bg-[#ff9e77] text-white text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
+            <div className="absolute -top-1 -right-1 bg-accent foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
               {item.badge}
             </div>
           )}
@@ -242,7 +251,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
 
         {/* Tooltip when collapsed */}
         {!isOpen && (
-          <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+          <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
             {item.name}
             {item.badge > 0 && ` (${item.badge})`}
           </div>
@@ -274,10 +283,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             />
             {isOpen && (
               <div className="flex-1 min-w-0">
-                <h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h2 className="text-xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Admin
                 </h2>
-                <p className="text-xs text-[#664fa3] group-hover:text-[#ff9e77] transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-muted-foreground group-hover:text-accent transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   View Public Site
                 </p>
               </div>
@@ -289,11 +298,11 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {isMobile ? (
-              <Menu className="h-5 w-5 text-[#422268]" />
+              <Menu className="h-5 w-5 text-primary" />
             ) : isOpen ? (
-              <ChevronLeft className="h-5 w-5 text-[#422268]" />
+              <ChevronLeft className="h-5 w-5 text-primary" />
             ) : (
-              <ChevronRight className="h-5 w-5 text-[#422268]" />
+              <ChevronRight className="h-5 w-5 text-primary" />
             )}
           </button>
         </div>
@@ -306,7 +315,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* MEMBERSHIP Section */}
           {isOpen && (
             <div className="px-4 py-2 mt-6">
-              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                 Membership
               </h3>
             </div>
@@ -320,7 +329,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* FINANCIALS Section */}
           {isOpen && (
             <div className="px-4 py-2 mt-6">
-              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                 Financials
               </h3>
             </div>
@@ -334,7 +343,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* EVENTS & MEDIA Section */}
           {isOpen && (
             <div className="px-4 py-2 mt-6">
-              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                 Events & Media
               </h3>
             </div>
@@ -347,7 +356,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* DOCUMENTATION Section */}
           {isOpen && (
             <div className="px-4 py-2 mt-6">
-              <h3 className="text-xs font-semibold text-[#664fa3] uppercase tracking-wider">
+              <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
                 Documentation
               </h3>
             </div>
@@ -375,10 +384,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                   {user.first_name?.[0]}{user.last_name?.[0]}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-[#422268] truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <p className="text-sm font-medium text-primary truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {user.first_name} {user.last_name}
                   </p>
-                  <p className="text-xs text-[#664fa3] capitalize truncate" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-xs text-muted-foreground capitalize truncate" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     {user.role}
                   </p>
                 </div>
@@ -388,13 +397,40 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             </div>
           )}
 
+          {/* Theme Toggle */}
+          <div className="relative group">
+            <button
+              type="button"
+              onClick={handleThemeToggle}
+              aria-pressed={isDark}
+              aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
+              className={`
+                flex items-center gap-3 px-4 py-3 rounded-lg w-full
+                text-primary hover:bg-muted/20 transition-colors
+                ${!isOpen && 'justify-center'}
+              `}
+            >
+              {isDark ? (
+                <Sun className="h-5 w-5 flex-shrink-0" />
+              ) : (
+                <Moon className="h-5 w-5 flex-shrink-0" />
+              )}
+              {isOpen && <span>{isDark ? 'Light mode' : 'Dark mode'}</span>}
+            </button>
+            {!isOpen && (
+              <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+                {isDark ? 'Light mode' : 'Dark mode'}
+              </div>
+            )}
+          </div>
+
           {/* Storage Usage Widget */}
           <div className="mb-2">
             {isOpen ? (
               <div className="px-4 py-3 bg-[#F8F7FB] rounded-lg">
                 <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm font-medium text-[#422268]">Storage Usage</span>
-                  <span className="text-xs text-[#664fa3]">{storagePercentage}%</span>
+                  <span className="text-sm font-medium text-primary">Storage Usage</span>
+                  <span className="text-xs text-muted-foreground">{storagePercentage}%</span>
                 </div>
                 <div className="w-full bg-[#ddd8eb] rounded-full h-2">
                   <div
@@ -405,7 +441,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                     style={{ width: `${storagePercentage}%` }}
                   />
                 </div>
-                <p className="text-xs text-[#664fa3] mt-1">
+                <p className="text-xs text-muted-foreground mt-1">
                   {formatBytes(storageUsed)} / {formatBytes(storageLimit)}
                 </p>
               </div>
@@ -414,13 +450,13 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                 <div className="relative group">
                   <HardDrive className={`h-5 w-5 ${storagePercentage > 90 ? 'text-red-500' :
                     storagePercentage > 75 ? 'text-yellow-500' :
-                      'text-[#664fa3]'
+                      'text-muted-foreground'
                     }`} />
                   {storagePercentage > 75 && (
                     <div className="absolute -top-1 -right-1 bg-red-500 h-2 w-2 rounded-full" />
                   )}
                   {/* Tooltip */}
-                  <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+                  <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
                     Storage: {storagePercentage}%
                   </div>
                 </div>
@@ -433,7 +469,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             onClick={handleLogout}
             className={`
               flex items-center gap-3 px-4 py-3 rounded-lg w-full
-              text-[#ff9e77] hover:bg-[#ff9e77]/10 transition-colors
+              text-accent hover:bg-accent/10 transition-colors
               ${!isOpen && 'justify-center'}
             `}
           >
@@ -444,7 +480,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* Logout tooltip when collapsed */}
           {!isOpen && (
             <div className="relative group">
-              <div className="absolute left-full ml-2 bottom-0 px-3 py-2 bg-[#422268] text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
+              <div className="absolute left-full ml-2 bottom-0 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
                 Logout
               </div>
             </div>
diff --git a/src/index.js b/src/index.js
index 79282d0..a4a0d50 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import { ThemeProvider } from 'next-themes';
 import '@fontsource/fraunces/600.css';
 import '@fontsource/dm-sans/400.css';
 import '@fontsource/dm-sans/700.css';
@@ -9,6 +10,13 @@ import App from './App';
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider
+      attribute="data-theme"
+      defaultTheme="light"
+      enableSystem={false}
+      storageKey="admin-theme"
+    >
+      <App />
+    </ThemeProvider>
   </React.StrictMode>
 );
diff --git a/src/layouts/AdminLayout.js b/src/layouts/AdminLayout.js
index 668f6b9..a93df83 100644
--- a/src/layouts/AdminLayout.js
+++ b/src/layouts/AdminLayout.js
@@ -1,9 +1,12 @@
 import React, { useState, useEffect } from 'react';
+import { useTheme } from 'next-themes';
 import AdminSidebar from '../components/AdminSidebar';
 
 const AdminLayout = ({ children }) => {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [isMobile, setIsMobile] = useState(false);
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
 
   // Initialize sidebar state from localStorage
   useEffect(() => {
@@ -43,7 +46,7 @@ const AdminLayout = ({ children }) => {
   };
 
   return (
-    <div className="flex h-screen bg-white">
+    <div className={`flex h-screen bg-background ${isDark ? 'dark' : ''}`}>
       {/* Sidebar */}
       <AdminSidebar
         isOpen={sidebarOpen}
-- 
2.39.5


From 7694532d53d39e99fa4a9dd5bfdd4d24791b8c3e Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Mon, 12 Jan 2026 20:10:33 -0600
Subject: [PATCH 02/21] refactor: update styles in MembersDirectory and
 NewsletterArchive for consistency and improved theming

- Updated color classes to use CSS variables for better maintainability and theming.
- Refactored component styles in MembersDirectory.js to enhance visual consistency.
- Adjusted loading states and empty states in NewsletterArchive.js for improved user experience.
- Added new brand colors to tailwind.config.js for future use.
---
 README.md                                     | 243 +++++++++-----
 src/components/AddToCalendarButton.js         |  16 +-
 src/components/AdminSidebar.js                |  24 +-
 src/components/AttendanceDialog.js            |  18 +-
 src/components/ChangePasswordDialog.js        |  18 +-
 src/components/ConfirmationDialog.js          |  24 +-
 src/components/CreateMemberDialog.js          |  50 +--
 src/components/CreateStaffDialog.js           |  30 +-
 src/components/ImportMembersDialog.js         |  65 ++--
 src/components/InviteStaffDialog.js           |  34 +-
 src/components/MemberFooter.js                |   4 +-
 src/components/MemberRoute.js                 |   4 +-
 src/components/Navbar.js                      |  60 ++--
 src/components/PaymentActivationDialog.js     |  78 ++---
 src/components/PendingInvitationsTable.js     |  50 +--
 src/components/PlanDialog.js                  |  34 +-
 src/components/PublicFooter.js                |  28 +-
 src/components/PublicNavbar.js                |  44 +--
 src/components/RejectionDialog.js             |  20 +-
 src/components/WordPressImportWizard.js       |  84 ++---
 .../registration/RegistrationStep1.js         |  26 +-
 .../registration/RegistrationStep2.js         |  18 +-
 .../registration/RegistrationStep3.js         |  40 +--
 .../registration/RegistrationStep4.js         |  20 +-
 .../registration/RegistrationStepIndicator.js |  16 +-
 src/components/ui/password-input.jsx          |  18 +-
 src/components/ui/tabs.jsx                    |   2 +-
 src/index.css                                 | 129 ++++++--
 src/pages/AcceptInvitation.js                 | 124 ++++----
 src/pages/BecomeMember.js                     |  42 +--
 src/pages/BoardOfDirectors.js                 |  32 +-
 src/pages/ChangePasswordRequired.js           |  28 +-
 src/pages/ContactUs.js                        |  50 +--
 src/pages/Dashboard.js                        | 200 ++++++------
 src/pages/Donate.js                           | 198 ++++++------
 src/pages/DonationSuccess.js                  |  30 +-
 src/pages/EventDetails.js                     |  74 +++--
 src/pages/Events.js                           |  34 +-
 src/pages/ForgotPassword.js                   |  36 +--
 src/pages/History.js                          |  86 ++---
 src/pages/Landing.js                          |  28 +-
 src/pages/Login.js                            |  22 +-
 src/pages/MissionValues.js                    |  12 +-
 src/pages/NotFound.js                         |  22 +-
 src/pages/PaymentCancel.js                    |  42 +--
 src/pages/PaymentSuccess.js                   |  48 +--
 src/pages/Plans.js                            | 107 ++++---
 src/pages/PrivacyPolicy.js                    |  28 +-
 src/pages/Profile.js                          | 152 ++++-----
 src/pages/Register.js                         |  20 +-
 src/pages/ResetPassword.js                    |  30 +-
 src/pages/Resources.js                        |  30 +-
 src/pages/TermsOfService.js                   |  98 +++---
 src/pages/VerifyEmail.js                      |  26 +-
 src/pages/admin/AdminBylaws.js                |  50 +--
 src/pages/admin/AdminDashboard.js             |  76 ++---
 src/pages/admin/AdminDonations.js             | 124 ++++----
 src/pages/admin/AdminEventAttendance.js       | 151 +++++----
 src/pages/admin/AdminEvents.js                | 297 +++++++++---------
 src/pages/admin/AdminFinancials.js            |  32 +-
 src/pages/admin/AdminGallery.js               |  58 ++--
 src/pages/admin/AdminMembers.js               |  90 +++---
 src/pages/admin/AdminNewsletters.js           |  36 +--
 src/pages/admin/AdminPermissions.js           |  64 ++--
 src/pages/admin/AdminPlans.js                 |  96 +++---
 src/pages/admin/AdminStaff.js                 |  75 +++--
 src/pages/admin/AdminSubscriptions.js         | 183 ++++++-----
 src/pages/admin/AdminUserView.js              |  92 +++---
 src/pages/admin/AdminValidations.js           |  66 ++--
 src/pages/members/Bylaws.js                   |  48 +--
 src/pages/members/EventGallery.js             |  48 +--
 src/pages/members/Financials.js               |  34 +-
 src/pages/members/MemberCalendar.js           |  92 +++---
 src/pages/members/MemberProfile.js            |  88 +++---
 src/pages/members/MembersDirectory.js         | 172 +++++-----
 src/pages/members/NewsletterArchive.js        |  42 +--
 tailwind.config.js                            |  47 ++-
 77 files changed, 2519 insertions(+), 2338 deletions(-)

diff --git a/README.md b/README.md
index 2589962..3c2f651 100644
--- a/README.md
+++ b/README.md
@@ -33,6 +33,7 @@ npm install
 ```
 
 **Key Dependencies:**
+
 - `react@19.0.0` - UI library
 - `react-router-dom@7.5.1` - Routing
 - `axios@1.8.4` - HTTP client
@@ -57,6 +58,7 @@ REACT_APP_BACKEND_URL=http://localhost:8000
 ```
 
 **Important:**
+
 - All environment variables must start with `REACT_APP_`
 - Restart development server after changing `.env`
 
@@ -71,6 +73,7 @@ npm start
 ```
 
 **Development server will be available at:**
+
 - Frontend: http://localhost:3000
 - Auto-reloads on file changes
 
@@ -154,31 +157,33 @@ frontend/
 
 ### Core Technologies
 
-| Technology | Purpose | Version |
-|------------|---------|---------|
-| React | UI library | 19.0.0 |
-| React Router | Client-side routing | 7.5.1 |
-| Axios | HTTP requests | 1.8.4 |
-| React Hook Form | Form handling | 7.56.2 |
-| Zod | Schema validation | 3.24.4 |
-| Tailwind CSS | CSS framework | 3.4.17 |
-| Radix UI | Component library | Latest |
-| Lucide React | Icons | 0.507.0 |
-| Sonner | Toast notifications | 1.7.4 |
+| Technology      | Purpose             | Version |
+| --------------- | ------------------- | ------- |
+| React           | UI library          | 19.0.0  |
+| React Router    | Client-side routing | 7.5.1   |
+| Axios           | HTTP requests       | 1.8.4   |
+| React Hook Form | Form handling       | 7.56.2  |
+| Zod             | Schema validation   | 3.24.4  |
+| Tailwind CSS    | CSS framework       | 3.4.17  |
+| Radix UI        | Component library   | Latest  |
+| Lucide React    | Icons               | 0.507.0 |
+| Sonner          | Toast notifications | 1.7.4   |
 
 ### Key Features
 
 #### Authentication System
 
 **Global Auth Context** (`src/context/AuthContext.js`):
+
 - JWT token storage in localStorage
 - Automatic token injection via Axios interceptor
 - User state management
 - Protected route wrapper
 
 **Usage:**
+
 ```jsx
-import { useAuth } from '../context/AuthContext';
+import { useAuth } from "../context/AuthContext";
 
 function MyComponent() {
   const { user, login, logout, isAuthenticated } = useAuth();
@@ -190,6 +195,7 @@ function MyComponent() {
 #### Protected Routes
 
 **PrivateRoute Wrapper:**
+
 ```jsx
 <Route path="/dashboard" element={
   <PrivateRoute>
@@ -208,61 +214,68 @@ function MyComponent() {
 #### API Integration
 
 **Axios Instance** (`src/utils/api.js`):
+
 - Automatic JWT token injection
 - Request/response interceptors
 - Error handling
 - Base URL configuration
 
 **Usage:**
+
 ```jsx
-import api from '../utils/api';
+import api from "../utils/api";
 
 // GET request
-const response = await api.get('/members/profile');
+const response = await api.get("/members/profile");
 
 // POST request with data
-const response = await api.post('/admin/users/123/reject', {
-  reason: 'Incomplete application'
+const response = await api.post("/admin/users/123/reject", {
+  reason: "Incomplete application",
 });
 
 // File upload
 const formData = new FormData();
-formData.append('file', file);
-const response = await api.post('/members/profile/upload-photo', formData, {
-  headers: { 'Content-Type': 'multipart/form-data' }
+formData.append("file", file);
+const response = await api.post("/members/profile/upload-photo", formData, {
+  headers: { "Content-Type": "multipart/form-data" },
 });
 ```
 
 #### Form Handling
 
 **React Hook Form + Zod Pattern:**
+
 ```jsx
-import { useForm } from 'react-hook-form';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { z } from 'zod';
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
 
 const schema = z.object({
-  email: z.string().email('Invalid email address'),
-  password: z.string().min(8, 'Password must be at least 8 characters')
+  email: z.string().email("Invalid email address"),
+  password: z.string().min(8, "Password must be at least 8 characters"),
 });
 
 function LoginForm() {
-  const { register, handleSubmit, formState: { errors } } = useForm({
-    resolver: zodResolver(schema)
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm({
+    resolver: zodResolver(schema),
   });
 
   const onSubmit = async (data) => {
     try {
-      await api.post('/auth/login', data);
-      toast.success('Login successful!');
+      await api.post("/auth/login", data);
+      toast.success("Login successful!");
     } catch (error) {
-      toast.error(error.response?.data?.detail || 'Login failed');
+      toast.error(error.response?.data?.detail || "Login failed");
     }
   };
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <Input {...register('email')} />
+      <Input {...register("email")} />
       {errors.email && <span>{errors.email.message}</span>}
       {/* ... */}
     </form>
@@ -273,18 +286,19 @@ function LoginForm() {
 #### Toast Notifications
 
 **Using Sonner:**
+
 ```jsx
-import { toast } from 'sonner';
+import { toast } from "sonner";
 
 // Success
-toast.success('Profile updated successfully!');
+toast.success("Profile updated successfully!");
 
 // Error
-toast.error('Failed to upload photo');
+toast.error("Failed to upload photo");
 
 // Custom
-toast('Processing...', {
-  description: 'Please wait while we process your request'
+toast("Processing...", {
+  description: "Please wait while we process your request",
 });
 ```
 
@@ -293,11 +307,13 @@ toast('Processing...', {
 #### Public Pages
 
 **Landing.js**
+
 - Hero section with LOAF branding
 - Feature highlights
 - Call-to-action buttons
 
 **Register.js** (388 lines)
+
 - 4-step registration wizard:
   1. Basic Info (email, password, name)
   2. Personal Details (phone, address, DOB)
@@ -308,6 +324,7 @@ toast('Processing...', {
 - Email verification trigger
 
 **Login.js**
+
 - Email/password authentication
 - JWT token storage
 - Remember me functionality
@@ -316,12 +333,14 @@ toast('Processing...', {
 #### Member Pages
 
 **Dashboard.js**
+
 - Welcome message with user name
 - Upcoming events preview
 - Membership status card
 - Quick action buttons
 
 **Profile.js**
+
 - Profile photo upload with Avatar component
 - File validation (image types, 50MB max)
 - Personal information editing
@@ -329,12 +348,14 @@ toast('Processing...', {
 - Save changes with API update
 
 **Events.js**
+
 - Event listing with filters
 - Search functionality
 - Upcoming/past events toggle
 - Event cards with cover images
 
 **EventDetails.js**
+
 - Full event information
 - RSVP form (Yes/No/Maybe)
 - Attendance confirmation
@@ -343,36 +364,42 @@ toast('Processing...', {
 #### Admin Pages
 
 **AdminDashboard.js**
+
 - Statistics overview
 - Pending validations count
 - Recent activity feed
 - Quick links to management pages
 
 **AdminUsers.js**
+
 - User listing with search/filters
 - Status badges
 - Bulk operations
 - CSV export
 
 **AdminValidations.js**
+
 - Pending user applications
 - Approve button
 - **Reject button with RejectionDialog**
 - Validation workflow management
 
 **AdminSubscriptions.js**
+
 - Subscription listing
 - Status filters (active, cancelled, expired)
 - **CSV export dropdown** (Export All / Export Current View)
 - Edit subscription dialog
 
 **AdminDonations.js** (400+ lines)
+
 - 4 stats cards: Total, Member, Public, Total Amount
 - Filters: type, status, date range, search
 - Responsive table with mobile cards
 - **CSV export functionality**
 
 **AdminEvents.js**
+
 - Event management interface
 - Create/edit events
 - Publish/unpublish toggle
@@ -385,40 +412,50 @@ toast('Processing...', {
 **45+ UI Components** in `src/components/ui/`:
 
 **Form Components:**
+
 - Button, Input, Textarea, Checkbox, Radio
 - Select, Label, Form
 
 **Layout Components:**
+
 - Card, Dialog, Sheet (Drawer), Popover
 - Dropdown Menu, Tabs, Accordion
 
 **Feedback Components:**
+
 - Alert, Badge, Toast (Sonner)
 - Progress, Skeleton, Spinner
 
 **Navigation:**
+
 - Navigation Menu, Breadcrumb, Pagination
 
 **Usage Example:**
-```jsx
-import { Button } from './components/ui/button';
-import { Dialog, DialogContent, DialogTitle } from './components/ui/dialog';
-import { Select, SelectTrigger, SelectContent, SelectItem } from './components/ui/select';
 
-<Button className="bg-[#664fa3] text-white">
-  Click me
-</Button>
+```jsx
+import { Button } from "./components/ui/button";
+import { Dialog, DialogContent, DialogTitle } from "./components/ui/dialog";
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+} from "./components/ui/select";
+
+<Button className="bg-var(--purple-lavender) text-white">Click me</Button>;
 ```
 
 ### Admin Sidebar Features
 
 **Logo Integration:**
+
 - LOAF logo in header
 - Shows logo + "Admin" text when expanded
 - Logo only when collapsed
 - Smooth transition animations
 
 **Navigation Groups:**
+
 - **Dashboard** (standalone)
 - **MEMBERSHIP** - Staff, Members, Validations
 - **FINANCIALS** - Plans, Subscriptions, Donations
@@ -433,6 +470,7 @@ import { Select, SelectTrigger, SelectContent, SelectItem } from './components/u
 ### Color Palette
 
 **LOAF Brand Colors:**
+
 ```css
 --primary: #422268      /* Deep Purple - Primary brand */
 --secondary: #664fa3    /* Light Purple - Secondary elements */
@@ -443,21 +481,24 @@ import { Select, SelectTrigger, SelectContent, SelectItem } from './components/u
 ```
 
 **Usage in Tailwind:**
+
 ```jsx
-<div className="bg-[#422268] text-white">
-  <h1 className="text-[#ff9e77]">Accent Text</h1>
-  <p className="text-[#664fa3]">Secondary Text</p>
+<div className="bg-var(--purple-ink) text-white">
+  <h1 className="text-var(--orange-light)">Accent Text</h1>
+  <p className="text-var(--purple-lavender)">Secondary Text</p>
 </div>
 ```
 
 ### Typography
 
 **Font Families:**
+
 - **Headings**: 'Inter', sans-serif
 - **Body**: 'Nunito Sans', sans-serif
 - **Code**: 'Fira Code', monospace (if needed)
 
 **Font Sizes:**
+
 ```css
 text-xs    → 0.75rem (12px)
 text-sm    → 0.875rem (14px)
@@ -469,11 +510,12 @@ text-3xl   → 1.875rem (30px)
 ```
 
 **Usage:**
+
 ```jsx
-<h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+<h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
   Page Title
 </h1>
-<p className="text-base text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+<p className="text-base text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
   Body text
 </p>
 ```
@@ -481,6 +523,7 @@ text-3xl   → 1.875rem (30px)
 ### Spacing System
 
 **Tailwind Spacing Scale:**
+
 ```css
 p-2  → 0.5rem (8px)
 p-4  → 1rem (16px)
@@ -493,21 +536,23 @@ gap-2, gap-4, gap-6, gap-8 (same scale for flex/grid gaps)
 ### Component Styling Patterns
 
 **Cards:**
+
 ```jsx
-<Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+<Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
   {/* Content */}
 </Card>
 ```
 
 **Buttons:**
+
 ```jsx
 // Primary
-<Button className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-6 py-3">
+<Button className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full px-6 py-3">
   Primary Action
 </Button>
 
 // Secondary
-<Button variant="outline" className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full">
+<Button variant="outline" className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full">
   Secondary Action
 </Button>
 
@@ -518,17 +563,19 @@ gap-2, gap-4, gap-6, gap-8 (same scale for flex/grid gaps)
 ```
 
 **Form Inputs:**
+
 ```jsx
-<Input className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]" />
-<Textarea className="rounded-xl border-2 border-[#ddd8eb] min-h-[120px]" />
+<Input className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)" />
+<Textarea className="rounded-xl border-2 border-var(--neutral-800) min-h-[120px]" />
 <Select>
-  <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+  <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
     <SelectValue placeholder="Select..." />
   </SelectTrigger>
 </Select>
 ```
 
 **Badges:**
+
 ```jsx
 // Status badges
 <Badge className="bg-green-100 text-green-800">Active</Badge>
@@ -539,22 +586,38 @@ gap-2, gap-4, gap-6, gap-8 (same scale for flex/grid gaps)
 ### Icons (Lucide React)
 
 **Common Icons:**
+
 ```jsx
 import {
-  User, Mail, Phone, MapPin,         // User info
-  Calendar, Clock, CheckCircle,      // Status
-  Edit, Trash2, X, Check,            // Actions
-  Search, Filter, Download,          // Utilities
-  Heart, DollarSign, CreditCard,     // Financial
-  AlertTriangle, Info, HelpCircle    // Alerts
-} from 'lucide-react';
+  User,
+  Mail,
+  Phone,
+  MapPin, // User info
+  Calendar,
+  Clock,
+  CheckCircle, // Status
+  Edit,
+  Trash2,
+  X,
+  Check, // Actions
+  Search,
+  Filter,
+  Download, // Utilities
+  Heart,
+  DollarSign,
+  CreditCard, // Financial
+  AlertTriangle,
+  Info,
+  HelpCircle, // Alerts
+} from "lucide-react";
 
-<User className="h-5 w-5 text-[#664fa3]" />
+<User className="h-5 w-5 text-var(--purple-lavender)" />;
 ```
 
 ### Responsive Design
 
 **Breakpoints:**
+
 ```css
 sm: 640px   → @media (min-width: 640px)
 md: 768px   → @media (min-width: 768px)
@@ -564,6 +627,7 @@ xl: 1280px  → @media (min-width: 1280px)
 ```
 
 **Mobile-First Approach:**
+
 ```jsx
 <div className="flex flex-col md:flex-row gap-4">
   {/* Stacks vertically on mobile, horizontal on tablet+ */}
@@ -581,6 +645,7 @@ xl: 1280px  → @media (min-width: 1280px)
 ### Animations
 
 **Tailwind Transitions:**
+
 ```jsx
 <Button className="transition-all duration-200 hover:scale-105">
   Hover me
@@ -600,6 +665,7 @@ xl: 1280px  → @media (min-width: 1280px)
 #### 1. Environment Variables
 
 Create `.env.production`:
+
 ```bash
 REACT_APP_BACKEND_URL=https://api.loaf.org
 REACT_APP_SENTRY_DSN=your-production-sentry-dsn
@@ -622,6 +688,7 @@ Build output will be in `/build` directory.
 ### Option A: Netlify (Recommended)
 
 **Via Netlify CLI:**
+
 ```bash
 # Install Netlify CLI
 npm install -g netlify-cli
@@ -634,6 +701,7 @@ netlify deploy --prod --dir=build
 ```
 
 **Via Git Integration:**
+
 1. Push code to GitHub/GitLab
 2. Connect repository in Netlify dashboard
 3. Configure:
@@ -643,9 +711,11 @@ netlify deploy --prod --dir=build
 4. Deploy automatically on push
 
 **Configure Redirects** (`public/_redirects`):
+
 ```
 /*    /index.html   200
 ```
+
 This enables client-side routing.
 
 ### Option B: Vercel
@@ -659,11 +729,10 @@ vercel --prod
 ```
 
 **Configure** (`vercel.json`):
+
 ```json
 {
-  "rewrites": [
-    { "source": "/(.*)", "destination": "/index.html" }
-  ],
+  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }],
   "env": {
     "REACT_APP_BACKEND_URL": "https://api.loaf.org"
   }
@@ -673,11 +742,13 @@ vercel --prod
 ### Option C: Traditional Web Server (Nginx)
 
 **1. Copy build files to server:**
+
 ```bash
 scp -r build/* user@server:/var/www/loaf-frontend/
 ```
 
 **2. Configure Nginx** (`/etc/nginx/sites-available/loaf-frontend`):
+
 ```nginx
 server {
     listen 80;
@@ -702,6 +773,7 @@ server {
 ```
 
 **3. Enable site and restart:**
+
 ```bash
 sudo ln -s /etc/nginx/sites-available/loaf-frontend /etc/nginx/sites-enabled/
 sudo nginx -t
@@ -709,6 +781,7 @@ sudo systemctl restart nginx
 ```
 
 **4. SSL Certificate:**
+
 ```bash
 sudo certbot --nginx -d app.loaf.org
 ```
@@ -716,12 +789,14 @@ sudo certbot --nginx -d app.loaf.org
 ### Option D: AWS S3 + CloudFront
 
 **1. Create S3 bucket:**
+
 ```bash
 aws s3 mb s3://loaf-frontend
 aws s3 sync build/ s3://loaf-frontend --delete
 ```
 
 **2. Configure bucket for static hosting:**
+
 ```bash
 aws s3 website s3://loaf-frontend --index-document index.html --error-document index.html
 ```
@@ -731,25 +806,31 @@ aws s3 website s3://loaf-frontend --index-document index.html --error-document i
 ### Performance Optimization
 
 **1. Code Splitting:**
+
 ```jsx
 // Lazy load routes
-import { lazy, Suspense } from 'react';
+import { lazy, Suspense } from "react";
 
-const AdminDonations = lazy(() => import('./pages/admin/AdminDonations'));
+const AdminDonations = lazy(() => import("./pages/admin/AdminDonations"));
 
-<Route path="/admin/donations" element={
-  <Suspense fallback={<div>Loading...</div>}>
-    <AdminDonations />
-  </Suspense>
-} />
+<Route
+  path="/admin/donations"
+  element={
+    <Suspense fallback={<div>Loading...</div>}>
+      <AdminDonations />
+    </Suspense>
+  }
+/>;
 ```
 
 **2. Image Optimization:**
+
 - Use WebP format when possible
 - Compress images before upload
 - Use lazy loading: `loading="lazy"`
 
 **3. Bundle Analysis:**
+
 ```bash
 # Install analyzer
 yarn add --dev webpack-bundle-analyzer
@@ -762,6 +843,7 @@ npx webpack-bundle-analyzer build/static/js/*.js
 ### CI/CD Pipeline
 
 **GitHub Actions** (`.github/workflows/deploy.yml`):
+
 ```yaml
 name: Deploy Frontend
 
@@ -776,7 +858,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: "18"
       - run: yarn install
       - run: yarn build
         env:
@@ -800,6 +882,7 @@ jobs:
 **Error:** `Module not found: Can't resolve 'package-name'`
 
 **Solution:**
+
 ```bash
 # Clear node_modules and reinstall
 rm -rf node_modules yarn.lock
@@ -815,6 +898,7 @@ npm install
 **Error:** `Access to XMLHttpRequest blocked by CORS policy`
 
 **Solution:**
+
 - Backend must include frontend URL in CORS_ORIGINS
 - Check REACT_APP_BACKEND_URL is correct
 - Backend: `CORS_ORIGINS=http://localhost:3000,https://app.loaf.org`
@@ -824,6 +908,7 @@ npm install
 **Error:** API returns 401 after some time
 
 **Solution:**
+
 - JWT token expired (default 30 minutes)
 - User needs to log in again
 - Check token is being sent in Authorization header
@@ -833,6 +918,7 @@ npm install
 **Error:** `process.env.REACT_APP_BACKEND_URL is undefined`
 
 **Solution:**
+
 - Ensure variable name starts with `REACT_APP_`
 - Restart development server after changing .env
 - Don't commit .env to git (use .env.example)
@@ -842,6 +928,7 @@ npm install
 **Error:** `npm run build` fails with memory error
 
 **Solution:**
+
 ```bash
 # Increase Node memory limit
 NODE_OPTIONS=--max_old_space_size=4096 yarn build
@@ -852,6 +939,7 @@ NODE_OPTIONS=--max_old_space_size=4096 yarn build
 **Error:** Refresh on /dashboard returns 404
 
 **Solution:**
+
 - Configure server to redirect all routes to index.html
 - Netlify: Add `_redirects` file
 - Nginx: Use `try_files $uri /index.html`
@@ -862,6 +950,7 @@ NODE_OPTIONS=--max_old_space_size=4096 yarn build
 **Error:** Profile photos return 404
 
 **Solution:**
+
 - Check R2_PUBLIC_URL is correct in backend .env
 - Verify Cloudflare R2 bucket is public
 - Check CORS settings in R2 bucket
@@ -870,16 +959,16 @@ NODE_OPTIONS=--max_old_space_size=4096 yarn build
 
 ```jsx
 // Add to any component for debugging
-console.log('Component rendered', { user, props });
+console.log("Component rendered", { user, props });
 
 // Check API responses
 api.interceptors.response.use(
-  response => {
-    console.log('API Response:', response);
+  (response) => {
+    console.log("API Response:", response);
     return response;
   },
-  error => {
-    console.error('API Error:', error.response);
+  (error) => {
+    console.error("API Error:", error.response);
     return Promise.reject(error);
   }
 );
diff --git a/src/components/AddToCalendarButton.js b/src/components/AddToCalendarButton.js
index 8726c4e..038775d 100644
--- a/src/components/AddToCalendarButton.js
+++ b/src/components/AddToCalendarButton.js
@@ -128,7 +128,7 @@ export default function AddToCalendarButton({
         {event && (
           <>
             {/* Single Event Export Options */}
-            <div className="px-2 py-1.5 text-sm font-semibold text-[#422268]">
+            <div className="px-2 py-1.5 text-sm font-semibold text-var(--purple-ink)">
               Add This Event
             </div>
 
@@ -137,7 +137,7 @@ export default function AddToCalendarButton({
               className="cursor-pointer"
             >
               <svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" />
               </svg>
               Google Calendar
             </DropdownMenuItem>
@@ -147,7 +147,7 @@ export default function AddToCalendarButton({
               className="cursor-pointer"
             >
               <svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M7 2h14v20H7V2zm7 11c0 2.761-2.239 5-5 5H2c-.552 0-1-.448-1-1s.448-1 1-1h7c1.657 0 3-1.343 3-3V9c0-1.657-1.343-3-3-3H2c-.552 0-1-.448-1-1s.448-1 1-1h7c2.761 0 5 2.239 5 5v4z"/>
+                <path d="M7 2h14v20H7V2zm7 11c0 2.761-2.239 5-5 5H2c-.552 0-1-.448-1-1s.448-1 1-1h7c1.657 0 3-1.343 3-3V9c0-1.657-1.343-3-3-3H2c-.552 0-1-.448-1-1s.448-1 1-1h7c2.761 0 5 2.239 5 5v4z" />
               </svg>
               Outlook Web
             </DropdownMenuItem>
@@ -157,7 +157,7 @@ export default function AddToCalendarButton({
               className="cursor-pointer"
             >
               <svg className="h-4 w-4 mr-2" viewBox="0 0 24 24" fill="currentColor">
-                <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"/>
+                <path d="M17.05 20.28c-.98.95-2.05.8-3.08.35-1.09-.46-2.09-.48-3.24 0-1.44.62-2.2.44-3.06-.35C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z" />
               </svg>
               Apple Calendar
             </DropdownMenuItem>
@@ -177,7 +177,7 @@ export default function AddToCalendarButton({
         {showSubscribe && (
           <>
             {/* Subscription Options */}
-            <div className="px-2 py-1.5 text-sm font-semibold text-[#422268]">
+            <div className="px-2 py-1.5 text-sm font-semibold text-var(--purple-ink)">
               Calendar Feeds
             </div>
 
@@ -187,7 +187,7 @@ export default function AddToCalendarButton({
             >
               <RefreshCw className="h-4 w-4 mr-2" />
               Subscribe to My Events
-              <div className="text-xs text-[#664fa3] mt-0.5">
+              <div className="text-xs text-var(--purple-lavender) mt-0.5">
                 Auto-syncs your RSVP'd events
               </div>
             </DropdownMenuItem>
@@ -198,7 +198,7 @@ export default function AddToCalendarButton({
             >
               <Download className="h-4 w-4 mr-2" />
               Download All Events
-              <div className="text-xs text-[#664fa3] mt-0.5">
+              <div className="text-xs text-var(--purple-lavender) mt-0.5">
                 One-time import of all upcoming events
               </div>
             </DropdownMenuItem>
@@ -206,7 +206,7 @@ export default function AddToCalendarButton({
         )}
 
         {!event && !showSubscribe && (
-          <div className="px-2 py-6 text-center text-sm text-[#664fa3]">
+          <div className="px-2 py-6 text-center text-sm text-var(--purple-lavender)">
             No event selected
           </div>
         )}
diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index ffc10bf..5de7d7c 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -211,10 +211,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           className={`
             flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
             ${item.disabled
-              ? 'opacity-50 cursor-not-allowed text-[#664fa3]'
+              ? 'opacity-50 cursor-not-allowed text-var(--purple-lavender)'
               : active
-                ? 'bg-[#ff9e77]/10 text-[#ff9e77]'
-                : 'text-[#422268] hover:bg-[#DDD8EB]/20'
+                ? 'bg-var(--orange-light)/10 text-var(--orange-light)'
+                : 'text-var(--purple-ink) hover:bg-var(--neutral-800)/20'
             }
           `}
         >
@@ -229,7 +229,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             <>
               <span className="flex-1">{item.name}</span>
               {item.disabled && (
-                <Badge className="bg-[#DDD8EB] text-[#422268] text-xs px-2 py-0.5">
+                <Badge className="bg-var(--neutral-800) text-var(--purple-ink) text-xs px-2 py-0.5">
                   Soon
                 </Badge>
               )}
@@ -265,7 +265,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       {/* Sidebar */}
       <aside
         className={`
-          bg-white border-r border-[#ddd8eb] transition-all duration-300 ease-out
+          bg-background border-r border-var(--neutral-800) transition-all duration-300 ease-out
           ${isMobile ? 'fixed inset-y-0 left-0 z-40' : 'relative'}
           ${isOpen ? 'w-64' : 'w-16'}
           ${isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'}
@@ -273,7 +273,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         `}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-[#ddd8eb]">
+        <div className="flex items-center justify-between p-4 border-b border-var(--neutral-800)">
           <Link to="/" className="flex items-center gap-3 group flex-1 min-w-0">
             <img
               src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
@@ -294,7 +294,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           </Link>
           <button
             onClick={onToggle}
-            className="p-2 rounded-lg hover:bg-[#DDD8EB]/20 transition-colors"
+            className="p-2 rounded-lg hover:bg-var(--neutral-800)/20 transition-colors"
             aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {isMobile ? (
@@ -376,11 +376,11 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         </nav>
 
         {/* User Section */}
-        <div className="border-t border-[#ddd8eb] p-4 space-y-2">
+        <div className="border-t border-var(--neutral-800) p-4 space-y-2">
           {isOpen && user && (
             <div className="px-4 py-3 mb-2 flex justify-between items-center">
               <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold">
+                <div className="h-10 w-10 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold">
                   {user.first_name?.[0]}{user.last_name?.[0]}
                 </div>
                 <div className="flex-1 min-w-0">
@@ -427,16 +427,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* Storage Usage Widget */}
           <div className="mb-2">
             {isOpen ? (
-              <div className="px-4 py-3 bg-[#F8F7FB] rounded-lg">
+              <div className="px-4 py-3 bg-var(--lavender-500) rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-sm font-medium text-primary">Storage Usage</span>
                   <span className="text-xs text-muted-foreground">{storagePercentage}%</span>
                 </div>
-                <div className="w-full bg-[#ddd8eb] rounded-full h-2">
+                <div className="w-full bg-var(--neutral-800) rounded-full h-2">
                   <div
                     className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
                       storagePercentage > 75 ? 'bg-yellow-500' :
-                        'bg-[#81B29A]'
+                        'bg-var(--green-light)'
                       }`}
                     style={{ width: `${storagePercentage}%` }}
                   />
diff --git a/src/components/AttendanceDialog.js b/src/components/AttendanceDialog.js
index 6f1fd6c..ee0d043 100644
--- a/src/components/AttendanceDialog.js
+++ b/src/components/AttendanceDialog.js
@@ -55,21 +55,21 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-white">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}
           </DialogTitle>
         </DialogHeader>
 
         <div className="space-y-4 mt-4">
           {rsvps.length === 0 ? (
-            <p className="text-center text-[#664fa3] py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
+            <p className="text-center text-var(--purple-lavender) py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
           ) : (
             rsvps.map((rsvp) => (
               <div
                 key={rsvp.user_id}
-                className="flex items-center gap-3 p-4 border-2 border-[#ddd8eb] rounded-xl hover:border-[#664fa3] transition-colors"
+                className="flex items-center gap-3 p-4 border-2 border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) transition-colors"
               >
                 <Checkbox
                   checked={attendance[rsvp.user_id] || false}
@@ -79,11 +79,11 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
                   className="w-5 h-5"
                 />
                 <div className="flex-1">
-                  <p className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
-                  <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
+                  <p className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
+                  <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
                 </div>
                 {rsvp.attended && (
-                  <span className="text-sm text-[#81B29A] font-medium">
+                  <span className="text-sm text-var(--green-light) font-medium">
                     ✓ Attended
                   </span>
                 )}
@@ -96,14 +96,14 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
           <Button
             onClick={handleSave}
             disabled={loading}
-            className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
+            className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
           >
             {loading ? 'Saving...' : 'Save Attendance'}
           </Button>
           <Button
             onClick={() => onOpenChange(false)}
             variant="outline"
-            className="flex-1 border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white hover:text-[#422268] rounded-full"
+            className="flex-1 border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background hover:text-var(--purple-ink) rounded-full"
           >
             Cancel
           </Button>
diff --git a/src/components/ChangePasswordDialog.js b/src/components/ChangePasswordDialog.js
index 4610a00..879b490 100644
--- a/src/components/ChangePasswordDialog.js
+++ b/src/components/ChangePasswordDialog.js
@@ -66,17 +66,17 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-md bg-white">
+      <DialogContent className="sm:max-w-md bg-background">
         <DialogHeader>
           <div className="flex items-center gap-2 mb-2">
-            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[#f1eef9]">
-              <Lock className="h-5 w-5 text-[#ff9e77]" />
+            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-var(--lavender-300)">
+              <Lock className="h-5 w-5 text-var(--orange-light)" />
             </div>
-            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Change Password
             </DialogTitle>
           </div>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your password to keep your account secure.
           </DialogDescription>
         </DialogHeader>
@@ -92,7 +92,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.currentPassword}
               onChange={handleInputChange}
               placeholder="Enter current password"
-              className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -106,7 +106,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.newPassword}
               onChange={handleInputChange}
               placeholder="Enter new password (min. 6 characters)"
-              className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -120,7 +120,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.confirmPassword}
               onChange={handleInputChange}
               placeholder="Re-enter new password"
-              className="h-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -136,7 +136,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6 disabled:opacity-50"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 disabled:opacity-50"
             >
               {loading ? 'Changing...' : 'Change Password'}
             </Button>
diff --git a/src/components/ConfirmationDialog.js b/src/components/ConfirmationDialog.js
index 4b9fc2f..7164b56 100644
--- a/src/components/ConfirmationDialog.js
+++ b/src/components/ConfirmationDialog.js
@@ -38,8 +38,8 @@ const ConfirmationDialog = ({
   const variants = {
     warning: {
       icon: AlertTriangle,
-      iconColor: 'text-[#ff9e77]',
-      confirmButtonClass: 'bg-[#ff9e77] text-white hover:bg-[#e88d66] rounded-full px-6',
+      iconColor: 'text-var(--orange-light)',
+      confirmButtonClass: 'bg-var(--orange-light) text-white hover:bg-var(--orange-sand) rounded-full px-6',
     },
     danger: {
       icon: AlertTriangle,
@@ -48,13 +48,13 @@ const ConfirmationDialog = ({
     },
     info: {
       icon: Info,
-      iconColor: 'text-[#664fa3]',
-      confirmButtonClass: 'bg-[#664fa3] text-white hover:bg-[#553d8a] rounded-full px-6',
+      iconColor: 'text-var(--purple-lavender)',
+      confirmButtonClass: 'bg-var(--purple-lavender) text-white hover:bg-var(--purple-plum) rounded-full px-6',
     },
     success: {
       icon: CheckCircle,
-      iconColor: 'text-[#81B29A]',
-      confirmButtonClass: 'bg-[#81B29A] text-white hover:bg-[#6fa188] rounded-full px-6',
+      iconColor: 'text-var(--green-light)',
+      confirmButtonClass: 'bg-var(--green-light) text-white hover:bg-var(--green-pastel) rounded-full px-6',
     },
   };
 
@@ -63,21 +63,21 @@ const ConfirmationDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="bg-white rounded-2xl border border-[#ddd8eb] p-0 overflow-hidden max-w-md">
+      <AlertDialogContent className="bg-background rounded-2xl border border-var(--neutral-800) p-0 overflow-hidden max-w-md">
         <AlertDialogHeader className="p-6 pb-4">
           <div className="flex items-start gap-4">
-            <div className={`p-3 rounded-full bg-[#F8F7FB] ${config.iconColor}`}>
+            <div className={`p-3 rounded-full bg-var(--lavender-500) ${config.iconColor}`}>
               <Icon className="h-6 w-6" />
             </div>
             <div className="flex-1">
               <AlertDialogTitle
-                className="text-xl font-semibold text-[#422268] mb-2"
+                className="text-xl font-semibold text-var(--purple-ink) mb-2"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {title}
               </AlertDialogTitle>
               <AlertDialogDescription
-                className="text-[#664fa3] text-sm leading-relaxed"
+                className="text-var(--purple-lavender) text-sm leading-relaxed"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 {description}
@@ -85,9 +85,9 @@ const ConfirmationDialog = ({
             </div>
           </div>
         </AlertDialogHeader>
-        <AlertDialogFooter className="p-6 pt-4 bg-[#F8F7FB] flex-row gap-3 justify-end">
+        <AlertDialogFooter className="p-6 pt-4 bg-var(--lavender-500) flex-row gap-3 justify-end">
           <AlertDialogCancel
-            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white rounded-full px-6"
+            className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background rounded-full px-6"
             disabled={loading}
           >
             {cancelText}
diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js
index a2d11e5..32ad645 100644
--- a/src/components/CreateMemberDialog.js
+++ b/src/components/CreateMemberDialog.js
@@ -121,11 +121,11 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
             Create Member
           </DialogTitle>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new member account with direct login access. Member will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -135,7 +135,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Email & Password Row */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="email" className="text-[#422268]">
+                <Label htmlFor="email" className="text-var(--purple-ink)">
                   Email <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -143,7 +143,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="member@example.com"
                 />
                 {errors.email && (
@@ -152,7 +152,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="password" className="text-[#422268]">
+                <Label htmlFor="password" className="text-var(--purple-ink)">
                   Password <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -160,7 +160,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="Minimum 8 characters"
                 />
                 {errors.password && (
@@ -172,14 +172,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Name Row */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="first_name" className="text-[#422268]">
+                <Label htmlFor="first_name" className="text-var(--purple-ink)">
                   First Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="John"
                 />
                 {errors.first_name && (
@@ -188,14 +188,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="last_name" className="text-[#422268]">
+                <Label htmlFor="last_name" className="text-var(--purple-ink)">
                   Last Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="Doe"
                 />
                 {errors.last_name && (
@@ -206,7 +206,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Phone */}
             <div className="grid gap-2">
-              <Label htmlFor="phone" className="text-[#422268]">
+              <Label htmlFor="phone" className="text-var(--purple-ink)">
                 Phone <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -214,7 +214,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -224,14 +224,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Address */}
             <div className="grid gap-2">
-              <Label htmlFor="address" className="text-[#422268]">
+              <Label htmlFor="address" className="text-var(--purple-ink)">
                 Address
               </Label>
               <Input
                 id="address"
                 value={formData.address}
                 onChange={(e) => handleChange('address', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="123 Main St"
               />
             </div>
@@ -239,35 +239,35 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* City, State, Zipcode Row */}
             <div className="grid md:grid-cols-3 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="city" className="text-[#422268]">City</Label>
+                <Label htmlFor="city" className="text-var(--purple-ink)">City</Label>
                 <Input
                   id="city"
                   value={formData.city}
                   onChange={(e) => handleChange('city', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="San Francisco"
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="state" className="text-[#422268]">State</Label>
+                <Label htmlFor="state" className="text-var(--purple-ink)">State</Label>
                 <Input
                   id="state"
                   value={formData.state}
                   onChange={(e) => handleChange('state', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="CA"
                   maxLength={2}
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="zipcode" className="text-[#422268]">Zipcode</Label>
+                <Label htmlFor="zipcode" className="text-var(--purple-ink)">Zipcode</Label>
                 <Input
                   id="zipcode"
                   value={formData.zipcode}
                   onChange={(e) => handleChange('zipcode', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="94102"
                 />
               </div>
@@ -276,24 +276,24 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Dates Row */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="date_of_birth" className="text-[#422268]">Date of Birth</Label>
+                <Label htmlFor="date_of_birth" className="text-var(--purple-ink)">Date of Birth</Label>
                 <Input
                   id="date_of_birth"
                   type="date"
                   value={formData.date_of_birth}
                   onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="member_since" className="text-[#422268]">Member Since</Label>
+                <Label htmlFor="member_since" className="text-var(--purple-ink)">Member Since</Label>
                 <Input
                   id="member_since"
                   type="date"
                   value={formData.member_since}
                   onChange={(e) => handleChange('member_since', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 />
               </div>
             </div>
@@ -311,7 +311,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             </Button>
             <Button
               type="submit"
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
               disabled={loading}
             >
               {loading ? (
diff --git a/src/components/CreateStaffDialog.js b/src/components/CreateStaffDialog.js
index 314aa70..a5bc69e 100644
--- a/src/components/CreateStaffDialog.js
+++ b/src/components/CreateStaffDialog.js
@@ -101,11 +101,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[600px] rounded-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
             Create Staff Member
           </DialogTitle>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new staff account with direct login access. User will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -114,7 +114,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
           <div className="grid gap-6 py-4">
             {/* Email */}
             <div className="grid gap-2">
-              <Label htmlFor="email" className="text-[#422268]">
+              <Label htmlFor="email" className="text-var(--purple-ink)">
                 Email <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -122,7 +122,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="email"
                 value={formData.email}
                 onChange={(e) => handleChange('email', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="staff@example.com"
               />
               {errors.email && (
@@ -132,7 +132,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Password */}
             <div className="grid gap-2">
-              <Label htmlFor="password" className="text-[#422268]">
+              <Label htmlFor="password" className="text-var(--purple-ink)">
                 Password <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -140,7 +140,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="password"
                 value={formData.password}
                 onChange={(e) => handleChange('password', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="Minimum 8 characters"
               />
               {errors.password && (
@@ -150,14 +150,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* First Name */}
             <div className="grid gap-2">
-              <Label htmlFor="first_name" className="text-[#422268]">
+              <Label htmlFor="first_name" className="text-var(--purple-ink)">
                 First Name <span className="text-red-500">*</span>
               </Label>
               <Input
                 id="first_name"
                 value={formData.first_name}
                 onChange={(e) => handleChange('first_name', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="John"
               />
               {errors.first_name && (
@@ -167,14 +167,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Last Name */}
             <div className="grid gap-2">
-              <Label htmlFor="last_name" className="text-[#422268]">
+              <Label htmlFor="last_name" className="text-var(--purple-ink)">
                 Last Name <span className="text-red-500">*</span>
               </Label>
               <Input
                 id="last_name"
                 value={formData.last_name}
                 onChange={(e) => handleChange('last_name', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="Doe"
               />
               {errors.last_name && (
@@ -184,7 +184,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Phone */}
             <div className="grid gap-2">
-              <Label htmlFor="phone" className="text-[#422268]">
+              <Label htmlFor="phone" className="text-var(--purple-ink)">
                 Phone <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -192,7 +192,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -202,11 +202,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Role */}
             <div className="grid gap-2">
-              <Label htmlFor="role" className="text-[#422268]">
+              <Label htmlFor="role" className="text-var(--purple-ink)">
                 Role <span className="text-red-500">*</span>
               </Label>
               <Select value={formData.role} onValueChange={(value) => handleChange('role', value)}>
-                <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+                <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -229,7 +229,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             </Button>
             <Button
               type="submit"
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
               disabled={loading}
             >
               {loading ? (
diff --git a/src/components/ImportMembersDialog.js b/src/components/ImportMembersDialog.js
index 5cca9de..8b86171 100644
--- a/src/components/ImportMembersDialog.js
+++ b/src/components/ImportMembersDialog.js
@@ -140,11 +140,11 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />
             {importResult ? 'Import Results' : 'Import Members from CSV'}
           </DialogTitle>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {importResult
               ? 'Review the import results below'
               : 'Upload a CSV file to bulk import members. Ensure the CSV has the required columns.'}
@@ -155,8 +155,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           // Upload Form
           <div className="grid gap-6 py-4">
             {/* CSV Format Instructions */}
-            <Alert className="border-[#664fa3] bg-[#F9F8FB]">
-              <AlertDescription className="text-sm text-[#422268]">
+            <Alert className="border-var(--purple-lavender) bg-var(--lavender-700)">
+              <AlertDescription className="text-sm text-var(--purple-ink)">
                 <strong>Required columns:</strong> Email, First Name, Last Name, Phone, Role
                 <br />
                 <strong>Optional columns:</strong> Status, Address, City, State, Zipcode, Date of Birth, Member Since
@@ -167,11 +167,10 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* File Upload Area */}
             <div
-              className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${
-                dragActive
-                  ? 'border-[#664fa3] bg-[#F9F8FB]'
-                  : 'border-[#ddd8eb] hover:border-[#664fa3] hover:bg-[#F9F8FB]'
-              }`}
+              className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${dragActive
+                ? 'border-var(--purple-lavender) bg-var(--lavender-700)'
+                : 'border-var(--neutral-800) hover:border-var(--purple-lavender) hover:bg-var(--lavender-700)'
+                }`}
               onDragEnter={handleDrag}
               onDragLeave={handleDrag}
               onDragOver={handleDrag}
@@ -179,12 +178,12 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             >
               {file ? (
                 <div className="flex flex-col items-center gap-4">
-                  <FileUp className="h-16 w-16 text-[#81B29A]" />
+                  <FileUp className="h-16 w-16 text-var(--green-light)" />
                   <div>
-                    <p className="text-lg font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <p className="text-lg font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {file.name}
                     </p>
-                    <p className="text-sm text-[#664fa3]">
+                    <p className="text-sm text-var(--purple-lavender)">
                       {(file.size / 1024).toFixed(2)} KB
                     </p>
                   </div>
@@ -199,12 +198,12 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                 </div>
               ) : (
                 <div className="flex flex-col items-center gap-4">
-                  <Upload className="h-16 w-16 text-[#ddd8eb]" />
+                  <Upload className="h-16 w-16 text-var(--neutral-800)" />
                   <div>
-                    <p className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <p className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Drag and drop your CSV file here
                     </p>
-                    <p className="text-sm text-[#664fa3] mb-4">or</p>
+                    <p className="text-sm text-var(--purple-lavender) mb-4">or</p>
                     <Label htmlFor="file-upload">
                       <Button variant="outline" className="rounded-xl cursor-pointer" asChild>
                         <span>Browse Files</span>
@@ -223,14 +222,14 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             </div>
 
             {/* Options */}
-            <div className="flex items-center gap-3 p-4 bg-[#F9F8FB] rounded-xl">
+            <div className="flex items-center gap-3 p-4 bg-var(--lavender-700) rounded-xl">
               <Checkbox
                 checked={updateExisting}
                 onCheckedChange={setUpdateExisting}
                 id="update-existing"
-                className="h-5 w-5 border-2 border-[#664fa3] data-[state=checked]:bg-[#664fa3]"
+                className="h-5 w-5 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
               />
-              <Label htmlFor="update-existing" className="text-[#422268] cursor-pointer">
+              <Label htmlFor="update-existing" className="text-var(--purple-ink) cursor-pointer">
                 Update existing members (if email already exists)
               </Label>
             </div>
@@ -240,9 +239,9 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           <div className="grid gap-6 py-4">
             {/* Summary Cards */}
             <div className="grid md:grid-cols-4 gap-4">
-              <div className="p-4 bg-white rounded-xl border border-[#ddd8eb] text-center">
-                <p className="text-sm text-[#664fa3] mb-1">Total Rows</p>
-                <p className="text-2xl font-semibold text-[#422268]">{importResult.total_rows}</p>
+              <div className="p-4 bg-background rounded-xl border border-var(--neutral-800) text-center">
+                <p className="text-sm text-var(--purple-lavender) mb-1">Total Rows</p>
+                <p className="text-2xl font-semibold text-var(--purple-ink)">{importResult.total_rows}</p>
               </div>
               <div className="p-4 bg-green-50 rounded-xl border border-green-200 text-center">
                 <p className="text-sm text-green-700 mb-1">Successful</p>
@@ -252,7 +251,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                 <p className="text-sm text-red-700 mb-1">Failed</p>
                 <p className="text-2xl font-semibold text-red-600">{importResult.failed_rows}</p>
               </div>
-              <div className="p-4 bg-white rounded-xl border border-[#ddd8eb] flex items-center justify-center gap-2">
+              <div className="p-4 bg-background rounded-xl border border-var(--neutral-800) flex items-center justify-center gap-2">
                 {getStatusIcon(importResult.status)}
                 {getStatusBadge(importResult.status)}
               </div>
@@ -261,23 +260,23 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Errors Table */}
             {importResult.errors && importResult.errors.length > 0 && (
               <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Errors ({importResult.errors.length} {importResult.errors.length === 10 ? '- showing first 10' : ''})
                 </h3>
-                <div className="border border-[#ddd8eb] rounded-xl overflow-hidden">
+                <div className="border border-var(--neutral-800) rounded-xl overflow-hidden">
                   <Table>
                     <TableHeader>
-                      <TableRow className="bg-[#DDD8EB] hover:bg-[#DDD8EB]">
-                        <TableHead className="text-[#422268] font-semibold">Row</TableHead>
-                        <TableHead className="text-[#422268] font-semibold">Email</TableHead>
-                        <TableHead className="text-[#422268] font-semibold">Error</TableHead>
+                      <TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
+                        <TableHead className="text-var(--purple-ink) font-semibold">Row</TableHead>
+                        <TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
+                        <TableHead className="text-var(--purple-ink) font-semibold">Error</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       {importResult.errors.map((error, idx) => (
-                        <TableRow key={idx} className="hover:bg-[#F9F8FB]">
-                          <TableCell className="font-medium text-[#422268]">{error.row}</TableCell>
-                          <TableCell className="text-[#664fa3]">{error.email}</TableCell>
+                        <TableRow key={idx} className="hover:bg-var(--lavender-700)">
+                          <TableCell className="font-medium text-var(--purple-ink)">{error.row}</TableCell>
+                          <TableCell className="text-var(--purple-lavender)">{error.email}</TableCell>
                           <TableCell className="text-red-600 text-sm">{error.error}</TableCell>
                         </TableRow>
                       ))}
@@ -302,7 +301,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
               </Button>
               <Button
                 onClick={handleSubmit}
-                className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+                className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
                 disabled={loading || !file}
               >
                 {loading ? (
@@ -321,7 +320,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           ) : (
             <Button
               onClick={handleClose}
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
             >
               Done
             </Button>
diff --git a/src/components/InviteStaffDialog.js b/src/components/InviteStaffDialog.js
index 97e9252..9ae9a7e 100644
--- a/src/components/InviteStaffDialog.js
+++ b/src/components/InviteStaffDialog.js
@@ -125,11 +125,11 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[600px] rounded-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-[#422268] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Mail className="h-6 w-6" />
             {invitationUrl ? 'Invitation Sent' : 'Invite Staff Member'}
           </DialogTitle>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {invitationUrl
               ? 'The invitation has been sent via email. You can also copy the link below.'
               : 'Send an email invitation to join as staff. They will set their own password.'}
@@ -139,16 +139,16 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
         {invitationUrl ? (
           // Show invitation URL after successful send
           <div className="py-4">
-            <Label className="text-[#422268] mb-2 block">Invitation Link (expires in 7 days)</Label>
+            <Label className="text-var(--purple-ink) mb-2 block">Invitation Link (expires in 7 days)</Label>
             <div className="flex gap-2">
               <Input
                 value={invitationUrl}
                 readOnly
-                className="rounded-xl border-2 border-[#ddd8eb] bg-gray-50"
+                className="rounded-xl border-2 border-var(--neutral-800) bg-gray-50"
               />
               <Button
                 onClick={copyToClipboard}
-                className="rounded-xl bg-[#664fa3] hover:bg-[#422268] text-white flex-shrink-0"
+                className="rounded-xl bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white flex-shrink-0"
               >
                 {copied ? (
                   <>
@@ -170,7 +170,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             <div className="grid gap-6 py-4">
               {/* Email */}
               <div className="grid gap-2">
-                <Label htmlFor="email" className="text-[#422268]">
+                <Label htmlFor="email" className="text-var(--purple-ink)">
                   Email <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -178,7 +178,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="staff@example.com"
                 />
                 {errors.email && (
@@ -188,35 +188,35 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
               {/* First Name (Optional) */}
               <div className="grid gap-2">
-                <Label htmlFor="first_name" className="text-[#422268]">
+                <Label htmlFor="first_name" className="text-var(--purple-ink)">
                   First Name <span className="text-gray-400">(Optional)</span>
                 </Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="John"
                 />
               </div>
 
               {/* Last Name (Optional) */}
               <div className="grid gap-2">
-                <Label htmlFor="last_name" className="text-[#422268]">
+                <Label htmlFor="last_name" className="text-var(--purple-ink)">
                   Last Name <span className="text-gray-400">(Optional)</span>
                 </Label>
                 <Input
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="Doe"
                 />
               </div>
 
               {/* Phone (Optional) */}
               <div className="grid gap-2">
-                <Label htmlFor="phone" className="text-[#422268]">
+                <Label htmlFor="phone" className="text-var(--purple-ink)">
                   Phone <span className="text-gray-400">(Optional)</span>
                 </Label>
                 <Input
@@ -224,14 +224,14 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="tel"
                   value={formData.phone}
                   onChange={(e) => handleChange('phone', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="(555) 123-4567"
                 />
               </div>
 
               {/* Role */}
               <div className="grid gap-2">
-                <Label htmlFor="role" className="text-[#422268]">
+                <Label htmlFor="role" className="text-var(--purple-ink)">
                   Role <span className="text-red-500">*</span>
                 </Label>
                 <Select
@@ -239,7 +239,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   onValueChange={(value) => handleChange('role', value)}
                   disabled={loadingRoles}
                 >
-                  <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+                  <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                     <SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select a role"} />
                   </SelectTrigger>
                   <SelectContent>
@@ -275,7 +275,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               </Button>
               <Button
                 type="submit"
-                className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+                className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
                 disabled={loading}
               >
                 {loading ? (
@@ -298,7 +298,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
           <DialogFooter>
             <Button
               onClick={handleClose}
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
             >
               Done
             </Button>
diff --git a/src/components/MemberFooter.js b/src/components/MemberFooter.js
index 579416f..003116f 100644
--- a/src/components/MemberFooter.js
+++ b/src/components/MemberFooter.js
@@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu
 
 const MemberFooter = () => {
   return (
-    <footer className="bg-[#422268] text-white mt-auto">
+    <footer className="bg-var(--purple-ink) text-white mt-auto">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="grid md:grid-cols-4 gap-8">
           {/* Logo & About */}
@@ -104,7 +104,7 @@ const MemberFooter = () => {
       </div>
 
       {/* Bottom Bar */}
-      <div className="border-t border-[#664fa3]">
+      <div className="border-t border-var(--purple-lavender)">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <div className="flex gap-6">
diff --git a/src/components/MemberRoute.js b/src/components/MemberRoute.js
index 566209a..23422c3 100644
--- a/src/components/MemberRoute.js
+++ b/src/components/MemberRoute.js
@@ -19,8 +19,8 @@ const MemberRoute = ({ children }) => {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-[#FDFCF8]">
-        <p className="text-[#6B708D]">Loading...</p>
+      <div className="min-h-screen flex items-center justify-center bg-var(--neutral-200:)">
+        <p className="text-var(--slate-muted)">Loading...</p>
       </div>
     );
   }
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index dfb05cc..6d135b5 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -26,7 +26,7 @@ const Navbar = () => {
   return (
     <>
       {/* Top Header - Member Actions (Desktop Only) */}
-      <header className="hidden lg:flex bg-gradient-to-r from-[#644c9f] to-[#48286e] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
+      <header className="hidden lg:flex bg-gradient-to-r from-var(--purple-amethyst) to-var(--purple-deep) px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
         {user && (
           <span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Welcome, {user.first_name}
@@ -53,7 +53,7 @@ const Navbar = () => {
         </button>
         <Link to="/donate">
           <Button
-            className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
+            className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
             style={{ fontFamily: "'Montserrat', sans-serif" }}
           >
             Donate
@@ -62,7 +62,7 @@ const Navbar = () => {
       </header>
 
       {/* Main Header - Member Navigation */}
-      <header className="bg-[#664fa3] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
+      <header className="bg-var(--purple-lavender) px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
         <Link to="/dashboard">
           <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
         </Link>
@@ -84,21 +84,21 @@ const Navbar = () => {
                 <ChevronDown className="h-4 w-4" />
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="bg-white min-w-[220px]">
+            <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
               <DropdownMenuItem asChild>
-                <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                <Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   History
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                <Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Mission and Values
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                <Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Board of Directors
                 </Link>
@@ -149,21 +149,21 @@ const Navbar = () => {
                 <ChevronDown className="h-4 w-4" />
               </button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align="start" className="bg-white min-w-[220px]">
+            <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
               <DropdownMenuItem asChild>
-                <Link to="/members/newsletters" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                <Link to="/members/newsletters" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Newsletters
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/members/financials" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                <Link to="/members/financials" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Financials
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/members/bylaws" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                <Link to="/members/bylaws" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Bylaws
                 </Link>
@@ -183,7 +183,7 @@ const Navbar = () => {
         {/* Mobile Hamburger Button */}
         <button
           onClick={() => setIsMobileMenuOpen(true)}
-          className="lg:hidden p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+          className="lg:hidden p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
           aria-label="Open menu"
         >
           <Menu className="h-6 w-6" />
@@ -200,7 +200,7 @@ const Navbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[#664fa3] to-[#48286e] shadow-2xl flex flex-col">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-var(--purple-lavender) to-var(--purple-deep) shadow-2xl flex flex-col">
             {/* Header */}
             <div className="flex items-center justify-between p-6 border-b border-white/20">
               <div className="flex items-center gap-3">
@@ -211,7 +211,7 @@ const Navbar = () => {
               </div>
               <button
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="p-2 text-white hover:bg-white/10 rounded-lg transition-colors"
+                className="p-2 text-white hover:bg-background/10 rounded-lg transition-colors"
                 aria-label="Close menu"
               >
                 <X className="h-6 w-6" />
@@ -236,7 +236,7 @@ const Navbar = () => {
                 <Link
                   to="/"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                 >
                   Home
@@ -250,7 +250,7 @@ const Navbar = () => {
                   <Link
                     to="/about/history"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     History
@@ -258,7 +258,7 @@ const Navbar = () => {
                   <Link
                     to="/about/mission-values"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     Mission and Values
@@ -266,7 +266,7 @@ const Navbar = () => {
                   <Link
                     to="/about/board"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     Board of Directors
@@ -276,7 +276,7 @@ const Navbar = () => {
                 <Link
                   to="/dashboard"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                 >
                   Dashboard
@@ -285,7 +285,7 @@ const Navbar = () => {
                 <Link
                   to="/events"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                   data-testid="mobile-events-nav-button"
                 >
@@ -295,7 +295,7 @@ const Navbar = () => {
                 <Link
                   to="/members/calendar"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                 >
                   Calendar
@@ -304,7 +304,7 @@ const Navbar = () => {
                 <Link
                   to="/members/directory"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                 >
                   Directory
@@ -313,7 +313,7 @@ const Navbar = () => {
                 <Link
                   to="/members/gallery"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                 >
                   Gallery
@@ -327,7 +327,7 @@ const Navbar = () => {
                   <Link
                     to="/members/newsletters"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     Newsletters
@@ -335,7 +335,7 @@ const Navbar = () => {
                   <Link
                     to="/members/financials"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     Financials
@@ -343,7 +343,7 @@ const Navbar = () => {
                   <Link
                     to="/members/bylaws"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block px-6 py-2 text-white text-base hover:bg-white/10 rounded-lg transition-colors"
+                    className="block px-6 py-2 text-white text-base hover:bg-background/10 rounded-lg transition-colors"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     Bylaws
@@ -353,7 +353,7 @@ const Navbar = () => {
                 <Link
                   to="/profile"
                   onClick={() => setIsMobileMenuOpen(false)}
-                  className="block px-4 py-3 text-white text-base font-medium hover:bg-white/10 rounded-lg transition-colors"
+                  className="block px-4 py-3 text-white text-base font-medium hover:bg-background/10 rounded-lg transition-colors"
                   style={{ fontFamily: "'Poppins', sans-serif" }}
                   data-testid="mobile-profile-nav-button"
                 >
@@ -370,7 +370,7 @@ const Navbar = () => {
                   onClick={() => setIsMobileMenuOpen(false)}
                 >
                   <Button
-                    className="w-full bg-white/20 hover:bg-white/30 text-white rounded-lg"
+                    className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
                     Admin Panel
@@ -383,7 +383,7 @@ const Navbar = () => {
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 <Button
-                  className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-lg font-semibold"
+                  className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-lg font-semibold"
                   style={{ fontFamily: "'Montserrat', sans-serif" }}
                 >
                   Donate
@@ -396,7 +396,7 @@ const Navbar = () => {
                   handleLogout();
                 }}
                 variant="outline"
-                className="w-full border-2 border-white/30 text-white hover:bg-white/10 rounded-lg"
+                className="w-full border-2 border-white/30 text-white hover:bg-background/10 rounded-lg"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
                 data-testid="mobile-logout-button"
               >
diff --git a/src/components/PaymentActivationDialog.js b/src/components/PaymentActivationDialog.js
index 30bbe5b..36a3099 100644
--- a/src/components/PaymentActivationDialog.js
+++ b/src/components/PaymentActivationDialog.js
@@ -157,12 +157,12 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[600px] bg-white rounded-2xl">
+      <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             Activate Manual Payment
           </DialogTitle>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Record offline payment for {user.first_name} {user.last_name} ({user.email})
           </DialogDescription>
         </DialogHeader>
@@ -170,7 +170,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
         <form onSubmit={handleSubmit} className="space-y-6 py-4">
           {/* Subscription Plan Selection */}
           <div className="space-y-2">
-            <Label htmlFor="plan_id" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="plan_id" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Subscription Plan
             </Label>
             <Select
@@ -187,7 +187,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                 });
               }}
             >
-              <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                 <SelectValue placeholder="Select subscription plan" />
               </SelectTrigger>
               <SelectContent>
@@ -203,7 +203,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               </SelectContent>
             </Select>
             {selectedPlan && (
-              <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
               </p>
             )}
@@ -211,7 +211,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Payment Amount */}
           <div className="space-y-2">
-            <Label htmlFor="amount" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="amount" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Payment Amount ($)
             </Label>
             <Input
@@ -221,12 +221,12 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               min="0"
               placeholder="Enter amount"
               value={formData.amount}
-              onChange={(e) => setFormData({...formData, amount: e.target.value})}
-              className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
+              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               required
             />
             {selectedPlan && (
-              <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
               </p>
             )}
@@ -234,14 +234,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Breakdown Display */}
           {breakdown && breakdown.total >= breakdown.base && (
-            <Card className="p-4 bg-[#f9f5ff] border border-[#DDD8EB]">
+            <Card className="p-4 bg-var(--lavender-400) border border-var(--neutral-800)">
               <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <div className="flex justify-between text-[#422268]">
+                <div className="flex justify-between text-var(--purple-ink)">
                   <span>Membership Fee:</span>
                   <span className="font-semibold">{formatPrice(breakdown.base)}</span>
                 </div>
                 {breakdown.donation > 0 && (
-                  <div className="flex justify-between text-[#ff9e77]">
+                  <div className="flex justify-between text-var(--orange-light)">
                     <span className="flex items-center gap-1">
                       <Heart className="h-4 w-4" />
                       Additional Donation:
@@ -249,7 +249,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
                   </div>
                 )}
-                <div className="flex justify-between text-[#422268] font-bold text-base pt-2 border-t border-[#DDD8EB]">
+                <div className="flex justify-between text-var(--purple-ink) font-bold text-base pt-2 border-t border-var(--neutral-800)">
                   <span>Total:</span>
                   <span>{formatPrice(breakdown.total)}</span>
                 </div>
@@ -259,17 +259,17 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Payment Date */}
           <div className="space-y-2">
-            <Label htmlFor="payment_date" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="payment_date" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Payment Date
             </Label>
             <div className="relative">
-              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
               <Input
                 id="payment_date"
                 type="date"
                 value={formData.payment_date}
-                onChange={(e) => setFormData({...formData, payment_date: e.target.value})}
-                className="pl-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
+                className="pl-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 required
               />
             </div>
@@ -277,14 +277,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Payment Method */}
           <div className="space-y-2">
-            <Label htmlFor="payment_method" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="payment_method" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Payment Method
             </Label>
             <Select
               value={formData.payment_method}
-              onValueChange={(value) => setFormData({...formData, payment_method: value})}
+              onValueChange={(value) => setFormData({ ...formData, payment_method: value })}
             >
-              <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                 <SelectValue placeholder="Select payment method" />
               </SelectTrigger>
               <SelectContent>
@@ -298,7 +298,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Subscription Period */}
           <div className="space-y-3">
-            <Label className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>Subscription Period</Label>
+            <Label className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>Subscription Period</Label>
 
             <div className="flex items-center gap-2">
               <input
@@ -306,9 +306,9 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                 id="use_custom_period"
                 checked={useCustomPeriod}
                 onChange={(e) => setUseCustomPeriod(e.target.checked)}
-                className="rounded border-[#ddd8eb]"
+                className="rounded border-var(--neutral-800)"
               />
-              <Label htmlFor="use_custom_period" className="text-sm text-[#664fa3] font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Label htmlFor="use_custom_period" className="text-sm text-var(--purple-lavender) font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Use custom dates instead of plan's billing cycle
               </Label>
             </div>
@@ -316,39 +316,39 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
             {useCustomPeriod ? (
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label htmlFor="custom_period_start" className="text-sm text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="custom_period_start" className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Start Date
                   </Label>
                   <Input
                     id="custom_period_start"
                     type="date"
                     value={formData.custom_period_start}
-                    onChange={(e) => setFormData({...formData, custom_period_start: e.target.value})}
-                    className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
+                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                     required={useCustomPeriod}
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="custom_period_end" className="text-sm text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="custom_period_end" className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                     End Date
                   </Label>
                   <Input
                     id="custom_period_end"
                     type="date"
                     value={formData.custom_period_end}
-                    onChange={(e) => setFormData({...formData, custom_period_end: e.target.value})}
-                    className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
+                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                     required={useCustomPeriod}
                   />
                 </div>
               </div>
             ) : (
               selectedPlan && (
-                <div className="text-sm text-[#664fa3] bg-[#f1eef9] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="text-sm text-var(--purple-lavender) bg-var(--lavender-300) p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {selectedPlan.custom_cycle_enabled ? (
                     <>
                       <p>
-                        <span className="font-medium text-[#422268]">Plan uses custom billing cycle:</span>
+                        <span className="font-medium text-var(--purple-ink)">Plan uses custom billing cycle:</span>
                         <br />
                         {(() => {
                           const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -367,8 +367,8 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                       <br />
                       Starts today, ends {selectedPlan.billing_cycle === 'monthly' ? '30 days' :
                         selectedPlan.billing_cycle === 'quarterly' ? '90 days' :
-                        selectedPlan.billing_cycle === 'yearly' ? '1 year' :
-                        selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
+                          selectedPlan.billing_cycle === 'yearly' ? '1 year' :
+                            selectedPlan.billing_cycle === 'lifetime' ? 'lifetime' : '1 year'} from now
                     </p>
                   )}
                 </div>
@@ -378,15 +378,15 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Notes */}
           <div className="space-y-2">
-            <Label htmlFor="notes" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="notes" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Notes (Optional)
             </Label>
             <Textarea
               id="notes"
               placeholder="Additional notes about the payment..."
               value={formData.notes}
-              onChange={(e) => setFormData({...formData, notes: e.target.value})}
-              className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3] min-h-[100px]"
+              onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
+              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) min-h-[100px]"
             />
           </div>
 
@@ -395,14 +395,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               type="button"
               variant="outline"
               onClick={() => onOpenChange(false)}
-              className="rounded-full border-2 border-[#ddd8eb]"
+              className="rounded-full border-2 border-var(--neutral-800)"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[#81B29A] text-white hover:bg-[#6FA087] rounded-full"
+              className="bg-var(--green-light) text-white hover:bg-var(--green-mint) rounded-full"
             >
               {loading ? 'Activating...' : 'Activate Payment'}
             </Button>
diff --git a/src/components/PendingInvitationsTable.js b/src/components/PendingInvitationsTable.js
index aaece9a..f064885 100644
--- a/src/components/PendingInvitationsTable.js
+++ b/src/components/PendingInvitationsTable.js
@@ -73,9 +73,9 @@ const PendingInvitationsTable = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
-      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
-      member: { label: 'Member', className: 'bg-[#DDD8EB] text-[#422268]' }
+      superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
+      admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
+      member: { label: 'Member', className: 'bg-var(--neutral-800) text-var(--purple-ink)' }
     };
 
     const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -111,7 +111,7 @@ const PendingInvitationsTable = () => {
   if (loading) {
     return (
       <div className="text-center py-8">
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading invitations...
         </p>
       </div>
@@ -120,12 +120,12 @@ const PendingInvitationsTable = () => {
 
   if (invitations.length === 0) {
     return (
-      <Card className="p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
-        <Mail className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-        <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
+        <Mail className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+        <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
           No Pending Invitations
         </h3>
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           All invitations have been accepted or expired
         </p>
       </Card>
@@ -134,37 +134,37 @@ const PendingInvitationsTable = () => {
 
   return (
     <>
-      <Card className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
+      <Card className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
         <Table>
           <TableHeader>
-            <TableRow className="bg-[#DDD8EB] hover:bg-[#DDD8EB]">
-              <TableHead className="text-[#422268] font-semibold">Email</TableHead>
-              <TableHead className="text-[#422268] font-semibold">Name</TableHead>
-              <TableHead className="text-[#422268] font-semibold">Role</TableHead>
-              <TableHead className="text-[#422268] font-semibold">Invited</TableHead>
-              <TableHead className="text-[#422268] font-semibold">Expires</TableHead>
-              <TableHead className="text-[#422268] font-semibold text-right">Actions</TableHead>
+            <TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
+              <TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
+              <TableHead className="text-var(--purple-ink) font-semibold">Name</TableHead>
+              <TableHead className="text-var(--purple-ink) font-semibold">Role</TableHead>
+              <TableHead className="text-var(--purple-ink) font-semibold">Invited</TableHead>
+              <TableHead className="text-var(--purple-ink) font-semibold">Expires</TableHead>
+              <TableHead className="text-var(--purple-ink) font-semibold text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {invitations.map((invitation) => (
-              <TableRow key={invitation.id} className="hover:bg-[#F9F8FB]">
-                <TableCell className="font-medium text-[#422268]">
+              <TableRow key={invitation.id} className="hover:bg-var(--lavender-700)">
+                <TableCell className="font-medium text-var(--purple-ink)">
                   {invitation.email}
                 </TableCell>
-                <TableCell className="text-[#664fa3]">
+                <TableCell className="text-var(--purple-lavender)">
                   {invitation.first_name && invitation.last_name
                     ? `${invitation.first_name} ${invitation.last_name}`
                     : '-'}
                 </TableCell>
                 <TableCell>{getRoleBadge(invitation.role)}</TableCell>
-                <TableCell className="text-[#664fa3]">
+                <TableCell className="text-var(--purple-lavender)">
                   {new Date(invitation.invited_at).toLocaleDateString()}
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2">
-                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-[#664fa3]'}`} />
-                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-[#664fa3]'}`}>
+                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-var(--purple-lavender)'}`} />
+                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-var(--purple-lavender)'}`}>
                       {formatDate(invitation.expires_at)}
                     </span>
                   </div>
@@ -176,7 +176,7 @@ const PendingInvitationsTable = () => {
                       size="sm"
                       onClick={() => handleResend(invitation.id)}
                       disabled={resending === invitation.id}
-                      className="rounded-xl border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
+                      className="rounded-xl border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
                     >
                       {resending === invitation.id ? (
                         'Resending...'
@@ -208,10 +208,10 @@ const PendingInvitationsTable = () => {
       <AlertDialog open={revokeDialog.open} onOpenChange={(open) => setRevokeDialog({ open, invitation: null })}>
         <AlertDialogContent className="rounded-2xl">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <AlertDialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Revoke Invitation
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to revoke the invitation for{' '}
               <span className="font-semibold">{revokeDialog.invitation?.email}</span>?
               This action cannot be undone.
diff --git a/src/components/PlanDialog.js b/src/components/PlanDialog.js
index 72c06a0..9420611 100644
--- a/src/components/PlanDialog.js
+++ b/src/components/PlanDialog.js
@@ -118,7 +118,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
       // Validate custom cycle dates if enabled
       if (formData.custom_cycle_enabled) {
         if (!formData.custom_cycle_start_month || !formData.custom_cycle_start_day ||
-            !formData.custom_cycle_end_month || !formData.custom_cycle_end_day) {
+          !formData.custom_cycle_end_month || !formData.custom_cycle_end_day) {
           toast.error('All custom cycle dates must be provided');
           setLoading(false);
           return;
@@ -161,10 +161,10 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}
           </DialogTitle>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {plan ? 'Update plan details below' : 'Enter plan details to create a new subscription plan'}
           </DialogDescription>
         </DialogHeader>
@@ -197,8 +197,8 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           </div>
 
           {/* Dynamic Pricing */}
-          <div className="border-2 border-[#DDD8EB] rounded-lg p-4 space-y-4">
-            <h3 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <div className="border-2 border-var(--neutral-800) rounded-lg p-4 space-y-4">
+            <h3 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Dynamic Pricing
             </h3>
 
@@ -216,7 +216,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-[#664fa3] mt-1">Minimum $30</p>
+                <p className="text-xs text-var(--purple-lavender) mt-1">Minimum $30</p>
               </div>
 
               <div>
@@ -232,7 +232,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-[#664fa3] mt-1">Pre-filled amount</p>
+                <p className="text-xs text-var(--purple-lavender) mt-1">Pre-filled amount</p>
               </div>
             </div>
 
@@ -240,7 +240,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
             <div className="flex items-center justify-between pt-2">
               <div>
                 <Label htmlFor="allow_donation">Allow Donations</Label>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Members can pay more than minimum
                 </p>
               </div>
@@ -252,7 +252,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   onChange={(e) => setFormData({ ...formData, allow_donation: e.target.checked })}
                   className="sr-only peer"
                 />
-                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#664fa3]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-var(--purple-lavender)/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-var(--green-light)"></div>
               </label>
             </div>
           </div>
@@ -279,11 +279,11 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
           {/* Custom Billing Cycle Dates */}
           {formData.billing_cycle === 'custom' && (
-            <div className="border-2 border-[#DDD8EB] rounded-lg p-4 space-y-4">
-              <h3 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="border-2 border-var(--neutral-800) rounded-lg p-4 space-y-4">
+              <h3 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Custom Billing Period
               </h3>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Set recurring date range (e.g., Jan 1 - Dec 31 for calendar year)
               </p>
 
@@ -349,8 +349,8 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 </div>
               </div>
 
-              <div className="bg-[#f9f5ff] border border-[#DDD8EB] rounded p-3">
-                <p className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <div className="bg-var(--lavender-400) border border-var(--neutral-800) rounded p-3">
+                <p className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <strong>Example:</strong> Jan 1 - Dec 31 for calendar year, or Jul 1 - Jun 30 for fiscal year
                 </p>
               </div>
@@ -361,7 +361,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           <div className="flex items-center justify-between">
             <div>
               <Label htmlFor="active">Active Status</Label>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Inactive plans won't appear for new subscriptions
               </p>
             </div>
@@ -373,7 +373,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[#664fa3]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#81B29A]"></div>
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-var(--purple-lavender)/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-var(--green-light)"></div>
             </label>
           </div>
 
@@ -389,7 +389,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
             >
               {loading ? (
                 <>
diff --git a/src/components/PublicFooter.js b/src/components/PublicFooter.js
index 9e07bea..31e2a89 100644
--- a/src/components/PublicFooter.js
+++ b/src/components/PublicFooter.js
@@ -8,7 +8,7 @@ const PublicFooter = () => {
   return (
     <>
       {/* Main Footer */}
-      <footer className="bg-[#644c9f] border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
+      <footer className="bg-var(--purple-amethyst) border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
         <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
           <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
             <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
@@ -19,28 +19,28 @@ const PublicFooter = () => {
               <div className="pb-2 lg:pb-4">
                 <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
               </div>
-              <Link to="/about/history" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
-              <Link to="/about/mission-values" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
-              <Link to="/about/board" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
+              <Link to="/about/history" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
+              <Link to="/about/mission-values" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
+              <Link to="/about/board" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
             </div>
             <div className="hidden md:flex flex-col gap-2 items-start text-left  w-full sm:w-auto sm:min-w-[148px]">
               <div className="pb-2 lg:pb-4">
                 <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
               </div>
-              <Link to="/become-a-member" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
-              <Link to="/contact-us" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
-              <Link to="/resources" className="text-[#ddd8eb] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
+              <Link to="/become-a-member" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
+              <Link to="/contact-us" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
+              <Link to="/resources" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
             </div>
 
             <div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
               <div className="pb-4 w-full flex justify-center lg:justify-start">
                 <Link to="/donate" className="block">
-                  <Button className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
+                  <Button className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
                     Donate
                   </Button>
                 </Link>
               </div>
-              <p className="text-[#ddd8eb] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--neutral-800) text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF is supported by<br />the Hollyfield Foundation
               </p>
             </div>
@@ -49,20 +49,20 @@ const PublicFooter = () => {
       </footer>
 
       {/* Bottom Footer */}
-      <footer className="bg-gradient-to-r from-[#48286e] to-[#644c9f] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
+      <footer className="bg-gradient-to-r from-var(--purple-deep) to-var(--purple-amethyst) border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
           <nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
-            <Link to="/terms-of-service" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Link to="/terms-of-service" className="text-var(--neutral-500) text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Terms of Service
             </Link>
-            <Link to="/privacy-policy" className="text-[#c5b4e3] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Link to="/privacy-policy" className="text-var(--neutral-500) text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Privacy Policy
             </Link>
           </nav>
-          <p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--neutral-500) text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             © 2025 LOAF. All Rights Reserved.
           </p>
-          <p className="text-[#c5b4e3] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--neutral-500) text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Designed and Managed by{' '}
             <a href="https://konceptkit.com/" className=" text-white transition-colors whitespace-nowrap">
               Koncept Kit
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index 92a0ae5..f2248b2 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -46,7 +46,7 @@ const PublicNavbar = () => {
   const getDesktopLinkClasses = (path) => {
     const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
     if (isActive(path)) {
-      return `${baseClasses} text-[#ff9e77] hover:text-[#ff8c64] `;
+      return `${baseClasses} text-var(--orange-light) hover:text-var(--orange-coral) `;
     }
     return `${baseClasses} text-white hover:opacity-80`;
   };
@@ -55,18 +55,18 @@ const PublicNavbar = () => {
   const getMobileLinkClasses = (path) => {
     const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
     if (isActive(path)) {
-      return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
+      return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
     }
-    return `${baseClasses} text-white hover:bg-[#48286e]`;
+    return `${baseClasses} text-white hover:bg-var(--purple-deep)`;
   };
 
   // Active and inactive link styles for mobile sub-items (About Us)
   const getMobileSubLinkClasses = (path) => {
     const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
     if (isActive(path)) {
-      return `${baseClasses} bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e]`;
+      return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
     }
-    return `${baseClasses} text-[#ddd8eb] hover:bg-[#48286e] hover:text-white`;
+    return `${baseClasses} text-var(--neutral-800) hover:bg-var(--purple-deep) hover:text-white`;
   };
 
   return (
@@ -74,7 +74,7 @@ const PublicNavbar = () => {
       {/* Top Header - Auth Actions */}
       <div className='sticky top-0 inset-x-0 z-50'>
 
-        <header className="bg-gradient-to-r flex-wrap from-[#644c9f] to-[#48286e] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
+        <header className="bg-gradient-to-r flex-wrap from-var(--purple-amethyst) to-var(--purple-deep) px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
           <div className='flex gap-4 sm:gap-6'>
 
             <button
@@ -96,7 +96,7 @@ const PublicNavbar = () => {
           </div>
           <Link to="/donate">
             <Button
-              className="bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
+              className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
               style={{ fontFamily: "'Montserrat', sans-serif" }}
             >
               Donate
@@ -105,7 +105,7 @@ const PublicNavbar = () => {
         </header>
 
         {/* Main Header - Navigation */}
-        <header className=" bg-[#664fa3] px-[20px] py-2 flex justify-between items-center">
+        <header className=" bg-var(--purple-lavender) px-[20px] py-2 flex justify-between items-center">
           <Link to="/">
             <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
           </Link>
@@ -113,7 +113,7 @@ const PublicNavbar = () => {
           {/* Mobile Menu Button */}
           <button
             onClick={() => setIsMobileMenuOpen(true)}
-            className="lg:hidden p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+            className="lg:hidden p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
             aria-label="Open menu"
           >
             <Menu className="size-14" />
@@ -132,28 +132,28 @@ const PublicNavbar = () => {
               <DropdownMenuTrigger asChild>
                 <button
                   className={`${isAboutActive()
-                    ? "text-[#ff9e77] hover:text-[#ff8c64]"
+                    ? "text-var(--orange-light) hover:text-var(--orange-coral)"
                     : "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   About Us
                   <ChevronDown className="h-4 w-4" />
                 </button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="start" className="bg-white min-w-[220px]">
+              <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
                 <DropdownMenuItem asChild>
-                  <Link to="/about/history" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                  <Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     History
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
-                  <Link to="/about/mission-values" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                  <Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Mission and Values
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
-                  <Link to="/about/board" className="w-full px-3 py-2 text-[#48286e] hover:bg-[#f1eef9] cursor-pointer"
+                  <Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Board of Directors
                   </Link>
@@ -204,15 +204,15 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-[#664fa3] shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-var(--purple-lavender) shadow-xl overflow-y-auto">
             {/* Header */}
-            <div className="flex justify-between items-center p-6 border-b border-[#48286e]">
+            <div className="flex justify-between items-center p-6 border-b border-var(--purple-deep)">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Menu
               </span>
               <button
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="p-2 text-white hover:bg-[#48286e] rounded-md transition-colors"
+                className="p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
                 aria-label="Close menu"
               >
                 <X className="h-5 w-5" />
@@ -233,7 +233,7 @@ const PublicNavbar = () => {
               {/* About Us Section */}
               <div className="space-y-2">
                 <p
-                  className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[#ff9e77]' : 'text-white'}`}
+                  className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-var(--orange-light)' : 'text-white'}`}
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   About Us
@@ -303,13 +303,13 @@ const PublicNavbar = () => {
               </Link>
 
               {/* Auth Actions */}
-              <div className="pt-4 border-t border-[#48286e] space-y-2">
+              <div className="pt-4 border-t border-var(--purple-deep) space-y-2">
                 <button
                   onClick={() => {
                     handleAuthAction();
                     setIsMobileMenuOpen(false);
                   }}
-                  className="w-full text-left text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
+                  className="w-full text-left text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   {user ? 'Logout' : 'Login'}
@@ -318,7 +318,7 @@ const PublicNavbar = () => {
                   <Link
                     to="/register"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block text-white text-base font-medium hover:bg-[#48286e] px-4 py-3 rounded-md transition-colors"
+                    className="block text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                   >
                     Register
@@ -329,7 +329,7 @@ const PublicNavbar = () => {
                   onClick={() => setIsMobileMenuOpen(false)}
                   className="block w-full"
                 >
-                  <Button className="w-full bg-[#ff9e77] hover:bg-[#ff8c64] text-[#48286e] rounded-[25px] px-6 py-3 text-base font-semibold">
+                  <Button className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-6 py-3 text-base font-semibold">
                     Donate
                   </Button>
                 </Link>
diff --git a/src/components/RejectionDialog.js b/src/components/RejectionDialog.js
index 0977693..f61f6bd 100644
--- a/src/components/RejectionDialog.js
+++ b/src/components/RejectionDialog.js
@@ -31,33 +31,33 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-[#ddd8eb]">
+      <DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-var(--neutral-800)">
         <DialogHeader>
           <div className="flex items-center gap-3 mb-2">
             <div className="p-3 bg-red-100 rounded-full">
               <AlertTriangle className="h-6 w-6 text-red-600" />
             </div>
-            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Reject Application
             </DialogTitle>
           </div>
-          <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          <div className="bg-[#f9f5ff] border border-[#ddd8eb] rounded-lg p-4">
-            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="bg-var(--lavender-400) border border-var(--neutral-800) rounded-lg p-4">
+            <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Applicant:</strong> {user?.email}
             </p>
-            <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Status:</strong> {user?.status}
             </p>
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="reason" className="text-[#422268] font-medium">
+            <Label htmlFor="reason" className="text-var(--purple-ink) font-medium">
               Rejection Reason <span className="text-red-500">*</span>
             </Label>
             <Textarea
@@ -68,13 +68,13 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
                 setError('');
               }}
               placeholder="Please provide a clear reason for rejection. This will be sent to the applicant."
-              className="rounded-xl border-2 border-[#ddd8eb] focus:border-red-500 min-h-[120px]"
+              className="rounded-xl border-2 border-var(--neutral-800) focus:border-red-500 min-h-[120px]"
               disabled={loading}
             />
             {error && (
               <p className="text-sm text-red-500">{error}</p>
             )}
-            <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               The applicant will receive an email with this reason.
             </p>
           </div>
@@ -85,7 +85,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
             type="button"
             onClick={handleClose}
             variant="outline"
-            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6"
+            className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-6"
             disabled={loading}
           >
             <X className="h-4 w-4 mr-2" />
diff --git a/src/components/WordPressImportWizard.js b/src/components/WordPressImportWizard.js
index 48f82fc..0d44092 100644
--- a/src/components/WordPressImportWizard.js
+++ b/src/components/WordPressImportWizard.js
@@ -370,15 +370,15 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step1Upload = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-2">Upload WordPress CSV Export</h3>
-                <p className="text-sm text-[#664fa3]">
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Upload WordPress CSV Export</h3>
+                <p className="text-sm text-var(--purple-lavender)">
                     Select the WordPress user export CSV file. The file will be analyzed for data quality issues.
                 </p>
             </div>
 
-            <Card className="p-6 border-2 border-dashed border-[#ddd8eb] bg-[#f9f5ff]">
+            <Card className="p-6 border-2 border-dashed border-var(--neutral-800) bg-var(--lavender-400)">
                 <div className="flex flex-col items-center gap-4">
-                    <Upload className="h-12 w-12 text-[#664fa3]" />
+                    <Upload className="h-12 w-12 text-var(--purple-lavender)" />
                     <div className="text-center">
                         <Input
                             type="file"
@@ -387,7 +387,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                             className="max-w-xs"
                         />
                         {uploadedFile && (
-                            <p className="text-sm text-[#664fa3] mt-2">
+                            <p className="text-sm text-var(--purple-lavender) mt-2">
                                 Selected: {uploadedFile.name}
                             </p>
                         )}
@@ -399,7 +399,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <Button
                     onClick={handleUpload}
                     disabled={uploading}
-                    className="w-full bg-[#664fa3] hover:bg-[#422268]"
+                    className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
                 >
                     {uploading ? (
                         <>
@@ -465,8 +465,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step2FieldMapping = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-2">Field Mapping</h3>
-                <p className="text-sm text-[#664fa3]">
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Field Mapping</h3>
+                <p className="text-sm text-var(--purple-lavender)">
                     WordPress fields have been automatically mapped to LOAF platform fields.
                 </p>
             </div>
@@ -537,20 +537,20 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step3ReviewStatus = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-2">Review & Adjust User Status</h3>
-                <p className="text-sm text-[#664fa3]">
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Review & Adjust User Status</h3>
+                <p className="text-sm text-var(--purple-lavender)">
                     Review suggested status mappings and override as needed before import.
                 </p>
             </div>
 
             {/* Bulk edit toolbar */}
-            <Card className="p-4 bg-[#f9f5ff] border-[#ddd8eb]">
+            <Card className="p-4 bg-var(--lavender-400) border-var(--neutral-800)">
                 <div className="flex items-center gap-4">
                     <Checkbox
                         checked={selectedRows.size === previewData.length && previewData.length > 0}
                         onCheckedChange={toggleSelectAll}
                     />
-                    <span className="text-sm text-[#664fa3] font-medium">
+                    <span className="text-sm text-var(--purple-lavender) font-medium">
                         {selectedRows.size > 0 ? `${selectedRows.size} selected` : 'Select all'}
                     </span>
                     {selectedRows.size > 0 && (
@@ -572,13 +572,13 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Data table */}
             {loading ? (
                 <div className="flex items-center justify-center py-12">
-                    <Loader2 className="h-8 w-8 animate-spin text-[#664fa3]" />
+                    <Loader2 className="h-8 w-8 animate-spin text-var(--purple-lavender)" />
                 </div>
             ) : (
                 <div className="border rounded-lg overflow-hidden">
                     <Table>
                         <TableHeader>
-                            <TableRow className="bg-[#f9f5ff]">
+                            <TableRow className="bg-var(--lavender-400)">
                                 <TableHead className="w-12">
                                     <Checkbox checked={false} />
                                 </TableHead>
@@ -606,7 +606,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                         {row.first_name} {row.last_name}
                                     </TableCell>
                                     <TableCell>
-                                        <Badge className="bg-[#ddd8eb] text-[#422268]">
+                                        <Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
                                             {row.wordpress_roles?.join(', ') || 'N/A'}
                                         </Badge>
                                     </TableCell>
@@ -651,7 +651,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Pagination */}
             {totalPages > 1 && (
                 <div className="flex items-center justify-between">
-                    <p className="text-sm text-[#664fa3]">
+                    <p className="text-sm text-var(--purple-lavender)">
                         Page {currentPage} of {totalPages}
                     </p>
                     <div className="flex gap-2">
@@ -689,41 +689,41 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         return (
             <div className="space-y-6">
                 <div>
-                    <h3 className="text-lg font-semibold text-[#422268] mb-2">Import Preview</h3>
-                    <p className="text-sm text-[#664fa3]">
+                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Preview</h3>
+                    <p className="text-sm text-var(--purple-lavender)">
                         Review the final import settings before execution.
                     </p>
                 </div>
 
                 <div className="grid md:grid-cols-3 gap-4">
                     <Card className="p-6">
-                        <p className="text-sm text-[#664fa3]">Total Users</p>
-                        <p className="text-3xl font-semibold text-[#422268]">{analysisResult?.total_rows}</p>
+                        <p className="text-sm text-var(--purple-lavender)">Total Users</p>
+                        <p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.total_rows}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-[#664fa3]">Status Overrides</p>
-                        <p className="text-3xl font-semibold text-[#422268]">{overrideCount}</p>
+                        <p className="text-sm text-var(--purple-lavender)">Status Overrides</p>
+                        <p className="text-3xl font-semibold text-var(--purple-ink)">{overrideCount}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-[#664fa3]">Expected Imports</p>
-                        <p className="text-3xl font-semibold text-[#422268]">{analysisResult?.valid_rows}</p>
+                        <p className="text-sm text-var(--purple-lavender)">Expected Imports</p>
+                        <p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.valid_rows}</p>
                     </Card>
                 </div>
 
                 <Card className="p-6">
-                    <h4 className="font-semibold text-[#422268] mb-4">Import Options</h4>
+                    <h4 className="font-semibold text-var(--purple-ink) mb-4">Import Options</h4>
                     <div className="space-y-3">
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[#664fa3]">Send password reset emails to all imported users</span>
+                            <span className="text-sm text-var(--purple-lavender)">Send password reset emails to all imported users</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[#664fa3]">Skip rows with errors and continue import</span>
+                            <span className="text-sm text-var(--purple-lavender)">Skip rows with errors and continue import</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[#664fa3]">Full rollback capability available after import</span>
+                            <span className="text-sm text-var(--purple-lavender)">Full rollback capability available after import</span>
                         </div>
                     </div>
                 </Card>
@@ -748,10 +748,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step5Execute = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-2">
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
                     {importing ? 'Import in Progress...' : 'Ready to Import'}
                 </h3>
-                <p className="text-sm text-[#664fa3]">
+                <p className="text-sm text-var(--purple-lavender)">
                     {importing
                         ? 'Please wait while users are imported. This may take a few minutes.'
                         : 'Click "Start Import" to begin importing users.'}
@@ -761,7 +761,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {importing && (
                 <div className="space-y-4">
                     <Progress value={importProgress} className="w-full" />
-                    <p className="text-center text-sm text-[#664fa3]">
+                    <p className="text-center text-sm text-var(--purple-lavender)">
                         {importProgress.toFixed(1)}% complete
                     </p>
                 </div>
@@ -770,7 +770,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {!importing && !importResults && (
                 <Button
                     onClick={handleExecuteImport}
-                    className="w-full bg-[#664fa3] hover:bg-[#422268] py-6 text-lg"
+                    className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink) py-6 text-lg"
                 >
                     <Play className="mr-2 h-5 w-5" />
                     Start Import
@@ -786,8 +786,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step6Results = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-2">Import Complete</h3>
-                <p className="text-sm text-[#664fa3]">
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Complete</h3>
+                <p className="text-sm text-var(--purple-lavender)">
                     Review the import results and download error reports if needed.
                 </p>
             </div>
@@ -850,11 +850,11 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                             <div className="p-3 bg-red-100 rounded-full">
                                 <AlertTriangle className="h-6 w-6 text-red-600" />
                             </div>
-                            <DialogTitle className="text-2xl font-semibold text-[#422268]">
+                            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
                                 Confirm Rollback
                             </DialogTitle>
                         </div>
-                        <DialogDescription className="text-[#664fa3]">
+                        <DialogDescription className="text-var(--purple-lavender)">
                             This will permanently delete{' '}
                             <strong>{importResults?.successful_rows} users</strong> that were imported.
                             This action cannot be undone.
@@ -898,10 +898,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle className="text-2xl font-semibold text-[#422268]">
+                    <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
                         WordPress Import Wizard
                     </DialogTitle>
-                    <DialogDescription className="text-[#664fa3]">
+                    <DialogDescription className="text-var(--purple-lavender)">
                         Import WordPress users with interactive status review and full rollback capability
                     </DialogDescription>
                 </DialogHeader>
@@ -919,7 +919,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                     <div
                                         className={`
                                             w-10 h-10 rounded-full flex items-center justify-center
-                                            ${isCurrent ? 'bg-[#664fa3] text-white' : ''}
+                                            ${isCurrent ? 'bg-var(--purple-lavender) text-white' : ''}
                                             ${isCompleted ? 'bg-green-600 text-white' : ''}
                                             ${!isCurrent && !isCompleted ? 'bg-gray-200 text-gray-600' : ''}
                                         `}
@@ -930,7 +930,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                             <StepIcon className="h-5 w-5" />
                                         )}
                                     </div>
-                                    <p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-[#422268]' : 'text-gray-600'}`}>
+                                    <p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-var(--purple-ink)' : 'text-gray-600'}`}>
                                         {step.title}
                                     </p>
                                 </div>
@@ -962,7 +962,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                         <Button
                             onClick={handleNext}
                             disabled={!canProceed()}
-                            className="bg-[#664fa3] hover:bg-[#422268]"
+                            className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
                         >
                             Next
                             <ChevronRight className="h-4 w-4 ml-2" />
@@ -975,7 +975,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                 onOpenChange(false);
                                 if (onSuccess) onSuccess();
                             }}
-                            className="bg-[#664fa3] hover:bg-[#422268]"
+                            className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
                         >
                             Close
                         </Button>
diff --git a/src/components/registration/RegistrationStep1.js b/src/components/registration/RegistrationStep1.js
index e62117a..fd0b52d 100644
--- a/src/components/registration/RegistrationStep1.js
+++ b/src/components/registration/RegistrationStep1.js
@@ -26,7 +26,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
     <div className="space-y-8">
       {/* Personal Information */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Personal Information
         </h2>
 
@@ -40,7 +40,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="first-name-input"
             />
           </div>
@@ -52,7 +52,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="last-name-input"
             />
           </div>
@@ -69,7 +69,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="phone-input"
             />
           </div>
@@ -82,7 +82,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.date_of_birth}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="dob-input"
             />
           </div>
@@ -97,7 +97,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
             required
             value={formData.address}
             onChange={handleInputChange}
-            className="h-14 rounded-xl border-2 border-[#EAE0D5] focus:border-[#E07A5F]"
+            className="h-14 rounded-xl border-2 border-var(--neutral-300:) focus:border-var(--orange-soft)"
             data-testid="address-input"
           />
         </div>
@@ -112,7 +112,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.city}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="city-input"
             />
           </div>
@@ -124,7 +124,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.state}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="state-input"
             />
           </div>
@@ -136,7 +136,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.zipcode}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="zipcode-input"
             />
           </div>
@@ -145,7 +145,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* How Did You Hear About Us */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           How Did You Hear About Us? *
         </h2>
         <div className="space-y-3">
@@ -167,7 +167,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Partner Information */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Partner Information (Optional)
         </h2>
 
@@ -179,7 +179,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_first_name"
               value={formData.partner_first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="partner-first-name-input"
             />
           </div>
@@ -190,7 +190,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_last_name"
               value={formData.partner_last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="partner-last-name-input"
             />
           </div>
diff --git a/src/components/registration/RegistrationStep2.js b/src/components/registration/RegistrationStep2.js
index 5d03a55..a141ced 100644
--- a/src/components/registration/RegistrationStep2.js
+++ b/src/components/registration/RegistrationStep2.js
@@ -33,10 +33,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
     <div className="space-y-8">
       {/* Newsletter Publication Preferences */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Newsletter Publication Preferences *
         </h2>
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Please check what information may be published in LOAF Newsletter
         </p>
 
@@ -97,7 +97,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Referral */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Referral
         </h2>
         <div>
@@ -110,10 +110,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             value={formData.referred_by_member_name}
             onChange={handleInputChange}
             placeholder="Enter member name or email"
-            className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             data-testid="referral-input"
           />
-          <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If referred by a current member, you may skip the event attendance requirement.
           </p>
         </div>
@@ -121,10 +121,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Volunteer Interests */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Volunteer Interests (Optional)
         </h2>
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
         </p>
 
@@ -158,7 +158,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             I am requesting for scholarship
           </Label>
         </div>
-        <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Scholarship information is kept confidential
         </p>
 
@@ -174,7 +174,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell us why you're requesting a scholarship..."
               rows={4}
-              className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
         )}
diff --git a/src/components/registration/RegistrationStep3.js b/src/components/registration/RegistrationStep3.js
index f666290..b35d18d 100644
--- a/src/components/registration/RegistrationStep3.js
+++ b/src/components/registration/RegistrationStep3.js
@@ -23,11 +23,11 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
   return (
     <div className="space-y-6">
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Members Directory
         </h2>
 
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Would you like to be displayed on our private members directory? (optional and you can change the answer later)
         </p>
 
@@ -37,8 +37,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             className={`
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${formData.show_in_directory
-                ? 'border-[#ff9e77] bg-[#ff9e77]/5'
-                : 'border-[#ddd8eb] hover:border-[#664fa3]'
+                ? 'border-var(--orange-light) bg-var(--orange-light)/5'
+                : 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
@@ -46,13 +46,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             <div className="flex items-center space-x-3">
               <div className={`
                 w-5 h-5 rounded-full border-2 flex items-center justify-center
-                ${formData.show_in_directory ? 'border-[#ff9e77]' : 'border-[#ddd8eb]'}
+                ${formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
               `}>
                 {formData.show_in_directory && (
-                  <div className="w-3 h-3 rounded-full bg-[#ff9e77]" />
+                  <div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
                 )}
               </div>
-              <span className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Yes, include me in the Members Directory
               </span>
             </div>
@@ -62,8 +62,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             className={`
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${!formData.show_in_directory
-                ? 'border-[#ff9e77] bg-[#ff9e77]/5'
-                : 'border-[#ddd8eb] hover:border-[#664fa3]'
+                ? 'border-var(--orange-light) bg-var(--orange-light)/5'
+                : 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
@@ -71,13 +71,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             <div className="flex items-center space-x-3">
               <div className={`
                 w-5 h-5 rounded-full border-2 flex items-center justify-center
-                ${!formData.show_in_directory ? 'border-[#ff9e77]' : 'border-[#ddd8eb]'}
+                ${!formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
               `}>
                 {!formData.show_in_directory && (
-                  <div className="w-3 h-3 rounded-full bg-[#ff9e77]" />
+                  <div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
                 )}
               </div>
-              <span className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No, don't include me in the Members Directory
               </span>
             </div>
@@ -87,8 +87,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Conditional Directory Fields */}
       {formData.show_in_directory && (
-        <div className="space-y-4 mt-6 p-6 bg-white rounded-xl border border-[#ddd8eb]">
-          <p className="text-[#664fa3] text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-var(--neutral-800)">
+          <p className="text-var(--purple-lavender) text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Below, choose what information you would like include in the Members Only Directory.
             (If you ever want to update this information, remember the Directory Section and Account Section are separate)
           </p>
@@ -101,7 +101,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="email"
               value={formData.directory_email}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -114,7 +114,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell other members about yourself..."
               rows={4}
-              className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -125,7 +125,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_address"
               value={formData.directory_address}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -137,7 +137,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="tel"
               value={formData.directory_phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -149,7 +149,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="date"
               value={formData.directory_dob}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
@@ -162,7 +162,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_partner_name"
               value={formData.directory_partner_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
         </div>
diff --git a/src/components/registration/RegistrationStep4.js b/src/components/registration/RegistrationStep4.js
index 97bad63..eaa53a1 100644
--- a/src/components/registration/RegistrationStep4.js
+++ b/src/components/registration/RegistrationStep4.js
@@ -7,11 +7,11 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
   return (
     <div className="space-y-6">
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Account Credentials
         </h2>
 
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Your email is also your username that you can use to login.
           Please note you can only login after your application is validated.
         </p>
@@ -28,7 +28,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.email}
             onChange={handleInputChange}
             placeholder="your.email@example.com"
-            className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             data-testid="email-input"
           />
         </div>
@@ -43,10 +43,10 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.password}
             onChange={handleInputChange}
             placeholder="At least 6 characters"
-            className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             data-testid="password-input"
           />
-          <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Must be at least 6 characters long
           </p>
         </div>
@@ -60,7 +60,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.confirmPassword}
             onChange={handleInputChange}
             placeholder="Re-enter your password"
-            className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             data-testid="confirm-password-input"
           />
           {formData.confirmPassword && formData.password !== formData.confirmPassword && (
@@ -71,7 +71,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
         </div>
 
         {/* Terms of Service Acceptance */}
-        <div className="p-4 bg-[#F8F7FB] rounded-lg border border-[#ddd8eb]">
+        <div className="p-4 bg-var(--lavender-500) rounded-lg border border-var(--neutral-800)">
           <div className="flex items-start gap-3">
             <input
               type="checkbox"
@@ -79,7 +79,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
               name="accepts_tos"
               checked={formData.accepts_tos || false}
               onChange={handleInputChange}
-              className="mt-1 w-4 h-4 text-[#664fa3] border-gray-300 rounded focus:ring-[#664fa3]"
+              className="mt-1 w-4 h-4 text-var(--purple-lavender) border-gray-300 rounded focus:ring-var(--purple-lavender)"
               required
               data-testid="tos-checkbox"
             />
@@ -89,7 +89,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="/become-a-member/terms-of-service"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
+                className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
               >
                 Terms of Service
               </a>
@@ -98,7 +98,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="become-a-member/privacy-policy"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
+                className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
               >
                 Privacy Policy
               </a>
diff --git a/src/components/registration/RegistrationStepIndicator.js b/src/components/registration/RegistrationStepIndicator.js
index 4cb0cca..1fc3fdf 100644
--- a/src/components/registration/RegistrationStepIndicator.js
+++ b/src/components/registration/RegistrationStepIndicator.js
@@ -20,17 +20,17 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
                 w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg
                 transition-all duration-300
                 ${currentStep === step.number
-                  ? 'bg-[#ff9e77] text-white scale-110 shadow-lg'
+                  ? 'bg-var(--orange-light) text-white scale-110 shadow-lg'
                   : currentStep > step.number
-                    ? 'bg-[#81B29A] text-white'
-                    : 'bg-[#ddd8eb] text-[#664fa3]'
+                    ? 'bg-var(--green-light) text-white'
+                    : 'bg-var(--neutral-800) text-var(--purple-lavender)'
                 }
               `}>
                 {currentStep > step.number ? '✓' : step.number}
               </div>
               <span className={`
                 text-sm mt-2 font-medium transition-colors
-                ${currentStep === step.number ? 'text-[#ff9e77]' : 'text-[#664fa3]'}
+                ${currentStep === step.number ? 'text-var(--orange-light)' : 'text-var(--purple-lavender)'}
               `} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {step.title}
               </span>
@@ -38,11 +38,11 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
 
             {/* Connecting Line */}
             {index < steps.length - 1 && (
-              <div className="flex-1 h-1 mx-2 relative -top-6 bg-[#ddd8eb]">
+              <div className="flex-1 h-1 mx-2 relative -top-6 bg-var(--neutral-800)">
                 <div
                   className={`
                     h-full transition-all duration-500
-                    ${currentStep > step.number ? 'bg-[#81B29A] w-full' : 'bg-transparent w-0'}
+                    ${currentStep > step.number ? 'bg-var(--green-light) w-full' : 'bg-transparent w-0'}
                   `}
                 />
               </div>
@@ -52,8 +52,8 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
       </div>
 
       {/* Step Counter */}
-      <p className="text-center text-[#664fa3] mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-        Step <span className="font-semibold text-[#ff9e77]">{currentStep}</span> of {totalSteps}
+      <p className="text-center text-var(--purple-lavender) mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        Step <span className="font-semibold text-var(--orange-light)">{currentStep}</span> of {totalSteps}
       </p>
     </div>
   );
diff --git a/src/components/ui/password-input.jsx b/src/components/ui/password-input.jsx
index 579fe2d..afac213 100644
--- a/src/components/ui/password-input.jsx
+++ b/src/components/ui/password-input.jsx
@@ -1,9 +1,9 @@
-import * as React from "react"
-import { Eye, EyeOff } from "lucide-react"
-import { cn } from "@/lib/utils"
+import * as React from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { cn } from "@/lib/utils";
 
 const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
-  const [showPassword, setShowPassword] = React.useState(false)
+  const [showPassword, setShowPassword] = React.useState(false);
 
   return (
     <div className="relative">
@@ -19,7 +19,7 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
       <button
         type="button"
         onClick={() => setShowPassword(!showPassword)}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-[#6B708D] hover:text-[#3D405B] transition-colors focus:outline-none"
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-var(--slate-muted) hover:text-var(--slate-dark) transition-colors focus:outline-none"
         tabIndex={-1}
       >
         {showPassword ? (
@@ -29,8 +29,8 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
         )}
       </button>
     </div>
-  )
-})
-PasswordInput.displayName = "PasswordInput"
+  );
+});
+PasswordInput.displayName = "PasswordInput";
 
-export { PasswordInput }
+export { PasswordInput };
diff --git a/src/components/ui/tabs.jsx b/src/components/ui/tabs.jsx
index 318a8a9..9942686 100644
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[#f1eef9] border-2 border-[#664fa3] rounded-2xl px-3 py-1 text-[#664fa3] text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-var(--lavender-300) border-2 border-var(--purple-lavender) rounded-2xl px-3 py-1 text-var(--purple-lavender) text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
       className
     )}
     {...props}
diff --git a/src/index.css b/src/index.css
index 3f1cc4c..ac0ece7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -47,27 +47,114 @@ code {
     --chart-4: 280 44% 29%;
     --chart-5: 268 35% 47%;
     --radius: 0.5rem;
+
+    /* =========================
+     Brand Colors
+     ========================= */
+    --brand-dark-lavender: 267 47% 29%;
+    --brand-purple: 256 35% 47%;
+    --brand-lavender: 262 46% 80%;
+    --brand-light-lavender: 256 32% 88%;
+    --brand-white: 0 0% 100%;
+
+    --brand-dark-orange: 13 100% 42%;
+    --brand-orange: 24 86% 55%;
+    --brand-light-orange: 24 100% 67%;
+
+    --brand-pink: 324 55% 60%;
+    --dusty-pink: 323 39% 52%;
+    --dark-rose: 324 98% 32%;
+
+    /* 
+    ==========================
+      Color Patch 
+    ==========================
+     */
+
+    --blue-linkedin: #0a66c2;
+    --blue-facebook: #1877f2;
+    --blue-twitter: #1da1f2;
+    --purple-ink: #422268;
+    --purple-deep: #48286e;
+    --purple-muted: #533a82;
+    --purple-plum: #553d8a;
+    --purple-soft: #5a4290;
+    --purple-amethyst: #644c9f;
+    --purple-lilac: #664ea2;
+    --purple-lavender: #664fa3;
+    --purple-electric: #865edf;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --green-success: #4caf50;
+    --green-sage: #5a8f72;
+    --green-muted: #66927e;
+    --green-soft: #6a9680;
+    --green-eucalyptus: #6a9a83;
+    --green-fern: #6da085;
+    --green-mint: #6fa087;
+    --green-pastel: #6fa188;
+    --green-light: #81b29a;
+    --green-bg: #e8f5e9;
+    --orange-rust: #d16b54;
+    --orange-soft: #e07a5f;
+    --orange-peach: #e88a63;
+    --orange-sand: #e88d66;
+    --orange-apricot: #ff8c5a;
+    --orange-coral: #ff8c64;
+    --orange-light: #ff9e77;
+    --orange-500: #ea580c;
+    --orange-400: #fb923c;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --red-instagram: #e4405f;
+    --red-soft: #ffebee;
+    --lavender-100: #e8e0f5;
+    --lavender-200: #eeebf4;
+    --lavender-300: #f1eef9;
+    --lavender-400: #f9f5ff;
+    --lavender-500: #f8f7fb;
+    --lavender-600: #f9f7fc;
+    --lavender-700: #f9f8fb;
+    --lavender-800: #eaedf4;
+    --neutral-50: #fafafa;
+    --neutral-100: #f9fafb;
+    --neutral-200: #fdfcf8;
+    --neutral-300: #eae0d5;
+    --neutral-400: #c4bed8;
+    --neutral-500: #c5b4e3;
+    --neutral-600: #c5bfd9;
+    --neutral-700: #dcd7ea;
+    --neutral-800: #ddd8eb;
+    --neutral-900: #ffffff;
   }
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+    --background: var(--brand-dark-lavender);
+    --foreground: var(--brand-light-lavender);
+    --card: var(--brand-purple);
+    --card-foreground: var(--brand-light-lavender);
+    --popover: var(--brand-purple);
+    --popover-foreground: var(--brand-light-lavender);
+    --primary: var(--brand-light-lavender);
+    --primary-foreground: var(--brand-dark-lavender);
+    --secondary: var(--brand-purple);
+    --secondary-foreground: var(--brand-light-lavender);
+    --muted: var(--brand-purple);
+    --muted-foreground: var(--brand-light-lavender);
+    --accent: var(--brand-light-lavender);
+    --accent-foreground: var(--brand-light-lavender);
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --destructive-foreground: var(--brand-light-lavender);
+    --border: var(--brand-purple);
+    --input: var(--brand-purple);
+    --ring: var(--brand-light-lavender);
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
     --chart-3: 30 80% 55%;
@@ -140,3 +227,9 @@ code {
     }
   }
 }
+
+/* 
+=========================
+  End of File
+========================
+*/
diff --git a/src/pages/AcceptInvitation.js b/src/pages/AcceptInvitation.js
index 5410c0f..1784c22 100644
--- a/src/pages/AcceptInvitation.js
+++ b/src/pages/AcceptInvitation.js
@@ -163,9 +163,9 @@ const AcceptInvitation = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
-      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
-      member: { label: 'Member', className: 'bg-[#DDD8EB] text-[#422268]' }
+      superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
+      admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
+      member: { label: 'Member', className: 'bg-var(--neutral-800) text-var(--purple-ink)' }
     };
 
     const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -179,10 +179,10 @@ const AcceptInvitation = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
-        <Card className="w-full max-w-md p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
-          <Loader2 className="h-12 w-12 text-[#664fa3] mx-auto mb-4 animate-spin" />
-          <p className="text-lg text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
+          <Loader2 className="h-12 w-12 text-var(--purple-lavender) mx-auto mb-4 animate-spin" />
+          <p className="text-lg text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             Verifying your invitation...
           </p>
         </Card>
@@ -192,18 +192,18 @@ const AcceptInvitation = () => {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
-        <Card className="w-full max-w-md p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
+      <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
           <XCircle className="h-16 w-16 text-red-500 mx-auto mb-6" />
-          <h1 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Invalid Invitation
           </h1>
-          <p className="text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {error}
           </p>
           <Button
             onClick={() => navigate('/login')}
-            className="rounded-xl bg-[#664fa3] hover:bg-[#422268] text-white"
+            className="rounded-xl bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white"
           >
             Go to Login
           </Button>
@@ -216,53 +216,53 @@ const AcceptInvitation = () => {
     const redirectPath = successUser?.role === 'admin' || successUser?.role === 'superadmin' ? '/admin' : '/dashboard';
 
     return (
-      <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
-        <Card className="w-full max-w-2xl p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
+      <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
           {/* Success Animation */}
           <div className="mb-8">
-            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-[#81B29A] to-[#6DA085] flex items-center justify-center animate-bounce">
+            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-var(--green-light) to-var(--green-fern) flex items-center justify-center animate-bounce">
               <CheckCircle className="h-12 w-12 text-white" />
             </div>
           </div>
 
           {/* Success Message */}
-          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF! 🎉
           </h1>
-          <p className="text-xl text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-xl text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your account has been created successfully.
           </p>
 
           {/* User Info Card */}
-          <div className="mb-8 p-6 bg-gradient-to-r from-[#DDD8EB] to-[#F9F8FB] rounded-xl">
+          <div className="mb-8 p-6 bg-gradient-to-r from-var(--neutral-800) to-var(--lavender-700) rounded-xl">
             <div className="grid md:grid-cols-2 gap-4 text-left">
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Name
                 </p>
-                <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {successUser?.first_name} {successUser?.last_name}
                 </p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Email
                 </p>
-                <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {successUser?.email}
                 </p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Role
                 </p>
                 <div>{getRoleBadge(successUser?.role)}</div>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Status
                 </p>
-                <Badge className="bg-[#81B29A] text-white px-4 py-2 rounded-full text-sm">
+                <Badge className="bg-var(--green-light) text-white px-4 py-2 rounded-full text-sm">
                   {successUser?.status}
                 </Badge>
               </div>
@@ -280,7 +280,7 @@ const AcceptInvitation = () => {
           {/* Manual Continue Button */}
           <Button
             onClick={() => navigate(redirectPath)}
-            className="w-full h-14 rounded-xl bg-gradient-to-r from-[#81B29A] to-[#6DA085] hover:from-[#6DA085] hover:to-[#5A8F72] text-white text-lg font-semibold"
+            className="w-full h-14 rounded-xl bg-gradient-to-r from-var(--green-light) to-var(--green-fern) hover:from-var(--green-fern) hover:to-var(--green-sage] text-white text-lg font-semibold"
           >
             Continue to Dashboard
           </Button>
@@ -290,46 +290,46 @@ const AcceptInvitation = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
-      <Card className="w-full max-w-3xl p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb]">
+    <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
+      <Card className="w-full max-w-3xl p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800)">
         {/* Header */}
         <div className="text-center mb-8">
           <div className="flex justify-center mb-4">
-            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-[#664fa3] to-[#422268] flex items-center justify-center">
+            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) flex items-center justify-center">
               <Mail className="h-8 w-8 text-white" />
             </div>
           </div>
-          <h1 className="text-3xl md:text-4xl font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl md:text-4xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF!
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Complete your profile to accept the invitation
           </p>
         </div>
 
         {/* Invitation Details */}
-        <div className="mb-8 p-6 bg-gradient-to-r from-[#DDD8EB] to-[#F9F8FB] rounded-xl">
+        <div className="mb-8 p-6 bg-gradient-to-r from-var(--neutral-800) to-var(--lavender-700) rounded-xl">
           <div className="grid md:grid-cols-2 gap-4 text-sm">
             <div>
-              <p className="text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Email Address
               </p>
-              <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {invitation?.email}
               </p>
             </div>
             <div>
-              <p className="text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Role
               </p>
               <div>{getRoleBadge(invitation?.role)}</div>
             </div>
             <div className="md:col-span-2">
-              <p className="text-[#664fa3] mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <Calendar className="h-4 w-4" />
                 Invitation Expires
               </p>
-              <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {invitation?.expires_at ? new Date(invitation.expires_at).toLocaleString() : 'N/A'}
               </p>
             </div>
@@ -342,7 +342,7 @@ const AcceptInvitation = () => {
             {/* Password Fields */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="password" className="text-[#422268]">
+                <Label htmlFor="password" className="text-var(--purple-ink)">
                   Password <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -350,7 +350,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="Minimum 8 characters"
                 />
                 {formErrors.password && (
@@ -359,7 +359,7 @@ const AcceptInvitation = () => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="confirmPassword" className="text-[#422268]">
+                <Label htmlFor="confirmPassword" className="text-var(--purple-ink)">
                   Confirm Password <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -367,7 +367,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.confirmPassword}
                   onChange={(e) => handleChange('confirmPassword', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="Re-enter password"
                 />
                 {formErrors.confirmPassword && (
@@ -379,14 +379,14 @@ const AcceptInvitation = () => {
             {/* Name Fields */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="first_name" className="text-[#422268]">
+                <Label htmlFor="first_name" className="text-var(--purple-ink)">
                   First Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="John"
                 />
                 {formErrors.first_name && (
@@ -395,14 +395,14 @@ const AcceptInvitation = () => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="last_name" className="text-[#422268]">
+                <Label htmlFor="last_name" className="text-var(--purple-ink)">
                   Last Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="Doe"
                 />
                 {formErrors.last_name && (
@@ -413,7 +413,7 @@ const AcceptInvitation = () => {
 
             {/* Phone */}
             <div className="grid gap-2">
-              <Label htmlFor="phone" className="text-[#422268]">
+              <Label htmlFor="phone" className="text-var(--purple-ink)">
                 Phone <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -421,7 +421,7 @@ const AcceptInvitation = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 placeholder="(555) 123-4567"
               />
               {formErrors.phone && (
@@ -432,20 +432,20 @@ const AcceptInvitation = () => {
             {/* Optional Fields Section */}
             {invitation?.role === 'member' && (
               <>
-                <div className="border-t border-[#ddd8eb] pt-6 mt-2">
-                  <h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <div className="border-t border-var(--neutral-800) pt-6 mt-2">
+                  <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Additional Information (Optional)
                   </h3>
                 </div>
 
                 {/* Address */}
                 <div className="grid gap-2">
-                  <Label htmlFor="address" className="text-[#422268]">Address</Label>
+                  <Label htmlFor="address" className="text-var(--purple-ink)">Address</Label>
                   <Input
                     id="address"
                     value={formData.address}
                     onChange={(e) => handleChange('address', e.target.value)}
-                    className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                     placeholder="123 Main St"
                   />
                 </div>
@@ -453,35 +453,35 @@ const AcceptInvitation = () => {
                 {/* City, State, Zipcode */}
                 <div className="grid md:grid-cols-3 gap-4">
                   <div className="grid gap-2">
-                    <Label htmlFor="city" className="text-[#422268]">City</Label>
+                    <Label htmlFor="city" className="text-var(--purple-ink)">City</Label>
                     <Input
                       id="city"
                       value={formData.city}
                       onChange={(e) => handleChange('city', e.target.value)}
-                      className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                       placeholder="San Francisco"
                     />
                   </div>
 
                   <div className="grid gap-2">
-                    <Label htmlFor="state" className="text-[#422268]">State</Label>
+                    <Label htmlFor="state" className="text-var(--purple-ink)">State</Label>
                     <Input
                       id="state"
                       value={formData.state}
                       onChange={(e) => handleChange('state', e.target.value)}
-                      className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                       placeholder="CA"
                       maxLength={2}
                     />
                   </div>
 
                   <div className="grid gap-2">
-                    <Label htmlFor="zipcode" className="text-[#422268]">Zipcode</Label>
+                    <Label htmlFor="zipcode" className="text-var(--purple-ink)">Zipcode</Label>
                     <Input
                       id="zipcode"
                       value={formData.zipcode}
                       onChange={(e) => handleChange('zipcode', e.target.value)}
-                      className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                       placeholder="94102"
                     />
                   </div>
@@ -489,13 +489,13 @@ const AcceptInvitation = () => {
 
                 {/* Date of Birth */}
                 <div className="grid gap-2">
-                  <Label htmlFor="date_of_birth" className="text-[#422268]">Date of Birth</Label>
+                  <Label htmlFor="date_of_birth" className="text-var(--purple-ink)">Date of Birth</Label>
                   <Input
                     id="date_of_birth"
                     type="date"
                     value={formData.date_of_birth}
                     onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                    className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   />
                 </div>
               </>
@@ -507,7 +507,7 @@ const AcceptInvitation = () => {
             <Button
               type="submit"
               disabled={submitting}
-              className="w-full h-14 rounded-xl bg-gradient-to-r from-[#81B29A] to-[#6DA085] hover:from-[#6DA085] hover:to-[#5A8F72] text-white text-lg font-semibold"
+              className="w-full h-14 rounded-xl bg-gradient-to-r from-var(--green-light) to-var(--green-fern) hover:from-var(--green-fern) hover:to-var(--green-sage] text-white text-lg font-semibold"
             >
               {submitting ? (
                 <>
@@ -526,11 +526,11 @@ const AcceptInvitation = () => {
 
         {/* Footer Note */}
         <div className="mt-6 text-center">
-          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Already have an account?{' '}
             <button
               onClick={() => navigate('/login')}
-              className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
+              className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
             >
               Sign in instead
             </button>
diff --git a/src/pages/BecomeMember.js b/src/pages/BecomeMember.js
index 33f17d4..2b95757 100644
--- a/src/pages/BecomeMember.js
+++ b/src/pages/BecomeMember.js
@@ -16,7 +16,7 @@ const BecomeMember = () => {
 
   const Arrow = ({ ...props }) => (
     <div className="flex justify-center mb-2">
-      <ArrowDown className="size-8 text-[#4f378a] font-bold" strokeWidth={2} />
+      <ArrowDown className="size-8 text---brand-purple font-bold" strokeWidth={2} />
     </div>
   );
   return (
@@ -29,13 +29,13 @@ const BecomeMember = () => {
       <div className="relative bg-gray-50 pt-20 px-6 pb-16">
         <div className="max-w-7xl mx-auto text-center">
           <h1
-            className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
+            className="text-3xl sm:text-4xl md:text-5xl font-bold text-var(--purple-deep) mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Become a Member
           </h1>
           <p
-            className="text-base sm:text-lg font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg font-medium text-var(--purple-deep) max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Become a member to receive our monthly newsletter and find out about all the activities LOAF has planned each month. LOAF hosts over 40 social activities each year and occasionally covers the costs for members only
@@ -53,15 +53,15 @@ const BecomeMember = () => {
               className="w-full h-full object-contain"
             />
           </div>
-          <div className="flex-1 bg-[#eeebf4] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+          <div className="flex-1 bg-var(--lavender-200) rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
             <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
               style={{ fontFamily: "'Poppins', sans-serif" }}
             >
               Annual Administrative Fees
             </h3>
             <p
-              className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+              className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
               style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
             >
               Annual Administrative Fees for all members are $30 per person. These fees help cover general business expenses (website, advertising, e-newsletter).
@@ -71,7 +71,7 @@ const BecomeMember = () => {
       </div>
 
       {/* Membership Process Section */}
-      <div className="relative  bg-gray-50 py-32 bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] ">
+      <div className="relative  bg-gray-50 py-32 bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) ">
         {/* Decorative shooting star element */}
         <div className="hidden lg:block absolute left-0 top-64  w-[195px] h-[1130px] pointer-events-none opacity-50">
           <img
@@ -82,13 +82,13 @@ const BecomeMember = () => {
         </div>
         <div className="max-w-7xl mx-auto px-6 mb-24 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-[#48286e] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-var(--purple-deep) mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Membership Process
           </h2>
           <p
-            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-[#48286e] max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-var(--purple-deep) max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
@@ -106,15 +106,15 @@ const BecomeMember = () => {
                 className="w-full  h-full object-contain"
               />
             </div>
-            <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+            <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 1: Application & Email Confirmation
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are validated by an admin.
@@ -136,15 +136,15 @@ const BecomeMember = () => {
                 className="w-full h-full object-contain"
               />
             </div>
-            <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+            <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 2: Attend an event and meet us!
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
@@ -165,15 +165,15 @@ const BecomeMember = () => {
                 className="w-full h-full object-contain"
               />
             </div>
-            <div className="flex-1 bg-white rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+            <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[#48286e] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 3: Login and pay the annual fee
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-[#48286e] leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 Once we know that you are indeed you, an admin will validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
@@ -195,7 +195,7 @@ const BecomeMember = () => {
                 className="w-full h-full object-contain"
               />
             </div>
-            <div className="flex-1 bg-gradient-to-r from-[#48286e] to-[#664fa3] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+            <div className="flex-1 bg-gradient-to-r from-var(--purple-deep) to-var(--purple-lavender) rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
                 className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
@@ -216,14 +216,14 @@ const BecomeMember = () => {
       <div className="relative bg-gray-50 py-16 ">
         <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-12 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-[#48286e]  leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-var(--purple-deep)  leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Ready to Join Us?
           </h2>
           <Link to="/register">
             <Button
-              className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
+              className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-deep) rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Register Now!
diff --git a/src/pages/BoardOfDirectors.js b/src/pages/BoardOfDirectors.js
index e78da16..ce80b1e 100644
--- a/src/pages/BoardOfDirectors.js
+++ b/src/pages/BoardOfDirectors.js
@@ -22,10 +22,10 @@ const BoardOfDirectors = () => {
   const DirectorCards = ({ title, members }) => {
     return (
       <section className=" w-full">
-        <div className="mx-auto bg-white rounded-3xl p-10 shadow-lg h-full">
+        <div className="mx-auto bg-background rounded-3xl p-10 shadow-lg h-full">
           {title && (
             <h2
-              className="text-2xl sm:text-4xl font-bold text-[#48286e] text-center mb-8"
+              className="text-2xl sm:text-4xl font-bold text-var(--purple-deep) text-center mb-8"
               style={{ fontFamily: "'Poppins', sans-serif" }}
             >
               {title}
@@ -43,10 +43,10 @@ const BoardOfDirectors = () => {
                 <Card
                   key={`${name}-${index}`}
                   style={{ fontFamily: "'Poppins', sans-serif" }}
-                  className="bg-[#eeebf4] text-[#48286e] text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
+                  className="bg-var(--lavender-200) text-var(--purple-deep) text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
                 >
                   <div className="min-h-16">
-                    <p className="text-xl font-bold text-[#48286e]">
+                    <p className="text-xl font-bold text-var(--purple-deep)">
                       {name}
                     </p>
 
@@ -66,14 +66,14 @@ const BoardOfDirectors = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb]  pt-8 sm:pt-10 md:pt-12">
+      <main className="bg-gradient-to-b from-var(--neutral-100:) to-var(--neutral-800)  pt-8 sm:pt-10 md:pt-12">
         {/* Hero Section  */}
         <section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
           <div className="max-w-5xl mx-auto text-center px-8">
-            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-[#48286e] font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-var(--purple-deep) font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               LOAF Board of Directors 2025
             </h1>
 
@@ -81,11 +81,11 @@ const BoardOfDirectors = () => {
         </section>
         {/* Contact Info */}
         <section className="flex justify-center mt-4 mb-8">
-          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-[#664fa3] to-[#48286e] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
+          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
 
             <p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
               For any questions or inquiries please email us at{' '}
-              <a href="mailto:info@loaftx.org" className="text-[#c5b4e3] underline font-bold hover:text-white transition-colors">
+              <a href="mailto:info@loaftx.org" className="text-var(--neutral-500) underline font-bold hover:text-white transition-colors">
                 info@loaftx.org
               </a>
             </p>
@@ -102,22 +102,22 @@ const BoardOfDirectors = () => {
         </section>
 
         {/* Join the Board Section */}
-        <section className="py-12 bg-white mt-12 ">
+        <section className="py-12 bg-background mt-12 ">
           {/* content containter */}
           <div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
-            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
               Join the Board of Directors
             </h2>
-            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Our elections take place at our December holiday social. Here are some things to know if you are thinking about serving on the Board of Directors.
             </p>
             {/* card */}
-            <Card className="bg-[#eeebf4] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
-              <ol className="list-decimal list-inside space-y-4 text-lg text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Card className="bg-var(--lavender-200) p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
+              <ol className="list-decimal list-inside space-y-4 text-lg text-var(--purple-deep)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>
                   Nominations are due by November 1. Nomination Form:{' '}
                   <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
-                    className="text-[#664fa3] underline hover:text-[#48286e] transition-colors">
+                    className="text-var(--purple-lavender) underline hover:text-var(--purple-deep) transition-colors">
                     Click Here
                   </a>
                 </li>
@@ -139,7 +139,7 @@ const BoardOfDirectors = () => {
                     href="https://loaftx.org/bylaws/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-[#48286e] underline"
+                    className="text-var(--purple-deep) underline"
                   >
                     https://loaftx.org/bylaws/
                   </a>
diff --git a/src/pages/ChangePasswordRequired.js b/src/pages/ChangePasswordRequired.js
index bd9962e..20429dd 100644
--- a/src/pages/ChangePasswordRequired.js
+++ b/src/pages/ChangePasswordRequired.js
@@ -83,19 +83,19 @@ const ChangePasswordRequired = () => {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-md mx-auto px-6 py-12">
-        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           <div className="mb-8 text-center">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#FFEBEE] mb-4">
               <AlertTriangle className="h-8 w-8 text-orange-500" />
             </div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Password Change Required
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Your password was reset by an administrator. Please create a new password to continue.
             </p>
           </div>
@@ -111,7 +111,7 @@ const ChangePasswordRequired = () => {
                 value={formData.currentPassword}
                 onChange={handleInputChange}
                 placeholder="Enter temporary password"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
 
@@ -125,7 +125,7 @@ const ChangePasswordRequired = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
 
@@ -139,15 +139,15 @@ const ChangePasswordRequired = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
 
-            <div className="bg-[#f1eef9] border-l-4 border-[#664fa3] p-4 rounded-lg">
+            <div className="bg-var(--lavender-300) border-l-4 border-var(--purple-lavender) p-4 rounded-lg">
               <div className="flex items-start">
-                <Lock className="h-5 w-5 text-[#664fa3] mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <p className="font-medium text-[#422268] mb-1">Password Requirements:</p>
+                <Lock className="h-5 w-5 text-var(--purple-lavender) mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="font-medium text-var(--purple-ink) mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
                     <li>Both passwords must match</li>
@@ -159,17 +159,17 @@ const ChangePasswordRequired = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
             >
               {loading ? 'Changing Password...' : 'Change Password'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <div className="text-center pt-4 border-t border-[#ddd8eb]">
+            <div className="text-center pt-4 border-t border-var(--neutral-800)">
               <button
                 type="button"
                 onClick={handleLogout}
-                className="text-[#664fa3] hover:text-[#ff9e77] text-sm underline"
+                className="text-var(--purple-lavender) hover:text-var(--orange-light) text-sm underline"
               >
                 Logout instead
               </button>
diff --git a/src/pages/ContactUs.js b/src/pages/ContactUs.js
index f4e1a7c..5ad7305 100644
--- a/src/pages/ContactUs.js
+++ b/src/pages/ContactUs.js
@@ -96,15 +96,15 @@ const ContactUs = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-[#e8e0f5] to-[#f1eef9] px-6 py-16">
+      <main className="bg-gradient-to-b from-var(--lavender-100) to-var(--lavender-300) px-6 py-16">
         <div className="max-w-7xl mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
             {/* Contact Form */}
-            <Card className="p-8 bg-white rounded-2xl">
-              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[#48286e] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <Card className="p-8 bg-background rounded-2xl">
+              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-var(--purple-deep) mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Contact Form
               </h1>
 
@@ -112,7 +112,7 @@ const ContactUs = () => {
                 {/* First Name & Last Name */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <Label htmlFor="firstName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Label htmlFor="firstName" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                       First Name <span className="text-red-500">*</span>
                     </Label>
                     <Input
@@ -120,13 +120,13 @@ const ContactUs = () => {
                       name="firstName"
                       value={formData.firstName}
                       onChange={handleChange}
-                      className="border-2 border-[#ddd8eb] bg-[#eaedf4] focus:border-[#664fa3] rounded-full h-12 px-4"
+                      className="border-2 border-var(--neutral-800) bg-var(--lavender-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       required
                     />
                   </div>
                   <div>
-                    <Label htmlFor="lastName" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Label htmlFor="lastName" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Last Name <span className="text-red-500">*</span>
                     </Label>
                     <Input
@@ -134,7 +134,7 @@ const ContactUs = () => {
                       name="lastName"
                       value={formData.lastName}
                       onChange={handleChange}
-                      className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                      className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       required
                     />
@@ -143,7 +143,7 @@ const ContactUs = () => {
 
                 {/* Email */}
                 <div>
-                  <Label htmlFor="email" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="email" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Email <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -152,7 +152,7 @@ const ContactUs = () => {
                     type="email"
                     value={formData.email}
                     onChange={handleChange}
-                    className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                    className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -160,7 +160,7 @@ const ContactUs = () => {
 
                 {/* Subject */}
                 <div>
-                  <Label htmlFor="subject" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="subject" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Subject <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -168,7 +168,7 @@ const ContactUs = () => {
                     name="subject"
                     value={formData.subject}
                     onChange={handleChange}
-                    className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-full h-12 px-4"
+                    className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -176,7 +176,7 @@ const ContactUs = () => {
 
                 {/* Message */}
                 <div>
-                  <Label htmlFor="message" className="text-[#48286e] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="message" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Your Message <span className="text-red-500">*</span>
                   </Label>
                   <Textarea
@@ -184,7 +184,7 @@ const ContactUs = () => {
                     name="message"
                     value={formData.message}
                     onChange={handleChange}
-                    className="border-2 bg-[#eaedf4] border-[#ddd8eb] focus:border-[#664fa3] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
+                    className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-2xl min-h-[150px] px-4 py-3 resize-none"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -196,9 +196,9 @@ const ContactUs = () => {
                     id="consent"
                     checked={formData.consent}
                     onCheckedChange={handleConsentChange}
-                    className="mt-1 border-2 border-[#ddd8eb] data-[state=checked]:bg-[#664fa3] data-[state=checked]:border-[#664fa3]"
+                    className="mt-1 border-2 border-var(--neutral-800) data-[state=checked]:bg-var(--purple-lavender) data-[state=checked]:border-var(--purple-lavender)"
                   />
-                  <Label htmlFor="consent" className="text-[#48286e] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Label htmlFor="consent" className="text-var(--purple-deep) text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
                   </Label>
                 </div>
@@ -207,7 +207,7 @@ const ContactUs = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
+                  className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   {loading ? (
@@ -225,22 +225,22 @@ const ContactUs = () => {
             {/* Contact Information */}
             <div className="space-y-6">
               {/* Message Card */}
-              <Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-lg text-white">
+              <Card className="p-8 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) rounded-2xl shadow-lg text-white">
                 <p className="text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   If you have questions, or are interested in joining, we would love hearing from you.
                 </p>
               </Card>
 
               {/* Email Card */}
-              <Card className="p-6 bg-white rounded-2xl">
+              <Card className="p-6 bg-background rounded-2xl">
                 <div className="flex items-center gap-4">
                   <div className="flex items-center justify-center flex-shrink-0">
-                    <Mail className="size-12 text-[#664fa3]" />
+                    <Mail className="size-12 text-var(--purple-lavender)" />
                   </div>
                   <div>
                     <a
                       href="mailto:info@loaftx.org"
-                      className="text-[#865edf] text-xl font-semibold hover:text-[#48286e] transition-colors"
+                      className="text-var(--purple-electric) text-xl font-semibold hover:text-var(--purple-deep) transition-colors"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       info@loaftx.org
@@ -250,16 +250,16 @@ const ContactUs = () => {
               </Card>
 
               {/* Address Card */}
-              <Card className="p-6 bg-white rounded-2xl ">
+              <Card className="p-6 bg-background rounded-2xl ">
                 <div className="flex items-start gap-4">
                   <div className="flex items-center justify-center flex-shrink-0">
-                    <PiMapTrifoldBold className="size-12 text-[#664fa3]" />
+                    <PiMapTrifoldBold className="size-12 text-var(--purple-lavender)" />
                   </div>
                   <div>
-                    <p className="text-[#48286e] text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    <p className="text-var(--purple-deep) text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       LOAF
                     </p>
-                    <p className="text-[#48286e] text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    <p className="text-var(--purple-deep) text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       P.O. Box 7207<br />
                       Houston, Texas 77248-7207
                     </p>
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index e2d798b..9b0b7a8 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -74,9 +74,9 @@ const Dashboard = () => {
     const statusConfig = {
       pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { icon: Clock, label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { icon: CheckCircle, label: 'Pre-Validated', className: 'bg-[#81B29A] text-white' },
+      pre_validated: { icon: CheckCircle, label: 'Pre-Validated', className: 'bg-var(--green-light) text-white' },
       payment_pending: { icon: AlertCircle, label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { icon: CheckCircle, label: 'Active', className: 'bg-[#81B29A] text-white' },
+      active: { icon: CheckCircle, label: 'Active', className: 'bg-var(--green-light) text-white' },
       inactive: { icon: AlertCircle, label: 'Inactive', className: 'bg-gray-400 text-white' },
       canceled: { icon: AlertCircle, label: 'Canceled', className: 'bg-red-100 text-red-700' },
       expired: { icon: Clock, label: 'Expired', className: 'bg-red-500 text-white' },
@@ -111,30 +111,30 @@ const Dashboard = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         {/* Welcome Section */}
         <div className="mb-12">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome Back, {user?.first_name}!
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Here's an overview of your membership status and upcoming events.
           </p>
         </div>
 
         {/* Email Verification Alert */}
         {user && !user.email_verified && (
-          <Card className="p-6 bg-[#f1eef9] border-2 border-[#664fa3] mb-8">
+          <Card className="p-6 bg-var(--lavender-300) border-2 border-var(--purple-lavender) mb-8">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-[#664fa3] flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-var(--purple-lavender) flex-shrink-0 mt-1" />
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Verify Your Email Address
                 </h3>
-                <p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Please verify your email address to complete your registration.
                   Check your inbox for the verification link.
                 </p>
@@ -142,7 +142,7 @@ const Dashboard = () => {
                   onClick={handleResendVerification}
                   disabled={resendLoading}
                   variant="outline"
-                  className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
+                  className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
                 >
                   <Mail className="h-4 w-4 mr-2" />
                   {resendLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -153,22 +153,22 @@ const Dashboard = () => {
         )}
 
         {/* Status Card */}
-        <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8" data-testid="status-card">
+        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8" data-testid="status-card">
           <div className="flex items-start justify-between flex-wrap gap-4">
             <div>
-              <h2 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Membership Status
               </h2>
               <div className="mb-4">
                 {getStatusBadge(user?.status)}
               </div>
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {getStatusMessage(user?.status)}
               </p>
             </div>
             <Link to="/profile">
               <Button
-                className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
+                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
                 data-testid="view-profile-button"
               >
                 <User className="h-4 w-4 mr-2" />
@@ -181,36 +181,36 @@ const Dashboard = () => {
         {/* Grid Layout */}
         <div className="grid lg:grid-cols-3 gap-8">
           {/* Quick Stats */}
-          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="quick-stats-card">
-            <h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="quick-stats-card">
+            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Quick Info
             </h3>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-[#422268] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                <p className="text-var(--purple-ink) font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
-                <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
+                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
                 </p>
               </div>
               {user?.subscription_start_date && user?.subscription_end_date && (
                 <>
-                  <div className="pt-4 border-t border-[#ddd8eb]">
-                    <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
-                    <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <div className="pt-4 border-t border-var(--neutral-800)">
+                    <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
+                    <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
-                    <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
+                    <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
                     </p>
                   </div>
@@ -220,15 +220,15 @@ const Dashboard = () => {
           </Card>
 
           {/* Upcoming Events */}
-          <Card className="lg:col-span-2 p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="upcoming-events-card">
+          <Card className="lg:col-span-2 p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="upcoming-events-card">
             <div className="flex justify-between items-center mb-6">
-              <h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Upcoming Events
               </h3>
               <Link to="/events">
                 <Button
                   variant="ghost"
-                  className="text-[#ff9e77] hover:text-[#664fa3]"
+                  className="text-var(--orange-light) hover:text-var(--purple-lavender)"
                   data-testid="view-all-events-button"
                 >
                   View All
@@ -237,26 +237,26 @@ const Dashboard = () => {
             </div>
 
             {loading ? (
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
             ) : events.length > 0 ? (
               <div className="space-y-4">
                 {events.map((event) => (
                   <Link to={`/events/${event.id}`} key={event.id}>
                     <div
-                      className="p-4 border border-[#ddd8eb] rounded-xl hover:border-[#664fa3] hover:shadow-md transition-all cursor-pointer"
+                      className="p-4 border border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) hover:shadow-md transition-all cursor-pointer"
                       data-testid={`event-card-${event.id}`}
                     >
                       <div className="flex items-start gap-4">
-                        <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
-                          <Calendar className="h-6 w-6 text-[#664fa3]" />
+                        <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
+                          <Calendar className="h-6 w-6 text-var(--purple-lavender)" />
                         </div>
                         <div className="flex-1">
-                          <h4 className="font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <h4 className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+                          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {new Date(event.start_at).toLocaleDateString()} at{' '}
                             {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                           </p>
-                          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                         </div>
                       </div>
                     </div>
@@ -265,9 +265,9 @@ const Dashboard = () => {
               </div>
             ) : (
               <div className="text-center py-12">
-                <Calendar className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-                <p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
+                <Calendar className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+                <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
               </div>
             )}
           </Card>
@@ -275,12 +275,12 @@ const Dashboard = () => {
 
         {/* CTA Section */}
         {user?.status === 'pending_validation' && (
-          <Card className="mt-8 p-8 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
+          <Card className="mt-8 p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
             <div className="text-center">
-              <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Application Under Review
               </h3>
-              <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your membership application is being reviewed by our admin team. You'll be notified once validated!
               </p>
             </div>
@@ -289,20 +289,20 @@ const Dashboard = () => {
 
         {/* Payment Prompt for payment_pending status */}
         {user?.status === 'payment_pending' && (
-          <Card className="mt-8 p-8 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border-2 border-[#664fa3]">
+          <Card className="mt-8 p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border-2 border-var(--purple-lavender)">
             <div className="text-center">
               <div className="mb-4">
-                <AlertCircle className="h-16 w-16 text-[#664fa3] mx-auto" />
+                <AlertCircle className="h-16 w-16 text-var(--purple-lavender) mx-auto" />
               </div>
-              <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Complete Your Payment
               </h3>
-              <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Great news! Your membership application has been validated. Complete your payment to activate your membership and gain full access to all member benefits.
               </p>
               <Link to="/plans">
                 <Button
-                  className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
+                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
                   data-testid="complete-payment-cta"
                 >
                   <CheckCircle className="mr-2 h-5 w-5" />
@@ -316,38 +316,38 @@ const Dashboard = () => {
         {/* Event Activity Section */}
         <div className="mt-12">
           <div className="flex justify-between items-center mb-6">
-            <h2 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               My Event Activity
             </h2>
           </div>
 
           {activityLoading ? (
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
           ) : eventActivity ? (
             <div className="space-y-8">
               {/* Stats Cards */}
               <div className="grid md:grid-cols-2 gap-6">
-                <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
+                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
                   <div className="flex items-center gap-4">
-                    <div className="bg-[#DDD8EB]/20 p-4 rounded-lg">
-                      <Calendar className="h-8 w-8 text-[#664fa3]" />
+                    <div className="bg-var(--neutral-800)/20 p-4 rounded-lg">
+                      <Calendar className="h-8 w-8 text-var(--purple-lavender)" />
                     </div>
                     <div>
-                      <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
-                      <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+                      <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {eventActivity.total_rsvps}
                       </p>
                     </div>
                   </div>
                 </Card>
-                <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
+                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
                   <div className="flex items-center gap-4">
-                    <div className="bg-[#81B29A]/20 p-4 rounded-lg">
-                      <CheckCircle className="h-8 w-8 text-[#81B29A]" />
+                    <div className="bg-var(--green-light)/20 p-4 rounded-lg">
+                      <CheckCircle className="h-8 w-8 text-var(--green-light)" />
                     </div>
                     <div>
-                      <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
-                      <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
+                      <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {eventActivity.total_attended}
                       </p>
                     </div>
@@ -357,30 +357,30 @@ const Dashboard = () => {
 
               {/* Upcoming RSVP'd Events */}
               {eventActivity.upcoming_events && eventActivity.upcoming_events.length > 0 && (
-                <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-                  <h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                  <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Upcoming Events (RSVP'd)
                   </h3>
                   <div className="space-y-3">
                     {eventActivity.upcoming_events.map((event) => (
                       <Link to={`/events/${event.id}`} key={event.id}>
-                        <div className="p-4 border border-[#ddd8eb] rounded-xl hover:border-[#664fa3] hover:shadow-md transition-all">
+                        <div className="p-4 border border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) hover:shadow-md transition-all">
                           <div className="flex items-start justify-between gap-4">
                             <div className="flex-1">
-                              <h4 className="font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                              <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <h4 className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+                              <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 {new Date(event.start_at).toLocaleDateString()} at{' '}
                                 {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                               </p>
-                              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                             </div>
                             <Badge className={
-                              event.rsvp_status === 'yes' ? 'bg-[#81B29A] text-white' :
-                              event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
-                              'bg-gray-200 text-gray-700'
+                              event.rsvp_status === 'yes' ? 'bg-var(--green-light) text-white' :
+                                event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
+                                  'bg-gray-200 text-gray-700'
                             }>
                               {event.rsvp_status === 'yes' ? 'Going' :
-                               event.rsvp_status === 'maybe' ? 'Maybe' : 'Not Going'}
+                                event.rsvp_status === 'maybe' ? 'Maybe' : 'Not Going'}
                             </Badge>
                           </div>
                         </div>
@@ -392,27 +392,27 @@ const Dashboard = () => {
 
               {/* Past Events & Attendance */}
               {eventActivity.past_events && eventActivity.past_events.length > 0 && (
-                <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-                  <h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                  <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Past Events
                   </h3>
                   <div className="space-y-3">
                     {eventActivity.past_events.slice(0, 5).map((event) => (
-                      <div key={event.id} className="p-4 border border-[#ddd8eb] rounded-xl">
+                      <div key={event.id} className="p-4 border border-var(--neutral-800) rounded-xl">
                         <div className="flex items-start justify-between gap-4">
                           <div className="flex-1">
-                            <h4 className="font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <h4 className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+                            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {new Date(event.start_at).toLocaleDateString()} at{' '}
                               {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                             </p>
                           </div>
                           <div className="flex flex-col items-end gap-2">
-                            <Badge className={event.attended ? 'bg-[#81B29A] text-white' : 'bg-gray-200 text-gray-700'}>
+                            <Badge className={event.attended ? 'bg-var(--green-light) text-white' : 'bg-gray-200 text-gray-700'}>
                               {event.attended ? 'Attended' : 'Did not attend'}
                             </Badge>
                             {event.attended && event.attended_at && (
-                              <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 Checked in: {new Date(event.attended_at).toLocaleDateString()}
                               </p>
                             )}
@@ -422,7 +422,7 @@ const Dashboard = () => {
                     ))}
                   </div>
                   {eventActivity.past_events.length > 5 && (
-                    <p className="text-sm text-center text-[#664fa3] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-sm text-center text-var(--purple-lavender) mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Showing 5 of {eventActivity.past_events.length} past events
                     </p>
                   )}
@@ -431,31 +431,31 @@ const Dashboard = () => {
 
               {/* No Events Message */}
               {(!eventActivity.upcoming_events || eventActivity.upcoming_events.length === 0) &&
-               (!eventActivity.past_events || eventActivity.past_events.length === 0) && (
-                <Card className="p-12 bg-white rounded-2xl border border-[#ddd8eb]">
-                  <div className="text-center">
-                    <Calendar className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-                    <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      No Event Activity Yet
-                    </h3>
-                    <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      Browse upcoming events and RSVP to start building your event history!
-                    </p>
-                    <Link to="/events">
-                      <Button className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6">
-                        <Calendar className="h-4 w-4 mr-2" />
-                        Browse Events
-                      </Button>
-                    </Link>
-                  </div>
-                </Card>
-              )}
+                (!eventActivity.past_events || eventActivity.past_events.length === 0) && (
+                  <Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800)">
+                    <div className="text-center">
+                      <Calendar className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+                      <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        No Event Activity Yet
+                      </h3>
+                      <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Browse upcoming events and RSVP to start building your event history!
+                      </p>
+                      <Link to="/events">
+                        <Button className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6">
+                          <Calendar className="h-4 w-4 mr-2" />
+                          Browse Events
+                        </Button>
+                      </Link>
+                    </div>
+                  </Card>
+                )}
             </div>
           ) : (
-            <Card className="p-12 bg-white rounded-2xl border border-[#ddd8eb]">
+            <Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800)">
               <div className="text-center">
-                <AlertCircle className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-                <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <AlertCircle className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+                <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Failed to load event activity. Please try refreshing the page.
                 </p>
               </div>
diff --git a/src/pages/Donate.js b/src/pages/Donate.js
index 4503ef6..f3bd5b1 100644
--- a/src/pages/Donate.js
+++ b/src/pages/Donate.js
@@ -58,17 +58,17 @@ const Donate = () => {
     <div className="min-h-screen">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
+      <main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
         {/* Hero Section */}
         <section className="py-12">
           <div className="max-w-4xl mx-auto text-center h-full">
             <div className="flex justify-center mb-4">
               <img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
             </div>
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[#48286e] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-var(--purple-deep) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Donate
             </h1>
-            <p className="text-xl text-[#48286e] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <p className="text-xl text-var(--purple-deep) font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
               We really appreciate your donations. You can make your donation online
               or send a check by mail.
             </p>
@@ -79,96 +79,96 @@ const Donate = () => {
         <div className="py-12">
           <div className='grid grid-cols-1 items-stretch lg:grid-cols-[2fr_1fr] gap-8 lg:max-h-[450px]'>
 
-          {/* Donation Amount Buttons */}
-          <section className="flex flex-col h-full">
-            <div className="mx-auto flex-1 w-full h-full">
-              <Card className="p-8 bg-white rounded-3xl w-full h-full content-center">
-                <div className="flex items-center gap-4 mb-6">
-                  <CreditCard className="size-24 text-[#664fa3]" />
-                  <h2 className="text-3xl font-bold text-[#48286e]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    Select Your Donation Amount
-                  </h2>
-                </div>
-
-                {/* Donation Buttons Grid */}
-                <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
-                  {[25, 50, 100, 250].map(amount => (
-                    <Button
-                      key={amount}
-                      onClick={() => handleDonateAmount(amount * 100)}
-                      disabled={processingAmount === amount * 100}
-                      className="bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full disabled:opacity-50"
-                    >
-                      {processingAmount === amount * 100 ? (
-                        <Loader2 className="h-6 w-6 animate-spin" />
-                      ) : (
-                        `$${amount}`
-                      )}
-                    </Button>
-                  ))}
-                </div>
-
-                {/* Custom Amount Button */}
-                <Button
-                  onClick={() => setCustomAmountDialogOpen(true)}
-                  disabled={processingAmount !== null}
-                  className="w-full bg-[#664fa3] hover:bg-[#48286e] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
-                >
-                  <Heart className="h-6 w-6" />
-                  Donate Any Amount
-                </Button>
-
-                <p className="text-sm text-[#664fa3] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  Secure donation processing powered by Stripe
-                </p>
-              </Card>
-            </div>
-          </section>
-
-          {/* Alternative Payment Methods */}
-          <section className="flex flex-col">
-            <div className="max-w-6xl mx-auto w-full">
-              <div className="flex flex-col gap-8 w-full">
-                {/* Mail Check */}
-                <Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
-                  <Mail className="size-24 text-[#664fa3]" />
-
-                  <div>
-                    <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      Mail a Check
-                    </h3>
-                    <p className="text-lg text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      Our mailing address for checks:<br />
-                      <span className="font-semibold">LOAF</span><br />
-                      P.O. Box 7207<br />
-                      Houston, Texas 77248-7207
-                    </p>
-                  </div>
-                </Card>
-
-                {/* Zelle */}
-                <Card className="p-8 bg-white rounded-3xl flex gap-4 items-center flex-1">
-                  <div className="w-44">
-                    <img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
+            {/* Donation Amount Buttons */}
+            <section className="flex flex-col h-full">
+              <div className="mx-auto flex-1 w-full h-full">
+                <Card className="p-8 bg-background rounded-3xl w-full h-full content-center">
+                  <div className="flex items-center gap-4 mb-6">
+                    <CreditCard className="size-24 text-var(--purple-lavender)" />
+                    <h2 className="text-3xl font-bold text-var(--purple-deep)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      Select Your Donation Amount
+                    </h2>
                   </div>
 
-                  <div>
-                    <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      Pay with Zelle
-                    </h3>
-                    <p className="text-lg text-[#48286e] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      If your bank allows the use of Zelle, please feel free to send money to:
-                    </p>
-                    <a href="mailto:LOAFHoustonTX@gmail.com"
-                      className="text-[#664fa3] text-lg font-bold underline hover:text-[#48286e] transition-colors"
-                      style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      LOAFHoustonTX@gmail.com
-                    </a>
+                  {/* Donation Buttons Grid */}
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+                    {[25, 50, 100, 250].map(amount => (
+                      <Button
+                        key={amount}
+                        onClick={() => handleDonateAmount(amount * 100)}
+                        disabled={processingAmount === amount * 100}
+                        className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white text-xl py-8 rounded-full disabled:opacity-50"
+                      >
+                        {processingAmount === amount * 100 ? (
+                          <Loader2 className="h-6 w-6 animate-spin" />
+                        ) : (
+                          `$${amount}`
+                        )}
+                      </Button>
+                    ))}
                   </div>
+
+                  {/* Custom Amount Button */}
+                  <Button
+                    onClick={() => setCustomAmountDialogOpen(true)}
+                    disabled={processingAmount !== null}
+                    className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
+                  >
+                    <Heart className="h-6 w-6" />
+                    Donate Any Amount
+                  </Button>
+
+                  <p className="text-sm text-var(--purple-lavender) text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    Secure donation processing powered by Stripe
+                  </p>
                 </Card>
               </div>
-            </div>
-          </section>
+            </section>
+
+            {/* Alternative Payment Methods */}
+            <section className="flex flex-col">
+              <div className="max-w-6xl mx-auto w-full">
+                <div className="flex flex-col gap-8 w-full">
+                  {/* Mail Check */}
+                  <Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
+                    <Mail className="size-24 text-var(--purple-lavender)" />
+
+                    <div>
+                      <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        Mail a Check
+                      </h3>
+                      <p className="text-lg text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Our mailing address for checks:<br />
+                        <span className="font-semibold">LOAF</span><br />
+                        P.O. Box 7207<br />
+                        Houston, Texas 77248-7207
+                      </p>
+                    </div>
+                  </Card>
+
+                  {/* Zelle */}
+                  <Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
+                    <div className="w-44">
+                      <img src={zelleLogo} alt="Zelle" className=" w-32" onError={(e) => e.target.style.display = 'none'} />
+                    </div>
+
+                    <div>
+                      <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        Pay with Zelle
+                      </h3>
+                      <p className="text-lg text-var(--purple-deep) leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        If your bank allows the use of Zelle, please feel free to send money to:
+                      </p>
+                      <a href="mailto:LOAFHoustonTX@gmail.com"
+                        className="text-var(--purple-lavender) text-lg font-bold underline hover:text-var(--purple-deep) transition-colors"
+                        style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        LOAFHoustonTX@gmail.com
+                      </a>
+                    </div>
+                  </Card>
+                </div>
+              </div>
+            </section>
 
           </div>
         </div>
@@ -179,23 +179,23 @@ const Donate = () => {
 
       {/* Custom Amount Dialog */}
       <Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
-        <DialogContent className="sm:max-w-[450px] bg-white rounded-3xl">
+        <DialogContent className="sm:max-w-[450px] bg-background rounded-3xl">
           <DialogHeader>
-            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Enter Donation Amount
             </DialogTitle>
-            <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Choose how much you'd like to donate to support our community
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4 py-4">
             <div>
-              <Label htmlFor="customAmount" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Label htmlFor="customAmount" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Amount (USD)
               </Label>
               <div className="relative mt-2">
-                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#664fa3] text-xl font-semibold">
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-var(--purple-lavender) text-xl font-semibold">
                   $
                 </span>
                 <Input
@@ -206,7 +206,7 @@ const Donate = () => {
                   value={customAmount}
                   onChange={(e) => setCustomAmount(e.target.value)}
                   placeholder="50.00"
-                  className="pl-10 h-14 text-xl border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-xl"
+                  className="pl-10 h-14 text-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-xl"
                   onKeyPress={(e) => {
                     if (e.key === 'Enter') {
                       handleCustomDonate();
@@ -214,13 +214,13 @@ const Donate = () => {
                   }}
                 />
               </div>
-              <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum donation: $1.00
               </p>
             </div>
 
-            <div className="bg-[#f1eef9] rounded-lg p-4">
-              <p className="text-sm text-[#422268] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="bg-var(--lavender-300) rounded-lg p-4">
+              <p className="text-sm text-var(--purple-ink) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>Thank you for supporting LOAF!</strong><br />
                 Your donation helps us continue our mission and provide meaningful experiences for our community.
               </p>
@@ -232,14 +232,14 @@ const Donate = () => {
               type="button"
               variant="outline"
               onClick={() => setCustomAmountDialogOpen(false)}
-              className="rounded-full border-2 border-[#ddd8eb]"
+              className="rounded-full border-2 border-var(--neutral-800)"
             >
               Cancel
             </Button>
             <Button
               type="button"
               onClick={handleCustomDonate}
-              className="bg-[#664fa3] text-white hover:bg-[#48286e] rounded-full"
+              className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-deep) rounded-full"
             >
               Continue to Payment
             </Button>
diff --git a/src/pages/DonationSuccess.js b/src/pages/DonationSuccess.js
index aa18db7..9618131 100644
--- a/src/pages/DonationSuccess.js
+++ b/src/pages/DonationSuccess.js
@@ -11,12 +11,12 @@ const DonationSuccess = () => {
   const loafHearts = `${process.env.PUBLIC_URL}/loaf-hearts.png`;
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-white to-[#f1eef9] px-6 py-20">
+      <main className="bg-gradient-to-b from-white to-var(--lavender-300) px-6 py-20">
         <div className="max-w-2xl mx-auto">
-          <Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border-2 border-[#ddd8eb] shadow-xl text-center">
+          <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border-2 border-var(--neutral-800) shadow-xl text-center">
             {/* Success Icon */}
             <div className="flex justify-center mb-4">
               <img
@@ -26,34 +26,34 @@ const DonationSuccess = () => {
                 onError={(e) => e.target.style.display = 'none'}
               />
             </div>
-            <div className="inline-flex items-center justify-center w-20 h-20 bg-[#81B29A]/10 rounded-full mb-6">
-              <CheckCircle className="h-12 w-12 text-[#81B29A]" />
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-var(--green-light)/10 rounded-full mb-6">
+              <CheckCircle className="h-12 w-12 text-var(--green-light)" />
             </div>
 
             {/* Title */}
-            <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Thank You for Your Donation!
             </h1>
 
             {/* Message */}
             <div className="space-y-4 mb-8">
-              <p className="text-xl text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xl text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your generous contribution helps support our community and continue our mission.
               </p>
 
-              <div className="bg-gradient-to-r from-[#f1eef9] to-[#DDD8EB]/30 rounded-2xl p-6 border-2 border-[#ddd8eb]">
-                <div className="flex items-center justify-center gap-2 text-[#ff9e77] mb-2">
+              <div className="bg-gradient-to-r from-var(--lavender-300) to-var(--neutral-800)/30 rounded-2xl p-6 border-2 border-var(--neutral-800)">
+                <div className="flex items-center justify-center gap-2 text-var(--orange-light) mb-2">
                   <Heart className="h-6 w-6" />
                   <span className="text-lg font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Your Support Makes a Difference
                   </span>
                 </div>
-                <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A receipt for your donation has been sent to your email address.
                 </p>
               </div>
 
-              <p className="text-base text-[#664fa3] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-var(--purple-lavender) pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
               </p>
             </div>
@@ -62,7 +62,7 @@ const DonationSuccess = () => {
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button
                 onClick={() => navigate('/')}
-                className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
+                className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full px-8 py-6 text-lg font-medium shadow-lg"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Return to Home
@@ -70,7 +70,7 @@ const DonationSuccess = () => {
               <Button
                 onClick={() => navigate('/donate')}
                 variant="outline"
-                className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#DDD8EB]/20 rounded-full px-8 py-6 text-lg font-medium"
+                className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--neutral-800)/20 rounded-full px-8 py-6 text-lg font-medium"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Make Another Donation
@@ -80,12 +80,12 @@ const DonationSuccess = () => {
 
           {/* Additional Info */}
           <div className="mt-12 text-center">
-            <p className="text-sm text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Have questions about your donation?
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="text-[#ff9e77] hover:text-[#664fa3] font-medium transition-colors"
+              className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium transition-colors"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact us at support@loaf.org
diff --git a/src/pages/EventDetails.js b/src/pages/EventDetails.js
index a87ef89..1b0ebb5 100644
--- a/src/pages/EventDetails.js
+++ b/src/pages/EventDetails.js
@@ -48,10 +48,10 @@ const EventDetails = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
         </div>
       </div>
     );
@@ -62,34 +62,33 @@ const EventDetails = () => {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <button
           onClick={() => navigate('/events')}
-          className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors mb-8"
+          className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors mb-8"
           data-testid="back-to-events-button"
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
           Back to Events
         </button>
 
-        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           <div className="mb-8">
             <div className="flex items-center gap-4 mb-6">
-              <div className="bg-[#DDD8EB]/20 p-4 rounded-xl">
-                <Calendar className="h-10 w-10 text-[#664fa3]" />
+              <div className="bg-var(--neutral-800)/20 p-4 rounded-xl">
+                <Calendar className="h-10 w-10 text-var(--purple-lavender)" />
               </div>
               {event.user_rsvp_status && (
                 <Badge
-                  className={`px-4 py-2 rounded-full text-sm ${
-                    event.user_rsvp_status === 'yes'
-                      ? 'bg-[#81B29A] text-white'
-                      : event.user_rsvp_status === 'no'
+                  className={`px-4 py-2 rounded-full text-sm ${event.user_rsvp_status === 'yes'
+                    ? 'bg-var(--green-light) text-white'
+                    : event.user_rsvp_status === 'no'
                       ? 'bg-gray-400 text-white'
                       : 'bg-orange-100 text-orange-700'
-                  }`}
+                    }`}
                 >
                   {event.user_rsvp_status === 'yes' && 'Going'}
                   {event.user_rsvp_status === 'no' && 'Not Going'}
@@ -98,12 +97,12 @@ const EventDetails = () => {
               )}
             </div>
 
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               {event.title}
             </h1>
 
             <div className="space-y-4 text-lg">
-              <div className="flex items-center gap-3 text-[#664fa3]">
+              <div className="flex items-center gap-3 text-var(--purple-lavender)">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleDateString('en-US', {
@@ -114,18 +113,18 @@ const EventDetails = () => {
                   })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-[#664fa3]">
+              <div className="flex items-center gap-3 text-var(--purple-lavender)">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
                   {new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-[#664fa3]">
+              <div className="flex items-center gap-3 text-var(--purple-lavender)">
                 <MapPin className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
               </div>
-              <div className="flex items-center gap-3 text-[#664fa3]">
+              <div className="flex items-center gap-3 text-var(--purple-lavender)">
                 <Users className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -136,29 +135,28 @@ const EventDetails = () => {
           </div>
 
           {event.description && (
-            <div className="mb-8 pb-8 border-b border-[#ddd8eb]">
-              <h2 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="mb-8 pb-8 border-b border-var(--neutral-800)">
+              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About This Event
               </h2>
-              <p className="text-[#664fa3] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {event.description}
               </p>
             </div>
           )}
 
           <div>
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               RSVP to This Event
             </h2>
             <div className="flex gap-4 flex-wrap">
               <Button
                 onClick={() => handleRSVP('yes')}
                 disabled={rsvpLoading}
-                className={`rounded-full px-8 py-6 flex items-center gap-2 ${
-                  event.user_rsvp_status === 'yes'
-                    ? 'bg-[#81B29A] text-white'
-                    : 'bg-[#DDD8EB] text-[#422268] hover:bg-white'
-                }`}
+                className={`rounded-full px-8 py-6 flex items-center gap-2 ${event.user_rsvp_status === 'yes'
+                  ? 'bg-var(--green-light) text-white'
+                  : 'bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background'
+                  }`}
                 data-testid="rsvp-yes-button"
               >
                 <Check className="h-5 w-5" />
@@ -168,11 +166,10 @@ const EventDetails = () => {
                 onClick={() => handleRSVP('maybe')}
                 disabled={rsvpLoading}
                 variant="outline"
-                className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
-                  event.user_rsvp_status === 'maybe'
-                    ? 'border-orange-400 bg-orange-100 text-orange-700'
-                    : 'border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9]'
-                }`}
+                className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${event.user_rsvp_status === 'maybe'
+                  ? 'border-orange-400 bg-orange-100 text-orange-700'
+                  : 'border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300)'
+                  }`}
                 data-testid="rsvp-maybe-button"
               >
                 <HelpCircle className="h-5 w-5" />
@@ -182,11 +179,10 @@ const EventDetails = () => {
                 onClick={() => handleRSVP('no')}
                 disabled={rsvpLoading}
                 variant="outline"
-                className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${
-                  event.user_rsvp_status === 'no'
-                    ? 'border-gray-400 bg-gray-100 text-gray-700'
-                    : 'border-gray-400 text-gray-600 hover:bg-gray-50'
-                }`}
+                className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${event.user_rsvp_status === 'no'
+                  ? 'border-gray-400 bg-gray-100 text-gray-700'
+                  : 'border-gray-400 text-gray-600 hover:bg-gray-50'
+                  }`}
                 data-testid="rsvp-no-button"
               >
                 <X className="h-5 w-5" />
@@ -195,11 +191,11 @@ const EventDetails = () => {
             </div>
 
             {/* Add to Calendar Section */}
-            <div className="mt-8 pt-8 border-t border-[#ddd8eb]">
-              <h2 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="mt-8 pt-8 border-t border-var(--neutral-800)">
+              <h2 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Add to Your Calendar
               </h2>
-              <p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Never miss this event! Add it to your calendar app for reminders.
               </p>
               <AddToCalendarButton
diff --git a/src/pages/Events.js b/src/pages/Events.js
index 51e809a..77e1e70 100644
--- a/src/pages/Events.js
+++ b/src/pages/Events.js
@@ -30,7 +30,7 @@ const Events = () => {
     if (!rsvpStatus) return null;
 
     const config = {
-      yes: { label: 'Going', className: 'bg-[#81B29A] text-white' },
+      yes: { label: 'Going', className: 'bg-var(--green-light) text-white' },
       no: { label: 'Not Going', className: 'bg-gray-400 text-white' },
       maybe: { label: 'Maybe', className: 'bg-orange-100 text-orange-700' }
     };
@@ -46,67 +46,67 @@ const Events = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="mb-12">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Upcoming Events
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse and RSVP to our community events.
           </p>
         </div>
 
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
           </div>
         ) : events.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
             {events.map((event) => (
               <Link to={`/events/${event.id}`} key={event.id}>
                 <Card
-                  className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
+                  className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
                   data-testid={`event-card-${event.id}`}
                 >
                   <div className="flex justify-between items-start mb-4">
-                    <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
-                      <Calendar className="h-6 w-6 text-[#664fa3]" />
+                    <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
+                      <Calendar className="h-6 w-6 text-var(--purple-lavender)" />
                     </div>
                     {getRSVPBadge(event.user_rsvp_status)}
                   </div>
 
-                  <h3 className="text-xl font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h3 className="text-xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {event.title}
                   </h3>
 
                   {event.description && (
-                    <p className="text-[#664fa3] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-var(--purple-lavender) mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {event.description}
                     </p>
                   )}
 
                   <div className="space-y-2 text-sm">
-                    <div className="flex items-center gap-2 text-[#664fa3]">
+                    <div className="flex items-center gap-2 text-var(--purple-lavender)">
                       <Calendar className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(event.start_at).toLocaleDateString()} at{' '}
                         {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-2 text-[#664fa3]">
+                    <div className="flex items-center gap-2 text-var(--purple-lavender)">
                       <MapPin className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
                     </div>
-                    <div className="flex items-center gap-2 text-[#664fa3]">
+                    <div className="flex items-center gap-2 text-var(--purple-lavender)">
                       <Users className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.rsvp_count || 0} attending</span>
                     </div>
                   </div>
 
-                  <div className="mt-6 flex items-center text-[#ff9e77] font-medium">
+                  <div className="mt-6 flex items-center text-var(--orange-light) font-medium">
                     View Details
                     <ArrowRight className="ml-2 h-4 w-4" />
                   </div>
@@ -116,11 +116,11 @@ const Events = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <Calendar className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Calendar className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Events Available
             </h3>
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               There are no upcoming events at the moment. Check back later!
             </p>
           </div>
diff --git a/src/pages/ForgotPassword.js b/src/pages/ForgotPassword.js
index 6f66c70..2573662 100644
--- a/src/pages/ForgotPassword.js
+++ b/src/pages/ForgotPassword.js
@@ -32,28 +32,28 @@ const ForgotPassword = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/login" className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors">
+          <Link to="/login" className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Login
           </Link>
         </div>
 
-        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           {!submitted ? (
             <>
               <div className="mb-8 text-center">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#f1eef9] mb-4">
-                  <Mail className="h-8 w-8 text-[#664fa3]" />
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-var(--lavender-300) mb-4">
+                  <Mail className="h-8 w-8 text-var(--purple-lavender)" />
                 </div>
-                <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Forgot Password?
                 </h1>
-                <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   No worries! Enter your email and we'll send you reset instructions.
                 </p>
               </div>
@@ -69,22 +69,22 @@ const ForgotPassword = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="your.email@example.com"
-                    className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   />
                 </div>
 
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+                  className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
                 >
                   {loading ? 'Sending...' : 'Send Reset Link'}
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
 
-                <p className="text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Remember your password?{' '}
-                  <Link to="/login" className="text-[#ff9e77] hover:underline font-medium">
+                  <Link to="/login" className="text-var(--orange-light) hover:underline font-medium">
                     Login here
                   </Link>
                 </p>
@@ -92,21 +92,21 @@ const ForgotPassword = () => {
             </>
           ) : (
             <div className="text-center">
-              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#E8F5E9] mb-6">
-                <CheckCircle className="h-8 w-8 text-[#4CAF50]" />
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-var(--green-bg) mb-6">
+                <CheckCircle className="h-8 w-8 text-var(--green-success]" />
               </div>
-              <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Check Your Email
               </h1>
-              <p className="text-lg text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                If an account exists for <span className="font-medium text-[#422268]">{email}</span>,
+              <p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                If an account exists for <span className="font-medium text-var(--purple-ink)">{email}</span>,
                 you will receive a password reset link shortly.
               </p>
-              <p className="text-sm text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The link will expire in 1 hour. If you don't see the email, check your spam folder.
               </p>
               <Link to="/login">
-                <Button className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
+                <Button className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
                   Return to Login
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
diff --git a/src/pages/History.js b/src/pages/History.js
index 0af839e..7d263ba 100644
--- a/src/pages/History.js
+++ b/src/pages/History.js
@@ -9,7 +9,7 @@ import { LuArrowDown } from "react-icons/lu";
 const CardSection = ({ children, className = '', arrow = true }) => (
   <section className={` ${className}`}>
     <div className="max-w-7xl mx-auto">
-      <Card className="p-14 bg-white rounded-3xl">
+      <Card className="p-14 bg-background rounded-3xl">
         {children}
       </Card>
     </div>
@@ -23,13 +23,13 @@ const CardSection = ({ children, className = '', arrow = true }) => (
 );
 
 const Title = ({ children }) => (
-  <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+  <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
     {children}
   </h2>
 );
 
 const Paragragh = ({ children }) => (
-  <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+  <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
     {children}
   </p>
 );
@@ -43,18 +43,18 @@ const History = () => {
 
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-br from-[#F9FAFB] to-[#DCD7EA] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
+      <main className="bg-gradient-to-br from-var(--neutral-100:) to-var(--neutral-700) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
         {/* Hero Section */}
         <section className="py-12">
           <div className="max-w-3xl mx-auto flex justify-around mb-12 flex-col gap-6 items-center lg:flex-row">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[#48286e] "
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-var(--purple-deep) "
               style={{ fontFamily: "'Poppins', sans-serif" }}>
               History of LOAF
             </h1>
-            <div className="flex items-center justify-center gap-6 text-[#48286e]">
+            <div className="flex items-center justify-center gap-6 text-var(--purple-deep)">
               <Pen className="size-7" />
               <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 By Arden Eversmeyer
@@ -69,19 +69,19 @@ const History = () => {
             <div className="md:w-1/3 ">
               <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
                 className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-              <p className="text-sm text-[#48286e] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-deep) mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Arden Eversmeyer and Charlotte Avery
               </p>
             </div>
             <div className="md:w-2/3">
               <Title>Part 1</Title>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In 1985 my life partner of 33 years died. For many years we had been part of a large “friendship group”, many of whom had been together longer than we had. But I was the first to lose a partner. After a few months I began to feel the need to explore community. Already retired, the necessity of being closeted was gone. I soon discovered there was no group for mid-life an old lesbians in Houston, and began the search for such groups around the U.S.
               </p>
-              <p className="text-md mb-4 text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md mb-4 text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In April of 1987 I loaded my camper and headed for California. I started in San Diego, and worked my way up the coast to San Francisco finding and visiting senior LGBT groups. I came home with much information, and some suggestions about organizing. One fact that was consistent with all the groups was that if the group was for both men and women - the women dropped out. The recommendation was to start a group for women only.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
+              <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
             </div>
           </div>
         </CardSection>
@@ -90,13 +90,13 @@ const History = () => {
         {/* Part 2 */}
         <CardSection >
           <Title>Part 2</Title>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
           </p>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
           </p>
-          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-[#48286e]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-var(--purple-deep)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <li>AGE OF PARTICIPANTS - We launched as LOAFF (Lesbians Over Age Fifty-Five) and quickly lowered the entry age to fifty so more women could join.</li>
             <li>NAME FOR THE GROUP - The acronym began as LOAFF, then we streamlined it to the now-familiar LOAF.</li>
             <li>AMOUNT OF STRUCTURING - Too many rules can smother a grassroots group, so we kept things loose and let participating women guide direction as needs evolved.</li>
@@ -119,13 +119,13 @@ const History = () => {
             </div>
             <div className="">
               <Title>Part 3</Title>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The first meeting of LOAF was the third Sunday of October 1987 at Womynspace. There were six women besides myself at that first meeting. attending were Betty Rudnick, Billie Carter, Josephine Jones, Sylvia Porter, Marjorie Fulp, and Charlotte Avery. Of those six women, only Sylvia Porter and Charlotte Avery are still alive.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Much that we discussed that day is still the heart of the group today - decisions by consensus at monthly meetings and activities governed by needs and wishes of participating women. It was soon decided to make the age requirement for membership age 50, and we became LOAF.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In 1989 member Jo Stewart, social worker at Methodist Hospital, started urging LOAF to incorporate as a non-profit. The work began in 1990 with Moore & Hunt (Debbie Hunt) as our Corporate Attorneys. Jo died of cancer in 1990. The work for application of our 501(c)3 was done by Floi Ewing, Arden&apos;s sister, and our non-profit status was granted in January 1991. Loaf incorporated as a social networking and support group without a membership roll to protect the anonymity of the women in LOAF.
               </p>
             </div>
@@ -137,7 +137,7 @@ const History = () => {
         <CardSection>
           <div className=" ">
             <Title>Part 4</Title>
-            <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Third Sunday meeting places have changed over the years. We moved from Womynspace to Autrey House near Rice University. We were there from November 1987 until May 1990 when the new Bishop dis-invited all GLBT groups because of homophobia. We spent a couple months at Montrose Counseling Center (on Lovett), and then moved to the Metropolitan Multi- Service Center on W. Gray. We met there from August 1990 until January 1993. We left because the city started closing the centers on Sunday, and we were not willing to change our meeting day. From February through June we met at Inklings Book Store . In July we started our long occupancy with Houston Mission Church, and met there until the church dissolved in April 2001. We then met at the Hollyfield Center for seven months. From there we went to the GLBT Community Center on Hawthorne where we stayed until July 2003. Attendance was dropping off, and some of the women were not comfortable in a gay identified place. So Third Sunday Meetings moved to Charlotte and Arden&apos;s home - and we met there from August 2003 until April 2011. Membership had grown until the meetings had reached critical mass and parking was a problem. So a team of board members started researching for a new home. And on the third Sunday of May 2011 LOAF started meeting at the Montrose Counseling Center. A new era had started.
             </p>
           </div>
@@ -155,16 +155,16 @@ const History = () => {
 
             <div className="w-full lg:w-1/2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <Title>Part 5</Title>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" >
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" >
                 The activities of the monthly meetings were decided by the participating women. Rules were very limited, and decisions were made monthly by the women attending. We soon decided to set up a quarterly meeting schedule of pot-luck, speaker, and games. We followed this schedule for at least ten years. New ideas/programs were added as time allowed. Our first speaker was Pokey Anderson, an icon in the GLBT community. She provided much information about our history in Houston. We also decided to ask Deb Hunt to talk to us about documents, and she has done this periodically over the years. She spoke to us well before we decided to incorporate, and she then became our Corporate Attorney.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In November 1988 we instituted our annual Benevolent Project. We collected items to contribute to Stone Soup Kitchen - a GLBT food pantry. We have done this every year since, and have contributed to groups such as Omega House, The Rose, Battered Women, local lesbian organizations, and some individuals.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In June 1989 we entered our first Pride Parade. That year we had a convertible and a walking group. Several of the LOAF women participate with other groups in the parade, but we have participated every year since 1989. In 2010 we entered our first float and won a trophy for best representation of the theme.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 All of these decisions were made by the women at the Third Sunday meetings. There have never been rules instigated by the Board of Directors. Because many women don&apos;t want to attend meetings, we changed Third Sunday Meeting to Meet &apos;N Greet several years ago. And that is what we do - take care of any necessary business. But greet newcomers and socialize with our friends.
               </p>
             </div>
@@ -176,23 +176,23 @@ const History = () => {
         {/* Part 6 */}
         <CardSection >
 
-          <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Part 6
           </h2>
 
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Socials have always been a big part of the activities for LOAF, and having a social as well as the monthly “Third Sunday” meeting was always on the calendar. Pot lucks topped the list for many years, and they were hosted by women in their homes. That is more difficult now because of the size of the membership. Bev and Sandy have hosted a potluck since 1995, and Eva Geer for several years.
           </p>
 
-          <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             The ice cream socials started in 1989. There are still women who have never cranked or eaten home made ice cream.The “picnic in the park” started in 2000. We have held picnics in a couple State Parks as well as Tom Bass Park in recent years.In 1988 we started attending the TUTS Broadway Musical at Miller Theater in July. We bring a snack supper and a chair and sit on the hill.In 2000 we started eating at Sudie's Catfish House in January. A breather from a busy party season, but a good way to connect.From 1987 to 1994 we had “Second Tuesday Dancing”. First at The Ranch, and then at Ms B&apos;s, it was our way to celebrate birthdays of the month. It was well attended.
           </p>
 
-          <p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             From 1989 to 1993 we had a five day Thanksgiving camp-out at a State Park. We roasted turkey and women came for potluck on Thanksgiving Day.We had from 10 to 20 campers, and maybe 25 for dinner.We have had a Christmas party every year since 1987.We have had several Port of Houston tours on the Sam Houston; several Houston Zoo tours; museum tours; and out-of town tours for bluebonnets, miniature horses, and Blue Bell ice cream. And occasionally, for lack of inspiration for an event social, we simply met for lunch at a local restaurant.
           </p>
 
-          <p className="text-md text-[#48286e] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             LOAF has always been a social group. We have never had support groups or counseling. We are a place to meet other lesbians over fifty, make friends, and have fun.
           </p>
 
@@ -208,13 +208,13 @@ const History = () => {
 
             </div>
             <div className="md:w-2/3">
-              <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Part 7
               </h2>
-              <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The LOAF Library has been an important part of the offering to the women. It started about 1987 when Arden discovered there were books - both fiction and non-fiction - about lesbians. We had one bookstore then -” Wilde &apos;N Stein” - that had a limited selection of lesbian books. Then Arden discovered Womencraft Books, a mail order book company. This began the collection now in the library. Over the years women have donated books. At one time we took duplicate titles to our book stores (Inkilngs and Book Woman) and traded them for titles we didn&apos;t have on the shelf. When the last book store closed we started donating duplicate copies to HATCH, and they are building their library. We have a collection that includes feminist, fantasy/sci-fi, poetry, non-fiction, as well as fiction books. We have a collection of out-of-print periodicals, women&apos;s music, and a video library. We have some beautiful “coffee table” books. We have copies of many of the “pulp” books.
               </p>
-              <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF also was gifted with a beautiful pianola player piano and about 150 piano rolls. Marie Mariano donated it several years ago. It was in the “Allison” flood, and when it was restored Arden was told it was a beautiful instrument, and quite valuable.
               </p>
             </div>
@@ -225,16 +225,16 @@ const History = () => {
         {/* Part 8 */}
         <CardSection arrow={false} >
 
-          <h2 className="text-3xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Part 8
           </h2>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             LOAF has become a unique organization in that it is the oldest lesbian organization in Houston, and the only one of its kind in Texas. Over the years there has been quite a bit of exposure and promotion for LOAF.
           </p>
-          <p className="text-md text-[#48286e] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             For 17 consecutive years, from 1987 to 2004, we had a Texas Lesbian Conference that rotated between Houston, San Antonio, Austin, and Dallas. LOAF presented workshops at five of these conferences. LOAF did a workshop at the National Lesbian Conference in Atlanta in 1991. We did a workshop at at the PFLAG “Healing the Hurt” conference in 1994. We did a program at the Silver Threads conference in St Petersburg, FL. We have done programs at three OLOC conferences. Charlotte and Arden participated in a live TV show about senior GLBT persons in Dallas. We participated in a documentary on GLBT seniors produced in Canada. And another documentary for Golden Threads at Cape Cod. We participated on a panel for the Women’s Studies Department at the University of Houston for their “Living archive” series. We have done several programs for the Women’s Group in Houston, and appeared on the After Hours radio show on KPFT several times.
           </p>
-          <p className="text-md text-[#48286e] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             All of these appearances are documented and part of the LOAF Archives located at the University of Houston Special Collections Library. One result of these workshops and programs has been the formation of similar groups for mid-life and old lesbians throughout the country. But most important is the connection with other lesbians of our generation and avoiding isolation..
           </p>
 
@@ -243,32 +243,32 @@ const History = () => {
       </main>
 
       {/* CTA Section */}
-      <section className="py-20 bg-[#48286e] mx-0">
+      <section className="py-20 bg-var(--purple-deep) mx-0">
         <div className="max-w-7xl mx-auto px-8">
           <div className="flex gap-8 md:flex-row flex-col">
-            <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-              <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <Card className="p-8 text-center bg-background rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
+              <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 A Life Remembered
               </h3>
-              <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-deep) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
               </p>
               <a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
-                <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
+                <Button className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full px-6 py-3">
                   View Arden's Tribute
                 </Button>
               </a>
             </Card>
 
-            <Card className="p-8 text-center bg-white rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-              <h3 className="text-2xl font-bold text-[#48286e] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <Card className="p-8 text-center bg-background rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
+              <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 The Old Lesbian Oral Herstory Project
               </h3>
-              <p className="text-[#48286e] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-deep) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
               </p>
               <a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
-                <Button className="bg-[#664fa3] hover:bg-[#48286e] text-white rounded-full px-6 py-3">
+                <Button className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full px-6 py-3">
                   Learn More About OLOHP
                 </Button>
               </a>
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index 75dc7c8..8a246e1 100644
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -15,7 +15,7 @@ const Landing = () => {
   const heroLoaf = `${process.env.PUBLIC_URL}/hero-loaf.png`;
   const friendships = `${process.env.PUBLIC_URL}/friendships.png`;
   const InfoCard = ({ iconSrc, infoTitle, description }) => (
-    <Card className="relative bg-white rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-none lg:max-w-[363px]">
+    <Card className="relative bg-background rounded-2xl overflow-visible flex flex-col gap-3.5 items-center pt-16 pb-0 w-full max-w-none lg:max-w-[363px]">
       <div className="absolute -top-20 md:-top-40  flex justify-center w-full">
         <img
           src={iconSrc}
@@ -24,7 +24,7 @@ const Landing = () => {
         />
       </div>
       <div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
-        <h5 className="text-[#48286e] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
+        <h5 className="text-var(--purple-deep) text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
           {infoTitle}
         </h5>
         {description}
@@ -37,7 +37,7 @@ const Landing = () => {
       iconSrc: iconMeetGreet,
       infoTitle: 'Meet and Greet',
       description: (
-        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-deep) text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
           with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
           take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
@@ -49,7 +49,7 @@ const Landing = () => {
       iconSrc: iconSocials,
       infoTitle: 'Socials',
       description: (
-        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-deep) text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
           social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
           games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
@@ -61,7 +61,7 @@ const Landing = () => {
       iconSrc: iconActive,
       infoTitle: 'Active LOAFers',
       description: (
-        <p className="text-[#48286e] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-deep) text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
           hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
           through the botanic gardens or the Arboretum.
@@ -71,17 +71,17 @@ const Landing = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       {/* Hero Section */}
-      <section className="relative bg-gradient-to-b from-[#48286e] to-[#664fa3]  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
+      <section className="relative bg-gradient-to-b from-var(--purple-deep) to-var(--purple-lavender)  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
         {/* Friendships background image */}
         <div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem]  lg:-top-32">
           <img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15  max-w-full max-h-full object-contain" />
         </div>
         {/* Blur Overlay */}
-        <div className="absolute inset-0 z-[1] bg-white/5 backdrop-blur-xs"></div>
+        <div className="absolute inset-0 z-[1] bg-background/5 backdrop-blur-xs"></div>
         {/* Left column Loaf Image */}
         <div className="relative z-10 lg:py-20 py-7 flex flex-col gap-6 sm:gap-8 items-center justify-center w-full lg:w-[530px] lg:flex-shrink-0">
           <div className="flex flex-col gap-6 items-center">
@@ -89,7 +89,7 @@ const Landing = () => {
           </div>
           <div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
             <Link to="/become-a-member" className="w-full">
-              <Button style={{ fontFamily: "'Nunito sans', sans-serif" }} className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
+              <Button style={{ fontFamily: "'Nunito sans', sans-serif" }} className="bg-var(--neutral-800) hover:bg-background text-var(--purple-ink) rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
                 Become a Member
               </Button>
             </Link>
@@ -105,9 +105,9 @@ const Landing = () => {
       </section>
 
       {/* About Section */}
-      <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-[#f1eef9] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
+      <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-var(--lavender-300) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
         <div className="flex flex-col items-center pt-4">
-          <h3 className="text-[#48286e] px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h3 className="text-var(--purple-deep) px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF
           </h3>
         </div>
@@ -118,17 +118,17 @@ const Landing = () => {
       </section>
 
       {/* Feature Cards Section */}
-      <section className="bg-gradient-to-b pb-20 from-[#f1eef9] to-[#ddd8eb] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
+      <section className="bg-gradient-to-b pb-20 from-var(--lavender-300) to-var(--neutral-800) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
         {infoCardData.map((card) => (
           <InfoCard key={card.infoTitle} {...card} />
         ))}
       </section>
 
       {/* CTA Section */}
-      <section className="bg-gradient-to-b from-[#644c9f] to-[#48286e] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
+      <section className="bg-gradient-to-b from-var(--purple-amethyst) to-var(--purple-deep) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
         <div className="flex flex-col-reverse md:flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
           <Link to="/register" className="w-full sm:w-auto flex items-center justify-center">
-            <Button className="bg-[#DDD8EB] hover:bg-white text-[#422268] rounded-full
+            <Button className="bg-var(--neutral-800) hover:bg-background text-var(--purple-ink) rounded-full
             py-8 text-xl font-normal px-12 sm:w-[392px] transition-colors ">
               Become a Member
             </Button>
diff --git a/src/pages/Login.js b/src/pages/Login.js
index bce62a0..8f40a4a 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -55,23 +55,23 @@ const Login = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors">
+          <Link to="/" className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
         </div>
 
-        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           <div className="mb-8 text-center">
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Welcome Back
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Login to access your member dashboard.
             </p>
           </div>
@@ -87,7 +87,7 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 data-testid="login-email-input"
               />
             </div>
@@ -95,7 +95,7 @@ const Login = () => {
             <div>
               <div className="flex items-center justify-between mb-2">
                 <Label htmlFor="password">Password</Label>
-                <Link to="/forgot-password" className="text-sm text-[#ff9e77] hover:underline">
+                <Link to="/forgot-password" className="text-sm text-var(--orange-light) hover:underline">
                   Forgot password?
                 </Link>
               </div>
@@ -106,7 +106,7 @@ const Login = () => {
                 value={formData.password}
                 onChange={handleInputChange}
                 placeholder="Enter your password"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 data-testid="login-password-input"
               />
             </div>
@@ -114,16 +114,16 @@ const Login = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
               data-testid="login-submit-button"
             >
               {loading ? 'Logging in...' : 'Login'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Don't have an account?{' '}
-              <Link to="/register" className="text-[#ff9e77] hover:underline font-medium">
+              <Link to="/register" className="text-var(--orange-light) hover:underline font-medium">
                 Register here
               </Link>
             </p>
diff --git a/src/pages/MissionValues.js b/src/pages/MissionValues.js
index 6fde687..b7f3aa4 100644
--- a/src/pages/MissionValues.js
+++ b/src/pages/MissionValues.js
@@ -7,14 +7,14 @@ const MissionValues = () => {
   const loafLogo = `${process.env.PUBLIC_URL}/loaf-logo.png`;
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-[#f9fafb] to-[#ddd8eb] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
+      <main className="bg-gradient-to-b from-var(--neutral-100:) to-var(--neutral-800) px-4 sm:px-6 py-8 sm:py-12 md:py-20">
         <div className="max-w-[1400px] mx-auto">
           <div className="flex md:flex-row flex-col gap-10 items-stretch">
             {/* Left Card - Mission (Purple Gradient) */}
-            <Card className=" bg-gradient-to-br from-[#664fa3] to-[#48286e] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
+            <Card className=" bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-deep) p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Mission
@@ -29,12 +29,12 @@ const MissionValues = () => {
             </Card>
 
             {/* Right Card - Values */}
-            <Card className="bg-white p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#48286e] text-center mb-6"
+            <Card className="bg-background p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
+              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-var(--purple-deep) text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Values
               </h2>
-              <ol className="list-decimal list-inside space-y-8 text-lg text-[#48286e]"
+              <ol className="list-decimal list-inside space-y-8 text-lg text-var(--purple-deep)"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
                 <li>Social support for lesbians.</li>
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 21d68b0..9099177 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -8,32 +8,32 @@ const NotFound = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-[#F9F8FB] to-white flex items-center justify-center p-4">
-      <Card className="w-full max-w-2xl p-12 bg-white rounded-2xl border border-[#ddd8eb] text-center">
+    <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
         {/* 404 Illustration */}
         <div className="mb-8">
           <div className="relative">
             <h1
-              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[#ddd8eb] to-[#f9f8fb] leading-none"
+              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-var(--neutral-800) to-var(--lavender-700) leading-none"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               404
             </h1>
             <div className="absolute inset-0 flex items-center justify-center">
-              <Search className="h-24 w-24 text-[#664fa3] opacity-30" />
+              <Search className="h-24 w-24 text-var(--purple-lavender) opacity-30" />
             </div>
           </div>
         </div>
 
         {/* Message */}
         <h2
-          className="text-3xl font-semibold text-[#422268] mb-4"
+          className="text-3xl font-semibold text-var(--purple-ink) mb-4"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           Page Not Found
         </h2>
         <p
-          className="text-lg text-[#664fa3] mb-8 max-w-md mx-auto"
+          className="text-lg text-var(--purple-lavender) mb-8 max-w-md mx-auto"
           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
         >
           Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
@@ -44,14 +44,14 @@ const NotFound = () => {
           <Button
             onClick={() => navigate(-1)}
             variant="outline"
-            className="rounded-xl border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f9f8fb] px-6 py-6"
+            className="rounded-xl border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-700) px-6 py-6"
           >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Go Back
           </Button>
           <Button
             onClick={() => navigate('/')}
-            className="rounded-xl bg-gradient-to-r from-[#664fa3] to-[#422268] hover:from-[#422268] hover:to-[#664fa3] text-white px-6 py-6"
+            className="rounded-xl bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-ink) hover:from-var(--purple-ink) hover:to-var(--purple-lavender) text-white px-6 py-6"
           >
             <Home className="h-5 w-5 mr-2" />
             Back to Home
@@ -59,15 +59,15 @@ const NotFound = () => {
         </div>
 
         {/* Help Text */}
-        <div className="mt-8 pt-8 border-t border-[#ddd8eb]">
+        <div className="mt-8 pt-8 border-t border-var(--neutral-800)">
           <p
-            className="text-sm text-[#664fa3]"
+            className="text-sm text-var(--purple-lavender)"
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaftx.org"
-              className="text-[#664fa3] hover:text-[#422268] font-semibold underline"
+              className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
             >
               support@loaftx.org
             </a>
diff --git a/src/pages/PaymentCancel.js b/src/pages/PaymentCancel.js
index a1ef773..20caa03 100644
--- a/src/pages/PaymentCancel.js
+++ b/src/pages/PaymentCancel.js
@@ -9,7 +9,7 @@ const PaymentCancel = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
@@ -22,48 +22,48 @@ const PaymentCancel = () => {
           </div>
 
           {/* Cancel Message */}
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Cancelled
           </h1>
-          <p className="text-lg text-[#664fa3] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your payment was cancelled. No charges have been made to your account.
           </p>
         </div>
 
         {/* Info Card */}
-        <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8">
-          <h2 className="text-2xl font-semibold text-[#422268] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8">
+          <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             What Happened?
           </h2>
 
           <div className="space-y-6 mb-8">
-            <p className="text-[#664fa3] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
             </p>
 
-            <div className="bg-[#DDD8EB]/20 p-6 rounded-xl">
-              <h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="bg-var(--neutral-800)/20 p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Ready to Complete Your Membership?
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CreditCard className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
-                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CreditCard className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
+                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Return to the plans page to complete your subscription
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <Mail className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
-                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Mail className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
+                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Contact us if you experienced any issues during checkout
                   </span>
                 </li>
               </ul>
             </div>
 
-            <div className="bg-[#f1eef9] p-6 rounded-xl">
-              <p className="text-sm text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <span className="font-medium text-[#422268]">Note:</span>{' '}
+            <div className="bg-var(--lavender-300) p-6 rounded-xl">
+              <p className="text-sm text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <span className="font-medium text-var(--purple-ink)">Note:</span>{' '}
                 Your membership application is still validated. You can complete payment whenever you're ready.
               </p>
             </div>
@@ -73,7 +73,7 @@ const PaymentCancel = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
               onClick={() => navigate('/plans')}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="try-again-button"
             >
               <CreditCard className="mr-2 h-5 w-5" />
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
             <Button
               onClick={() => navigate('/dashboard')}
               variant="outline"
-              className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="back-to-dashboard-button"
             >
               <ArrowLeft className="mr-2 h-5 w-5" />
@@ -92,17 +92,17 @@ const PaymentCancel = () => {
         </Card>
 
         {/* Support Section */}
-        <Card className="p-6 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
-          <h3 className="text-lg font-semibold text-[#422268] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
+          <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Need Assistance?
           </h3>
-          <p className="text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If you encountered any technical issues or have questions about the payment process, our support team is here to help.
           </p>
           <div className="text-center">
             <a
               href="mailto:support@loaf.org"
-              className="text-[#ff9e77] hover:text-[#664fa3] font-medium text-lg"
+              className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium text-lg"
             >
               support@loaf.org
             </a>
diff --git a/src/pages/PaymentSuccess.js b/src/pages/PaymentSuccess.js
index f2f76ae..45b540a 100644
--- a/src/pages/PaymentSuccess.js
+++ b/src/pages/PaymentSuccess.js
@@ -20,60 +20,60 @@ const PaymentSuccess = () => {
   }, [refreshUser]);
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="text-center mb-12">
           {/* Success Icon */}
           <div className="mb-8">
-            <div className="bg-[#81B29A] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
+            <div className="bg-var(--green-light) rounded-full w-24 h-24 mx-auto flex items-center justify-center">
               <CheckCircle className="h-12 w-12 text-white" />
             </div>
           </div>
 
           {/* Success Message */}
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Successful!
           </h1>
-          <p className="text-lg text-[#664fa3] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Thank you for your payment. Your LOAF membership is now active!
           </p>
         </div>
 
         {/* Confirmation Card */}
-        <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg mb-8">
-          <h2 className="text-2xl font-semibold text-[#422268] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8">
+          <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to the LOAF Community!
           </h2>
 
           <div className="space-y-6 mb-8">
-            <div className="bg-[#f1eef9] p-6 rounded-xl">
-              <h3 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="bg-var(--lavender-300) p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 What's Next?
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Your membership is now active and you have full access to all member benefits
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You can now RSVP and attend members-only events
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Access the community directory and connect with other members
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                  <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You'll receive our newsletter with exclusive updates and announcements
                   </span>
                 </li>
@@ -81,12 +81,12 @@ const PaymentSuccess = () => {
             </div>
 
             {sessionId && (
-              <div className="bg-[#DDD8EB]/20 p-4 rounded-xl">
-                <p className="text-sm text-[#664fa3] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <span className="font-medium text-[#422268]">Transaction ID:</span>{' '}
+              <div className="bg-var(--neutral-800)/20 p-4 rounded-xl">
+                <p className="text-sm text-var(--purple-lavender) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="font-medium text-var(--purple-ink)">Transaction ID:</span>{' '}
                   <span className="font-mono text-xs">{sessionId}</span>
                 </p>
-                <p className="text-xs text-[#664fa3] text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-var(--purple-lavender) text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A confirmation email has been sent to your registered email address.
                 </p>
               </div>
@@ -97,7 +97,7 @@ const PaymentSuccess = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
               onClick={() => navigate('/dashboard')}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="go-to-dashboard-button"
             >
               <User className="mr-2 h-5 w-5" />
@@ -106,7 +106,7 @@ const PaymentSuccess = () => {
             <Button
               onClick={() => navigate('/events')}
               variant="outline"
-              className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="browse-events-button"
             >
               <Calendar className="mr-2 h-5 w-5" />
@@ -117,11 +117,11 @@ const PaymentSuccess = () => {
 
         {/* Additional Info */}
         <div className="text-center">
-          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaf.org"
-              className="text-[#ff9e77] hover:text-[#664fa3] font-medium"
+              className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium"
             >
               support@loaf.org
             </a>
diff --git a/src/pages/Plans.js b/src/pages/Plans.js
index f4025c8..5d21ef2 100644
--- a/src/pages/Plans.js
+++ b/src/pages/Plans.js
@@ -208,36 +208,36 @@ const Plans = () => {
   const breakdown = getAmountBreakdown();
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-12 text-center">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Membership Plans
           </h1>
-          <p className="text-lg text-[#664fa3] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Choose the membership plan that works best for you and become part of our vibrant community.
           </p>
         </div>
 
         {/* Status Banner */}
         {statusInfo && statusInfo.title && (
-          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[#f1eef9] to-[#DDD8EB]/30 border-2 border-[#664fa3]">
+          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-var(--lavender-300) to-var(--neutral-800)/30 border-2 border-var(--purple-lavender)">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-[#664fa3] flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-var(--purple-lavender) flex-shrink-0 mt-1" />
               <div className="flex-1">
-                <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {statusInfo.title}
                 </h3>
-                <p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {statusInfo.message}
                 </p>
                 {statusInfo.action && statusInfo.actionLink && (
                   <Button
                     onClick={() => navigate(statusInfo.actionLink)}
-                    className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full"
+                    className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full"
                   >
                     {statusInfo.action}
                   </Button>
@@ -249,17 +249,16 @@ const Plans = () => {
 
         {loading ? (
           <div className="text-center py-20">
-            <Loader2 className="h-12 w-12 text-[#664fa3] mx-auto mb-4 animate-spin" />
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+            <Loader2 className="h-12 w-12 text-var(--purple-lavender) mx-auto mb-4 animate-spin" />
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
           </div>
         ) : plans.length > 0 ? (
-          <div className={`grid gap-6 sm:gap-8 mx-auto ${
-            plans.length === 1
-              ? 'grid-cols-1 max-w-md'
-              : plans.length === 2
+          <div className={`grid gap-6 sm:gap-8 mx-auto ${plans.length === 1
+            ? 'grid-cols-1 max-w-md'
+            : plans.length === 2
               ? 'grid-cols-1 sm:grid-cols-2 max-w-3xl'
               : 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 max-w-5xl'
-          }`}>
+            }`}>
             {plans.map((plan) => {
               const minimumPrice = plan.minimum_price_cents || plan.price_cents || 3000;
               const suggestedPrice = plan.suggested_price_cents || minimumPrice;
@@ -267,19 +266,19 @@ const Plans = () => {
               return (
                 <Card
                   key={plan.id}
-                  className="p-8 bg-white rounded-2xl border-2 border-[#ddd8eb] hover:border-[#664fa3] hover:shadow-xl transition-all"
+                  className="p-8 bg-background rounded-2xl border-2 border-var(--neutral-800) hover:border-var(--purple-lavender) hover:shadow-xl transition-all"
                   data-testid={`plan-card-${plan.id}`}
                 >
                   {/* Plan Header */}
                   <div className="text-center mb-6">
-                    <div className="bg-[#DDD8EB]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-                      <CreditCard className="h-8 w-8 text-[#664fa3]" />
+                    <div className="bg-var(--neutral-800)/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+                      <CreditCard className="h-8 w-8 text-var(--purple-lavender)" />
                     </div>
-                    <h2 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {plan.name}
                     </h2>
                     {plan.description && (
-                      <p className="text-sm text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {plan.description}
                       </p>
                     )}
@@ -287,22 +286,22 @@ const Plans = () => {
 
                   {/* Pricing */}
                   <div className="text-center mb-8">
-                    <div className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Starting at
                     </div>
-                    <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(minimumPrice)}
                     </div>
                     {suggestedPrice > minimumPrice && (
-                      <div className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Suggested: {formatPrice(suggestedPrice)}
                       </div>
                     )}
-                    <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {getBillingCycleLabel(plan.billing_cycle)}
                     </p>
                     {plan.allow_donation && (
-                      <div className="mt-2 flex items-center justify-center gap-1 text-xs text-[#ff9e77]">
+                      <div className="mt-2 flex items-center justify-center gap-1 text-xs text-var(--orange-light)">
                         <Heart className="h-3 w-3" />
                         <span>Donations welcome</span>
                       </div>
@@ -312,20 +311,20 @@ const Plans = () => {
                   {/* Features */}
                   <div className="space-y-3 mb-8">
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
+                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
+                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
+                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-[#81B29A] flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
+                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
                     </div>
                   </div>
 
@@ -333,7 +332,7 @@ const Plans = () => {
                   <Button
                     onClick={() => handleSelectPlan(plan)}
                     disabled={processingPlanId === plan.id || (statusInfo && !statusInfo.canSubscribe)}
-                    className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
                     data-testid={`subscribe-button-${plan.id}`}
                   >
                     {processingPlanId === plan.id ? (
@@ -353,11 +352,11 @@ const Plans = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <CreditCard className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Plans Available
             </h3>
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Membership plans are not currently available. Please check back later!
             </p>
           </div>
@@ -365,17 +364,17 @@ const Plans = () => {
 
         {/* Info Section */}
         <div className="mt-16 max-w-3xl mx-auto">
-          <Card className="p-8 bg-gradient-to-br from-[#DDD8EB]/20 to-[#f1eef9]/20 rounded-2xl border border-[#ddd8eb]">
-            <h3 className="text-xl font-semibold text-[#422268] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
+            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Help Choosing?
             </h3>
-            <p className="text-[#664fa3] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               If you have any questions about our membership plans or need assistance, please contact us.
             </p>
             <div className="text-center">
               <a
                 href="mailto:support@loaf.org"
-                className="text-[#ff9e77] hover:text-[#664fa3] font-medium"
+                className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium"
               >
                 support@loaf.org
               </a>
@@ -388,10 +387,10 @@ const Plans = () => {
       <Dialog open={amountDialogOpen} onOpenChange={setAmountDialogOpen}>
         <DialogContent className="sm:max-w-[500px]">
           <DialogHeader>
-            <DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Choose Your Amount
             </DialogTitle>
-            <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
             </DialogDescription>
           </DialogHeader>
@@ -399,11 +398,11 @@ const Plans = () => {
           <div className="space-y-6">
             {/* Amount Input */}
             <div>
-              <Label htmlFor="amount" className="text-[#422268]">
+              <Label htmlFor="amount" className="text-var(--purple-ink)">
                 Amount (USD) *
               </Label>
               <div className="relative mt-2">
-                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[#664fa3] text-lg font-semibold">
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-var(--purple-lavender) text-lg font-semibold">
                   $
                 </span>
                 <Input
@@ -413,25 +412,25 @@ const Plans = () => {
                   min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
                   value={amountInput}
                   onChange={(e) => setAmountInput(e.target.value)}
-                  className="pl-8 h-14 text-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="pl-8 h-14 text-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   placeholder="50.00"
                 />
               </div>
-              <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
               </p>
             </div>
 
             {/* Breakdown Display */}
             {breakdown && breakdown.total >= breakdown.base && (
-              <Card className="p-4 bg-[#f9f5ff] border border-[#DDD8EB]">
+              <Card className="p-4 bg-var(--lavender-400) border border-var(--neutral-800)">
                 <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <div className="flex justify-between text-[#422268]">
+                  <div className="flex justify-between text-var(--purple-ink)">
                     <span>Membership Fee:</span>
                     <span className="font-semibold">{formatPrice(breakdown.base)}</span>
                   </div>
                   {breakdown.donation > 0 && (
-                    <div className="flex justify-between text-[#ff9e77]">
+                    <div className="flex justify-between text-var(--orange-light)">
                       <span className="flex items-center gap-1">
                         <Heart className="h-4 w-4" />
                         Additional Donation:
@@ -439,7 +438,7 @@ const Plans = () => {
                       <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
                     </div>
                   )}
-                  <div className="flex justify-between text-[#422268] font-bold text-base pt-2 border-t border-[#DDD8EB]">
+                  <div className="flex justify-between text-var(--purple-ink) font-bold text-base pt-2 border-t border-var(--neutral-800)">
                     <span>Total:</span>
                     <span>{formatPrice(breakdown.total)}</span>
                   </div>
@@ -449,8 +448,8 @@ const Plans = () => {
 
             {/* Donation Message */}
             {selectedPlan?.allow_donation && (
-              <div className="bg-[#DDD8EB]/20 rounded-lg p-4">
-                <p className="text-sm text-[#422268] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <div className="bg-var(--neutral-800)/20 rounded-lg p-4">
+                <p className="text-sm text-var(--purple-ink) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <strong>Thank you for supporting our community!</strong><br />
                   Your donation helps us continue our mission and provide meaningful experiences for all members.
                 </p>
@@ -470,7 +469,7 @@ const Plans = () => {
             <Button
               type="button"
               onClick={handleCheckout}
-              className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white"
+              className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
             >
               Continue to Checkout
             </Button>
diff --git a/src/pages/PrivacyPolicy.js b/src/pages/PrivacyPolicy.js
index 961b741..8a49d3d 100644
--- a/src/pages/PrivacyPolicy.js
+++ b/src/pages/PrivacyPolicy.js
@@ -7,15 +7,15 @@ export default function PrivacyPolicy() {
   return (
     <>
       <PublicNavbar />
-      <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] text-[#48286E]">
+      <main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) text-var(--purple-deep)">
         <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
           <header className="border-b pb-6">
-            <h1 className="text-3xl sm:text-4xl font-bold tracking-tight" style={{fontFamily: 'Poppins'}}>
+            <h1 className="text-3xl sm:text-4xl font-bold tracking-tight" style={{ fontFamily: 'Poppins' }}>
               LOAFers, Inc. Website Privacy Policy
             </h1>
           </header>
 
-          <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+          <div className="prose text-var(--purple-deep) max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
             <section className="mt-8">
               <p>
                 This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and
@@ -31,7 +31,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="user-data" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">What User Data We Collect</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">What User Data We Collect</h2>
               <p>When you visit the Site, we may collect the following data:</p>
               <ul className="list-disc pl-6 space-y-1">
                 <li>Your IP address.</li>
@@ -63,7 +63,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="why-collect" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Why We Collect Your Data</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Why We Collect Your Data</h2>
               <ul className="list-disc pl-6 space-y-1">
                 <li>
                   To send you announcement emails containing the information about our events and information we think you
@@ -75,7 +75,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="third-parties" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Sharing Information with Third Parties</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Sharing Information with Third Parties</h2>
               <p>The Company does not sell, rent, or lease personal data to third parties.</p>
               <p>
                 The Company may share data with trusted partners to help perform statistical analysis, provide customer
@@ -89,7 +89,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="safeguarding" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Safeguarding and Securing the Data</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Safeguarding and Securing the Data</h2>
               <p>
                 LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all
                 in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest
@@ -98,7 +98,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="cookies" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Our Cookie Policy</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Our Cookie Policy</h2>
               <p>
                 Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your
                 online behavior (analyze web traffic, web pages you visit and spend the most time on).
@@ -123,7 +123,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="other-sites" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Links to Other Websites</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Links to Other Websites</h2>
               <p>
                 Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held
                 responsible for your data and privacy protection. Visiting those websites is not governed by this privacy
@@ -133,7 +133,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="restricting" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">
                 Restricting the Collection of your Personal Data
               </h2>
               <p>
@@ -150,12 +150,12 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="children" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Children Under Thirteen</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Children Under Thirteen</h2>
               <p>The Company does not knowingly collect information from children under the age of 13.</p>
             </section>
 
             <section id="changes" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Changes to this Statement</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Changes to this Statement</h2>
               <p>
                 The Company may make changes to this Policy. When this occurs the effective date of this policy will be
                 updated.
@@ -163,7 +163,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="contact" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">Contact Information</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Contact Information</h2>
               <p>If you have any question, please contact LOAFers, Inc. at:</p>
               <div className="not-prose mt-4">
                 <p className="font-semibold mb-2">LOAFers, Inc.</p>
@@ -184,7 +184,7 @@ export default function PrivacyPolicy() {
         <div className="mt-8 text-center">
           <Link
             to="/"
-            className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
+            className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold transition-colors inline-flex items-center gap-2"
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             <span>←</span> Back to Home
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 64aee6e..0b7cd51 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -213,52 +213,52 @@ const Profile = () => {
 
   if (!profileData) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             My Profile
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your personal information below.
           </p>
         </div>
 
-        <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           {/* Read-only Information */}
-          <div className="mb-8 pb-8 border-b border-[#ddd8eb]">
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <User className="h-6 w-6 text-[#664fa3]" />
+          <div className="mb-8 pb-8 border-b border-var(--neutral-800)">
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <User className="h-6 w-6 text-var(--purple-lavender)" />
               Account Information
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
-                <p className="text-[#422268] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
+                <p className="text-var(--purple-ink) font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-[#422268] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                <p className="text-var(--purple-ink) font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
               </div>
               <div>
-                <p className="text-sm text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
-                <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
+                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(profileData.date_of_birth).toLocaleDateString()}
                 </p>
               </div>
@@ -269,7 +269,7 @@ const Profile = () => {
                 type="button"
                 onClick={() => setPasswordDialogOpen(true)}
                 variant="outline"
-                className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-6 py-3"
+                className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-6 py-3"
               >
                 <Lock className="h-4 w-4 mr-2" />
                 Change Password
@@ -278,15 +278,15 @@ const Profile = () => {
           </div>
 
           {/* Profile Photo Section */}
-          <div className="pb-8 mb-8 border-b border-[#ddd8eb]">
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <Camera className="h-6 w-6 text-[#664fa3]" />
+          <div className="pb-8 mb-8 border-b border-var(--neutral-800)">
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Camera className="h-6 w-6 text-var(--purple-lavender)" />
               Profile Photo
             </h2>
             <div className="flex flex-col md:flex-row items-center gap-6">
-              <Avatar className="h-32 w-32 border-4 border-[#ddd8eb]">
+              <Avatar className="h-32 w-32 border-4 border-var(--neutral-800)">
                 <AvatarImage src={previewImage} alt="Profile" />
-                <AvatarFallback className="bg-[#f1eef9] text-[#664fa3] text-3xl">
+                <AvatarFallback className="bg-var(--lavender-300) text-var(--purple-lavender) text-3xl">
                   {profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
                 </AvatarFallback>
               </Avatar>
@@ -304,7 +304,7 @@ const Profile = () => {
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                   disabled={uploadingPhoto}
-                  className="bg-[#664fa3] text-white hover:bg-[#422268] rounded-full px-6 py-3"
+                  className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full px-6 py-3"
                 >
                   <Upload className="h-4 w-4 mr-2" />
                   {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -323,7 +323,7 @@ const Profile = () => {
                   </Button>
                 )}
 
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Upload a profile photo (Max {maxFileSizeMB}MB)
                 </p>
               </div>
@@ -332,7 +332,7 @@ const Profile = () => {
 
           {/* Editable Form */}
           <form onSubmit={handleSubmit} className="space-y-6" data-testid="profile-form">
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Personal Information
             </h2>
 
@@ -344,7 +344,7 @@ const Profile = () => {
                   name="first_name"
                   value={formData.first_name}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   data-testid="first-name-input"
                 />
               </div>
@@ -355,7 +355,7 @@ const Profile = () => {
                   name="last_name"
                   value={formData.last_name}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   data-testid="last-name-input"
                 />
               </div>
@@ -369,7 +369,7 @@ const Profile = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 data-testid="phone-input"
               />
             </div>
@@ -381,7 +381,7 @@ const Profile = () => {
                 name="address"
                 value={formData.address}
                 onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 data-testid="address-input"
               />
             </div>
@@ -394,7 +394,7 @@ const Profile = () => {
                   name="city"
                   value={formData.city}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   data-testid="city-input"
                 />
               </div>
@@ -405,7 +405,7 @@ const Profile = () => {
                   name="state"
                   value={formData.state}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   data-testid="state-input"
                 />
               </div>
@@ -416,16 +416,16 @@ const Profile = () => {
                   name="zipcode"
                   value={formData.zipcode}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   data-testid="zipcode-input"
                 />
               </div>
             </div>
 
             {/* Section 2: Partner Information */}
-            <div className="pt-8 mt-8 border-t border-[#ddd8eb]">
-              <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Heart className="h-6 w-6 text-[#ff9e77]" />
+            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
+              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Heart className="h-6 w-6 text-var(--orange-light)" />
                 Partner Information
               </h2>
               <div className="space-y-6">
@@ -437,7 +437,7 @@ const Profile = () => {
                       name="partner_first_name"
                       value={formData.partner_first_name}
                       onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                       placeholder="Optional"
                     />
                   </div>
@@ -448,7 +448,7 @@ const Profile = () => {
                       name="partner_last_name"
                       value={formData.partner_last_name}
                       onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                       placeholder="Optional"
                     />
                   </div>
@@ -461,9 +461,9 @@ const Profile = () => {
                       name="partner_is_member"
                       checked={formData.partner_is_member}
                       onChange={handleCheckboxChange}
-                      className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                      className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                     />
-                    <Label htmlFor="partner_is_member" className="cursor-pointer text-[#422268]">
+                    <Label htmlFor="partner_is_member" className="cursor-pointer text-var(--purple-ink)">
                       My partner is a current member
                     </Label>
                   </div>
@@ -474,9 +474,9 @@ const Profile = () => {
                       name="partner_plan_to_become_member"
                       checked={formData.partner_plan_to_become_member}
                       onChange={handleCheckboxChange}
-                      className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                      className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                     />
-                    <Label htmlFor="partner_plan_to_become_member" className="cursor-pointer text-[#422268]">
+                    <Label htmlFor="partner_plan_to_become_member" className="cursor-pointer text-var(--purple-ink)">
                       My partner plans to become a member
                     </Label>
                   </div>
@@ -485,12 +485,12 @@ const Profile = () => {
             </div>
 
             {/* Section 3: Newsletter Preferences */}
-            <div className="pt-8 mt-8 border-t border-[#ddd8eb]">
-              <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Mail className="h-6 w-6 text-[#81B29A]" />
+            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
+              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Mail className="h-6 w-6 text-var(--green-light)" />
                 Newsletter Preferences
               </h2>
-              <p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Choose what information you'd like published in our member newsletter.
               </p>
               <div className="space-y-3">
@@ -501,9 +501,9 @@ const Profile = () => {
                     name="newsletter_publish_name"
                     checked={formData.newsletter_publish_name}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                   />
-                  <Label htmlFor="newsletter_publish_name" className="cursor-pointer text-[#422268]">
+                  <Label htmlFor="newsletter_publish_name" className="cursor-pointer text-var(--purple-ink)">
                     Publish my name
                   </Label>
                 </div>
@@ -514,9 +514,9 @@ const Profile = () => {
                     name="newsletter_publish_photo"
                     checked={formData.newsletter_publish_photo}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                   />
-                  <Label htmlFor="newsletter_publish_photo" className="cursor-pointer text-[#422268]">
+                  <Label htmlFor="newsletter_publish_photo" className="cursor-pointer text-var(--purple-ink)">
                     Publish my photo
                   </Label>
                 </div>
@@ -527,9 +527,9 @@ const Profile = () => {
                     name="newsletter_publish_birthday"
                     checked={formData.newsletter_publish_birthday}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                   />
-                  <Label htmlFor="newsletter_publish_birthday" className="cursor-pointer text-[#422268]">
+                  <Label htmlFor="newsletter_publish_birthday" className="cursor-pointer text-var(--purple-ink)">
                     Publish my birthday
                   </Label>
                 </div>
@@ -540,9 +540,9 @@ const Profile = () => {
                     name="newsletter_publish_none"
                     checked={formData.newsletter_publish_none}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                   />
-                  <Label htmlFor="newsletter_publish_none" className="cursor-pointer text-[#422268]">
+                  <Label htmlFor="newsletter_publish_none" className="cursor-pointer text-var(--purple-ink)">
                     Do not publish any information
                   </Label>
                 </div>
@@ -550,12 +550,12 @@ const Profile = () => {
             </div>
 
             {/* Section 4: Volunteer Interests */}
-            <div className="pt-8 mt-8 border-t border-[#ddd8eb]">
-              <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Users className="h-6 w-6 text-[#664fa3]" />
+            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
+              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Users className="h-6 w-6 text-var(--purple-lavender)" />
                 Volunteer Interests
               </h2>
-              <p className="text-[#664fa3] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Select areas where you'd like to volunteer and help our community.
               </p>
               <div className="grid md:grid-cols-2 gap-3">
@@ -566,11 +566,11 @@ const Profile = () => {
                       id={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
                       checked={formData.volunteer_interests.includes(option)}
                       onChange={() => handleVolunteerToggle(option)}
-                      className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                      className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                     />
                     <Label
                       htmlFor={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
-                      className="cursor-pointer text-[#422268]"
+                      className="cursor-pointer text-var(--purple-ink)"
                     >
                       {option}
                     </Label>
@@ -580,32 +580,32 @@ const Profile = () => {
             </div>
 
             {/* Section 5: Member Directory Settings */}
-            <div className="pt-8 mt-8 border-t border-[#ddd8eb]">
-              <h2 className="text-2xl font-semibold text-[#422268] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <BookUser className="h-6 w-6 text-[#ff9e77]" />
+            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
+              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <BookUser className="h-6 w-6 text-var(--orange-light)" />
                 Member Directory Settings
               </h2>
-              <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Control your visibility and information in the member directory.
               </p>
 
               <div className="space-y-6">
-                <div className="flex items-center gap-3 p-4 bg-[#f9f5ff] rounded-lg">
+                <div className="flex items-center gap-3 p-4 bg-var(--lavender-400) rounded-lg">
                   <input
                     type="checkbox"
                     id="show_in_directory"
                     name="show_in_directory"
                     checked={formData.show_in_directory}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[#664fa3] border-2 border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                   />
-                  <Label htmlFor="show_in_directory" className="cursor-pointer text-[#422268] font-medium">
+                  <Label htmlFor="show_in_directory" className="cursor-pointer text-var(--purple-ink) font-medium">
                     Include me in the member directory
                   </Label>
                 </div>
 
                 {formData.show_in_directory && (
-                  <div className="space-y-6 pl-4 border-l-4 border-[#DDD8EB]">
+                  <div className="space-y-6 pl-4 border-l-4 border-var(--neutral-800)">
                     <div>
                       <Label htmlFor="directory_email">Directory Email</Label>
                       <Input
@@ -614,7 +614,7 @@ const Profile = () => {
                         type="email"
                         value={formData.directory_email}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                         placeholder="Optional - email to show in directory"
                       />
                     </div>
@@ -626,7 +626,7 @@ const Profile = () => {
                         name="directory_bio"
                         value={formData.directory_bio}
                         onChange={handleInputChange}
-                        className="rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3] min-h-[100px]"
+                        className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) min-h-[100px]"
                         placeholder="Tell other members about yourself..."
                       />
                     </div>
@@ -638,7 +638,7 @@ const Profile = () => {
                         name="directory_address"
                         value={formData.directory_address}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                         placeholder="Optional - address to show in directory"
                       />
                     </div>
@@ -651,7 +651,7 @@ const Profile = () => {
                         type="tel"
                         value={formData.directory_phone}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                         placeholder="Optional - phone to show in directory"
                       />
                     </div>
@@ -664,7 +664,7 @@ const Profile = () => {
                         type="date"
                         value={formData.directory_dob}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                       />
                     </div>
 
@@ -675,7 +675,7 @@ const Profile = () => {
                         name="directory_partner_name"
                         value={formData.directory_partner_name}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                         placeholder="Optional - partner name to show in directory"
                       />
                     </div>
@@ -684,11 +684,11 @@ const Profile = () => {
               </div>
             </div>
 
-            <div className="pt-8 mt-8 border-t border-[#ddd8eb]">
+            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
               <Button
                 type="submit"
                 disabled={loading}
-                className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
+                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
                 data-testid="save-profile-button"
               >
                 <Save className="h-5 w-5 mr-2" />
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 90e0d51..5cdd0d1 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -183,23 +183,23 @@ const Register = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-[#664fa3] hover:text-[#ff9e77] transition-colors">
+          <Link to="/" className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
         </div>
 
-        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Join Our Community
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Fill out the form below to start your membership journey.
             </p>
           </div>
@@ -245,7 +245,7 @@ const Register = () => {
                   type="button"
                   onClick={handleBack}
                   variant="outline"
-                  className="rounded-full px-6 py-6 text-lg border-2 border-[#ddd8eb] hover:border-[#664fa3] text-[#422268]"
+                  className="rounded-full px-6 py-6 text-lg border-2 border-var(--neutral-800) hover:border-var(--purple-lavender) text-var(--purple-ink)"
                 >
                   <ArrowLeft className="mr-2 h-5 w-5" />
                   Back
@@ -258,7 +258,7 @@ const Register = () => {
                 <Button
                   type="button"
                   onClick={handleNext}
-                  className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
                 >
                   Next
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -267,7 +267,7 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="submit-register-button"
                 >
                   {loading ? 'Creating Account...' : 'Create Account'}
@@ -276,9 +276,9 @@ const Register = () => {
               )}
             </div>
 
-            <p className="text-center text-[#664fa3] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-var(--purple-lavender) mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Already have an account?{' '}
-              <Link to="/login" className="text-[#ff9e77] hover:underline font-medium">
+              <Link to="/login" className="text-var(--orange-light) hover:underline font-medium">
                 Login here
               </Link>
             </p>
diff --git a/src/pages/ResetPassword.js b/src/pages/ResetPassword.js
index be6dc5a..e56607b 100644
--- a/src/pages/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -64,19 +64,19 @@ const ResetPassword = () => {
   };
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-md mx-auto px-6 py-12">
-        <Card className="p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           <div className="mb-8 text-center">
-            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#f1eef9] mb-4">
-              <Lock className="h-8 w-8 text-[#664fa3]" />
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-var(--lavender-300) mb-4">
+              <Lock className="h-8 w-8 text-var(--purple-lavender)" />
             </div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Reset Password
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Enter your new password below.
             </p>
           </div>
@@ -92,7 +92,7 @@ const ResetPassword = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
 
@@ -106,15 +106,15 @@ const ResetPassword = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
 
-            <div className="bg-[#f1eef9] border-l-4 border-[#664fa3] p-4 rounded-lg">
+            <div className="bg-var(--lavender-300) border-l-4 border-var(--purple-lavender) p-4 rounded-lg">
               <div className="flex items-start">
-                <AlertCircle className="h-5 w-5 text-[#664fa3] mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <p className="font-medium text-[#422268] mb-1">Password Requirements:</p>
+                <AlertCircle className="h-5 w-5 text-var(--purple-lavender) mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="font-medium text-var(--purple-ink) mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
                     <li>Both passwords must match</li>
@@ -126,15 +126,15 @@ const ResetPassword = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
             >
               {loading ? 'Resetting Password...' : 'Reset Password'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Remember your password?{' '}
-              <Link to="/login" className="text-[#ff9e77] hover:underline font-medium">
+              <Link to="/login" className="text-var(--orange-light) hover:underline font-medium">
                 Login here
               </Link>
             </p>
diff --git a/src/pages/Resources.js b/src/pages/Resources.js
index c89700f..a5040e6 100644
--- a/src/pages/Resources.js
+++ b/src/pages/Resources.js
@@ -97,13 +97,13 @@ const Resources = () => {
   ];
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-white via-[#f1eef9] to-[#e8e0f5] px-6 py-16">
+      <main className="bg-gradient-to-b from-white via-var(--lavender-300) to-var(--lavender-100) px-6 py-16">
         {/* Header Section */}
         <section className="max-w-7xl mx-auto mb-12">
-          <h1 className="text-[28px] font-bold text-[#48286e] text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-[28px] font-bold text-var(--purple-deep) text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
             Tap or click on each purple tab below to open and read its contents
           </h1>
 
@@ -115,8 +115,8 @@ const Resources = () => {
             {categories.map((category, categoryIndex) => (
               <div key={categoryIndex} className="space-y-6">
                 {/* Category Title */}
-                <div className="flex justify-center text-4xl text-[#664ea2]">{category.icon}</div>
-                <h2 className="text-[32px] leading-6 font-bold text-[#48286e] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                <div className="flex justify-center text-4xl text-var(--purple-lilac)">{category.icon}</div>
+                <h2 className="text-[32px] leading-6 font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   {category.title}
                 </h2>
 
@@ -130,7 +130,7 @@ const Resources = () => {
                         {/* Accordion Button */}
                         <button
                           onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
-                          className={`w-full bg-gradient-to-tr from-[#48286E] to-[#664FA3] hover:bg-[#5a4290] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
+                          className={`w-full bg-gradient-to-tr from-var(--purple-deep) to-var(--purple-lavender) hover:bg-var(--purple-soft) text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
 
                           }
                         >
@@ -148,9 +148,9 @@ const Resources = () => {
                           className={`transition-all duration-300 ease-in-out ${isExpanded ? 'max-h-[1000px] opacity-100' : 'max-h-0 opacity-0'
                             }`}
                         >
-                          <Card className="p-6 bg-white rounded-b-2xl rounded-t-none border-none ">
+                          <Card className="p-6 bg-background rounded-b-2xl rounded-t-none border-none ">
                             {/* Description */}
-                            <p className="text-[#48286e] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-var(--purple-deep) mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {resource.description}
                             </p>
 
@@ -158,7 +158,7 @@ const Resources = () => {
                             <div className="space-y-3">
                               {/* Location */}
                               {resource.location && (
-                                <div className="flex items-start gap-2 text-[#664fa3]">
+                                <div className="flex items-start gap-2 text-var(--purple-lavender)">
                                   <MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
                                   <span className="text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                     {resource.location}
@@ -168,7 +168,7 @@ const Resources = () => {
 
                               {/* Contact */}
                               {resource.contact && (
-                                <div className="text-[#664fa3]">
+                                <div className="text-var(--purple-lavender)">
                                   <p className="text-sm font-medium mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                                     Contact: {resource.contact}
                                   </p>
@@ -178,7 +178,7 @@ const Resources = () => {
                                         <Phone className="size-4" />
                                         <a
                                           href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
-                                          className="text-sm hover:text-[#48286e] transition-colors"
+                                          className="text-sm hover:text-var(--purple-deep) transition-colors"
                                           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                         >
                                           {resource.phone}
@@ -190,7 +190,7 @@ const Resources = () => {
                                         <Mail className="h-4 w-4" />
                                         <a
                                           href={`mailto:${resource.email}`}
-                                          className="text-sm hover:text-[#48286e] transition-colors"
+                                          className="text-sm hover:text-var(--purple-deep) transition-colors"
                                           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                         >
                                           {resource.email}
@@ -207,7 +207,7 @@ const Resources = () => {
                                   href={resource.link}
                                   target="_blank"
                                   rel="noopener noreferrer"
-                                  className="inline-flex items-center gap-2 text-[#ff9e77] hover:text-[#e88a63] font-medium transition-colors mt-2"
+                                  className="inline-flex items-center gap-2 text-var(--orange-light) hover:text-var(--orange-peach) font-medium transition-colors mt-2"
                                   style={{ fontFamily: "'Inter', sans-serif" }}
                                 >
                                   Visit Website
@@ -228,7 +228,7 @@ const Resources = () => {
 
         {/* Additional Help Section */}
         <section className="max-w-4xl mx-auto mt-16">
-          <Card className="p-8 bg-gradient-to-r from-[#664fa3] to-[#48286e] rounded-2xl shadow-xl text-center">
+          <Card className="p-8 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) rounded-2xl shadow-xl text-center">
             <h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Additional Support?
             </h3>
@@ -237,7 +237,7 @@ const Resources = () => {
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="inline-block bg-white text-[#48286e] px-8 py-3 rounded-full font-semibold hover:bg-[#f1eef9] transition-colors shadow-lg"
+              className="inline-block bg-background text-var(--purple-deep) px-8 py-3 rounded-full font-semibold hover:bg-var(--lavender-300) transition-colors shadow-lg"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact Us
diff --git a/src/pages/TermsOfService.js b/src/pages/TermsOfService.js
index 874e4a4..7c69ade 100644
--- a/src/pages/TermsOfService.js
+++ b/src/pages/TermsOfService.js
@@ -8,7 +8,7 @@ export default function TermsOfService() {
   return (
     <>
       <PublicNavbar />
-      <main className="bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB] text-[#48286E]">
+      <main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) text-var(--purple-deep)">
         <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
           {/* Title */}
           <header className="border-b pb-6">
@@ -21,10 +21,10 @@ export default function TermsOfService() {
           </header>
 
           {/* Body */}
-          <div className="prose text-[#48286E] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+          <div className="prose text-var(--purple-deep) max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
             {/* AGREEMENT */}
             <section aria-labelledby="agreement" className="mt-8">
-              <h2 id="agreement" className="text-xl sm:text-2xl text-[#48286E] font-bold ">
+              <h2 id="agreement" className="text-xl sm:text-2xl text-var(--purple-deep) font-bold ">
                 AGREEMENT TO OUR LEGAL TERMS
               </h2>
 
@@ -68,37 +68,37 @@ export default function TermsOfService() {
             </section>
 
             {/* TABLE OF CONTENTS */}
-            <section aria-labelledby="toc" className="text-[#48286E]">
-              <h2 id="toc" className="text-lg sm:text-xl font-bold text-[#48286E] m-0">
+            <section aria-labelledby="toc" className="text-var(--purple-deep)">
+              <h2 id="toc" className="text-lg sm:text-xl font-bold text-var(--purple-deep) m-0">
                 TABLE OF CONTENTS
               </h2>
 
-              <ol className="mt-4 list-decimal no-prose text-[#48286E] pl-5 space-y-1">
-                <li><a className="text-[#48286E]" href="#our-services">OUR SERVICES</a></li>
-                <li><a className="text-[#48286E]" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
-                <li><a className="text-[#48286E]" href="#user-representations">USER REPRESENTATIONS</a></li>
-                <li><a className="text-[#48286E]" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
-                <li><a className="text-[#48286E]" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
-                <li><a className="text-[#48286E]" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
-                <li><a className="text-[#48286E]" href="#services-management">SERVICES MANAGEMENT</a></li>
-                <li><a className="text-[#48286E]" href="#term-termination">TERM AND TERMINATION</a></li>
-                <li><a className="text-[#48286E]" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
-                <li><a className="text-[#48286E]" href="#governing-law">GOVERNING LAW</a></li>
-                <li><a className="text-[#48286E]" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
-                <li><a className="text-[#48286E]" href="#corrections">CORRECTIONS</a></li>
-                <li><a className="text-[#48286E]" href="#disclaimer">DISCLAIMER</a></li>
-                <li><a className="text-[#48286E]" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
-                <li><a className="text-[#48286E]" href="#indemnification">INDEMNIFICATION</a></li>
-                <li><a className="text-[#48286E]" href="#user-data">USER DATA</a></li>
-                <li><a className="text-[#48286E]" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
-                <li><a className="text-[#48286E]" href="#miscellaneous">MISCELLANEOUS</a></li>
-                <li><a className="text-[#48286E]" href="#contact-us">CONTACT US</a></li>
+              <ol className="mt-4 list-decimal no-prose text-var(--purple-deep) pl-5 space-y-1">
+                <li><a className="text-var(--purple-deep)" href="#our-services">OUR SERVICES</a></li>
+                <li><a className="text-var(--purple-deep)" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
+                <li><a className="text-var(--purple-deep)" href="#user-representations">USER REPRESENTATIONS</a></li>
+                <li><a className="text-var(--purple-deep)" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
+                <li><a className="text-var(--purple-deep)" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
+                <li><a className="text-var(--purple-deep)" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
+                <li><a className="text-var(--purple-deep)" href="#services-management">SERVICES MANAGEMENT</a></li>
+                <li><a className="text-var(--purple-deep)" href="#term-termination">TERM AND TERMINATION</a></li>
+                <li><a className="text-var(--purple-deep)" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
+                <li><a className="text-var(--purple-deep)" href="#governing-law">GOVERNING LAW</a></li>
+                <li><a className="text-var(--purple-deep)" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
+                <li><a className="text-var(--purple-deep)" href="#corrections">CORRECTIONS</a></li>
+                <li><a className="text-var(--purple-deep)" href="#disclaimer">DISCLAIMER</a></li>
+                <li><a className="text-var(--purple-deep)" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
+                <li><a className="text-var(--purple-deep)" href="#indemnification">INDEMNIFICATION</a></li>
+                <li><a className="text-var(--purple-deep)" href="#user-data">USER DATA</a></li>
+                <li><a className="text-var(--purple-deep)" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
+                <li><a className="text-var(--purple-deep)" href="#miscellaneous">MISCELLANEOUS</a></li>
+                <li><a className="text-var(--purple-deep)" href="#contact-us">CONTACT US</a></li>
               </ol>
             </section>
 
             {/* 1. OUR SERVICES */}
             <section id="our-services" className="scroll-mt-24">
-              <h2 className="text-xl text-[#48286E] sm:text-2xl font-bold ">1. OUR SERVICES</h2>
+              <h2 className="text-xl text-var(--purple-deep) sm:text-2xl font-bold ">1. OUR SERVICES</h2>
               <p>
                 The information provided when using the Services is not intended for distribution to or use by any person
                 or entity in any jurisdiction or country where such distribution or use would be contrary to law or
@@ -111,7 +111,7 @@ export default function TermsOfService() {
 
             {/* 2. INTELLECTUAL PROPERTY RIGHTS */}
             <section id="ipr" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E] ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep) ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
 
               <h3 className="text-lg font-semibold ">Our intellectual property</h3>
               <p>
@@ -124,7 +124,7 @@ export default function TermsOfService() {
                 internal business purpose only.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Your use of our Services</h3>
+              <h3 className="text-lg font-semibold text-var(--purple-deep)">Your use of our Services</h3>
               <p>
                 Subject to your compliance with these Legal Terms, including the "PROHIBITED ACTIVITIES" section below, we
                 grant you a non-exclusive, non-transferable, revocable license to:
@@ -160,7 +160,7 @@ export default function TermsOfService() {
                 right to use our Services will terminate immediately.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Your submissions</h3>
+              <h3 className="text-lg font-semibold text-var(--purple-deep)">Your submissions</h3>
               <p>
                 Please review this section and the "PROHIBITED ACTIVITIES" section carefully prior to using our Services to
                 understand the (a) rights you give us and (b) obligations you have when you post or upload any content
@@ -225,7 +225,7 @@ export default function TermsOfService() {
 
             {/* 4. PROHIBITED ACTIVITIES */}
             <section id="prohibited-activities" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">4. PROHIBITED ACTIVITIES</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">4. PROHIBITED ACTIVITIES</h2>
 
               <p>
                 You may not access or use the Services for any purpose other than that for which we make the Services
@@ -261,7 +261,7 @@ export default function TermsOfService() {
 
             {/* 5. USER GENERATED CONTRIBUTIONS */}
             <section id="ugc" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">5. USER GENERATED CONTRIBUTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">5. USER GENERATED CONTRIBUTIONS</h2>
               <p>
                 The Services does not offer users to submit or post content. We may provide you with the opportunity to
                 create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials
@@ -274,7 +274,7 @@ export default function TermsOfService() {
 
             {/* 6. CONTRIBUTION LICENSE */}
             <section id="contribution-license" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">6. CONTRIBUTION LICENSE</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">6. CONTRIBUTION LICENSE</h2>
               <p>
                 You and Services agree that we may access, store, process, and use any information and personal data that
                 you provide and your choices (including settings).
@@ -295,7 +295,7 @@ export default function TermsOfService() {
 
             {/* 7. SERVICES MANAGEMENT */}
             <section id="services-management" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">7. SERVICES MANAGEMENT</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">7. SERVICES MANAGEMENT</h2>
               <p>
                 We reserve the right, but not the obligation, to: (1) monitor the Services for violations of these Legal
                 Terms; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or
@@ -311,7 +311,7 @@ export default function TermsOfService() {
 
             {/* 8. TERM AND TERMINATION */}
             <section id="term-termination" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">8. TERM AND TERMINATION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">8. TERM AND TERMINATION</h2>
               <p>
                 These Legal Terms shall remain in full force and effect while you use the Services.{" "}
                 <strong>
@@ -334,7 +334,7 @@ export default function TermsOfService() {
 
             {/* 9. MODIFICATIONS AND INTERRUPTIONS */}
             <section id="modifications" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">9. MODIFICATIONS AND INTERRUPTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">9. MODIFICATIONS AND INTERRUPTIONS</h2>
               <p>
                 We reserve the right to change, modify, or remove the contents of the Services at any time or for any
                 reason at our sole discretion without notice. However, we have no obligation to update any information on
@@ -357,7 +357,7 @@ export default function TermsOfService() {
 
             {/* 10. GOVERNING LAW */}
             <section id="governing-law" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">10. GOVERNING LAW</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">10. GOVERNING LAW</h2>
               <p>
                 These Legal Terms shall be governed by and defined following the laws of Texas. LOAFers, Inc. and yourself
                 irrevocably consent that the courts of Houston shall have exclusive jurisdiction to resolve any dispute
@@ -367,7 +367,7 @@ export default function TermsOfService() {
 
             {/* 11. DISPUTE RESOLUTION */}
             <section id="dispute-resolution" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">11. DISPUTE RESOLUTION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">11. DISPUTE RESOLUTION</h2>
 
               <h3 className="text-lg font-semibold ">Informal Negotiations</h3>
               <p>
@@ -378,7 +378,7 @@ export default function TermsOfService() {
                 arbitration. Such informal negotiations commence upon written notice from one Party to the other Party.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Binding Arbitration</h3>
+              <h3 className="text-lg font-semibold text-var(--purple-deep)">Binding Arbitration</h3>
               <p>
                 Any dispute arising out of or in connection with these Legal Terms, including any question regarding its
                 existence, validity, or termination, shall be referred to and finally resolved by the Disputy Resolution
@@ -393,7 +393,7 @@ export default function TermsOfService() {
                 </a>
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Restrictions</h3>
+              <h3 className="text-lg font-semibold text-var(--purple-deep)">Restrictions</h3>
               <p>
                 The Parties agree that any arbitration shall be limited to the Dispute between the Parties individually.
                 To the full extent permitted by law, (a) no arbitration shall be joined with any other proceeding; (b)
@@ -402,7 +402,7 @@ export default function TermsOfService() {
                 representative capacity on behalf of the general public or any other persons.
               </p>
 
-              <h3 className="text-lg font-semibold text-[#48286E]">Exceptions to Informal Negotiations and Arbitration</h3>
+              <h3 className="text-lg font-semibold text-var(--purple-deep)">Exceptions to Informal Negotiations and Arbitration</h3>
               <p>
                 The Parties agree that the following Disputes are not subject to the above provisions concerning informal
                 negotiations binding arbitration: (a) any Disputes seeking to enforce or protect, or concerning the validity
@@ -420,7 +420,7 @@ export default function TermsOfService() {
 
             {/* 12. CORRECTIONS */}
             <section id="corrections" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">12. CORRECTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">12. CORRECTIONS</h2>
               <p>
                 There may be information on the Services that contains typographical errors, inaccuracies, or omissions,
                 including descriptions, pricing, availability, and various other information. We reserve the right to
@@ -431,7 +431,7 @@ export default function TermsOfService() {
 
             {/* 13. DISCLAIMER */}
             <section id="disclaimer" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">13. DISCLAIMER</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">13. DISCLAIMER</h2>
               <p className="font-semibold">
                 THE SERVICES ARE PROVIDED ON AN AS-IS AND AS-AVAILABLE BASIS. YOU AGREE THAT YOUR USE OF THE SERVICES WILL
                 BE AT YOUR SOLE RISK. TO THE FULLEST EXTENT PERMITTED BY LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR
@@ -462,7 +462,7 @@ export default function TermsOfService() {
 
             {/* 14. LIMITATIONS OF LIABILITY */}
             <section id="limitations-liability" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">14. LIMITATIONS OF LIABILITY</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">14. LIMITATIONS OF LIABILITY</h2>
               <p className="font-semibold">
                 IN NO EVENT WILL WE OR OUR DIRECTORS, EMPLOYEES, OR AGENTS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY
                 DIRECT, INDIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, SPECIAL, OR PUNITIVE DAMAGES, INCLUDING LOST
@@ -483,7 +483,7 @@ export default function TermsOfService() {
 
             {/* 15. INDEMNIFICATION */}
             <section id="indemnification" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">15. INDEMNIFICATION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">15. INDEMNIFICATION</h2>
               <p>
                 You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of
                 our respective officers, agents, partners, and employees, from and against any loss, damage, liability,
@@ -503,7 +503,7 @@ export default function TermsOfService() {
 
             {/* 16. USER DATA */}
             <section id="user-data" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">16. USER DATA</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">16. USER DATA</h2>
               <p>
                 We will maintain certain data that you transmit to the Services for the purpose of managing the performance
                 of the Services, as well as data relating to your use of the Services. Although we perform regular routine
@@ -516,7 +516,7 @@ export default function TermsOfService() {
 
             {/* 17. ELECTRONIC COMMUNICATIONS */}
             <section id="electronic-comms" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">
                 17. ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES
               </h2>
               <p>
@@ -539,7 +539,7 @@ export default function TermsOfService() {
 
             {/* 18. MISCELLANEOUS */}
             <section id="miscellaneous" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">18. MISCELLANEOUS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">18. MISCELLANEOUS</h2>
               <p>
                 These Legal Terms and any policies or operating rules posted by us on the Services or in respect to the
                 Services constitute the entire agreement and understanding between you and us. Our failure to exercise or
@@ -567,7 +567,7 @@ export default function TermsOfService() {
 
             {/* 19. CONTACT US */}
             <section id="contact-us" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-[#48286E]">19. CONTACT US</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">19. CONTACT US</h2>
               <p>
                 In order to resolve a complaint regarding the Services or to receive further information regarding use of
                 the Services, please contact us at:
@@ -589,7 +589,7 @@ export default function TermsOfService() {
         </div>
         {/* Back to Home Link */}
         <div className="mt-8 text-center">
-          <Link to="/" className="text-[#664fa3] hover:text-[#422268] font-semibold transition-colors inline-flex items-center gap-2"
+          <Link to="/" className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold transition-colors inline-flex items-center gap-2"
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <span>←</span> Back to Home
           </Link>
diff --git a/src/pages/VerifyEmail.js b/src/pages/VerifyEmail.js
index 1fdeb43..4dccd5f 100644
--- a/src/pages/VerifyEmail.js
+++ b/src/pages/VerifyEmail.js
@@ -45,18 +45,18 @@ const VerifyEmail = () => {
   }, [token]);
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <PublicNavbar />
 
       <div className="max-w-2xl mx-auto px-6 py-20">
-        <Card className="p-6 sm:p-8 md:p-12 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg text-center">
+        <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg text-center">
           {status === 'loading' && (
             <>
-              <Loader2 className="h-20 w-20 text-[#664fa3] mx-auto mb-6 animate-spin" />
-              <h1 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Loader2 className="h-20 w-20 text-var(--purple-lavender) mx-auto mb-6 animate-spin" />
+              <h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verifying Your Email...
               </h1>
-              <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Please wait while we verify your email address.
               </p>
             </>
@@ -64,19 +64,19 @@ const VerifyEmail = () => {
 
           {status === 'success' && (
             <>
-              <CheckCircle className="h-20 w-20 text-[#81B29A] mx-auto mb-6" />
-              <h1 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <CheckCircle className="h-20 w-20 text-var(--green-light) mx-auto mb-6" />
+              <h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Email Verified Successfully!
               </h1>
-              <p className="text-lg text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
-              <p className="text-base text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Next steps: Attend an event and meet a board member within 90 days. Once you've attended an event, our admin team will review your application.
               </p>
               <Link to="/login">
                 <Button
-                  className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-12 py-6 text-lg font-medium shadow-lg"
+                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
                   data-testid="login-redirect-button"
                 >
                   Go to Login
@@ -88,15 +88,15 @@ const VerifyEmail = () => {
           {status === 'error' && (
             <>
               <XCircle className="h-20 w-20 text-red-500 mx-auto mb-6" />
-              <h1 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verification Failed
               </h1>
-              <p className="text-lg text-[#664fa3] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
               <Link to="/">
                 <Button
-                  className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-12 py-6 text-lg font-medium shadow-lg"
+                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
                   data-testid="home-redirect-button"
                 >
                   Go to Home
diff --git a/src/pages/admin/AdminBylaws.js b/src/pages/admin/AdminBylaws.js
index 54f07df..14ee334 100644
--- a/src/pages/admin/AdminBylaws.js
+++ b/src/pages/admin/AdminBylaws.js
@@ -162,14 +162,14 @@ const AdminBylaws = () => {
   };
 
   const currentBylaws = bylaws.find(b => b.is_current);
-  const historicalBylaws = bylaws.filter(b => !b.is_current).sort((a, b) => 
+  const historicalBylaws = bylaws.filter(b => !b.is_current).sort((a, b) =>
     new Date(b.effective_date) - new Date(a.effective_date)
   );
 
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[#664fa3]">Loading bylaws...</p>
+        <p className="text-var(--purple-lavender)">Loading bylaws...</p>
       </div>
     );
   }
@@ -179,17 +179,17 @@ const AdminBylaws = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             Bylaws Management
           </h1>
-          <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage LOAF governing bylaws and version history
           </p>
         </div>
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -199,22 +199,22 @@ const AdminBylaws = () => {
 
       {/* Current Bylaws */}
       {currentBylaws ? (
-        <Card className="p-6 border-2 border-[#664fa3]">
+        <Card className="p-6 border-2 border-var(--purple-lavender)">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-3 rounded-xl">
+              <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-3 rounded-xl">
                 <Scale className="h-6 w-6 text-white" />
               </div>
               <div>
-                <h3 className="text-xl font-semibold text-[#422268]">
+                <h3 className="text-xl font-semibold text-var(--purple-ink)">
                   {currentBylaws.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-1">
-                  <Badge className="bg-[#81B29A] text-white">
+                  <Badge className="bg-var(--green-light) text-white">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
-                  <span className="text-[#664fa3] text-sm">
+                  <span className="text-var(--purple-lavender) text-sm">
                     Version {currentBylaws.version}
                   </span>
                 </div>
@@ -225,7 +225,7 @@ const AdminBylaws = () => {
                 variant="outline"
                 size="sm"
                 onClick={() => window.open(currentBylaws.document_url, '_blank')}
-                className="border-[#664fa3] text-[#664fa3]"
+                className="border-var(--purple-lavender) text-var(--purple-lavender)"
               >
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
@@ -235,7 +235,7 @@ const AdminBylaws = () => {
                   variant="outline"
                   size="sm"
                   onClick={() => handleEdit(currentBylaws)}
-                  className="border-[#664fa3] text-[#664fa3]"
+                  className="border-var(--purple-lavender) text-var(--purple-lavender)"
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
@@ -252,7 +252,7 @@ const AdminBylaws = () => {
               )}
             </div>
           </div>
-          <div className="flex items-center gap-4 text-sm text-[#664fa3]">
+          <div className="flex items-center gap-4 text-sm text-var(--purple-lavender)">
             <span>Effective Date: <strong>{formatDate(currentBylaws.effective_date)}</strong></span>
             <span>•</span>
             <span>Document Type: <strong>{currentBylaws.document_type === 'upload' ? 'PDF Upload' : 'Link'}</strong></span>
@@ -260,10 +260,10 @@ const AdminBylaws = () => {
         </Card>
       ) : (
         <Card className="p-12 text-center">
-          <Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-          <p className="text-[#664fa3] text-lg mb-4">No current bylaws set</p>
+          <Scale className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+          <p className="text-var(--purple-lavender) text-lg mb-4">No current bylaws set</p>
           {hasPermission('bylaws.create') && (
-            <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
+            <Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create Bylaws
             </Button>
@@ -274,7 +274,7 @@ const AdminBylaws = () => {
       {/* Historical Versions */}
       {historicalBylaws.length > 0 && (
         <div>
-          <h2 className="text-xl font-semibold text-[#422268] mb-4">
+          <h2 className="text-xl font-semibold text-var(--purple-ink) mb-4">
             Version History ({historicalBylaws.length})
           </h2>
           <div className="space-y-4">
@@ -282,10 +282,10 @@ const AdminBylaws = () => {
               <Card key={bylawsDoc.id} className="p-6">
                 <div className="flex items-center justify-between">
                   <div>
-                    <h3 className="text-lg font-semibold text-[#422268] mb-1">
+                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-1">
                       {bylawsDoc.title}
                     </h3>
-                    <div className="flex items-center gap-3 text-sm text-[#664fa3]">
+                    <div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
                       <span>Version {bylawsDoc.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylawsDoc.effective_date)}</span>
@@ -296,7 +296,7 @@ const AdminBylaws = () => {
                       variant="outline"
                       size="sm"
                       onClick={() => window.open(bylawsDoc.document_url, '_blank')}
-                      className="border-[#664fa3] text-[#664fa3]"
+                      className="border-var(--purple-lavender) text-var(--purple-lavender)"
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
@@ -305,7 +305,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(bylawsDoc)}
-                        className="border-[#664fa3] text-[#664fa3]"
+                        className="border-var(--purple-lavender) text-var(--purple-lavender)"
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -404,12 +404,12 @@ const AdminBylaws = () => {
                     required={!selectedBylaws}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[#664fa3] mt-1">
+                    <p className="text-sm text-var(--purple-lavender) mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedBylaws && !uploadedFile && (
-                    <p className="text-sm text-[#664fa3] mt-1">
+                    <p className="text-sm text-var(--purple-lavender) mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -424,7 +424,7 @@ const AdminBylaws = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[#664fa3] mt-1">
+                  <p className="text-sm text-var(--purple-lavender) mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -455,7 +455,7 @@ const AdminBylaws = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[#664fa3] text-white"
+                className="bg-var(--purple-lavender) text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedBylaws ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index 44f9ed5..aaa0c3c 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -4,7 +4,7 @@ import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
-import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle,Globe } from 'lucide-react';
+import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle, Globe } from 'lucide-react';
 
 const AdminDashboard = () => {
   const [stats, setStats] = useState({
@@ -58,16 +58,16 @@ const AdminDashboard = () => {
     <>
       <div className='flex justify-between items-center'>
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Admin Dashboard
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage users, events, and membership applications.
           </p>
         </div>
         <Link to={'/'}>
           <Button
-            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
           >
             <Globe />
             View Public Site
@@ -77,56 +77,56 @@ const AdminDashboard = () => {
 
       {/* Stats Grid */}
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-total-users">
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="stat-total-users">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
-              <Users className="h-6 w-6 text-[#664fa3]" />
+            <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
+              <Users className="h-6 w-6 text-var(--purple-lavender)" />
             </div>
           </div>
-          <p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-3xl font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.totalMembers}
           </p>
-          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-pending-validations">
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="stat-pending-validations">
           <div className="flex items-center justify-between mb-4">
             <div className="bg-orange-100 p-3 rounded-lg">
               <Clock className="h-6 w-6 text-orange-600" />
             </div>
           </div>
-          <p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-3xl font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.pendingValidations}
           </p>
-          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
+          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]" data-testid="stat-active-members">
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="stat-active-members">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-[#81B29A]/20 p-3 rounded-lg">
-              <CheckCircle className="h-6 w-6 text-[#81B29A]" />
+            <div className="bg-var(--green-light)/20 p-3 rounded-lg">
+              <CheckCircle className="h-6 w-6 text-var(--green-light)" />
             </div>
           </div>
-          <p className="text-3xl font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-3xl font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.activeMembers}
           </p>
-          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
+          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
         </Card>
       </div>
 
       {/* Quick Actions */}
       <div className="grid md:grid-cols-2 gap-8">
         <Link to="/admin/members">
-          <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
-            <Users className="h-12 w-12 text-[#664fa3] mb-4" />
-            <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
+            <Users className="h-12 w-12 text-var(--purple-lavender) mb-4" />
+            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Manage Members
             </h3>
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               View and manage paying members and their subscription status.
             </p>
             <Button
-              className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
+              className="mt-4 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
               data-testid="manage-users-button"
             >
               Go to Members
@@ -135,16 +135,16 @@ const AdminDashboard = () => {
         </Link>
 
         <Link to="/admin/validations">
-          <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-validations">
+          <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-validations">
             <Clock className="h-12 w-12 text-orange-600 mb-4" />
-            <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Validation Queue
             </h3>
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Review and validate pending membership applications.
             </p>
             <Button
-              className="mt-4 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
+              className="mt-4 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
               data-testid="manage-validations-button"
             >
               View Validations
@@ -156,16 +156,16 @@ const AdminDashboard = () => {
       {/* Users Needing Attention Widget */}
       {usersNeedingAttention.length > 0 && (
         <div className="mt-12">
-          <Card className="p-8 bg-white rounded-2xl border-2 border-[#ff9e77] shadow-lg">
+          <Card className="p-8 bg-background rounded-2xl border-2 border-var(--orange-light) shadow-lg">
             <div className="flex items-center gap-3 mb-6">
-              <div className="bg-[#ff9e77]/20 p-3 rounded-lg">
-                <AlertCircle className="h-6 w-6 text-[#ff9e77]" />
+              <div className="bg-var(--orange-light)/20 p-3 rounded-lg">
+                <AlertCircle className="h-6 w-6 text-var(--orange-light)" />
               </div>
               <div>
-                <h3 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Members Needing Personal Outreach
                 </h3>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   These members have received multiple reminder emails. Consider calling them directly.
                 </p>
               </div>
@@ -174,18 +174,18 @@ const AdminDashboard = () => {
             <div className="space-y-4">
               {usersNeedingAttention.map(user => (
                 <Link key={user.id} to={`/admin/users/${user.id}`}>
-                  <div className="p-4 bg-[#F8F7FB] rounded-xl border border-[#ddd8eb] hover:border-[#ff9e77] hover:shadow-md transition-all cursor-pointer">
+                  <div className="p-4 bg-var(--lavender-500) rounded-xl border border-var(--neutral-800) hover:border-var(--orange-light) hover:shadow-md transition-all cursor-pointer">
                     <div className="flex items-start justify-between gap-4">
                       <div className="flex-1">
                         <div className="flex items-center gap-3 mb-2">
-                          <h4 className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h4 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {user.first_name} {user.last_name}
                           </h4>
-                          <Badge className="bg-[#ff9e77] text-white px-3 py-1 rounded-full text-xs">
+                          <Badge className="bg-var(--orange-light) text-white px-3 py-1 rounded-full text-xs">
                             {user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
                           </Badge>
                         </div>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone || 'N/A'}</p>
                           <p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -210,7 +210,7 @@ const AdminDashboard = () => {
                         </div>
                       </div>
                       <Button
-                        className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full text-sm"
+                        className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full text-sm"
                         onClick={(e) => {
                           e.preventDefault();
                           window.location.href = `tel:${user.phone}`;
@@ -224,8 +224,8 @@ const AdminDashboard = () => {
               ))}
             </div>
 
-            <div className="mt-6 p-4 bg-[#DDD8EB]/20 rounded-lg border border-[#ddd8eb]">
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="mt-6 p-4 bg-var(--neutral-800)/20 rounded-lg border border-var(--neutral-800)">
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
                 A friendly phone call can help them complete the registration process and feel more welcomed to the community.
               </p>
diff --git a/src/pages/admin/AdminDonations.js b/src/pages/admin/AdminDonations.js
index 4bf773f..5068244 100644
--- a/src/pages/admin/AdminDonations.js
+++ b/src/pages/admin/AdminDonations.js
@@ -167,13 +167,13 @@ const AdminDonations = () => {
   };
 
   const getTypeBadgeColor = (type) => {
-    return type === 'member' ? 'bg-[#81B29A]' : 'bg-[#664fa3]';
+    return type === 'member' ? 'bg-var(--green-light)' : 'bg-var(--purple-lavender)';
   };
 
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-[#664fa3]" />
+        <Loader2 className="h-12 w-12 animate-spin text-var(--purple-lavender)" />
       </div>
     );
   }
@@ -182,93 +182,93 @@ const AdminDonations = () => {
     <div className="space-y-8">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Donation Management
         </h1>
-        <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Track and manage all donations from members and the public
         </p>
       </div>
 
       {/* Stats Cards */}
       <div className="grid md:grid-cols-4 gap-6">
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
-              <p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.total_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#DDD8EB]/20 rounded-full">
-              <Heart className="h-6 w-6 text-[#664fa3]" />
+            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
+              <Heart className="h-6 w-6 text-var(--purple-lavender)" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Member Donations
               </p>
-              <p className="text-3xl font-bold text-[#81B29A] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--green-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.member_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#81B29A]/10 rounded-full">
-              <Users className="h-6 w-6 text-[#81B29A]" />
+            <div className="p-3 bg-var(--green-light)/10 rounded-full">
+              <Users className="h-6 w-6 text-var(--green-light)" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Public Donations
               </p>
-              <p className="text-3xl font-bold text-[#664fa3] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.public_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#DDD8EB]/20 rounded-full">
-              <Globe className="h-6 w-6 text-[#664fa3]" />
+            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
+              <Globe className="h-6 w-6 text-var(--purple-lavender)" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Amount
               </p>
-              <p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.total_amount || '$0.00'}
               </p>
             </div>
-            <div className="p-3 bg-[#DDD8EB]/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-[#664fa3]" />
+            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
+              <DollarSign className="h-6 w-6 text-var(--purple-lavender)" />
             </div>
           </div>
         </Card>
       </div>
 
       {/* Filters and Actions */}
-      <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+      <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
         <div className="space-y-4">
           {/* Search and Export Row */}
           <div className="flex flex-col md:flex-row gap-4 justify-between">
             <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
               <Input
                 placeholder="Search by donor name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-full border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="pl-10 rounded-full border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
             {hasPermission('donations.export') && (
@@ -276,26 +276,26 @@ const AdminDonations = () => {
                 <DropdownMenuTrigger asChild>
                   <Button
                     disabled={exporting}
-                    className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-3 flex items-center gap-2"
+                    className="bg-var(--green-light) text-white hover:bg-var(--green-soft) rounded-full px-6 py-3 flex items-center gap-2"
                   >
                     <Download className="h-4 w-4" />
                     {exporting ? 'Exporting...' : 'Export'}
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
+                <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-var(--neutral-800) shadow-lg">
                   <DropdownMenuItem
                     onClick={() => handleExport('all')}
-                    className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                    className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                    <span className="text-[#422268]">Export All Donations</span>
+                    <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
+                    <span className="text-var(--purple-ink)">Export All Donations</span>
                   </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={() => handleExport('current')}
-                    className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                    className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                    <span className="text-[#422268]">Export Current View</span>
+                    <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
+                    <span className="text-var(--purple-ink)">Export Current View</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -306,7 +306,7 @@ const AdminDonations = () => {
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             <div>
               <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="rounded-full border-2 border-[#ddd8eb]">
+                <SelectTrigger className="rounded-full border-2 border-var(--neutral-800)">
                   <SelectValue placeholder="All Types" />
                 </SelectTrigger>
                 <SelectContent>
@@ -319,7 +319,7 @@ const AdminDonations = () => {
 
             <div>
               <Select value={statusFilter} onValueChange={setStatusFilter}>
-                <SelectTrigger className="rounded-full border-2 border-[#ddd8eb]">
+                <SelectTrigger className="rounded-full border-2 border-var(--neutral-800)">
                   <SelectValue placeholder="All Statuses" />
                 </SelectTrigger>
                 <SelectContent>
@@ -336,7 +336,7 @@ const AdminDonations = () => {
                 type="date"
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
-                className="rounded-full border-2 border-[#ddd8eb]"
+                className="rounded-full border-2 border-var(--neutral-800)"
                 placeholder="Start Date"
               />
             </div>
@@ -346,7 +346,7 @@ const AdminDonations = () => {
                 type="date"
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
-                className="rounded-full border-2 border-[#ddd8eb]"
+                className="rounded-full border-2 border-var(--neutral-800)"
                 placeholder="End Date"
               />
             </div>
@@ -354,7 +354,7 @@ const AdminDonations = () => {
 
           {/* Active Filters Summary */}
           {(searchQuery || typeFilter !== 'all' || statusFilter !== 'all' || startDate || endDate) && (
-            <div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Showing {filteredDonations.length} of {donations.length} donations
             </div>
           )}
@@ -362,38 +362,38 @@ const AdminDonations = () => {
       </Card>
 
       {/* Donations Table */}
-      <Card className="bg-white rounded-2xl border-2 border-[#ddd8eb] overflow-hidden">
+      <Card className="bg-background rounded-2xl border-2 border-var(--neutral-800) overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-[#f1eef9] border-b-2 border-[#ddd8eb]">
+            <thead className="bg-var(--lavender-300) border-b-2 border-var(--neutral-800)">
               <tr>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Donor
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Type
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Amount
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Status
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Date
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Payment Method
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-[#ddd8eb]">
+            <tbody className="divide-y divide-var(--neutral-800)">
               {filteredDonations.length === 0 ? (
                 <tr>
                   <td colSpan="6" className="px-6 py-12 text-center">
                     <div className="flex flex-col items-center gap-3">
-                      <Heart className="h-12 w-12 text-[#ddd8eb]" />
-                      <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Heart className="h-12 w-12 text-var(--neutral-800)" />
+                      <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
                       </p>
                     </div>
@@ -401,13 +401,13 @@ const AdminDonations = () => {
                 </tr>
               ) : (
                 filteredDonations.map((donation) => (
-                  <tr key={donation.id} className="hover:bg-[#f9f5ff] transition-colors">
+                  <tr key={donation.id} className="hover:bg-var(--lavender-400) transition-colors">
                     <td className="px-6 py-4">
                       <div>
-                        <p className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        <p className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                           {donation.donor_name || 'Anonymous'}
                         </p>
-                        <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {donation.donor_email || 'No email'}
                         </p>
                       </div>
@@ -421,7 +421,7 @@ const AdminDonations = () => {
                       </Badge>
                     </td>
                     <td className="px-6 py-4">
-                      <p className="font-semibold text-[#422268] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="font-semibold text-var(--purple-ink) text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {donation.amount}
                       </p>
                     </td>
@@ -431,7 +431,7 @@ const AdminDonations = () => {
                       </Badge>
                     </td>
                     <td className="px-6 py-4">
-                      <div className="flex items-center gap-2 text-[#664fa3]">
+                      <div className="flex items-center gap-2 text-var(--purple-lavender)">
                         <Calendar className="h-4 w-4" />
                         <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {formatDate(donation.created_at)}
@@ -439,7 +439,7 @@ const AdminDonations = () => {
                       </div>
                     </td>
                     <td className="px-6 py-4">
-                      <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donation.payment_method || 'N/A'}
                       </p>
                     </td>
@@ -453,18 +453,18 @@ const AdminDonations = () => {
 
       {/* This Month Summary */}
       {stats.this_month_count > 0 && (
-        <Card className="p-6 bg-gradient-to-r from-[#f9f5ff] to-[#f1eef9] rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-gradient-to-r from-var(--lavender-400) to-var(--lavender-300) rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 This Month's Donations
               </p>
-              <p className="text-2xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-2xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.this_month_count} donations • {stats.this_month_amount}
               </p>
             </div>
-            <div className="p-4 bg-white rounded-full shadow-sm">
-              <Heart className="h-8 w-8 text-[#ff9e77]" />
+            <div className="p-4 bg-background rounded-full shadow-sm">
+              <Heart className="h-8 w-8 text-var(--orange-light)" />
             </div>
           </div>
         </Card>
diff --git a/src/pages/admin/AdminEventAttendance.js b/src/pages/admin/AdminEventAttendance.js
index 5fa5c09..6e59b16 100644
--- a/src/pages/admin/AdminEventAttendance.js
+++ b/src/pages/admin/AdminEventAttendance.js
@@ -213,7 +213,7 @@ const AdminEventAttendance = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="text-[#664fa3]">Loading event data...</div>
+        <div className="text-var(--purple-lavender)">Loading event data...</div>
       </div>
     );
   }
@@ -221,8 +221,8 @@ const AdminEventAttendance = () => {
   if (!event) {
     return (
       <div className="text-center py-12">
-        <p className="text-[#664fa3] mb-4">Event not found</p>
-        <Button onClick={() => navigate('/admin/events')} className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl">
+        <p className="text-var(--purple-lavender) mb-4">Event not found</p>
+        <Button onClick={() => navigate('/admin/events')} className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl">
           Back to Events
         </Button>
       </div>
@@ -237,24 +237,24 @@ const AdminEventAttendance = () => {
           <Button
             onClick={() => navigate('/admin/events')}
             variant="outline"
-            className="border-[#ddd8eb] text-[#664fa3] rounded-xl"
+            className="border-var(--neutral-800) text-var(--purple-lavender) rounded-xl"
             style={{ fontFamily: "'Inter', sans-serif" }}
           >
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Events
           </Button>
           <div>
-            <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Attendance
             </h1>
-            <p className="text-[#664fa3] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage RSVPs and track attendance for this event
             </p>
           </div>
         </div>
         <Button
           onClick={exportToCSV}
-          className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-xl"
+          className="bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white rounded-xl"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <Download className="h-4 w-4 mr-2" />
@@ -263,13 +263,13 @@ const AdminEventAttendance = () => {
       </div>
 
       {/* Event Details Card */}
-      <Card className="p-6 bg-white border-[#ddd8eb] rounded-xl">
+      <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
         <div className="flex items-start justify-between">
           <div>
-            <h2 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               {event.title}
             </h2>
-            <div className="flex flex-wrap gap-4 text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="flex flex-wrap gap-4 text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
                 <span>{moment(event.start_at).format('MMMM D, YYYY [at] h:mm A')}</span>
@@ -282,7 +282,7 @@ const AdminEventAttendance = () => {
               )}
             </div>
           </div>
-          <Badge className={`${event.published ? 'bg-[#81B29A]' : 'bg-[#ddd8eb]'} text-white px-3 py-1`}>
+          <Badge className={`${event.published ? 'bg-var(--green-light)' : 'bg-var(--neutral-800)'} text-white px-3 py-1`}>
             {event.published ? 'Published' : 'Draft'}
           </Badge>
         </div>
@@ -290,70 +290,69 @@ const AdminEventAttendance = () => {
 
       {/* Statistics Cards */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
-        <Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
+        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
           <div className="flex items-center gap-3">
-            <Users className="h-8 w-8 text-[#664fa3]" />
+            <Users className="h-8 w-8 text-var(--purple-lavender)" />
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
-              <p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
+        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
           <div className="flex items-center gap-3">
-            <UserCheck className="h-8 w-8 text-[#81B29A]" />
+            <UserCheck className="h-8 w-8 text-var(--green-light)" />
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
-              <p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
+              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
+        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
           <div className="flex items-center gap-3">
-            <UserX className="h-8 w-8 text-[#E07A5F]" />
+            <UserX className="h-8 w-8 text-var(--orange-soft)" />
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
-              <p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
+              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
+        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
           <div className="flex items-center gap-3">
-            <HelpCircle className="h-8 w-8 text-[#F2CC8F]" />
+            <HelpCircle className="h-8 w-8 text-var(--gold-warm)" />
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
-              <p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
+              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-white border-[#ddd8eb] rounded-xl">
+        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
           <div className="flex items-center gap-3">
-            <Check className="h-8 w-8 text-[#664fa3]" />
+            <Check className="h-8 w-8 text-var(--purple-lavender)" />
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
-              <p className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
+              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
             </div>
           </div>
         </Card>
       </div>
 
       {/* Filters and Actions */}
-      <Card className="p-6 bg-white border-[#ddd8eb] rounded-xl">
+      <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
         <div className="space-y-4">
           {/* Tab Filters */}
           <div className="flex flex-wrap gap-2">
             <Button
               onClick={() => setActiveTab('all')}
               variant={activeTab === 'all' ? 'default' : 'outline'}
-              className={`rounded-xl ${
-                activeTab === 'all'
-                  ? 'bg-[#664fa3] hover:bg-[#422268] text-white'
-                  : 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
-              }`}
+              className={`rounded-xl ${activeTab === 'all'
+                ? 'bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white'
+                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               All ({stats.total})
@@ -361,11 +360,10 @@ const AdminEventAttendance = () => {
             <Button
               onClick={() => setActiveTab('yes')}
               variant={activeTab === 'yes' ? 'default' : 'outline'}
-              className={`rounded-xl ${
-                activeTab === 'yes'
-                  ? 'bg-[#81B29A] hover:bg-[#6a9a83] text-white'
-                  : 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
-              }`}
+              className={`rounded-xl ${activeTab === 'yes'
+                ? 'bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white'
+                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Yes ({stats.yesCount})
@@ -373,11 +371,10 @@ const AdminEventAttendance = () => {
             <Button
               onClick={() => setActiveTab('no')}
               variant={activeTab === 'no' ? 'default' : 'outline'}
-              className={`rounded-xl ${
-                activeTab === 'no'
-                  ? 'bg-[#E07A5F] hover:bg-[#d16b54] text-white'
-                  : 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
-              }`}
+              className={`rounded-xl ${activeTab === 'no'
+                ? 'bg-var(--orange-soft) hover:bg-var(--orange-rust) text-white'
+                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               No ({stats.noCount})
@@ -385,11 +382,10 @@ const AdminEventAttendance = () => {
             <Button
               onClick={() => setActiveTab('maybe')}
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
-              className={`rounded-xl ${
-                activeTab === 'maybe'
-                  ? 'bg-[#F2CC8F] hover:bg-[#e8bf7a] text-[#422268]'
-                  : 'border-[#ddd8eb] text-[#664fa3] hover:bg-[#F8F7FB]'
-              }`}
+              className={`rounded-xl ${activeTab === 'maybe'
+                ? 'bg-var(--gold-warm) hover:bg-var(--gold-soft) text-var(--purple-ink)'
+                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Maybe ({stats.maybeCount})
@@ -399,26 +395,26 @@ const AdminEventAttendance = () => {
           {/* Search and Bulk Actions */}
           <div className="flex flex-wrap gap-3 items-center justify-between">
             <div className="flex-1 min-w-[200px] max-w-md relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[#664fa3]" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-var(--purple-lavender)" />
               <Input
                 type="text"
                 placeholder="Search by name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 border-[#ddd8eb] rounded-xl"
+                className="pl-10 border-var(--neutral-800) rounded-xl"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               />
             </div>
 
             {selectedRsvps.size > 0 && (
               <div className="flex gap-2">
-                <Badge className="bg-[#664fa3] text-white px-3 py-1">
+                <Badge className="bg-var(--purple-lavender) text-white px-3 py-1">
                   {selectedRsvps.size} selected
                 </Badge>
                 <Button
                   onClick={() => handleBulkAttendance(true)}
                   disabled={saving}
-                  className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-xl"
+                  className="bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white rounded-xl"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   <Check className="h-4 w-4 mr-1" />
@@ -427,7 +423,7 @@ const AdminEventAttendance = () => {
                 <Button
                   onClick={() => handleBulkAttendance(false)}
                   disabled={saving}
-                  className="bg-[#E07A5F] hover:bg-[#d16b54] text-white rounded-xl"
+                  className="bg-var(--orange-soft) hover:bg-var(--orange-rust) text-white rounded-xl"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   <X className="h-4 w-4 mr-1" />
@@ -440,10 +436,10 @@ const AdminEventAttendance = () => {
       </Card>
 
       {/* RSVP Table */}
-      <Card className="bg-white border-[#ddd8eb] rounded-xl overflow-hidden">
+      <Card className="bg-background border-var(--neutral-800) rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-[#F8F7FB] border-b border-[#ddd8eb]">
+            <thead className="bg-var(--lavender-500) border-b border-var(--neutral-800)">
               <tr>
                 <th className="px-4 py-3 text-left">
                   <Checkbox
@@ -451,19 +447,19 @@ const AdminEventAttendance = () => {
                     onCheckedChange={handleSelectAll}
                   />
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Name
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Email
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   RSVP Status
                 </th>
-                <th className="px-4 py-3 text-center text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-center text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Attendance
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Attended At
                 </th>
               </tr>
@@ -471,28 +467,27 @@ const AdminEventAttendance = () => {
             <tbody>
               {filteredRsvps.length > 0 ? (
                 filteredRsvps.map((rsvp) => (
-                  <tr key={rsvp.user_id} className="border-b border-[#ddd8eb] hover:bg-[#F8F7FB] transition-colors">
+                  <tr key={rsvp.user_id} className="border-b border-var(--neutral-800) hover:bg-var(--lavender-500) transition-colors">
                     <td className="px-4 py-3">
                       <Checkbox
                         checked={selectedRsvps.has(rsvp.user_id)}
                         onCheckedChange={() => handleSelectRsvp(rsvp.user_id)}
                       />
                     </td>
-                    <td className="px-4 py-3 text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_name}
                     </td>
-                    <td className="px-4 py-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_email}
                     </td>
                     <td className="px-4 py-3">
                       <Badge
-                        className={`${
-                          rsvp.rsvp_status === 'yes'
-                            ? 'bg-[#81B29A]'
-                            : rsvp.rsvp_status === 'no'
-                            ? 'bg-[#E07A5F]'
-                            : 'bg-[#F2CC8F] text-[#422268]'
-                        } text-white text-xs px-2 py-1`}
+                        className={`${rsvp.rsvp_status === 'yes'
+                          ? 'bg-var(--green-light)'
+                          : rsvp.rsvp_status === 'no'
+                            ? 'bg-var(--orange-soft)'
+                            : 'bg-var(--gold-warm) text-var(--purple-ink)'
+                          } text-white text-xs px-2 py-1`}
                       >
                         {rsvp.rsvp_status.toUpperCase()}
                       </Badge>
@@ -503,7 +498,7 @@ const AdminEventAttendance = () => {
                           onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
                           disabled={saving}
                           size="sm"
-                          className="bg-[#81B29A] hover:bg-[#6a9a83] text-white rounded-lg min-w-[120px]"
+                          className="bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Check className="h-3 w-3 mr-1" />
@@ -515,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-[#ddd8eb] text-[#664fa3] hover:bg-[#81B29A] hover:text-white hover:border-[#81B29A] rounded-lg min-w-[120px]"
+                          className="border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--green-light) hover:text-white hover:border-var(--green-light) rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />
@@ -523,7 +518,7 @@ const AdminEventAttendance = () => {
                         </Button>
                       )}
                     </td>
-                    <td className="px-4 py-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.attended_at ? moment(rsvp.attended_at).format('MMM D, YYYY h:mm A') : '-'}
                     </td>
                   </tr>
@@ -531,7 +526,7 @@ const AdminEventAttendance = () => {
               ) : (
                 <tr>
                   <td colSpan="6" className="px-4 py-12 text-center">
-                    <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {searchQuery ? 'No RSVPs match your search' : 'No RSVPs for this filter'}
                     </p>
                   </td>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index 8d25af7..ff7d34a 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -134,15 +134,15 @@ const AdminEvents = () => {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
         <div>
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Management
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage community events.
           </p>
         </div>
 
-          {(hasPermission('events.create') || hasPermission('events.edit')) && (
+        {(hasPermission('events.create') || hasPermission('events.edit')) && (
           <Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
             <DialogTrigger asChild>
               <Button
@@ -150,7 +150,7 @@ const AdminEvents = () => {
                   resetForm();
                   setEditingEvent(null);
                 }}
-                className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
+                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
                 data-testid="create-event-button"
               >
                 <Plus className="mr-2 h-5 w-5" />
@@ -160,39 +160,39 @@ const AdminEvents = () => {
 
             <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
               <DialogHeader>
-                <DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
                 </DialogTitle>
               </DialogHeader>
 
               <form onSubmit={handleSubmit} className="space-y-4 mt-4">
                 <div>
-                  <label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Title *
                   </label>
                   <Input
                     value={formData.title}
                     onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                     required
-                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Description
                   </label>
                   <textarea
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[#ddd8eb] focus:border-[#664fa3] rounded-lg p-3"
+                    className="w-full border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-lg p-3"
                   />
                 </div>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Start Date & Time *
                     </label>
                     <Input
@@ -200,12 +200,12 @@ const AdminEvents = () => {
                       value={formData.start_at}
                       onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
                       required
-                      className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                     />
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       End Date & Time *
                     </label>
                     <Input
@@ -213,25 +213,25 @@ const AdminEvents = () => {
                       value={formData.end_at}
                       onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
                       required
-                      className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                      className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                     />
                   </div>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Location *
                   </label>
                   <Input
                     value={formData.location}
                     onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                     required
-                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Capacity (optional)
                   </label>
                   <Input
@@ -239,7 +239,7 @@ const AdminEvents = () => {
                     value={formData.capacity}
                     onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
                     placeholder="Leave empty for unlimited"
-                    className="border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                    className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   />
                 </div>
 
@@ -249,9 +249,9 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-[#664fa3] border-[#ddd8eb] rounded focus:ring-[#664fa3]"
+                    className="w-4 h-4 text-var(--purple-lavender) border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
                   />
-                  <label htmlFor="published" className="text-sm font-medium text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label htmlFor="published" className="text-sm font-medium text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
                   </label>
                 </div>
@@ -267,7 +267,7 @@ const AdminEvents = () => {
                   </Button>
                   <Button
                     type="submit"
-                    className="flex-1 bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full"
+                    className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
                   >
                     {editingEvent ? 'Update Event' : 'Create Event'}
                   </Button>
@@ -275,146 +275,145 @@ const AdminEvents = () => {
               </form>
             </DialogContent>
           </Dialog>
-          )}
+        )}
+      </div>
+
+      {/* Events List */}
+      {loading ? (
+        <div className="text-center py-20">
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
         </div>
-
-        {/* Events List */}
-        {loading ? (
-          <div className="text-center py-20">
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
-          </div>
-        ) : events.length > 0 ? (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
-            {events.map((event) => (
-              <Card
-                key={event.id}
-                className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-all"
-                data-testid={`event-card-${event.id}`}
-              >
-                {/* Event Header */}
-                <div className="flex justify-between items-start mb-4">
-                  <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
-                    <Calendar className="h-6 w-6 text-[#664fa3]" />
-                  </div>
-                  <Badge
-                    className={`${
-                      event.published
-                        ? 'bg-[#81B29A] text-white'
-                        : 'bg-gray-400 text-white'
+      ) : events.length > 0 ? (
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          {events.map((event) => (
+            <Card
+              key={event.id}
+              className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-all"
+              data-testid={`event-card-${event.id}`}
+            >
+              {/* Event Header */}
+              <div className="flex justify-between items-start mb-4">
+                <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
+                  <Calendar className="h-6 w-6 text-var(--purple-lavender)" />
+                </div>
+                <Badge
+                  className={`${event.published
+                    ? 'bg-var(--green-light) text-white'
+                    : 'bg-gray-400 text-white'
                     } px-3 py-1 rounded-full`}
-                  >
-                    {event.published ? 'Published' : 'Draft'}
-                  </Badge>
+                >
+                  {event.published ? 'Published' : 'Draft'}
+                </Badge>
+              </div>
+
+              {/* Event Details */}
+              <h3 className="text-xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                {event.title}
+              </h3>
+
+              {event.description && (
+                <p className="text-var(--purple-lavender) mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  {event.description}
+                </p>
+              )}
+
+              <div className="space-y-2 mb-4">
+                <div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Calendar className="h-4 w-4" />
+                  <span>
+                    {new Date(event.start_at).toLocaleDateString()} at{' '}
+                    {new Date(event.start_at).toLocaleTimeString([], {
+                      hour: '2-digit',
+                      minute: '2-digit'
+                    })}
+                  </span>
                 </div>
-
-                {/* Event Details */}
-                <h3 className="text-xl font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
-                  {event.title}
-                </h3>
-
-                {event.description && (
-                  <p className="text-[#664fa3] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    {event.description}
-                  </p>
-                )}
-
-                <div className="space-y-2 mb-4">
-                  <div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    <Calendar className="h-4 w-4" />
-                    <span>
-                      {new Date(event.start_at).toLocaleDateString()} at{' '}
-                      {new Date(event.start_at).toLocaleTimeString([], {
-                        hour: '2-digit',
-                        minute: '2-digit'
-                      })}
-                    </span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    <MapPin className="h-4 w-4" />
-                    <span className="truncate">{event.location}</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    <Users className="h-4 w-4" />
-                    <span>{event.rsvp_count || 0} attending</span>
-                  </div>
+                <div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <MapPin className="h-4 w-4" />
+                  <span className="truncate">{event.location}</span>
                 </div>
+                <div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Users className="h-4 w-4" />
+                  <span>{event.rsvp_count || 0} attending</span>
+                </div>
+              </div>
 
-                {/* Actions */}
-                <div className="space-y-2 pt-4 border-t border-[#ddd8eb]">
-                  {/* Manage Attendance Button */}
+              {/* Actions */}
+              <div className="space-y-2 pt-4 border-t border-var(--neutral-800)">
+                {/* Manage Attendance Button */}
+                <Button
+                  onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
+                  variant="outline"
+                  size="sm"
+                  className="w-full border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
+                  data-testid={`mark-attendance-${event.id}`}
+                >
+                  <Users className="h-4 w-4 mr-2" />
+                  Manage Attendance ({event.rsvp_count || 0} RSVPs)
+                </Button>
+
+                {/* Other Actions */}
+                <div className="flex gap-2">
                   <Button
-                    onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
+                    onClick={() => togglePublish(event)}
                     variant="outline"
                     size="sm"
-                    className="w-full border-[#81B29A] text-[#81B29A] hover:bg-[#81B29A] hover:text-white"
-                    data-testid={`mark-attendance-${event.id}`}
+                    className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
+                    data-testid={`toggle-publish-${event.id}`}
                   >
-                    <Users className="h-4 w-4 mr-2" />
-                    Manage Attendance ({event.rsvp_count || 0} RSVPs)
+                    {event.published ? (
+                      <>
+                        <EyeOff className="h-4 w-4 mr-1" />
+                        Unpublish
+                      </>
+                    ) : (
+                      <>
+                        <Eye className="h-4 w-4 mr-1" />
+                        Publish
+                      </>
+                    )}
+                  </Button>
+                  <Button
+                    onClick={() => handleEdit(event)}
+                    variant="outline"
+                    size="sm"
+                    className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
+                    data-testid={`edit-event-${event.id}`}
+                  >
+                    <Edit className="h-4 w-4" />
+                  </Button>
+                  <Button
+                    onClick={() => handleDelete(event.id)}
+                    variant="outline"
+                    size="sm"
+                    className="border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
+                    data-testid={`delete-event-${event.id}`}
+                  >
+                    <Trash2 className="h-4 w-4" />
                   </Button>
-
-                  {/* Other Actions */}
-                  <div className="flex gap-2">
-                    <Button
-                      onClick={() => togglePublish(event)}
-                      variant="outline"
-                      size="sm"
-                      className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
-                      data-testid={`toggle-publish-${event.id}`}
-                    >
-                      {event.published ? (
-                        <>
-                          <EyeOff className="h-4 w-4 mr-1" />
-                          Unpublish
-                        </>
-                      ) : (
-                        <>
-                          <Eye className="h-4 w-4 mr-1" />
-                          Publish
-                        </>
-                      )}
-                    </Button>
-                    <Button
-                      onClick={() => handleEdit(event)}
-                      variant="outline"
-                      size="sm"
-                      className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
-                      data-testid={`edit-event-${event.id}`}
-                    >
-                      <Edit className="h-4 w-4" />
-                    </Button>
-                    <Button
-                      onClick={() => handleDelete(event.id)}
-                      variant="outline"
-                      size="sm"
-                      className="border-red-500 text-red-500 hover:bg-red-500 hover:text-white"
-                      data-testid={`delete-event-${event.id}`}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                    </Button>
-                  </div>
                 </div>
-              </Card>
-            ))}
-          </div>
-        ) : (
-          <div className="text-center py-20">
-            <Calendar className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
-              No Events Yet
-            </h3>
-            <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              Create your first event to get started!
-            </p>
-            <Button
-              onClick={() => setIsCreateDialogOpen(true)}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"
-            >
-              <Plus className="mr-2 h-5 w-5" />
-              Create Event
-            </Button>
-          </div>
-        )}
+              </div>
+            </Card>
+          ))}
+        </div>
+      ) : (
+        <div className="text-center py-20">
+          <Calendar className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            No Events Yet
+          </h3>
+          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            Create your first event to get started!
+          </p>
+          <Button
+            onClick={() => setIsCreateDialogOpen(true)}
+            className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
+          >
+            <Plus className="mr-2 h-5 w-5" />
+            Create Event
+          </Button>
+        </div>
+      )}
     </>
   );
 };
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
index 6669e59..fb112cb 100644
--- a/src/pages/admin/AdminFinancials.js
+++ b/src/pages/admin/AdminFinancials.js
@@ -147,7 +147,7 @@ const AdminFinancials = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[#664fa3]">Loading financial reports...</p>
+        <p className="text-var(--purple-lavender)">Loading financial reports...</p>
       </div>
     );
   }
@@ -157,17 +157,17 @@ const AdminFinancials = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports Management
           </h1>
-          <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage annual financial reports
           </p>
         </div>
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -178,10 +178,10 @@ const AdminFinancials = () => {
       {/* Reports List */}
       {reports.length === 0 ? (
         <Card className="p-12 text-center">
-          <TrendingUp className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-          <p className="text-[#664fa3] text-lg mb-4">No financial reports yet</p>
+          <TrendingUp className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+          <p className="text-var(--purple-lavender) text-lg mb-4">No financial reports yet</p>
           {hasPermission('financials.create') && (
-            <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
+            <Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Report
             </Button>
@@ -192,23 +192,23 @@ const AdminFinancials = () => {
           {reports.map(report => (
             <Card key={report.id} className="p-6">
               <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-4 rounded-xl text-white min-w-[100px] text-center">
+                <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl text-white min-w-[100px] text-center">
                   <DollarSign className="h-6 w-6 mx-auto mb-1" />
                   <div className="text-2xl font-bold">{report.year}</div>
                 </div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-[#422268] mb-2">
+                  <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
                     {report.title}
                   </h3>
                   <div className="flex items-center gap-3">
-                    <Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
+                    <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
                       {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                     </Badge>
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="text-[#664fa3] hover:text-[#533a82]"
+                      className="text-var(--purple-lavender) hover:text-var(--purple-muted)"
                     >
                       <ExternalLink className="h-4 w-4 mr-1" />
                       View
@@ -222,7 +222,7 @@ const AdminFinancials = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(report)}
-                        className="border-[#664fa3] text-[#664fa3]"
+                        className="border-var(--purple-lavender) text-var(--purple-lavender)"
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -313,12 +313,12 @@ const AdminFinancials = () => {
                     required={!selectedReport}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[#664fa3] mt-1">
+                    <p className="text-sm text-var(--purple-lavender) mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedReport && !uploadedFile && (
-                    <p className="text-sm text-[#664fa3] mt-1">
+                    <p className="text-sm text-var(--purple-lavender) mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -333,7 +333,7 @@ const AdminFinancials = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[#664fa3] mt-1">
+                  <p className="text-sm text-var(--purple-lavender) mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -350,7 +350,7 @@ const AdminFinancials = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[#664fa3] text-white"
+                className="bg-var(--purple-lavender) text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedReport ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminGallery.js b/src/pages/admin/AdminGallery.js
index 173570e..48f23f3 100644
--- a/src/pages/admin/AdminGallery.js
+++ b/src/pages/admin/AdminGallery.js
@@ -153,23 +153,23 @@ const AdminGallery = () => {
     <div className="space-y-6">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Event Gallery Management
         </h1>
-        <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Upload and manage photos for event galleries
         </p>
       </div>
 
       {/* Event Selection */}
-      <Card className="p-6 bg-white border-[#ddd8eb] rounded-xl">
+      <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
         <div className="space-y-4">
           <div>
-            <Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Select Event
             </Label>
             <Select value={selectedEvent || ''} onValueChange={setSelectedEvent}>
-              <SelectTrigger className="border-[#ddd8eb] rounded-xl">
+              <SelectTrigger className="border-var(--neutral-800) rounded-xl">
                 <SelectValue placeholder="Choose an event..." />
               </SelectTrigger>
               <SelectContent>
@@ -184,19 +184,19 @@ const AdminGallery = () => {
 
           {/* Empty State Message */}
           {events.length === 0 && (
-            <div className="mt-4 p-4 bg-[#f1eef9] border-2 border-[#DDD8EB] rounded-xl">
+            <div className="mt-4 p-4 bg-var(--lavender-300) border-2 border-var(--neutral-800) rounded-xl">
               <div className="flex items-start gap-3">
-                <AlertCircle className="h-5 w-5 text-[#664fa3] flex-shrink-0 mt-0.5" />
+                <AlertCircle className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
                 <div className="flex-1">
-                  <h4 className="text-sm font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h4 className="text-sm font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                     No Events Available
                   </h4>
-                  <p className="text-sm text-[#664fa3] mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-var(--purple-lavender) mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You need to create an event before uploading gallery images. Events help organize photos by occasion.
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl text-sm"
+                      className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl"
+                className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -236,7 +236,7 @@ const AdminGallery = () => {
                   </>
                 )}
               </Button>
-              <p className="text-sm text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 You can select multiple images. Max {formatFileSize(maxFileSize)} per image.
               </p>
             </div>
@@ -246,12 +246,12 @@ const AdminGallery = () => {
 
       {/* Gallery Grid */}
       {selectedEvent && (
-        <Card className="p-6 bg-white border-[#ddd8eb] rounded-xl">
+        <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
           <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-[#664fa3] text-white px-3 py-1">
+            <Badge className="bg-var(--purple-lavender) text-white px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>
@@ -260,7 +260,7 @@ const AdminGallery = () => {
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
               {galleryImages.map((image) => (
                 <div key={image.id} className="relative group">
-                  <div className="aspect-square rounded-xl overflow-hidden bg-[#F8F7FB]">
+                  <div className="aspect-square rounded-xl overflow-hidden bg-var(--lavender-500)">
                     <img
                       src={image.image_url}
                       alt={image.caption || 'Gallery image'}
@@ -275,7 +275,7 @@ const AdminGallery = () => {
                         <Button
                           onClick={() => openEditCaption(image)}
                           size="sm"
-                          className="bg-white/90 hover:bg-white text-[#422268] rounded-lg"
+                          className="bg-background/90 hover:bg-background text-var(--purple-ink) rounded-lg"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Edit className="h-4 w-4 mr-1" />
@@ -299,7 +299,7 @@ const AdminGallery = () => {
                   {/* Caption Preview */}
                   {image.caption && (
                     <div className="mt-2">
-                      <p className="text-sm text-[#664fa3] line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-var(--purple-lavender) line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {image.caption}
                       </p>
                     </div>
@@ -307,7 +307,7 @@ const AdminGallery = () => {
 
                   {/* File Size */}
                   <div className="mt-1">
-                    <p className="text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {formatFileSize(image.file_size_bytes)}
                     </p>
                   </div>
@@ -316,11 +316,11 @@ const AdminGallery = () => {
             </div>
           ) : (
             <div className="text-center py-16">
-              <ImageIcon className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-              <h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <ImageIcon className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+              <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Images Yet
               </h3>
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Upload images to create a gallery for this event.
               </p>
             </div>
@@ -330,16 +330,16 @@ const AdminGallery = () => {
 
       {/* Edit Caption Dialog */}
       <Dialog open={!!editingCaption} onOpenChange={() => setEditingCaption(null)}>
-        <DialogContent className="bg-white sm:max-w-[600px]">
+        <DialogContent className="bg-background sm:max-w-[600px]">
           <DialogHeader>
-            <DialogTitle className="text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Edit Image Caption
             </DialogTitle>
           </DialogHeader>
 
           {editingCaption && (
             <div className="space-y-4">
-              <div className="aspect-video rounded-xl overflow-hidden bg-[#F8F7FB]">
+              <div className="aspect-video rounded-xl overflow-hidden bg-var(--lavender-500)">
                 <img
                   src={editingCaption.image_url}
                   alt="Preview"
@@ -348,7 +348,7 @@ const AdminGallery = () => {
               </div>
 
               <div>
-                <Label className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <Label className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Caption
                 </Label>
                 <Textarea
@@ -356,7 +356,7 @@ const AdminGallery = () => {
                   onChange={(e) => setNewCaption(e.target.value)}
                   placeholder="Add a caption for this image..."
                   rows={3}
-                  className="border-[#ddd8eb] rounded-xl mt-2"
+                  className="border-var(--neutral-800) rounded-xl mt-2"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
@@ -367,14 +367,14 @@ const AdminGallery = () => {
             <Button
               onClick={() => setEditingCaption(null)}
               variant="outline"
-              className="border-[#ddd8eb] text-[#664fa3] rounded-xl"
+              className="border-var(--neutral-800) text-var(--purple-lavender) rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Cancel
             </Button>
             <Button
               onClick={handleUpdateCaption}
-              className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl"
+              className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Save Caption
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index be79d52..1464950 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -203,9 +203,9 @@ const AdminMembers = () => {
     const config = {
       pending_email: { label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[#81B29A] text-white' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-var(--green-light) text-white' },
       payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      active: { label: 'Active', className: 'bg-var(--green-light) text-white' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' },
       canceled: { label: 'Canceled', className: 'bg-red-100 text-red-700' },
       expired: { label: 'Expired', className: 'bg-red-500 text-white' },
@@ -234,9 +234,9 @@ const AdminMembers = () => {
       renewalReminders,
       totalReminders,
       lastReminderAt: user.last_email_verification_reminder_at ||
-                      user.last_event_attendance_reminder_at ||
-                      user.last_payment_reminder_at ||
-                      user.last_renewal_reminder_at
+        user.last_event_attendance_reminder_at ||
+        user.last_payment_reminder_at ||
+        user.last_renewal_reminder_at
     };
   };
 
@@ -245,10 +245,10 @@ const AdminMembers = () => {
       <div className="mb-8">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Members Management
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage paying members and their subscriptions.
             </p>
           </div>
@@ -257,7 +257,7 @@ const AdminMembers = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"
+                    className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl h-12 px-6"
                     disabled={exporting}
                   >
                     {exporting ? (
@@ -288,7 +288,7 @@ const AdminMembers = () => {
             {hasPermission('users.import') && (
               <Button
                 onClick={() => setImportDialogOpen(true)}
-                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+                className="bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-xl h-12 px-6"
               >
                 <Upload className="h-5 w-5 mr-2" />
                 Import
@@ -298,7 +298,7 @@ const AdminMembers = () => {
             {hasPermission('users.invite') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"
+                className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Member
@@ -308,7 +308,7 @@ const AdminMembers = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+                className="bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Member
@@ -320,47 +320,47 @@ const AdminMembers = () => {
 
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'payment_pending').length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'inactive').length}
           </p>
         </Card>
       </div>
 
       {/* Filters */}
-      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
             <Input
               placeholder="Search by name or email..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               data-testid="search-members-input"
             />
           </div>
           <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="status-filter-select">
+            <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)" data-testid="status-filter-select">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
             <SelectContent>
@@ -381,32 +381,32 @@ const AdminMembers = () => {
       {/* Members List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
           {filteredUsers.map((user) => (
             <Card
               key={user.id}
-              className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-md transition-shadow"
+              className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-md transition-shadow"
               data-testid={`member-card-${user.id}`}
             >
               <div className="flex justify-between items-start flex-wrap gap-4">
                 <div className="flex items-start gap-4 flex-1">
                   {/* Avatar */}
-                  <div className="h-14 w-14 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold text-lg flex-shrink-0">
+                  <div className="h-14 w-14 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold text-lg flex-shrink-0">
                     {user.first_name?.[0]}{user.last_name?.[0]}
                   </div>
 
                   {/* Info */}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-3 mb-2 flex-wrap">
-                      <h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {user.first_name} {user.last_name}
                       </h3>
                       {getStatusBadge(user.status)}
                     </div>
-                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       <p>Email: {user.email}</p>
                       <p>Phone: {user.phone}</p>
                       <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -420,19 +420,19 @@ const AdminMembers = () => {
                       const reminderInfo = getReminderInfo(user);
                       if (reminderInfo.totalReminders > 0) {
                         return (
-                          <div className="mt-4 p-3 bg-[#F8F7FB] rounded-lg border border-[#ddd8eb]">
+                          <div className="mt-4 p-3 bg-var(--lavender-500) rounded-lg border border-var(--neutral-800)">
                             <div className="flex items-center gap-2 mb-2">
-                              <AlertCircle className="h-4 w-4 text-[#ff9e77]" />
-                              <span className="text-sm font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              <AlertCircle className="h-4 w-4 text-var(--orange-light)" />
+                              <span className="text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                                 {reminderInfo.totalReminders} reminder{reminderInfo.totalReminders !== 1 ? 's' : ''} sent
                                 {reminderInfo.totalReminders >= 3 && (
-                                  <Badge className="ml-2 bg-[#ff9e77] text-white px-2 py-0.5 rounded-full text-xs">
+                                  <Badge className="ml-2 bg-var(--orange-light) text-white px-2 py-0.5 rounded-full text-xs">
                                     Needs attention
                                   </Badge>
                                 )}
                               </span>
                             </div>
-                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {reminderInfo.emailReminders > 0 && (
                                 <p>
                                   <Mail className="inline h-3 w-3 mr-1" />
@@ -459,7 +459,7 @@ const AdminMembers = () => {
                               )}
                             </div>
                             {reminderInfo.lastReminderAt && (
-                              <p className="mt-2 text-xs text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="mt-2 text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 Last reminder: {new Date(reminderInfo.lastReminderAt).toLocaleDateString()} at {new Date(reminderInfo.lastReminderAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                               </p>
                             )}
@@ -478,7 +478,7 @@ const AdminMembers = () => {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white"
+                        className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
                       >
                         <Eye className="h-4 w-4 mr-1" />
                         View Profile
@@ -490,7 +490,7 @@ const AdminMembers = () => {
                       <Button
                         onClick={() => handleActivatePayment(user)}
                         size="sm"
-                        className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
+                        className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
                       >
                         <CheckCircle className="h-4 w-4 mr-1" />
                         Activate Payment
@@ -500,7 +500,7 @@ const AdminMembers = () => {
 
                   {/* Status Management */}
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-[#664fa3] whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <span className="text-sm text-var(--purple-lavender) whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Change Status:
                     </span>
                     <Select
@@ -508,7 +508,7 @@ const AdminMembers = () => {
                       onValueChange={(newStatus) => handleStatusChangeRequest(user.id, user.status, newStatus, user)}
                       disabled={statusChanging === user.id}
                     >
-                      <SelectTrigger className="w-[180px] h-9 border-[#ddd8eb]">
+                      <SelectTrigger className="w-[180px] h-9 border-var(--neutral-800)">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -527,11 +527,11 @@ const AdminMembers = () => {
         </div>
       ) : (
         <div className="text-center py-20">
-          <Users className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Users className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Members Found
           </h3>
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || statusFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'No members yet'}
diff --git a/src/pages/admin/AdminNewsletters.js b/src/pages/admin/AdminNewsletters.js
index 64ac9f5..18b42aa 100644
--- a/src/pages/admin/AdminNewsletters.js
+++ b/src/pages/admin/AdminNewsletters.js
@@ -175,7 +175,7 @@ const AdminNewsletters = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[#664fa3]">Loading newsletters...</p>
+        <p className="text-var(--purple-lavender)">Loading newsletters...</p>
       </div>
     );
   }
@@ -185,17 +185,17 @@ const AdminNewsletters = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             Newsletter Management
           </h1>
-          <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage newsletter archive
           </p>
         </div>
         {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Newsletter
@@ -206,10 +206,10 @@ const AdminNewsletters = () => {
       {/* Newsletters List */}
       {newsletters.length === 0 ? (
         <Card className="p-12 text-center">
-          <FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-          <p className="text-[#664fa3] text-lg mb-4">No newsletters yet</p>
+          <FileText className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+          <p className="text-var(--purple-lavender) text-lg mb-4">No newsletters yet</p>
           {hasPermission('newsletters.create') && (
-            <Button onClick={handleCreate} className="bg-[#664fa3] text-white">
+            <Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Newsletter
             </Button>
@@ -219,7 +219,7 @@ const AdminNewsletters = () => {
         <div className="space-y-6">
           {sortedYears.map(year => (
             <div key={year}>
-              <h2 className="text-xl font-semibold text-[#422268] mb-4 flex items-center gap-2">
+              <h2 className="text-xl font-semibold text-var(--purple-ink) mb-4 flex items-center gap-2">
                 <Calendar className="h-5 w-5" />
                 {year}
               </h2>
@@ -228,24 +228,24 @@ const AdminNewsletters = () => {
                   <Card key={newsletter.id} className="p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <h3 className="text-lg font-semibold text-[#422268] mb-2">
+                        <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
                           {newsletter.title}
                         </h3>
                         {newsletter.description && (
-                          <p className="text-[#664fa3] mb-3">{newsletter.description}</p>
+                          <p className="text-var(--purple-lavender) mb-3">{newsletter.description}</p>
                         )}
                         <div className="flex items-center gap-3">
-                          <Badge className="bg-[#DDD8EB] text-[#422268]">
+                          <Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
                             {formatDate(newsletter.published_date)}
                           </Badge>
-                          <Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
+                          <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
                             {newsletter.document_type === 'upload' ? 'PDF Upload' : 'Link'}
                           </Badge>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => window.open(newsletter.document_url, '_blank')}
-                            className="text-[#664fa3] hover:text-[#533a82]"
+                            className="text-var(--purple-lavender) hover:text-var(--purple-muted)"
                           >
                             <ExternalLink className="h-4 w-4 mr-1" />
                             View
@@ -259,7 +259,7 @@ const AdminNewsletters = () => {
                               variant="outline"
                               size="sm"
                               onClick={() => handleEdit(newsletter)}
-                              className="border-[#664fa3] text-[#664fa3]"
+                              className="border-var(--purple-lavender) text-var(--purple-lavender)"
                             >
                               <Edit className="h-4 w-4" />
                             </Button>
@@ -361,12 +361,12 @@ const AdminNewsletters = () => {
                     required={!selectedNewsletter}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[#664fa3] mt-1">
+                    <p className="text-sm text-var(--purple-lavender) mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedNewsletter && !uploadedFile && (
-                    <p className="text-sm text-[#664fa3] mt-1">
+                    <p className="text-sm text-var(--purple-lavender) mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -381,7 +381,7 @@ const AdminNewsletters = () => {
                     placeholder="https://docs.google.com/document/d/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[#664fa3] mt-1">
+                  <p className="text-sm text-var(--purple-lavender) mt-1">
                     Paste the shareable link to your document (Google Docs, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -398,7 +398,7 @@ const AdminNewsletters = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[#664fa3] text-white"
+                className="bg-var(--purple-lavender) text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedNewsletter ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminPermissions.js b/src/pages/admin/AdminPermissions.js
index 3d048de..6b010ad 100644
--- a/src/pages/admin/AdminPermissions.js
+++ b/src/pages/admin/AdminPermissions.js
@@ -187,8 +187,8 @@ const AdminPermissions = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      admin: { label: 'Admin', color: 'bg-[#81B29A]', icon: Shield },
-      member: { label: 'Member', color: 'bg-[#664fa3]', icon: Shield },
+      admin: { label: 'Admin', color: 'bg-var(--green-light)', icon: Shield },
+      member: { label: 'Member', color: 'bg-var(--purple-lavender)', icon: Shield },
       guest: { label: 'Guest', color: 'bg-gray-400', icon: Shield }
     };
 
@@ -206,7 +206,7 @@ const AdminPermissions = () => {
   if (loading) {
     return (
       <div className="text-center py-20">
-        <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading permissions...
         </p>
       </div>
@@ -217,10 +217,10 @@ const AdminPermissions = () => {
     return (
       <div className="text-center py-20">
         <Lock className="h-20 w-20 text-red-500 mx-auto mb-6" />
-        <h2 className="text-3xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Access Denied
         </h2>
-        <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           You don't have permission to manage role permissions.
         </p>
         <p className="text-sm text-gray-500 mt-2">
@@ -233,10 +233,10 @@ const AdminPermissions = () => {
   return (
     <>
       <div className="mb-8">
-        <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Permission Management
         </h1>
-        <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Configure granular permissions for each role. Superadmin always has all permissions.
         </p>
       </div>
@@ -259,27 +259,27 @@ const AdminPermissions = () => {
           <TabsContent key={role} value={role}>
             {/* Stats */}
             <div className="grid md:grid-cols-3 gap-4 mb-8">
-              <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-                <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Total Permissions
                 </p>
-                <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {permissions.length}
                 </p>
               </Card>
-              <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-                <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Assigned
                 </p>
-                <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {selectedPermissions[role].length}
                 </p>
               </Card>
-              <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-                <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Modules
                 </p>
-                <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {Object.keys(groupedPermissions).length}
                 </p>
               </Card>
@@ -288,10 +288,10 @@ const AdminPermissions = () => {
             {/* Permissions by Module */}
             <div className="space-y-4">
               {Object.entries(groupedPermissions).map(([module, perms]) => (
-                <Card key={module} className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
+                <Card key={module} className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
                   {/* Module Header */}
                   <div
-                    className="p-6 bg-gradient-to-r from-[#DDD8EB] to-white cursor-pointer hover:from-[#C5BFD9] transition-colors"
+                    className="p-6 bg-gradient-to-r from-var(--neutral-800) to-white cursor-pointer hover:from-var(--neutral-600) transition-colors"
                     onClick={() => toggleModuleExpansion(module)}
                   >
                     <div className="flex items-center justify-between">
@@ -300,21 +300,21 @@ const AdminPermissions = () => {
                           checked={isModuleFullySelected(role, module)}
                           onCheckedChange={() => toggleModule(role, module)}
                           onClick={(e) => e.stopPropagation()}
-                          className="h-6 w-6 border-2 border-[#664fa3] data-[state=checked]:bg-[#664fa3]"
+                          className="h-6 w-6 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
                         />
                         <div>
-                          <h3 className="text-xl font-semibold text-[#422268] capitalize" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h3 className="text-xl font-semibold text-var(--purple-ink) capitalize" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {module}
                           </h3>
-                          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {getModuleProgress(role, module)} permissions
                           </p>
                         </div>
                       </div>
                       {expandedModules[module] ? (
-                        <ChevronUp className="h-6 w-6 text-[#664fa3]" />
+                        <ChevronUp className="h-6 w-6 text-var(--purple-lavender)" />
                       ) : (
-                        <ChevronDown className="h-6 w-6 text-[#664fa3]" />
+                        <ChevronDown className="h-6 w-6 text-var(--purple-lavender)" />
                       )}
                     </div>
                   </div>
@@ -326,18 +326,18 @@ const AdminPermissions = () => {
                         {perms.map(perm => (
                           <div
                             key={perm.code}
-                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-[#F9F8FB] transition-colors border border-transparent hover:border-[#ddd8eb]"
+                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-var(--lavender-700) transition-colors border border-transparent hover:border-var(--neutral-800)"
                           >
                             <Checkbox
                               checked={selectedPermissions[role].includes(perm.code)}
                               onCheckedChange={() => togglePermission(role, perm.code)}
-                              className="mt-1 h-5 w-5 border-2 border-[#664fa3] data-[state=checked]:bg-[#664fa3]"
+                              className="mt-1 h-5 w-5 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
                             />
                             <div className="flex-1">
-                              <p className="font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              <p className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                                 {perm.name}
                               </p>
-                              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 {perm.description}
                               </p>
                               <p className="text-xs text-gray-400 mt-1 font-mono">
@@ -357,7 +357,7 @@ const AdminPermissions = () => {
       </Tabs>
 
       {/* Superadmin Note */}
-      <Card className="p-6 bg-gradient-to-r from-[#664fa3] to-[#422268] rounded-2xl border-none mb-8">
+      <Card className="p-6 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-ink) rounded-2xl border-none mb-8">
         <div className="flex items-start gap-4">
           <Lock className="h-6 w-6 text-white flex-shrink-0 mt-1" />
           <div className="text-white">
@@ -377,7 +377,7 @@ const AdminPermissions = () => {
           <Button
             onClick={handleSave}
             disabled={saving}
-            className="h-14 px-8 bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-full shadow-lg text-lg font-semibold"
+            className="h-14 px-8 bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-full shadow-lg text-lg font-semibold"
           >
             <Save className="h-5 w-5 mr-2" />
             {saving ? 'Saving...' : 'Save Changes'}
@@ -389,10 +389,10 @@ const AdminPermissions = () => {
       <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
         <AlertDialogContent className="rounded-2xl">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <AlertDialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Confirm Permission Changes
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to update permissions for <span className="font-semibold capitalize">{selectedRole}</span>?
               This will immediately affect all users with this role.
             </AlertDialogDescription>
@@ -401,7 +401,7 @@ const AdminPermissions = () => {
             <AlertDialogCancel className="rounded-xl">Cancel</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmSave}
-              className="rounded-xl bg-[#81B29A] hover:bg-[#6DA085] text-white"
+              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
             >
               Confirm
             </AlertDialogAction>
diff --git a/src/pages/admin/AdminPlans.js b/src/pages/admin/AdminPlans.js
index 439f75a..9d68f48 100644
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -131,17 +131,17 @@ const AdminPlans = () => {
       <div className="mb-8">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Subscription Plans
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage membership plans and pricing.
             </p>
           </div>
           {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-6"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
             >
               <Plus className="h-4 w-4 mr-2" />
               Create Plan
@@ -152,27 +152,27 @@ const AdminPlans = () => {
 
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.filter(p => p.active).length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {formatPrice(
               plans.reduce((sum, p) => {
                 const annualPrice = p.billing_cycle === 'yearly'
@@ -186,19 +186,19 @@ const AdminPlans = () => {
       </div>
 
       {/* Filters */}
-      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
             <Input
               placeholder="Search plans..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
           <Select value={activeFilter} onValueChange={setActiveFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]">
+            <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
             <SelectContent>
@@ -213,56 +213,54 @@ const AdminPlans = () => {
       {/* Plans Grid */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
         </div>
       ) : filteredPlans.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {filteredPlans.map((plan) => (
             <Card
               key={plan.id}
-              className={`p-6 bg-white rounded-2xl border-2 transition-all hover:shadow-lg ${
-                plan.active
-                  ? 'border-[#ddd8eb] hover:border-[#664fa3]'
-                  : 'border-gray-400 opacity-60'
-              }`}
+              className={`p-6 bg-background rounded-2xl border-2 transition-all hover:shadow-lg ${plan.active
+                ? 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
+                : 'border-gray-400 opacity-60'
+                }`}
             >
               {/* Header with badges */}
               <div className="flex flex-wrap gap-2 mb-4">
                 <Badge
-                  className={`${
-                    plan.active
-                      ? 'bg-[#81B29A] text-white'
-                      : 'bg-gray-400 text-white'
-                  }`}
+                  className={`${plan.active
+                    ? 'bg-var(--green-light) text-white'
+                    : 'bg-gray-400 text-white'
+                    }`}
                 >
                   {plan.active ? 'Active' : 'Inactive'}
                 </Badge>
                 {plan.subscriber_count > 0 && (
-                  <Badge className="bg-[#DDD8EB] text-[#422268]">
+                  <Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
                     <Users className="h-3 w-3 mr-1" />
                     {plan.subscriber_count}
                   </Badge>
                 )}
                 {plan.custom_cycle_enabled && (
-                  <Badge className="bg-[#664fa3] text-white">
+                  <Badge className="bg-var(--purple-lavender) text-white">
                     Custom Dates
                   </Badge>
                 )}
                 {plan.allow_donation && (
-                  <Badge className="bg-[#ff9e77] text-white">
+                  <Badge className="bg-var(--orange-light) text-white">
                     Donations Enabled
                   </Badge>
                 )}
               </div>
 
               {/* Plan Name */}
-              <h3 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {plan.name}
               </h3>
 
               {/* Description */}
               {plan.description && (
-                <p className="text-sm text-[#664fa3] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {plan.description}
                 </p>
               )}
@@ -270,20 +268,20 @@ const AdminPlans = () => {
               {/* Price */}
               <div className="mb-4">
                 <div className="flex items-baseline gap-2">
-                  <div className="text-3xl font-bold text-[#ff9e77]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <div className="text-3xl font-bold text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {formatPrice(plan.minimum_price_cents || plan.price_cents)}
                   </div>
                   {plan.suggested_price_cents && plan.suggested_price_cents > plan.minimum_price_cents && (
-                    <div className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       (Suggested: {formatPrice(plan.suggested_price_cents)})
                     </div>
                   )}
                 </div>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {getBillingCycleLabel(plan.billing_cycle)}
                 </p>
                 {plan.custom_cycle_enabled && (
-                  <p className="text-xs text-[#664fa3] font-mono mt-1">
+                  <p className="text-xs text-var(--purple-lavender) font-mono mt-1">
                     {formatCustomCycleDates(plan)}
                   </p>
                 )}
@@ -291,12 +289,12 @@ const AdminPlans = () => {
 
               {/* Actions */}
               {hasPermission('subscriptions.plans') && (
-                <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[#ddd8eb]">
+                <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-var(--neutral-800)">
                   <Button
                     onClick={() => handleEditPlan(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-[#664fa3] text-[#664fa3] hover:bg-[#664fa3] hover:text-white rounded-full"
+                    className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
                   >
                     <Edit className="h-4 w-4 mr-1" />
                     Edit
@@ -316,7 +314,7 @@ const AdminPlans = () => {
 
               {/* Warning for plans with subscribers */}
               {plan.subscriber_count > 0 && (
-                <p className="text-xs text-[#664fa3] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-var(--purple-lavender) mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Cannot delete plan with active subscribers
                 </p>
               )}
@@ -325,11 +323,11 @@ const AdminPlans = () => {
         </div>
       ) : (
         <div className="text-center py-20">
-          <CreditCard className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Plans Found
           </h3>
-          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || activeFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'Create your first subscription plan to get started'}
@@ -337,7 +335,7 @@ const AdminPlans = () => {
           {!searchQuery && activeFilter === 'all' && hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-white rounded-full px-8"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
             >
               <Plus className="h-4 w-4 mr-2" />
               Create First Plan
@@ -357,11 +355,11 @@ const AdminPlans = () => {
       {/* Delete Confirmation Dialog */}
       {deleteDialogOpen && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <Card className="p-6 sm:p-8 bg-white rounded-2xl max-w-md w-full">
-            <h2 className="text-xl sm:text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-6 sm:p-8 bg-background rounded-2xl max-w-md w-full">
+            <h2 className="text-xl sm:text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Delete Plan
             </h2>
-            <p className="text-sm sm:text-base text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm sm:text-base text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to delete "{planToDelete?.name}"? This action
               will deactivate the plan and it won't be available for new subscriptions.
             </p>
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index 7e90aa0..72f51f1 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -99,9 +99,9 @@ const AdminStaff = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[#664fa3] text-white' },
-      admin: { label: 'Admin', className: 'bg-[#81B29A] text-white' },
-      moderator: { label: 'Moderator', className: 'bg-[#DDD8EB] text-[#422268]' },
+      superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
+      admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
+      moderator: { label: 'Moderator', className: 'bg-var(--neutral-800) text-var(--purple-ink)' },
       staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
       media: { label: 'Media', className: 'bg-gray-400 text-white' }
     };
@@ -117,7 +117,7 @@ const AdminStaff = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      active: { label: 'Active', className: 'bg-[#81B29A] text-white' },
+      active: { label: 'Active', className: 'bg-var(--green-light) text-white' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
     };
 
@@ -134,10 +134,10 @@ const AdminStaff = () => {
       <div className="mb-8">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Staff Management
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage internal team members and their roles.
             </p>
           </div>
@@ -145,7 +145,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl h-12 px-6"
+                className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[#81B29A] hover:bg-[#6DA085] text-white rounded-xl h-12 px-6"
+                className="bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff
@@ -166,27 +166,27 @@ const AdminStaff = () => {
 
       {/* Stats */}
       <div className="grid md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.role === 'moderator').length}
           </p>
         </Card>
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb]">
-          <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
         </Card>
@@ -207,20 +207,20 @@ const AdminStaff = () => {
 
         <TabsContent value="staff-list">
           {/* Filters */}
-          <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+          <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
             <div className="grid md:grid-cols-2 gap-4">
               <div className="relative">
-                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
                 <Input
                   placeholder="Search by name or email..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                   data-testid="search-staff-input"
                 />
               </div>
               <Select value={roleFilter} onValueChange={setRoleFilter}>
-                <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]" data-testid="role-filter-select">
+                <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)" data-testid="role-filter-select">
                   <SelectValue placeholder="Filter by role" />
                 </SelectTrigger>
                 <SelectContent>
@@ -238,33 +238,33 @@ const AdminStaff = () => {
           {/* Staff List */}
           {loading ? (
             <div className="text-center py-20">
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
             </div>
           ) : filteredUsers.length > 0 ? (
             <div className="space-y-4">
               {filteredUsers.map((user) => (
                 <Card
                   key={user.id}
-                  className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-md transition-shadow"
+                  className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-md transition-shadow"
                   data-testid={`staff-card-${user.id}`}
                 >
                   <div className="flex justify-between items-start flex-wrap gap-4">
                     <div className="flex items-start gap-4 flex-1">
                       {/* Avatar */}
-                      <div className="h-14 w-14 rounded-full bg-[#DDD8EB] flex items-center justify-center text-[#422268] font-semibold text-lg flex-shrink-0">
+                      <div className="h-14 w-14 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold text-lg flex-shrink-0">
                         {user.first_name?.[0]}{user.last_name?.[0]}
                       </div>
 
                       {/* Info */}
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-3 mb-2 flex-wrap">
-                          <h3 className="text-xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h3 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {user.first_name} {user.last_name}
                           </h3>
                           {getRoleBadge(user.role)}
                           {getStatusBadge(user.status)}
                         </div>
-                        <div className="grid md:grid-cols-2 gap-2 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid md:grid-cols-2 gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone}</p>
                           <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -280,7 +280,7 @@ const AdminStaff = () => {
                       <Button
                         onClick={() => navigate(`/admin/users/${user.id}`)}
                         variant="outline"
-                        className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-4 py-2"
+                        className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-4 py-2"
                       >
                         <Edit className="h-4 w-4 mr-2" />
                         Manage
@@ -290,11 +290,10 @@ const AdminStaff = () => {
                         <Button
                           onClick={() => handleToggleStatus(user.id, user.status)}
                           variant="outline"
-                          className={`border-2 rounded-full px-4 py-2 ${
-                            user.status === 'active'
-                              ? 'border-orange-500 text-orange-600 hover:bg-orange-50'
-                              : 'border-green-500 text-green-600 hover:bg-green-50'
-                          }`}
+                          className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
+                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50'
+                            : 'border-green-500 text-green-600 hover:bg-green-50'
+                            }`}
                         >
                           {user.status === 'active' ? (
                             <>
@@ -327,11 +326,11 @@ const AdminStaff = () => {
             </div>
           ) : (
             <div className="text-center py-20">
-              <UserCog className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-              <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <UserCog className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Staff Found
               </h3>
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {searchQuery || roleFilter !== 'all'
                   ? 'Try adjusting your filters'
                   : 'No staff members yet'}
diff --git a/src/pages/admin/AdminSubscriptions.js b/src/pages/admin/AdminSubscriptions.js
index 2f99935..6d2366a 100644
--- a/src/pages/admin/AdminSubscriptions.js
+++ b/src/pages/admin/AdminSubscriptions.js
@@ -277,7 +277,7 @@ Proceed with activation?`;
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-[#664fa3]" />
+        <Loader2 className="h-12 w-12 animate-spin text-var(--purple-lavender)" />
       </div>
     );
   }
@@ -286,93 +286,93 @@ Proceed with activation?`;
     <div className="space-y-8">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
           Subscription Management
         </h1>
-        <p className="text-[#664fa3] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           View and manage all member subscriptions
         </p>
       </div>
 
       {/* Stats Cards */}
       <div className="grid md:grid-cols-4 gap-6">
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Subscriptions
               </p>
-              <p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.total || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#DDD8EB]/20 rounded-full">
-              <CreditCard className="h-6 w-6 text-[#664fa3]" />
+            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
+              <CreditCard className="h-6 w-6 text-var(--purple-lavender)" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Active Members
               </p>
-              <p className="text-3xl font-bold text-[#81B29A] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--green-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.active || 0}
               </p>
             </div>
-            <div className="p-3 bg-[#81B29A]/10 rounded-full">
-              <TrendingUp className="h-6 w-6 text-[#81B29A]" />
+            <div className="p-3 bg-var(--green-light)/10 rounded-full">
+              <TrendingUp className="h-6 w-6 text-var(--green-light)" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Revenue
               </p>
-              <p className="text-3xl font-bold text-[#422268] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {formatPrice(stats.total_revenue || 0)}
               </p>
             </div>
-            <div className="p-3 bg-[#DDD8EB]/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-[#664fa3]" />
+            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
+              <DollarSign className="h-6 w-6 text-var(--purple-lavender)" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
-              <p className="text-3xl font-bold text-[#ff9e77] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-var(--orange-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {formatPrice(stats.total_donations || 0)}
               </p>
             </div>
-            <div className="p-3 bg-[#ff9e77]/10 rounded-full">
-              <Heart className="h-6 w-6 text-[#ff9e77]" />
+            <div className="p-3 bg-var(--orange-light)/10 rounded-full">
+              <Heart className="h-6 w-6 text-var(--orange-light)" />
             </div>
           </div>
         </Card>
       </div>
 
       {/* Search & Filter Bar */}
-      <Card className="p-6 bg-white rounded-2xl border-2 border-[#ddd8eb]">
+      <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
         <div className="grid md:grid-cols-3 gap-4">
           {/* Search */}
           <div className="md:col-span-1">
             <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
               <Input
                 placeholder="Search by name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="pl-10 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
           </div>
@@ -380,7 +380,7 @@ Proceed with activation?`;
           {/* Status Filter */}
           <div>
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                 <SelectValue placeholder="All Statuses" />
               </SelectTrigger>
               <SelectContent>
@@ -395,7 +395,7 @@ Proceed with activation?`;
           {/* Plan Filter */}
           <div>
             <Select value={planFilter} onValueChange={setPlanFilter}>
-              <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                 <SelectValue placeholder="All Plans" />
               </SelectTrigger>
               <SelectContent>
@@ -409,7 +409,7 @@ Proceed with activation?`;
         </div>
 
         <div className="mt-4 flex items-center justify-between">
-          <div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
           </div>
 
@@ -419,26 +419,26 @@ Proceed with activation?`;
               <DropdownMenuTrigger asChild>
                 <Button
                   disabled={exporting}
-                  className="bg-[#81B29A] text-white hover:bg-[#6a9680] rounded-full px-6 py-2 flex items-center gap-2"
+                  className="bg-var(--green-light) text-white hover:bg-var(--green-soft) rounded-full px-6 py-2 flex items-center gap-2"
                 >
                   <Download className="h-4 w-4" />
                   {exporting ? 'Exporting...' : 'Export'}
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56 bg-white rounded-xl border-2 border-[#ddd8eb] shadow-lg">
+              <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-var(--neutral-800) shadow-lg">
                 <DropdownMenuItem
                   onClick={() => handleExport('all')}
-                  className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                  className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
                 >
-                  <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                  <span className="text-[#422268]">Export All Subscriptions</span>
+                  <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
+                  <span className="text-var(--purple-ink)">Export All Subscriptions</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => handleExport('current')}
-                  className="cursor-pointer hover:bg-[#f1eef9] rounded-lg p-3"
+                  className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
                 >
-                  <FileDown className="h-4 w-4 mr-2 text-[#664fa3]" />
-                  <span className="text-[#422268]">Export Current View</span>
+                  <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
+                  <span className="text-var(--purple-ink)">Export Current View</span>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -447,20 +447,20 @@ Proceed with activation?`;
       </Card>
 
       {/* Subscriptions Table */}
-      <Card className="bg-white rounded-2xl border-2 border-[#ddd8eb] overflow-hidden">
+      <Card className="bg-background rounded-2xl border-2 border-var(--neutral-800) overflow-hidden">
         {/* Mobile Card View */}
         <div className="md:hidden p-4 space-y-4">
           {filteredSubscriptions.length > 0 ? (
             filteredSubscriptions.map((sub) => (
-              <Card key={sub.id} className="p-4 border border-[#ddd8eb] bg-[#f9f5ff]/30">
+              <Card key={sub.id} className="p-4 border border-var(--neutral-800) bg-var(--lavender-400)/30">
                 <div className="space-y-3">
                   {/* Member Info */}
-                  <div className="flex justify-between items-start border-b border-[#ddd8eb] pb-3">
+                  <div className="flex justify-between items-start border-b border-var(--neutral-800) pb-3">
                     <div className="flex-1">
-                      <p className="font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
                       </p>
-                      <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.user.email}
                       </p>
                     </div>
@@ -470,13 +470,13 @@ Proceed with activation?`;
                   {/* Plan & Period */}
                   <div className="grid grid-cols-2 gap-3 text-sm">
                     <div>
-                      <p className="text-xs text-[#664fa3] mb-1">Plan</p>
-                      <p className="font-medium text-[#422268]">{sub.plan.name}</p>
-                      <p className="text-xs text-[#664fa3]">{sub.plan.billing_cycle}</p>
+                      <p className="text-xs text-var(--purple-lavender) mb-1">Plan</p>
+                      <p className="font-medium text-var(--purple-ink)">{sub.plan.name}</p>
+                      <p className="text-xs text-var(--purple-lavender)">{sub.plan.billing_cycle}</p>
                     </div>
                     <div>
-                      <p className="text-xs text-[#664fa3] mb-1">Period</p>
-                      <p className="text-[#422268]">
+                      <p className="text-xs text-var(--purple-lavender) mb-1">Period</p>
+                      <p className="text-var(--purple-ink)">
                         {new Date(sub.current_period_start).toLocaleDateString()} -
                         {new Date(sub.current_period_end).toLocaleDateString()}
                       </p>
@@ -484,22 +484,22 @@ Proceed with activation?`;
                   </div>
 
                   {/* Pricing */}
-                  <div className="grid grid-cols-3 gap-2 text-sm bg-white/50 p-3 rounded">
+                  <div className="grid grid-cols-3 gap-2 text-sm bg-background/50 p-3 rounded">
                     <div>
-                      <p className="text-xs text-[#664fa3] mb-1">Base Fee</p>
-                      <p className="font-medium text-[#422268]">
+                      <p className="text-xs text-var(--purple-lavender) mb-1">Base Fee</p>
+                      <p className="font-medium text-var(--purple-ink)">
                         ${(sub.base_fee_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs text-[#664fa3] mb-1">Donation</p>
-                      <p className="font-medium text-[#422268]">
+                      <p className="text-xs text-var(--purple-lavender) mb-1">Donation</p>
+                      <p className="font-medium text-var(--purple-ink)">
                         ${(sub.donation_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs text-[#664fa3] mb-1">Total</p>
-                      <p className="font-semibold text-[#422268]">
+                      <p className="text-xs text-var(--purple-lavender) mb-1">Total</p>
+                      <p className="font-semibold text-var(--purple-ink)">
                         ${(sub.total_cents / 100).toFixed(2)}
                       </p>
                     </div>
@@ -512,7 +512,7 @@ Proceed with activation?`;
                         size="sm"
                         variant="outline"
                         onClick={() => handleEdit(sub)}
-                        className="flex-1 text-[#664fa3] hover:bg-[#DDD8EB]"
+                        className="flex-1 text-var(--purple-lavender) hover:bg-var(--neutral-800)"
                       >
                         <Edit className="h-4 w-4 mr-2" />
                         Edit
@@ -534,7 +534,7 @@ Proceed with activation?`;
               </Card>
             ))
           ) : (
-            <div className="p-12 text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="p-12 text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No subscriptions found
             </div>
           )}
@@ -544,29 +544,29 @@ Proceed with activation?`;
         <div className="hidden md:block overflow-x-auto">
           <table className="w-full">
             <thead>
-              <tr className="bg-[#DDD8EB]/20 border-b border-[#ddd8eb]">
-                <th className="text-left p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <tr className="bg-var(--neutral-800)/20 border-b border-var(--neutral-800)">
+                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Member
                 </th>
-                <th className="text-left p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Plan
                 </th>
-                <th className="text-left p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Status
                 </th>
-                <th className="text-left p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Period
                 </th>
-                <th className="text-right p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Base Fee
                 </th>
-                <th className="text-right p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Donation
                 </th>
-                <th className="text-right p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Total
                 </th>
-                <th className="text-center p-4 text-[#422268] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-center p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Actions
                 </th>
               </tr>
@@ -574,20 +574,20 @@ Proceed with activation?`;
             <tbody>
               {filteredSubscriptions.length > 0 ? (
                 filteredSubscriptions.map((sub) => (
-                  <tr key={sub.id} className="border-b border-[#ddd8eb] hover:bg-[#f9f5ff] transition-colors">
+                  <tr key={sub.id} className="border-b border-var(--neutral-800) hover:bg-var(--lavender-400) transition-colors">
                     <td className="p-4">
-                      <div className="font-medium text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <div className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
                       </div>
-                      <div className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.user.email}
                       </div>
                     </td>
                     <td className="p-4">
-                      <div className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.plan.name}
                       </div>
-                      <div className="text-xs text-[#664fa3]">
+                      <div className="text-xs text-var(--purple-lavender)">
                         {sub.plan.billing_cycle}
                       </div>
                     </td>
@@ -597,18 +597,18 @@ Proceed with activation?`;
                       </Badge>
                     </td>
                     <td className="p-4">
-                      <div className="text-sm text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         <div>{formatDate(sub.start_date)}</div>
-                        <div className="text-xs text-[#664fa3]">to {formatDate(sub.end_date)}</div>
+                        <div className="text-xs text-var(--purple-lavender)">to {formatDate(sub.end_date)}</div>
                       </div>
                     </td>
-                    <td className="p-4 text-right text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <td className="p-4 text-right text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(sub.base_subscription_cents || 0)}
                     </td>
-                    <td className="p-4 text-right text-[#ff9e77]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <td className="p-4 text-right text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(sub.donation_cents || 0)}
                     </td>
-                    <td className="p-4 text-right font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <td className="p-4 text-right font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(sub.amount_paid_cents || 0)}
                     </td>
                     <td className="p-4">
@@ -618,7 +618,7 @@ Proceed with activation?`;
                             size="sm"
                             variant="outline"
                             onClick={() => handleEdit(sub)}
-                            className="text-[#664fa3] hover:bg-[#DDD8EB]"
+                            className="text-var(--purple-lavender) hover:bg-var(--neutral-800)"
                           >
                             <Edit className="h-4 w-4" />
                           </Button>
@@ -639,7 +639,7 @@ Proceed with activation?`;
                 ))
               ) : (
                 <tr>
-                  <td colSpan="8" className="p-12 text-center text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <td colSpan="8" className="p-12 text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     No subscriptions found
                   </td>
                 </tr>
@@ -651,12 +651,12 @@ Proceed with activation?`;
 
       {/* Edit Subscription Dialog */}
       <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
-        <DialogContent className="sm:max-w-[500px] bg-white rounded-2xl">
+        <DialogContent className="sm:max-w-[500px] bg-background rounded-2xl">
           <DialogHeader>
-            <DialogTitle className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               Edit Subscription
             </DialogTitle>
-            <DialogDescription className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Update subscription status or end date for {selectedSubscription?.user.first_name} {selectedSubscription?.user.last_name}
             </DialogDescription>
           </DialogHeader>
@@ -664,14 +664,14 @@ Proceed with activation?`;
           <div className="space-y-6 py-4">
             {/* Status */}
             <div className="space-y-2">
-              <Label htmlFor="status" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Label htmlFor="status" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Status
               </Label>
               <Select
                 value={editFormData.status}
                 onValueChange={(value) => setEditFormData({ ...editFormData, status: value })}
               >
-                <SelectTrigger className="rounded-xl border-2 border-[#ddd8eb]">
+                <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
                   <SelectValue placeholder="Select status" />
                 </SelectTrigger>
                 <SelectContent>
@@ -683,13 +683,12 @@ Proceed with activation?`;
 
               {/* Warning Box - Show when status is different */}
               {selectedSubscription && editFormData.status !== selectedSubscription.status && (
-                <div className={`mt-3 p-4 rounded-xl border-2 ${
-                  editFormData.status === 'cancelled'
-                    ? 'bg-red-50 border-red-300'
-                    : editFormData.status === 'expired'
+                <div className={`mt-3 p-4 rounded-xl border-2 ${editFormData.status === 'cancelled'
+                  ? 'bg-red-50 border-red-300'
+                  : editFormData.status === 'expired'
                     ? 'bg-orange-50 border-orange-300'
                     : 'bg-green-50 border-green-300'
-                }`}>
+                  }`}>
                   <div className="flex items-start gap-3">
                     {editFormData.status === 'cancelled' || editFormData.status === 'expired' ? (
                       <AlertTriangle className="h-5 w-5 text-red-600 flex-shrink-0 mt-0.5" />
@@ -737,17 +736,17 @@ Proceed with activation?`;
 
             {/* End Date */}
             <div className="space-y-2">
-              <Label htmlFor="end_date" className="text-[#422268] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Label htmlFor="end_date" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                 End Date
               </Label>
               <div className="relative">
-                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
                 <Input
                   id="end_date"
                   type="date"
                   value={editFormData.end_date}
                   onChange={(e) => setEditFormData({ ...editFormData, end_date: e.target.value })}
-                  className="pl-12 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+                  className="pl-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
                 />
               </div>
             </div>
@@ -758,7 +757,7 @@ Proceed with activation?`;
               type="button"
               variant="outline"
               onClick={() => setEditDialogOpen(false)}
-              className="rounded-full border-2 border-[#ddd8eb]"
+              className="rounded-full border-2 border-var(--neutral-800)"
               disabled={isUpdating}
             >
               Cancel
@@ -767,7 +766,7 @@ Proceed with activation?`;
               type="button"
               onClick={handleSaveSubscription}
               disabled={isUpdating}
-              className="bg-[#81B29A] text-white hover:bg-[#6FA087] rounded-full"
+              className="bg-var(--green-light) text-white hover:bg-var(--green-mint) rounded-full"
             >
               {isUpdating ? (
                 <>
diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index 8681850..9c8ec91 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -218,12 +218,12 @@ const AdminUserView = () => {
       </Button>
 
       {/* User Profile Header */}
-      <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+      <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
         <div className="flex items-start gap-6">
           {/* Avatar */}
-          <Avatar className="h-24 w-24 border-4 border-[#ddd8eb]">
+          <Avatar className="h-24 w-24 border-4 border-var(--neutral-800)">
             <AvatarImage src={user.profile_photo_url} alt={`${user.first_name} ${user.last_name}`} />
-            <AvatarFallback className="bg-[#DDD8EB] text-[#422268] font-semibold text-3xl">
+            <AvatarFallback className="bg-var(--neutral-800) text-var(--purple-ink) font-semibold text-3xl">
               {user.first_name?.[0]}{user.last_name?.[0]}
             </AvatarFallback>
           </Avatar>
@@ -231,7 +231,7 @@ const AdminUserView = () => {
           {/* User Info */}
           <div className="flex-1">
             <div className="flex items-center gap-4 mb-4">
-              <h1 className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {user.first_name} {user.last_name}
               </h1>
               {/* Status & Role Badges */}
@@ -240,7 +240,7 @@ const AdminUserView = () => {
             </div>
 
             {/* Contact Info */}
-            <div className="grid md:grid-cols-2 gap-4 text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="grid md:grid-cols-2 gap-4 text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Mail className="h-4 w-4" />
                 <span>{user.email}</span>
@@ -263,8 +263,8 @@ const AdminUserView = () => {
       </Card>
 
       {/* Admin Actions */}
-      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
-        <h2 className="text-lg font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+        <h2 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Admin Actions
         </h2>
         <div className="flex flex-wrap gap-3">
@@ -272,7 +272,7 @@ const AdminUserView = () => {
             onClick={handleResetPasswordRequest}
             disabled={resetPasswordLoading}
             variant="outline"
-            className="border-2 border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full px-4 py-2 disabled:opacity-50"
+            className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-4 py-2 disabled:opacity-50"
           >
             <Lock className="h-4 w-4 mr-2" />
             {resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
@@ -283,7 +283,7 @@ const AdminUserView = () => {
               onClick={handleResendVerificationRequest}
               disabled={resendVerificationLoading}
               variant="outline"
-              className="border-2 border-[#ff9e77] text-[#ff9e77] hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
+              className="border-2 border-var(--orange-light) text-var(--orange-light) hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
             >
               <Mail className="h-4 w-4 mr-2" />
               {resendVerificationLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -303,7 +303,7 @@ const AdminUserView = () => {
             onClick={() => fileInputRef.current?.click()}
             disabled={uploadingPhoto}
             variant="outline"
-            className="border-2 border-[#81B29A] text-[#81B29A] hover:bg-[#E8F5E9] rounded-full px-4 py-2 disabled:opacity-50"
+            className="border-2 border-var(--green-light) text-var(--green-light) hover:bg-var(--green-bg) rounded-full px-4 py-2 disabled:opacity-50"
           >
             <Upload className="h-4 w-4 mr-2" />
             {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -321,7 +321,7 @@ const AdminUserView = () => {
             </Button>
           )}
 
-          <div className="flex items-center gap-2 text-sm text-[#664fa3] ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="flex items-center gap-2 text-sm text-var(--purple-lavender) ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <AlertTriangle className="h-4 w-4" />
             <span>User will receive a temporary password via email</span>
           </div>
@@ -329,28 +329,28 @@ const AdminUserView = () => {
       </Card>
 
       {/* Additional Details */}
-      <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb]">
-        <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800)">
+        <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
           Additional Information
         </h2>
 
         <div className="grid md:grid-cols-2 gap-6">
           <div>
-            <label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
-            <p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.address}</p>
+            <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
+            <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.address}</p>
           </div>
 
           <div>
-            <label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
-            <p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
+            <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {new Date(user.date_of_birth).toLocaleDateString()}
             </p>
           </div>
 
           {user.partner_first_name && (
             <div>
-              <label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
-              <p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
+              <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {user.partner_first_name} {user.partner_last_name}
               </p>
             </div>
@@ -358,14 +358,14 @@ const AdminUserView = () => {
 
           {user.referred_by_member_name && (
             <div>
-              <label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
-              <p className="text-[#422268] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.referred_by_member_name}</p>
+              <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
+              <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.referred_by_member_name}</p>
             </div>
           )}
 
           {user.lead_sources && user.lead_sources.length > 0 && (
             <div className="md:col-span-2">
-              <label className="text-sm font-medium text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
+              <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
               <div className="flex flex-wrap gap-2 mt-2">
                 {user.lead_sources.map((source, idx) => (
                   <Badge key={idx} variant="outline">{source}</Badge>
@@ -378,32 +378,32 @@ const AdminUserView = () => {
 
       {/* Subscription Info (if applicable) */}
       {user.role === 'member' && (
-        <Card className="p-8 bg-white rounded-2xl border border-[#ddd8eb] mt-8">
-          <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) mt-8">
+          <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
             Subscription Information
           </h2>
 
           {subscriptionsLoading ? (
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
           ) : subscriptions.length === 0 ? (
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
           ) : (
             <div className="space-y-6">
               {subscriptions.map((sub) => (
-                <div key={sub.id} className="p-6 bg-[#F8F7FB] rounded-xl border border-[#ddd8eb]">
+                <div key={sub.id} className="p-6 bg-var(--lavender-500) rounded-xl border border-var(--neutral-800)">
                   <div className="flex items-start justify-between mb-4">
                     <div>
-                      <h3 className="text-lg font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-lg font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.plan.name}
                       </h3>
-                      <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.plan.billing_cycle}
                       </p>
                     </div>
                     <Badge className={
-                      sub.status === 'active' ? 'bg-[#81B29A] text-white' :
-                      sub.status === 'expired' ? 'bg-red-500 text-white' :
-                      'bg-gray-400 text-white'
+                      sub.status === 'active' ? 'bg-var(--green-light) text-white' :
+                        sub.status === 'expired' ? 'bg-red-500 text-white' :
+                          'bg-gray-400 text-white'
                     }>
                       {sub.status}
                     </Badge>
@@ -411,51 +411,51 @@ const AdminUserView = () => {
 
                   <div className="grid md:grid-cols-2 gap-4 text-sm">
                     <div>
-                      <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
-                      <p className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
+                      <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(sub.start_date).toLocaleDateString()}
                       </p>
                     </div>
                     {sub.end_date && (
                       <div>
-                        <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
-                        <p className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
+                        <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {new Date(sub.end_date).toLocaleDateString()}
                         </p>
                       </div>
                     )}
                     <div>
-                      <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
-                      <p className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
+                      <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         ${(sub.base_subscription_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     {sub.donation_cents > 0 && (
                       <div>
-                        <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
-                        <p className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
+                        <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           ${(sub.donation_cents / 100).toFixed(2)}
                         </p>
                       </div>
                     )}
                     <div>
-                      <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
-                      <p className="text-[#422268] font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
+                      <p className="text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         ${(sub.amount_paid_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     {sub.payment_method && (
                       <div>
-                        <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
-                        <p className="text-[#422268]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
+                        <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {sub.payment_method}
                         </p>
                       </div>
                     )}
                     {sub.stripe_subscription_id && (
                       <div className="md:col-span-2">
-                        <label className="text-[#664fa3] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
-                        <p className="text-[#422268] text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
+                        <p className="text-var(--purple-ink) text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {sub.stripe_subscription_id}
                         </p>
                       </div>
diff --git a/src/pages/admin/AdminValidations.js b/src/pages/admin/AdminValidations.js
index 52be839..c234271 100644
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -239,7 +239,7 @@ const AdminValidations = () => {
     const config = {
       pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[#81B29A] text-white' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-var(--green-light) text-white' },
       payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
       rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
     };
@@ -279,44 +279,44 @@ const AdminValidations = () => {
     <>
       {/* Header */}
       <div className="mb-8">
-        <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Validation Queue
         </h1>
-        <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Review and validate pending membership applications.
         </p>
       </div>
 
       {/* Stats Card */}
-      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           <div>
-            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
-            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
+            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
-            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
+            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pending_email').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
-            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
+            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pending_validation').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
-            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
+            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pre_validated').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[#664fa3] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-            <p className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'payment_pending').length}
             </p>
           </div>
@@ -330,20 +330,20 @@ const AdminValidations = () => {
       </Card>
 
       {/* Filter Card */}
-      <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
         <div className="grid md:grid-cols-3 gap-4">
           <div className="relative md:col-span-2">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
             <Input
               placeholder="Search by name, email, or phone..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[#ddd8eb] focus:border-[#664fa3]"
+              className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
             />
           </div>
 
           <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-[#ddd8eb]">
+            <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
             <SelectContent>
@@ -361,16 +361,16 @@ const AdminValidations = () => {
       {/* Table */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <>
-          <Card className="bg-white rounded-2xl border border-[#ddd8eb] overflow-hidden">
+          <Card className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
             <Table>
               <TableHeader>
                 <TableRow>
                   <TableHead
-                    className="cursor-pointer hover:bg-[#DDD8EB]/20"
+                    className="cursor-pointer hover:bg-var(--neutral-800)/20"
                     onClick={() => handleSort('first_name')}
                   >
                     Name {renderSortIcon('first_name')}
@@ -378,13 +378,13 @@ const AdminValidations = () => {
                   <TableHead>Email</TableHead>
                   <TableHead>Phone</TableHead>
                   <TableHead
-                    className="cursor-pointer hover:bg-[#DDD8EB]/20"
+                    className="cursor-pointer hover:bg-var(--neutral-800)/20"
                     onClick={() => handleSort('status')}
                   >
                     Status {renderSortIcon('status')}
                   </TableHead>
                   <TableHead
-                    className="cursor-pointer hover:bg-[#DDD8EB]/20"
+                    className="cursor-pointer hover:bg-var(--neutral-800)/20"
                     onClick={() => handleSort('created_at')}
                   >
                     Registered {renderSortIcon('created_at')}
@@ -415,7 +415,7 @@ const AdminValidations = () => {
                             onClick={() => handleReactivateUser(user)}
                             disabled={actionLoading === user.id}
                             size="sm"
-                            className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
+                            className="bg-var(--green-light) text-white hover:bg-var(--green-mint)"
                           >
                             {actionLoading === user.id ? 'Reactivating...' : 'Reactivate'}
                           </Button>
@@ -426,7 +426,7 @@ const AdminValidations = () => {
                                 onClick={() => handleBypassAndValidateRequest(user)}
                                 disabled={actionLoading === user.id}
                                 size="sm"
-                                className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
+                                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
                               </Button>
@@ -450,7 +450,7 @@ const AdminValidations = () => {
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
-                                className="bg-[#DDD8EB] text-[#422268] hover:bg-white"
+                                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
                               >
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment
@@ -476,7 +476,7 @@ const AdminValidations = () => {
                                 onClick={() => handleValidateRequest(user)}
                                 disabled={actionLoading === user.id}
                                 size="sm"
-                                className="bg-[#81B29A] text-white hover:bg-[#6FA087]"
+                                className="bg-var(--green-light) text-white hover:bg-var(--green-mint)"
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Validate'}
                               </Button>
@@ -507,7 +507,7 @@ const AdminValidations = () => {
           <div className="mt-8 flex flex-col md:flex-row justify-between items-center gap-4">
             {/* Page size selector */}
             <div className="flex items-center gap-2">
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
               <Select
                 value={itemsPerPage.toString()}
                 onValueChange={(val) => {
@@ -525,7 +525,7 @@ const AdminValidations = () => {
                   <SelectItem value="100">100</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 entries (showing {(currentPage - 1) * itemsPerPage + 1}-
                 {Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
               </p>
@@ -544,7 +544,7 @@ const AdminValidations = () => {
 
                   {[...Array(totalPages)].map((_, i) => {
                     const showPage = i < 2 || i >= totalPages - 2 ||
-                                    Math.abs(i - currentPage + 1) <= 1;
+                      Math.abs(i - currentPage + 1) <= 1;
 
                     if (!showPage && i === 2) {
                       return (
@@ -582,11 +582,11 @@ const AdminValidations = () => {
         </>
       ) : (
         <div className="text-center py-20">
-          <Clock className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Clock className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Pending Validations
           </h3>
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || statusFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'All applications have been reviewed!'}
diff --git a/src/pages/members/Bylaws.js b/src/pages/members/Bylaws.js
index c62025f..cf2b1e2 100644
--- a/src/pages/members/Bylaws.js
+++ b/src/pages/members/Bylaws.js
@@ -51,10 +51,10 @@ export default function Bylaws() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading bylaws...
           </p>
         </div>
@@ -63,38 +63,38 @@ export default function Bylaws() {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-5xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             LOAF Bylaws
           </h1>
-          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Review the official governing bylaws and policies of the LOAF community.
           </p>
         </div>
 
         {/* Current Bylaws */}
         {currentBylaws ? (
-          <Card className="p-8 bg-white rounded-2xl border-2 border-[#664fa3] mb-6">
+          <Card className="p-8 bg-background rounded-2xl border-2 border-var(--purple-lavender) mb-6">
             <div className="flex items-start gap-4 mb-6">
-              <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-4 rounded-xl">
+              <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl">
                 <Scale className="h-8 w-8 text-white" />
               </div>
               <div className="flex-1">
                 <div className="flex items-center gap-3 mb-2">
-                  <h2 className="text-2xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {currentBylaws.title}
                   </h2>
-                  <Badge className="bg-[#81B29A] text-white">
+                  <Badge className="bg-var(--green-light) text-white">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
                 </div>
-                <div className="flex items-center gap-4 text-[#664fa3] mb-4">
+                <div className="flex items-center gap-4 text-var(--purple-lavender) mb-4">
                   <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Version: <strong>{currentBylaws.version}</strong>
                   </span>
@@ -106,7 +106,7 @@ export default function Bylaws() {
                 <Button
                   onClick={() => window.open(currentBylaws.document_url, '_blank')}
                   size="lg"
-                  className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+                  className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
                 >
                   <ExternalLink className="h-5 w-5" />
                   View Current Bylaws
@@ -115,9 +115,9 @@ export default function Bylaws() {
             </div>
           </Card>
         ) : (
-          <Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb] mb-6">
-            <Scale className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-            <p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800) mb-6">
+            <Scale className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No current bylaws document available
             </p>
           </Card>
@@ -129,7 +129,7 @@ export default function Bylaws() {
             <Button
               onClick={() => setShowHistory(!showHistory)}
               variant="outline"
-              className="w-full border-[#ddd8eb] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center justify-center gap-2"
+              className="w-full border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center justify-center gap-2"
             >
               <History className="h-4 w-4" />
               {showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
@@ -140,17 +140,17 @@ export default function Bylaws() {
         {/* Version History */}
         {showHistory && history.length > 1 && (
           <div className="space-y-4">
-            <h3 className="text-xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Previous Versions
             </h3>
             {history.filter(b => !b.is_current).map(bylaws => (
-              <Card key={bylaws.id} className="p-6 bg-[#f9f7fc] rounded-xl border border-[#ddd8eb]">
+              <Card key={bylaws.id} className="p-6 bg-var(--lavender-600) rounded-xl border border-var(--neutral-800)">
                 <div className="flex items-center justify-between">
                   <div>
-                    <h4 className="text-lg font-semibold text-[#422268] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h4 className="text-lg font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {bylaws.title}
                     </h4>
-                    <div className="flex items-center gap-3 text-sm text-[#664fa3]">
+                    <div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
                       <span>Version {bylaws.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylaws.effective_date)}</span>
@@ -160,7 +160,7 @@ export default function Bylaws() {
                     onClick={() => window.open(bylaws.document_url, '_blank')}
                     variant="outline"
                     size="sm"
-                    className="border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9] rounded-full flex items-center gap-2"
+                    className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center gap-2"
                   >
                     <ExternalLink className="h-4 w-4" />
                     View
@@ -172,14 +172,14 @@ export default function Bylaws() {
         )}
 
         {/* Information Card */}
-        <Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
+        <Card className="mt-8 p-6 bg-var(--lavender-600) border border-var(--neutral-800)">
           <div className="flex items-start gap-3">
-            <Scale className="h-5 w-5 text-[#664fa3] mt-1" />
+            <Scale className="h-5 w-5 text-var(--purple-lavender) mt-1" />
             <div>
-              <h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About LOAF Bylaws
               </h4>
-              <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The bylaws serve as the governing document for LOAF, outlining the organization's structure,
                 membership requirements, officer responsibilities, and operational procedures. All members are
                 encouraged to familiarize themselves with these guidelines.
diff --git a/src/pages/members/EventGallery.js b/src/pages/members/EventGallery.js
index 0ffdf0e..b82ecce 100644
--- a/src/pages/members/EventGallery.js
+++ b/src/pages/members/EventGallery.js
@@ -107,11 +107,11 @@ const EventGallery = () => {
 
   const EventCard = ({ event }) => (
     <Card
-      className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
+      className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
       onClick={() => handleEventClick(event)}
     >
       {/* Thumbnail */}
-      <div className="relative h-48 mb-4 rounded-xl overflow-hidden bg-[#F8F7FB]">
+      <div className="relative h-48 mb-4 rounded-xl overflow-hidden bg-var(--lavender-500)">
         {event.thumbnail_url ? (
           <img
             src={event.thumbnail_url}
@@ -120,35 +120,35 @@ const EventGallery = () => {
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center">
-            <ImageIcon className="h-16 w-16 text-[#ddd8eb]" />
+            <ImageIcon className="h-16 w-16 text-var(--neutral-800)" />
           </div>
         )}
         <div className="absolute top-3 right-3">
-          <Badge className="bg-[#664fa3] text-white px-3 py-1 rounded-full">
+          <Badge className="bg-var(--purple-lavender) text-white px-3 py-1 rounded-full">
             {event.gallery_count} {event.gallery_count === 1 ? 'photo' : 'photos'}
           </Badge>
         </div>
       </div>
 
       {/* Event Info */}
-      <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
         {event.title}
       </h3>
 
       {event.description && (
-        <p className="text-[#664fa3] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender) mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {event.description}
         </p>
       )}
 
       <div className="space-y-2 text-sm">
-        <div className="flex items-center gap-2 text-[#664fa3]">
+        <div className="flex items-center gap-2 text-var(--purple-lavender)">
           <Calendar className="h-4 w-4" />
           <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {moment(event.start_at).format('MMMM D, YYYY')}
           </span>
         </div>
-        <div className="flex items-center gap-2 text-[#664fa3]">
+        <div className="flex items-center gap-2 text-var(--purple-lavender)">
           <MapPin className="h-4 w-4" />
           <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
         </div>
@@ -159,16 +159,16 @@ const EventGallery = () => {
   // Event Gallery Grid View
   if (!selectedEvent) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
 
         <div className="max-w-7xl mx-auto px-6 py-12">
           {/* Header */}
           <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Gallery
             </h1>
-            <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Browse photos from past LOAF events.
             </p>
           </div>
@@ -176,7 +176,7 @@ const EventGallery = () => {
           {/* Events Grid */}
           {loading ? (
             <div className="text-center py-20">
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
             </div>
           ) : events.length > 0 ? (
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -186,11 +186,11 @@ const EventGallery = () => {
             </div>
           ) : (
             <div className="text-center py-20">
-              <ImageIcon className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-              <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <ImageIcon className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Event Galleries Yet
               </h3>
-              <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Event photos will appear here once admins upload them.
               </p>
             </div>
@@ -202,7 +202,7 @@ const EventGallery = () => {
 
   // Individual Event Gallery View
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
@@ -210,7 +210,7 @@ const EventGallery = () => {
         <Button
           onClick={handleBackToEvents}
           variant="ghost"
-          className="mb-6 text-[#664fa3] hover:text-[#422268] hover:bg-[#F8F7FB]"
+          className="mb-6 text-var(--purple-lavender) hover:text-var(--purple-ink) hover:bg-var(--lavender-500)"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
@@ -219,10 +219,10 @@ const EventGallery = () => {
 
         {/* Event Header */}
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             {selectedEvent.title}
           </h1>
-          <div className="flex flex-wrap gap-4 text-[#664fa3]">
+          <div className="flex flex-wrap gap-4 text-var(--purple-lavender)">
             <div className="flex items-center gap-2">
               <Calendar className="h-5 w-5" />
               <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -233,7 +233,7 @@ const EventGallery = () => {
               <MapPin className="h-5 w-5" />
               <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
             </div>
-            <Badge className="bg-[#664fa3] text-white px-3 py-1 rounded-full">
+            <Badge className="bg-var(--purple-lavender) text-white px-3 py-1 rounded-full">
               {selectedEvent.gallery_count} {selectedEvent.gallery_count === 1 ? 'photo' : 'photos'}
             </Badge>
           </div>
@@ -242,7 +242,7 @@ const EventGallery = () => {
         {/* Gallery Grid */}
         {galleryLoading ? (
           <div className="text-center py-20">
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
           </div>
         ) : galleryImages.length > 0 ? (
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@@ -272,11 +272,11 @@ const EventGallery = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <ImageIcon className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <ImageIcon className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Photos Yet
             </h3>
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Photos from this event will appear here once uploaded.
             </p>
           </div>
diff --git a/src/pages/members/Financials.js b/src/pages/members/Financials.js
index 84612b7..903a77f 100644
--- a/src/pages/members/Financials.js
+++ b/src/pages/members/Financials.js
@@ -29,10 +29,10 @@ export default function Financials() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading financial reports...
           </p>
         </div>
@@ -41,35 +41,35 @@ export default function Financials() {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-5xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports
           </h1>
-          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Access annual financial reports and stay informed about LOAF's fiscal responsibility.
           </p>
         </div>
 
         {/* Reports List */}
         {reports.length === 0 ? (
-          <Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb]">
-            <TrendingUp className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-            <p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800)">
+            <TrendingUp className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No financial reports available yet
             </p>
           </Card>
         ) : (
           <div className="space-y-6">
             {reports.map(report => (
-              <Card key={report.id} className="p-8 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-shadow">
+              <Card key={report.id} className="p-8 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-shadow">
                 <div className="flex items-center gap-6">
                   {/* Year Badge */}
-                  <div className="bg-gradient-to-br from-[#664fa3] to-[#422268] p-6 rounded-xl text-white min-w-[120px] text-center">
+                  <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-6 rounded-xl text-white min-w-[120px] text-center">
                     <DollarSign className="h-8 w-8 mx-auto mb-2" />
                     <div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {report.year}
@@ -79,17 +79,17 @@ export default function Financials() {
 
                   {/* Report Details */}
                   <div className="flex-1">
-                    <h3 className="text-2xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {report.title}
                     </h3>
                     <div className="flex items-center gap-2 mb-4">
-                      <Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
+                      <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
                         {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                       </Badge>
                     </div>
                     <Button
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center gap-2"
+                      className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
                     >
                       <ExternalLink className="h-4 w-4" />
                       View Report
@@ -103,14 +103,14 @@ export default function Financials() {
 
         {/* Transparency Note */}
         {reports.length > 0 && (
-          <Card className="mt-8 p-6 bg-[#f9f7fc] border border-[#ddd8eb]">
+          <Card className="mt-8 p-6 bg-var(--lavender-600) border border-var(--neutral-800)">
             <div className="flex items-start gap-3">
-              <TrendingUp className="h-5 w-5 text-[#664fa3] mt-1" />
+              <TrendingUp className="h-5 w-5 text-var(--purple-lavender) mt-1" />
               <div>
-                <h4 className="font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Transparency & Accountability
                 </h4>
-                <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   LOAF is committed to financial transparency. These reports provide detailed information about our
                   revenue, expenses, and how member contributions support our community programs and operations.
                 </p>
diff --git a/src/pages/members/MemberCalendar.js b/src/pages/members/MemberCalendar.js
index 986fc18..6bb40a9 100644
--- a/src/pages/members/MemberCalendar.js
+++ b/src/pages/members/MemberCalendar.js
@@ -124,10 +124,10 @@ export default function MemberCalendar() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading calendar...
           </p>
         </div>
@@ -136,15 +136,15 @@ export default function MemberCalendar() {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Calendar
           </h1>
-          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             View and manage your event RSVPs. Click on any event to see details and update your RSVP.
           </p>
 
@@ -156,26 +156,26 @@ export default function MemberCalendar() {
 
             <div className="flex gap-4 ml-auto">
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-[#81B29A]"></div>
-                <span className="text-sm text-[#664fa3]">Going</span>
+                <div className="w-4 h-4 rounded bg-var(--green-light)"></div>
+                <span className="text-sm text-var(--purple-lavender)">Going</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-[#fb923c]"></div>
-                <span className="text-sm text-[#664fa3]">Maybe</span>
+                <div className="w-4 h-4 rounded bg-var(--orange-400)"></div>
+                <span className="text-sm text-var(--purple-lavender)">Maybe</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-[#9ca3af]"></div>
-                <span className="text-sm text-[#664fa3]">Not Going</span>
+                <div className="w-4 h-4 rounded bg-var(--slate-400]"></div>
+                <span className="text-sm text-var(--purple-lavender)">Not Going</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-[#DDD8EB]"></div>
-                <span className="text-sm text-[#664fa3]">No RSVP</span>
+                <div className="w-4 h-4 rounded bg-var(--neutral-800)"></div>
+                <span className="text-sm text-var(--purple-lavender)">No RSVP</span>
               </div>
             </div>
           </div>
         </div>
 
-        <Card className="p-6 bg-white rounded-2xl border border-[#ddd8eb] shadow-lg">
+        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
           <Calendar
             localizer={localizer}
             events={calendarEvents}
@@ -200,18 +200,17 @@ export default function MemberCalendar() {
               <>
                 <DialogHeader>
                   <div className="flex items-center gap-3 mb-2">
-                    <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
-                      <CalendarIcon className="h-6 w-6 text-[#664fa3]" />
+                    <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
+                      <CalendarIcon className="h-6 w-6 text-var(--purple-lavender)" />
                     </div>
                     {selectedEvent.user_rsvp_status && (
                       <Badge
-                        className={`px-3 py-1 rounded-full text-sm ${
-                          selectedEvent.user_rsvp_status === 'yes'
-                            ? 'bg-[#81B29A] text-white'
-                            : selectedEvent.user_rsvp_status === 'no'
+                        className={`px-3 py-1 rounded-full text-sm ${selectedEvent.user_rsvp_status === 'yes'
+                          ? 'bg-var(--green-light) text-white'
+                          : selectedEvent.user_rsvp_status === 'no'
                             ? 'bg-gray-400 text-white'
                             : 'bg-orange-400 text-white'
-                        }`}
+                          }`}
                       >
                         {selectedEvent.user_rsvp_status === 'yes' && 'Going'}
                         {selectedEvent.user_rsvp_status === 'no' && 'Not Going'}
@@ -219,14 +218,14 @@ export default function MemberCalendar() {
                       </Badge>
                     )}
                   </div>
-                  <DialogTitle className="text-2xl text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {selectedEvent.title}
                   </DialogTitle>
                 </DialogHeader>
 
                 <div className="space-y-4 mt-4">
                   <div className="space-y-3">
-                    <div className="flex items-center gap-3 text-[#664fa3]">
+                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
                       <CalendarIcon className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(selectedEvent.start_at).toLocaleDateString('en-US', {
@@ -237,17 +236,17 @@ export default function MemberCalendar() {
                         })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 text-[#664fa3]">
+                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
                       <Clock className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(selectedEvent.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(selectedEvent.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 text-[#664fa3]">
+                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
                       <MapPin className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
                     </div>
-                    <div className="flex items-center gap-3 text-[#664fa3]">
+                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
                       <Users className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {selectedEvent.rsvp_count || 0} {selectedEvent.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -257,18 +256,18 @@ export default function MemberCalendar() {
                   </div>
 
                   {selectedEvent.description && (
-                    <div className="pt-4 border-t border-[#ddd8eb]">
-                      <h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <div className="pt-4 border-t border-var(--neutral-800)">
+                      <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                         About This Event
                       </h3>
-                      <p className="text-[#664fa3] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-var(--purple-lavender) leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {selectedEvent.description}
                       </p>
                     </div>
                   )}
 
-                  <div className="pt-4 border-t border-[#ddd8eb]">
-                    <h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <div className="pt-4 border-t border-var(--neutral-800)">
+                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Your RSVP
                     </h3>
                     <div className="flex gap-3 flex-wrap">
@@ -276,11 +275,10 @@ export default function MemberCalendar() {
                         onClick={() => handleRSVP('yes')}
                         disabled={rsvpLoading}
                         size="sm"
-                        className={`rounded-full px-6 flex items-center gap-2 ${
-                          selectedEvent.user_rsvp_status === 'yes'
-                            ? 'bg-[#81B29A] text-white hover:bg-[#66927e]'
-                            : 'bg-[#DDD8EB] text-[#422268] hover:bg-[#c4bed8]'
-                        }`}
+                        className={`rounded-full px-6 flex items-center gap-2 ${selectedEvent.user_rsvp_status === 'yes'
+                          ? 'bg-var(--green-light) text-white hover:bg-var(--green-muted)'
+                          : 'bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--neutral-400:)'
+                          }`}
                       >
                         <Check className="h-4 w-4" />
                         I'm Going
@@ -290,11 +288,10 @@ export default function MemberCalendar() {
                         disabled={rsvpLoading}
                         size="sm"
                         variant="outline"
-                        className={`rounded-full px-6 flex items-center gap-2 border-2 ${
-                          selectedEvent.user_rsvp_status === 'maybe'
-                            ? 'border-orange-400 bg-orange-100 text-orange-700'
-                            : 'border-[#664fa3] text-[#664fa3] hover:bg-[#f1eef9]'
-                        }`}
+                        className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'maybe'
+                          ? 'border-orange-400 bg-orange-100 text-orange-700'
+                          : 'border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300)'
+                          }`}
                       >
                         <HelpCircle className="h-4 w-4" />
                         Maybe
@@ -304,11 +301,10 @@ export default function MemberCalendar() {
                         disabled={rsvpLoading}
                         size="sm"
                         variant="outline"
-                        className={`rounded-full px-6 flex items-center gap-2 border-2 ${
-                          selectedEvent.user_rsvp_status === 'no'
-                            ? 'border-gray-400 bg-gray-100 text-gray-700'
-                            : 'border-gray-400 text-gray-600 hover:bg-gray-50'
-                        }`}
+                        className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'no'
+                          ? 'border-gray-400 bg-gray-100 text-gray-700'
+                          : 'border-gray-400 text-gray-600 hover:bg-gray-50'
+                          }`}
                       >
                         <X className="h-4 w-4" />
                         Can't Attend
@@ -316,8 +312,8 @@ export default function MemberCalendar() {
                     </div>
                   </div>
 
-                  <div className="pt-4 border-t border-[#ddd8eb]">
-                    <h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <div className="pt-4 border-t border-var(--neutral-800)">
+                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Add to Your Calendar
                     </h3>
                     <AddToCalendarButton
diff --git a/src/pages/members/MemberProfile.js b/src/pages/members/MemberProfile.js
index f2f9578..6de7e42 100644
--- a/src/pages/members/MemberProfile.js
+++ b/src/pages/members/MemberProfile.js
@@ -191,11 +191,11 @@ const MemberProfile = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="max-w-4xl mx-auto px-6 py-12">
           <div className="text-center py-20">
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
           </div>
         </div>
       </div>
@@ -203,24 +203,24 @@ const MemberProfile = () => {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Member Profile
           </h1>
-          <p className="text-lg text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Enhance your profile with a photo and social media links.
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-8">
           {/* Profile Photo Section */}
-          <Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Profile Photo
             </h2>
 
@@ -231,7 +231,7 @@ const MemberProfile = () => {
                     <img
                       src={previewImage}
                       alt="Profile"
-                      className="w-40 h-40 rounded-full object-cover border-4 border-[#ddd8eb]"
+                      className="w-40 h-40 rounded-full object-cover border-4 border-var(--neutral-800)"
                     />
                     <Button
                       type="button"
@@ -242,8 +242,8 @@ const MemberProfile = () => {
                     </Button>
                   </div>
                 ) : (
-                  <div className="w-40 h-40 rounded-full bg-[#F8F7FB] border-4 border-[#ddd8eb] flex items-center justify-center">
-                    <User className="h-20 w-20 text-[#ddd8eb]" />
+                  <div className="w-40 h-40 rounded-full bg-var(--lavender-500) border-4 border-var(--neutral-800) flex items-center justify-center">
+                    <User className="h-20 w-20 text-var(--neutral-800)" />
                   </div>
                 )}
               </div>
@@ -260,7 +260,7 @@ const MemberProfile = () => {
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                   disabled={uploading}
-                  className="bg-[#664fa3] hover:bg-[#422268] text-white rounded-xl px-6 py-3 flex items-center gap-2"
+                  className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl px-6 py-3 flex items-center gap-2"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   {uploading ? (
@@ -275,7 +275,7 @@ const MemberProfile = () => {
                     </>
                   )}
                 </Button>
-                <p className="text-sm text-[#664fa3] mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-var(--purple-lavender) mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   JPG, PNG, WebP, or GIF. Max 50MB.
                 </p>
               </div>
@@ -283,15 +283,15 @@ const MemberProfile = () => {
           </Card>
 
           {/* Social Media Section */}
-          <Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Social Media Links
             </h2>
 
             <div className="space-y-6">
               <div>
-                <Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Facebook className="h-4 w-4 text-[#1877F2]" />
+                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Facebook className="h-4 w-4 text-var(--blue-facebook)" />
                   Facebook Profile URL
                 </Label>
                 <Input
@@ -300,14 +300,14 @@ const MemberProfile = () => {
                   value={formData.social_media_facebook}
                   onChange={handleInputChange}
                   placeholder="https://facebook.com/yourprofile"
-                  className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
 
               <div>
-                <Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Instagram className="h-4 w-4 text-[#E4405F]" />
+                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Instagram className="h-4 w-4 text-var(--red-instagram)" />
                   Instagram Profile URL
                 </Label>
                 <Input
@@ -316,14 +316,14 @@ const MemberProfile = () => {
                   value={formData.social_media_instagram}
                   onChange={handleInputChange}
                   placeholder="https://instagram.com/yourprofile"
-                  className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
 
               <div>
-                <Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Twitter className="h-4 w-4 text-[#1DA1F2]" />
+                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Twitter className="h-4 w-4 text-var(--blue-twitter)" />
                   Twitter/X Profile URL
                 </Label>
                 <Input
@@ -332,14 +332,14 @@ const MemberProfile = () => {
                   value={formData.social_media_twitter}
                   onChange={handleInputChange}
                   placeholder="https://twitter.com/yourprofile"
-                  className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
 
               <div>
-                <Label className="flex items-center gap-2 text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Linkedin className="h-4 w-4 text-[#0A66C2]" />
+                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Linkedin className="h-4 w-4 text-var(--blue-linkedin)" />
                   LinkedIn Profile URL
                 </Label>
                 <Input
@@ -348,7 +348,7 @@ const MemberProfile = () => {
                   value={formData.social_media_linkedin}
                   onChange={handleInputChange}
                   placeholder="https://linkedin.com/in/yourprofile"
-                  className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
@@ -356,33 +356,33 @@ const MemberProfile = () => {
           </Card>
 
           {/* Directory Settings Section */}
-          <Card className="p-8 bg-white border-[#ddd8eb] rounded-2xl">
-            <h2 className="text-2xl font-semibold text-[#422268] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
+            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Directory Settings
             </h2>
 
             <div className="space-y-6">
-              <div className="flex items-center justify-between p-4 bg-[#F8F7FB] rounded-xl">
+              <div className="flex items-center justify-between p-4 bg-var(--lavender-500) rounded-xl">
                 <div className="flex-1">
-                  <Label className="text-[#422268] font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    <Eye className="h-4 w-4 text-[#664fa3]" />
+                  <Label className="text-var(--purple-ink) font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Eye className="h-4 w-4 text-var(--purple-lavender)" />
                     Show in Members Directory
                   </Label>
-                  <p className="text-sm text-[#664fa3] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-var(--purple-lavender) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Allow other members to see your profile in the directory
                   </p>
                 </div>
                 <Switch
                   checked={formData.show_in_directory}
                   onCheckedChange={handleSwitchChange}
-                  className="data-[state=checked]:bg-[#664fa3]"
+                  className="data-[state=checked]:bg-var(--purple-lavender)"
                 />
               </div>
 
               {formData.show_in_directory && (
                 <>
                   <div>
-                    <Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Directory Email (visible to members)
                     </Label>
                     <Input
@@ -391,13 +391,13 @@ const MemberProfile = () => {
                       value={formData.directory_email}
                       onChange={handleInputChange}
                       placeholder="public.email@example.com"
-                      className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                      className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     />
                   </div>
 
                   <div>
-                    <Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Bio (visible to members)
                     </Label>
                     <Textarea
@@ -406,14 +406,14 @@ const MemberProfile = () => {
                       onChange={handleInputChange}
                       placeholder="Tell other members about yourself..."
                       rows={4}
-                      className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                      className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     />
                   </div>
 
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
-                      <Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Directory Address (optional)
                       </Label>
                       <Input
@@ -422,13 +422,13 @@ const MemberProfile = () => {
                         value={formData.directory_address}
                         onChange={handleInputChange}
                         placeholder="123 Main St, City, State"
-                        className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                        className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                         style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       />
                     </div>
 
                     <div>
-                      <Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Directory Phone (optional)
                       </Label>
                       <Input
@@ -437,14 +437,14 @@ const MemberProfile = () => {
                         value={formData.directory_phone}
                         onChange={handleInputChange}
                         placeholder="(555) 123-4567"
-                        className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                        className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                         style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       />
                     </div>
                   </div>
 
                   <div>
-                    <Label className="text-[#422268] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Partner Name (if applicable)
                     </Label>
                     <Input
@@ -453,7 +453,7 @@ const MemberProfile = () => {
                       value={formData.directory_partner_name}
                       onChange={handleInputChange}
                       placeholder="Partner's name"
-                      className="border-[#ddd8eb] rounded-xl focus:border-[#664fa3] focus:ring-[#664fa3]"
+                      className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     />
                   </div>
@@ -467,7 +467,7 @@ const MemberProfile = () => {
             <Button
               type="submit"
               disabled={saving}
-              className="bg-[#ff9e77] hover:bg-[#ff8c5a] text-white rounded-xl px-8 py-3 text-lg"
+              className="bg-var(--orange-light) hover:bg-var(--orange-apricot) text-white rounded-xl px-8 py-3 text-lg"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               {saving ? (
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index b8666b9..4a220c4 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -114,23 +114,23 @@ const MembersDirectory = () => {
   const Border = ({ yaxis = false }) => {
     return (
       yaxis ?
-        <div className=' border-2 w-full border-[#664FA3] my-24' />
-        : <div className=' border-2 w-full border-[#664FA3] mb-24' />
+        <div className=' border-2 w-full border-var(--purple-lavender) my-24' />
+        : <div className=' border-2 w-full border-var(--purple-lavender) mb-24' />
     )
   }
   const MemberCard = ({ member }) => (
-    <Card className="p-6 bg-white rounded-3xl border border-[#ddd8eb] hover:shadow-lg transition-all h-full">
+    <Card className="p-6 bg-background rounded-3xl border border-var(--neutral-800) hover:shadow-lg transition-all h-full">
       {/* Profile Photo */}
       <div className="flex justify-center mb-4">
         {member.profile_photo_url ? (
           <img
             src={member.profile_photo_url}
             alt={`${member.first_name} ${member.last_name}`}
-            className="w-32 h-32 rounded-full object-cover border-4 border-[#ddd8eb]"
+            className="w-32 h-32 rounded-full object-cover border-4 border-var(--neutral-800)"
           />
         ) : (
-          <div className="w-32 h-32 rounded-full bg-[#DDD8EB] border-4 border-[#ddd8eb] flex items-center justify-center">
-            <span className="text-4xl font-semibold text-[#664fa3]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <div className="w-32 h-32 rounded-full bg-var(--neutral-800) border-4 border-var(--neutral-800) flex items-center justify-center">
+            <span className="text-4xl font-semibold text-var(--purple-lavender)" style={{ fontFamily: "'Inter', sans-serif" }}>
               {getInitials(member.first_name, member.last_name)}
             </span>
           </div>
@@ -138,15 +138,15 @@ const MembersDirectory = () => {
       </div>
 
       {/* Name */}
-      <h3 className="text-2xl font-semibold text-[#422268] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <h3 className="text-2xl font-semibold text-var(--purple-ink) text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
         {member.first_name} {member.last_name}
       </h3>
 
       {/* Partner Name */}
       {member.directory_partner_name && (
         <div className="flex items-center justify-center gap-2 mb-4">
-          <Heart className="h-4 w-4 text-[#ff9e77]" />
-          <span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Heart className="h-4 w-4 text-var(--orange-light)" />
+          <span className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Partner: {member.directory_partner_name}
           </span>
         </div>
@@ -154,7 +154,7 @@ const MembersDirectory = () => {
 
       {/* Bio */}
       {member.directory_bio && (
-        <p className="text-[#664fa3] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-var(--purple-lavender) text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {member.directory_bio}
         </p>
       )}
@@ -162,8 +162,8 @@ const MembersDirectory = () => {
       {/* Member Since */}
       {member.created_at && (
         <div className="flex items-center justify-center gap-2 mb-4">
-          <Calendar className="h-4 w-4 text-[#664fa3]" />
-          <span className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Calendar className="h-4 w-4 text-var(--purple-lavender)" />
+          <span className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Member since {new Date(member.created_at).toLocaleDateString('en-US', {
               month: 'long',
               year: 'numeric'
@@ -176,10 +176,10 @@ const MembersDirectory = () => {
       <div className="space-y-3 mb-4">
         {member.directory_email && (
           <div className="flex items-center gap-2 text-sm">
-            <Mail className="h-4 w-4 text-[#664fa3] flex-shrink-0" />
+            <Mail className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
             <a
               href={`mailto:${member.directory_email}`}
-              className="text-[#664fa3] hover:text-[#422268] truncate"
+              className="text-var(--purple-lavender) hover:text-var(--purple-ink) truncate"
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               {member.directory_email}
@@ -189,10 +189,10 @@ const MembersDirectory = () => {
 
         {member.directory_phone && (
           <div className="flex items-center gap-2 text-sm">
-            <Phone className="h-4 w-4 text-[#664fa3] flex-shrink-0" />
+            <Phone className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
             <a
               href={`tel:${member.directory_phone}`}
-              className="text-[#664fa3] hover:text-[#422268]"
+              className="text-var(--purple-lavender) hover:text-var(--purple-ink)"
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               {member.directory_phone}
@@ -202,8 +202,8 @@ const MembersDirectory = () => {
 
         {member.directory_address && (
           <div className="flex items-start gap-2 text-sm">
-            <MapPin className="h-4 w-4 text-[#664fa3] flex-shrink-0 mt-0.5" />
-            <span className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <MapPin className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
+            <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {member.directory_address}
             </span>
           </div>
@@ -212,17 +212,17 @@ const MembersDirectory = () => {
 
       {/* Social Media Links */}
       {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
-        <div className="pt-4 border-t border-[#ddd8eb]">
+        <div className="pt-4 border-t border-var(--neutral-800)">
           <div className="flex justify-center gap-3">
             {member.social_media_facebook && (
               <a
                 href={getSocialMediaLink(member.social_media_facebook)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                 title="Facebook"
               >
-                <Facebook className="h-5 w-5 text-[#1877F2]" />
+                <Facebook className="h-5 w-5 text-var(--blue-facebook)" />
               </a>
             )}
 
@@ -231,10 +231,10 @@ const MembersDirectory = () => {
                 href={getSocialMediaLink(member.social_media_instagram)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                 title="Instagram"
               >
-                <Instagram className="h-5 w-5 text-[#E4405F]" />
+                <Instagram className="h-5 w-5 text-var(--red-instagram)" />
               </a>
             )}
 
@@ -243,10 +243,10 @@ const MembersDirectory = () => {
                 href={getSocialMediaLink(member.social_media_twitter)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                 title="Twitter/X"
               >
-                <Twitter className="h-5 w-5 text-[#1DA1F2]" />
+                <Twitter className="h-5 w-5 text-var(--blue-twitter)" />
               </a>
             )}
 
@@ -255,10 +255,10 @@ const MembersDirectory = () => {
                 href={getSocialMediaLink(member.social_media_linkedin)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                 title="LinkedIn"
               >
-                <Linkedin className="h-5 w-5 text-[#0A66C2]" />
+                <Linkedin className="h-5 w-5 text-var(--blue-linkedin)" />
               </a>
             )}
           </div>
@@ -266,10 +266,10 @@ const MembersDirectory = () => {
       )}
 
       {/* View Profile Button */}
-      <div className="pt-4 mt-4 border-t border-[#ddd8eb]">
+      <div className="pt-4 mt-4 border-t border-var(--neutral-800)">
         <Button
           onClick={() => handleViewProfile(member.id)}
-          className="w-full bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full py-5"
+          className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full py-5"
         >
           <UserCircle className="h-4 w-4 mr-2" />
           View Full Profile
@@ -279,7 +279,7 @@ const MembersDirectory = () => {
   );
 
   return (
-    <div className="min-h-screen bg-gradient-to-bl from-[#F9FAFB] to-[#DDD8EB]">
+    <div className="min-h-screen bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800)">
       <Navbar />
 
       <div className="max-w-7xl mx-auto py-12">
@@ -289,29 +289,29 @@ const MembersDirectory = () => {
 
           {/* Header */}
           <div className="m-8 mt-14 flex flex-col sm:flex-row justify-between items-center ">
-            <h1 className="text-4xl md:text-5xl font-bold text-[#422268] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-bold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
               LOAF Members
             </h1>
             <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[#664fa3] font-medium'>{totalMembers}</span>
+              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-var(--purple-lavender) font-medium'>{totalMembers}</span>
             </p>
           </div>
 
           {/* Search Bar */}
           <div className="mb-24 mx-10">
             <div className="relative w-full  ">
-              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[#664fa3]" />
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
               <Input
                 type="text"
                 placeholder="Search by name or bio..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[#664fa3] focus:ring-[#664fa3]"
+                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               />
             </div>
             {searchQuery && (
-              <p className="mt-3 text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="mt-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
               </p>
             )}
@@ -325,7 +325,7 @@ const MembersDirectory = () => {
         {/* Members Grid */}
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
           </div>
         ) : filteredMembers.length > 0 ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -335,11 +335,11 @@ const MembersDirectory = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <User className="h-20 w-20 text-[#ddd8eb] mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <User className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               {searchQuery ? 'No Members Found' : 'No Members in Directory'}
             </h3>
-            <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {searchQuery
                 ? 'Try adjusting your search query.'
                 : 'Members who opt in to the directory will appear here.'}
@@ -354,18 +354,18 @@ const MembersDirectory = () => {
 
         {/* Info Card */}
         {!loading && members.length > 0 && (
-          <Card className="mt-12 p-6 bg-[#F8F7FB] border-[#ddd8eb]">
+          <Card className="mt-12 p-6 bg-var(--lavender-500) border-var(--neutral-800)">
             <div className="flex items-start gap-4">
-              <div className="bg-[#DDD8EB]/20 p-3 rounded-lg">
-                <User className="h-6 w-6 text-[#664fa3]" />
+              <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
+                <User className="h-6 w-6 text-var(--purple-lavender)" />
               </div>
               <div>
-                <h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Want to appear in the directory?
                 </h3>
-                <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
-                  <a href="/members/profile" className="text-[#ff9e77] hover:underline font-medium">
+                  <a href="/members/profile" className="text-var(--orange-light) hover:underline font-medium">
                     Edit your profile →
                   </a>
                 </p>
@@ -377,17 +377,17 @@ const MembersDirectory = () => {
 
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
-        <DialogContent className="sm:max-w-[600px] bg-white rounded-2xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto">
           {selectedMember && (
             <>
               <DialogHeader>
-                <DialogTitle className="text-3xl font-semibold text-[#422268]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {selectedMember.first_name} {selectedMember.last_name}
                 </DialogTitle>
                 {selectedMember.directory_partner_name && (
                   <DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    <Heart className="h-5 w-5 text-[#ff9e77]" />
-                    <span className="text-[#664fa3]">Partner: {selectedMember.directory_partner_name}</span>
+                    <Heart className="h-5 w-5 text-var(--orange-light)" />
+                    <span className="text-var(--purple-lavender)">Partner: {selectedMember.directory_partner_name}</span>
                   </DialogDescription>
                 )}
               </DialogHeader>
@@ -396,10 +396,10 @@ const MembersDirectory = () => {
                 {/* Bio */}
                 {selectedMember.directory_bio && (
                   <div>
-                    <h3 className="text-lg font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       About
                     </h3>
-                    <p className="text-[#664fa3] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-var(--purple-lavender) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {selectedMember.directory_bio}
                     </p>
                   </div>
@@ -407,20 +407,20 @@ const MembersDirectory = () => {
 
                 {/* Contact Information */}
                 <div>
-                  <h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Contact Information
                   </h3>
                   <div className="space-y-3">
                     {selectedMember.directory_email && (
                       <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-[#F8F7FB]">
-                          <Mail className="h-5 w-5 text-[#664fa3]" />
+                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
+                          <Mail className="h-5 w-5 text-var(--purple-lavender)" />
                         </div>
                         <div>
-                          <p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
                           <a
                             href={`mailto:${selectedMember.directory_email}`}
-                            className="text-[#422268] hover:text-[#664fa3] font-medium"
+                            className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
                             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                           >
                             {selectedMember.directory_email}
@@ -431,14 +431,14 @@ const MembersDirectory = () => {
 
                     {selectedMember.directory_phone && (
                       <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-[#F8F7FB]">
-                          <Phone className="h-5 w-5 text-[#664fa3]" />
+                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
+                          <Phone className="h-5 w-5 text-var(--purple-lavender)" />
                         </div>
                         <div>
-                          <p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
+                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
                           <a
                             href={`tel:${selectedMember.directory_phone}`}
-                            className="text-[#422268] hover:text-[#664fa3] font-medium"
+                            className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
                             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                           >
                             {selectedMember.directory_phone}
@@ -449,12 +449,12 @@ const MembersDirectory = () => {
 
                     {selectedMember.directory_address && (
                       <div className="flex items-start gap-3">
-                        <div className="p-2 rounded-lg bg-[#F8F7FB]">
-                          <MapPin className="h-5 w-5 text-[#664fa3]" />
+                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
+                          <MapPin className="h-5 w-5 text-var(--purple-lavender)" />
                         </div>
                         <div>
-                          <p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
-                          <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
+                          <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {selectedMember.directory_address}
                           </p>
                         </div>
@@ -463,12 +463,12 @@ const MembersDirectory = () => {
 
                     {selectedMember.directory_dob && (
                       <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-[#F8F7FB]">
-                          <Heart className="h-5 w-5 text-[#ff9e77]" />
+                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
+                          <Heart className="h-5 w-5 text-var(--orange-light)" />
                         </div>
                         <div>
-                          <p className="text-xs text-[#664fa3] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
-                          <p className="text-[#422268] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
+                          <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {formatDate(selectedMember.directory_dob)}
                           </p>
                         </div>
@@ -480,14 +480,14 @@ const MembersDirectory = () => {
                 {/* Volunteer Interests */}
                 {selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
                   <div>
-                    <h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Volunteer Interests
                     </h3>
                     <div className="flex flex-wrap gap-2">
                       {selectedMember.volunteer_interests.map((interest, index) => (
                         <Badge
                           key={index}
-                          className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white"
+                          className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
                         >
                           {interest}
                         </Badge>
@@ -500,7 +500,7 @@ const MembersDirectory = () => {
                 {(selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
                   selectedMember.social_media_twitter || selectedMember.social_media_linkedin) && (
                     <div>
-                      <h3 className="text-lg font-semibold text-[#422268] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                         Connect on Social Media
                       </h3>
                       <div className="flex gap-3">
@@ -509,10 +509,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_facebook)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                             title="Facebook"
                           >
-                            <Facebook className="h-6 w-6 text-[#1877F2]" />
+                            <Facebook className="h-6 w-6 text-var(--blue-facebook)" />
                           </a>
                         )}
 
@@ -521,10 +521,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_instagram)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                             title="Instagram"
                           >
-                            <Instagram className="h-6 w-6 text-[#E4405F]" />
+                            <Instagram className="h-6 w-6 text-var(--red-instagram)" />
                           </a>
                         )}
 
@@ -533,10 +533,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_twitter)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                             title="Twitter/X"
                           >
-                            <Twitter className="h-6 w-6 text-[#1DA1F2]" />
+                            <Twitter className="h-6 w-6 text-var(--blue-twitter)" />
                           </a>
                         )}
 
@@ -545,10 +545,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_linkedin)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-[#F8F7FB] hover:bg-[#DDD8EB] transition-colors"
+                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
                             title="LinkedIn"
                           >
-                            <Linkedin className="h-6 w-6 text-[#0A66C2]" />
+                            <Linkedin className="h-6 w-6 text-var(--blue-linkedin)" />
                           </a>
                         )}
                       </div>
@@ -565,21 +565,21 @@ const MembersDirectory = () => {
       {/* Pagination */}
       {!loading && filteredMembers.length > 0 && (
         <div className="mt-10 flex flex-col items-center gap-4 pb-12">
-          <p className="text-sm text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
           </p>
           <div className="flex flex-wrap items-center justify-center gap-2">
             <Button
               onClick={() => setCurrentPage(1)}
               disabled={currentPage === 1}
-              className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
+              className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
             >
               First Page
             </Button>
             <Button
               onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
               disabled={currentPage === 1}
-              className="bg-[#DDD8EB] rounded-full text-[#422268] hover:bg-[#664fa3] hover:text-white"
+              className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
             >
               Previous
             </Button>
@@ -593,8 +593,8 @@ const MembersDirectory = () => {
                   onClick={() => setCurrentPage(pageNumber)}
                   className={
                     isActive
-                      ? "bg-[#664fa3] text-white hover:bg-[#422268] rounded-full"
-                      : "bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] hover:text-white rounded-full"
+                      ? "bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full"
+                      : "bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
                   }
                 >
                   {pageNumber}
@@ -605,14 +605,14 @@ const MembersDirectory = () => {
             <Button
               onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
               disabled={currentPage === totalPages}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
             >
               Next
             </Button>
             <Button
               onClick={() => setCurrentPage(totalPages)}
               disabled={currentPage === totalPages}
-              className="bg-[#DDD8EB] text-[#422268] hover:bg-[#664fa3] rounded-full hover:text-white"
+              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
             >
               Last Page
             </Button>
diff --git a/src/pages/members/NewsletterArchive.js b/src/pages/members/NewsletterArchive.js
index e8dd175..54e3909 100644
--- a/src/pages/members/NewsletterArchive.js
+++ b/src/pages/members/NewsletterArchive.js
@@ -83,10 +83,10 @@ export default function NewsletterArchive() {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-white">
+      <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[#664fa3]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading newsletters...
           </p>
         </div>
@@ -95,16 +95,16 @@ export default function NewsletterArchive() {
   }
 
   return (
-    <div className="min-h-screen bg-white">
+    <div className="min-h-screen bg-background">
       <Navbar />
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-[#422268] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Newsletter Archive
           </h1>
-          <p className="text-[#664fa3] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse past monthly newsletters and stay informed about LOAF community updates.
           </p>
 
@@ -112,13 +112,13 @@ export default function NewsletterArchive() {
           <div className="flex gap-4 flex-wrap items-center">
             {/* Search */}
             <div className="relative flex-1 min-w-[300px]">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[#664fa3]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-var(--purple-lavender)" />
               <Input
                 type="text"
                 placeholder="Search newsletters..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10 border-[#ddd8eb] focus:border-[#664fa3]"
+                className="pl-10 border-var(--neutral-800) focus:border-var(--purple-lavender)"
               />
             </div>
 
@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
                 onClick={clearFilter}
                 variant={selectedYear === null ? "default" : "outline"}
                 size="sm"
-                className={selectedYear === null ? "bg-[#664fa3] text-white" : "border-[#664fa3] text-[#664fa3]"}
+                className={selectedYear === null ? "bg-var(--purple-lavender) text-white" : "border-var(--purple-lavender) text-var(--purple-lavender)"}
               >
                 All Years
               </Button>
@@ -138,7 +138,7 @@ export default function NewsletterArchive() {
                   onClick={() => handleYearFilter(year)}
                   variant={selectedYear === year ? "default" : "outline"}
                   size="sm"
-                  className={selectedYear === year ? "bg-[#664fa3] text-white" : "border-[#664fa3] text-[#664fa3]"}
+                  className={selectedYear === year ? "bg-var(--purple-lavender) text-white" : "border-var(--purple-lavender) text-var(--purple-lavender)"}
                 >
                   {year}
                 </Button>
@@ -149,9 +149,9 @@ export default function NewsletterArchive() {
 
         {/* Newsletter List */}
         {filteredNewsletters.length === 0 ? (
-          <Card className="p-12 text-center bg-white rounded-2xl border border-[#ddd8eb]">
-            <FileText className="h-16 w-16 text-[#ddd8eb] mx-auto mb-4" />
-            <p className="text-[#664fa3] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800)">
+            <FileText className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
+            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No newsletters found
             </p>
           </Card>
@@ -159,37 +159,37 @@ export default function NewsletterArchive() {
           <div className="space-y-8">
             {sortedYears.map(year => (
               <div key={year}>
-                <h2 className="text-2xl font-semibold text-[#422268] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   <Calendar className="h-6 w-6" />
                   {year}
                 </h2>
                 <div className="grid md:grid-cols-2 gap-6">
                   {groupedNewsletters[year].map(newsletter => (
-                    <Card key={newsletter.id} className="p-6 bg-white rounded-2xl border border-[#ddd8eb] hover:shadow-lg transition-shadow">
+                    <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-shadow">
                       <div className="flex items-start gap-4">
-                        <div className="bg-[#DDD8EB]/20 p-3 rounded-lg flex-shrink-0">
-                          <FileText className="h-6 w-6 text-[#664fa3]" />
+                        <div className="bg-var(--neutral-800)/20 p-3 rounded-lg flex-shrink-0">
+                          <FileText className="h-6 w-6 text-var(--purple-lavender)" />
                         </div>
                         <div className="flex-1 min-w-0">
-                          <h3 className="text-xl font-semibold text-[#422268] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {newsletter.title}
                           </h3>
                           {newsletter.description && (
-                            <p className="text-[#664fa3] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-var(--purple-lavender) mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {newsletter.description}
                             </p>
                           )}
                           <div className="flex items-center gap-3 mb-4">
-                            <Badge className="bg-[#DDD8EB] text-[#422268] hover:bg-[#DDD8EB]">
+                            <Badge className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--neutral-800)">
                               {formatDate(newsletter.published_date)}
                             </Badge>
-                            <Badge variant="outline" className="border-[#664fa3] text-[#664fa3]">
+                            <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
                               {newsletter.document_type === 'google_docs' ? 'Google Docs' : newsletter.document_type.toUpperCase()}
                             </Badge>
                           </div>
                           <Button
                             onClick={() => window.open(newsletter.document_url, '_blank')}
-                            className="w-full bg-[#664fa3] text-white hover:bg-[#533a82] rounded-full flex items-center justify-center gap-2"
+                            className="w-full bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center justify-center gap-2"
                           >
                             <ExternalLink className="h-4 w-4" />
                             View Newsletter
diff --git a/tailwind.config.js b/tailwind.config.js
index 657c3b3..7aecb23 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -43,6 +43,10 @@ module.exports = {
 					DEFAULT: 'hsl(var(--destructive))',
 					foreground: 'hsl(var(--destructive-foreground))'
 				},
+				success: {
+					DEFAULT: 'hsl(var(--success))',
+					foreground: 'hsl(var(--success-foreground))'
+				},
 				border: 'hsl(var(--border))',
 				input: 'hsl(var(--input))',
 				ring: 'hsl(var(--ring))',
@@ -51,25 +55,39 @@ module.exports = {
 					'2': 'hsl(var(--chart-2))',
 					'3': 'hsl(var(--chart-3))',
 					'4': 'hsl(var(--chart-4))',
-					'5': 'hsl(var(--chart-5))'
-				}
+					'5': 'hsl(var(--chart-5))',
+					'6': 'hsl(var(--chart-6))',
+					'7': 'hsl(var(--chart-7))',
+				},
+
+				/* =========================
+				   Brand Colors
+				   ========================= */
+				brand: {
+					'dark-lavender': 'hsl(var(--brand-dark-lavender))',
+					'purple': 'hsl(var(--brand-purple))',
+					'lavender': 'hsl(var(--brand-lavender))',
+					'light-lavender': 'hsl(var(--brand-light-lavender))',
+					'white': 'hsl(var(--brand-white))',
+
+					'dark-orange': 'hsl(var(--brand-dark-orange))',
+					'orange': 'hsl(var(--brand-orange))',
+					'light-orange': 'hsl(var(--brand-light-orange))',
+
+					'pink': 'hsl(var(--brand-pink))',
+					'dusty-pink': 'hsl(var(--dusty-pink))',
+					'dark-rose': 'hsl(var(--dark-rose))',
+				},
+
 			},
 			keyframes: {
 				'accordion-down': {
-					from: {
-						height: '0'
-					},
-					to: {
-						height: 'var(--radix-accordion-content-height)'
-					}
+					from: { height: '0' },
+					to: { height: 'var(--radix-accordion-content-height)' }
 				},
 				'accordion-up': {
-					from: {
-						height: 'var(--radix-accordion-content-height)'
-					},
-					to: {
-						height: '0'
-					}
+					from: { height: 'var(--radix-accordion-content-height)' },
+					to: { height: '0' }
 				}
 			},
 			animation: {
@@ -78,6 +96,7 @@ module.exports = {
 			}
 		}
 	},
+
 	plugins: [
 		require("tailwindcss-animate"),
 		require("@tailwindcss/typography")
-- 
2.39.5


From 9c2d516f9d2406aaeeceac6df5cb7724e3ece145 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Mon, 12 Jan 2026 20:37:38 -0600
Subject: [PATCH 03/21] fix typo

---
 src/components/AddToCalendarButton.js         |  10 +-
 src/components/AdminSidebar.js                |  24 +--
 src/components/AttendanceDialog.js            |  16 +-
 src/components/ChangePasswordDialog.js        |  16 +-
 src/components/ConfirmationDialog.js          |  24 +--
 src/components/CreateMemberDialog.js          |  50 +++---
 src/components/CreateStaffDialog.js           |  30 ++--
 src/components/ImportMembersDialog.js         |  60 +++----
 src/components/InviteStaffDialog.js           |  34 ++--
 src/components/MemberFooter.js                |   4 +-
 src/components/MemberRoute.js                 |   4 +-
 src/components/Navbar.js                      |  22 +--
 src/components/PaymentActivationDialog.js     |  60 +++----
 src/components/PendingInvitationsTable.js     |  50 +++---
 src/components/PlanDialog.js                  |  32 ++--
 src/components/PublicFooter.js                |  28 +--
 src/components/PublicNavbar.js                |  42 ++---
 src/components/RejectionDialog.js             |  20 +--
 src/components/WordPressImportWizard.js       |  84 ++++-----
 .../registration/RegistrationStep1.js         |  26 +--
 .../registration/RegistrationStep2.js         |  18 +-
 .../registration/RegistrationStep3.js         |  40 ++---
 .../registration/RegistrationStep4.js         |  20 +--
 .../registration/RegistrationStepIndicator.js |  16 +-
 src/components/ui/password-input.jsx          |   2 +-
 src/components/ui/tabs.jsx                    |   2 +-
 src/pages/AcceptInvitation.js                 | 124 ++++++-------
 src/pages/BecomeMember.js                     |  34 ++--
 src/pages/BoardOfDirectors.js                 |  26 +--
 src/pages/ChangePasswordRequired.js           |  26 +--
 src/pages/ContactUs.js                        |  42 ++---
 src/pages/Dashboard.js                        | 164 ++++++++---------
 src/pages/Donate.js                           |  48 ++---
 src/pages/DonationSuccess.js                  |  28 +--
 src/pages/EventDetails.js                     |  42 ++---
 src/pages/Events.js                           |  32 ++--
 src/pages/ForgotPassword.js                   |  34 ++--
 src/pages/History.js                          |  78 ++++----
 src/pages/Landing.js                          |  22 +--
 src/pages/Login.js                            |  20 +--
 src/pages/MissionValues.js                    |   8 +-
 src/pages/NotFound.js                         |  22 +--
 src/pages/PaymentCancel.js                    |  40 ++---
 src/pages/PaymentSuccess.js                   |  46 ++---
 src/pages/Plans.js                            |  96 +++++-----
 src/pages/PrivacyPolicy.js                    |  26 +--
 src/pages/Profile.js                          | 148 +++++++--------
 src/pages/Register.js                         |  18 +-
 src/pages/ResetPassword.js                    |  28 +--
 src/pages/Resources.js                        |  26 +--
 src/pages/TermsOfService.js                   |  98 +++++-----
 src/pages/VerifyEmail.js                      |  24 +--
 src/pages/admin/AdminBylaws.js                |  48 ++---
 src/pages/admin/AdminDashboard.js             |  74 ++++----
 src/pages/admin/AdminDonations.js             | 122 ++++++-------
 src/pages/admin/AdminEventAttendance.js       | 124 ++++++-------
 src/pages/admin/AdminEvents.js                |  72 ++++----
 src/pages/admin/AdminFinancials.js            |  32 ++--
 src/pages/admin/AdminGallery.js               |  56 +++---
 src/pages/admin/AdminMembers.js               |  84 ++++-----
 src/pages/admin/AdminNewsletters.js           |  36 ++--
 src/pages/admin/AdminPermissions.js           |  64 +++----
 src/pages/admin/AdminPlans.js                 |  80 ++++-----
 src/pages/admin/AdminStaff.js                 |  66 +++----
 src/pages/admin/AdminSubscriptions.js         | 170 +++++++++---------
 src/pages/admin/AdminUserView.js              |  88 ++++-----
 src/pages/admin/AdminValidations.js           |  64 +++----
 src/pages/members/Bylaws.js                   |  44 ++---
 src/pages/members/EventGallery.js             |  44 ++---
 src/pages/members/Financials.js               |  30 ++--
 src/pages/members/MemberCalendar.js           |  60 +++----
 src/pages/members/MemberProfile.js            |  84 ++++-----
 src/pages/members/MembersDirectory.js         | 170 +++++++++---------
 src/pages/members/NewsletterArchive.js        |  38 ++--
 74 files changed, 1842 insertions(+), 1842 deletions(-)

diff --git a/src/components/AddToCalendarButton.js b/src/components/AddToCalendarButton.js
index 038775d..65fc891 100644
--- a/src/components/AddToCalendarButton.js
+++ b/src/components/AddToCalendarButton.js
@@ -128,7 +128,7 @@ export default function AddToCalendarButton({
         {event && (
           <>
             {/* Single Event Export Options */}
-            <div className="px-2 py-1.5 text-sm font-semibold text-var(--purple-ink)">
+            <div className="px-2 py-1.5 text-sm font-semibold text-[var(--purple-ink)]">
               Add This Event
             </div>
 
@@ -177,7 +177,7 @@ export default function AddToCalendarButton({
         {showSubscribe && (
           <>
             {/* Subscription Options */}
-            <div className="px-2 py-1.5 text-sm font-semibold text-var(--purple-ink)">
+            <div className="px-2 py-1.5 text-sm font-semibold text-[var(--purple-ink)]">
               Calendar Feeds
             </div>
 
@@ -187,7 +187,7 @@ export default function AddToCalendarButton({
             >
               <RefreshCw className="h-4 w-4 mr-2" />
               Subscribe to My Events
-              <div className="text-xs text-var(--purple-lavender) mt-0.5">
+              <div className="text-xs text-[var(--purple-lavender)] mt-0.5">
                 Auto-syncs your RSVP'd events
               </div>
             </DropdownMenuItem>
@@ -198,7 +198,7 @@ export default function AddToCalendarButton({
             >
               <Download className="h-4 w-4 mr-2" />
               Download All Events
-              <div className="text-xs text-var(--purple-lavender) mt-0.5">
+              <div className="text-xs text-[var(--purple-lavender)] mt-0.5">
                 One-time import of all upcoming events
               </div>
             </DropdownMenuItem>
@@ -206,7 +206,7 @@ export default function AddToCalendarButton({
         )}
 
         {!event && !showSubscribe && (
-          <div className="px-2 py-6 text-center text-sm text-var(--purple-lavender)">
+          <div className="px-2 py-6 text-center text-sm text-[var(--purple-lavender)]">
             No event selected
           </div>
         )}
diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index 5de7d7c..ca075c3 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -211,10 +211,10 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           className={`
             flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
             ${item.disabled
-              ? 'opacity-50 cursor-not-allowed text-var(--purple-lavender)'
+              ? 'opacity-50 cursor-not-allowed text-[var(--purple-lavender)]'
               : active
-                ? 'bg-var(--orange-light)/10 text-var(--orange-light)'
-                : 'text-var(--purple-ink) hover:bg-var(--neutral-800)/20'
+                ? 'bg-[var(--orange-light)]/10 text-[var(--orange-light)]'
+                : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/20'
             }
           `}
         >
@@ -229,7 +229,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             <>
               <span className="flex-1">{item.name}</span>
               {item.disabled && (
-                <Badge className="bg-var(--neutral-800) text-var(--purple-ink) text-xs px-2 py-0.5">
+                <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)] text-xs px-2 py-0.5">
                   Soon
                 </Badge>
               )}
@@ -265,7 +265,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       {/* Sidebar */}
       <aside
         className={`
-          bg-background border-r border-var(--neutral-800) transition-all duration-300 ease-out
+          bg-background border-r border-[var(--neutral-800)] transition-all duration-300 ease-out
           ${isMobile ? 'fixed inset-y-0 left-0 z-40' : 'relative'}
           ${isOpen ? 'w-64' : 'w-16'}
           ${isMobile && !isOpen ? '-translate-x-full' : 'translate-x-0'}
@@ -273,7 +273,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         `}
       >
         {/* Header */}
-        <div className="flex items-center justify-between p-4 border-b border-var(--neutral-800)">
+        <div className="flex items-center justify-between p-4 border-b border-[var(--neutral-800)]">
           <Link to="/" className="flex items-center gap-3 group flex-1 min-w-0">
             <img
               src={`${process.env.PUBLIC_URL}/loaf-logo.png`}
@@ -294,7 +294,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           </Link>
           <button
             onClick={onToggle}
-            className="p-2 rounded-lg hover:bg-var(--neutral-800)/20 transition-colors"
+            className="p-2 rounded-lg hover:bg-[var(--neutral-800)]/20 transition-colors"
             aria-label={isOpen ? 'Collapse sidebar' : 'Expand sidebar'}
           >
             {isMobile ? (
@@ -376,11 +376,11 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
         </nav>
 
         {/* User Section */}
-        <div className="border-t border-var(--neutral-800) p-4 space-y-2">
+        <div className="border-t border-[var(--neutral-800)] p-4 space-y-2">
           {isOpen && user && (
             <div className="px-4 py-3 mb-2 flex justify-between items-center">
               <div className="flex items-center gap-3">
-                <div className="h-10 w-10 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold">
+                <div className="h-10 w-10 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold">
                   {user.first_name?.[0]}{user.last_name?.[0]}
                 </div>
                 <div className="flex-1 min-w-0">
@@ -427,16 +427,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           {/* Storage Usage Widget */}
           <div className="mb-2">
             {isOpen ? (
-              <div className="px-4 py-3 bg-var(--lavender-500) rounded-lg">
+              <div className="px-4 py-3 bg-[var(--lavender-500)] rounded-lg">
                 <div className="flex items-center justify-between mb-2">
                   <span className="text-sm font-medium text-primary">Storage Usage</span>
                   <span className="text-xs text-muted-foreground">{storagePercentage}%</span>
                 </div>
-                <div className="w-full bg-var(--neutral-800) rounded-full h-2">
+                <div className="w-full bg-[var(--neutral-800)] rounded-full h-2">
                   <div
                     className={`h-2 rounded-full transition-all ${storagePercentage > 90 ? 'bg-red-500' :
                       storagePercentage > 75 ? 'bg-yellow-500' :
-                        'bg-var(--green-light)'
+                        'bg-[var(--green-light)]'
                       }`}
                     style={{ width: `${storagePercentage}%` }}
                   />
diff --git a/src/components/AttendanceDialog.js b/src/components/AttendanceDialog.js
index ee0d043..7853d6a 100644
--- a/src/components/AttendanceDialog.js
+++ b/src/components/AttendanceDialog.js
@@ -57,19 +57,19 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}
           </DialogTitle>
         </DialogHeader>
 
         <div className="space-y-4 mt-4">
           {rsvps.length === 0 ? (
-            <p className="text-center text-var(--purple-lavender) py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
+            <p className="text-center text-[var(--purple-lavender)] py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
           ) : (
             rsvps.map((rsvp) => (
               <div
                 key={rsvp.user_id}
-                className="flex items-center gap-3 p-4 border-2 border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) transition-colors"
+                className="flex items-center gap-3 p-4 border-2 border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] transition-colors"
               >
                 <Checkbox
                   checked={attendance[rsvp.user_id] || false}
@@ -79,11 +79,11 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
                   className="w-5 h-5"
                 />
                 <div className="flex-1">
-                  <p className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
-                  <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
+                  <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
+                  <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
                 </div>
                 {rsvp.attended && (
-                  <span className="text-sm text-var(--green-light) font-medium">
+                  <span className="text-sm text-[var(--green-light)] font-medium">
                     ✓ Attended
                   </span>
                 )}
@@ -96,14 +96,14 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
           <Button
             onClick={handleSave}
             disabled={loading}
-            className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
+            className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
           >
             {loading ? 'Saving...' : 'Save Attendance'}
           </Button>
           <Button
             onClick={() => onOpenChange(false)}
             variant="outline"
-            className="flex-1 border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background hover:text-var(--purple-ink) rounded-full"
+            className="flex-1 border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-background hover:text-[var(--purple-ink)] rounded-full"
           >
             Cancel
           </Button>
diff --git a/src/components/ChangePasswordDialog.js b/src/components/ChangePasswordDialog.js
index 879b490..331b772 100644
--- a/src/components/ChangePasswordDialog.js
+++ b/src/components/ChangePasswordDialog.js
@@ -69,14 +69,14 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
       <DialogContent className="sm:max-w-md bg-background">
         <DialogHeader>
           <div className="flex items-center gap-2 mb-2">
-            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-var(--lavender-300)">
-              <Lock className="h-5 w-5 text-var(--orange-light)" />
+            <div className="inline-flex items-center justify-center w-10 h-10 rounded-full bg-[var(--lavender-300)]">
+              <Lock className="h-5 w-5 text-[var(--orange-light)]" />
             </div>
-            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Change Password
             </DialogTitle>
           </div>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your password to keep your account secure.
           </DialogDescription>
         </DialogHeader>
@@ -92,7 +92,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.currentPassword}
               onChange={handleInputChange}
               placeholder="Enter current password"
-              className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -106,7 +106,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.newPassword}
               onChange={handleInputChange}
               placeholder="Enter new password (min. 6 characters)"
-              className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -120,7 +120,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.confirmPassword}
               onChange={handleInputChange}
               placeholder="Re-enter new password"
-              className="h-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -136,7 +136,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
             <Button
               type="submit"
               disabled={loading}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 disabled:opacity-50"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 disabled:opacity-50"
             >
               {loading ? 'Changing...' : 'Change Password'}
             </Button>
diff --git a/src/components/ConfirmationDialog.js b/src/components/ConfirmationDialog.js
index 7164b56..1b1ce5c 100644
--- a/src/components/ConfirmationDialog.js
+++ b/src/components/ConfirmationDialog.js
@@ -38,8 +38,8 @@ const ConfirmationDialog = ({
   const variants = {
     warning: {
       icon: AlertTriangle,
-      iconColor: 'text-var(--orange-light)',
-      confirmButtonClass: 'bg-var(--orange-light) text-white hover:bg-var(--orange-sand) rounded-full px-6',
+      iconColor: 'text-[var(--orange-light)]',
+      confirmButtonClass: 'bg-[var(--orange-light)] text-white hover:bg-[var(--orange-sand)] rounded-full px-6',
     },
     danger: {
       icon: AlertTriangle,
@@ -48,13 +48,13 @@ const ConfirmationDialog = ({
     },
     info: {
       icon: Info,
-      iconColor: 'text-var(--purple-lavender)',
-      confirmButtonClass: 'bg-var(--purple-lavender) text-white hover:bg-var(--purple-plum) rounded-full px-6',
+      iconColor: 'text-[var(--purple-lavender)]',
+      confirmButtonClass: 'bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-plum)] rounded-full px-6',
     },
     success: {
       icon: CheckCircle,
-      iconColor: 'text-var(--green-light)',
-      confirmButtonClass: 'bg-var(--green-light) text-white hover:bg-var(--green-pastel) rounded-full px-6',
+      iconColor: 'text-[var(--green-light)]',
+      confirmButtonClass: 'bg-[var(--green-light)] text-white hover:bg-[var(--green-pastel)] rounded-full px-6',
     },
   };
 
@@ -63,21 +63,21 @@ const ConfirmationDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="bg-background rounded-2xl border border-var(--neutral-800) p-0 overflow-hidden max-w-md">
+      <AlertDialogContent className="bg-background rounded-2xl border border-[var(--neutral-800)] p-0 overflow-hidden max-w-md">
         <AlertDialogHeader className="p-6 pb-4">
           <div className="flex items-start gap-4">
-            <div className={`p-3 rounded-full bg-var(--lavender-500) ${config.iconColor}`}>
+            <div className={`p-3 rounded-full bg-[var(--lavender-500)] ${config.iconColor}`}>
               <Icon className="h-6 w-6" />
             </div>
             <div className="flex-1">
               <AlertDialogTitle
-                className="text-xl font-semibold text-var(--purple-ink) mb-2"
+                className="text-xl font-semibold text-[var(--purple-ink)] mb-2"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {title}
               </AlertDialogTitle>
               <AlertDialogDescription
-                className="text-var(--purple-lavender) text-sm leading-relaxed"
+                className="text-[var(--purple-lavender)] text-sm leading-relaxed"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 {description}
@@ -85,9 +85,9 @@ const ConfirmationDialog = ({
             </div>
           </div>
         </AlertDialogHeader>
-        <AlertDialogFooter className="p-6 pt-4 bg-var(--lavender-500) flex-row gap-3 justify-end">
+        <AlertDialogFooter className="p-6 pt-4 bg-[var(--lavender-500)] flex-row gap-3 justify-end">
           <AlertDialogCancel
-            className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-background rounded-full px-6"
+            className="border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-background rounded-full px-6"
             disabled={loading}
           >
             {cancelText}
diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js
index 32ad645..39dd96a 100644
--- a/src/components/CreateMemberDialog.js
+++ b/src/components/CreateMemberDialog.js
@@ -121,11 +121,11 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
             Create Member
           </DialogTitle>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new member account with direct login access. Member will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -135,7 +135,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Email & Password Row */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="email" className="text-var(--purple-ink)">
+                <Label htmlFor="email" className="text-[var(--purple-ink)]">
                   Email <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -143,7 +143,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="member@example.com"
                 />
                 {errors.email && (
@@ -152,7 +152,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="password" className="text-var(--purple-ink)">
+                <Label htmlFor="password" className="text-[var(--purple-ink)]">
                   Password <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -160,7 +160,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="Minimum 8 characters"
                 />
                 {errors.password && (
@@ -172,14 +172,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Name Row */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="first_name" className="text-var(--purple-ink)">
+                <Label htmlFor="first_name" className="text-[var(--purple-ink)]">
                   First Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="John"
                 />
                 {errors.first_name && (
@@ -188,14 +188,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="last_name" className="text-var(--purple-ink)">
+                <Label htmlFor="last_name" className="text-[var(--purple-ink)]">
                   Last Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="Doe"
                 />
                 {errors.last_name && (
@@ -206,7 +206,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Phone */}
             <div className="grid gap-2">
-              <Label htmlFor="phone" className="text-var(--purple-ink)">
+              <Label htmlFor="phone" className="text-[var(--purple-ink)]">
                 Phone <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -214,7 +214,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -224,14 +224,14 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Address */}
             <div className="grid gap-2">
-              <Label htmlFor="address" className="text-var(--purple-ink)">
+              <Label htmlFor="address" className="text-[var(--purple-ink)]">
                 Address
               </Label>
               <Input
                 id="address"
                 value={formData.address}
                 onChange={(e) => handleChange('address', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="123 Main St"
               />
             </div>
@@ -239,35 +239,35 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* City, State, Zipcode Row */}
             <div className="grid md:grid-cols-3 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="city" className="text-var(--purple-ink)">City</Label>
+                <Label htmlFor="city" className="text-[var(--purple-ink)]">City</Label>
                 <Input
                   id="city"
                   value={formData.city}
                   onChange={(e) => handleChange('city', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="San Francisco"
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="state" className="text-var(--purple-ink)">State</Label>
+                <Label htmlFor="state" className="text-[var(--purple-ink)]">State</Label>
                 <Input
                   id="state"
                   value={formData.state}
                   onChange={(e) => handleChange('state', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="CA"
                   maxLength={2}
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="zipcode" className="text-var(--purple-ink)">Zipcode</Label>
+                <Label htmlFor="zipcode" className="text-[var(--purple-ink)]">Zipcode</Label>
                 <Input
                   id="zipcode"
                   value={formData.zipcode}
                   onChange={(e) => handleChange('zipcode', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="94102"
                 />
               </div>
@@ -276,24 +276,24 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Dates Row */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="date_of_birth" className="text-var(--purple-ink)">Date of Birth</Label>
+                <Label htmlFor="date_of_birth" className="text-[var(--purple-ink)]">Date of Birth</Label>
                 <Input
                   id="date_of_birth"
                   type="date"
                   value={formData.date_of_birth}
                   onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 />
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="member_since" className="text-var(--purple-ink)">Member Since</Label>
+                <Label htmlFor="member_since" className="text-[var(--purple-ink)]">Member Since</Label>
                 <Input
                   id="member_since"
                   type="date"
                   value={formData.member_since}
                   onChange={(e) => handleChange('member_since', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 />
               </div>
             </div>
@@ -311,7 +311,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             </Button>
             <Button
               type="submit"
-              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
               disabled={loading}
             >
               {loading ? (
diff --git a/src/components/CreateStaffDialog.js b/src/components/CreateStaffDialog.js
index a5bc69e..7509e3d 100644
--- a/src/components/CreateStaffDialog.js
+++ b/src/components/CreateStaffDialog.js
@@ -101,11 +101,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[600px] rounded-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
             Create Staff Member
           </DialogTitle>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new staff account with direct login access. User will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -114,7 +114,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
           <div className="grid gap-6 py-4">
             {/* Email */}
             <div className="grid gap-2">
-              <Label htmlFor="email" className="text-var(--purple-ink)">
+              <Label htmlFor="email" className="text-[var(--purple-ink)]">
                 Email <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -122,7 +122,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="email"
                 value={formData.email}
                 onChange={(e) => handleChange('email', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="staff@example.com"
               />
               {errors.email && (
@@ -132,7 +132,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Password */}
             <div className="grid gap-2">
-              <Label htmlFor="password" className="text-var(--purple-ink)">
+              <Label htmlFor="password" className="text-[var(--purple-ink)]">
                 Password <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -140,7 +140,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="password"
                 value={formData.password}
                 onChange={(e) => handleChange('password', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="Minimum 8 characters"
               />
               {errors.password && (
@@ -150,14 +150,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* First Name */}
             <div className="grid gap-2">
-              <Label htmlFor="first_name" className="text-var(--purple-ink)">
+              <Label htmlFor="first_name" className="text-[var(--purple-ink)]">
                 First Name <span className="text-red-500">*</span>
               </Label>
               <Input
                 id="first_name"
                 value={formData.first_name}
                 onChange={(e) => handleChange('first_name', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="John"
               />
               {errors.first_name && (
@@ -167,14 +167,14 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Last Name */}
             <div className="grid gap-2">
-              <Label htmlFor="last_name" className="text-var(--purple-ink)">
+              <Label htmlFor="last_name" className="text-[var(--purple-ink)]">
                 Last Name <span className="text-red-500">*</span>
               </Label>
               <Input
                 id="last_name"
                 value={formData.last_name}
                 onChange={(e) => handleChange('last_name', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="Doe"
               />
               {errors.last_name && (
@@ -184,7 +184,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Phone */}
             <div className="grid gap-2">
-              <Label htmlFor="phone" className="text-var(--purple-ink)">
+              <Label htmlFor="phone" className="text-[var(--purple-ink)]">
                 Phone <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -192,7 +192,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -202,11 +202,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
             {/* Role */}
             <div className="grid gap-2">
-              <Label htmlFor="role" className="text-var(--purple-ink)">
+              <Label htmlFor="role" className="text-[var(--purple-ink)]">
                 Role <span className="text-red-500">*</span>
               </Label>
               <Select value={formData.role} onValueChange={(value) => handleChange('role', value)}>
-                <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+                <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
@@ -229,7 +229,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             </Button>
             <Button
               type="submit"
-              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
               disabled={loading}
             >
               {loading ? (
diff --git a/src/components/ImportMembersDialog.js b/src/components/ImportMembersDialog.js
index 8b86171..7aa093d 100644
--- a/src/components/ImportMembersDialog.js
+++ b/src/components/ImportMembersDialog.js
@@ -140,11 +140,11 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />
             {importResult ? 'Import Results' : 'Import Members from CSV'}
           </DialogTitle>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {importResult
               ? 'Review the import results below'
               : 'Upload a CSV file to bulk import members. Ensure the CSV has the required columns.'}
@@ -155,8 +155,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           // Upload Form
           <div className="grid gap-6 py-4">
             {/* CSV Format Instructions */}
-            <Alert className="border-var(--purple-lavender) bg-var(--lavender-700)">
-              <AlertDescription className="text-sm text-var(--purple-ink)">
+            <Alert className="border-[var(--purple-lavender)] bg-[var(--lavender-700)]">
+              <AlertDescription className="text-sm text-[var(--purple-ink)]">
                 <strong>Required columns:</strong> Email, First Name, Last Name, Phone, Role
                 <br />
                 <strong>Optional columns:</strong> Status, Address, City, State, Zipcode, Date of Birth, Member Since
@@ -168,8 +168,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* File Upload Area */}
             <div
               className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${dragActive
-                ? 'border-var(--purple-lavender) bg-var(--lavender-700)'
-                : 'border-var(--neutral-800) hover:border-var(--purple-lavender) hover:bg-var(--lavender-700)'
+                ? 'border-[var(--purple-lavender)] bg-[var(--lavender-700)]'
+                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:bg-[var(--lavender-700)]'
                 }`}
               onDragEnter={handleDrag}
               onDragLeave={handleDrag}
@@ -178,12 +178,12 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             >
               {file ? (
                 <div className="flex flex-col items-center gap-4">
-                  <FileUp className="h-16 w-16 text-var(--green-light)" />
+                  <FileUp className="h-16 w-16 text-[var(--green-light)]" />
                   <div>
-                    <p className="text-lg font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <p className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {file.name}
                     </p>
-                    <p className="text-sm text-var(--purple-lavender)">
+                    <p className="text-sm text-[var(--purple-lavender)]">
                       {(file.size / 1024).toFixed(2)} KB
                     </p>
                   </div>
@@ -198,12 +198,12 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                 </div>
               ) : (
                 <div className="flex flex-col items-center gap-4">
-                  <Upload className="h-16 w-16 text-var(--neutral-800)" />
+                  <Upload className="h-16 w-16 text-[var(--neutral-800)]" />
                   <div>
-                    <p className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <p className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Drag and drop your CSV file here
                     </p>
-                    <p className="text-sm text-var(--purple-lavender) mb-4">or</p>
+                    <p className="text-sm text-[var(--purple-lavender)] mb-4">or</p>
                     <Label htmlFor="file-upload">
                       <Button variant="outline" className="rounded-xl cursor-pointer" asChild>
                         <span>Browse Files</span>
@@ -222,14 +222,14 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             </div>
 
             {/* Options */}
-            <div className="flex items-center gap-3 p-4 bg-var(--lavender-700) rounded-xl">
+            <div className="flex items-center gap-3 p-4 bg-[var(--lavender-700)] rounded-xl">
               <Checkbox
                 checked={updateExisting}
                 onCheckedChange={setUpdateExisting}
                 id="update-existing"
-                className="h-5 w-5 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
+                className="h-5 w-5 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
               />
-              <Label htmlFor="update-existing" className="text-var(--purple-ink) cursor-pointer">
+              <Label htmlFor="update-existing" className="text-[var(--purple-ink)] cursor-pointer">
                 Update existing members (if email already exists)
               </Label>
             </div>
@@ -239,9 +239,9 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           <div className="grid gap-6 py-4">
             {/* Summary Cards */}
             <div className="grid md:grid-cols-4 gap-4">
-              <div className="p-4 bg-background rounded-xl border border-var(--neutral-800) text-center">
-                <p className="text-sm text-var(--purple-lavender) mb-1">Total Rows</p>
-                <p className="text-2xl font-semibold text-var(--purple-ink)">{importResult.total_rows}</p>
+              <div className="p-4 bg-background rounded-xl border border-[var(--neutral-800)] text-center">
+                <p className="text-sm text-[var(--purple-lavender)] mb-1">Total Rows</p>
+                <p className="text-2xl font-semibold text-[var(--purple-ink)]">{importResult.total_rows}</p>
               </div>
               <div className="p-4 bg-green-50 rounded-xl border border-green-200 text-center">
                 <p className="text-sm text-green-700 mb-1">Successful</p>
@@ -251,7 +251,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                 <p className="text-sm text-red-700 mb-1">Failed</p>
                 <p className="text-2xl font-semibold text-red-600">{importResult.failed_rows}</p>
               </div>
-              <div className="p-4 bg-background rounded-xl border border-var(--neutral-800) flex items-center justify-center gap-2">
+              <div className="p-4 bg-background rounded-xl border border-[var(--neutral-800)] flex items-center justify-center gap-2">
                 {getStatusIcon(importResult.status)}
                 {getStatusBadge(importResult.status)}
               </div>
@@ -260,23 +260,23 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Errors Table */}
             {importResult.errors && importResult.errors.length > 0 && (
               <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Errors ({importResult.errors.length} {importResult.errors.length === 10 ? '- showing first 10' : ''})
                 </h3>
-                <div className="border border-var(--neutral-800) rounded-xl overflow-hidden">
+                <div className="border border-[var(--neutral-800)] rounded-xl overflow-hidden">
                   <Table>
                     <TableHeader>
-                      <TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
-                        <TableHead className="text-var(--purple-ink) font-semibold">Row</TableHead>
-                        <TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
-                        <TableHead className="text-var(--purple-ink) font-semibold">Error</TableHead>
+                      <TableRow className="bg-[var(--neutral-800)] hover:bg-[var(--neutral-800)]">
+                        <TableHead className="text-[var(--purple-ink)] font-semibold">Row</TableHead>
+                        <TableHead className="text-[var(--purple-ink)] font-semibold">Email</TableHead>
+                        <TableHead className="text-[var(--purple-ink)] font-semibold">Error</TableHead>
                       </TableRow>
                     </TableHeader>
                     <TableBody>
                       {importResult.errors.map((error, idx) => (
-                        <TableRow key={idx} className="hover:bg-var(--lavender-700)">
-                          <TableCell className="font-medium text-var(--purple-ink)">{error.row}</TableCell>
-                          <TableCell className="text-var(--purple-lavender)">{error.email}</TableCell>
+                        <TableRow key={idx} className="hover:bg-[var(--lavender-700)]">
+                          <TableCell className="font-medium text-[var(--purple-ink)]">{error.row}</TableCell>
+                          <TableCell className="text-[var(--purple-lavender)]">{error.email}</TableCell>
                           <TableCell className="text-red-600 text-sm">{error.error}</TableCell>
                         </TableRow>
                       ))}
@@ -301,7 +301,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
               </Button>
               <Button
                 onClick={handleSubmit}
-                className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+                className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
                 disabled={loading || !file}
               >
                 {loading ? (
@@ -320,7 +320,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           ) : (
             <Button
               onClick={handleClose}
-              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
             >
               Done
             </Button>
diff --git a/src/components/InviteStaffDialog.js b/src/components/InviteStaffDialog.js
index 9ae9a7e..2af9791 100644
--- a/src/components/InviteStaffDialog.js
+++ b/src/components/InviteStaffDialog.js
@@ -125,11 +125,11 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     <Dialog open={open} onOpenChange={handleClose}>
       <DialogContent className="sm:max-w-[600px] rounded-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-var(--purple-ink) flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Mail className="h-6 w-6" />
             {invitationUrl ? 'Invitation Sent' : 'Invite Staff Member'}
           </DialogTitle>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {invitationUrl
               ? 'The invitation has been sent via email. You can also copy the link below.'
               : 'Send an email invitation to join as staff. They will set their own password.'}
@@ -139,16 +139,16 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
         {invitationUrl ? (
           // Show invitation URL after successful send
           <div className="py-4">
-            <Label className="text-var(--purple-ink) mb-2 block">Invitation Link (expires in 7 days)</Label>
+            <Label className="text-[var(--purple-ink)] mb-2 block">Invitation Link (expires in 7 days)</Label>
             <div className="flex gap-2">
               <Input
                 value={invitationUrl}
                 readOnly
-                className="rounded-xl border-2 border-var(--neutral-800) bg-gray-50"
+                className="rounded-xl border-2 border-[var(--neutral-800)] bg-gray-50"
               />
               <Button
                 onClick={copyToClipboard}
-                className="rounded-xl bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white flex-shrink-0"
+                className="rounded-xl bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
               >
                 {copied ? (
                   <>
@@ -170,7 +170,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             <div className="grid gap-6 py-4">
               {/* Email */}
               <div className="grid gap-2">
-                <Label htmlFor="email" className="text-var(--purple-ink)">
+                <Label htmlFor="email" className="text-[var(--purple-ink)]">
                   Email <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -178,7 +178,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="staff@example.com"
                 />
                 {errors.email && (
@@ -188,35 +188,35 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
 
               {/* First Name (Optional) */}
               <div className="grid gap-2">
-                <Label htmlFor="first_name" className="text-var(--purple-ink)">
+                <Label htmlFor="first_name" className="text-[var(--purple-ink)]">
                   First Name <span className="text-gray-400">(Optional)</span>
                 </Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="John"
                 />
               </div>
 
               {/* Last Name (Optional) */}
               <div className="grid gap-2">
-                <Label htmlFor="last_name" className="text-var(--purple-ink)">
+                <Label htmlFor="last_name" className="text-[var(--purple-ink)]">
                   Last Name <span className="text-gray-400">(Optional)</span>
                 </Label>
                 <Input
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="Doe"
                 />
               </div>
 
               {/* Phone (Optional) */}
               <div className="grid gap-2">
-                <Label htmlFor="phone" className="text-var(--purple-ink)">
+                <Label htmlFor="phone" className="text-[var(--purple-ink)]">
                   Phone <span className="text-gray-400">(Optional)</span>
                 </Label>
                 <Input
@@ -224,14 +224,14 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="tel"
                   value={formData.phone}
                   onChange={(e) => handleChange('phone', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="(555) 123-4567"
                 />
               </div>
 
               {/* Role */}
               <div className="grid gap-2">
-                <Label htmlFor="role" className="text-var(--purple-ink)">
+                <Label htmlFor="role" className="text-[var(--purple-ink)]">
                   Role <span className="text-red-500">*</span>
                 </Label>
                 <Select
@@ -239,7 +239,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   onValueChange={(value) => handleChange('role', value)}
                   disabled={loadingRoles}
                 >
-                  <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+                  <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                     <SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select a role"} />
                   </SelectTrigger>
                   <SelectContent>
@@ -275,7 +275,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               </Button>
               <Button
                 type="submit"
-                className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+                className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
                 disabled={loading}
               >
                 {loading ? (
@@ -298,7 +298,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
           <DialogFooter>
             <Button
               onClick={handleClose}
-              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
             >
               Done
             </Button>
diff --git a/src/components/MemberFooter.js b/src/components/MemberFooter.js
index 003116f..6139838 100644
--- a/src/components/MemberFooter.js
+++ b/src/components/MemberFooter.js
@@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu
 
 const MemberFooter = () => {
   return (
-    <footer className="bg-var(--purple-ink) text-white mt-auto">
+    <footer className="bg-[var(--purple-ink)] text-white mt-auto">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="grid md:grid-cols-4 gap-8">
           {/* Logo & About */}
@@ -104,7 +104,7 @@ const MemberFooter = () => {
       </div>
 
       {/* Bottom Bar */}
-      <div className="border-t border-var(--purple-lavender)">
+      <div className="border-t border-[var(--purple-lavender)]">
         <div className="max-w-7xl mx-auto px-6 py-4">
           <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <div className="flex gap-6">
diff --git a/src/components/MemberRoute.js b/src/components/MemberRoute.js
index 23422c3..2f3d1f1 100644
--- a/src/components/MemberRoute.js
+++ b/src/components/MemberRoute.js
@@ -19,8 +19,8 @@ const MemberRoute = ({ children }) => {
 
   if (loading) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-var(--neutral-200:)">
-        <p className="text-var(--slate-muted)">Loading...</p>
+      <div className="min-h-screen flex items-center justify-center bg-[var(--neutral-200:)]">
+        <p className="text-[var(--slate-muted)]">Loading...</p>
       </div>
     );
   }
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 6d135b5..9d529a5 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -26,7 +26,7 @@ const Navbar = () => {
   return (
     <>
       {/* Top Header - Member Actions (Desktop Only) */}
-      <header className="hidden lg:flex bg-gradient-to-r from-var(--purple-amethyst) to-var(--purple-deep) px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
+      <header className="hidden lg:flex bg-gradient-to-r from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-4 sm:px-8 md:px-16 py-4 justify-end items-center gap-4 sm:gap-6">
         {user && (
           <span className="text-white text-base font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Welcome, {user.first_name}
@@ -53,7 +53,7 @@ const Navbar = () => {
         </button>
         <Link to="/donate">
           <Button
-            className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
+            className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-[25px] px-[54px] py-[10px] text-[16.5px] font-semibold h-[41px]"
             style={{ fontFamily: "'Montserrat', sans-serif" }}
           >
             Donate
@@ -62,7 +62,7 @@ const Navbar = () => {
       </header>
 
       {/* Main Header - Member Navigation */}
-      <header className="bg-var(--purple-lavender) px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
+      <header className="bg-[var(--purple-lavender)] px-4 sm:px-8 md:px-16 py-2 flex justify-between items-center">
         <Link to="/dashboard">
           <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
         </Link>
@@ -86,19 +86,19 @@ const Navbar = () => {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
               <DropdownMenuItem asChild>
-                <Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                <Link to="/about/history" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   History
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                <Link to="/about/mission-values" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Mission and Values
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                <Link to="/about/board" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Board of Directors
                 </Link>
@@ -151,19 +151,19 @@ const Navbar = () => {
             </DropdownMenuTrigger>
             <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
               <DropdownMenuItem asChild>
-                <Link to="/members/newsletters" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                <Link to="/members/newsletters" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Newsletters
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/members/financials" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                <Link to="/members/financials" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Financials
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem asChild>
-                <Link to="/members/bylaws" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                <Link to="/members/bylaws" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                   style={{ fontFamily: "'Poppins', sans-serif" }}>
                   Bylaws
                 </Link>
@@ -200,7 +200,7 @@ const Navbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-var(--purple-lavender) to-var(--purple-deep) shadow-2xl flex flex-col">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-gradient-to-b from-[var(--purple-lavender)] to-[var(--purple-deep)] shadow-2xl flex flex-col">
             {/* Header */}
             <div className="flex items-center justify-between p-6 border-b border-white/20">
               <div className="flex items-center gap-3">
@@ -383,7 +383,7 @@ const Navbar = () => {
                 onClick={() => setIsMobileMenuOpen(false)}
               >
                 <Button
-                  className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-lg font-semibold"
+                  className="w-full bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-lg font-semibold"
                   style={{ fontFamily: "'Montserrat', sans-serif" }}
                 >
                   Donate
diff --git a/src/components/PaymentActivationDialog.js b/src/components/PaymentActivationDialog.js
index 36a3099..a0ec359 100644
--- a/src/components/PaymentActivationDialog.js
+++ b/src/components/PaymentActivationDialog.js
@@ -159,10 +159,10 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl">
         <DialogHeader>
-          <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Activate Manual Payment
           </DialogTitle>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Record offline payment for {user.first_name} {user.last_name} ({user.email})
           </DialogDescription>
         </DialogHeader>
@@ -170,7 +170,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
         <form onSubmit={handleSubmit} className="space-y-6 py-4">
           {/* Subscription Plan Selection */}
           <div className="space-y-2">
-            <Label htmlFor="plan_id" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="plan_id" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Subscription Plan
             </Label>
             <Select
@@ -187,7 +187,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                 });
               }}
             >
-              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+              <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                 <SelectValue placeholder="Select subscription plan" />
               </SelectTrigger>
               <SelectContent>
@@ -203,7 +203,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               </SelectContent>
             </Select>
             {selectedPlan && (
-              <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
               </p>
             )}
@@ -211,7 +211,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Payment Amount */}
           <div className="space-y-2">
-            <Label htmlFor="amount" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="amount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Payment Amount ($)
             </Label>
             <Input
@@ -222,11 +222,11 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               placeholder="Enter amount"
               value={formData.amount}
               onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
-              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               required
             />
             {selectedPlan && (
-              <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
               </p>
             )}
@@ -234,14 +234,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Breakdown Display */}
           {breakdown && breakdown.total >= breakdown.base && (
-            <Card className="p-4 bg-var(--lavender-400) border border-var(--neutral-800)">
+            <Card className="p-4 bg-[var(--lavender-400)] border border-[var(--neutral-800)]">
               <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <div className="flex justify-between text-var(--purple-ink)">
+                <div className="flex justify-between text-[var(--purple-ink)]">
                   <span>Membership Fee:</span>
                   <span className="font-semibold">{formatPrice(breakdown.base)}</span>
                 </div>
                 {breakdown.donation > 0 && (
-                  <div className="flex justify-between text-var(--orange-light)">
+                  <div className="flex justify-between text-[var(--orange-light)]">
                     <span className="flex items-center gap-1">
                       <Heart className="h-4 w-4" />
                       Additional Donation:
@@ -249,7 +249,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
                   </div>
                 )}
-                <div className="flex justify-between text-var(--purple-ink) font-bold text-base pt-2 border-t border-var(--neutral-800)">
+                <div className="flex justify-between text-[var(--purple-ink)] font-bold text-base pt-2 border-t border-[var(--neutral-800)]">
                   <span>Total:</span>
                   <span>{formatPrice(breakdown.total)}</span>
                 </div>
@@ -259,17 +259,17 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Payment Date */}
           <div className="space-y-2">
-            <Label htmlFor="payment_date" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="payment_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Payment Date
             </Label>
             <div className="relative">
-              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
               <Input
                 id="payment_date"
                 type="date"
                 value={formData.payment_date}
                 onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
-                className="pl-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 required
               />
             </div>
@@ -277,14 +277,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Payment Method */}
           <div className="space-y-2">
-            <Label htmlFor="payment_method" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="payment_method" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Payment Method
             </Label>
             <Select
               value={formData.payment_method}
               onValueChange={(value) => setFormData({ ...formData, payment_method: value })}
             >
-              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+              <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                 <SelectValue placeholder="Select payment method" />
               </SelectTrigger>
               <SelectContent>
@@ -298,7 +298,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Subscription Period */}
           <div className="space-y-3">
-            <Label className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>Subscription Period</Label>
+            <Label className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>Subscription Period</Label>
 
             <div className="flex items-center gap-2">
               <input
@@ -306,9 +306,9 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                 id="use_custom_period"
                 checked={useCustomPeriod}
                 onChange={(e) => setUseCustomPeriod(e.target.checked)}
-                className="rounded border-var(--neutral-800)"
+                className="rounded border-[var(--neutral-800)]"
               />
-              <Label htmlFor="use_custom_period" className="text-sm text-var(--purple-lavender) font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Label htmlFor="use_custom_period" className="text-sm text-[var(--purple-lavender)] font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Use custom dates instead of plan's billing cycle
               </Label>
             </div>
@@ -316,7 +316,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
             {useCustomPeriod ? (
               <div className="grid grid-cols-2 gap-4">
                 <div className="space-y-2">
-                  <Label htmlFor="custom_period_start" className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="custom_period_start" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Start Date
                   </Label>
                   <Input
@@ -324,12 +324,12 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     type="date"
                     value={formData.custom_period_start}
                     onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
-                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                     required={useCustomPeriod}
                   />
                 </div>
                 <div className="space-y-2">
-                  <Label htmlFor="custom_period_end" className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="custom_period_end" className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                     End Date
                   </Label>
                   <Input
@@ -337,18 +337,18 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     type="date"
                     value={formData.custom_period_end}
                     onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
-                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                     required={useCustomPeriod}
                   />
                 </div>
               </div>
             ) : (
               selectedPlan && (
-                <div className="text-sm text-var(--purple-lavender) bg-var(--lavender-300) p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="text-sm text-[var(--purple-lavender)] bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {selectedPlan.custom_cycle_enabled ? (
                     <>
                       <p>
-                        <span className="font-medium text-var(--purple-ink)">Plan uses custom billing cycle:</span>
+                        <span className="font-medium text-[var(--purple-ink)]">Plan uses custom billing cycle:</span>
                         <br />
                         {(() => {
                           const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -378,7 +378,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
 
           {/* Notes */}
           <div className="space-y-2">
-            <Label htmlFor="notes" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Label htmlFor="notes" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
               Notes (Optional)
             </Label>
             <Textarea
@@ -386,7 +386,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               placeholder="Additional notes about the payment..."
               value={formData.notes}
               onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
-              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) min-h-[100px]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] min-h-[100px]"
             />
           </div>
 
@@ -395,14 +395,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               type="button"
               variant="outline"
               onClick={() => onOpenChange(false)}
-              className="rounded-full border-2 border-var(--neutral-800)"
+              className="rounded-full border-2 border-[var(--neutral-800)]"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="bg-var(--green-light) text-white hover:bg-var(--green-mint) rounded-full"
+              className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)] rounded-full"
             >
               {loading ? 'Activating...' : 'Activate Payment'}
             </Button>
diff --git a/src/components/PendingInvitationsTable.js b/src/components/PendingInvitationsTable.js
index f064885..6be4eec 100644
--- a/src/components/PendingInvitationsTable.js
+++ b/src/components/PendingInvitationsTable.js
@@ -73,9 +73,9 @@ const PendingInvitationsTable = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
-      admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
-      member: { label: 'Member', className: 'bg-var(--neutral-800) text-var(--purple-ink)' }
+      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
+      member: { label: 'Member', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' }
     };
 
     const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -111,7 +111,7 @@ const PendingInvitationsTable = () => {
   if (loading) {
     return (
       <div className="text-center py-8">
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading invitations...
         </p>
       </div>
@@ -120,12 +120,12 @@ const PendingInvitationsTable = () => {
 
   if (invitations.length === 0) {
     return (
-      <Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
-        <Mail className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-        <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
+        <Mail className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+        <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
           No Pending Invitations
         </h3>
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           All invitations have been accepted or expired
         </p>
       </Card>
@@ -134,37 +134,37 @@ const PendingInvitationsTable = () => {
 
   return (
     <>
-      <Card className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
+      <Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
         <Table>
           <TableHeader>
-            <TableRow className="bg-var(--neutral-800) hover:bg-var(--neutral-800)">
-              <TableHead className="text-var(--purple-ink) font-semibold">Email</TableHead>
-              <TableHead className="text-var(--purple-ink) font-semibold">Name</TableHead>
-              <TableHead className="text-var(--purple-ink) font-semibold">Role</TableHead>
-              <TableHead className="text-var(--purple-ink) font-semibold">Invited</TableHead>
-              <TableHead className="text-var(--purple-ink) font-semibold">Expires</TableHead>
-              <TableHead className="text-var(--purple-ink) font-semibold text-right">Actions</TableHead>
+            <TableRow className="bg-[var(--neutral-800)] hover:bg-[var(--neutral-800)]">
+              <TableHead className="text-[var(--purple-ink)] font-semibold">Email</TableHead>
+              <TableHead className="text-[var(--purple-ink)] font-semibold">Name</TableHead>
+              <TableHead className="text-[var(--purple-ink)] font-semibold">Role</TableHead>
+              <TableHead className="text-[var(--purple-ink)] font-semibold">Invited</TableHead>
+              <TableHead className="text-[var(--purple-ink)] font-semibold">Expires</TableHead>
+              <TableHead className="text-[var(--purple-ink)] font-semibold text-right">Actions</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
             {invitations.map((invitation) => (
-              <TableRow key={invitation.id} className="hover:bg-var(--lavender-700)">
-                <TableCell className="font-medium text-var(--purple-ink)">
+              <TableRow key={invitation.id} className="hover:bg-[var(--lavender-700)]">
+                <TableCell className="font-medium text-[var(--purple-ink)]">
                   {invitation.email}
                 </TableCell>
-                <TableCell className="text-var(--purple-lavender)">
+                <TableCell className="text-[var(--purple-lavender)]">
                   {invitation.first_name && invitation.last_name
                     ? `${invitation.first_name} ${invitation.last_name}`
                     : '-'}
                 </TableCell>
                 <TableCell>{getRoleBadge(invitation.role)}</TableCell>
-                <TableCell className="text-var(--purple-lavender)">
+                <TableCell className="text-[var(--purple-lavender)]">
                   {new Date(invitation.invited_at).toLocaleDateString()}
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2">
-                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-var(--purple-lavender)'}`} />
-                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-var(--purple-lavender)'}`}>
+                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-[var(--purple-lavender)]'}`} />
+                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-[var(--purple-lavender)]'}`}>
                       {formatDate(invitation.expires_at)}
                     </span>
                   </div>
@@ -176,7 +176,7 @@ const PendingInvitationsTable = () => {
                       size="sm"
                       onClick={() => handleResend(invitation.id)}
                       disabled={resending === invitation.id}
-                      className="rounded-xl border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
+                      className="rounded-xl border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white"
                     >
                       {resending === invitation.id ? (
                         'Resending...'
@@ -208,10 +208,10 @@ const PendingInvitationsTable = () => {
       <AlertDialog open={revokeDialog.open} onOpenChange={(open) => setRevokeDialog({ open, invitation: null })}>
         <AlertDialogContent className="rounded-2xl">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <AlertDialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Revoke Invitation
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to revoke the invitation for{' '}
               <span className="font-semibold">{revokeDialog.invitation?.email}</span>?
               This action cannot be undone.
diff --git a/src/components/PlanDialog.js b/src/components/PlanDialog.js
index 9420611..01b30e0 100644
--- a/src/components/PlanDialog.js
+++ b/src/components/PlanDialog.js
@@ -161,10 +161,10 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
         <DialogHeader>
-          <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}
           </DialogTitle>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {plan ? 'Update plan details below' : 'Enter plan details to create a new subscription plan'}
           </DialogDescription>
         </DialogHeader>
@@ -197,8 +197,8 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           </div>
 
           {/* Dynamic Pricing */}
-          <div className="border-2 border-var(--neutral-800) rounded-lg p-4 space-y-4">
-            <h3 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <div className="border-2 border-[var(--neutral-800)] rounded-lg p-4 space-y-4">
+            <h3 className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Dynamic Pricing
             </h3>
 
@@ -216,7 +216,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-var(--purple-lavender) mt-1">Minimum $30</p>
+                <p className="text-xs text-[var(--purple-lavender)] mt-1">Minimum $30</p>
               </div>
 
               <div>
@@ -232,7 +232,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-var(--purple-lavender) mt-1">Pre-filled amount</p>
+                <p className="text-xs text-[var(--purple-lavender)] mt-1">Pre-filled amount</p>
               </div>
             </div>
 
@@ -240,7 +240,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
             <div className="flex items-center justify-between pt-2">
               <div>
                 <Label htmlFor="allow_donation">Allow Donations</Label>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Members can pay more than minimum
                 </p>
               </div>
@@ -252,7 +252,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   onChange={(e) => setFormData({ ...formData, allow_donation: e.target.checked })}
                   className="sr-only peer"
                 />
-                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-var(--purple-lavender)/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-var(--green-light)"></div>
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--purple-lavender)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
               </label>
             </div>
           </div>
@@ -279,11 +279,11 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
           {/* Custom Billing Cycle Dates */}
           {formData.billing_cycle === 'custom' && (
-            <div className="border-2 border-var(--neutral-800) rounded-lg p-4 space-y-4">
-              <h3 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="border-2 border-[var(--neutral-800)] rounded-lg p-4 space-y-4">
+              <h3 className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Custom Billing Period
               </h3>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Set recurring date range (e.g., Jan 1 - Dec 31 for calendar year)
               </p>
 
@@ -349,8 +349,8 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 </div>
               </div>
 
-              <div className="bg-var(--lavender-400) border border-var(--neutral-800) rounded p-3">
-                <p className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <div className="bg-[var(--lavender-400)] border border-[var(--neutral-800)] rounded p-3">
+                <p className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <strong>Example:</strong> Jan 1 - Dec 31 for calendar year, or Jul 1 - Jun 30 for fiscal year
                 </p>
               </div>
@@ -361,7 +361,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           <div className="flex items-center justify-between">
             <div>
               <Label htmlFor="active">Active Status</Label>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Inactive plans won't appear for new subscriptions
               </p>
             </div>
@@ -373,7 +373,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-var(--purple-lavender)/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-var(--green-light)"></div>
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--purple-lavender)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
             </label>
           </div>
 
@@ -389,7 +389,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
             <Button
               type="submit"
               disabled={loading}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
             >
               {loading ? (
                 <>
diff --git a/src/components/PublicFooter.js b/src/components/PublicFooter.js
index 31e2a89..6d53c1d 100644
--- a/src/components/PublicFooter.js
+++ b/src/components/PublicFooter.js
@@ -8,7 +8,7 @@ const PublicFooter = () => {
   return (
     <>
       {/* Main Footer */}
-      <footer className="bg-var(--purple-amethyst) border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
+      <footer className="bg-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] py-8 px-2  lg:px-10 flex items-center justify-between">
         <div className=" flex flex-col md:flex-row gap-14 md:gap-2 lg:gap-32 xl:gap-40 items-center justify-center text-left md:justify-between w-full max-w-7xl mx-auto">
           <div className="w-40 sm:w-40 md:w-48 lg:w-[180px] flex-shrink-0">
             <img src={loafLogo} alt="LOAF Logo" className="w-full h-auto aspect-square object-contain" />
@@ -19,28 +19,28 @@ const PublicFooter = () => {
               <div className="pb-2 lg:pb-4">
                 <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>About</p>
               </div>
-              <Link to="/about/history" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
-              <Link to="/about/mission-values" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
-              <Link to="/about/board" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
+              <Link to="/about/history" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>History</Link>
+              <Link to="/about/mission-values" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Mission and Values</Link>
+              <Link to="/about/board" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Board of Directors</Link>
             </div>
             <div className="hidden md:flex flex-col gap-2 items-start text-left  w-full sm:w-auto sm:min-w-[148px]">
               <div className="pb-2 lg:pb-4">
                 <p className="text-white text-xl font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>Connect</p>
               </div>
-              <Link to="/become-a-member" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
-              <Link to="/contact-us" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
-              <Link to="/resources" className="text-var(--neutral-800) text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
+              <Link to="/become-a-member" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Become a Member</Link>
+              <Link to="/contact-us" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Contact Us</Link>
+              <Link to="/resources" className="text-[var(--neutral-800)] text-sm sm:text-base font-medium hover:text-white transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Resources</Link>
             </div>
 
             <div className="flex flex-col gap-2 items-center justify-center md:items-start text-left w-full sm:w-auto sm:min-w-[200px] md:min-w-[200px] lg:min-w-[220px]">
               <div className="pb-4 w-full flex justify-center lg:justify-start">
                 <Link to="/donate" className="block">
-                  <Button className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
+                  <Button className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-full px-12 lg:px-16 py-6 text-lg sm:text-lg font-medium ">
                     Donate
                   </Button>
                 </Link>
               </div>
-              <p className="text-var(--neutral-800) text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--neutral-800)] text-sm sm:text-base font-medium text-center md:text-left w-full" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF is supported by<br />the Hollyfield Foundation
               </p>
             </div>
@@ -49,20 +49,20 @@ const PublicFooter = () => {
       </footer>
 
       {/* Bottom Footer */}
-      <footer className="bg-gradient-to-r from-var(--purple-deep) to-var(--purple-amethyst) border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
+      <footer className="bg-gradient-to-r from-[var(--purple-deep)] to-[var(--purple-amethyst)] border-t border-[rgba(0,0,0,0.1)] px-4 sm:px-8 md:px-20 py-5">
         <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-between items-center max-w-7xl mx-auto">
           <nav className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-center order-1 sm:order-none">
-            <Link to="/terms-of-service" className="text-var(--neutral-500) text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Link to="/terms-of-service" className="text-[var(--neutral-500)] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Terms of Service
             </Link>
-            <Link to="/privacy-policy" className="text-var(--neutral-500) text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Link to="/privacy-policy" className="text-[var(--neutral-500)] text-sm sm:text-base font-medium hover:text-white transition-colors whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Privacy Policy
             </Link>
           </nav>
-          <p className="text-var(--neutral-500) text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--neutral-500)] text-sm sm:text-base font-medium text-center order-2 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             © 2025 LOAF. All Rights Reserved.
           </p>
-          <p className="text-var(--neutral-500) text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--neutral-500)] text-sm sm:text-base font-medium text-center order-3 sm:order-none" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Designed and Managed by{' '}
             <a href="https://konceptkit.com/" className=" text-white transition-colors whitespace-nowrap">
               Koncept Kit
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index f2248b2..1967772 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -46,7 +46,7 @@ const PublicNavbar = () => {
   const getDesktopLinkClasses = (path) => {
     const baseClasses = "text-[17.5px] font-medium transition-all px-3 py-1 rounded-md";
     if (isActive(path)) {
-      return `${baseClasses} text-var(--orange-light) hover:text-var(--orange-coral) `;
+      return `${baseClasses} text-[var(--orange-light)] hover:text-[var(--orange-coral)] `;
     }
     return `${baseClasses} text-white hover:opacity-80`;
   };
@@ -55,18 +55,18 @@ const PublicNavbar = () => {
   const getMobileLinkClasses = (path) => {
     const baseClasses = "text-base font-medium px-4 py-3 rounded-md transition-colors";
     if (isActive(path)) {
-      return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
+      return `${baseClasses} bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)]`;
     }
-    return `${baseClasses} text-white hover:bg-var(--purple-deep)`;
+    return `${baseClasses} text-white hover:bg-[var(--purple-deep)]`;
   };
 
   // Active and inactive link styles for mobile sub-items (About Us)
   const getMobileSubLinkClasses = (path) => {
     const baseClasses = "text-sm font-medium px-6 py-2 rounded-md transition-colors block";
     if (isActive(path)) {
-      return `${baseClasses} bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep)`;
+      return `${baseClasses} bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)]`;
     }
-    return `${baseClasses} text-var(--neutral-800) hover:bg-var(--purple-deep) hover:text-white`;
+    return `${baseClasses} text-[var(--neutral-800)] hover:bg-[var(--purple-deep)] hover:text-white`;
   };
 
   return (
@@ -74,7 +74,7 @@ const PublicNavbar = () => {
       {/* Top Header - Auth Actions */}
       <div className='sticky top-0 inset-x-0 z-50'>
 
-        <header className="bg-gradient-to-r flex-wrap from-var(--purple-amethyst) to-var(--purple-deep) px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
+        <header className="bg-gradient-to-r flex-wrap from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-[20px] py-[10px] flex md:justify-end justify-between items-center gap-4 sm:gap-6">
           <div className='flex gap-4 sm:gap-6'>
 
             <button
@@ -96,7 +96,7 @@ const PublicNavbar = () => {
           </div>
           <Link to="/donate">
             <Button
-              className="bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
+              className="bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-[25px] px-[50px] py-[5px] text-[16.5px] font-semibold h-[41px]"
               style={{ fontFamily: "'Montserrat', sans-serif" }}
             >
               Donate
@@ -105,7 +105,7 @@ const PublicNavbar = () => {
         </header>
 
         {/* Main Header - Navigation */}
-        <header className=" bg-var(--purple-lavender) px-[20px] py-2 flex justify-between items-center">
+        <header className=" bg-[var(--purple-lavender)] px-[20px] py-2 flex justify-between items-center">
           <Link to="/">
             <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
           </Link>
@@ -113,7 +113,7 @@ const PublicNavbar = () => {
           {/* Mobile Menu Button */}
           <button
             onClick={() => setIsMobileMenuOpen(true)}
-            className="lg:hidden p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
+            className="lg:hidden p-2 text-white hover:bg-[var(--purple-deep)] rounded-md transition-colors"
             aria-label="Open menu"
           >
             <Menu className="size-14" />
@@ -132,7 +132,7 @@ const PublicNavbar = () => {
               <DropdownMenuTrigger asChild>
                 <button
                   className={`${isAboutActive()
-                    ? "text-var(--orange-light) hover:text-var(--orange-coral)"
+                    ? "text-[var(--orange-light)] hover:text-[var(--orange-coral)]"
                     : "text-white hover:opacity-80"} text-[17.5px] font-medium transition-all flex items-center gap-1 bg-transparent border-none cursor-pointer px-3 py-1 rounded-md`}
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   About Us
@@ -141,19 +141,19 @@ const PublicNavbar = () => {
               </DropdownMenuTrigger>
               <DropdownMenuContent align="start" className="bg-background min-w-[220px]">
                 <DropdownMenuItem asChild>
-                  <Link to="/about/history" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                  <Link to="/about/history" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     History
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
-                  <Link to="/about/mission-values" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                  <Link to="/about/mission-values" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Mission and Values
                   </Link>
                 </DropdownMenuItem>
                 <DropdownMenuItem asChild>
-                  <Link to="/about/board" className="w-full px-3 py-2 text-var(--purple-deep) hover:bg-var(--lavender-300) cursor-pointer"
+                  <Link to="/about/board" className="w-full px-3 py-2 text-[var(--purple-deep)] hover:bg-[var(--lavender-300)] cursor-pointer"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Board of Directors
                   </Link>
@@ -204,15 +204,15 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-var(--purple-lavender) shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-[var(--purple-lavender)] shadow-xl overflow-y-auto">
             {/* Header */}
-            <div className="flex justify-between items-center p-6 border-b border-var(--purple-deep)">
+            <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Menu
               </span>
               <button
                 onClick={() => setIsMobileMenuOpen(false)}
-                className="p-2 text-white hover:bg-var(--purple-deep) rounded-md transition-colors"
+                className="p-2 text-white hover:bg-[var(--purple-deep)] rounded-md transition-colors"
                 aria-label="Close menu"
               >
                 <X className="h-5 w-5" />
@@ -233,7 +233,7 @@ const PublicNavbar = () => {
               {/* About Us Section */}
               <div className="space-y-2">
                 <p
-                  className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-var(--orange-light)' : 'text-white'}`}
+                  className={`text-base font-semibold px-4 py-2 rounded-md ${isAboutActive() ? 'text-[var(--orange-light)]' : 'text-white'}`}
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   About Us
@@ -303,13 +303,13 @@ const PublicNavbar = () => {
               </Link>
 
               {/* Auth Actions */}
-              <div className="pt-4 border-t border-var(--purple-deep) space-y-2">
+              <div className="pt-4 border-t border-[var(--purple-deep)] space-y-2">
                 <button
                   onClick={() => {
                     handleAuthAction();
                     setIsMobileMenuOpen(false);
                   }}
-                  className="w-full text-left text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
+                  className="w-full text-left text-white text-base font-medium hover:bg-[var(--purple-deep)] px-4 py-3 rounded-md transition-colors"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 >
                   {user ? 'Logout' : 'Login'}
@@ -318,7 +318,7 @@ const PublicNavbar = () => {
                   <Link
                     to="/register"
                     onClick={() => setIsMobileMenuOpen(false)}
-                    className="block text-white text-base font-medium hover:bg-var(--purple-deep) px-4 py-3 rounded-md transition-colors"
+                    className="block text-white text-base font-medium hover:bg-[var(--purple-deep)] px-4 py-3 rounded-md transition-colors"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                   >
                     Register
@@ -329,7 +329,7 @@ const PublicNavbar = () => {
                   onClick={() => setIsMobileMenuOpen(false)}
                   className="block w-full"
                 >
-                  <Button className="w-full bg-var(--orange-light) hover:bg-var(--orange-coral) text-var(--purple-deep) rounded-[25px] px-6 py-3 text-base font-semibold">
+                  <Button className="w-full bg-[var(--orange-light)] hover:bg-[var(--orange-coral)] text-[var(--purple-deep)] rounded-[25px] px-6 py-3 text-base font-semibold">
                     Donate
                   </Button>
                 </Link>
diff --git a/src/components/RejectionDialog.js b/src/components/RejectionDialog.js
index f61f6bd..516a7d5 100644
--- a/src/components/RejectionDialog.js
+++ b/src/components/RejectionDialog.js
@@ -31,33 +31,33 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-var(--neutral-800)">
+      <DialogContent className="sm:max-w-[500px] rounded-2xl border-2 border-[var(--neutral-800)]">
         <DialogHeader>
           <div className="flex items-center gap-3 mb-2">
             <div className="p-3 bg-red-100 rounded-full">
               <AlertTriangle className="h-6 w-6 text-red-600" />
             </div>
-            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Reject Application
             </DialogTitle>
           </div>
-          <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
-          <div className="bg-var(--lavender-400) border border-var(--neutral-800) rounded-lg p-4">
-            <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="bg-[var(--lavender-400)] border border-[var(--neutral-800)] rounded-lg p-4">
+            <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Applicant:</strong> {user?.email}
             </p>
-            <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Status:</strong> {user?.status}
             </p>
           </div>
 
           <div className="space-y-2">
-            <Label htmlFor="reason" className="text-var(--purple-ink) font-medium">
+            <Label htmlFor="reason" className="text-[var(--purple-ink)] font-medium">
               Rejection Reason <span className="text-red-500">*</span>
             </Label>
             <Textarea
@@ -68,13 +68,13 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
                 setError('');
               }}
               placeholder="Please provide a clear reason for rejection. This will be sent to the applicant."
-              className="rounded-xl border-2 border-var(--neutral-800) focus:border-red-500 min-h-[120px]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-red-500 min-h-[120px]"
               disabled={loading}
             />
             {error && (
               <p className="text-sm text-red-500">{error}</p>
             )}
-            <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               The applicant will receive an email with this reason.
             </p>
           </div>
@@ -85,7 +85,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
             type="button"
             onClick={handleClose}
             variant="outline"
-            className="border-2 border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-6"
+            className="border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-6"
             disabled={loading}
           >
             <X className="h-4 w-4 mr-2" />
diff --git a/src/components/WordPressImportWizard.js b/src/components/WordPressImportWizard.js
index 0d44092..9885f98 100644
--- a/src/components/WordPressImportWizard.js
+++ b/src/components/WordPressImportWizard.js
@@ -370,15 +370,15 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step1Upload = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Upload WordPress CSV Export</h3>
-                <p className="text-sm text-var(--purple-lavender)">
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Upload WordPress CSV Export</h3>
+                <p className="text-sm text-[var(--purple-lavender)]">
                     Select the WordPress user export CSV file. The file will be analyzed for data quality issues.
                 </p>
             </div>
 
-            <Card className="p-6 border-2 border-dashed border-var(--neutral-800) bg-var(--lavender-400)">
+            <Card className="p-6 border-2 border-dashed border-[var(--neutral-800)] bg-[var(--lavender-400)]">
                 <div className="flex flex-col items-center gap-4">
-                    <Upload className="h-12 w-12 text-var(--purple-lavender)" />
+                    <Upload className="h-12 w-12 text-[var(--purple-lavender)]" />
                     <div className="text-center">
                         <Input
                             type="file"
@@ -387,7 +387,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                             className="max-w-xs"
                         />
                         {uploadedFile && (
-                            <p className="text-sm text-var(--purple-lavender) mt-2">
+                            <p className="text-sm text-[var(--purple-lavender)] mt-2">
                                 Selected: {uploadedFile.name}
                             </p>
                         )}
@@ -399,7 +399,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <Button
                     onClick={handleUpload}
                     disabled={uploading}
-                    className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
+                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
                 >
                     {uploading ? (
                         <>
@@ -465,8 +465,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step2FieldMapping = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Field Mapping</h3>
-                <p className="text-sm text-var(--purple-lavender)">
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Field Mapping</h3>
+                <p className="text-sm text-[var(--purple-lavender)]">
                     WordPress fields have been automatically mapped to LOAF platform fields.
                 </p>
             </div>
@@ -537,20 +537,20 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step3ReviewStatus = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Review & Adjust User Status</h3>
-                <p className="text-sm text-var(--purple-lavender)">
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Review & Adjust User Status</h3>
+                <p className="text-sm text-[var(--purple-lavender)]">
                     Review suggested status mappings and override as needed before import.
                 </p>
             </div>
 
             {/* Bulk edit toolbar */}
-            <Card className="p-4 bg-var(--lavender-400) border-var(--neutral-800)">
+            <Card className="p-4 bg-[var(--lavender-400)] border-[var(--neutral-800)]">
                 <div className="flex items-center gap-4">
                     <Checkbox
                         checked={selectedRows.size === previewData.length && previewData.length > 0}
                         onCheckedChange={toggleSelectAll}
                     />
-                    <span className="text-sm text-var(--purple-lavender) font-medium">
+                    <span className="text-sm text-[var(--purple-lavender)] font-medium">
                         {selectedRows.size > 0 ? `${selectedRows.size} selected` : 'Select all'}
                     </span>
                     {selectedRows.size > 0 && (
@@ -572,13 +572,13 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Data table */}
             {loading ? (
                 <div className="flex items-center justify-center py-12">
-                    <Loader2 className="h-8 w-8 animate-spin text-var(--purple-lavender)" />
+                    <Loader2 className="h-8 w-8 animate-spin text-[var(--purple-lavender)]" />
                 </div>
             ) : (
                 <div className="border rounded-lg overflow-hidden">
                     <Table>
                         <TableHeader>
-                            <TableRow className="bg-var(--lavender-400)">
+                            <TableRow className="bg-[var(--lavender-400)]">
                                 <TableHead className="w-12">
                                     <Checkbox checked={false} />
                                 </TableHead>
@@ -606,7 +606,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                         {row.first_name} {row.last_name}
                                     </TableCell>
                                     <TableCell>
-                                        <Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
+                                        <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
                                             {row.wordpress_roles?.join(', ') || 'N/A'}
                                         </Badge>
                                     </TableCell>
@@ -651,7 +651,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Pagination */}
             {totalPages > 1 && (
                 <div className="flex items-center justify-between">
-                    <p className="text-sm text-var(--purple-lavender)">
+                    <p className="text-sm text-[var(--purple-lavender)]">
                         Page {currentPage} of {totalPages}
                     </p>
                     <div className="flex gap-2">
@@ -689,41 +689,41 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         return (
             <div className="space-y-6">
                 <div>
-                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Preview</h3>
-                    <p className="text-sm text-var(--purple-lavender)">
+                    <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Import Preview</h3>
+                    <p className="text-sm text-[var(--purple-lavender)]">
                         Review the final import settings before execution.
                     </p>
                 </div>
 
                 <div className="grid md:grid-cols-3 gap-4">
                     <Card className="p-6">
-                        <p className="text-sm text-var(--purple-lavender)">Total Users</p>
-                        <p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.total_rows}</p>
+                        <p className="text-sm text-[var(--purple-lavender)]">Total Users</p>
+                        <p className="text-3xl font-semibold text-[var(--purple-ink)]">{analysisResult?.total_rows}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-var(--purple-lavender)">Status Overrides</p>
-                        <p className="text-3xl font-semibold text-var(--purple-ink)">{overrideCount}</p>
+                        <p className="text-sm text-[var(--purple-lavender)]">Status Overrides</p>
+                        <p className="text-3xl font-semibold text-[var(--purple-ink)]">{overrideCount}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-var(--purple-lavender)">Expected Imports</p>
-                        <p className="text-3xl font-semibold text-var(--purple-ink)">{analysisResult?.valid_rows}</p>
+                        <p className="text-sm text-[var(--purple-lavender)]">Expected Imports</p>
+                        <p className="text-3xl font-semibold text-[var(--purple-ink)]">{analysisResult?.valid_rows}</p>
                     </Card>
                 </div>
 
                 <Card className="p-6">
-                    <h4 className="font-semibold text-var(--purple-ink) mb-4">Import Options</h4>
+                    <h4 className="font-semibold text-[var(--purple-ink)] mb-4">Import Options</h4>
                     <div className="space-y-3">
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-var(--purple-lavender)">Send password reset emails to all imported users</span>
+                            <span className="text-sm text-[var(--purple-lavender)]">Send password reset emails to all imported users</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-var(--purple-lavender)">Skip rows with errors and continue import</span>
+                            <span className="text-sm text-[var(--purple-lavender)]">Skip rows with errors and continue import</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-var(--purple-lavender)">Full rollback capability available after import</span>
+                            <span className="text-sm text-[var(--purple-lavender)]">Full rollback capability available after import</span>
                         </div>
                     </div>
                 </Card>
@@ -748,10 +748,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step5Execute = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                     {importing ? 'Import in Progress...' : 'Ready to Import'}
                 </h3>
-                <p className="text-sm text-var(--purple-lavender)">
+                <p className="text-sm text-[var(--purple-lavender)]">
                     {importing
                         ? 'Please wait while users are imported. This may take a few minutes.'
                         : 'Click "Start Import" to begin importing users.'}
@@ -761,7 +761,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {importing && (
                 <div className="space-y-4">
                     <Progress value={importProgress} className="w-full" />
-                    <p className="text-center text-sm text-var(--purple-lavender)">
+                    <p className="text-center text-sm text-[var(--purple-lavender)]">
                         {importProgress.toFixed(1)}% complete
                     </p>
                 </div>
@@ -770,7 +770,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {!importing && !importResults && (
                 <Button
                     onClick={handleExecuteImport}
-                    className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-ink) py-6 text-lg"
+                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] py-6 text-lg"
                 >
                     <Play className="mr-2 h-5 w-5" />
                     Start Import
@@ -786,8 +786,8 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
     const Step6Results = () => (
         <div className="space-y-6">
             <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">Import Complete</h3>
-                <p className="text-sm text-var(--purple-lavender)">
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Import Complete</h3>
+                <p className="text-sm text-[var(--purple-lavender)]">
                     Review the import results and download error reports if needed.
                 </p>
             </div>
@@ -850,11 +850,11 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                             <div className="p-3 bg-red-100 rounded-full">
                                 <AlertTriangle className="h-6 w-6 text-red-600" />
                             </div>
-                            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
+                            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                                 Confirm Rollback
                             </DialogTitle>
                         </div>
-                        <DialogDescription className="text-var(--purple-lavender)">
+                        <DialogDescription className="text-[var(--purple-lavender)]">
                             This will permanently delete{' '}
                             <strong>{importResults?.successful_rows} users</strong> that were imported.
                             This action cannot be undone.
@@ -898,10 +898,10 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <Dialog open={open} onOpenChange={onOpenChange}>
             <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
                 <DialogHeader>
-                    <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)">
+                    <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard
                     </DialogTitle>
-                    <DialogDescription className="text-var(--purple-lavender)">
+                    <DialogDescription className="text-[var(--purple-lavender)]">
                         Import WordPress users with interactive status review and full rollback capability
                     </DialogDescription>
                 </DialogHeader>
@@ -919,7 +919,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                     <div
                                         className={`
                                             w-10 h-10 rounded-full flex items-center justify-center
-                                            ${isCurrent ? 'bg-var(--purple-lavender) text-white' : ''}
+                                            ${isCurrent ? 'bg-[var(--purple-lavender)] text-white' : ''}
                                             ${isCompleted ? 'bg-green-600 text-white' : ''}
                                             ${!isCurrent && !isCompleted ? 'bg-gray-200 text-gray-600' : ''}
                                         `}
@@ -930,7 +930,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                             <StepIcon className="h-5 w-5" />
                                         )}
                                     </div>
-                                    <p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-var(--purple-ink)' : 'text-gray-600'}`}>
+                                    <p className={`text-xs mt-1 ${isCurrent ? 'font-semibold text-[var(--purple-ink)]' : 'text-gray-600'}`}>
                                         {step.title}
                                     </p>
                                 </div>
@@ -962,7 +962,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                         <Button
                             onClick={handleNext}
                             disabled={!canProceed()}
-                            className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
+                            className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
                         >
                             Next
                             <ChevronRight className="h-4 w-4 ml-2" />
@@ -975,7 +975,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                 onOpenChange(false);
                                 if (onSuccess) onSuccess();
                             }}
-                            className="bg-var(--purple-lavender) hover:bg-var(--purple-ink)"
+                            className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
                         >
                             Close
                         </Button>
diff --git a/src/components/registration/RegistrationStep1.js b/src/components/registration/RegistrationStep1.js
index fd0b52d..e012931 100644
--- a/src/components/registration/RegistrationStep1.js
+++ b/src/components/registration/RegistrationStep1.js
@@ -26,7 +26,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
     <div className="space-y-8">
       {/* Personal Information */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Personal Information
         </h2>
 
@@ -40,7 +40,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="first-name-input"
             />
           </div>
@@ -52,7 +52,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="last-name-input"
             />
           </div>
@@ -69,7 +69,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="phone-input"
             />
           </div>
@@ -82,7 +82,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.date_of_birth}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="dob-input"
             />
           </div>
@@ -97,7 +97,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
             required
             value={formData.address}
             onChange={handleInputChange}
-            className="h-14 rounded-xl border-2 border-var(--neutral-300:) focus:border-var(--orange-soft)"
+            className="h-14 rounded-xl border-2 border-var[(--neutral-300)] focus:border-[var(--orange-soft)]"
             data-testid="address-input"
           />
         </div>
@@ -112,7 +112,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.city}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="city-input"
             />
           </div>
@@ -124,7 +124,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.state}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="state-input"
             />
           </div>
@@ -136,7 +136,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.zipcode}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="zipcode-input"
             />
           </div>
@@ -145,7 +145,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* How Did You Hear About Us */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           How Did You Hear About Us? *
         </h2>
         <div className="space-y-3">
@@ -167,7 +167,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Partner Information */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Partner Information (Optional)
         </h2>
 
@@ -179,7 +179,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_first_name"
               value={formData.partner_first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="partner-first-name-input"
             />
           </div>
@@ -190,7 +190,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_last_name"
               value={formData.partner_last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="partner-last-name-input"
             />
           </div>
diff --git a/src/components/registration/RegistrationStep2.js b/src/components/registration/RegistrationStep2.js
index a141ced..8f217d2 100644
--- a/src/components/registration/RegistrationStep2.js
+++ b/src/components/registration/RegistrationStep2.js
@@ -33,10 +33,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
     <div className="space-y-8">
       {/* Newsletter Publication Preferences */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Newsletter Publication Preferences *
         </h2>
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Please check what information may be published in LOAF Newsletter
         </p>
 
@@ -97,7 +97,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Referral */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Referral
         </h2>
         <div>
@@ -110,10 +110,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             value={formData.referred_by_member_name}
             onChange={handleInputChange}
             placeholder="Enter member name or email"
-            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             data-testid="referral-input"
           />
-          <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If referred by a current member, you may skip the event attendance requirement.
           </p>
         </div>
@@ -121,10 +121,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Volunteer Interests */}
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Volunteer Interests (Optional)
         </h2>
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
         </p>
 
@@ -158,7 +158,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             I am requesting for scholarship
           </Label>
         </div>
-        <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Scholarship information is kept confidential
         </p>
 
@@ -174,7 +174,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell us why you're requesting a scholarship..."
               rows={4}
-              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
         )}
diff --git a/src/components/registration/RegistrationStep3.js b/src/components/registration/RegistrationStep3.js
index b35d18d..19b9e66 100644
--- a/src/components/registration/RegistrationStep3.js
+++ b/src/components/registration/RegistrationStep3.js
@@ -23,11 +23,11 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
   return (
     <div className="space-y-6">
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Members Directory
         </h2>
 
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Would you like to be displayed on our private members directory? (optional and you can change the answer later)
         </p>
 
@@ -37,8 +37,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             className={`
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${formData.show_in_directory
-                ? 'border-var(--orange-light) bg-var(--orange-light)/5'
-                : 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
+                ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
+                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
@@ -46,13 +46,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             <div className="flex items-center space-x-3">
               <div className={`
                 w-5 h-5 rounded-full border-2 flex items-center justify-center
-                ${formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
+                ${formData.show_in_directory ? 'border-[var(--orange-light)]' : 'border-[var(--neutral-800)]'}
               `}>
                 {formData.show_in_directory && (
-                  <div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
+                  <div className="w-3 h-3 rounded-full bg-[var(--orange-light)]" />
                 )}
               </div>
-              <span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Yes, include me in the Members Directory
               </span>
             </div>
@@ -62,8 +62,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             className={`
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${!formData.show_in_directory
-                ? 'border-var(--orange-light) bg-var(--orange-light)/5'
-                : 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
+                ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
+                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
@@ -71,13 +71,13 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
             <div className="flex items-center space-x-3">
               <div className={`
                 w-5 h-5 rounded-full border-2 flex items-center justify-center
-                ${!formData.show_in_directory ? 'border-var(--orange-light)' : 'border-var(--neutral-800)'}
+                ${!formData.show_in_directory ? 'border-[var(--orange-light)]' : 'border-[var(--neutral-800)]'}
               `}>
                 {!formData.show_in_directory && (
-                  <div className="w-3 h-3 rounded-full bg-var(--orange-light)" />
+                  <div className="w-3 h-3 rounded-full bg-[var(--orange-light)]" />
                 )}
               </div>
-              <span className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No, don't include me in the Members Directory
               </span>
             </div>
@@ -87,8 +87,8 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
 
       {/* Conditional Directory Fields */}
       {formData.show_in_directory && (
-        <div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-var(--neutral-800)">
-          <p className="text-var(--purple-lavender) text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-[var(--neutral-800)]">
+          <p className="text-[var(--purple-lavender)] text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Below, choose what information you would like include in the Members Only Directory.
             (If you ever want to update this information, remember the Directory Section and Account Section are separate)
           </p>
@@ -101,7 +101,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="email"
               value={formData.directory_email}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -114,7 +114,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell other members about yourself..."
               rows={4}
-              className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -125,7 +125,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_address"
               value={formData.directory_address}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -137,7 +137,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="tel"
               value={formData.directory_phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -149,7 +149,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="date"
               value={formData.directory_dob}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
@@ -162,7 +162,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_partner_name"
               value={formData.directory_partner_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
         </div>
diff --git a/src/components/registration/RegistrationStep4.js b/src/components/registration/RegistrationStep4.js
index eaa53a1..33d0c12 100644
--- a/src/components/registration/RegistrationStep4.js
+++ b/src/components/registration/RegistrationStep4.js
@@ -7,11 +7,11 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
   return (
     <div className="space-y-6">
       <div className="space-y-4">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Account Credentials
         </h2>
 
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Your email is also your username that you can use to login.
           Please note you can only login after your application is validated.
         </p>
@@ -28,7 +28,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.email}
             onChange={handleInputChange}
             placeholder="your.email@example.com"
-            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             data-testid="email-input"
           />
         </div>
@@ -43,10 +43,10 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.password}
             onChange={handleInputChange}
             placeholder="At least 6 characters"
-            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             data-testid="password-input"
           />
-          <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Must be at least 6 characters long
           </p>
         </div>
@@ -60,7 +60,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.confirmPassword}
             onChange={handleInputChange}
             placeholder="Re-enter your password"
-            className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             data-testid="confirm-password-input"
           />
           {formData.confirmPassword && formData.password !== formData.confirmPassword && (
@@ -71,7 +71,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
         </div>
 
         {/* Terms of Service Acceptance */}
-        <div className="p-4 bg-var(--lavender-500) rounded-lg border border-var(--neutral-800)">
+        <div className="p-4 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
           <div className="flex items-start gap-3">
             <input
               type="checkbox"
@@ -79,7 +79,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
               name="accepts_tos"
               checked={formData.accepts_tos || false}
               onChange={handleInputChange}
-              className="mt-1 w-4 h-4 text-var(--purple-lavender) border-gray-300 rounded focus:ring-var(--purple-lavender)"
+              className="mt-1 w-4 h-4 text-[var(--purple-lavender)] border-gray-300 rounded focus:ring-[var(--purple-lavender)]"
               required
               data-testid="tos-checkbox"
             />
@@ -89,7 +89,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="/become-a-member/terms-of-service"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
+                className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
               >
                 Terms of Service
               </a>
@@ -98,7 +98,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="become-a-member/privacy-policy"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
+                className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
               >
                 Privacy Policy
               </a>
diff --git a/src/components/registration/RegistrationStepIndicator.js b/src/components/registration/RegistrationStepIndicator.js
index 1fc3fdf..0362bc4 100644
--- a/src/components/registration/RegistrationStepIndicator.js
+++ b/src/components/registration/RegistrationStepIndicator.js
@@ -20,17 +20,17 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
                 w-12 h-12 rounded-full flex items-center justify-center font-semibold text-lg
                 transition-all duration-300
                 ${currentStep === step.number
-                  ? 'bg-var(--orange-light) text-white scale-110 shadow-lg'
+                  ? 'bg-[var(--orange-light)] text-white scale-110 shadow-lg'
                   : currentStep > step.number
-                    ? 'bg-var(--green-light) text-white'
-                    : 'bg-var(--neutral-800) text-var(--purple-lavender)'
+                    ? 'bg-[var(--green-light)] text-white'
+                    : 'bg-[var(--neutral-800)] text-[var(--purple-lavender)]'
                 }
               `}>
                 {currentStep > step.number ? '✓' : step.number}
               </div>
               <span className={`
                 text-sm mt-2 font-medium transition-colors
-                ${currentStep === step.number ? 'text-var(--orange-light)' : 'text-var(--purple-lavender)'}
+                ${currentStep === step.number ? 'text-[var(--orange-light)]' : 'text-[var(--purple-lavender)]'}
               `} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {step.title}
               </span>
@@ -38,11 +38,11 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
 
             {/* Connecting Line */}
             {index < steps.length - 1 && (
-              <div className="flex-1 h-1 mx-2 relative -top-6 bg-var(--neutral-800)">
+              <div className="flex-1 h-1 mx-2 relative -top-6 bg-[var(--neutral-800)]">
                 <div
                   className={`
                     h-full transition-all duration-500
-                    ${currentStep > step.number ? 'bg-var(--green-light) w-full' : 'bg-transparent w-0'}
+                    ${currentStep > step.number ? 'bg-[var(--green-light)] w-full' : 'bg-transparent w-0'}
                   `}
                 />
               </div>
@@ -52,8 +52,8 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
       </div>
 
       {/* Step Counter */}
-      <p className="text-center text-var(--purple-lavender) mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-        Step <span className="font-semibold text-var(--orange-light)">{currentStep}</span> of {totalSteps}
+      <p className="text-center text-[var(--purple-lavender)] mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        Step <span className="font-semibold text-[var(--orange-light)]">{currentStep}</span> of {totalSteps}
       </p>
     </div>
   );
diff --git a/src/components/ui/password-input.jsx b/src/components/ui/password-input.jsx
index afac213..5f3d094 100644
--- a/src/components/ui/password-input.jsx
+++ b/src/components/ui/password-input.jsx
@@ -19,7 +19,7 @@ const PasswordInput = React.forwardRef(({ className, ...props }, ref) => {
       <button
         type="button"
         onClick={() => setShowPassword(!showPassword)}
-        className="absolute right-3 top-1/2 -translate-y-1/2 text-var(--slate-muted) hover:text-var(--slate-dark) transition-colors focus:outline-none"
+        className="absolute right-3 top-1/2 -translate-y-1/2 text-[var(--slate-muted)] hover:text-[var(--slate-dark)] transition-colors focus:outline-none"
         tabIndex={-1}
       >
         {showPassword ? (
diff --git a/src/components/ui/tabs.jsx b/src/components/ui/tabs.jsx
index 9942686..17f5f86 100644
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap hover:bg-var(--lavender-300) border-2 border-var(--purple-lavender) rounded-2xl px-3 py-1 text-var(--purple-lavender) text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-[var(--purple-lavender)] rounded-2xl px-3 py-1 text-[var(--purple-lavender)] text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
       className
     )}
     {...props}
diff --git a/src/pages/AcceptInvitation.js b/src/pages/AcceptInvitation.js
index 1784c22..486438c 100644
--- a/src/pages/AcceptInvitation.js
+++ b/src/pages/AcceptInvitation.js
@@ -163,9 +163,9 @@ const AcceptInvitation = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
-      admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
-      member: { label: 'Member', className: 'bg-var(--neutral-800) text-var(--purple-ink)' }
+      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
+      member: { label: 'Member', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' }
     };
 
     const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
@@ -179,10 +179,10 @@ const AcceptInvitation = () => {
 
   if (loading) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
-        <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
-          <Loader2 className="h-12 w-12 text-var(--purple-lavender) mx-auto mb-4 animate-spin" />
-          <p className="text-lg text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
+          <Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
+          <p className="text-lg text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Verifying your invitation...
           </p>
         </Card>
@@ -192,18 +192,18 @@ const AcceptInvitation = () => {
 
   if (error) {
     return (
-      <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
-        <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
+      <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
           <XCircle className="h-16 w-16 text-red-500 mx-auto mb-6" />
-          <h1 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Invalid Invitation
           </h1>
-          <p className="text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {error}
           </p>
           <Button
             onClick={() => navigate('/login')}
-            className="rounded-xl bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white"
+            className="rounded-xl bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white"
           >
             Go to Login
           </Button>
@@ -216,53 +216,53 @@ const AcceptInvitation = () => {
     const redirectPath = successUser?.role === 'admin' || successUser?.role === 'superadmin' ? '/admin' : '/dashboard';
 
     return (
-      <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
-        <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
+      <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
+        <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
           {/* Success Animation */}
           <div className="mb-8">
-            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-var(--green-light) to-var(--green-fern) flex items-center justify-center animate-bounce">
+            <div className="h-24 w-24 mx-auto rounded-full bg-gradient-to-br from-[var(--green-light)] to-[var(--green-fern)] flex items-center justify-center animate-bounce">
               <CheckCircle className="h-12 w-12 text-white" />
             </div>
           </div>
 
           {/* Success Message */}
-          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF! 🎉
           </h1>
-          <p className="text-xl text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-xl text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your account has been created successfully.
           </p>
 
           {/* User Info Card */}
-          <div className="mb-8 p-6 bg-gradient-to-r from-var(--neutral-800) to-var(--lavender-700) rounded-xl">
+          <div className="mb-8 p-6 bg-gradient-to-r from-[var(--neutral-800)] to-[var(--lavender-700)] rounded-xl">
             <div className="grid md:grid-cols-2 gap-4 text-left">
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Name
                 </p>
-                <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {successUser?.first_name} {successUser?.last_name}
                 </p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Email
                 </p>
-                <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {successUser?.email}
                 </p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Role
                 </p>
                 <div>{getRoleBadge(successUser?.role)}</div>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Status
                 </p>
-                <Badge className="bg-var(--green-light) text-white px-4 py-2 rounded-full text-sm">
+                <Badge className="bg-[var(--green-light)] text-white px-4 py-2 rounded-full text-sm">
                   {successUser?.status}
                 </Badge>
               </div>
@@ -280,7 +280,7 @@ const AcceptInvitation = () => {
           {/* Manual Continue Button */}
           <Button
             onClick={() => navigate(redirectPath)}
-            className="w-full h-14 rounded-xl bg-gradient-to-r from-var(--green-light) to-var(--green-fern) hover:from-var(--green-fern) hover:to-var(--green-sage] text-white text-lg font-semibold"
+            className="w-full h-14 rounded-xl bg-gradient-to-r from-[var(--green-light)] to-[var(--green-fern)] hover:from-[var(--green-fern)] hover:to-[var(--green-sage)] text-white text-lg font-semibold"
           >
             Continue to Dashboard
           </Button>
@@ -290,46 +290,46 @@ const AcceptInvitation = () => {
   }
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
-      <Card className="w-full max-w-3xl p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800)">
+    <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
+      <Card className="w-full max-w-3xl p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
         {/* Header */}
         <div className="text-center mb-8">
           <div className="flex justify-center mb-4">
-            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) flex items-center justify-center">
+            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] flex items-center justify-center">
               <Mail className="h-8 w-8 text-white" />
             </div>
           </div>
-          <h1 className="text-3xl md:text-4xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl md:text-4xl font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF!
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Complete your profile to accept the invitation
           </p>
         </div>
 
         {/* Invitation Details */}
-        <div className="mb-8 p-6 bg-gradient-to-r from-var(--neutral-800) to-var(--lavender-700) rounded-xl">
+        <div className="mb-8 p-6 bg-gradient-to-r from-[var(--neutral-800)] to-[var(--lavender-700)] rounded-xl">
           <div className="grid md:grid-cols-2 gap-4 text-sm">
             <div>
-              <p className="text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Email Address
               </p>
-              <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {invitation?.email}
               </p>
             </div>
             <div>
-              <p className="text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Role
               </p>
               <div>{getRoleBadge(invitation?.role)}</div>
             </div>
             <div className="md:col-span-2">
-              <p className="text-var(--purple-lavender) mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <Calendar className="h-4 w-4" />
                 Invitation Expires
               </p>
-              <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {invitation?.expires_at ? new Date(invitation.expires_at).toLocaleString() : 'N/A'}
               </p>
             </div>
@@ -342,7 +342,7 @@ const AcceptInvitation = () => {
             {/* Password Fields */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="password" className="text-var(--purple-ink)">
+                <Label htmlFor="password" className="text-[var(--purple-ink)]">
                   Password <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -350,7 +350,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="Minimum 8 characters"
                 />
                 {formErrors.password && (
@@ -359,7 +359,7 @@ const AcceptInvitation = () => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="confirmPassword" className="text-var(--purple-ink)">
+                <Label htmlFor="confirmPassword" className="text-[var(--purple-ink)]">
                   Confirm Password <span className="text-red-500">*</span>
                 </Label>
                 <Input
@@ -367,7 +367,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.confirmPassword}
                   onChange={(e) => handleChange('confirmPassword', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="Re-enter password"
                 />
                 {formErrors.confirmPassword && (
@@ -379,14 +379,14 @@ const AcceptInvitation = () => {
             {/* Name Fields */}
             <div className="grid md:grid-cols-2 gap-4">
               <div className="grid gap-2">
-                <Label htmlFor="first_name" className="text-var(--purple-ink)">
+                <Label htmlFor="first_name" className="text-[var(--purple-ink)]">
                   First Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="John"
                 />
                 {formErrors.first_name && (
@@ -395,14 +395,14 @@ const AcceptInvitation = () => {
               </div>
 
               <div className="grid gap-2">
-                <Label htmlFor="last_name" className="text-var(--purple-ink)">
+                <Label htmlFor="last_name" className="text-[var(--purple-ink)]">
                   Last Name <span className="text-red-500">*</span>
                 </Label>
                 <Input
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="Doe"
                 />
                 {formErrors.last_name && (
@@ -413,7 +413,7 @@ const AcceptInvitation = () => {
 
             {/* Phone */}
             <div className="grid gap-2">
-              <Label htmlFor="phone" className="text-var(--purple-ink)">
+              <Label htmlFor="phone" className="text-[var(--purple-ink)]">
                 Phone <span className="text-red-500">*</span>
               </Label>
               <Input
@@ -421,7 +421,7 @@ const AcceptInvitation = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 placeholder="(555) 123-4567"
               />
               {formErrors.phone && (
@@ -432,20 +432,20 @@ const AcceptInvitation = () => {
             {/* Optional Fields Section */}
             {invitation?.role === 'member' && (
               <>
-                <div className="border-t border-var(--neutral-800) pt-6 mt-2">
-                  <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <div className="border-t border-[var(--neutral-800)] pt-6 mt-2">
+                  <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Additional Information (Optional)
                   </h3>
                 </div>
 
                 {/* Address */}
                 <div className="grid gap-2">
-                  <Label htmlFor="address" className="text-var(--purple-ink)">Address</Label>
+                  <Label htmlFor="address" className="text-[var(--purple-ink)]">Address</Label>
                   <Input
                     id="address"
                     value={formData.address}
                     onChange={(e) => handleChange('address', e.target.value)}
-                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                     placeholder="123 Main St"
                   />
                 </div>
@@ -453,35 +453,35 @@ const AcceptInvitation = () => {
                 {/* City, State, Zipcode */}
                 <div className="grid md:grid-cols-3 gap-4">
                   <div className="grid gap-2">
-                    <Label htmlFor="city" className="text-var(--purple-ink)">City</Label>
+                    <Label htmlFor="city" className="text-[var(--purple-ink)]">City</Label>
                     <Input
                       id="city"
                       value={formData.city}
                       onChange={(e) => handleChange('city', e.target.value)}
-                      className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                       placeholder="San Francisco"
                     />
                   </div>
 
                   <div className="grid gap-2">
-                    <Label htmlFor="state" className="text-var(--purple-ink)">State</Label>
+                    <Label htmlFor="state" className="text-[var(--purple-ink)]">State</Label>
                     <Input
                       id="state"
                       value={formData.state}
                       onChange={(e) => handleChange('state', e.target.value)}
-                      className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                       placeholder="CA"
                       maxLength={2}
                     />
                   </div>
 
                   <div className="grid gap-2">
-                    <Label htmlFor="zipcode" className="text-var(--purple-ink)">Zipcode</Label>
+                    <Label htmlFor="zipcode" className="text-[var(--purple-ink)]">Zipcode</Label>
                     <Input
                       id="zipcode"
                       value={formData.zipcode}
                       onChange={(e) => handleChange('zipcode', e.target.value)}
-                      className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                       placeholder="94102"
                     />
                   </div>
@@ -489,13 +489,13 @@ const AcceptInvitation = () => {
 
                 {/* Date of Birth */}
                 <div className="grid gap-2">
-                  <Label htmlFor="date_of_birth" className="text-var(--purple-ink)">Date of Birth</Label>
+                  <Label htmlFor="date_of_birth" className="text-[var(--purple-ink)]">Date of Birth</Label>
                   <Input
                     id="date_of_birth"
                     type="date"
                     value={formData.date_of_birth}
                     onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                    className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   />
                 </div>
               </>
@@ -507,7 +507,7 @@ const AcceptInvitation = () => {
             <Button
               type="submit"
               disabled={submitting}
-              className="w-full h-14 rounded-xl bg-gradient-to-r from-var(--green-light) to-var(--green-fern) hover:from-var(--green-fern) hover:to-var(--green-sage] text-white text-lg font-semibold"
+              className="w-full h-14 rounded-xl bg-gradient-to-r from-[var(--green-light)] to-[var(--green-fern)] hover:from-[var(--green-fern)] hover:to-[var(--green-sage)] text-white text-lg font-semibold"
             >
               {submitting ? (
                 <>
@@ -526,11 +526,11 @@ const AcceptInvitation = () => {
 
         {/* Footer Note */}
         <div className="mt-6 text-center">
-          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Already have an account?{' '}
             <button
               onClick={() => navigate('/login')}
-              className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
+              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
             >
               Sign in instead
             </button>
diff --git a/src/pages/BecomeMember.js b/src/pages/BecomeMember.js
index 2b95757..292ae4e 100644
--- a/src/pages/BecomeMember.js
+++ b/src/pages/BecomeMember.js
@@ -29,13 +29,13 @@ const BecomeMember = () => {
       <div className="relative bg-gray-50 pt-20 px-6 pb-16">
         <div className="max-w-7xl mx-auto text-center">
           <h1
-            className="text-3xl sm:text-4xl md:text-5xl font-bold text-var(--purple-deep) mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
+            className="text-3xl sm:text-4xl md:text-5xl font-bold text-[var(--purple-deep)] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.96px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Become a Member
           </h1>
           <p
-            className="text-base sm:text-lg font-medium text-var(--purple-deep) max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg font-medium text-[var(--purple-deep)] max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Become a member to receive our monthly newsletter and find out about all the activities LOAF has planned each month. LOAF hosts over 40 social activities each year and occasionally covers the costs for members only
@@ -53,15 +53,15 @@ const BecomeMember = () => {
               className="w-full h-full object-contain"
             />
           </div>
-          <div className="flex-1 bg-var(--lavender-200) rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+          <div className="flex-1 bg-[var(--lavender-200)] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
             <h3
-              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+              className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[var(--purple-deep)] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
               style={{ fontFamily: "'Poppins', sans-serif" }}
             >
               Annual Administrative Fees
             </h3>
             <p
-              className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
+              className="text-base sm:text-lg font-medium text-[var(--purple-deep)] leading-[1.6]"
               style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
             >
               Annual Administrative Fees for all members are $30 per person. These fees help cover general business expenses (website, advertising, e-newsletter).
@@ -71,7 +71,7 @@ const BecomeMember = () => {
       </div>
 
       {/* Membership Process Section */}
-      <div className="relative  bg-gray-50 py-32 bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) ">
+      <div className="relative  bg-gray-50 py-32 bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)] ">
         {/* Decorative shooting star element */}
         <div className="hidden lg:block absolute left-0 top-64  w-[195px] h-[1130px] pointer-events-none opacity-50">
           <img
@@ -82,13 +82,13 @@ const BecomeMember = () => {
         </div>
         <div className="max-w-7xl mx-auto px-6 mb-24 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-var(--purple-deep) mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] font-bold text-[var(--purple-deep)] mb-6 sm:mb-8 leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Membership Process
           </h2>
           <p
-            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-var(--purple-deep) max-w-2xl mx-auto leading-[1.6]"
+            className="text-base sm:text-lg md:text-xl lg:text-2xl lg:font-semibold font-medium text-[var(--purple-deep)] max-w-2xl mx-auto leading-[1.6]"
             style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
           >
             Becoming a member is easy, but for the safety and privacy of our membership, there are a few steps:
@@ -108,13 +108,13 @@ const BecomeMember = () => {
             </div>
             <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[var(--purple-deep)] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 1: Application & Email Confirmation
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-[var(--purple-deep)] leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 Complete the online application form and submit it. Check your email for a confirmation link and use it to verify your email. You will then begin to receive LOAF's monthly e-newsletter where all of the social events are listed. Your application will remain pending, and you won't be able to log into the Members Only section of the website until step 2 is complete and you are validated by an admin.
@@ -138,13 +138,13 @@ const BecomeMember = () => {
             </div>
             <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[var(--purple-deep)] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 2: Attend an event and meet us!
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-[var(--purple-deep)] leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 You have 3 months to attend a LOAF event and introduce yourself to a board member. If you do not attend an event within 3 months, you will no longer receive the e-newsletter. (This step can be skipped if you have been referred from a current member and list her on your registration form).
@@ -167,13 +167,13 @@ const BecomeMember = () => {
             </div>
             <div className="flex-1 bg-background rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
-                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-var(--purple-deep) mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
+                className="text-xl sm:text-2xl md:text-[32px] font-semibold text-[var(--purple-deep)] mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
               >
                 Step 3: Login and pay the annual fee
               </h3>
               <p
-                className="text-base sm:text-lg font-medium text-var(--purple-deep) leading-[1.6]"
+                className="text-base sm:text-lg font-medium text-[var(--purple-deep)] leading-[1.6]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif", fontVariationSettings: "'YTLC' 500, 'wdth' 100" }}
               >
                 Once we know that you are indeed you, an admin will validate your application and you will receive an email prompting you to login to your user profile and pay the annual administrative fee.
@@ -195,7 +195,7 @@ const BecomeMember = () => {
                 className="w-full h-full object-contain"
               />
             </div>
-            <div className="flex-1 bg-gradient-to-r from-var(--purple-deep) to-var(--purple-lavender) rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
+            <div className="flex-1 bg-gradient-to-r from-[var(--purple-deep)] to-[var(--purple-lavender)] rounded-[25px] px-4 py-6 sm:px-6 sm:py-7 md:px-8 md:py-8">
               <h3
                 className="text-xl sm:text-2xl md:text-[32px] font-semibold text-white mb-3 sm:mb-4 md:mb-5 leading-[1.49]"
                 style={{ fontFamily: "'Poppins', sans-serif" }}
@@ -216,14 +216,14 @@ const BecomeMember = () => {
       <div className="relative bg-gray-50 py-16 ">
         <div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row items-center justify-center gap-12 text-center">
           <h2
-            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-var(--purple-deep)  leading-[1.2] tracking-[-0.8px]"
+            className="text-2xl sm:text-3xl md:text-[40px] content-center font-bold text-[var(--purple-deep)]  leading-[1.2] tracking-[-0.8px]"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
             Ready to Join Us?
           </h2>
           <Link to="/register">
             <Button
-              className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-deep) rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
+              className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-deep)] rounded-[35px] px-6 py-3 sm:px-12 sm:py-5 md:px-16 md:py-6 text-[19px] sm:text-lg font-medium tracking-[-0.09px] leading-5 h-auto"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Register Now!
diff --git a/src/pages/BoardOfDirectors.js b/src/pages/BoardOfDirectors.js
index ce80b1e..59406b5 100644
--- a/src/pages/BoardOfDirectors.js
+++ b/src/pages/BoardOfDirectors.js
@@ -25,7 +25,7 @@ const BoardOfDirectors = () => {
         <div className="mx-auto bg-background rounded-3xl p-10 shadow-lg h-full">
           {title && (
             <h2
-              className="text-2xl sm:text-4xl font-bold text-var(--purple-deep) text-center mb-8"
+              className="text-2xl sm:text-4xl font-bold text-[var(--purple-deep)] text-center mb-8"
               style={{ fontFamily: "'Poppins', sans-serif" }}
             >
               {title}
@@ -43,10 +43,10 @@ const BoardOfDirectors = () => {
                 <Card
                   key={`${name}-${index}`}
                   style={{ fontFamily: "'Poppins', sans-serif" }}
-                  className="bg-var(--lavender-200) text-var(--purple-deep) text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
+                  className="bg-[var(--lavender-200)] text-[var(--purple-deep)] text-center px-6 py-5 rounded-3xl border border-white/70 shadow-sm"
                 >
                   <div className="min-h-16">
-                    <p className="text-xl font-bold text-var(--purple-deep)">
+                    <p className="text-xl font-bold text-[var(--purple-deep)]">
                       {name}
                     </p>
 
@@ -69,11 +69,11 @@ const BoardOfDirectors = () => {
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-var(--neutral-100:) to-var(--neutral-800)  pt-8 sm:pt-10 md:pt-12">
+      <main className="bg-gradient-to-b from-[var(--neutral-100:)] to-[var(--neutral-800)]  pt-8 sm:pt-10 md:pt-12">
         {/* Hero Section  */}
         <section className=" pt-16 pb-4 px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
           <div className="max-w-5xl mx-auto text-center px-8">
-            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-var(--purple-deep) font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-2xl sm:text-3xl md:text-[40px] leading-[1.2] text-[var(--purple-deep)] font-bold mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               LOAF Board of Directors 2025
             </h1>
 
@@ -81,11 +81,11 @@ const BoardOfDirectors = () => {
         </section>
         {/* Contact Info */}
         <section className="flex justify-center mt-4 mb-8">
-          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
+          <div className=" w-full text-center px-8 justify-center bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-deep)] max-w-5xl mx-6 flex lg:mx-12 py-5 rounded-3xl sm:px-6 md:px-8 lg:px-12 xl:px-20">
 
             <p className="text-white text-xl font-bold " style={{ fontFamily: "'Poppins', sans-serif" }}>
               For any questions or inquiries please email us at{' '}
-              <a href="mailto:info@loaftx.org" className="text-var(--neutral-500) underline font-bold hover:text-white transition-colors">
+              <a href="mailto:info@loaftx.org" className="text-[var(--neutral-500)] underline font-bold hover:text-white transition-colors">
                 info@loaftx.org
               </a>
             </p>
@@ -105,19 +105,19 @@ const BoardOfDirectors = () => {
         <section className="py-12 bg-background mt-12 ">
           {/* content containter */}
           <div className="w-full mx-auto flex flex-col px-4 sm:px-6 md:px-8 lg:px-12 xl:px-20">
-            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <h2 className="text-xl mx-auto  sm:text-2xl md:text-4xl font-bold text-[var(--purple-deep)] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
               Join the Board of Directors
             </h2>
-            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="lg:text-2xl text-md md:text-lg max-w-4xl mx-auto justify-center font-bold text-[var(--purple-deep)] text-center mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Our elections take place at our December holiday social. Here are some things to know if you are thinking about serving on the Board of Directors.
             </p>
             {/* card */}
-            <Card className="bg-var(--lavender-200) p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
-              <ol className="list-decimal list-inside space-y-4 text-lg text-var(--purple-deep)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Card className="bg-[var(--lavender-200)] p-8 rounded-2xl shadow-lg mx-auto border border-white/70">
+              <ol className="list-decimal list-inside space-y-4 text-lg text-[var(--purple-deep)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>
                   Nominations are due by November 1. Nomination Form:{' '}
                   <a href="https://docs.google.com/forms/d/e/1FAIpQLSfNomination" target="_blank" rel="noopener noreferrer"
-                    className="text-var(--purple-lavender) underline hover:text-var(--purple-deep) transition-colors">
+                    className="text-[var(--purple-lavender)] underline hover:text-[var(--purple-deep)] transition-colors">
                     Click Here
                   </a>
                 </li>
@@ -139,7 +139,7 @@ const BoardOfDirectors = () => {
                     href="https://loaftx.org/bylaws/"
                     target="_blank"
                     rel="noopener noreferrer"
-                    className="text-var(--purple-deep) underline"
+                    className="text-[var(--purple-deep)] underline"
                   >
                     https://loaftx.org/bylaws/
                   </a>
diff --git a/src/pages/ChangePasswordRequired.js b/src/pages/ChangePasswordRequired.js
index 20429dd..64e76d5 100644
--- a/src/pages/ChangePasswordRequired.js
+++ b/src/pages/ChangePasswordRequired.js
@@ -87,15 +87,15 @@ const ChangePasswordRequired = () => {
       <Navbar />
 
       <div className="max-w-md mx-auto px-6 py-12">
-        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8 text-center">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[#FFEBEE] mb-4">
               <AlertTriangle className="h-8 w-8 text-orange-500" />
             </div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Password Change Required
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Your password was reset by an administrator. Please create a new password to continue.
             </p>
           </div>
@@ -111,7 +111,7 @@ const ChangePasswordRequired = () => {
                 value={formData.currentPassword}
                 onChange={handleInputChange}
                 placeholder="Enter temporary password"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
 
@@ -125,7 +125,7 @@ const ChangePasswordRequired = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
 
@@ -139,15 +139,15 @@ const ChangePasswordRequired = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
 
-            <div className="bg-var(--lavender-300) border-l-4 border-var(--purple-lavender) p-4 rounded-lg">
+            <div className="bg-[var(--lavender-300)] border-l-4 border-[var(--purple-lavender)] p-4 rounded-lg">
               <div className="flex items-start">
-                <Lock className="h-5 w-5 text-var(--purple-lavender) mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <p className="font-medium text-var(--purple-ink) mb-1">Password Requirements:</p>
+                <Lock className="h-5 w-5 text-[var(--purple-lavender)] mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="font-medium text-[var(--purple-ink)] mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
                     <li>Both passwords must match</li>
@@ -159,17 +159,17 @@ const ChangePasswordRequired = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
             >
               {loading ? 'Changing Password...' : 'Change Password'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <div className="text-center pt-4 border-t border-var(--neutral-800)">
+            <div className="text-center pt-4 border-t border-[var(--neutral-800)]">
               <button
                 type="button"
                 onClick={handleLogout}
-                className="text-var(--purple-lavender) hover:text-var(--orange-light) text-sm underline"
+                className="text-[var(--purple-lavender)] hover:text-[var(--orange-light)] text-sm underline"
               >
                 Logout instead
               </button>
diff --git a/src/pages/ContactUs.js b/src/pages/ContactUs.js
index 5ad7305..6ce6cba 100644
--- a/src/pages/ContactUs.js
+++ b/src/pages/ContactUs.js
@@ -99,12 +99,12 @@ const ContactUs = () => {
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-var(--lavender-100) to-var(--lavender-300) px-6 py-16">
+      <main className="bg-gradient-to-b from-[var(--lavender-100)] to-[var(--lavender-300)] px-6 py-16">
         <div className="max-w-7xl mx-auto">
           <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
             {/* Contact Form */}
             <Card className="p-8 bg-background rounded-2xl">
-              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-var(--purple-deep) mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h1 className="text-2xl sm:text-[28px] leading-5 font-bold text-[var(--purple-deep)] mb-12" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Contact Form
               </h1>
 
@@ -112,7 +112,7 @@ const ContactUs = () => {
                 {/* First Name & Last Name */}
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <Label htmlFor="firstName" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Label htmlFor="firstName" className="text-[var(--purple-deep)] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                       First Name <span className="text-red-500">*</span>
                     </Label>
                     <Input
@@ -120,13 +120,13 @@ const ContactUs = () => {
                       name="firstName"
                       value={formData.firstName}
                       onChange={handleChange}
-                      className="border-2 border-var(--neutral-800) bg-var(--lavender-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
+                      className="border-2 border-[var(--neutral-800)] bg-[var(--lavender-800)] focus:border-[var(--purple-lavender)] rounded-full h-12 px-4"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       required
                     />
                   </div>
                   <div>
-                    <Label htmlFor="lastName" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Label htmlFor="lastName" className="text-[var(--purple-deep)] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Last Name <span className="text-red-500">*</span>
                     </Label>
                     <Input
@@ -134,7 +134,7 @@ const ContactUs = () => {
                       name="lastName"
                       value={formData.lastName}
                       onChange={handleChange}
-                      className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
+                      className="border-2 bg-[var(--lavender-800)] border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-full h-12 px-4"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       required
                     />
@@ -143,7 +143,7 @@ const ContactUs = () => {
 
                 {/* Email */}
                 <div>
-                  <Label htmlFor="email" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="email" className="text-[var(--purple-deep)] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Email <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -152,7 +152,7 @@ const ContactUs = () => {
                     type="email"
                     value={formData.email}
                     onChange={handleChange}
-                    className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
+                    className="border-2 bg-[var(--lavender-800)] border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-full h-12 px-4"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -160,7 +160,7 @@ const ContactUs = () => {
 
                 {/* Subject */}
                 <div>
-                  <Label htmlFor="subject" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="subject" className="text-[var(--purple-deep)] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Subject <span className="text-red-500">*</span>
                   </Label>
                   <Input
@@ -168,7 +168,7 @@ const ContactUs = () => {
                     name="subject"
                     value={formData.subject}
                     onChange={handleChange}
-                    className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-full h-12 px-4"
+                    className="border-2 bg-[var(--lavender-800)] border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-full h-12 px-4"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -176,7 +176,7 @@ const ContactUs = () => {
 
                 {/* Message */}
                 <div>
-                  <Label htmlFor="message" className="text-var(--purple-deep) font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <Label htmlFor="message" className="text-[var(--purple-deep)] font-medium mb-2 block" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Your Message <span className="text-red-500">*</span>
                   </Label>
                   <Textarea
@@ -184,7 +184,7 @@ const ContactUs = () => {
                     name="message"
                     value={formData.message}
                     onChange={handleChange}
-                    className="border-2 bg-var(--lavender-800) border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-2xl min-h-[150px] px-4 py-3 resize-none"
+                    className="border-2 bg-[var(--lavender-800)] border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-2xl min-h-[150px] px-4 py-3 resize-none"
                     style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     required
                   />
@@ -196,9 +196,9 @@ const ContactUs = () => {
                     id="consent"
                     checked={formData.consent}
                     onCheckedChange={handleConsentChange}
-                    className="mt-1 border-2 border-var(--neutral-800) data-[state=checked]:bg-var(--purple-lavender) data-[state=checked]:border-var(--purple-lavender)"
+                    className="mt-1 border-2 border-[var(--neutral-800)] data-[state=checked]:bg-[var(--purple-lavender)] data-[state=checked]:border-[var(--purple-lavender)]"
                   />
-                  <Label htmlFor="consent" className="text-var(--purple-deep) text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Label htmlFor="consent" className="text-[var(--purple-deep)] text-sm font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     I consent to LOAF storing my submitted information so they can respond to my inquiry <span className="text-red-500">*</span>
                   </Label>
                 </div>
@@ -207,7 +207,7 @@ const ContactUs = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
+                  className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white rounded-full py-6 text-lg font-semibold disabled:opacity-50"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   {loading ? (
@@ -225,7 +225,7 @@ const ContactUs = () => {
             {/* Contact Information */}
             <div className="space-y-6">
               {/* Message Card */}
-              <Card className="p-8 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) rounded-2xl shadow-lg text-white">
+              <Card className="p-8 bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-deep)] rounded-2xl shadow-lg text-white">
                 <p className="text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   If you have questions, or are interested in joining, we would love hearing from you.
                 </p>
@@ -235,12 +235,12 @@ const ContactUs = () => {
               <Card className="p-6 bg-background rounded-2xl">
                 <div className="flex items-center gap-4">
                   <div className="flex items-center justify-center flex-shrink-0">
-                    <Mail className="size-12 text-var(--purple-lavender)" />
+                    <Mail className="size-12 text-[var(--purple-lavender)]" />
                   </div>
                   <div>
                     <a
                       href="mailto:info@loaftx.org"
-                      className="text-var(--purple-electric) text-xl font-semibold hover:text-var(--purple-deep) transition-colors"
+                      className="text-[var(--purple-electric)] text-xl font-semibold hover:text-[var(--purple-deep)] transition-colors"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       info@loaftx.org
@@ -253,13 +253,13 @@ const ContactUs = () => {
               <Card className="p-6 bg-background rounded-2xl ">
                 <div className="flex items-start gap-4">
                   <div className="flex items-center justify-center flex-shrink-0">
-                    <PiMapTrifoldBold className="size-12 text-var(--purple-lavender)" />
+                    <PiMapTrifoldBold className="size-12 text-[var(--purple-lavender)]" />
                   </div>
                   <div>
-                    <p className="text-var(--purple-deep) text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    <p className="text-[var(--purple-deep)] text-[28px] font-semibold mb-1" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       LOAF
                     </p>
-                    <p className="text-var(--purple-deep) text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                    <p className="text-[var(--purple-deep)] text-[28px] font-semibold leading-relaxed" style={{ fontFamily: "'Poppins', sans-serif" }}>
                       P.O. Box 7207<br />
                       Houston, Texas 77248-7207
                     </p>
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 9b0b7a8..b698627 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -74,9 +74,9 @@ const Dashboard = () => {
     const statusConfig = {
       pending_email: { icon: Clock, label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { icon: Clock, label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { icon: CheckCircle, label: 'Pre-Validated', className: 'bg-var(--green-light) text-white' },
+      pre_validated: { icon: CheckCircle, label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
       payment_pending: { icon: AlertCircle, label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { icon: CheckCircle, label: 'Active', className: 'bg-var(--green-light) text-white' },
+      active: { icon: CheckCircle, label: 'Active', className: 'bg-[var(--green-light)] text-white' },
       inactive: { icon: AlertCircle, label: 'Inactive', className: 'bg-gray-400 text-white' },
       canceled: { icon: AlertCircle, label: 'Canceled', className: 'bg-red-100 text-red-700' },
       expired: { icon: Clock, label: 'Expired', className: 'bg-red-500 text-white' },
@@ -117,24 +117,24 @@ const Dashboard = () => {
       <div className="max-w-7xl mx-auto px-6 py-12">
         {/* Welcome Section */}
         <div className="mb-12">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome Back, {user?.first_name}!
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Here's an overview of your membership status and upcoming events.
           </p>
         </div>
 
         {/* Email Verification Alert */}
         {user && !user.email_verified && (
-          <Card className="p-6 bg-var(--lavender-300) border-2 border-var(--purple-lavender) mb-8">
+          <Card className="p-6 bg-[var(--lavender-300)] border-2 border-[var(--purple-lavender)] mb-8">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-var(--purple-lavender) flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
               <div className="flex-1">
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Verify Your Email Address
                 </h3>
-                <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Please verify your email address to complete your registration.
                   Check your inbox for the verification link.
                 </p>
@@ -142,7 +142,7 @@ const Dashboard = () => {
                   onClick={handleResendVerification}
                   disabled={resendLoading}
                   variant="outline"
-                  className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
+                  className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
                 >
                   <Mail className="h-4 w-4 mr-2" />
                   {resendLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -153,22 +153,22 @@ const Dashboard = () => {
         )}
 
         {/* Status Card */}
-        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8" data-testid="status-card">
+        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg mb-8" data-testid="status-card">
           <div className="flex items-start justify-between flex-wrap gap-4">
             <div>
-              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Membership Status
               </h2>
               <div className="mb-4">
                 {getStatusBadge(user?.status)}
               </div>
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {getStatusMessage(user?.status)}
               </p>
             </div>
             <Link to="/profile">
               <Button
-                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
+                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
                 data-testid="view-profile-button"
               >
                 <User className="h-4 w-4 mr-2" />
@@ -181,36 +181,36 @@ const Dashboard = () => {
         {/* Grid Layout */}
         <div className="grid lg:grid-cols-3 gap-8">
           {/* Quick Stats */}
-          <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="quick-stats-card">
-            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="quick-stats-card">
+            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Quick Info
             </h3>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-var(--purple-ink) font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
-                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
+                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
                 </p>
               </div>
               {user?.subscription_start_date && user?.subscription_end_date && (
                 <>
-                  <div className="pt-4 border-t border-var(--neutral-800)">
-                    <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
-                    <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <div className="pt-4 border-t border-[var(--neutral-800)]">
+                    <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
+                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
-                    <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
+                    <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
                     </p>
                   </div>
@@ -220,15 +220,15 @@ const Dashboard = () => {
           </Card>
 
           {/* Upcoming Events */}
-          <Card className="lg:col-span-2 p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="upcoming-events-card">
+          <Card className="lg:col-span-2 p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="upcoming-events-card">
             <div className="flex justify-between items-center mb-6">
-              <h3 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Upcoming Events
               </h3>
               <Link to="/events">
                 <Button
                   variant="ghost"
-                  className="text-var(--orange-light) hover:text-var(--purple-lavender)"
+                  className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)]"
                   data-testid="view-all-events-button"
                 >
                   View All
@@ -237,26 +237,26 @@ const Dashboard = () => {
             </div>
 
             {loading ? (
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
             ) : events.length > 0 ? (
               <div className="space-y-4">
                 {events.map((event) => (
                   <Link to={`/events/${event.id}`} key={event.id}>
                     <div
-                      className="p-4 border border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) hover:shadow-md transition-all cursor-pointer"
+                      className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] hover:shadow-md transition-all cursor-pointer"
                       data-testid={`event-card-${event.id}`}
                     >
                       <div className="flex items-start gap-4">
-                        <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
-                          <Calendar className="h-6 w-6 text-var(--purple-lavender)" />
+                        <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+                          <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
                         </div>
                         <div className="flex-1">
-                          <h4 className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+                          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {new Date(event.start_at).toLocaleDateString()} at{' '}
                             {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                           </p>
-                          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                         </div>
                       </div>
                     </div>
@@ -265,9 +265,9 @@ const Dashboard = () => {
               </div>
             ) : (
               <div className="text-center py-12">
-                <Calendar className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-                <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
+                <Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
               </div>
             )}
           </Card>
@@ -275,12 +275,12 @@ const Dashboard = () => {
 
         {/* CTA Section */}
         {user?.status === 'pending_validation' && (
-          <Card className="mt-8 p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
+          <Card className="mt-8 p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border border-[var(--neutral-800)]">
             <div className="text-center">
-              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Application Under Review
               </h3>
-              <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your membership application is being reviewed by our admin team. You'll be notified once validated!
               </p>
             </div>
@@ -289,20 +289,20 @@ const Dashboard = () => {
 
         {/* Payment Prompt for payment_pending status */}
         {user?.status === 'payment_pending' && (
-          <Card className="mt-8 p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border-2 border-var(--purple-lavender)">
+          <Card className="mt-8 p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border-2 border-[var(--purple-lavender)]">
             <div className="text-center">
               <div className="mb-4">
-                <AlertCircle className="h-16 w-16 text-var(--purple-lavender) mx-auto" />
+                <AlertCircle className="h-16 w-16 text-[var(--purple-lavender)] mx-auto" />
               </div>
-              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Complete Your Payment
               </h3>
-              <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Great news! Your membership application has been validated. Complete your payment to activate your membership and gain full access to all member benefits.
               </p>
               <Link to="/plans">
                 <Button
-                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
                   data-testid="complete-payment-cta"
                 >
                   <CheckCircle className="mr-2 h-5 w-5" />
@@ -316,38 +316,38 @@ const Dashboard = () => {
         {/* Event Activity Section */}
         <div className="mt-12">
           <div className="flex justify-between items-center mb-6">
-            <h2 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               My Event Activity
             </h2>
           </div>
 
           {activityLoading ? (
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
           ) : eventActivity ? (
             <div className="space-y-8">
               {/* Stats Cards */}
               <div className="grid md:grid-cols-2 gap-6">
-                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
                   <div className="flex items-center gap-4">
-                    <div className="bg-var(--neutral-800)/20 p-4 rounded-lg">
-                      <Calendar className="h-8 w-8 text-var(--purple-lavender)" />
+                    <div className="bg-[var(--neutral-800)]/20 p-4 rounded-lg">
+                      <Calendar className="h-8 w-8 text-[var(--purple-lavender)]" />
                     </div>
                     <div>
-                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
-                      <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+                      <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {eventActivity.total_rsvps}
                       </p>
                     </div>
                   </div>
                 </Card>
-                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
+                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
                   <div className="flex items-center gap-4">
-                    <div className="bg-var(--green-light)/20 p-4 rounded-lg">
-                      <CheckCircle className="h-8 w-8 text-var(--green-light)" />
+                    <div className="bg-[var(--green-light)]/20 p-4 rounded-lg">
+                      <CheckCircle className="h-8 w-8 text-[var(--green-light)]" />
                     </div>
                     <div>
-                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
-                      <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
+                      <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {eventActivity.total_attended}
                       </p>
                     </div>
@@ -357,25 +357,25 @@ const Dashboard = () => {
 
               {/* Upcoming RSVP'd Events */}
               {eventActivity.upcoming_events && eventActivity.upcoming_events.length > 0 && (
-                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-                  <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                  <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Upcoming Events (RSVP'd)
                   </h3>
                   <div className="space-y-3">
                     {eventActivity.upcoming_events.map((event) => (
                       <Link to={`/events/${event.id}`} key={event.id}>
-                        <div className="p-4 border border-var(--neutral-800) rounded-xl hover:border-var(--purple-lavender) hover:shadow-md transition-all">
+                        <div className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] hover:shadow-md transition-all">
                           <div className="flex items-start justify-between gap-4">
                             <div className="flex-1">
-                              <h4 className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                              <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+                              <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 {new Date(event.start_at).toLocaleDateString()} at{' '}
                                 {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                               </p>
-                              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                             </div>
                             <Badge className={
-                              event.rsvp_status === 'yes' ? 'bg-var(--green-light) text-white' :
+                              event.rsvp_status === 'yes' ? 'bg-[var(--green-light)] text-white' :
                                 event.rsvp_status === 'maybe' ? 'bg-orange-100 text-orange-700' :
                                   'bg-gray-200 text-gray-700'
                             }>
@@ -392,27 +392,27 @@ const Dashboard = () => {
 
               {/* Past Events & Attendance */}
               {eventActivity.past_events && eventActivity.past_events.length > 0 && (
-                <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-                  <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                  <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Past Events
                   </h3>
                   <div className="space-y-3">
                     {eventActivity.past_events.slice(0, 5).map((event) => (
-                      <div key={event.id} className="p-4 border border-var(--neutral-800) rounded-xl">
+                      <div key={event.id} className="p-4 border border-[var(--neutral-800)] rounded-xl">
                         <div className="flex items-start justify-between gap-4">
                           <div className="flex-1">
-                            <h4 className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
+                            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {new Date(event.start_at).toLocaleDateString()} at{' '}
                               {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                             </p>
                           </div>
                           <div className="flex flex-col items-end gap-2">
-                            <Badge className={event.attended ? 'bg-var(--green-light) text-white' : 'bg-gray-200 text-gray-700'}>
+                            <Badge className={event.attended ? 'bg-[var(--green-light)] text-white' : 'bg-gray-200 text-gray-700'}>
                               {event.attended ? 'Attended' : 'Did not attend'}
                             </Badge>
                             {event.attended && event.attended_at && (
-                              <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 Checked in: {new Date(event.attended_at).toLocaleDateString()}
                               </p>
                             )}
@@ -422,7 +422,7 @@ const Dashboard = () => {
                     ))}
                   </div>
                   {eventActivity.past_events.length > 5 && (
-                    <p className="text-sm text-center text-var(--purple-lavender) mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-sm text-center text-[var(--purple-lavender)] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Showing 5 of {eventActivity.past_events.length} past events
                     </p>
                   )}
@@ -432,17 +432,17 @@ const Dashboard = () => {
               {/* No Events Message */}
               {(!eventActivity.upcoming_events || eventActivity.upcoming_events.length === 0) &&
                 (!eventActivity.past_events || eventActivity.past_events.length === 0) && (
-                  <Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800)">
+                  <Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
                     <div className="text-center">
-                      <Calendar className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-                      <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+                      <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                         No Event Activity Yet
                       </h3>
-                      <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Browse upcoming events and RSVP to start building your event history!
                       </p>
                       <Link to="/events">
-                        <Button className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6">
+                        <Button className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6">
                           <Calendar className="h-4 w-4 mr-2" />
                           Browse Events
                         </Button>
@@ -452,10 +452,10 @@ const Dashboard = () => {
                 )}
             </div>
           ) : (
-            <Card className="p-12 bg-background rounded-2xl border border-var(--neutral-800)">
+            <Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
               <div className="text-center">
-                <AlertCircle className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-                <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <AlertCircle className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Failed to load event activity. Please try refreshing the page.
                 </p>
               </div>
diff --git a/src/pages/Donate.js b/src/pages/Donate.js
index f3bd5b1..6db63ca 100644
--- a/src/pages/Donate.js
+++ b/src/pages/Donate.js
@@ -58,17 +58,17 @@ const Donate = () => {
     <div className="min-h-screen">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
+      <main className="bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
         {/* Hero Section */}
         <section className="py-12">
           <div className="max-w-4xl mx-auto text-center h-full">
             <div className="flex justify-center mb-4">
               <img src={loafHearts} alt="Hearts" className="w-32 h-auto" onError={(e) => e.target.style.display = 'none'} />
             </div>
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-var(--purple-deep) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-bold text-[var(--purple-deep)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Donate
             </h1>
-            <p className="text-xl text-var(--purple-deep) font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <p className="text-xl text-[var(--purple-deep)] font-medium" style={{ fontFamily: "'Poppins', sans-serif" }}>
               We really appreciate your donations. You can make your donation online
               or send a check by mail.
             </p>
@@ -84,8 +84,8 @@ const Donate = () => {
               <div className="mx-auto flex-1 w-full h-full">
                 <Card className="p-8 bg-background rounded-3xl w-full h-full content-center">
                   <div className="flex items-center gap-4 mb-6">
-                    <CreditCard className="size-24 text-var(--purple-lavender)" />
-                    <h2 className="text-3xl font-bold text-var(--purple-deep)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <CreditCard className="size-24 text-[var(--purple-lavender)]" />
+                    <h2 className="text-3xl font-bold text-[var(--purple-deep)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Select Your Donation Amount
                     </h2>
                   </div>
@@ -97,7 +97,7 @@ const Donate = () => {
                         key={amount}
                         onClick={() => handleDonateAmount(amount * 100)}
                         disabled={processingAmount === amount * 100}
-                        className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white text-xl py-8 rounded-full disabled:opacity-50"
+                        className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white text-xl py-8 rounded-full disabled:opacity-50"
                       >
                         {processingAmount === amount * 100 ? (
                           <Loader2 className="h-6 w-6 animate-spin" />
@@ -112,13 +112,13 @@ const Donate = () => {
                   <Button
                     onClick={() => setCustomAmountDialogOpen(true)}
                     disabled={processingAmount !== null}
-                    className="w-full bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
+                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white text-xl py-8 rounded-full flex items-center justify-center gap-2"
                   >
                     <Heart className="h-6 w-6" />
                     Donate Any Amount
                   </Button>
 
-                  <p className="text-sm text-var(--purple-lavender) text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-[var(--purple-lavender)] text-center mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Secure donation processing powered by Stripe
                   </p>
                 </Card>
@@ -131,13 +131,13 @@ const Donate = () => {
                 <div className="flex flex-col gap-8 w-full">
                   {/* Mail Check */}
                   <Card className="p-8 bg-background rounded-3xl flex gap-4 items-center flex-1">
-                    <Mail className="size-24 text-var(--purple-lavender)" />
+                    <Mail className="size-24 text-[var(--purple-lavender)]" />
 
                     <div>
-                      <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                         Mail a Check
                       </h3>
-                      <p className="text-lg text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-lg text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Our mailing address for checks:<br />
                         <span className="font-semibold">LOAF</span><br />
                         P.O. Box 7207<br />
@@ -153,14 +153,14 @@ const Donate = () => {
                     </div>
 
                     <div>
-                      <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                         Pay with Zelle
                       </h3>
-                      <p className="text-lg text-var(--purple-deep) leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-lg text-[var(--purple-deep)] leading-relaxed mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         If your bank allows the use of Zelle, please feel free to send money to:
                       </p>
                       <a href="mailto:LOAFHoustonTX@gmail.com"
-                        className="text-var(--purple-lavender) text-lg font-bold underline hover:text-var(--purple-deep) transition-colors"
+                        className="text-[var(--purple-lavender)] text-lg font-bold underline hover:text-[var(--purple-deep)] transition-colors"
                         style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         LOAFHoustonTX@gmail.com
                       </a>
@@ -181,21 +181,21 @@ const Donate = () => {
       <Dialog open={customAmountDialogOpen} onOpenChange={setCustomAmountDialogOpen}>
         <DialogContent className="sm:max-w-[450px] bg-background rounded-3xl">
           <DialogHeader>
-            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Enter Donation Amount
             </DialogTitle>
-            <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Choose how much you'd like to donate to support our community
             </DialogDescription>
           </DialogHeader>
 
           <div className="space-y-4 py-4">
             <div>
-              <Label htmlFor="customAmount" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Label htmlFor="customAmount" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Amount (USD)
               </Label>
               <div className="relative mt-2">
-                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-var(--purple-lavender) text-xl font-semibold">
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-xl font-semibold">
                   $
                 </span>
                 <Input
@@ -206,7 +206,7 @@ const Donate = () => {
                   value={customAmount}
                   onChange={(e) => setCustomAmount(e.target.value)}
                   placeholder="50.00"
-                  className="pl-10 h-14 text-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-xl"
+                  className="pl-10 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-xl"
                   onKeyPress={(e) => {
                     if (e.key === 'Enter') {
                       handleCustomDonate();
@@ -214,13 +214,13 @@ const Donate = () => {
                   }}
                 />
               </div>
-              <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum donation: $1.00
               </p>
             </div>
 
-            <div className="bg-var(--lavender-300) rounded-lg p-4">
-              <p className="text-sm text-var(--purple-ink) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="bg-[var(--lavender-300)] rounded-lg p-4">
+              <p className="text-sm text-[var(--purple-ink)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>Thank you for supporting LOAF!</strong><br />
                 Your donation helps us continue our mission and provide meaningful experiences for our community.
               </p>
@@ -232,14 +232,14 @@ const Donate = () => {
               type="button"
               variant="outline"
               onClick={() => setCustomAmountDialogOpen(false)}
-              className="rounded-full border-2 border-var(--neutral-800)"
+              className="rounded-full border-2 border-[var(--neutral-800)]"
             >
               Cancel
             </Button>
             <Button
               type="button"
               onClick={handleCustomDonate}
-              className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-deep) rounded-full"
+              className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-deep)] rounded-full"
             >
               Continue to Payment
             </Button>
diff --git a/src/pages/DonationSuccess.js b/src/pages/DonationSuccess.js
index 9618131..7d65b3f 100644
--- a/src/pages/DonationSuccess.js
+++ b/src/pages/DonationSuccess.js
@@ -14,9 +14,9 @@ const DonationSuccess = () => {
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-white to-var(--lavender-300) px-6 py-20">
+      <main className="bg-gradient-to-b from-white to-[var(--lavender-300)] px-6 py-20">
         <div className="max-w-2xl mx-auto">
-          <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border-2 border-var(--neutral-800) shadow-xl text-center">
+          <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border-2 border-[var(--neutral-800)] shadow-xl text-center">
             {/* Success Icon */}
             <div className="flex justify-center mb-4">
               <img
@@ -26,34 +26,34 @@ const DonationSuccess = () => {
                 onError={(e) => e.target.style.display = 'none'}
               />
             </div>
-            <div className="inline-flex items-center justify-center w-20 h-20 bg-var(--green-light)/10 rounded-full mb-6">
-              <CheckCircle className="h-12 w-12 text-var(--green-light)" />
+            <div className="inline-flex items-center justify-center w-20 h-20 bg-[var(--green-light)]/10 rounded-full mb-6">
+              <CheckCircle className="h-12 w-12 text-[var(--green-light)]" />
             </div>
 
             {/* Title */}
-            <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-2xl sm:text-3xl md:text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Thank You for Your Donation!
             </h1>
 
             {/* Message */}
             <div className="space-y-4 mb-8">
-              <p className="text-xl text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xl text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your generous contribution helps support our community and continue our mission.
               </p>
 
-              <div className="bg-gradient-to-r from-var(--lavender-300) to-var(--neutral-800)/30 rounded-2xl p-6 border-2 border-var(--neutral-800)">
-                <div className="flex items-center justify-center gap-2 text-var(--orange-light) mb-2">
+              <div className="bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 rounded-2xl p-6 border-2 border-[var(--neutral-800)]">
+                <div className="flex items-center justify-center gap-2 text-[var(--orange-light)] mb-2">
                   <Heart className="h-6 w-6" />
                   <span className="text-lg font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Your Support Makes a Difference
                   </span>
                 </div>
-                <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A receipt for your donation has been sent to your email address.
                 </p>
               </div>
 
-              <p className="text-base text-var(--purple-lavender) pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-[var(--purple-lavender)] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
               </p>
             </div>
@@ -62,7 +62,7 @@ const DonationSuccess = () => {
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button
                 onClick={() => navigate('/')}
-                className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full px-8 py-6 text-lg font-medium shadow-lg"
+                className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Return to Home
@@ -70,7 +70,7 @@ const DonationSuccess = () => {
               <Button
                 onClick={() => navigate('/donate')}
                 variant="outline"
-                className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--neutral-800)/20 rounded-full px-8 py-6 text-lg font-medium"
+                className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]/20 rounded-full px-8 py-6 text-lg font-medium"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Make Another Donation
@@ -80,12 +80,12 @@ const DonationSuccess = () => {
 
           {/* Additional Info */}
           <div className="mt-12 text-center">
-            <p className="text-sm text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Have questions about your donation?
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium transition-colors"
+              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium transition-colors"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact us at support@loaf.org
diff --git a/src/pages/EventDetails.js b/src/pages/EventDetails.js
index 1b0ebb5..1e389af 100644
--- a/src/pages/EventDetails.js
+++ b/src/pages/EventDetails.js
@@ -51,7 +51,7 @@ const EventDetails = () => {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
         </div>
       </div>
     );
@@ -68,23 +68,23 @@ const EventDetails = () => {
       <div className="max-w-4xl mx-auto px-6 py-12">
         <button
           onClick={() => navigate('/events')}
-          className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors mb-8"
+          className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors mb-8"
           data-testid="back-to-events-button"
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
           Back to Events
         </button>
 
-        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8">
             <div className="flex items-center gap-4 mb-6">
-              <div className="bg-var(--neutral-800)/20 p-4 rounded-xl">
-                <Calendar className="h-10 w-10 text-var(--purple-lavender)" />
+              <div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
+                <Calendar className="h-10 w-10 text-[var(--purple-lavender)]" />
               </div>
               {event.user_rsvp_status && (
                 <Badge
                   className={`px-4 py-2 rounded-full text-sm ${event.user_rsvp_status === 'yes'
-                    ? 'bg-var(--green-light) text-white'
+                    ? 'bg-[var(--green-light)] text-white'
                     : event.user_rsvp_status === 'no'
                       ? 'bg-gray-400 text-white'
                       : 'bg-orange-100 text-orange-700'
@@ -97,12 +97,12 @@ const EventDetails = () => {
               )}
             </div>
 
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               {event.title}
             </h1>
 
             <div className="space-y-4 text-lg">
-              <div className="flex items-center gap-3 text-var(--purple-lavender)">
+              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleDateString('en-US', {
@@ -113,18 +113,18 @@ const EventDetails = () => {
                   })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-var(--purple-lavender)">
+              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
                   {new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-var(--purple-lavender)">
+              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                 <MapPin className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
               </div>
-              <div className="flex items-center gap-3 text-var(--purple-lavender)">
+              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                 <Users className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -135,18 +135,18 @@ const EventDetails = () => {
           </div>
 
           {event.description && (
-            <div className="mb-8 pb-8 border-b border-var(--neutral-800)">
-              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="mb-8 pb-8 border-b border-[var(--neutral-800)]">
+              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About This Event
               </h2>
-              <p className="text-var(--purple-lavender) leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {event.description}
               </p>
             </div>
           )}
 
           <div>
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               RSVP to This Event
             </h2>
             <div className="flex gap-4 flex-wrap">
@@ -154,8 +154,8 @@ const EventDetails = () => {
                 onClick={() => handleRSVP('yes')}
                 disabled={rsvpLoading}
                 className={`rounded-full px-8 py-6 flex items-center gap-2 ${event.user_rsvp_status === 'yes'
-                  ? 'bg-var(--green-light) text-white'
-                  : 'bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background'
+                  ? 'bg-[var(--green-light)] text-white'
+                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background'
                   }`}
                 data-testid="rsvp-yes-button"
               >
@@ -168,7 +168,7 @@ const EventDetails = () => {
                 variant="outline"
                 className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${event.user_rsvp_status === 'maybe'
                   ? 'border-orange-400 bg-orange-100 text-orange-700'
-                  : 'border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300)'
+                  : 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
                   }`}
                 data-testid="rsvp-maybe-button"
               >
@@ -191,11 +191,11 @@ const EventDetails = () => {
             </div>
 
             {/* Add to Calendar Section */}
-            <div className="mt-8 pt-8 border-t border-var(--neutral-800)">
-              <h2 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="mt-8 pt-8 border-t border-[var(--neutral-800)]">
+              <h2 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Add to Your Calendar
               </h2>
-              <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Never miss this event! Add it to your calendar app for reminders.
               </p>
               <AddToCalendarButton
diff --git a/src/pages/Events.js b/src/pages/Events.js
index 77e1e70..b221a2f 100644
--- a/src/pages/Events.js
+++ b/src/pages/Events.js
@@ -30,7 +30,7 @@ const Events = () => {
     if (!rsvpStatus) return null;
 
     const config = {
-      yes: { label: 'Going', className: 'bg-var(--green-light) text-white' },
+      yes: { label: 'Going', className: 'bg-[var(--green-light)] text-white' },
       no: { label: 'Not Going', className: 'bg-gray-400 text-white' },
       maybe: { label: 'Maybe', className: 'bg-orange-100 text-orange-700' }
     };
@@ -51,62 +51,62 @@ const Events = () => {
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="mb-12">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Upcoming Events
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse and RSVP to our community events.
           </p>
         </div>
 
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
           </div>
         ) : events.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
             {events.map((event) => (
               <Link to={`/events/${event.id}`} key={event.id}>
                 <Card
-                  className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
+                  className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
                   data-testid={`event-card-${event.id}`}
                 >
                   <div className="flex justify-between items-start mb-4">
-                    <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
-                      <Calendar className="h-6 w-6 text-var(--purple-lavender)" />
+                    <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+                      <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
                     </div>
                     {getRSVPBadge(event.user_rsvp_status)}
                   </div>
 
-                  <h3 className="text-xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {event.title}
                   </h3>
 
                   {event.description && (
-                    <p className="text-var(--purple-lavender) mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-[var(--purple-lavender)] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {event.description}
                     </p>
                   )}
 
                   <div className="space-y-2 text-sm">
-                    <div className="flex items-center gap-2 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
                       <Calendar className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(event.start_at).toLocaleDateString()} at{' '}
                         {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-2 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
                       <MapPin className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
                     </div>
-                    <div className="flex items-center gap-2 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
                       <Users className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.rsvp_count || 0} attending</span>
                     </div>
                   </div>
 
-                  <div className="mt-6 flex items-center text-var(--orange-light) font-medium">
+                  <div className="mt-6 flex items-center text-[var(--orange-light)] font-medium">
                     View Details
                     <ArrowRight className="ml-2 h-4 w-4" />
                   </div>
@@ -116,11 +116,11 @@ const Events = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <Calendar className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <Calendar className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Events Available
             </h3>
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               There are no upcoming events at the moment. Check back later!
             </p>
           </div>
diff --git a/src/pages/ForgotPassword.js b/src/pages/ForgotPassword.js
index 2573662..a49e87f 100644
--- a/src/pages/ForgotPassword.js
+++ b/src/pages/ForgotPassword.js
@@ -37,23 +37,23 @@ const ForgotPassword = () => {
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/login" className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors">
+          <Link to="/login" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Login
           </Link>
         </div>
 
-        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           {!submitted ? (
             <>
               <div className="mb-8 text-center">
-                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-var(--lavender-300) mb-4">
-                  <Mail className="h-8 w-8 text-var(--purple-lavender)" />
+                <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
+                  <Mail className="h-8 w-8 text-[var(--purple-lavender)]" />
                 </div>
-                <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Forgot Password?
                 </h1>
-                <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   No worries! Enter your email and we'll send you reset instructions.
                 </p>
               </div>
@@ -69,22 +69,22 @@ const ForgotPassword = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="your.email@example.com"
-                    className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   />
                 </div>
 
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+                  className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
                 >
                   {loading ? 'Sending...' : 'Send Reset Link'}
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
 
-                <p className="text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Remember your password?{' '}
-                  <Link to="/login" className="text-var(--orange-light) hover:underline font-medium">
+                  <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                     Login here
                   </Link>
                 </p>
@@ -92,21 +92,21 @@ const ForgotPassword = () => {
             </>
           ) : (
             <div className="text-center">
-              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-var(--green-bg) mb-6">
-                <CheckCircle className="h-8 w-8 text-var(--green-success]" />
+              <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--green-bg)] mb-6">
+                <CheckCircle className="h-8 w-8 text-[var(--green-success)]" />
               </div>
-              <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Check Your Email
               </h1>
-              <p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                If an account exists for <span className="font-medium text-var(--purple-ink)">{email}</span>,
+              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                If an account exists for <span className="font-medium text-[var(--purple-ink)]">{email}</span>,
                 you will receive a password reset link shortly.
               </p>
-              <p className="text-sm text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The link will expire in 1 hour. If you don't see the email, check your spam folder.
               </p>
               <Link to="/login">
-                <Button className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
+                <Button className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform">
                   Return to Login
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
diff --git a/src/pages/History.js b/src/pages/History.js
index 7d263ba..bad333f 100644
--- a/src/pages/History.js
+++ b/src/pages/History.js
@@ -23,13 +23,13 @@ const CardSection = ({ children, className = '', arrow = true }) => (
 );
 
 const Title = ({ children }) => (
-  <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+  <h2 className="text-3xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
     {children}
   </h2>
 );
 
 const Paragragh = ({ children }) => (
-  <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+  <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
     {children}
   </p>
 );
@@ -46,15 +46,15 @@ const History = () => {
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-br from-var(--neutral-100:) to-var(--neutral-700) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
+      <main className="bg-gradient-to-br from-[var(--neutral-100:)] to-[var(--neutral-700)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-8 sm:py-10 md:py-12">
         {/* Hero Section */}
         <section className="py-12">
           <div className="max-w-3xl mx-auto flex justify-around mb-12 flex-col gap-6 items-center lg:flex-row">
-            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-var(--purple-deep) "
+            <h1 className="text-3xl sm:text-4xl md:text-5xl font-extrabold text-[var(--purple-deep)] "
               style={{ fontFamily: "'Poppins', sans-serif" }}>
               History of LOAF
             </h1>
-            <div className="flex items-center justify-center gap-6 text-var(--purple-deep)">
+            <div className="flex items-center justify-center gap-6 text-[var(--purple-deep)]">
               <Pen className="size-7" />
               <p className="text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 By Arden Eversmeyer
@@ -69,19 +69,19 @@ const History = () => {
             <div className="md:w-1/3 ">
               <img src={ardenCharlotteImg} alt="Arden Eversmeyer and Charlotte Avery"
                 className="rounded-lg w-full" onError={(e) => e.target.style.display = 'none'} />
-              <p className="text-sm text-var(--purple-deep) mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-deep)] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Arden Eversmeyer and Charlotte Avery
               </p>
             </div>
             <div className="md:w-2/3">
               <Title>Part 1</Title>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In 1985 my life partner of 33 years died. For many years we had been part of a large “friendship group”, many of whom had been together longer than we had. But I was the first to lose a partner. After a few months I began to feel the need to explore community. Already retired, the necessity of being closeted was gone. I soon discovered there was no group for mid-life an old lesbians in Houston, and began the search for such groups around the U.S.
               </p>
-              <p className="text-md mb-4 text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md mb-4 text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In April of 1987 I loaded my camper and headed for California. I started in San Diego, and worked my way up the coast to San Francisco finding and visiting senior LGBT groups. I came home with much information, and some suggestions about organizing. One fact that was consistent with all the groups was that if the group was for both men and women - the women dropped out. The recommendation was to start a group for women only.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>I had become friends with some young lesbians here in Houston who knew the Gay community. We started meeting and brainstorming, and the group now known as LOAF was born.</p>
             </div>
           </div>
         </CardSection>
@@ -90,13 +90,13 @@ const History = () => {
         {/* Part 2 */}
         <CardSection >
           <Title>Part 2</Title>
-          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             The Founding Mothers of LOAF are Ruth Sathre (nurse), JoAnn Beene (psychologist), Delores Nason (business woman), JoAnn Loulan (psychologist and writer, now living in Guerneville, CA), and Judy Peyton (social worker). We decided to form a group for Lesbians Over Fifty and began the search for others "like us."
           </p>
-          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             In 1993, we advertised in OutSmart Magazine, the Houston gay magazine, and invited interested women to join us at a local restaurant. Founding mothers and 19 other women came to that first meeting. Since then the group has gone through many evolutions.
           </p>
-          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-var(--purple-deep)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <ul className="list-disc ml-6 mt-4 space-y-2 text-md text-[var(--purple-deep)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <li>AGE OF PARTICIPANTS - We launched as LOAFF (Lesbians Over Age Fifty-Five) and quickly lowered the entry age to fifty so more women could join.</li>
             <li>NAME FOR THE GROUP - The acronym began as LOAFF, then we streamlined it to the now-familiar LOAF.</li>
             <li>AMOUNT OF STRUCTURING - Too many rules can smother a grassroots group, so we kept things loose and let participating women guide direction as needs evolved.</li>
@@ -119,13 +119,13 @@ const History = () => {
             </div>
             <div className="">
               <Title>Part 3</Title>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The first meeting of LOAF was the third Sunday of October 1987 at Womynspace. There were six women besides myself at that first meeting. attending were Betty Rudnick, Billie Carter, Josephine Jones, Sylvia Porter, Marjorie Fulp, and Charlotte Avery. Of those six women, only Sylvia Porter and Charlotte Avery are still alive.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Much that we discussed that day is still the heart of the group today - decisions by consensus at monthly meetings and activities governed by needs and wishes of participating women. It was soon decided to make the age requirement for membership age 50, and we became LOAF.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In 1989 member Jo Stewart, social worker at Methodist Hospital, started urging LOAF to incorporate as a non-profit. The work began in 1990 with Moore & Hunt (Debbie Hunt) as our Corporate Attorneys. Jo died of cancer in 1990. The work for application of our 501(c)3 was done by Floi Ewing, Arden&apos;s sister, and our non-profit status was granted in January 1991. Loaf incorporated as a social networking and support group without a membership roll to protect the anonymity of the women in LOAF.
               </p>
             </div>
@@ -137,7 +137,7 @@ const History = () => {
         <CardSection>
           <div className=" ">
             <Title>Part 4</Title>
-            <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Third Sunday meeting places have changed over the years. We moved from Womynspace to Autrey House near Rice University. We were there from November 1987 until May 1990 when the new Bishop dis-invited all GLBT groups because of homophobia. We spent a couple months at Montrose Counseling Center (on Lovett), and then moved to the Metropolitan Multi- Service Center on W. Gray. We met there from August 1990 until January 1993. We left because the city started closing the centers on Sunday, and we were not willing to change our meeting day. From February through June we met at Inklings Book Store . In July we started our long occupancy with Houston Mission Church, and met there until the church dissolved in April 2001. We then met at the Hollyfield Center for seven months. From there we went to the GLBT Community Center on Hawthorne where we stayed until July 2003. Attendance was dropping off, and some of the women were not comfortable in a gay identified place. So Third Sunday Meetings moved to Charlotte and Arden&apos;s home - and we met there from August 2003 until April 2011. Membership had grown until the meetings had reached critical mass and parking was a problem. So a team of board members started researching for a new home. And on the third Sunday of May 2011 LOAF started meeting at the Montrose Counseling Center. A new era had started.
             </p>
           </div>
@@ -155,16 +155,16 @@ const History = () => {
 
             <div className="w-full lg:w-1/2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <Title>Part 5</Title>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" >
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" >
                 The activities of the monthly meetings were decided by the participating women. Rules were very limited, and decisions were made monthly by the women attending. We soon decided to set up a quarterly meeting schedule of pot-luck, speaker, and games. We followed this schedule for at least ten years. New ideas/programs were added as time allowed. Our first speaker was Pokey Anderson, an icon in the GLBT community. She provided much information about our history in Houston. We also decided to ask Deb Hunt to talk to us about documents, and she has done this periodically over the years. She spoke to us well before we decided to incorporate, and she then became our Corporate Attorney.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In November 1988 we instituted our annual Benevolent Project. We collected items to contribute to Stone Soup Kitchen - a GLBT food pantry. We have done this every year since, and have contributed to groups such as Omega House, The Rose, Battered Women, local lesbian organizations, and some individuals.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 In June 1989 we entered our first Pride Parade. That year we had a convertible and a walking group. Several of the LOAF women participate with other groups in the parade, but we have participated every year since 1989. In 2010 we entered our first float and won a trophy for best representation of the theme.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 All of these decisions were made by the women at the Third Sunday meetings. There have never been rules instigated by the Board of Directors. Because many women don&apos;t want to attend meetings, we changed Third Sunday Meeting to Meet &apos;N Greet several years ago. And that is what we do - take care of any necessary business. But greet newcomers and socialize with our friends.
               </p>
             </div>
@@ -176,23 +176,23 @@ const History = () => {
         {/* Part 6 */}
         <CardSection >
 
-          <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          <h2 className="text-3xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Part 6
           </h2>
 
-          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Socials have always been a big part of the activities for LOAF, and having a social as well as the monthly “Third Sunday” meeting was always on the calendar. Pot lucks topped the list for many years, and they were hosted by women in their homes. That is more difficult now because of the size of the membership. Bev and Sandy have hosted a potluck since 1995, and Eva Geer for several years.
           </p>
 
-          <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             The ice cream socials started in 1989. There are still women who have never cranked or eaten home made ice cream.The “picnic in the park” started in 2000. We have held picnics in a couple State Parks as well as Tom Bass Park in recent years.In 1988 we started attending the TUTS Broadway Musical at Miller Theater in July. We bring a snack supper and a chair and sit on the hill.In 2000 we started eating at Sudie's Catfish House in January. A breather from a busy party season, but a good way to connect.From 1987 to 1994 we had “Second Tuesday Dancing”. First at The Ranch, and then at Ms B&apos;s, it was our way to celebrate birthdays of the month. It was well attended.
           </p>
 
-          <p className="text-md text-var(--purple-deep) leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             From 1989 to 1993 we had a five day Thanksgiving camp-out at a State Park. We roasted turkey and women came for potluck on Thanksgiving Day.We had from 10 to 20 campers, and maybe 25 for dinner.We have had a Christmas party every year since 1987.We have had several Port of Houston tours on the Sam Houston; several Houston Zoo tours; museum tours; and out-of town tours for bluebonnets, miniature horses, and Blue Bell ice cream. And occasionally, for lack of inspiration for an event social, we simply met for lunch at a local restaurant.
           </p>
 
-          <p className="text-md text-var(--purple-deep) leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             LOAF has always been a social group. We have never had support groups or counseling. We are a place to meet other lesbians over fifty, make friends, and have fun.
           </p>
 
@@ -208,13 +208,13 @@ const History = () => {
 
             </div>
             <div className="md:w-2/3">
-              <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h2 className="text-3xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 Part 7
               </h2>
-              <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The LOAF Library has been an important part of the offering to the women. It started about 1987 when Arden discovered there were books - both fiction and non-fiction - about lesbians. We had one bookstore then -” Wilde &apos;N Stein” - that had a limited selection of lesbian books. Then Arden discovered Womencraft Books, a mail order book company. This began the collection now in the library. Over the years women have donated books. At one time we took duplicate titles to our book stores (Inkilngs and Book Woman) and traded them for titles we didn&apos;t have on the shelf. When the last book store closed we started donating duplicate copies to HATCH, and they are building their library. We have a collection that includes feminist, fantasy/sci-fi, poetry, non-fiction, as well as fiction books. We have a collection of out-of-print periodicals, women&apos;s music, and a video library. We have some beautiful “coffee table” books. We have copies of many of the “pulp” books.
               </p>
-              <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-md text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 LOAF also was gifted with a beautiful pianola player piano and about 150 piano rolls. Marie Mariano donated it several years ago. It was in the “Allison” flood, and when it was restored Arden was told it was a beautiful instrument, and quite valuable.
               </p>
             </div>
@@ -225,16 +225,16 @@ const History = () => {
         {/* Part 8 */}
         <CardSection arrow={false} >
 
-          <h2 className="text-3xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+          <h2 className="text-3xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
             Part 8
           </h2>
-          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             LOAF has become a unique organization in that it is the oldest lesbian organization in Houston, and the only one of its kind in Texas. Over the years there has been quite a bit of exposure and promotion for LOAF.
           </p>
-          <p className="text-md text-var(--purple-deep) leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             For 17 consecutive years, from 1987 to 2004, we had a Texas Lesbian Conference that rotated between Houston, San Antonio, Austin, and Dallas. LOAF presented workshops at five of these conferences. LOAF did a workshop at the National Lesbian Conference in Atlanta in 1991. We did a workshop at at the PFLAG “Healing the Hurt” conference in 1994. We did a program at the Silver Threads conference in St Petersburg, FL. We have done programs at three OLOC conferences. Charlotte and Arden participated in a live TV show about senior GLBT persons in Dallas. We participated in a documentary on GLBT seniors produced in Canada. And another documentary for Golden Threads at Cape Cod. We participated on a panel for the Women’s Studies Department at the University of Houston for their “Living archive” series. We have done several programs for the Women’s Group in Houston, and appeared on the After Hours radio show on KPFT several times.
           </p>
-          <p className="text-md text-var(--purple-deep) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-md text-[var(--purple-deep)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             All of these appearances are documented and part of the LOAF Archives located at the University of Houston Special Collections Library. One result of these workshops and programs has been the formation of similar groups for mid-life and old lesbians throughout the country. But most important is the connection with other lesbians of our generation and avoiding isolation..
           </p>
 
@@ -243,32 +243,32 @@ const History = () => {
       </main>
 
       {/* CTA Section */}
-      <section className="py-20 bg-var(--purple-deep) mx-0">
+      <section className="py-20 bg-[var(--purple-deep)] mx-0">
         <div className="max-w-7xl mx-auto px-8">
           <div className="flex gap-8 md:flex-row flex-col">
             <Card className="p-8 text-center bg-background rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-              <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 A Life Remembered
               </h3>
-              <p className="text-var(--purple-deep) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-deep)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Check out "A Life Remembered", a tribute dedicated to Arden Eversmeyer, one of the founding mothers of LOAF.
               </p>
               <a href="https://www.oldlesbianhistory.org/arden-eversmeyer" target="_blank" rel="noopener noreferrer">
-                <Button className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full px-6 py-3">
+                <Button className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white rounded-full px-6 py-3">
                   View Arden's Tribute
                 </Button>
               </a>
             </Card>
 
             <Card className="p-8 text-center bg-background rounded-2xl shadow-lg hover:shadow-xl transition-shadow">
-              <h3 className="text-2xl font-bold text-var(--purple-deep) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+              <h3 className="text-2xl font-bold text-[var(--purple-deep)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
                 The Old Lesbian Oral Herstory Project
               </h3>
-              <p className="text-var(--purple-deep) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-deep)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Arden Eversmeyer was also involved with The Old Lesbian Oral Herstory Project, preserving the stories of old lesbians.
               </p>
               <a href="https://www.olohp.org" target="_blank" rel="noopener noreferrer">
-                <Button className="bg-var(--purple-lavender) hover:bg-var(--purple-deep) text-white rounded-full px-6 py-3">
+                <Button className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-deep)] text-white rounded-full px-6 py-3">
                   Learn More About OLOHP
                 </Button>
               </a>
diff --git a/src/pages/Landing.js b/src/pages/Landing.js
index 8a246e1..aef9359 100644
--- a/src/pages/Landing.js
+++ b/src/pages/Landing.js
@@ -24,7 +24,7 @@ const Landing = () => {
         />
       </div>
       <div className="p-6 flex flex-col pt-10 gap-4.5 w-full">
-        <h5 className="text-var(--purple-deep) text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
+        <h5 className="text-[var(--purple-deep)] text-[28px] leading-10 pb-10 font-semibold text-center" style={{ fontFamily: "'Poppins', sans-serif" }}>
           {infoTitle}
         </h5>
         {description}
@@ -37,7 +37,7 @@ const Landing = () => {
       iconSrc: iconMeetGreet,
       infoTitle: 'Meet and Greet',
       description: (
-        <p className="text-var(--purple-deep) text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-deep)] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           The MEET and GREETs provide opportunities for prospective members to get acquainted with LOAF, have conversations
           with members, and ask the board of directors questions. They are held the 3rd Sunday of the month and usually
           take place at a restaurant or other fun places conducive to its purpose. Please email{' '}
@@ -49,7 +49,7 @@ const Landing = () => {
       iconSrc: iconSocials,
       infoTitle: 'Socials',
       description: (
-        <p className="text-var(--purple-deep) text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-deep)] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Our social events provide opportunities for members to explore Houston and connect with other lesbians. Past
           social events include bowling, museums, painting lessons, sporting events, Miller Outdoor Theater, bingo and board
           games, pool parties, putt putt golf, camping and holiday get togethers. No matter your age or ability, there is
@@ -61,7 +61,7 @@ const Landing = () => {
       iconSrc: iconActive,
       infoTitle: 'Active LOAFers',
       description: (
-        <p className="text-var(--purple-deep) text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-deep)] text-lg text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           ActiveLOAFers events provide members with opportunities to be physically active. Past activities have included
           hiking/walking in the park, swimming (or floating), pickleball, kayaking, bike riding, axe throwing, and strolling
           through the botanic gardens or the Arboretum.
@@ -75,7 +75,7 @@ const Landing = () => {
       <PublicNavbar />
 
       {/* Hero Section */}
-      <section className="relative bg-gradient-to-b from-var(--purple-deep) to-var(--purple-lavender)  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
+      <section className="relative bg-gradient-to-b from-[var(--purple-deep)] to-[var(--purple-lavender)]  py-20 sm:py-8 md:py-12 lg:py-16 flex flex-col lg:flex-row gap-8 md:gap-12 lg:gap-16 items-center justify-center w-full">
         {/* Friendships background image */}
         <div className="absolute inset-0 z-0 flex overflow-hidden top-[-32rem]  lg:-top-32">
           <img src={friendships} alt="Friendships" className="lg:max-w-screen opacity-15  max-w-full max-h-full object-contain" />
@@ -89,7 +89,7 @@ const Landing = () => {
           </div>
           <div className="flex flex-col gap-4 items-center justify-center w-full max-w-[339px]">
             <Link to="/become-a-member" className="w-full">
-              <Button style={{ fontFamily: "'Nunito sans', sans-serif" }} className="bg-var(--neutral-800) hover:bg-background text-var(--purple-ink) rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
+              <Button style={{ fontFamily: "'Nunito sans', sans-serif" }} className="bg-[var(--neutral-800)] hover:bg-background text-[var(--purple-ink)] rounded-full px-6 py-6 sm:py-[32px] text-base sm:text-lg font-medium w-full transition-colors">
                 Become a Member
               </Button>
             </Link>
@@ -105,9 +105,9 @@ const Landing = () => {
       </section>
 
       {/* About Section */}
-      <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-var(--lavender-300) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
+      <section id="about" className="bg-gradient-to-b pb-10 lg:pb-44 from-white to-[var(--lavender-300)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 pt-4 sm:pt-16 md:pt-20 lg:pt-30 flex flex-col">
         <div className="flex flex-col items-center pt-4">
-          <h3 className="text-var(--purple-deep) px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h3 className="text-[var(--purple-deep)] px-4 pb-6 md:py-8 text-4xl leading-[60px] md:text-5xl lg:text-6xl font-extrabold text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF
           </h3>
         </div>
@@ -118,17 +118,17 @@ const Landing = () => {
       </section>
 
       {/* Feature Cards Section */}
-      <section className="bg-gradient-to-b pb-20 from-var(--lavender-300) to-var(--neutral-800) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
+      <section className="bg-gradient-to-b pb-20 from-[var(--lavender-300)] to-[var(--neutral-800)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-4 md:py-20 lg:py-30 flex flex-col sm:w-full lg:flex-row gap-40 md:gap-64 lg:gap-8 items-stretch justify-center">
         {infoCardData.map((card) => (
           <InfoCard key={card.infoTitle} {...card} />
         ))}
       </section>
 
       {/* CTA Section */}
-      <section className="bg-gradient-to-b from-var(--purple-amethyst) to-var(--purple-deep) px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
+      <section className="bg-gradient-to-b from-[var(--purple-amethyst)] to-[var(--purple-deep)] px-4 sm:px-6 md:px-8 lg:px-12 xl:px-16 py-12 sm:py-16 md:py-20 lg:py-30 flex items-center justify-center">
         <div className="flex flex-col-reverse md:flex-col lg:flex-row gap-8 sm:gap-10 md:gap-12 items-center justify-center w-full max-w-6xl">
           <Link to="/register" className="w-full sm:w-auto flex items-center justify-center">
-            <Button className="bg-var(--neutral-800) hover:bg-background text-var(--purple-ink) rounded-full
+            <Button className="bg-[var(--neutral-800)] hover:bg-background text-[var(--purple-ink)] rounded-full
             py-8 text-xl font-normal px-12 sm:w-[392px] transition-colors ">
               Become a Member
             </Button>
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 8f40a4a..51e3d2f 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -60,18 +60,18 @@ const Login = () => {
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors">
+          <Link to="/" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
         </div>
 
-        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8 text-center">
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Welcome Back
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Login to access your member dashboard.
             </p>
           </div>
@@ -87,7 +87,7 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 data-testid="login-email-input"
               />
             </div>
@@ -95,7 +95,7 @@ const Login = () => {
             <div>
               <div className="flex items-center justify-between mb-2">
                 <Label htmlFor="password">Password</Label>
-                <Link to="/forgot-password" className="text-sm text-var(--orange-light) hover:underline">
+                <Link to="/forgot-password" className="text-sm text-[var(--orange-light)] hover:underline">
                   Forgot password?
                 </Link>
               </div>
@@ -106,7 +106,7 @@ const Login = () => {
                 value={formData.password}
                 onChange={handleInputChange}
                 placeholder="Enter your password"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 data-testid="login-password-input"
               />
             </div>
@@ -114,16 +114,16 @@ const Login = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
               data-testid="login-submit-button"
             >
               {loading ? 'Logging in...' : 'Login'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Don't have an account?{' '}
-              <Link to="/register" className="text-var(--orange-light) hover:underline font-medium">
+              <Link to="/register" className="text-[var(--orange-light)] hover:underline font-medium">
                 Register here
               </Link>
             </p>
diff --git a/src/pages/MissionValues.js b/src/pages/MissionValues.js
index b7f3aa4..e118c70 100644
--- a/src/pages/MissionValues.js
+++ b/src/pages/MissionValues.js
@@ -10,11 +10,11 @@ const MissionValues = () => {
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-var(--neutral-100:) to-var(--neutral-800) px-4 sm:px-6 py-8 sm:py-12 md:py-20">
+      <main className="bg-gradient-to-b from-[var(--neutral-100:)] to-[var(--neutral-800)] px-4 sm:px-6 py-8 sm:py-12 md:py-20">
         <div className="max-w-[1400px] mx-auto">
           <div className="flex md:flex-row flex-col gap-10 items-stretch">
             {/* Left Card - Mission (Purple Gradient) */}
-            <Card className=" bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-deep) p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
+            <Card className=" bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-deep)] p-16 rounded-2xl shadow-lg flex flex-col items-center justify-between  flex-1 w-full md:w-1/2 ">
               <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-white text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Mission
@@ -30,11 +30,11 @@ const MissionValues = () => {
 
             {/* Right Card - Values */}
             <Card className="bg-background p-16 rounded-2xl shadow-lg flex-1  w-full md:w-1/2 ">
-              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-var(--purple-deep) text-center mb-6"
+              <h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-deep)] text-center mb-6"
                 style={{ fontFamily: "'Poppins', sans-serif" }}>
                 LOAF Values
               </h2>
-              <ol className="list-decimal list-inside space-y-8 text-lg text-var(--purple-deep)"
+              <ol className="list-decimal list-inside space-y-8 text-lg text-[var(--purple-deep)]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <li>Safe environments for lesbians to gather for a variety of social activities and interaction.</li>
                 <li>Social support for lesbians.</li>
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 9099177..812ef47 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -8,32 +8,32 @@ const NotFound = () => {
   const navigate = useNavigate();
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-var(--lavender-700) to-white flex items-center justify-center p-4">
-      <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-var(--neutral-800) text-center">
+    <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
+      <Card className="w-full max-w-2xl p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
         {/* 404 Illustration */}
         <div className="mb-8">
           <div className="relative">
             <h1
-              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-var(--neutral-800) to-var(--lavender-700) leading-none"
+              className="text-[180px] font-bold text-transparent bg-clip-text bg-gradient-to-br from-[var(--neutral-800)] to-[var(--lavender-700)] leading-none"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               404
             </h1>
             <div className="absolute inset-0 flex items-center justify-center">
-              <Search className="h-24 w-24 text-var(--purple-lavender) opacity-30" />
+              <Search className="h-24 w-24 text-[var(--purple-lavender)] opacity-30" />
             </div>
           </div>
         </div>
 
         {/* Message */}
         <h2
-          className="text-3xl font-semibold text-var(--purple-ink) mb-4"
+          className="text-3xl font-semibold text-[var(--purple-ink)] mb-4"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           Page Not Found
         </h2>
         <p
-          className="text-lg text-var(--purple-lavender) mb-8 max-w-md mx-auto"
+          className="text-lg text-[var(--purple-lavender)] mb-8 max-w-md mx-auto"
           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
         >
           Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
@@ -44,14 +44,14 @@ const NotFound = () => {
           <Button
             onClick={() => navigate(-1)}
             variant="outline"
-            className="rounded-xl border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-700) px-6 py-6"
+            className="rounded-xl border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-700)] px-6 py-6"
           >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Go Back
           </Button>
           <Button
             onClick={() => navigate('/')}
-            className="rounded-xl bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-ink) hover:from-var(--purple-ink) hover:to-var(--purple-lavender) text-white px-6 py-6"
+            className="rounded-xl bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-[var(--purple-lavender)] text-white px-6 py-6"
           >
             <Home className="h-5 w-5 mr-2" />
             Back to Home
@@ -59,15 +59,15 @@ const NotFound = () => {
         </div>
 
         {/* Help Text */}
-        <div className="mt-8 pt-8 border-t border-var(--neutral-800)">
+        <div className="mt-8 pt-8 border-t border-[var(--neutral-800)]">
           <p
-            className="text-sm text-var(--purple-lavender)"
+            className="text-sm text-[var(--purple-lavender)]"
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaftx.org"
-              className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold underline"
+              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
             >
               support@loaftx.org
             </a>
diff --git a/src/pages/PaymentCancel.js b/src/pages/PaymentCancel.js
index 20caa03..42cff63 100644
--- a/src/pages/PaymentCancel.js
+++ b/src/pages/PaymentCancel.js
@@ -22,48 +22,48 @@ const PaymentCancel = () => {
           </div>
 
           {/* Cancel Message */}
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Cancelled
           </h1>
-          <p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your payment was cancelled. No charges have been made to your account.
           </p>
         </div>
 
         {/* Info Card */}
-        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8">
-          <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg mb-8">
+          <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             What Happened?
           </h2>
 
           <div className="space-y-6 mb-8">
-            <p className="text-var(--purple-lavender) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
             </p>
 
-            <div className="bg-var(--neutral-800)/20 p-6 rounded-xl">
-              <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="bg-[var(--neutral-800)]/20 p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Ready to Complete Your Membership?
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CreditCard className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
-                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CreditCard className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
+                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Return to the plans page to complete your subscription
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <Mail className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
-                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Mail className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
+                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Contact us if you experienced any issues during checkout
                   </span>
                 </li>
               </ul>
             </div>
 
-            <div className="bg-var(--lavender-300) p-6 rounded-xl">
-              <p className="text-sm text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                <span className="font-medium text-var(--purple-ink)">Note:</span>{' '}
+            <div className="bg-[var(--lavender-300)] p-6 rounded-xl">
+              <p className="text-sm text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <span className="font-medium text-[var(--purple-ink)]">Note:</span>{' '}
                 Your membership application is still validated. You can complete payment whenever you're ready.
               </p>
             </div>
@@ -73,7 +73,7 @@ const PaymentCancel = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
               onClick={() => navigate('/plans')}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="try-again-button"
             >
               <CreditCard className="mr-2 h-5 w-5" />
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
             <Button
               onClick={() => navigate('/dashboard')}
               variant="outline"
-              className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="back-to-dashboard-button"
             >
               <ArrowLeft className="mr-2 h-5 w-5" />
@@ -92,17 +92,17 @@ const PaymentCancel = () => {
         </Card>
 
         {/* Support Section */}
-        <Card className="p-6 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
-          <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border border-[var(--neutral-800)]">
+          <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Need Assistance?
           </h3>
-          <p className="text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If you encountered any technical issues or have questions about the payment process, our support team is here to help.
           </p>
           <div className="text-center">
             <a
               href="mailto:support@loaf.org"
-              className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium text-lg"
+              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium text-lg"
             >
               support@loaf.org
             </a>
diff --git a/src/pages/PaymentSuccess.js b/src/pages/PaymentSuccess.js
index 45b540a..dc94548 100644
--- a/src/pages/PaymentSuccess.js
+++ b/src/pages/PaymentSuccess.js
@@ -27,53 +27,53 @@ const PaymentSuccess = () => {
         <div className="text-center mb-12">
           {/* Success Icon */}
           <div className="mb-8">
-            <div className="bg-var(--green-light) rounded-full w-24 h-24 mx-auto flex items-center justify-center">
+            <div className="bg-[var(--green-light)] rounded-full w-24 h-24 mx-auto flex items-center justify-center">
               <CheckCircle className="h-12 w-12 text-white" />
             </div>
           </div>
 
           {/* Success Message */}
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Successful!
           </h1>
-          <p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Thank you for your payment. Your LOAF membership is now active!
           </p>
         </div>
 
         {/* Confirmation Card */}
-        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg mb-8">
-          <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg mb-8">
+          <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to the LOAF Community!
           </h2>
 
           <div className="space-y-6 mb-8">
-            <div className="bg-var(--lavender-300) p-6 rounded-xl">
-              <h3 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <div className="bg-[var(--lavender-300)] p-6 rounded-xl">
+              <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 What's Next?
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Your membership is now active and you have full access to all member benefits
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You can now RSVP and attend members-only events
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Access the community directory and connect with other members
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                  <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You'll receive our newsletter with exclusive updates and announcements
                   </span>
                 </li>
@@ -81,12 +81,12 @@ const PaymentSuccess = () => {
             </div>
 
             {sessionId && (
-              <div className="bg-var(--neutral-800)/20 p-4 rounded-xl">
-                <p className="text-sm text-var(--purple-lavender) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <span className="font-medium text-var(--purple-ink)">Transaction ID:</span>{' '}
+              <div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
+                <p className="text-sm text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="font-medium text-[var(--purple-ink)]">Transaction ID:</span>{' '}
                   <span className="font-mono text-xs">{sessionId}</span>
                 </p>
-                <p className="text-xs text-var(--purple-lavender) text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-[var(--purple-lavender)] text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A confirmation email has been sent to your registered email address.
                 </p>
               </div>
@@ -97,7 +97,7 @@ const PaymentSuccess = () => {
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
             <Button
               onClick={() => navigate('/dashboard')}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="go-to-dashboard-button"
             >
               <User className="mr-2 h-5 w-5" />
@@ -106,7 +106,7 @@ const PaymentSuccess = () => {
             <Button
               onClick={() => navigate('/events')}
               variant="outline"
-              className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="browse-events-button"
             >
               <Calendar className="mr-2 h-5 w-5" />
@@ -117,11 +117,11 @@ const PaymentSuccess = () => {
 
         {/* Additional Info */}
         <div className="text-center">
-          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaf.org"
-              className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium"
+              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
             >
               support@loaf.org
             </a>
diff --git a/src/pages/Plans.js b/src/pages/Plans.js
index 5d21ef2..4b6ec4d 100644
--- a/src/pages/Plans.js
+++ b/src/pages/Plans.js
@@ -214,30 +214,30 @@ const Plans = () => {
       <div className="max-w-7xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-12 text-center">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Membership Plans
           </h1>
-          <p className="text-lg text-var(--purple-lavender) max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Choose the membership plan that works best for you and become part of our vibrant community.
           </p>
         </div>
 
         {/* Status Banner */}
         {statusInfo && statusInfo.title && (
-          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-var(--lavender-300) to-var(--neutral-800)/30 border-2 border-var(--purple-lavender)">
+          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-[var(--purple-lavender)]">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-var(--purple-lavender) flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
               <div className="flex-1">
-                <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {statusInfo.title}
                 </h3>
-                <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {statusInfo.message}
                 </p>
                 {statusInfo.action && statusInfo.actionLink && (
                   <Button
                     onClick={() => navigate(statusInfo.actionLink)}
-                    className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full"
+                    className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
                   >
                     {statusInfo.action}
                   </Button>
@@ -249,8 +249,8 @@ const Plans = () => {
 
         {loading ? (
           <div className="text-center py-20">
-            <Loader2 className="h-12 w-12 text-var(--purple-lavender) mx-auto mb-4 animate-spin" />
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+            <Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
           </div>
         ) : plans.length > 0 ? (
           <div className={`grid gap-6 sm:gap-8 mx-auto ${plans.length === 1
@@ -266,19 +266,19 @@ const Plans = () => {
               return (
                 <Card
                   key={plan.id}
-                  className="p-8 bg-background rounded-2xl border-2 border-var(--neutral-800) hover:border-var(--purple-lavender) hover:shadow-xl transition-all"
+                  className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:shadow-xl transition-all"
                   data-testid={`plan-card-${plan.id}`}
                 >
                   {/* Plan Header */}
                   <div className="text-center mb-6">
-                    <div className="bg-var(--neutral-800)/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-                      <CreditCard className="h-8 w-8 text-var(--purple-lavender)" />
+                    <div className="bg-[var(--neutral-800)]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
+                      <CreditCard className="h-8 w-8 text-[var(--purple-lavender)]" />
                     </div>
-                    <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {plan.name}
                     </h2>
                     {plan.description && (
-                      <p className="text-sm text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {plan.description}
                       </p>
                     )}
@@ -286,22 +286,22 @@ const Plans = () => {
 
                   {/* Pricing */}
                   <div className="text-center mb-8">
-                    <div className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Starting at
                     </div>
-                    <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(minimumPrice)}
                     </div>
                     {suggestedPrice > minimumPrice && (
-                      <div className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Suggested: {formatPrice(suggestedPrice)}
                       </div>
                     )}
-                    <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {getBillingCycleLabel(plan.billing_cycle)}
                     </p>
                     {plan.allow_donation && (
-                      <div className="mt-2 flex items-center justify-center gap-1 text-xs text-var(--orange-light)">
+                      <div className="mt-2 flex items-center justify-center gap-1 text-xs text-[var(--orange-light)]">
                         <Heart className="h-3 w-3" />
                         <span>Donations welcome</span>
                       </div>
@@ -311,20 +311,20 @@ const Plans = () => {
                   {/* Features */}
                   <div className="space-y-3 mb-8">
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
+                      <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Access to all member events</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
+                      <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Community directory access</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
+                      <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Exclusive member benefits</span>
                     </div>
                     <div className="flex items-start gap-3">
-                      <CheckCircle className="h-5 w-5 text-var(--green-light) flex-shrink-0 mt-0.5" />
-                      <span className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
+                      <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
+                      <span className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Newsletter subscription</span>
                     </div>
                   </div>
 
@@ -332,7 +332,7 @@ const Plans = () => {
                   <Button
                     onClick={() => handleSelectPlan(plan)}
                     disabled={processingPlanId === plan.id || (statusInfo && !statusInfo.canSubscribe)}
-                    className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
+                    className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-semibold disabled:opacity-50 disabled:cursor-not-allowed"
                     data-testid={`subscribe-button-${plan.id}`}
                   >
                     {processingPlanId === plan.id ? (
@@ -352,11 +352,11 @@ const Plans = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <CreditCard className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Plans Available
             </h3>
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Membership plans are not currently available. Please check back later!
             </p>
           </div>
@@ -364,17 +364,17 @@ const Plans = () => {
 
         {/* Info Section */}
         <div className="mt-16 max-w-3xl mx-auto">
-          <Card className="p-8 bg-gradient-to-br from-var(--neutral-800)/20 to-var(--lavender-300)/20 rounded-2xl border border-var(--neutral-800)">
-            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border border-[var(--neutral-800)]">
+            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Help Choosing?
             </h3>
-            <p className="text-var(--purple-lavender) text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               If you have any questions about our membership plans or need assistance, please contact us.
             </p>
             <div className="text-center">
               <a
                 href="mailto:support@loaf.org"
-                className="text-var(--orange-light) hover:text-var(--purple-lavender) font-medium"
+                className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
               >
                 support@loaf.org
               </a>
@@ -387,10 +387,10 @@ const Plans = () => {
       <Dialog open={amountDialogOpen} onOpenChange={setAmountDialogOpen}>
         <DialogContent className="sm:max-w-[500px]">
           <DialogHeader>
-            <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Choose Your Amount
             </DialogTitle>
-            <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
             </DialogDescription>
           </DialogHeader>
@@ -398,11 +398,11 @@ const Plans = () => {
           <div className="space-y-6">
             {/* Amount Input */}
             <div>
-              <Label htmlFor="amount" className="text-var(--purple-ink)">
+              <Label htmlFor="amount" className="text-[var(--purple-ink)]">
                 Amount (USD) *
               </Label>
               <div className="relative mt-2">
-                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-var(--purple-lavender) text-lg font-semibold">
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-lg font-semibold">
                   $
                 </span>
                 <Input
@@ -412,25 +412,25 @@ const Plans = () => {
                   min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
                   value={amountInput}
                   onChange={(e) => setAmountInput(e.target.value)}
-                  className="pl-8 h-14 text-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   placeholder="50.00"
                 />
               </div>
-              <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
               </p>
             </div>
 
             {/* Breakdown Display */}
             {breakdown && breakdown.total >= breakdown.base && (
-              <Card className="p-4 bg-var(--lavender-400) border border-var(--neutral-800)">
+              <Card className="p-4 bg-[var(--lavender-400)] border border-[var(--neutral-800)]">
                 <div className="space-y-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <div className="flex justify-between text-var(--purple-ink)">
+                  <div className="flex justify-between text-[var(--purple-ink)]">
                     <span>Membership Fee:</span>
                     <span className="font-semibold">{formatPrice(breakdown.base)}</span>
                   </div>
                   {breakdown.donation > 0 && (
-                    <div className="flex justify-between text-var(--orange-light)">
+                    <div className="flex justify-between text-[var(--orange-light)]">
                       <span className="flex items-center gap-1">
                         <Heart className="h-4 w-4" />
                         Additional Donation:
@@ -438,7 +438,7 @@ const Plans = () => {
                       <span className="font-semibold">{formatPrice(breakdown.donation)}</span>
                     </div>
                   )}
-                  <div className="flex justify-between text-var(--purple-ink) font-bold text-base pt-2 border-t border-var(--neutral-800)">
+                  <div className="flex justify-between text-[var(--purple-ink)] font-bold text-base pt-2 border-t border-[var(--neutral-800)]">
                     <span>Total:</span>
                     <span>{formatPrice(breakdown.total)}</span>
                   </div>
@@ -448,8 +448,8 @@ const Plans = () => {
 
             {/* Donation Message */}
             {selectedPlan?.allow_donation && (
-              <div className="bg-var(--neutral-800)/20 rounded-lg p-4">
-                <p className="text-sm text-var(--purple-ink) text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <div className="bg-[var(--neutral-800)]/20 rounded-lg p-4">
+                <p className="text-sm text-[var(--purple-ink)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <strong>Thank you for supporting our community!</strong><br />
                   Your donation helps us continue our mission and provide meaningful experiences for all members.
                 </p>
@@ -469,7 +469,7 @@ const Plans = () => {
             <Button
               type="button"
               onClick={handleCheckout}
-              className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
+              className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
             >
               Continue to Checkout
             </Button>
diff --git a/src/pages/PrivacyPolicy.js b/src/pages/PrivacyPolicy.js
index 8a49d3d..4f4c37c 100644
--- a/src/pages/PrivacyPolicy.js
+++ b/src/pages/PrivacyPolicy.js
@@ -7,7 +7,7 @@ export default function PrivacyPolicy() {
   return (
     <>
       <PublicNavbar />
-      <main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) text-var(--purple-deep)">
+      <main className="bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)] text-[var(--purple-deep)]">
         <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
           <header className="border-b pb-6">
             <h1 className="text-3xl sm:text-4xl font-bold tracking-tight" style={{ fontFamily: 'Poppins' }}>
@@ -15,7 +15,7 @@ export default function PrivacyPolicy() {
             </h1>
           </header>
 
-          <div className="prose text-var(--purple-deep) max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+          <div className="prose text-[var(--purple-deep)] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
             <section className="mt-8">
               <p>
                 This Privacy Policy ("Policy") applies to Membership Applications, and LOAFers, Inc. ("Company") and
@@ -31,7 +31,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="user-data" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">What User Data We Collect</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">What User Data We Collect</h2>
               <p>When you visit the Site, we may collect the following data:</p>
               <ul className="list-disc pl-6 space-y-1">
                 <li>Your IP address.</li>
@@ -63,7 +63,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="why-collect" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Why We Collect Your Data</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Why We Collect Your Data</h2>
               <ul className="list-disc pl-6 space-y-1">
                 <li>
                   To send you announcement emails containing the information about our events and information we think you
@@ -75,7 +75,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="third-parties" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Sharing Information with Third Parties</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Sharing Information with Third Parties</h2>
               <p>The Company does not sell, rent, or lease personal data to third parties.</p>
               <p>
                 The Company may share data with trusted partners to help perform statistical analysis, provide customer
@@ -89,7 +89,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="safeguarding" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Safeguarding and Securing the Data</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Safeguarding and Securing the Data</h2>
               <p>
                 LOAFers, Inc. is committed to securing your data and keeping it confidential. LOAFers, Inc. has done all
                 in its power to prevent data theft, unauthorized access, and disclosure by implementing the latest
@@ -98,7 +98,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="cookies" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Our Cookie Policy</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Our Cookie Policy</h2>
               <p>
                 Once you agree to allow our blog to use cookies, you also agree to use the data it collects regarding your
                 online behavior (analyze web traffic, web pages you visit and spend the most time on).
@@ -123,7 +123,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="other-sites" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Links to Other Websites</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Links to Other Websites</h2>
               <p>
                 Our blog contains links that lead to other websites. If you click on these links LOAFers, Inc. is not held
                 responsible for your data and privacy protection. Visiting those websites is not governed by this privacy
@@ -133,7 +133,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="restricting" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">
                 Restricting the Collection of your Personal Data
               </h2>
               <p>
@@ -150,12 +150,12 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="children" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Children Under Thirteen</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Children Under Thirteen</h2>
               <p>The Company does not knowingly collect information from children under the age of 13.</p>
             </section>
 
             <section id="changes" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Changes to this Statement</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Changes to this Statement</h2>
               <p>
                 The Company may make changes to this Policy. When this occurs the effective date of this policy will be
                 updated.
@@ -163,7 +163,7 @@ export default function PrivacyPolicy() {
             </section>
 
             <section id="contact" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">Contact Information</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">Contact Information</h2>
               <p>If you have any question, please contact LOAFers, Inc. at:</p>
               <div className="not-prose mt-4">
                 <p className="font-semibold mb-2">LOAFers, Inc.</p>
@@ -184,7 +184,7 @@ export default function PrivacyPolicy() {
         <div className="mt-8 text-center">
           <Link
             to="/"
-            className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold transition-colors inline-flex items-center gap-2"
+            className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold transition-colors inline-flex items-center gap-2"
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             <span>←</span> Back to Home
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 0b7cd51..ffd8760 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -216,7 +216,7 @@ const Profile = () => {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
         </div>
       </div>
     );
@@ -228,37 +228,37 @@ const Profile = () => {
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             My Profile
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your personal information below.
           </p>
         </div>
 
-        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           {/* Read-only Information */}
-          <div className="mb-8 pb-8 border-b border-var(--neutral-800)">
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <User className="h-6 w-6 text-var(--purple-lavender)" />
+          <div className="mb-8 pb-8 border-b border-[var(--neutral-800)]">
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <User className="h-6 w-6 text-[var(--purple-lavender)]" />
               Account Information
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
-                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
-                <p className="text-var(--purple-ink) font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
+                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
-                <p className="text-var(--purple-ink) font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
               </div>
               <div>
-                <p className="text-sm text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
-                <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
+                <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(profileData.date_of_birth).toLocaleDateString()}
                 </p>
               </div>
@@ -269,7 +269,7 @@ const Profile = () => {
                 type="button"
                 onClick={() => setPasswordDialogOpen(true)}
                 variant="outline"
-                className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-6 py-3"
+                className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-6 py-3"
               >
                 <Lock className="h-4 w-4 mr-2" />
                 Change Password
@@ -278,15 +278,15 @@ const Profile = () => {
           </div>
 
           {/* Profile Photo Section */}
-          <div className="pb-8 mb-8 border-b border-var(--neutral-800)">
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <Camera className="h-6 w-6 text-var(--purple-lavender)" />
+          <div className="pb-8 mb-8 border-b border-[var(--neutral-800)]">
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Camera className="h-6 w-6 text-[var(--purple-lavender)]" />
               Profile Photo
             </h2>
             <div className="flex flex-col md:flex-row items-center gap-6">
-              <Avatar className="h-32 w-32 border-4 border-var(--neutral-800)">
+              <Avatar className="h-32 w-32 border-4 border-[var(--neutral-800)]">
                 <AvatarImage src={previewImage} alt="Profile" />
-                <AvatarFallback className="bg-var(--lavender-300) text-var(--purple-lavender) text-3xl">
+                <AvatarFallback className="bg-[var(--lavender-300)] text-[var(--purple-lavender)] text-3xl">
                   {profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
                 </AvatarFallback>
               </Avatar>
@@ -304,7 +304,7 @@ const Profile = () => {
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                   disabled={uploadingPhoto}
-                  className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full px-6 py-3"
+                  className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full px-6 py-3"
                 >
                   <Upload className="h-4 w-4 mr-2" />
                   {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -323,7 +323,7 @@ const Profile = () => {
                   </Button>
                 )}
 
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Upload a profile photo (Max {maxFileSizeMB}MB)
                 </p>
               </div>
@@ -332,7 +332,7 @@ const Profile = () => {
 
           {/* Editable Form */}
           <form onSubmit={handleSubmit} className="space-y-6" data-testid="profile-form">
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Personal Information
             </h2>
 
@@ -344,7 +344,7 @@ const Profile = () => {
                   name="first_name"
                   value={formData.first_name}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   data-testid="first-name-input"
                 />
               </div>
@@ -355,7 +355,7 @@ const Profile = () => {
                   name="last_name"
                   value={formData.last_name}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   data-testid="last-name-input"
                 />
               </div>
@@ -369,7 +369,7 @@ const Profile = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 data-testid="phone-input"
               />
             </div>
@@ -381,7 +381,7 @@ const Profile = () => {
                 name="address"
                 value={formData.address}
                 onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 data-testid="address-input"
               />
             </div>
@@ -394,7 +394,7 @@ const Profile = () => {
                   name="city"
                   value={formData.city}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   data-testid="city-input"
                 />
               </div>
@@ -405,7 +405,7 @@ const Profile = () => {
                   name="state"
                   value={formData.state}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   data-testid="state-input"
                 />
               </div>
@@ -416,16 +416,16 @@ const Profile = () => {
                   name="zipcode"
                   value={formData.zipcode}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   data-testid="zipcode-input"
                 />
               </div>
             </div>
 
             {/* Section 2: Partner Information */}
-            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
-              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Heart className="h-6 w-6 text-var(--orange-light)" />
+            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
+              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Heart className="h-6 w-6 text-[var(--orange-light)]" />
                 Partner Information
               </h2>
               <div className="space-y-6">
@@ -437,7 +437,7 @@ const Profile = () => {
                       name="partner_first_name"
                       value={formData.partner_first_name}
                       onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                       placeholder="Optional"
                     />
                   </div>
@@ -448,7 +448,7 @@ const Profile = () => {
                       name="partner_last_name"
                       value={formData.partner_last_name}
                       onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                       placeholder="Optional"
                     />
                   </div>
@@ -461,9 +461,9 @@ const Profile = () => {
                       name="partner_is_member"
                       checked={formData.partner_is_member}
                       onChange={handleCheckboxChange}
-                      className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                      className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                     />
-                    <Label htmlFor="partner_is_member" className="cursor-pointer text-var(--purple-ink)">
+                    <Label htmlFor="partner_is_member" className="cursor-pointer text-[var(--purple-ink)]">
                       My partner is a current member
                     </Label>
                   </div>
@@ -474,9 +474,9 @@ const Profile = () => {
                       name="partner_plan_to_become_member"
                       checked={formData.partner_plan_to_become_member}
                       onChange={handleCheckboxChange}
-                      className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                      className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                     />
-                    <Label htmlFor="partner_plan_to_become_member" className="cursor-pointer text-var(--purple-ink)">
+                    <Label htmlFor="partner_plan_to_become_member" className="cursor-pointer text-[var(--purple-ink)]">
                       My partner plans to become a member
                     </Label>
                   </div>
@@ -485,12 +485,12 @@ const Profile = () => {
             </div>
 
             {/* Section 3: Newsletter Preferences */}
-            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
-              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Mail className="h-6 w-6 text-var(--green-light)" />
+            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
+              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Mail className="h-6 w-6 text-[var(--green-light)]" />
                 Newsletter Preferences
               </h2>
-              <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Choose what information you'd like published in our member newsletter.
               </p>
               <div className="space-y-3">
@@ -501,9 +501,9 @@ const Profile = () => {
                     name="newsletter_publish_name"
                     checked={formData.newsletter_publish_name}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                   />
-                  <Label htmlFor="newsletter_publish_name" className="cursor-pointer text-var(--purple-ink)">
+                  <Label htmlFor="newsletter_publish_name" className="cursor-pointer text-[var(--purple-ink)]">
                     Publish my name
                   </Label>
                 </div>
@@ -514,9 +514,9 @@ const Profile = () => {
                     name="newsletter_publish_photo"
                     checked={formData.newsletter_publish_photo}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                   />
-                  <Label htmlFor="newsletter_publish_photo" className="cursor-pointer text-var(--purple-ink)">
+                  <Label htmlFor="newsletter_publish_photo" className="cursor-pointer text-[var(--purple-ink)]">
                     Publish my photo
                   </Label>
                 </div>
@@ -527,9 +527,9 @@ const Profile = () => {
                     name="newsletter_publish_birthday"
                     checked={formData.newsletter_publish_birthday}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                   />
-                  <Label htmlFor="newsletter_publish_birthday" className="cursor-pointer text-var(--purple-ink)">
+                  <Label htmlFor="newsletter_publish_birthday" className="cursor-pointer text-[var(--purple-ink)]">
                     Publish my birthday
                   </Label>
                 </div>
@@ -540,9 +540,9 @@ const Profile = () => {
                     name="newsletter_publish_none"
                     checked={formData.newsletter_publish_none}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                   />
-                  <Label htmlFor="newsletter_publish_none" className="cursor-pointer text-var(--purple-ink)">
+                  <Label htmlFor="newsletter_publish_none" className="cursor-pointer text-[var(--purple-ink)]">
                     Do not publish any information
                   </Label>
                 </div>
@@ -550,12 +550,12 @@ const Profile = () => {
             </div>
 
             {/* Section 4: Volunteer Interests */}
-            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
-              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Users className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
+              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <Users className="h-6 w-6 text-[var(--purple-lavender)]" />
                 Volunteer Interests
               </h2>
-              <p className="text-var(--purple-lavender) mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Select areas where you'd like to volunteer and help our community.
               </p>
               <div className="grid md:grid-cols-2 gap-3">
@@ -566,11 +566,11 @@ const Profile = () => {
                       id={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
                       checked={formData.volunteer_interests.includes(option)}
                       onChange={() => handleVolunteerToggle(option)}
-                      className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                      className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                     />
                     <Label
                       htmlFor={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
-                      className="cursor-pointer text-var(--purple-ink)"
+                      className="cursor-pointer text-[var(--purple-ink)]"
                     >
                       {option}
                     </Label>
@@ -580,32 +580,32 @@ const Profile = () => {
             </div>
 
             {/* Section 5: Member Directory Settings */}
-            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
-              <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <BookUser className="h-6 w-6 text-var(--orange-light)" />
+            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
+              <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <BookUser className="h-6 w-6 text-[var(--orange-light)]" />
                 Member Directory Settings
               </h2>
-              <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Control your visibility and information in the member directory.
               </p>
 
               <div className="space-y-6">
-                <div className="flex items-center gap-3 p-4 bg-var(--lavender-400) rounded-lg">
+                <div className="flex items-center gap-3 p-4 bg-[var(--lavender-400)] rounded-lg">
                   <input
                     type="checkbox"
                     id="show_in_directory"
                     name="show_in_directory"
                     checked={formData.show_in_directory}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-var(--purple-lavender) border-2 border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                   />
-                  <Label htmlFor="show_in_directory" className="cursor-pointer text-var(--purple-ink) font-medium">
+                  <Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
                     Include me in the member directory
                   </Label>
                 </div>
 
                 {formData.show_in_directory && (
-                  <div className="space-y-6 pl-4 border-l-4 border-var(--neutral-800)">
+                  <div className="space-y-6 pl-4 border-l-4 border-[var(--neutral-800)]">
                     <div>
                       <Label htmlFor="directory_email">Directory Email</Label>
                       <Input
@@ -614,7 +614,7 @@ const Profile = () => {
                         type="email"
                         value={formData.directory_email}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                         placeholder="Optional - email to show in directory"
                       />
                     </div>
@@ -626,7 +626,7 @@ const Profile = () => {
                         name="directory_bio"
                         value={formData.directory_bio}
                         onChange={handleInputChange}
-                        className="rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) min-h-[100px]"
+                        className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] min-h-[100px]"
                         placeholder="Tell other members about yourself..."
                       />
                     </div>
@@ -638,7 +638,7 @@ const Profile = () => {
                         name="directory_address"
                         value={formData.directory_address}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                         placeholder="Optional - address to show in directory"
                       />
                     </div>
@@ -651,7 +651,7 @@ const Profile = () => {
                         type="tel"
                         value={formData.directory_phone}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                         placeholder="Optional - phone to show in directory"
                       />
                     </div>
@@ -664,7 +664,7 @@ const Profile = () => {
                         type="date"
                         value={formData.directory_dob}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                       />
                     </div>
 
@@ -675,7 +675,7 @@ const Profile = () => {
                         name="directory_partner_name"
                         value={formData.directory_partner_name}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                         placeholder="Optional - partner name to show in directory"
                       />
                     </div>
@@ -684,11 +684,11 @@ const Profile = () => {
               </div>
             </div>
 
-            <div className="pt-8 mt-8 border-t border-var(--neutral-800)">
+            <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
               <Button
                 type="submit"
                 disabled={loading}
-                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
+                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
                 data-testid="save-profile-button"
               >
                 <Save className="h-5 w-5 mr-2" />
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 5cdd0d1..127c788 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -188,18 +188,18 @@ const Register = () => {
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-var(--purple-lavender) hover:text-var(--orange-light) transition-colors">
+          <Link to="/" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
         </div>
 
-        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Join Our Community
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Fill out the form below to start your membership journey.
             </p>
           </div>
@@ -245,7 +245,7 @@ const Register = () => {
                   type="button"
                   onClick={handleBack}
                   variant="outline"
-                  className="rounded-full px-6 py-6 text-lg border-2 border-var(--neutral-800) hover:border-var(--purple-lavender) text-var(--purple-ink)"
+                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] text-[var(--purple-ink)]"
                 >
                   <ArrowLeft className="mr-2 h-5 w-5" />
                   Back
@@ -258,7 +258,7 @@ const Register = () => {
                 <Button
                   type="button"
                   onClick={handleNext}
-                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
                 >
                   Next
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -267,7 +267,7 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="submit-register-button"
                 >
                   {loading ? 'Creating Account...' : 'Create Account'}
@@ -276,9 +276,9 @@ const Register = () => {
               )}
             </div>
 
-            <p className="text-center text-var(--purple-lavender) mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-[var(--purple-lavender)] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Already have an account?{' '}
-              <Link to="/login" className="text-var(--orange-light) hover:underline font-medium">
+              <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here
               </Link>
             </p>
diff --git a/src/pages/ResetPassword.js b/src/pages/ResetPassword.js
index e56607b..75e29f4 100644
--- a/src/pages/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -68,15 +68,15 @@ const ResetPassword = () => {
       <PublicNavbar />
 
       <div className="max-w-md mx-auto px-6 py-12">
-        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8 text-center">
-            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-var(--lavender-300) mb-4">
-              <Lock className="h-8 w-8 text-var(--purple-lavender)" />
+            <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
+              <Lock className="h-8 w-8 text-[var(--purple-lavender)]" />
             </div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Reset Password
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Enter your new password below.
             </p>
           </div>
@@ -92,7 +92,7 @@ const ResetPassword = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
 
@@ -106,15 +106,15 @@ const ResetPassword = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
 
-            <div className="bg-var(--lavender-300) border-l-4 border-var(--purple-lavender) p-4 rounded-lg">
+            <div className="bg-[var(--lavender-300)] border-l-4 border-[var(--purple-lavender)] p-4 rounded-lg">
               <div className="flex items-start">
-                <AlertCircle className="h-5 w-5 text-var(--purple-lavender) mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <p className="font-medium text-var(--purple-ink) mb-1">Password Requirements:</p>
+                <AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="font-medium text-[var(--purple-ink)] mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
                     <li>Both passwords must match</li>
@@ -126,15 +126,15 @@ const ResetPassword = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
             >
               {loading ? 'Resetting Password...' : 'Reset Password'}
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Remember your password?{' '}
-              <Link to="/login" className="text-var(--orange-light) hover:underline font-medium">
+              <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here
               </Link>
             </p>
diff --git a/src/pages/Resources.js b/src/pages/Resources.js
index a5040e6..fee2086 100644
--- a/src/pages/Resources.js
+++ b/src/pages/Resources.js
@@ -100,10 +100,10 @@ const Resources = () => {
     <div className="min-h-screen bg-background">
       <PublicNavbar />
 
-      <main className="bg-gradient-to-b from-white via-var(--lavender-300) to-var(--lavender-100) px-6 py-16">
+      <main className="bg-gradient-to-b from-white via-[var(--lavender-300)] to-[var(--lavender-100)] px-6 py-16">
         {/* Header Section */}
         <section className="max-w-7xl mx-auto mb-12">
-          <h1 className="text-[28px] font-bold text-var(--purple-deep) text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-[28px] font-bold text-[var(--purple-deep)] text-center mb-12" style={{ fontFamily: "'Inter', sans-serif" }}>
             Tap or click on each purple tab below to open and read its contents
           </h1>
 
@@ -115,8 +115,8 @@ const Resources = () => {
             {categories.map((category, categoryIndex) => (
               <div key={categoryIndex} className="space-y-6">
                 {/* Category Title */}
-                <div className="flex justify-center text-4xl text-var(--purple-lilac)">{category.icon}</div>
-                <h2 className="text-[32px] leading-6 font-bold text-var(--purple-deep) text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
+                <div className="flex justify-center text-4xl text-[var(--purple-lilac)]">{category.icon}</div>
+                <h2 className="text-[32px] leading-6 font-bold text-[var(--purple-deep)] text-center mb-8" style={{ fontFamily: "'Poppins', sans-serif" }}>
                   {category.title}
                 </h2>
 
@@ -130,7 +130,7 @@ const Resources = () => {
                         {/* Accordion Button */}
                         <button
                           onClick={() => toggleAccordion(categoryIndex, resourceIndex)}
-                          className={`w-full bg-gradient-to-tr from-var(--purple-deep) to-var(--purple-lavender) hover:bg-var(--purple-soft) text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
+                          className={`w-full bg-gradient-to-tr from-[var(--purple-deep)] to-[var(--purple-lavender)] hover:bg-[var(--purple-soft)] text-white px-6 py-4 rounded-3xl flex items-center justify-between transition-all  ${isExpanded ? 'rounded-b-none rounded-t-3xl' : ''}`
 
                           }
                         >
@@ -150,7 +150,7 @@ const Resources = () => {
                         >
                           <Card className="p-6 bg-background rounded-b-2xl rounded-t-none border-none ">
                             {/* Description */}
-                            <p className="text-var(--purple-deep) mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-[var(--purple-deep)] mb-4 leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {resource.description}
                             </p>
 
@@ -158,7 +158,7 @@ const Resources = () => {
                             <div className="space-y-3">
                               {/* Location */}
                               {resource.location && (
-                                <div className="flex items-start gap-2 text-var(--purple-lavender)">
+                                <div className="flex items-start gap-2 text-[var(--purple-lavender)]">
                                   <MapPin className="h-5 w-5 flex-shrink-0 mt-0.5" />
                                   <span className="text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                     {resource.location}
@@ -168,7 +168,7 @@ const Resources = () => {
 
                               {/* Contact */}
                               {resource.contact && (
-                                <div className="text-var(--purple-lavender)">
+                                <div className="text-[var(--purple-lavender)]">
                                   <p className="text-sm font-medium mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                                     Contact: {resource.contact}
                                   </p>
@@ -178,7 +178,7 @@ const Resources = () => {
                                         <Phone className="size-4" />
                                         <a
                                           href={`tel:${resource.phone.replace(/[^0-9]/g, '')}`}
-                                          className="text-sm hover:text-var(--purple-deep) transition-colors"
+                                          className="text-sm hover:text-[var(--purple-deep)] transition-colors"
                                           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                         >
                                           {resource.phone}
@@ -190,7 +190,7 @@ const Resources = () => {
                                         <Mail className="h-4 w-4" />
                                         <a
                                           href={`mailto:${resource.email}`}
-                                          className="text-sm hover:text-var(--purple-deep) transition-colors"
+                                          className="text-sm hover:text-[var(--purple-deep)] transition-colors"
                                           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                                         >
                                           {resource.email}
@@ -207,7 +207,7 @@ const Resources = () => {
                                   href={resource.link}
                                   target="_blank"
                                   rel="noopener noreferrer"
-                                  className="inline-flex items-center gap-2 text-var(--orange-light) hover:text-var(--orange-peach) font-medium transition-colors mt-2"
+                                  className="inline-flex items-center gap-2 text-[var(--orange-light)] hover:text-[var(--orange-peach)] font-medium transition-colors mt-2"
                                   style={{ fontFamily: "'Inter', sans-serif" }}
                                 >
                                   Visit Website
@@ -228,7 +228,7 @@ const Resources = () => {
 
         {/* Additional Help Section */}
         <section className="max-w-4xl mx-auto mt-16">
-          <Card className="p-8 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-deep) rounded-2xl shadow-xl text-center">
+          <Card className="p-8 bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-deep)] rounded-2xl shadow-xl text-center">
             <h3 className="text-2xl font-bold text-white mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Additional Support?
             </h3>
@@ -237,7 +237,7 @@ const Resources = () => {
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="inline-block bg-background text-var(--purple-deep) px-8 py-3 rounded-full font-semibold hover:bg-var(--lavender-300) transition-colors shadow-lg"
+              className="inline-block bg-background text-[var(--purple-deep)] px-8 py-3 rounded-full font-semibold hover:bg-[var(--lavender-300)] transition-colors shadow-lg"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact Us
diff --git a/src/pages/TermsOfService.js b/src/pages/TermsOfService.js
index 7c69ade..4bd9b75 100644
--- a/src/pages/TermsOfService.js
+++ b/src/pages/TermsOfService.js
@@ -8,7 +8,7 @@ export default function TermsOfService() {
   return (
     <>
       <PublicNavbar />
-      <main className="bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800) text-var(--purple-deep)">
+      <main className="bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)] text-[var(--purple-deep)]">
         <div className="mx-auto w-full max-w-5xl px-4 sm:px-6 lg:px-8 py-10">
           {/* Title */}
           <header className="border-b pb-6">
@@ -21,10 +21,10 @@ export default function TermsOfService() {
           </header>
 
           {/* Body */}
-          <div className="prose text-var(--purple-deep) max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
+          <div className="prose text-[var(--purple-deep)] max-w-none prose-h2:mt-10 prose-h2:scroll-mt-24 prose-h3:mt-6">
             {/* AGREEMENT */}
             <section aria-labelledby="agreement" className="mt-8">
-              <h2 id="agreement" className="text-xl sm:text-2xl text-var(--purple-deep) font-bold ">
+              <h2 id="agreement" className="text-xl sm:text-2xl text-[var(--purple-deep)] font-bold ">
                 AGREEMENT TO OUR LEGAL TERMS
               </h2>
 
@@ -68,37 +68,37 @@ export default function TermsOfService() {
             </section>
 
             {/* TABLE OF CONTENTS */}
-            <section aria-labelledby="toc" className="text-var(--purple-deep)">
-              <h2 id="toc" className="text-lg sm:text-xl font-bold text-var(--purple-deep) m-0">
+            <section aria-labelledby="toc" className="text-[var(--purple-deep)]">
+              <h2 id="toc" className="text-lg sm:text-xl font-bold text-[var(--purple-deep)] m-0">
                 TABLE OF CONTENTS
               </h2>
 
-              <ol className="mt-4 list-decimal no-prose text-var(--purple-deep) pl-5 space-y-1">
-                <li><a className="text-var(--purple-deep)" href="#our-services">OUR SERVICES</a></li>
-                <li><a className="text-var(--purple-deep)" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
-                <li><a className="text-var(--purple-deep)" href="#user-representations">USER REPRESENTATIONS</a></li>
-                <li><a className="text-var(--purple-deep)" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
-                <li><a className="text-var(--purple-deep)" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
-                <li><a className="text-var(--purple-deep)" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
-                <li><a className="text-var(--purple-deep)" href="#services-management">SERVICES MANAGEMENT</a></li>
-                <li><a className="text-var(--purple-deep)" href="#term-termination">TERM AND TERMINATION</a></li>
-                <li><a className="text-var(--purple-deep)" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
-                <li><a className="text-var(--purple-deep)" href="#governing-law">GOVERNING LAW</a></li>
-                <li><a className="text-var(--purple-deep)" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
-                <li><a className="text-var(--purple-deep)" href="#corrections">CORRECTIONS</a></li>
-                <li><a className="text-var(--purple-deep)" href="#disclaimer">DISCLAIMER</a></li>
-                <li><a className="text-var(--purple-deep)" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
-                <li><a className="text-var(--purple-deep)" href="#indemnification">INDEMNIFICATION</a></li>
-                <li><a className="text-var(--purple-deep)" href="#user-data">USER DATA</a></li>
-                <li><a className="text-var(--purple-deep)" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
-                <li><a className="text-var(--purple-deep)" href="#miscellaneous">MISCELLANEOUS</a></li>
-                <li><a className="text-var(--purple-deep)" href="#contact-us">CONTACT US</a></li>
+              <ol className="mt-4 list-decimal no-prose text-[var(--purple-deep)] pl-5 space-y-1">
+                <li><a className="text-[var(--purple-deep)]" href="#our-services">OUR SERVICES</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#ipr">INTELLECTUAL PROPERTY RIGHTS</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#user-representations">USER REPRESENTATIONS</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#prohibited-activities">PROHIBITED ACTIVITIES</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#ugc">USER GENERATED CONTRIBUTIONS</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#contribution-license">CONTRIBUTION LICENSE</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#services-management">SERVICES MANAGEMENT</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#term-termination">TERM AND TERMINATION</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#modifications">MODIFICATIONS AND INTERRUPTIONS</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#governing-law">GOVERNING LAW</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#dispute-resolution">DISPUTE RESOLUTION</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#corrections">CORRECTIONS</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#disclaimer">DISCLAIMER</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#limitations-liability">LIMITATIONS OF LIABILITY</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#indemnification">INDEMNIFICATION</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#user-data">USER DATA</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#electronic-comms">ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#miscellaneous">MISCELLANEOUS</a></li>
+                <li><a className="text-[var(--purple-deep)]" href="#contact-us">CONTACT US</a></li>
               </ol>
             </section>
 
             {/* 1. OUR SERVICES */}
             <section id="our-services" className="scroll-mt-24">
-              <h2 className="text-xl text-var(--purple-deep) sm:text-2xl font-bold ">1. OUR SERVICES</h2>
+              <h2 className="text-xl text-[var(--purple-deep)] sm:text-2xl font-bold ">1. OUR SERVICES</h2>
               <p>
                 The information provided when using the Services is not intended for distribution to or use by any person
                 or entity in any jurisdiction or country where such distribution or use would be contrary to law or
@@ -111,7 +111,7 @@ export default function TermsOfService() {
 
             {/* 2. INTELLECTUAL PROPERTY RIGHTS */}
             <section id="ipr" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep) ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)] ">2. INTELLECTUAL PROPERTY RIGHTS</h2>
 
               <h3 className="text-lg font-semibold ">Our intellectual property</h3>
               <p>
@@ -124,7 +124,7 @@ export default function TermsOfService() {
                 internal business purpose only.
               </p>
 
-              <h3 className="text-lg font-semibold text-var(--purple-deep)">Your use of our Services</h3>
+              <h3 className="text-lg font-semibold text-[var(--purple-deep)]">Your use of our Services</h3>
               <p>
                 Subject to your compliance with these Legal Terms, including the "PROHIBITED ACTIVITIES" section below, we
                 grant you a non-exclusive, non-transferable, revocable license to:
@@ -160,7 +160,7 @@ export default function TermsOfService() {
                 right to use our Services will terminate immediately.
               </p>
 
-              <h3 className="text-lg font-semibold text-var(--purple-deep)">Your submissions</h3>
+              <h3 className="text-lg font-semibold text-[var(--purple-deep)]">Your submissions</h3>
               <p>
                 Please review this section and the "PROHIBITED ACTIVITIES" section carefully prior to using our Services to
                 understand the (a) rights you give us and (b) obligations you have when you post or upload any content
@@ -225,7 +225,7 @@ export default function TermsOfService() {
 
             {/* 4. PROHIBITED ACTIVITIES */}
             <section id="prohibited-activities" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">4. PROHIBITED ACTIVITIES</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">4. PROHIBITED ACTIVITIES</h2>
 
               <p>
                 You may not access or use the Services for any purpose other than that for which we make the Services
@@ -261,7 +261,7 @@ export default function TermsOfService() {
 
             {/* 5. USER GENERATED CONTRIBUTIONS */}
             <section id="ugc" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">5. USER GENERATED CONTRIBUTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">5. USER GENERATED CONTRIBUTIONS</h2>
               <p>
                 The Services does not offer users to submit or post content. We may provide you with the opportunity to
                 create, submit, post, display, transmit, perform, publish, distribute, or broadcast content and materials
@@ -274,7 +274,7 @@ export default function TermsOfService() {
 
             {/* 6. CONTRIBUTION LICENSE */}
             <section id="contribution-license" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">6. CONTRIBUTION LICENSE</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">6. CONTRIBUTION LICENSE</h2>
               <p>
                 You and Services agree that we may access, store, process, and use any information and personal data that
                 you provide and your choices (including settings).
@@ -295,7 +295,7 @@ export default function TermsOfService() {
 
             {/* 7. SERVICES MANAGEMENT */}
             <section id="services-management" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">7. SERVICES MANAGEMENT</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">7. SERVICES MANAGEMENT</h2>
               <p>
                 We reserve the right, but not the obligation, to: (1) monitor the Services for violations of these Legal
                 Terms; (2) take appropriate legal action against anyone who, in our sole discretion, violates the law or
@@ -311,7 +311,7 @@ export default function TermsOfService() {
 
             {/* 8. TERM AND TERMINATION */}
             <section id="term-termination" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">8. TERM AND TERMINATION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">8. TERM AND TERMINATION</h2>
               <p>
                 These Legal Terms shall remain in full force and effect while you use the Services.{" "}
                 <strong>
@@ -334,7 +334,7 @@ export default function TermsOfService() {
 
             {/* 9. MODIFICATIONS AND INTERRUPTIONS */}
             <section id="modifications" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">9. MODIFICATIONS AND INTERRUPTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">9. MODIFICATIONS AND INTERRUPTIONS</h2>
               <p>
                 We reserve the right to change, modify, or remove the contents of the Services at any time or for any
                 reason at our sole discretion without notice. However, we have no obligation to update any information on
@@ -357,7 +357,7 @@ export default function TermsOfService() {
 
             {/* 10. GOVERNING LAW */}
             <section id="governing-law" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">10. GOVERNING LAW</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">10. GOVERNING LAW</h2>
               <p>
                 These Legal Terms shall be governed by and defined following the laws of Texas. LOAFers, Inc. and yourself
                 irrevocably consent that the courts of Houston shall have exclusive jurisdiction to resolve any dispute
@@ -367,7 +367,7 @@ export default function TermsOfService() {
 
             {/* 11. DISPUTE RESOLUTION */}
             <section id="dispute-resolution" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">11. DISPUTE RESOLUTION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">11. DISPUTE RESOLUTION</h2>
 
               <h3 className="text-lg font-semibold ">Informal Negotiations</h3>
               <p>
@@ -378,7 +378,7 @@ export default function TermsOfService() {
                 arbitration. Such informal negotiations commence upon written notice from one Party to the other Party.
               </p>
 
-              <h3 className="text-lg font-semibold text-var(--purple-deep)">Binding Arbitration</h3>
+              <h3 className="text-lg font-semibold text-[var(--purple-deep)]">Binding Arbitration</h3>
               <p>
                 Any dispute arising out of or in connection with these Legal Terms, including any question regarding its
                 existence, validity, or termination, shall be referred to and finally resolved by the Disputy Resolution
@@ -393,7 +393,7 @@ export default function TermsOfService() {
                 </a>
               </p>
 
-              <h3 className="text-lg font-semibold text-var(--purple-deep)">Restrictions</h3>
+              <h3 className="text-lg font-semibold text-[var(--purple-deep)]">Restrictions</h3>
               <p>
                 The Parties agree that any arbitration shall be limited to the Dispute between the Parties individually.
                 To the full extent permitted by law, (a) no arbitration shall be joined with any other proceeding; (b)
@@ -402,7 +402,7 @@ export default function TermsOfService() {
                 representative capacity on behalf of the general public or any other persons.
               </p>
 
-              <h3 className="text-lg font-semibold text-var(--purple-deep)">Exceptions to Informal Negotiations and Arbitration</h3>
+              <h3 className="text-lg font-semibold text-[var(--purple-deep)]">Exceptions to Informal Negotiations and Arbitration</h3>
               <p>
                 The Parties agree that the following Disputes are not subject to the above provisions concerning informal
                 negotiations binding arbitration: (a) any Disputes seeking to enforce or protect, or concerning the validity
@@ -420,7 +420,7 @@ export default function TermsOfService() {
 
             {/* 12. CORRECTIONS */}
             <section id="corrections" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">12. CORRECTIONS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">12. CORRECTIONS</h2>
               <p>
                 There may be information on the Services that contains typographical errors, inaccuracies, or omissions,
                 including descriptions, pricing, availability, and various other information. We reserve the right to
@@ -431,7 +431,7 @@ export default function TermsOfService() {
 
             {/* 13. DISCLAIMER */}
             <section id="disclaimer" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">13. DISCLAIMER</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">13. DISCLAIMER</h2>
               <p className="font-semibold">
                 THE SERVICES ARE PROVIDED ON AN AS-IS AND AS-AVAILABLE BASIS. YOU AGREE THAT YOUR USE OF THE SERVICES WILL
                 BE AT YOUR SOLE RISK. TO THE FULLEST EXTENT PERMITTED BY LAW, WE DISCLAIM ALL WARRANTIES, EXPRESS OR
@@ -462,7 +462,7 @@ export default function TermsOfService() {
 
             {/* 14. LIMITATIONS OF LIABILITY */}
             <section id="limitations-liability" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">14. LIMITATIONS OF LIABILITY</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">14. LIMITATIONS OF LIABILITY</h2>
               <p className="font-semibold">
                 IN NO EVENT WILL WE OR OUR DIRECTORS, EMPLOYEES, OR AGENTS BE LIABLE TO YOU OR ANY THIRD PARTY FOR ANY
                 DIRECT, INDIRECT, CONSEQUENTIAL, EXEMPLARY, INCIDENTAL, SPECIAL, OR PUNITIVE DAMAGES, INCLUDING LOST
@@ -483,7 +483,7 @@ export default function TermsOfService() {
 
             {/* 15. INDEMNIFICATION */}
             <section id="indemnification" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">15. INDEMNIFICATION</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">15. INDEMNIFICATION</h2>
               <p>
                 You agree to defend, indemnify, and hold us harmless, including our subsidiaries, affiliates, and all of
                 our respective officers, agents, partners, and employees, from and against any loss, damage, liability,
@@ -503,7 +503,7 @@ export default function TermsOfService() {
 
             {/* 16. USER DATA */}
             <section id="user-data" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">16. USER DATA</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">16. USER DATA</h2>
               <p>
                 We will maintain certain data that you transmit to the Services for the purpose of managing the performance
                 of the Services, as well as data relating to your use of the Services. Although we perform regular routine
@@ -516,7 +516,7 @@ export default function TermsOfService() {
 
             {/* 17. ELECTRONIC COMMUNICATIONS */}
             <section id="electronic-comms" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">
                 17. ELECTRONIC COMMUNICATIONS, TRANSACTIONS, AND SIGNATURES
               </h2>
               <p>
@@ -539,7 +539,7 @@ export default function TermsOfService() {
 
             {/* 18. MISCELLANEOUS */}
             <section id="miscellaneous" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">18. MISCELLANEOUS</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">18. MISCELLANEOUS</h2>
               <p>
                 These Legal Terms and any policies or operating rules posted by us on the Services or in respect to the
                 Services constitute the entire agreement and understanding between you and us. Our failure to exercise or
@@ -567,7 +567,7 @@ export default function TermsOfService() {
 
             {/* 19. CONTACT US */}
             <section id="contact-us" className="scroll-mt-24">
-              <h2 className="text-xl sm:text-2xl font-bold text-var(--purple-deep)">19. CONTACT US</h2>
+              <h2 className="text-xl sm:text-2xl font-bold text-[var(--purple-deep)]">19. CONTACT US</h2>
               <p>
                 In order to resolve a complaint regarding the Services or to receive further information regarding use of
                 the Services, please contact us at:
@@ -589,7 +589,7 @@ export default function TermsOfService() {
         </div>
         {/* Back to Home Link */}
         <div className="mt-8 text-center">
-          <Link to="/" className="text-var(--purple-lavender) hover:text-var(--purple-ink) font-semibold transition-colors inline-flex items-center gap-2"
+          <Link to="/" className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold transition-colors inline-flex items-center gap-2"
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <span>←</span> Back to Home
           </Link>
diff --git a/src/pages/VerifyEmail.js b/src/pages/VerifyEmail.js
index 4dccd5f..bacae69 100644
--- a/src/pages/VerifyEmail.js
+++ b/src/pages/VerifyEmail.js
@@ -49,14 +49,14 @@ const VerifyEmail = () => {
       <PublicNavbar />
 
       <div className="max-w-2xl mx-auto px-6 py-20">
-        <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg text-center">
+        <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg text-center">
           {status === 'loading' && (
             <>
-              <Loader2 className="h-20 w-20 text-var(--purple-lavender) mx-auto mb-6 animate-spin" />
-              <h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Loader2 className="h-20 w-20 text-[var(--purple-lavender)] mx-auto mb-6 animate-spin" />
+              <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verifying Your Email...
               </h1>
-              <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Please wait while we verify your email address.
               </p>
             </>
@@ -64,19 +64,19 @@ const VerifyEmail = () => {
 
           {status === 'success' && (
             <>
-              <CheckCircle className="h-20 w-20 text-var(--green-light) mx-auto mb-6" />
-              <h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <CheckCircle className="h-20 w-20 text-[var(--green-light)] mx-auto mb-6" />
+              <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Email Verified Successfully!
               </h1>
-              <p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
-              <p className="text-base text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Next steps: Attend an event and meet a board member within 90 days. Once you've attended an event, our admin team will review your application.
               </p>
               <Link to="/login">
                 <Button
-                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
                   data-testid="login-redirect-button"
                 >
                   Go to Login
@@ -88,15 +88,15 @@ const VerifyEmail = () => {
           {status === 'error' && (
             <>
               <XCircle className="h-20 w-20 text-red-500 mx-auto mb-6" />
-              <h1 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verification Failed
               </h1>
-              <p className="text-lg text-var(--purple-lavender) mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
               <Link to="/">
                 <Button
-                  className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-12 py-6 text-lg font-medium shadow-lg"
                   data-testid="home-redirect-button"
                 >
                   Go to Home
diff --git a/src/pages/admin/AdminBylaws.js b/src/pages/admin/AdminBylaws.js
index 14ee334..505c728 100644
--- a/src/pages/admin/AdminBylaws.js
+++ b/src/pages/admin/AdminBylaws.js
@@ -169,7 +169,7 @@ const AdminBylaws = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-var(--purple-lavender)">Loading bylaws...</p>
+        <p className="text-[var(--purple-lavender)]">Loading bylaws...</p>
       </div>
     );
   }
@@ -179,17 +179,17 @@ const AdminBylaws = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Bylaws Management
           </h1>
-          <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage LOAF governing bylaws and version history
           </p>
         </div>
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
+            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -199,22 +199,22 @@ const AdminBylaws = () => {
 
       {/* Current Bylaws */}
       {currentBylaws ? (
-        <Card className="p-6 border-2 border-var(--purple-lavender)">
+        <Card className="p-6 border-2 border-[var(--purple-lavender)]">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-3 rounded-xl">
+              <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-3 rounded-xl">
                 <Scale className="h-6 w-6 text-white" />
               </div>
               <div>
-                <h3 className="text-xl font-semibold text-var(--purple-ink)">
+                <h3 className="text-xl font-semibold text-[var(--purple-ink)]">
                   {currentBylaws.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-1">
-                  <Badge className="bg-var(--green-light) text-white">
+                  <Badge className="bg-[var(--green-light)] text-white">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
-                  <span className="text-var(--purple-lavender) text-sm">
+                  <span className="text-[var(--purple-lavender)] text-sm">
                     Version {currentBylaws.version}
                   </span>
                 </div>
@@ -225,7 +225,7 @@ const AdminBylaws = () => {
                 variant="outline"
                 size="sm"
                 onClick={() => window.open(currentBylaws.document_url, '_blank')}
-                className="border-var(--purple-lavender) text-var(--purple-lavender)"
+                className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
               >
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
@@ -235,7 +235,7 @@ const AdminBylaws = () => {
                   variant="outline"
                   size="sm"
                   onClick={() => handleEdit(currentBylaws)}
-                  className="border-var(--purple-lavender) text-var(--purple-lavender)"
+                  className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
@@ -252,7 +252,7 @@ const AdminBylaws = () => {
               )}
             </div>
           </div>
-          <div className="flex items-center gap-4 text-sm text-var(--purple-lavender)">
+          <div className="flex items-center gap-4 text-sm text-[var(--purple-lavender)]">
             <span>Effective Date: <strong>{formatDate(currentBylaws.effective_date)}</strong></span>
             <span>•</span>
             <span>Document Type: <strong>{currentBylaws.document_type === 'upload' ? 'PDF Upload' : 'Link'}</strong></span>
@@ -260,10 +260,10 @@ const AdminBylaws = () => {
         </Card>
       ) : (
         <Card className="p-12 text-center">
-          <Scale className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-          <p className="text-var(--purple-lavender) text-lg mb-4">No current bylaws set</p>
+          <Scale className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+          <p className="text-[var(--purple-lavender)] text-lg mb-4">No current bylaws set</p>
           {hasPermission('bylaws.create') && (
-            <Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
+            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create Bylaws
             </Button>
@@ -274,7 +274,7 @@ const AdminBylaws = () => {
       {/* Historical Versions */}
       {historicalBylaws.length > 0 && (
         <div>
-          <h2 className="text-xl font-semibold text-var(--purple-ink) mb-4">
+          <h2 className="text-xl font-semibold text-[var(--purple-ink)] mb-4">
             Version History ({historicalBylaws.length})
           </h2>
           <div className="space-y-4">
@@ -282,10 +282,10 @@ const AdminBylaws = () => {
               <Card key={bylawsDoc.id} className="p-6">
                 <div className="flex items-center justify-between">
                   <div>
-                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-1">
+                    <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-1">
                       {bylawsDoc.title}
                     </h3>
-                    <div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
+                    <div className="flex items-center gap-3 text-sm text-[var(--purple-lavender)]">
                       <span>Version {bylawsDoc.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylawsDoc.effective_date)}</span>
@@ -296,7 +296,7 @@ const AdminBylaws = () => {
                       variant="outline"
                       size="sm"
                       onClick={() => window.open(bylawsDoc.document_url, '_blank')}
-                      className="border-var(--purple-lavender) text-var(--purple-lavender)"
+                      className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
@@ -305,7 +305,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(bylawsDoc)}
-                        className="border-var(--purple-lavender) text-var(--purple-lavender)"
+                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -404,12 +404,12 @@ const AdminBylaws = () => {
                     required={!selectedBylaws}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-var(--purple-lavender) mt-1">
+                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedBylaws && !uploadedFile && (
-                    <p className="text-sm text-var(--purple-lavender) mt-1">
+                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -424,7 +424,7 @@ const AdminBylaws = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-var(--purple-lavender) mt-1">
+                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -455,7 +455,7 @@ const AdminBylaws = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-var(--purple-lavender) text-white"
+                className="bg-[var(--purple-lavender)] text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedBylaws ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index aaa0c3c..5319e25 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -58,16 +58,16 @@ const AdminDashboard = () => {
     <>
       <div className='flex justify-between items-center'>
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Admin Dashboard
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage users, events, and membership applications.
           </p>
         </div>
         <Link to={'/'}>
           <Button
-            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
+            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Globe />
             View Public Site
@@ -77,56 +77,56 @@ const AdminDashboard = () => {
 
       {/* Stats Grid */}
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="stat-total-users">
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
-              <Users className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+              <Users className="h-6 w-6 text-[var(--purple-lavender)]" />
             </div>
           </div>
-          <p className="text-3xl font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.totalMembers}
           </p>
-          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="stat-pending-validations">
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
           <div className="flex items-center justify-between mb-4">
             <div className="bg-orange-100 p-3 rounded-lg">
               <Clock className="h-6 w-6 text-orange-600" />
             </div>
           </div>
-          <p className="text-3xl font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.pendingValidations}
           </p>
-          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
+          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)" data-testid="stat-active-members">
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-var(--green-light)/20 p-3 rounded-lg">
-              <CheckCircle className="h-6 w-6 text-var(--green-light)" />
+            <div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
+              <CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
             </div>
           </div>
-          <p className="text-3xl font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.activeMembers}
           </p>
-          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
+          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
         </Card>
       </div>
 
       {/* Quick Actions */}
       <div className="grid md:grid-cols-2 gap-8">
         <Link to="/admin/members">
-          <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
-            <Users className="h-12 w-12 text-var(--purple-lavender) mb-4" />
-            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
+            <Users className="h-12 w-12 text-[var(--purple-lavender)] mb-4" />
+            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Manage Members
             </h3>
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               View and manage paying members and their subscription status.
             </p>
             <Button
-              className="mt-4 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
+              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
               data-testid="manage-users-button"
             >
               Go to Members
@@ -135,16 +135,16 @@ const AdminDashboard = () => {
         </Link>
 
         <Link to="/admin/validations">
-          <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-validations">
+          <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-validations">
             <Clock className="h-12 w-12 text-orange-600 mb-4" />
-            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Validation Queue
             </h3>
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Review and validate pending membership applications.
             </p>
             <Button
-              className="mt-4 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
+              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
               data-testid="manage-validations-button"
             >
               View Validations
@@ -156,16 +156,16 @@ const AdminDashboard = () => {
       {/* Users Needing Attention Widget */}
       {usersNeedingAttention.length > 0 && (
         <div className="mt-12">
-          <Card className="p-8 bg-background rounded-2xl border-2 border-var(--orange-light) shadow-lg">
+          <Card className="p-8 bg-background rounded-2xl border-2 border-[var(--orange-light)] shadow-lg">
             <div className="flex items-center gap-3 mb-6">
-              <div className="bg-var(--orange-light)/20 p-3 rounded-lg">
-                <AlertCircle className="h-6 w-6 text-var(--orange-light)" />
+              <div className="bg-[var(--orange-light)]/20 p-3 rounded-lg">
+                <AlertCircle className="h-6 w-6 text-[var(--orange-light)]" />
               </div>
               <div>
-                <h3 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Members Needing Personal Outreach
                 </h3>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   These members have received multiple reminder emails. Consider calling them directly.
                 </p>
               </div>
@@ -174,18 +174,18 @@ const AdminDashboard = () => {
             <div className="space-y-4">
               {usersNeedingAttention.map(user => (
                 <Link key={user.id} to={`/admin/users/${user.id}`}>
-                  <div className="p-4 bg-var(--lavender-500) rounded-xl border border-var(--neutral-800) hover:border-var(--orange-light) hover:shadow-md transition-all cursor-pointer">
+                  <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)] hover:border-[var(--orange-light)] hover:shadow-md transition-all cursor-pointer">
                     <div className="flex items-start justify-between gap-4">
                       <div className="flex-1">
                         <div className="flex items-center gap-3 mb-2">
-                          <h4 className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h4 className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {user.first_name} {user.last_name}
                           </h4>
-                          <Badge className="bg-var(--orange-light) text-white px-3 py-1 rounded-full text-xs">
+                          <Badge className="bg-[var(--orange-light)] text-white px-3 py-1 rounded-full text-xs">
                             {user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
                           </Badge>
                         </div>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone || 'N/A'}</p>
                           <p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -210,7 +210,7 @@ const AdminDashboard = () => {
                         </div>
                       </div>
                       <Button
-                        className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full text-sm"
+                        className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full text-sm"
                         onClick={(e) => {
                           e.preventDefault();
                           window.location.href = `tel:${user.phone}`;
@@ -224,8 +224,8 @@ const AdminDashboard = () => {
               ))}
             </div>
 
-            <div className="mt-6 p-4 bg-var(--neutral-800)/20 rounded-lg border border-var(--neutral-800)">
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="mt-6 p-4 bg-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
                 A friendly phone call can help them complete the registration process and feel more welcomed to the community.
               </p>
diff --git a/src/pages/admin/AdminDonations.js b/src/pages/admin/AdminDonations.js
index 5068244..0fcdd9e 100644
--- a/src/pages/admin/AdminDonations.js
+++ b/src/pages/admin/AdminDonations.js
@@ -167,13 +167,13 @@ const AdminDonations = () => {
   };
 
   const getTypeBadgeColor = (type) => {
-    return type === 'member' ? 'bg-var(--green-light)' : 'bg-var(--purple-lavender)';
+    return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-[var(--purple-lavender)]';
   };
 
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-var(--purple-lavender)" />
+        <Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
       </div>
     );
   }
@@ -182,93 +182,93 @@ const AdminDonations = () => {
     <div className="space-y-8">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Donation Management
         </h1>
-        <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Track and manage all donations from members and the public
         </p>
       </div>
 
       {/* Stats Cards */}
       <div className="grid md:grid-cols-4 gap-6">
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
-              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.total_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
-              <Heart className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
+              <Heart className="h-6 w-6 text-[var(--purple-lavender)]" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Member Donations
               </p>
-              <p className="text-3xl font-bold text-var(--green-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.member_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-var(--green-light)/10 rounded-full">
-              <Users className="h-6 w-6 text-var(--green-light)" />
+            <div className="p-3 bg-[var(--green-light)]/10 rounded-full">
+              <Users className="h-6 w-6 text-[var(--green-light)]" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Public Donations
               </p>
-              <p className="text-3xl font-bold text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.public_donations || 0}
               </p>
             </div>
-            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
-              <Globe className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
+              <Globe className="h-6 w-6 text-[var(--purple-lavender)]" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Amount
               </p>
-              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.total_amount || '$0.00'}
               </p>
             </div>
-            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
+              <DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
             </div>
           </div>
         </Card>
       </div>
 
       {/* Filters and Actions */}
-      <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+      <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
         <div className="space-y-4">
           {/* Search and Export Row */}
           <div className="flex flex-col md:flex-row gap-4 justify-between">
             <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
               <Input
                 placeholder="Search by donor name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-full border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="pl-10 rounded-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
             {hasPermission('donations.export') && (
@@ -276,26 +276,26 @@ const AdminDonations = () => {
                 <DropdownMenuTrigger asChild>
                   <Button
                     disabled={exporting}
-                    className="bg-var(--green-light) text-white hover:bg-var(--green-soft) rounded-full px-6 py-3 flex items-center gap-2"
+                    className="bg-[var(--green-light)] text-white hover:bg-[var(--green-soft)] rounded-full px-6 py-3 flex items-center gap-2"
                   >
                     <Download className="h-4 w-4" />
                     {exporting ? 'Exporting...' : 'Export'}
                   </Button>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-var(--neutral-800) shadow-lg">
+                <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-[var(--neutral-800)] shadow-lg">
                   <DropdownMenuItem
                     onClick={() => handleExport('all')}
-                    className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
+                    className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
-                    <span className="text-var(--purple-ink)">Export All Donations</span>
+                    <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                    <span className="text-[var(--purple-ink)]">Export All Donations</span>
                   </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={() => handleExport('current')}
-                    className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
+                    className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
-                    <span className="text-var(--purple-ink)">Export Current View</span>
+                    <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                    <span className="text-[var(--purple-ink)]">Export Current View</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -306,7 +306,7 @@ const AdminDonations = () => {
           <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
             <div>
               <Select value={typeFilter} onValueChange={setTypeFilter}>
-                <SelectTrigger className="rounded-full border-2 border-var(--neutral-800)">
+                <SelectTrigger className="rounded-full border-2 border-[var(--neutral-800)]">
                   <SelectValue placeholder="All Types" />
                 </SelectTrigger>
                 <SelectContent>
@@ -319,7 +319,7 @@ const AdminDonations = () => {
 
             <div>
               <Select value={statusFilter} onValueChange={setStatusFilter}>
-                <SelectTrigger className="rounded-full border-2 border-var(--neutral-800)">
+                <SelectTrigger className="rounded-full border-2 border-[var(--neutral-800)]">
                   <SelectValue placeholder="All Statuses" />
                 </SelectTrigger>
                 <SelectContent>
@@ -336,7 +336,7 @@ const AdminDonations = () => {
                 type="date"
                 value={startDate}
                 onChange={(e) => setStartDate(e.target.value)}
-                className="rounded-full border-2 border-var(--neutral-800)"
+                className="rounded-full border-2 border-[var(--neutral-800)]"
                 placeholder="Start Date"
               />
             </div>
@@ -346,7 +346,7 @@ const AdminDonations = () => {
                 type="date"
                 value={endDate}
                 onChange={(e) => setEndDate(e.target.value)}
-                className="rounded-full border-2 border-var(--neutral-800)"
+                className="rounded-full border-2 border-[var(--neutral-800)]"
                 placeholder="End Date"
               />
             </div>
@@ -354,7 +354,7 @@ const AdminDonations = () => {
 
           {/* Active Filters Summary */}
           {(searchQuery || typeFilter !== 'all' || statusFilter !== 'all' || startDate || endDate) && (
-            <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Showing {filteredDonations.length} of {donations.length} donations
             </div>
           )}
@@ -362,38 +362,38 @@ const AdminDonations = () => {
       </Card>
 
       {/* Donations Table */}
-      <Card className="bg-background rounded-2xl border-2 border-var(--neutral-800) overflow-hidden">
+      <Card className="bg-background rounded-2xl border-2 border-[var(--neutral-800)] overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-var(--lavender-300) border-b-2 border-var(--neutral-800)">
+            <thead className="bg-[var(--lavender-300)] border-b-2 border-[var(--neutral-800)]">
               <tr>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Donor
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Type
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Amount
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Status
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Date
                 </th>
-                <th className="px-6 py-4 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Payment Method
                 </th>
               </tr>
             </thead>
-            <tbody className="divide-y divide-var(--neutral-800)">
+            <tbody className="divide-y divide-[var(--neutral-800)]">
               {filteredDonations.length === 0 ? (
                 <tr>
                   <td colSpan="6" className="px-6 py-12 text-center">
                     <div className="flex flex-col items-center gap-3">
-                      <Heart className="h-12 w-12 text-var(--neutral-800)" />
-                      <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Heart className="h-12 w-12 text-[var(--neutral-800)]" />
+                      <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
                       </p>
                     </div>
@@ -401,13 +401,13 @@ const AdminDonations = () => {
                 </tr>
               ) : (
                 filteredDonations.map((donation) => (
-                  <tr key={donation.id} className="hover:bg-var(--lavender-400) transition-colors">
+                  <tr key={donation.id} className="hover:bg-[var(--lavender-400)] transition-colors">
                     <td className="px-6 py-4">
                       <div>
-                        <p className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                           {donation.donor_name || 'Anonymous'}
                         </p>
-                        <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {donation.donor_email || 'No email'}
                         </p>
                       </div>
@@ -421,7 +421,7 @@ const AdminDonations = () => {
                       </Badge>
                     </td>
                     <td className="px-6 py-4">
-                      <p className="font-semibold text-var(--purple-ink) text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {donation.amount}
                       </p>
                     </td>
@@ -431,7 +431,7 @@ const AdminDonations = () => {
                       </Badge>
                     </td>
                     <td className="px-6 py-4">
-                      <div className="flex items-center gap-2 text-var(--purple-lavender)">
+                      <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
                         <Calendar className="h-4 w-4" />
                         <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {formatDate(donation.created_at)}
@@ -439,7 +439,7 @@ const AdminDonations = () => {
                       </div>
                     </td>
                     <td className="px-6 py-4">
-                      <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donation.payment_method || 'N/A'}
                       </p>
                     </td>
@@ -453,18 +453,18 @@ const AdminDonations = () => {
 
       {/* This Month Summary */}
       {stats.this_month_count > 0 && (
-        <Card className="p-6 bg-gradient-to-r from-var(--lavender-400) to-var(--lavender-300) rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-gradient-to-r from-[var(--lavender-400)] to-[var(--lavender-300)] rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 This Month's Donations
               </p>
-              <p className="text-2xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-2xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.this_month_count} donations • {stats.this_month_amount}
               </p>
             </div>
             <div className="p-4 bg-background rounded-full shadow-sm">
-              <Heart className="h-8 w-8 text-var(--orange-light)" />
+              <Heart className="h-8 w-8 text-[var(--orange-light)]" />
             </div>
           </div>
         </Card>
diff --git a/src/pages/admin/AdminEventAttendance.js b/src/pages/admin/AdminEventAttendance.js
index 6e59b16..fd197a8 100644
--- a/src/pages/admin/AdminEventAttendance.js
+++ b/src/pages/admin/AdminEventAttendance.js
@@ -213,7 +213,7 @@ const AdminEventAttendance = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="text-var(--purple-lavender)">Loading event data...</div>
+        <div className="text-[var(--purple-lavender)]">Loading event data...</div>
       </div>
     );
   }
@@ -221,8 +221,8 @@ const AdminEventAttendance = () => {
   if (!event) {
     return (
       <div className="text-center py-12">
-        <p className="text-var(--purple-lavender) mb-4">Event not found</p>
-        <Button onClick={() => navigate('/admin/events')} className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl">
+        <p className="text-[var(--purple-lavender)] mb-4">Event not found</p>
+        <Button onClick={() => navigate('/admin/events')} className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl">
           Back to Events
         </Button>
       </div>
@@ -237,24 +237,24 @@ const AdminEventAttendance = () => {
           <Button
             onClick={() => navigate('/admin/events')}
             variant="outline"
-            className="border-var(--neutral-800) text-var(--purple-lavender) rounded-xl"
+            className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
             style={{ fontFamily: "'Inter', sans-serif" }}
           >
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Events
           </Button>
           <div>
-            <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Attendance
             </h1>
-            <p className="text-var(--purple-lavender) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage RSVPs and track attendance for this event
             </p>
           </div>
         </div>
         <Button
           onClick={exportToCSV}
-          className="bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white rounded-xl"
+          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-xl"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <Download className="h-4 w-4 mr-2" />
@@ -263,13 +263,13 @@ const AdminEventAttendance = () => {
       </div>
 
       {/* Event Details Card */}
-      <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
+      <Card className="p-6 bg-background border-[var(--neutral-800)] rounded-xl">
         <div className="flex items-start justify-between">
           <div>
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               {event.title}
             </h2>
-            <div className="flex flex-wrap gap-4 text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="flex flex-wrap gap-4 text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
                 <span>{moment(event.start_at).format('MMMM D, YYYY [at] h:mm A')}</span>
@@ -282,7 +282,7 @@ const AdminEventAttendance = () => {
               )}
             </div>
           </div>
-          <Badge className={`${event.published ? 'bg-var(--green-light)' : 'bg-var(--neutral-800)'} text-white px-3 py-1`}>
+          <Badge className={`${event.published ? 'bg-[var(--green-light)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
             {event.published ? 'Published' : 'Draft'}
           </Badge>
         </div>
@@ -290,59 +290,59 @@ const AdminEventAttendance = () => {
 
       {/* Statistics Cards */}
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
-        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <Users className="h-8 w-8 text-var(--purple-lavender)" />
+            <Users className="h-8 w-8 text-[var(--purple-lavender)]" />
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
-              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+              <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <UserCheck className="h-8 w-8 text-var(--green-light)" />
+            <UserCheck className="h-8 w-8 text-[var(--green-light)]" />
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
-              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
+              <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <UserX className="h-8 w-8 text-var(--orange-soft)" />
+            <UserX className="h-8 w-8 text-[var(--orange-soft)]" />
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
-              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
+              <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <HelpCircle className="h-8 w-8 text-var(--gold-warm)" />
+            <HelpCircle className="h-8 w-8 text-[var(--gold-warm)]" />
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
-              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
+              <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
             </div>
           </div>
         </Card>
 
-        <Card className="p-4 bg-background border-var(--neutral-800) rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <Check className="h-8 w-8 text-var(--purple-lavender)" />
+            <Check className="h-8 w-8 text-[var(--purple-lavender)]" />
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
-              <p className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
+              <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
             </div>
           </div>
         </Card>
       </div>
 
       {/* Filters and Actions */}
-      <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
+      <Card className="p-6 bg-background border-[var(--neutral-800)] rounded-xl">
         <div className="space-y-4">
           {/* Tab Filters */}
           <div className="flex flex-wrap gap-2">
@@ -350,8 +350,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('all')}
               variant={activeTab === 'all' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'all'
-                ? 'bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white'
-                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                ? 'bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white'
+                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -361,8 +361,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('yes')}
               variant={activeTab === 'yes' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'yes'
-                ? 'bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white'
-                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white'
+                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -372,8 +372,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('no')}
               variant={activeTab === 'no' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'no'
-                ? 'bg-var(--orange-soft) hover:bg-var(--orange-rust) text-white'
-                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                ? 'bg-[var(--orange-soft)] hover:bg-[var(--orange-rust)] text-white'
+                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -383,8 +383,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('maybe')}
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'maybe'
-                ? 'bg-var(--gold-warm) hover:bg-var(--gold-soft) text-var(--purple-ink)'
-                : 'border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-500)'
+                ? 'bg-[var(--gold-warm)] hover:bg-[var(--gold-soft)] text-[var(--purple-ink)]'
+                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -395,26 +395,26 @@ const AdminEventAttendance = () => {
           {/* Search and Bulk Actions */}
           <div className="flex flex-wrap gap-3 items-center justify-between">
             <div className="flex-1 min-w-[200px] max-w-md relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-var(--purple-lavender)" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--purple-lavender)]" />
               <Input
                 type="text"
                 placeholder="Search by name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 border-var(--neutral-800) rounded-xl"
+                className="pl-10 border-[var(--neutral-800)] rounded-xl"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               />
             </div>
 
             {selectedRsvps.size > 0 && (
               <div className="flex gap-2">
-                <Badge className="bg-var(--purple-lavender) text-white px-3 py-1">
+                <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
                   {selectedRsvps.size} selected
                 </Badge>
                 <Button
                   onClick={() => handleBulkAttendance(true)}
                   disabled={saving}
-                  className="bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white rounded-xl"
+                  className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-xl"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   <Check className="h-4 w-4 mr-1" />
@@ -423,7 +423,7 @@ const AdminEventAttendance = () => {
                 <Button
                   onClick={() => handleBulkAttendance(false)}
                   disabled={saving}
-                  className="bg-var(--orange-soft) hover:bg-var(--orange-rust) text-white rounded-xl"
+                  className="bg-[var(--orange-soft)] hover:bg-[var(--orange-rust)] text-white rounded-xl"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   <X className="h-4 w-4 mr-1" />
@@ -436,10 +436,10 @@ const AdminEventAttendance = () => {
       </Card>
 
       {/* RSVP Table */}
-      <Card className="bg-background border-var(--neutral-800) rounded-xl overflow-hidden">
+      <Card className="bg-background border-[var(--neutral-800)] rounded-xl overflow-hidden">
         <div className="overflow-x-auto">
           <table className="w-full">
-            <thead className="bg-var(--lavender-500) border-b border-var(--neutral-800)">
+            <thead className="bg-[var(--lavender-500)] border-b border-[var(--neutral-800)]">
               <tr>
                 <th className="px-4 py-3 text-left">
                   <Checkbox
@@ -447,19 +447,19 @@ const AdminEventAttendance = () => {
                     onCheckedChange={handleSelectAll}
                   />
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Name
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Email
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   RSVP Status
                 </th>
-                <th className="px-4 py-3 text-center text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-center text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Attendance
                 </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="px-4 py-3 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Attended At
                 </th>
               </tr>
@@ -467,26 +467,26 @@ const AdminEventAttendance = () => {
             <tbody>
               {filteredRsvps.length > 0 ? (
                 filteredRsvps.map((rsvp) => (
-                  <tr key={rsvp.user_id} className="border-b border-var(--neutral-800) hover:bg-var(--lavender-500) transition-colors">
+                  <tr key={rsvp.user_id} className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-500)] transition-colors">
                     <td className="px-4 py-3">
                       <Checkbox
                         checked={selectedRsvps.has(rsvp.user_id)}
                         onCheckedChange={() => handleSelectRsvp(rsvp.user_id)}
                       />
                     </td>
-                    <td className="px-4 py-3 text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_name}
                     </td>
-                    <td className="px-4 py-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_email}
                     </td>
                     <td className="px-4 py-3">
                       <Badge
                         className={`${rsvp.rsvp_status === 'yes'
-                          ? 'bg-var(--green-light)'
+                          ? 'bg-[var(--green-light)]'
                           : rsvp.rsvp_status === 'no'
-                            ? 'bg-var(--orange-soft)'
-                            : 'bg-var(--gold-warm) text-var(--purple-ink)'
+                            ? 'bg-[var(--orange-soft)]'
+                            : 'bg-[var(--gold-warm)] text-[var(--purple-ink)]'
                           } text-white text-xs px-2 py-1`}
                       >
                         {rsvp.rsvp_status.toUpperCase()}
@@ -498,7 +498,7 @@ const AdminEventAttendance = () => {
                           onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
                           disabled={saving}
                           size="sm"
-                          className="bg-var(--green-light) hover:bg-var(--green-eucalyptus) text-white rounded-lg min-w-[120px]"
+                          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Check className="h-3 w-3 mr-1" />
@@ -510,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--green-light) hover:text-white hover:border-var(--green-light) rounded-lg min-w-[120px]"
+                          className="border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--green-light)] hover:text-white hover:border-[var(--green-light)] rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />
@@ -518,7 +518,7 @@ const AdminEventAttendance = () => {
                         </Button>
                       )}
                     </td>
-                    <td className="px-4 py-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.attended_at ? moment(rsvp.attended_at).format('MMM D, YYYY h:mm A') : '-'}
                     </td>
                   </tr>
@@ -526,7 +526,7 @@ const AdminEventAttendance = () => {
               ) : (
                 <tr>
                   <td colSpan="6" className="px-4 py-12 text-center">
-                    <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {searchQuery ? 'No RSVPs match your search' : 'No RSVPs for this filter'}
                     </p>
                   </td>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index ff7d34a..9d2746e 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -134,10 +134,10 @@ const AdminEvents = () => {
       {/* Header */}
       <div className="mb-8 flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
         <div>
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Management
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage community events.
           </p>
         </div>
@@ -150,7 +150,7 @@ const AdminEvents = () => {
                   resetForm();
                   setEditingEvent(null);
                 }}
-                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
+                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
                 data-testid="create-event-button"
               >
                 <Plus className="mr-2 h-5 w-5" />
@@ -160,39 +160,39 @@ const AdminEvents = () => {
 
             <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
               <DialogHeader>
-                <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
                 </DialogTitle>
               </DialogHeader>
 
               <form onSubmit={handleSubmit} className="space-y-4 mt-4">
                 <div>
-                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Title *
                   </label>
                   <Input
                     value={formData.title}
                     onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                     required
-                    className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Description
                   </label>
                   <textarea
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-var(--neutral-800) focus:border-var(--purple-lavender) rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-lg p-3"
                   />
                 </div>
 
                 <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                   <div>
-                    <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <label className="block text-sm font-medium text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Start Date & Time *
                     </label>
                     <Input
@@ -200,12 +200,12 @@ const AdminEvents = () => {
                       value={formData.start_at}
                       onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
                       required
-                      className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                     />
                   </div>
 
                   <div>
-                    <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <label className="block text-sm font-medium text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       End Date & Time *
                     </label>
                     <Input
@@ -213,25 +213,25 @@ const AdminEvents = () => {
                       value={formData.end_at}
                       onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
                       required
-                      className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                      className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                     />
                   </div>
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Location *
                   </label>
                   <Input
                     value={formData.location}
                     onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                     required
-                    className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-medium text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label className="block text-sm font-medium text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Capacity (optional)
                   </label>
                   <Input
@@ -239,7 +239,7 @@ const AdminEvents = () => {
                     value={formData.capacity}
                     onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
                     placeholder="Leave empty for unlimited"
-                    className="border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   />
                 </div>
 
@@ -249,9 +249,9 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-var(--purple-lavender) border-var(--neutral-800) rounded focus:ring-var(--purple-lavender)"
+                    className="w-4 h-4 text-[var(--purple-lavender)] border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
                   />
-                  <label htmlFor="published" className="text-sm font-medium text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
                   </label>
                 </div>
@@ -267,7 +267,7 @@ const AdminEvents = () => {
                   </Button>
                   <Button
                     type="submit"
-                    className="flex-1 bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full"
+                    className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
                   >
                     {editingEvent ? 'Update Event' : 'Create Event'}
                   </Button>
@@ -281,24 +281,24 @@ const AdminEvents = () => {
       {/* Events List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
         </div>
       ) : events.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
           {events.map((event) => (
             <Card
               key={event.id}
-              className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-all"
+              className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-all"
               data-testid={`event-card-${event.id}`}
             >
               {/* Event Header */}
               <div className="flex justify-between items-start mb-4">
-                <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
-                  <Calendar className="h-6 w-6 text-var(--purple-lavender)" />
+                <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+                  <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
                 </div>
                 <Badge
                   className={`${event.published
-                    ? 'bg-var(--green-light) text-white'
+                    ? 'bg-[var(--green-light)] text-white'
                     : 'bg-gray-400 text-white'
                     } px-3 py-1 rounded-full`}
                 >
@@ -307,18 +307,18 @@ const AdminEvents = () => {
               </div>
 
               {/* Event Details */}
-              <h3 className="text-xl font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {event.title}
               </h3>
 
               {event.description && (
-                <p className="text-var(--purple-lavender) mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-[var(--purple-lavender)] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.description}
                 </p>
               )}
 
               <div className="space-y-2 mb-4">
-                <div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <Calendar className="h-4 w-4" />
                   <span>
                     {new Date(event.start_at).toLocaleDateString()} at{' '}
@@ -328,24 +328,24 @@ const AdminEvents = () => {
                     })}
                   </span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <MapPin className="h-4 w-4" />
                   <span className="truncate">{event.location}</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <Users className="h-4 w-4" />
                   <span>{event.rsvp_count || 0} attending</span>
                 </div>
               </div>
 
               {/* Actions */}
-              <div className="space-y-2 pt-4 border-t border-var(--neutral-800)">
+              <div className="space-y-2 pt-4 border-t border-[var(--neutral-800)]">
                 {/* Manage Attendance Button */}
                 <Button
                   onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
                   variant="outline"
                   size="sm"
-                  className="w-full border-var(--green-light) text-var(--green-light) hover:bg-var(--green-light) hover:text-white"
+                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white"
                   data-testid={`mark-attendance-${event.id}`}
                 >
                   <Users className="h-4 w-4 mr-2" />
@@ -358,7 +358,7 @@ const AdminEvents = () => {
                     onClick={() => togglePublish(event)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
+                    className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
                     data-testid={`toggle-publish-${event.id}`}
                   >
                     {event.published ? (
@@ -398,16 +398,16 @@ const AdminEvents = () => {
         </div>
       ) : (
         <div className="text-center py-20">
-          <Calendar className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Calendar className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Events Yet
           </h3>
-          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create your first event to get started!
           </p>
           <Button
             onClick={() => setIsCreateDialogOpen(true)}
-            className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
+            className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8"
           >
             <Plus className="mr-2 h-5 w-5" />
             Create Event
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
index fb112cb..65e07dd 100644
--- a/src/pages/admin/AdminFinancials.js
+++ b/src/pages/admin/AdminFinancials.js
@@ -147,7 +147,7 @@ const AdminFinancials = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-var(--purple-lavender)">Loading financial reports...</p>
+        <p className="text-[var(--purple-lavender)]">Loading financial reports...</p>
       </div>
     );
   }
@@ -157,17 +157,17 @@ const AdminFinancials = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports Management
           </h1>
-          <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage annual financial reports
           </p>
         </div>
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
+            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -178,10 +178,10 @@ const AdminFinancials = () => {
       {/* Reports List */}
       {reports.length === 0 ? (
         <Card className="p-12 text-center">
-          <TrendingUp className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-          <p className="text-var(--purple-lavender) text-lg mb-4">No financial reports yet</p>
+          <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+          <p className="text-[var(--purple-lavender)] text-lg mb-4">No financial reports yet</p>
           {hasPermission('financials.create') && (
-            <Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
+            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Report
             </Button>
@@ -192,23 +192,23 @@ const AdminFinancials = () => {
           {reports.map(report => (
             <Card key={report.id} className="p-6">
               <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl text-white min-w-[100px] text-center">
+                <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
                   <DollarSign className="h-6 w-6 mx-auto mb-1" />
                   <div className="text-2xl font-bold">{report.year}</div>
                 </div>
                 <div className="flex-1">
-                  <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
+                  <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                     {report.title}
                   </h3>
                   <div className="flex items-center gap-3">
-                    <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
+                    <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
                       {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                     </Badge>
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="text-var(--purple-lavender) hover:text-var(--purple-muted)"
+                      className="text-[var(--purple-lavender)] hover:text-[var(--purple-muted)]"
                     >
                       <ExternalLink className="h-4 w-4 mr-1" />
                       View
@@ -222,7 +222,7 @@ const AdminFinancials = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(report)}
-                        className="border-var(--purple-lavender) text-var(--purple-lavender)"
+                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -313,12 +313,12 @@ const AdminFinancials = () => {
                     required={!selectedReport}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-var(--purple-lavender) mt-1">
+                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedReport && !uploadedFile && (
-                    <p className="text-sm text-var(--purple-lavender) mt-1">
+                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -333,7 +333,7 @@ const AdminFinancials = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-var(--purple-lavender) mt-1">
+                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -350,7 +350,7 @@ const AdminFinancials = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-var(--purple-lavender) text-white"
+                className="bg-[var(--purple-lavender)] text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedReport ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminGallery.js b/src/pages/admin/AdminGallery.js
index 48f23f3..eda10d3 100644
--- a/src/pages/admin/AdminGallery.js
+++ b/src/pages/admin/AdminGallery.js
@@ -153,23 +153,23 @@ const AdminGallery = () => {
     <div className="space-y-6">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Event Gallery Management
         </h1>
-        <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Upload and manage photos for event galleries
         </p>
       </div>
 
       {/* Event Selection */}
-      <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
+      <Card className="p-6 bg-background border-[var(--neutral-800)] rounded-xl">
         <div className="space-y-4">
           <div>
-            <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Select Event
             </Label>
             <Select value={selectedEvent || ''} onValueChange={setSelectedEvent}>
-              <SelectTrigger className="border-var(--neutral-800) rounded-xl">
+              <SelectTrigger className="border-[var(--neutral-800)] rounded-xl">
                 <SelectValue placeholder="Choose an event..." />
               </SelectTrigger>
               <SelectContent>
@@ -184,19 +184,19 @@ const AdminGallery = () => {
 
           {/* Empty State Message */}
           {events.length === 0 && (
-            <div className="mt-4 p-4 bg-var(--lavender-300) border-2 border-var(--neutral-800) rounded-xl">
+            <div className="mt-4 p-4 bg-[var(--lavender-300)] border-2 border-[var(--neutral-800)] rounded-xl">
               <div className="flex items-start gap-3">
-                <AlertCircle className="h-5 w-5 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
+                <AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
                 <div className="flex-1">
-                  <h4 className="text-sm font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h4 className="text-sm font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                     No Events Available
                   </h4>
-                  <p className="text-sm text-var(--purple-lavender) mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-[var(--purple-lavender)] mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You need to create an event before uploading gallery images. Events help organize photos by occasion.
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl text-sm"
+                      className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl"
+                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -236,7 +236,7 @@ const AdminGallery = () => {
                   </>
                 )}
               </Button>
-              <p className="text-sm text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 You can select multiple images. Max {formatFileSize(maxFileSize)} per image.
               </p>
             </div>
@@ -246,12 +246,12 @@ const AdminGallery = () => {
 
       {/* Gallery Grid */}
       {selectedEvent && (
-        <Card className="p-6 bg-background border-var(--neutral-800) rounded-xl">
+        <Card className="p-6 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center justify-between mb-6">
-            <h2 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-var(--purple-lavender) text-white px-3 py-1">
+            <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>
@@ -260,7 +260,7 @@ const AdminGallery = () => {
             <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
               {galleryImages.map((image) => (
                 <div key={image.id} className="relative group">
-                  <div className="aspect-square rounded-xl overflow-hidden bg-var(--lavender-500)">
+                  <div className="aspect-square rounded-xl overflow-hidden bg-[var(--lavender-500)]">
                     <img
                       src={image.image_url}
                       alt={image.caption || 'Gallery image'}
@@ -275,7 +275,7 @@ const AdminGallery = () => {
                         <Button
                           onClick={() => openEditCaption(image)}
                           size="sm"
-                          className="bg-background/90 hover:bg-background text-var(--purple-ink) rounded-lg"
+                          className="bg-background/90 hover:bg-background text-[var(--purple-ink)] rounded-lg"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Edit className="h-4 w-4 mr-1" />
@@ -299,7 +299,7 @@ const AdminGallery = () => {
                   {/* Caption Preview */}
                   {image.caption && (
                     <div className="mt-2">
-                      <p className="text-sm text-var(--purple-lavender) line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-[var(--purple-lavender)] line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {image.caption}
                       </p>
                     </div>
@@ -307,7 +307,7 @@ const AdminGallery = () => {
 
                   {/* File Size */}
                   <div className="mt-1">
-                    <p className="text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {formatFileSize(image.file_size_bytes)}
                     </p>
                   </div>
@@ -316,11 +316,11 @@ const AdminGallery = () => {
             </div>
           ) : (
             <div className="text-center py-16">
-              <ImageIcon className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-              <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <ImageIcon className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+              <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Images Yet
               </h3>
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Upload images to create a gallery for this event.
               </p>
             </div>
@@ -332,14 +332,14 @@ const AdminGallery = () => {
       <Dialog open={!!editingCaption} onOpenChange={() => setEditingCaption(null)}>
         <DialogContent className="bg-background sm:max-w-[600px]">
           <DialogHeader>
-            <DialogTitle className="text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Edit Image Caption
             </DialogTitle>
           </DialogHeader>
 
           {editingCaption && (
             <div className="space-y-4">
-              <div className="aspect-video rounded-xl overflow-hidden bg-var(--lavender-500)">
+              <div className="aspect-video rounded-xl overflow-hidden bg-[var(--lavender-500)]">
                 <img
                   src={editingCaption.image_url}
                   alt="Preview"
@@ -348,7 +348,7 @@ const AdminGallery = () => {
               </div>
 
               <div>
-                <Label className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <Label className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Caption
                 </Label>
                 <Textarea
@@ -356,7 +356,7 @@ const AdminGallery = () => {
                   onChange={(e) => setNewCaption(e.target.value)}
                   placeholder="Add a caption for this image..."
                   rows={3}
-                  className="border-var(--neutral-800) rounded-xl mt-2"
+                  className="border-[var(--neutral-800)] rounded-xl mt-2"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
@@ -367,14 +367,14 @@ const AdminGallery = () => {
             <Button
               onClick={() => setEditingCaption(null)}
               variant="outline"
-              className="border-var(--neutral-800) text-var(--purple-lavender) rounded-xl"
+              className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Cancel
             </Button>
             <Button
               onClick={handleUpdateCaption}
-              className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl"
+              className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Save Caption
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 1464950..d4c613a 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -203,9 +203,9 @@ const AdminMembers = () => {
     const config = {
       pending_email: { label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-var(--green-light) text-white' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
       payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { label: 'Active', className: 'bg-var(--green-light) text-white' },
+      active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' },
       canceled: { label: 'Canceled', className: 'bg-red-100 text-red-700' },
       expired: { label: 'Expired', className: 'bg-red-500 text-white' },
@@ -245,10 +245,10 @@ const AdminMembers = () => {
       <div className="mb-8">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Members Management
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage paying members and their subscriptions.
             </p>
           </div>
@@ -257,7 +257,7 @@ const AdminMembers = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl h-12 px-6"
+                    className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
                     disabled={exporting}
                   >
                     {exporting ? (
@@ -288,7 +288,7 @@ const AdminMembers = () => {
             {hasPermission('users.import') && (
               <Button
                 onClick={() => setImportDialogOpen(true)}
-                className="bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-xl h-12 px-6"
+                className="bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-xl h-12 px-6"
               >
                 <Upload className="h-5 w-5 mr-2" />
                 Import
@@ -298,7 +298,7 @@ const AdminMembers = () => {
             {hasPermission('users.invite') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl h-12 px-6"
+                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Member
@@ -308,7 +308,7 @@ const AdminMembers = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-xl h-12 px-6"
+                className="bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Member
@@ -320,47 +320,47 @@ const AdminMembers = () => {
 
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'payment_pending').length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'inactive').length}
           </p>
         </Card>
       </div>
 
       {/* Filters */}
-      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
             <Input
               placeholder="Search by name or email..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               data-testid="search-members-input"
             />
           </div>
           <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)" data-testid="status-filter-select">
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]" data-testid="status-filter-select">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
             <SelectContent>
@@ -381,32 +381,32 @@ const AdminMembers = () => {
       {/* Members List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
           {filteredUsers.map((user) => (
             <Card
               key={user.id}
-              className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-md transition-shadow"
+              className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
               data-testid={`member-card-${user.id}`}
             >
               <div className="flex justify-between items-start flex-wrap gap-4">
                 <div className="flex items-start gap-4 flex-1">
                   {/* Avatar */}
-                  <div className="h-14 w-14 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold text-lg flex-shrink-0">
+                  <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
                     {user.first_name?.[0]}{user.last_name?.[0]}
                   </div>
 
                   {/* Info */}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-3 mb-2 flex-wrap">
-                      <h3 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {user.first_name} {user.last_name}
                       </h3>
                       {getStatusBadge(user.status)}
                     </div>
-                    <div className="grid md:grid-cols-2 gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       <p>Email: {user.email}</p>
                       <p>Phone: {user.phone}</p>
                       <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -420,19 +420,19 @@ const AdminMembers = () => {
                       const reminderInfo = getReminderInfo(user);
                       if (reminderInfo.totalReminders > 0) {
                         return (
-                          <div className="mt-4 p-3 bg-var(--lavender-500) rounded-lg border border-var(--neutral-800)">
+                          <div className="mt-4 p-3 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
                             <div className="flex items-center gap-2 mb-2">
-                              <AlertCircle className="h-4 w-4 text-var(--orange-light)" />
-                              <span className="text-sm font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              <AlertCircle className="h-4 w-4 text-[var(--orange-light)]" />
+                              <span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                                 {reminderInfo.totalReminders} reminder{reminderInfo.totalReminders !== 1 ? 's' : ''} sent
                                 {reminderInfo.totalReminders >= 3 && (
-                                  <Badge className="ml-2 bg-var(--orange-light) text-white px-2 py-0.5 rounded-full text-xs">
+                                  <Badge className="ml-2 bg-[var(--orange-light)] text-white px-2 py-0.5 rounded-full text-xs">
                                     Needs attention
                                   </Badge>
                                 )}
                               </span>
                             </div>
-                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {reminderInfo.emailReminders > 0 && (
                                 <p>
                                   <Mail className="inline h-3 w-3 mr-1" />
@@ -459,7 +459,7 @@ const AdminMembers = () => {
                               )}
                             </div>
                             {reminderInfo.lastReminderAt && (
-                              <p className="mt-2 text-xs text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="mt-2 text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 Last reminder: {new Date(reminderInfo.lastReminderAt).toLocaleDateString()} at {new Date(reminderInfo.lastReminderAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                               </p>
                             )}
@@ -478,7 +478,7 @@ const AdminMembers = () => {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white"
+                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
                       >
                         <Eye className="h-4 w-4 mr-1" />
                         View Profile
@@ -490,7 +490,7 @@ const AdminMembers = () => {
                       <Button
                         onClick={() => handleActivatePayment(user)}
                         size="sm"
-                        className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
+                        className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
                       >
                         <CheckCircle className="h-4 w-4 mr-1" />
                         Activate Payment
@@ -500,7 +500,7 @@ const AdminMembers = () => {
 
                   {/* Status Management */}
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-var(--purple-lavender) whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <span className="text-sm text-[var(--purple-lavender)] whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Change Status:
                     </span>
                     <Select
@@ -508,7 +508,7 @@ const AdminMembers = () => {
                       onValueChange={(newStatus) => handleStatusChangeRequest(user.id, user.status, newStatus, user)}
                       disabled={statusChanging === user.id}
                     >
-                      <SelectTrigger className="w-[180px] h-9 border-var(--neutral-800)">
+                      <SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
                         <SelectValue />
                       </SelectTrigger>
                       <SelectContent>
@@ -527,11 +527,11 @@ const AdminMembers = () => {
         </div>
       ) : (
         <div className="text-center py-20">
-          <Users className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Users className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Members Found
           </h3>
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || statusFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'No members yet'}
diff --git a/src/pages/admin/AdminNewsletters.js b/src/pages/admin/AdminNewsletters.js
index 18b42aa..b08c2c9 100644
--- a/src/pages/admin/AdminNewsletters.js
+++ b/src/pages/admin/AdminNewsletters.js
@@ -175,7 +175,7 @@ const AdminNewsletters = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-var(--purple-lavender)">Loading newsletters...</p>
+        <p className="text-[var(--purple-lavender)]">Loading newsletters...</p>
       </div>
     );
   }
@@ -185,17 +185,17 @@ const AdminNewsletters = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Newsletter Management
           </h1>
-          <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage newsletter archive
           </p>
         </div>
         {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
+            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Newsletter
@@ -206,10 +206,10 @@ const AdminNewsletters = () => {
       {/* Newsletters List */}
       {newsletters.length === 0 ? (
         <Card className="p-12 text-center">
-          <FileText className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-          <p className="text-var(--purple-lavender) text-lg mb-4">No newsletters yet</p>
+          <FileText className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+          <p className="text-[var(--purple-lavender)] text-lg mb-4">No newsletters yet</p>
           {hasPermission('newsletters.create') && (
-            <Button onClick={handleCreate} className="bg-var(--purple-lavender) text-white">
+            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Newsletter
             </Button>
@@ -219,7 +219,7 @@ const AdminNewsletters = () => {
         <div className="space-y-6">
           {sortedYears.map(year => (
             <div key={year}>
-              <h2 className="text-xl font-semibold text-var(--purple-ink) mb-4 flex items-center gap-2">
+              <h2 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2">
                 <Calendar className="h-5 w-5" />
                 {year}
               </h2>
@@ -228,24 +228,24 @@ const AdminNewsletters = () => {
                   <Card key={newsletter.id} className="p-6">
                     <div className="flex items-start justify-between">
                       <div className="flex-1">
-                        <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2">
+                        <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                           {newsletter.title}
                         </h3>
                         {newsletter.description && (
-                          <p className="text-var(--purple-lavender) mb-3">{newsletter.description}</p>
+                          <p className="text-[var(--purple-lavender)] mb-3">{newsletter.description}</p>
                         )}
                         <div className="flex items-center gap-3">
-                          <Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
+                          <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
                             {formatDate(newsletter.published_date)}
                           </Badge>
-                          <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
+                          <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
                             {newsletter.document_type === 'upload' ? 'PDF Upload' : 'Link'}
                           </Badge>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => window.open(newsletter.document_url, '_blank')}
-                            className="text-var(--purple-lavender) hover:text-var(--purple-muted)"
+                            className="text-[var(--purple-lavender)] hover:text-[var(--purple-muted)]"
                           >
                             <ExternalLink className="h-4 w-4 mr-1" />
                             View
@@ -259,7 +259,7 @@ const AdminNewsletters = () => {
                               variant="outline"
                               size="sm"
                               onClick={() => handleEdit(newsletter)}
-                              className="border-var(--purple-lavender) text-var(--purple-lavender)"
+                              className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
                             >
                               <Edit className="h-4 w-4" />
                             </Button>
@@ -361,12 +361,12 @@ const AdminNewsletters = () => {
                     required={!selectedNewsletter}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-var(--purple-lavender) mt-1">
+                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedNewsletter && !uploadedFile && (
-                    <p className="text-sm text-var(--purple-lavender) mt-1">
+                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -381,7 +381,7 @@ const AdminNewsletters = () => {
                     placeholder="https://docs.google.com/document/d/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-var(--purple-lavender) mt-1">
+                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
                     Paste the shareable link to your document (Google Docs, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -398,7 +398,7 @@ const AdminNewsletters = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-var(--purple-lavender) text-white"
+                className="bg-[var(--purple-lavender)] text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedNewsletter ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminPermissions.js b/src/pages/admin/AdminPermissions.js
index 6b010ad..fb0d94c 100644
--- a/src/pages/admin/AdminPermissions.js
+++ b/src/pages/admin/AdminPermissions.js
@@ -187,8 +187,8 @@ const AdminPermissions = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      admin: { label: 'Admin', color: 'bg-var(--green-light)', icon: Shield },
-      member: { label: 'Member', color: 'bg-var(--purple-lavender)', icon: Shield },
+      admin: { label: 'Admin', color: 'bg-[var(--green-light)]', icon: Shield },
+      member: { label: 'Member', color: 'bg-[var(--purple-lavender)]', icon: Shield },
       guest: { label: 'Guest', color: 'bg-gray-400', icon: Shield }
     };
 
@@ -206,7 +206,7 @@ const AdminPermissions = () => {
   if (loading) {
     return (
       <div className="text-center py-20">
-        <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading permissions...
         </p>
       </div>
@@ -217,10 +217,10 @@ const AdminPermissions = () => {
     return (
       <div className="text-center py-20">
         <Lock className="h-20 w-20 text-red-500 mx-auto mb-6" />
-        <h2 className="text-3xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h2 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Access Denied
         </h2>
-        <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           You don't have permission to manage role permissions.
         </p>
         <p className="text-sm text-gray-500 mt-2">
@@ -233,10 +233,10 @@ const AdminPermissions = () => {
   return (
     <>
       <div className="mb-8">
-        <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Permission Management
         </h1>
-        <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Configure granular permissions for each role. Superadmin always has all permissions.
         </p>
       </div>
@@ -259,27 +259,27 @@ const AdminPermissions = () => {
           <TabsContent key={role} value={role}>
             {/* Stats */}
             <div className="grid md:grid-cols-3 gap-4 mb-8">
-              <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-                <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Total Permissions
                 </p>
-                <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {permissions.length}
                 </p>
               </Card>
-              <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-                <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Assigned
                 </p>
-                <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {selectedPermissions[role].length}
                 </p>
               </Card>
-              <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-                <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Modules
                 </p>
-                <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {Object.keys(groupedPermissions).length}
                 </p>
               </Card>
@@ -288,10 +288,10 @@ const AdminPermissions = () => {
             {/* Permissions by Module */}
             <div className="space-y-4">
               {Object.entries(groupedPermissions).map(([module, perms]) => (
-                <Card key={module} className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
+                <Card key={module} className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
                   {/* Module Header */}
                   <div
-                    className="p-6 bg-gradient-to-r from-var(--neutral-800) to-white cursor-pointer hover:from-var(--neutral-600) transition-colors"
+                    className="p-6 bg-gradient-to-r from-[var(--neutral-800)] to-white cursor-pointer hover:from-[var(--neutral-600)] transition-colors"
                     onClick={() => toggleModuleExpansion(module)}
                   >
                     <div className="flex items-center justify-between">
@@ -300,21 +300,21 @@ const AdminPermissions = () => {
                           checked={isModuleFullySelected(role, module)}
                           onCheckedChange={() => toggleModule(role, module)}
                           onClick={(e) => e.stopPropagation()}
-                          className="h-6 w-6 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
+                          className="h-6 w-6 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
                         />
                         <div>
-                          <h3 className="text-xl font-semibold text-var(--purple-ink) capitalize" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h3 className="text-xl font-semibold text-[var(--purple-ink)] capitalize" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {module}
                           </h3>
-                          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {getModuleProgress(role, module)} permissions
                           </p>
                         </div>
                       </div>
                       {expandedModules[module] ? (
-                        <ChevronUp className="h-6 w-6 text-var(--purple-lavender)" />
+                        <ChevronUp className="h-6 w-6 text-[var(--purple-lavender)]" />
                       ) : (
-                        <ChevronDown className="h-6 w-6 text-var(--purple-lavender)" />
+                        <ChevronDown className="h-6 w-6 text-[var(--purple-lavender)]" />
                       )}
                     </div>
                   </div>
@@ -326,18 +326,18 @@ const AdminPermissions = () => {
                         {perms.map(perm => (
                           <div
                             key={perm.code}
-                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-var(--lavender-700) transition-colors border border-transparent hover:border-var(--neutral-800)"
+                            className="flex items-start gap-4 p-4 rounded-xl hover:bg-[var(--lavender-700)] transition-colors border border-transparent hover:border-[var(--neutral-800)]"
                           >
                             <Checkbox
                               checked={selectedPermissions[role].includes(perm.code)}
                               onCheckedChange={() => togglePermission(role, perm.code)}
-                              className="mt-1 h-5 w-5 border-2 border-var(--purple-lavender) data-[state=checked]:bg-var(--purple-lavender)"
+                              className="mt-1 h-5 w-5 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
                             />
                             <div className="flex-1">
-                              <p className="font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              <p className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                                 {perm.name}
                               </p>
-                              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 {perm.description}
                               </p>
                               <p className="text-xs text-gray-400 mt-1 font-mono">
@@ -357,7 +357,7 @@ const AdminPermissions = () => {
       </Tabs>
 
       {/* Superadmin Note */}
-      <Card className="p-6 bg-gradient-to-r from-var(--purple-lavender) to-var(--purple-ink) rounded-2xl border-none mb-8">
+      <Card className="p-6 bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-ink)] rounded-2xl border-none mb-8">
         <div className="flex items-start gap-4">
           <Lock className="h-6 w-6 text-white flex-shrink-0 mt-1" />
           <div className="text-white">
@@ -377,7 +377,7 @@ const AdminPermissions = () => {
           <Button
             onClick={handleSave}
             disabled={saving}
-            className="h-14 px-8 bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-full shadow-lg text-lg font-semibold"
+            className="h-14 px-8 bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-full shadow-lg text-lg font-semibold"
           >
             <Save className="h-5 w-5 mr-2" />
             {saving ? 'Saving...' : 'Save Changes'}
@@ -389,10 +389,10 @@ const AdminPermissions = () => {
       <AlertDialog open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>
         <AlertDialogContent className="rounded-2xl">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <AlertDialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Confirm Permission Changes
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to update permissions for <span className="font-semibold capitalize">{selectedRole}</span>?
               This will immediately affect all users with this role.
             </AlertDialogDescription>
@@ -401,7 +401,7 @@ const AdminPermissions = () => {
             <AlertDialogCancel className="rounded-xl">Cancel</AlertDialogCancel>
             <AlertDialogAction
               onClick={confirmSave}
-              className="rounded-xl bg-var(--green-light) hover:bg-var(--green-fern) text-white"
+              className="rounded-xl bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white"
             >
               Confirm
             </AlertDialogAction>
diff --git a/src/pages/admin/AdminPlans.js b/src/pages/admin/AdminPlans.js
index 9d68f48..25110d0 100644
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -131,17 +131,17 @@ const AdminPlans = () => {
       <div className="mb-8">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Subscription Plans
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage membership plans and pricing.
             </p>
           </div>
           {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-6"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
             >
               <Plus className="h-4 w-4 mr-2" />
               Create Plan
@@ -152,27 +152,27 @@ const AdminPlans = () => {
 
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.filter(p => p.active).length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {formatPrice(
               plans.reduce((sum, p) => {
                 const annualPrice = p.billing_cycle === 'yearly'
@@ -186,19 +186,19 @@ const AdminPlans = () => {
       </div>
 
       {/* Filters */}
-      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
             <Input
               placeholder="Search plans..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
           <Select value={activeFilter} onValueChange={setActiveFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)">
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
             <SelectContent>
@@ -213,7 +213,7 @@ const AdminPlans = () => {
       {/* Plans Grid */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
         </div>
       ) : filteredPlans.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -221,7 +221,7 @@ const AdminPlans = () => {
             <Card
               key={plan.id}
               className={`p-6 bg-background rounded-2xl border-2 transition-all hover:shadow-lg ${plan.active
-                ? 'border-var(--neutral-800) hover:border-var(--purple-lavender)'
+                ? 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
                 : 'border-gray-400 opacity-60'
                 }`}
             >
@@ -229,38 +229,38 @@ const AdminPlans = () => {
               <div className="flex flex-wrap gap-2 mb-4">
                 <Badge
                   className={`${plan.active
-                    ? 'bg-var(--green-light) text-white'
+                    ? 'bg-[var(--green-light)] text-white'
                     : 'bg-gray-400 text-white'
                     }`}
                 >
                   {plan.active ? 'Active' : 'Inactive'}
                 </Badge>
                 {plan.subscriber_count > 0 && (
-                  <Badge className="bg-var(--neutral-800) text-var(--purple-ink)">
+                  <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
                     <Users className="h-3 w-3 mr-1" />
                     {plan.subscriber_count}
                   </Badge>
                 )}
                 {plan.custom_cycle_enabled && (
-                  <Badge className="bg-var(--purple-lavender) text-white">
+                  <Badge className="bg-[var(--purple-lavender)] text-white">
                     Custom Dates
                   </Badge>
                 )}
                 {plan.allow_donation && (
-                  <Badge className="bg-var(--orange-light) text-white">
+                  <Badge className="bg-[var(--orange-light)] text-white">
                     Donations Enabled
                   </Badge>
                 )}
               </div>
 
               {/* Plan Name */}
-              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {plan.name}
               </h3>
 
               {/* Description */}
               {plan.description && (
-                <p className="text-sm text-var(--purple-lavender) mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {plan.description}
                 </p>
               )}
@@ -268,20 +268,20 @@ const AdminPlans = () => {
               {/* Price */}
               <div className="mb-4">
                 <div className="flex items-baseline gap-2">
-                  <div className="text-3xl font-bold text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <div className="text-3xl font-bold text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {formatPrice(plan.minimum_price_cents || plan.price_cents)}
                   </div>
                   {plan.suggested_price_cents && plan.suggested_price_cents > plan.minimum_price_cents && (
-                    <div className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       (Suggested: {formatPrice(plan.suggested_price_cents)})
                     </div>
                   )}
                 </div>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {getBillingCycleLabel(plan.billing_cycle)}
                 </p>
                 {plan.custom_cycle_enabled && (
-                  <p className="text-xs text-var(--purple-lavender) font-mono mt-1">
+                  <p className="text-xs text-[var(--purple-lavender)] font-mono mt-1">
                     {formatCustomCycleDates(plan)}
                   </p>
                 )}
@@ -289,12 +289,12 @@ const AdminPlans = () => {
 
               {/* Actions */}
               {hasPermission('subscriptions.plans') && (
-                <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-var(--neutral-800)">
+                <div className="flex flex-col sm:flex-row gap-2 pt-4 border-t border-[var(--neutral-800)]">
                   <Button
                     onClick={() => handleEditPlan(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
+                    className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
                   >
                     <Edit className="h-4 w-4 mr-1" />
                     Edit
@@ -314,7 +314,7 @@ const AdminPlans = () => {
 
               {/* Warning for plans with subscribers */}
               {plan.subscriber_count > 0 && (
-                <p className="text-xs text-var(--purple-lavender) mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-[var(--purple-lavender)] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Cannot delete plan with active subscribers
                 </p>
               )}
@@ -323,11 +323,11 @@ const AdminPlans = () => {
         </div>
       ) : (
         <div className="text-center py-20">
-          <CreditCard className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <CreditCard className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Plans Found
           </h3>
-          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || activeFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'Create your first subscription plan to get started'}
@@ -335,7 +335,7 @@ const AdminPlans = () => {
           {!searchQuery && activeFilter === 'all' && hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background rounded-full px-8"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8"
             >
               <Plus className="h-4 w-4 mr-2" />
               Create First Plan
@@ -356,10 +356,10 @@ const AdminPlans = () => {
       {deleteDialogOpen && (
         <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
           <Card className="p-6 sm:p-8 bg-background rounded-2xl max-w-md w-full">
-            <h2 className="text-xl sm:text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h2 className="text-xl sm:text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Delete Plan
             </h2>
-            <p className="text-sm sm:text-base text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm sm:text-base text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to delete "{planToDelete?.name}"? This action
               will deactivate the plan and it won't be available for new subscriptions.
             </p>
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index 72f51f1..61a8aaf 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -99,9 +99,9 @@ const AdminStaff = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-var(--purple-lavender) text-white' },
-      admin: { label: 'Admin', className: 'bg-var(--green-light) text-white' },
-      moderator: { label: 'Moderator', className: 'bg-var(--neutral-800) text-var(--purple-ink)' },
+      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
+      moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
       staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
       media: { label: 'Media', className: 'bg-gray-400 text-white' }
     };
@@ -117,7 +117,7 @@ const AdminStaff = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      active: { label: 'Active', className: 'bg-var(--green-light) text-white' },
+      active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
     };
 
@@ -134,10 +134,10 @@ const AdminStaff = () => {
       <div className="mb-8">
         <div className="flex justify-between items-start mb-4">
           <div>
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Staff Management
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage internal team members and their roles.
             </p>
           </div>
@@ -145,7 +145,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl h-12 px-6"
+                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-var(--green-light) hover:bg-var(--green-fern) text-white rounded-xl h-12 px-6"
+                className="bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff
@@ -166,27 +166,27 @@ const AdminStaff = () => {
 
       {/* Stats */}
       <div className="grid md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.role === 'moderator').length}
           </p>
         </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800)">
-          <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
         </Card>
@@ -207,20 +207,20 @@ const AdminStaff = () => {
 
         <TabsContent value="staff-list">
           {/* Filters */}
-          <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+          <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
             <div className="grid md:grid-cols-2 gap-4">
               <div className="relative">
-                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
                 <Input
                   placeholder="Search by name or email..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                   data-testid="search-staff-input"
                 />
               </div>
               <Select value={roleFilter} onValueChange={setRoleFilter}>
-                <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)" data-testid="role-filter-select">
+                <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]" data-testid="role-filter-select">
                   <SelectValue placeholder="Filter by role" />
                 </SelectTrigger>
                 <SelectContent>
@@ -238,33 +238,33 @@ const AdminStaff = () => {
           {/* Staff List */}
           {loading ? (
             <div className="text-center py-20">
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
             </div>
           ) : filteredUsers.length > 0 ? (
             <div className="space-y-4">
               {filteredUsers.map((user) => (
                 <Card
                   key={user.id}
-                  className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-md transition-shadow"
+                  className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
                   data-testid={`staff-card-${user.id}`}
                 >
                   <div className="flex justify-between items-start flex-wrap gap-4">
                     <div className="flex items-start gap-4 flex-1">
                       {/* Avatar */}
-                      <div className="h-14 w-14 rounded-full bg-var(--neutral-800) flex items-center justify-center text-var(--purple-ink) font-semibold text-lg flex-shrink-0">
+                      <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
                         {user.first_name?.[0]}{user.last_name?.[0]}
                       </div>
 
                       {/* Info */}
                       <div className="flex-1 min-w-0">
                         <div className="flex items-center gap-3 mb-2 flex-wrap">
-                          <h3 className="text-xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {user.first_name} {user.last_name}
                           </h3>
                           {getRoleBadge(user.role)}
                           {getStatusBadge(user.status)}
                         </div>
-                        <div className="grid md:grid-cols-2 gap-2 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone}</p>
                           <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -280,7 +280,7 @@ const AdminStaff = () => {
                       <Button
                         onClick={() => navigate(`/admin/users/${user.id}`)}
                         variant="outline"
-                        className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-4 py-2"
+                        className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
                       >
                         <Edit className="h-4 w-4 mr-2" />
                         Manage
@@ -326,11 +326,11 @@ const AdminStaff = () => {
             </div>
           ) : (
             <div className="text-center py-20">
-              <UserCog className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <UserCog className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+              <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Staff Found
               </h3>
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {searchQuery || roleFilter !== 'all'
                   ? 'Try adjusting your filters'
                   : 'No staff members yet'}
diff --git a/src/pages/admin/AdminSubscriptions.js b/src/pages/admin/AdminSubscriptions.js
index 6d2366a..4b891b1 100644
--- a/src/pages/admin/AdminSubscriptions.js
+++ b/src/pages/admin/AdminSubscriptions.js
@@ -277,7 +277,7 @@ Proceed with activation?`;
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-var(--purple-lavender)" />
+        <Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
       </div>
     );
   }
@@ -286,93 +286,93 @@ Proceed with activation?`;
     <div className="space-y-8">
       {/* Header */}
       <div>
-        <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Subscription Management
         </h1>
-        <p className="text-var(--purple-lavender) mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           View and manage all member subscriptions
         </p>
       </div>
 
       {/* Stats Cards */}
       <div className="grid md:grid-cols-4 gap-6">
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Subscriptions
               </p>
-              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.total || 0}
               </p>
             </div>
-            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
-              <CreditCard className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
+              <CreditCard className="h-6 w-6 text-[var(--purple-lavender)]" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Active Members
               </p>
-              <p className="text-3xl font-bold text-var(--green-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.active || 0}
               </p>
             </div>
-            <div className="p-3 bg-var(--green-light)/10 rounded-full">
-              <TrendingUp className="h-6 w-6 text-var(--green-light)" />
+            <div className="p-3 bg-[var(--green-light)]/10 rounded-full">
+              <TrendingUp className="h-6 w-6 text-[var(--green-light)]" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Revenue
               </p>
-              <p className="text-3xl font-bold text-var(--purple-ink) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {formatPrice(stats.total_revenue || 0)}
               </p>
             </div>
-            <div className="p-3 bg-var(--neutral-800)/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-var(--purple-lavender)" />
+            <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
+              <DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
             </div>
           </div>
         </Card>
 
-        <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+        <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
-              <p className="text-3xl font-bold text-var(--orange-light) mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-[var(--orange-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {formatPrice(stats.total_donations || 0)}
               </p>
             </div>
-            <div className="p-3 bg-var(--orange-light)/10 rounded-full">
-              <Heart className="h-6 w-6 text-var(--orange-light)" />
+            <div className="p-3 bg-[var(--orange-light)]/10 rounded-full">
+              <Heart className="h-6 w-6 text-[var(--orange-light)]" />
             </div>
           </div>
         </Card>
       </div>
 
       {/* Search & Filter Bar */}
-      <Card className="p-6 bg-background rounded-2xl border-2 border-var(--neutral-800)">
+      <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
         <div className="grid md:grid-cols-3 gap-4">
           {/* Search */}
           <div className="md:col-span-1">
             <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
               <Input
                 placeholder="Search by name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
           </div>
@@ -380,7 +380,7 @@ Proceed with activation?`;
           {/* Status Filter */}
           <div>
             <Select value={statusFilter} onValueChange={setStatusFilter}>
-              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+              <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                 <SelectValue placeholder="All Statuses" />
               </SelectTrigger>
               <SelectContent>
@@ -395,7 +395,7 @@ Proceed with activation?`;
           {/* Plan Filter */}
           <div>
             <Select value={planFilter} onValueChange={setPlanFilter}>
-              <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+              <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                 <SelectValue placeholder="All Plans" />
               </SelectTrigger>
               <SelectContent>
@@ -409,7 +409,7 @@ Proceed with activation?`;
         </div>
 
         <div className="mt-4 flex items-center justify-between">
-          <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
           </div>
 
@@ -419,26 +419,26 @@ Proceed with activation?`;
               <DropdownMenuTrigger asChild>
                 <Button
                   disabled={exporting}
-                  className="bg-var(--green-light) text-white hover:bg-var(--green-soft) rounded-full px-6 py-2 flex items-center gap-2"
+                  className="bg-[var(--green-light)] text-white hover:bg-[var(--green-soft)] rounded-full px-6 py-2 flex items-center gap-2"
                 >
                   <Download className="h-4 w-4" />
                   {exporting ? 'Exporting...' : 'Export'}
                 </Button>
               </DropdownMenuTrigger>
-              <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-var(--neutral-800) shadow-lg">
+              <DropdownMenuContent align="end" className="w-56 bg-background rounded-xl border-2 border-[var(--neutral-800)] shadow-lg">
                 <DropdownMenuItem
                   onClick={() => handleExport('all')}
-                  className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
+                  className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                 >
-                  <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
-                  <span className="text-var(--purple-ink)">Export All Subscriptions</span>
+                  <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                  <span className="text-[var(--purple-ink)]">Export All Subscriptions</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => handleExport('current')}
-                  className="cursor-pointer hover:bg-var(--lavender-300) rounded-lg p-3"
+                  className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                 >
-                  <FileDown className="h-4 w-4 mr-2 text-var(--purple-lavender)" />
-                  <span className="text-var(--purple-ink)">Export Current View</span>
+                  <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                  <span className="text-[var(--purple-ink)]">Export Current View</span>
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -447,20 +447,20 @@ Proceed with activation?`;
       </Card>
 
       {/* Subscriptions Table */}
-      <Card className="bg-background rounded-2xl border-2 border-var(--neutral-800) overflow-hidden">
+      <Card className="bg-background rounded-2xl border-2 border-[var(--neutral-800)] overflow-hidden">
         {/* Mobile Card View */}
         <div className="md:hidden p-4 space-y-4">
           {filteredSubscriptions.length > 0 ? (
             filteredSubscriptions.map((sub) => (
-              <Card key={sub.id} className="p-4 border border-var(--neutral-800) bg-var(--lavender-400)/30">
+              <Card key={sub.id} className="p-4 border border-[var(--neutral-800)] bg-[var(--lavender-400)]/30">
                 <div className="space-y-3">
                   {/* Member Info */}
-                  <div className="flex justify-between items-start border-b border-var(--neutral-800) pb-3">
+                  <div className="flex justify-between items-start border-b border-[var(--neutral-800)] pb-3">
                     <div className="flex-1">
-                      <p className="font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
                       </p>
-                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.user.email}
                       </p>
                     </div>
@@ -470,13 +470,13 @@ Proceed with activation?`;
                   {/* Plan & Period */}
                   <div className="grid grid-cols-2 gap-3 text-sm">
                     <div>
-                      <p className="text-xs text-var(--purple-lavender) mb-1">Plan</p>
-                      <p className="font-medium text-var(--purple-ink)">{sub.plan.name}</p>
-                      <p className="text-xs text-var(--purple-lavender)">{sub.plan.billing_cycle}</p>
+                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Plan</p>
+                      <p className="font-medium text-[var(--purple-ink)]">{sub.plan.name}</p>
+                      <p className="text-xs text-[var(--purple-lavender)]">{sub.plan.billing_cycle}</p>
                     </div>
                     <div>
-                      <p className="text-xs text-var(--purple-lavender) mb-1">Period</p>
-                      <p className="text-var(--purple-ink)">
+                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Period</p>
+                      <p className="text-[var(--purple-ink)]">
                         {new Date(sub.current_period_start).toLocaleDateString()} -
                         {new Date(sub.current_period_end).toLocaleDateString()}
                       </p>
@@ -486,20 +486,20 @@ Proceed with activation?`;
                   {/* Pricing */}
                   <div className="grid grid-cols-3 gap-2 text-sm bg-background/50 p-3 rounded">
                     <div>
-                      <p className="text-xs text-var(--purple-lavender) mb-1">Base Fee</p>
-                      <p className="font-medium text-var(--purple-ink)">
+                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Base Fee</p>
+                      <p className="font-medium text-[var(--purple-ink)]">
                         ${(sub.base_fee_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs text-var(--purple-lavender) mb-1">Donation</p>
-                      <p className="font-medium text-var(--purple-ink)">
+                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Donation</p>
+                      <p className="font-medium text-[var(--purple-ink)]">
                         ${(sub.donation_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs text-var(--purple-lavender) mb-1">Total</p>
-                      <p className="font-semibold text-var(--purple-ink)">
+                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Total</p>
+                      <p className="font-semibold text-[var(--purple-ink)]">
                         ${(sub.total_cents / 100).toFixed(2)}
                       </p>
                     </div>
@@ -512,7 +512,7 @@ Proceed with activation?`;
                         size="sm"
                         variant="outline"
                         onClick={() => handleEdit(sub)}
-                        className="flex-1 text-var(--purple-lavender) hover:bg-var(--neutral-800)"
+                        className="flex-1 text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
                       >
                         <Edit className="h-4 w-4 mr-2" />
                         Edit
@@ -534,7 +534,7 @@ Proceed with activation?`;
               </Card>
             ))
           ) : (
-            <div className="p-12 text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No subscriptions found
             </div>
           )}
@@ -544,29 +544,29 @@ Proceed with activation?`;
         <div className="hidden md:block overflow-x-auto">
           <table className="w-full">
             <thead>
-              <tr className="bg-var(--neutral-800)/20 border-b border-var(--neutral-800)">
-                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <tr className="bg-[var(--neutral-800)]/20 border-b border-[var(--neutral-800)]">
+                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Member
                 </th>
-                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Plan
                 </th>
-                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Status
                 </th>
-                <th className="text-left p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-left p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Period
                 </th>
-                <th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Base Fee
                 </th>
-                <th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Donation
                 </th>
-                <th className="text-right p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Total
                 </th>
-                <th className="text-center p-4 text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Actions
                 </th>
               </tr>
@@ -574,20 +574,20 @@ Proceed with activation?`;
             <tbody>
               {filteredSubscriptions.length > 0 ? (
                 filteredSubscriptions.map((sub) => (
-                  <tr key={sub.id} className="border-b border-var(--neutral-800) hover:bg-var(--lavender-400) transition-colors">
+                  <tr key={sub.id} className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
                     <td className="p-4">
-                      <div className="font-medium text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
                       </div>
-                      <div className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.user.email}
                       </div>
                     </td>
                     <td className="p-4">
-                      <div className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.plan.name}
                       </div>
-                      <div className="text-xs text-var(--purple-lavender)">
+                      <div className="text-xs text-[var(--purple-lavender)]">
                         {sub.plan.billing_cycle}
                       </div>
                     </td>
@@ -597,18 +597,18 @@ Proceed with activation?`;
                       </Badge>
                     </td>
                     <td className="p-4">
-                      <div className="text-sm text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         <div>{formatDate(sub.start_date)}</div>
-                        <div className="text-xs text-var(--purple-lavender)">to {formatDate(sub.end_date)}</div>
+                        <div className="text-xs text-[var(--purple-lavender)]">to {formatDate(sub.end_date)}</div>
                       </div>
                     </td>
-                    <td className="p-4 text-right text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(sub.base_subscription_cents || 0)}
                     </td>
-                    <td className="p-4 text-right text-var(--orange-light)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(sub.donation_cents || 0)}
                     </td>
-                    <td className="p-4 text-right font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(sub.amount_paid_cents || 0)}
                     </td>
                     <td className="p-4">
@@ -618,7 +618,7 @@ Proceed with activation?`;
                             size="sm"
                             variant="outline"
                             onClick={() => handleEdit(sub)}
-                            className="text-var(--purple-lavender) hover:bg-var(--neutral-800)"
+                            className="text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
                           >
                             <Edit className="h-4 w-4" />
                           </Button>
@@ -639,7 +639,7 @@ Proceed with activation?`;
                 ))
               ) : (
                 <tr>
-                  <td colSpan="8" className="p-12 text-center text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <td colSpan="8" className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     No subscriptions found
                   </td>
                 </tr>
@@ -653,10 +653,10 @@ Proceed with activation?`;
       <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
         <DialogContent className="sm:max-w-[500px] bg-background rounded-2xl">
           <DialogHeader>
-            <DialogTitle className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Edit Subscription
             </DialogTitle>
-            <DialogDescription className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Update subscription status or end date for {selectedSubscription?.user.first_name} {selectedSubscription?.user.last_name}
             </DialogDescription>
           </DialogHeader>
@@ -664,14 +664,14 @@ Proceed with activation?`;
           <div className="space-y-6 py-4">
             {/* Status */}
             <div className="space-y-2">
-              <Label htmlFor="status" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Label htmlFor="status" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Status
               </Label>
               <Select
                 value={editFormData.status}
                 onValueChange={(value) => setEditFormData({ ...editFormData, status: value })}
               >
-                <SelectTrigger className="rounded-xl border-2 border-var(--neutral-800)">
+                <SelectTrigger className="rounded-xl border-2 border-[var(--neutral-800)]">
                   <SelectValue placeholder="Select status" />
                 </SelectTrigger>
                 <SelectContent>
@@ -736,17 +736,17 @@ Proceed with activation?`;
 
             {/* End Date */}
             <div className="space-y-2">
-              <Label htmlFor="end_date" className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <Label htmlFor="end_date" className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Inter', sans-serif" }}>
                 End Date
               </Label>
               <div className="relative">
-                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
                 <Input
                   id="end_date"
                   type="date"
                   value={editFormData.end_date}
                   onChange={(e) => setEditFormData({ ...editFormData, end_date: e.target.value })}
-                  className="pl-12 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                  className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
                 />
               </div>
             </div>
@@ -757,7 +757,7 @@ Proceed with activation?`;
               type="button"
               variant="outline"
               onClick={() => setEditDialogOpen(false)}
-              className="rounded-full border-2 border-var(--neutral-800)"
+              className="rounded-full border-2 border-[var(--neutral-800)]"
               disabled={isUpdating}
             >
               Cancel
@@ -766,7 +766,7 @@ Proceed with activation?`;
               type="button"
               onClick={handleSaveSubscription}
               disabled={isUpdating}
-              className="bg-var(--green-light) text-white hover:bg-var(--green-mint) rounded-full"
+              className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)] rounded-full"
             >
               {isUpdating ? (
                 <>
diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index 9c8ec91..9014aa4 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -218,12 +218,12 @@ const AdminUserView = () => {
       </Button>
 
       {/* User Profile Header */}
-      <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+      <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="flex items-start gap-6">
           {/* Avatar */}
-          <Avatar className="h-24 w-24 border-4 border-var(--neutral-800)">
+          <Avatar className="h-24 w-24 border-4 border-[var(--neutral-800)]">
             <AvatarImage src={user.profile_photo_url} alt={`${user.first_name} ${user.last_name}`} />
-            <AvatarFallback className="bg-var(--neutral-800) text-var(--purple-ink) font-semibold text-3xl">
+            <AvatarFallback className="bg-[var(--neutral-800)] text-[var(--purple-ink)] font-semibold text-3xl">
               {user.first_name?.[0]}{user.last_name?.[0]}
             </AvatarFallback>
           </Avatar>
@@ -231,7 +231,7 @@ const AdminUserView = () => {
           {/* User Info */}
           <div className="flex-1">
             <div className="flex items-center gap-4 mb-4">
-              <h1 className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {user.first_name} {user.last_name}
               </h1>
               {/* Status & Role Badges */}
@@ -240,7 +240,7 @@ const AdminUserView = () => {
             </div>
 
             {/* Contact Info */}
-            <div className="grid md:grid-cols-2 gap-4 text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="grid md:grid-cols-2 gap-4 text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Mail className="h-4 w-4" />
                 <span>{user.email}</span>
@@ -263,8 +263,8 @@ const AdminUserView = () => {
       </Card>
 
       {/* Admin Actions */}
-      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
-        <h2 className="text-lg font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
+        <h2 className="text-lg font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Admin Actions
         </h2>
         <div className="flex flex-wrap gap-3">
@@ -272,7 +272,7 @@ const AdminUserView = () => {
             onClick={handleResetPasswordRequest}
             disabled={resetPasswordLoading}
             variant="outline"
-            className="border-2 border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full px-4 py-2 disabled:opacity-50"
+            className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-4 py-2 disabled:opacity-50"
           >
             <Lock className="h-4 w-4 mr-2" />
             {resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
@@ -283,7 +283,7 @@ const AdminUserView = () => {
               onClick={handleResendVerificationRequest}
               disabled={resendVerificationLoading}
               variant="outline"
-              className="border-2 border-var(--orange-light) text-var(--orange-light) hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
+              className="border-2 border-[var(--orange-light)] text-[var(--orange-light)] hover:bg-[#FFF3E0] rounded-full px-4 py-2 disabled:opacity-50"
             >
               <Mail className="h-4 w-4 mr-2" />
               {resendVerificationLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -303,7 +303,7 @@ const AdminUserView = () => {
             onClick={() => fileInputRef.current?.click()}
             disabled={uploadingPhoto}
             variant="outline"
-            className="border-2 border-var(--green-light) text-var(--green-light) hover:bg-var(--green-bg) rounded-full px-4 py-2 disabled:opacity-50"
+            className="border-2 border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-bg)] rounded-full px-4 py-2 disabled:opacity-50"
           >
             <Upload className="h-4 w-4 mr-2" />
             {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -321,7 +321,7 @@ const AdminUserView = () => {
             </Button>
           )}
 
-          <div className="flex items-center gap-2 text-sm text-var(--purple-lavender) ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)] ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <AlertTriangle className="h-4 w-4" />
             <span>User will receive a temporary password via email</span>
           </div>
@@ -329,28 +329,28 @@ const AdminUserView = () => {
       </Card>
 
       {/* Additional Details */}
-      <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800)">
-        <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)]">
+        <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
           Additional Information
         </h2>
 
         <div className="grid md:grid-cols-2 gap-6">
           <div>
-            <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
-            <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.address}</p>
+            <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
+            <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.address}</p>
           </div>
 
           <div>
-            <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
-            <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
+            <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {new Date(user.date_of_birth).toLocaleDateString()}
             </p>
           </div>
 
           {user.partner_first_name && (
             <div>
-              <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
-              <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
+              <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {user.partner_first_name} {user.partner_last_name}
               </p>
             </div>
@@ -358,14 +358,14 @@ const AdminUserView = () => {
 
           {user.referred_by_member_name && (
             <div>
-              <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
-              <p className="text-var(--purple-ink) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.referred_by_member_name}</p>
+              <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
+              <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.referred_by_member_name}</p>
             </div>
           )}
 
           {user.lead_sources && user.lead_sources.length > 0 && (
             <div className="md:col-span-2">
-              <label className="text-sm font-medium text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
+              <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
               <div className="flex flex-wrap gap-2 mt-2">
                 {user.lead_sources.map((source, idx) => (
                   <Badge key={idx} variant="outline">{source}</Badge>
@@ -378,30 +378,30 @@ const AdminUserView = () => {
 
       {/* Subscription Info (if applicable) */}
       {user.role === 'member' && (
-        <Card className="p-8 bg-background rounded-2xl border border-var(--neutral-800) mt-8">
-          <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] mt-8">
+          <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
             Subscription Information
           </h2>
 
           {subscriptionsLoading ? (
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
           ) : subscriptions.length === 0 ? (
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
           ) : (
             <div className="space-y-6">
               {subscriptions.map((sub) => (
-                <div key={sub.id} className="p-6 bg-var(--lavender-500) rounded-xl border border-var(--neutral-800)">
+                <div key={sub.id} className="p-6 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
                   <div className="flex items-start justify-between mb-4">
                     <div>
-                      <h3 className="text-lg font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.plan.name}
                       </h3>
-                      <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.plan.billing_cycle}
                       </p>
                     </div>
                     <Badge className={
-                      sub.status === 'active' ? 'bg-var(--green-light) text-white' :
+                      sub.status === 'active' ? 'bg-[var(--green-light)] text-white' :
                         sub.status === 'expired' ? 'bg-red-500 text-white' :
                           'bg-gray-400 text-white'
                     }>
@@ -411,51 +411,51 @@ const AdminUserView = () => {
 
                   <div className="grid md:grid-cols-2 gap-4 text-sm">
                     <div>
-                      <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
-                      <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
+                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(sub.start_date).toLocaleDateString()}
                       </p>
                     </div>
                     {sub.end_date && (
                       <div>
-                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
-                        <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
+                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {new Date(sub.end_date).toLocaleDateString()}
                         </p>
                       </div>
                     )}
                     <div>
-                      <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
-                      <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
+                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         ${(sub.base_subscription_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     {sub.donation_cents > 0 && (
                       <div>
-                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
-                        <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
+                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           ${(sub.donation_cents / 100).toFixed(2)}
                         </p>
                       </div>
                     )}
                     <div>
-                      <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
-                      <p className="text-var(--purple-ink) font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
+                      <p className="text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         ${(sub.amount_paid_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     {sub.payment_method && (
                       <div>
-                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
-                        <p className="text-var(--purple-ink)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
+                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {sub.payment_method}
                         </p>
                       </div>
                     )}
                     {sub.stripe_subscription_id && (
                       <div className="md:col-span-2">
-                        <label className="text-var(--purple-lavender) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
-                        <p className="text-var(--purple-ink) text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
+                        <p className="text-[var(--purple-ink)] text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {sub.stripe_subscription_id}
                         </p>
                       </div>
diff --git a/src/pages/admin/AdminValidations.js b/src/pages/admin/AdminValidations.js
index c234271..86ab5cb 100644
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -239,7 +239,7 @@ const AdminValidations = () => {
     const config = {
       pending_email: { label: 'Awaiting Email', className: 'bg-orange-100 text-orange-700' },
       pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-var(--green-light) text-white' },
+      pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
       payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
       rejected: { label: 'Rejected', className: 'bg-red-100 text-red-700' }
     };
@@ -279,44 +279,44 @@ const AdminValidations = () => {
     <>
       {/* Header */}
       <div className="mb-8">
-        <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+        <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Validation Queue
         </h1>
-        <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Review and validate pending membership applications.
         </p>
       </div>
 
       {/* Stats Card */}
-      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           <div>
-            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
-            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
-            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pending_email').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
-            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pending_validation').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
-            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pre_validated').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-var(--purple-lavender) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-            <p className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'payment_pending').length}
             </p>
           </div>
@@ -330,20 +330,20 @@ const AdminValidations = () => {
       </Card>
 
       {/* Filter Card */}
-      <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) mb-8">
+      <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid md:grid-cols-3 gap-4">
           <div className="relative md:col-span-2">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
             <Input
               placeholder="Search by name, email, or phone..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
             />
           </div>
 
           <Select value={statusFilter} onValueChange={setStatusFilter}>
-            <SelectTrigger className="h-14 rounded-xl border-2 border-var(--neutral-800)">
+            <SelectTrigger className="h-14 rounded-xl border-2 border-[var(--neutral-800)]">
               <SelectValue placeholder="Filter by status" />
             </SelectTrigger>
             <SelectContent>
@@ -361,16 +361,16 @@ const AdminValidations = () => {
       {/* Table */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <>
-          <Card className="bg-background rounded-2xl border border-var(--neutral-800) overflow-hidden">
+          <Card className="bg-background rounded-2xl border border-[var(--neutral-800)] overflow-hidden">
             <Table>
               <TableHeader>
                 <TableRow>
                   <TableHead
-                    className="cursor-pointer hover:bg-var(--neutral-800)/20"
+                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                     onClick={() => handleSort('first_name')}
                   >
                     Name {renderSortIcon('first_name')}
@@ -378,13 +378,13 @@ const AdminValidations = () => {
                   <TableHead>Email</TableHead>
                   <TableHead>Phone</TableHead>
                   <TableHead
-                    className="cursor-pointer hover:bg-var(--neutral-800)/20"
+                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                     onClick={() => handleSort('status')}
                   >
                     Status {renderSortIcon('status')}
                   </TableHead>
                   <TableHead
-                    className="cursor-pointer hover:bg-var(--neutral-800)/20"
+                    className="cursor-pointer hover:bg-[var(--neutral-800)]/20"
                     onClick={() => handleSort('created_at')}
                   >
                     Registered {renderSortIcon('created_at')}
@@ -415,7 +415,7 @@ const AdminValidations = () => {
                             onClick={() => handleReactivateUser(user)}
                             disabled={actionLoading === user.id}
                             size="sm"
-                            className="bg-var(--green-light) text-white hover:bg-var(--green-mint)"
+                            className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
                           >
                             {actionLoading === user.id ? 'Reactivating...' : 'Reactivate'}
                           </Button>
@@ -426,7 +426,7 @@ const AdminValidations = () => {
                                 onClick={() => handleBypassAndValidateRequest(user)}
                                 disabled={actionLoading === user.id}
                                 size="sm"
-                                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
+                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Bypass & Validate'}
                               </Button>
@@ -450,7 +450,7 @@ const AdminValidations = () => {
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
-                                className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-background"
+                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
                               >
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment
@@ -476,7 +476,7 @@ const AdminValidations = () => {
                                 onClick={() => handleValidateRequest(user)}
                                 disabled={actionLoading === user.id}
                                 size="sm"
-                                className="bg-var(--green-light) text-white hover:bg-var(--green-mint)"
+                                className="bg-[var(--green-light)] text-white hover:bg-[var(--green-mint)]"
                               >
                                 {actionLoading === user.id ? 'Validating...' : 'Validate'}
                               </Button>
@@ -507,7 +507,7 @@ const AdminValidations = () => {
           <div className="mt-8 flex flex-col md:flex-row justify-between items-center gap-4">
             {/* Page size selector */}
             <div className="flex items-center gap-2">
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
               <Select
                 value={itemsPerPage.toString()}
                 onValueChange={(val) => {
@@ -525,7 +525,7 @@ const AdminValidations = () => {
                   <SelectItem value="100">100</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 entries (showing {(currentPage - 1) * itemsPerPage + 1}-
                 {Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
               </p>
@@ -582,11 +582,11 @@ const AdminValidations = () => {
         </>
       ) : (
         <div className="text-center py-20">
-          <Clock className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-          <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Clock className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+          <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Pending Validations
           </h3>
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || statusFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'All applications have been reviewed!'}
diff --git a/src/pages/members/Bylaws.js b/src/pages/members/Bylaws.js
index cf2b1e2..acb6b08 100644
--- a/src/pages/members/Bylaws.js
+++ b/src/pages/members/Bylaws.js
@@ -54,7 +54,7 @@ export default function Bylaws() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading bylaws...
           </p>
         </div>
@@ -69,32 +69,32 @@ export default function Bylaws() {
       <div className="max-w-5xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             LOAF Bylaws
           </h1>
-          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Review the official governing bylaws and policies of the LOAF community.
           </p>
         </div>
 
         {/* Current Bylaws */}
         {currentBylaws ? (
-          <Card className="p-8 bg-background rounded-2xl border-2 border-var(--purple-lavender) mb-6">
+          <Card className="p-8 bg-background rounded-2xl border-2 border-[var(--purple-lavender)] mb-6">
             <div className="flex items-start gap-4 mb-6">
-              <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-4 rounded-xl">
+              <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-4 rounded-xl">
                 <Scale className="h-8 w-8 text-white" />
               </div>
               <div className="flex-1">
                 <div className="flex items-center gap-3 mb-2">
-                  <h2 className="text-2xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {currentBylaws.title}
                   </h2>
-                  <Badge className="bg-var(--green-light) text-white">
+                  <Badge className="bg-[var(--green-light)] text-white">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
                 </div>
-                <div className="flex items-center gap-4 text-var(--purple-lavender) mb-4">
+                <div className="flex items-center gap-4 text-[var(--purple-lavender)] mb-4">
                   <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Version: <strong>{currentBylaws.version}</strong>
                   </span>
@@ -106,7 +106,7 @@ export default function Bylaws() {
                 <Button
                   onClick={() => window.open(currentBylaws.document_url, '_blank')}
                   size="lg"
-                  className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
+                  className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
                 >
                   <ExternalLink className="h-5 w-5" />
                   View Current Bylaws
@@ -115,9 +115,9 @@ export default function Bylaws() {
             </div>
           </Card>
         ) : (
-          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800) mb-6">
-            <Scale className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)] mb-6">
+            <Scale className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+            <p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No current bylaws document available
             </p>
           </Card>
@@ -129,7 +129,7 @@ export default function Bylaws() {
             <Button
               onClick={() => setShowHistory(!showHistory)}
               variant="outline"
-              className="w-full border-var(--neutral-800) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center justify-center gap-2"
+              className="w-full border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full flex items-center justify-center gap-2"
             >
               <History className="h-4 w-4" />
               {showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
@@ -140,17 +140,17 @@ export default function Bylaws() {
         {/* Version History */}
         {showHistory && history.length > 1 && (
           <div className="space-y-4">
-            <h3 className="text-xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Previous Versions
             </h3>
             {history.filter(b => !b.is_current).map(bylaws => (
-              <Card key={bylaws.id} className="p-6 bg-var(--lavender-600) rounded-xl border border-var(--neutral-800)">
+              <Card key={bylaws.id} className="p-6 bg-[var(--lavender-600)] rounded-xl border border-[var(--neutral-800)]">
                 <div className="flex items-center justify-between">
                   <div>
-                    <h4 className="text-lg font-semibold text-var(--purple-ink) mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h4 className="text-lg font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {bylaws.title}
                     </h4>
-                    <div className="flex items-center gap-3 text-sm text-var(--purple-lavender)">
+                    <div className="flex items-center gap-3 text-sm text-[var(--purple-lavender)]">
                       <span>Version {bylaws.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylaws.effective_date)}</span>
@@ -160,7 +160,7 @@ export default function Bylaws() {
                     onClick={() => window.open(bylaws.document_url, '_blank')}
                     variant="outline"
                     size="sm"
-                    className="border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300) rounded-full flex items-center gap-2"
+                    className="border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full flex items-center gap-2"
                   >
                     <ExternalLink className="h-4 w-4" />
                     View
@@ -172,14 +172,14 @@ export default function Bylaws() {
         )}
 
         {/* Information Card */}
-        <Card className="mt-8 p-6 bg-var(--lavender-600) border border-var(--neutral-800)">
+        <Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
           <div className="flex items-start gap-3">
-            <Scale className="h-5 w-5 text-var(--purple-lavender) mt-1" />
+            <Scale className="h-5 w-5 text-[var(--purple-lavender)] mt-1" />
             <div>
-              <h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About LOAF Bylaws
               </h4>
-              <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The bylaws serve as the governing document for LOAF, outlining the organization's structure,
                 membership requirements, officer responsibilities, and operational procedures. All members are
                 encouraged to familiarize themselves with these guidelines.
diff --git a/src/pages/members/EventGallery.js b/src/pages/members/EventGallery.js
index b82ecce..26bbce1 100644
--- a/src/pages/members/EventGallery.js
+++ b/src/pages/members/EventGallery.js
@@ -107,11 +107,11 @@ const EventGallery = () => {
 
   const EventCard = ({ event }) => (
     <Card
-      className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
+      className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer h-full"
       onClick={() => handleEventClick(event)}
     >
       {/* Thumbnail */}
-      <div className="relative h-48 mb-4 rounded-xl overflow-hidden bg-var(--lavender-500)">
+      <div className="relative h-48 mb-4 rounded-xl overflow-hidden bg-[var(--lavender-500)]">
         {event.thumbnail_url ? (
           <img
             src={event.thumbnail_url}
@@ -120,35 +120,35 @@ const EventGallery = () => {
           />
         ) : (
           <div className="w-full h-full flex items-center justify-center">
-            <ImageIcon className="h-16 w-16 text-var(--neutral-800)" />
+            <ImageIcon className="h-16 w-16 text-[var(--neutral-800)]" />
           </div>
         )}
         <div className="absolute top-3 right-3">
-          <Badge className="bg-var(--purple-lavender) text-white px-3 py-1 rounded-full">
+          <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1 rounded-full">
             {event.gallery_count} {event.gallery_count === 1 ? 'photo' : 'photos'}
           </Badge>
         </div>
       </div>
 
       {/* Event Info */}
-      <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
         {event.title}
       </h3>
 
       {event.description && (
-        <p className="text-var(--purple-lavender) mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {event.description}
         </p>
       )}
 
       <div className="space-y-2 text-sm">
-        <div className="flex items-center gap-2 text-var(--purple-lavender)">
+        <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
           <Calendar className="h-4 w-4" />
           <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {moment(event.start_at).format('MMMM D, YYYY')}
           </span>
         </div>
-        <div className="flex items-center gap-2 text-var(--purple-lavender)">
+        <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
           <MapPin className="h-4 w-4" />
           <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
         </div>
@@ -165,10 +165,10 @@ const EventGallery = () => {
         <div className="max-w-7xl mx-auto px-6 py-12">
           {/* Header */}
           <div className="mb-8">
-            <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Gallery
             </h1>
-            <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Browse photos from past LOAF events.
             </p>
           </div>
@@ -176,7 +176,7 @@ const EventGallery = () => {
           {/* Events Grid */}
           {loading ? (
             <div className="text-center py-20">
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
             </div>
           ) : events.length > 0 ? (
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -186,11 +186,11 @@ const EventGallery = () => {
             </div>
           ) : (
             <div className="text-center py-20">
-              <ImageIcon className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-              <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <ImageIcon className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+              <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Event Galleries Yet
               </h3>
-              <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Event photos will appear here once admins upload them.
               </p>
             </div>
@@ -210,7 +210,7 @@ const EventGallery = () => {
         <Button
           onClick={handleBackToEvents}
           variant="ghost"
-          className="mb-6 text-var(--purple-lavender) hover:text-var(--purple-ink) hover:bg-var(--lavender-500)"
+          className="mb-6 text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-500)]"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
@@ -219,10 +219,10 @@ const EventGallery = () => {
 
         {/* Event Header */}
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             {selectedEvent.title}
           </h1>
-          <div className="flex flex-wrap gap-4 text-var(--purple-lavender)">
+          <div className="flex flex-wrap gap-4 text-[var(--purple-lavender)]">
             <div className="flex items-center gap-2">
               <Calendar className="h-5 w-5" />
               <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -233,7 +233,7 @@ const EventGallery = () => {
               <MapPin className="h-5 w-5" />
               <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
             </div>
-            <Badge className="bg-var(--purple-lavender) text-white px-3 py-1 rounded-full">
+            <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1 rounded-full">
               {selectedEvent.gallery_count} {selectedEvent.gallery_count === 1 ? 'photo' : 'photos'}
             </Badge>
           </div>
@@ -242,7 +242,7 @@ const EventGallery = () => {
         {/* Gallery Grid */}
         {galleryLoading ? (
           <div className="text-center py-20">
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
           </div>
         ) : galleryImages.length > 0 ? (
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@@ -272,11 +272,11 @@ const EventGallery = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <ImageIcon className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <ImageIcon className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Photos Yet
             </h3>
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Photos from this event will appear here once uploaded.
             </p>
           </div>
diff --git a/src/pages/members/Financials.js b/src/pages/members/Financials.js
index 903a77f..a5539dc 100644
--- a/src/pages/members/Financials.js
+++ b/src/pages/members/Financials.js
@@ -32,7 +32,7 @@ export default function Financials() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading financial reports...
           </p>
         </div>
@@ -47,29 +47,29 @@ export default function Financials() {
       <div className="max-w-5xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports
           </h1>
-          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Access annual financial reports and stay informed about LOAF's fiscal responsibility.
           </p>
         </div>
 
         {/* Reports List */}
         {reports.length === 0 ? (
-          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800)">
-            <TrendingUp className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
+            <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+            <p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No financial reports available yet
             </p>
           </Card>
         ) : (
           <div className="space-y-6">
             {reports.map(report => (
-              <Card key={report.id} className="p-8 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-shadow">
+              <Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                 <div className="flex items-center gap-6">
                   {/* Year Badge */}
-                  <div className="bg-gradient-to-br from-var(--purple-lavender) to-var(--purple-ink) p-6 rounded-xl text-white min-w-[120px] text-center">
+                  <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
                     <DollarSign className="h-8 w-8 mx-auto mb-2" />
                     <div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {report.year}
@@ -79,17 +79,17 @@ export default function Financials() {
 
                   {/* Report Details */}
                   <div className="flex-1">
-                    <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {report.title}
                     </h3>
                     <div className="flex items-center gap-2 mb-4">
-                      <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
+                      <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
                         {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                       </Badge>
                     </div>
                     <Button
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center gap-2"
+                      className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
                     >
                       <ExternalLink className="h-4 w-4" />
                       View Report
@@ -103,14 +103,14 @@ export default function Financials() {
 
         {/* Transparency Note */}
         {reports.length > 0 && (
-          <Card className="mt-8 p-6 bg-var(--lavender-600) border border-var(--neutral-800)">
+          <Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
             <div className="flex items-start gap-3">
-              <TrendingUp className="h-5 w-5 text-var(--purple-lavender) mt-1" />
+              <TrendingUp className="h-5 w-5 text-[var(--purple-lavender)] mt-1" />
               <div>
-                <h4 className="font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Transparency & Accountability
                 </h4>
-                <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   LOAF is committed to financial transparency. These reports provide detailed information about our
                   revenue, expenses, and how member contributions support our community programs and operations.
                 </p>
diff --git a/src/pages/members/MemberCalendar.js b/src/pages/members/MemberCalendar.js
index 6bb40a9..43be6b7 100644
--- a/src/pages/members/MemberCalendar.js
+++ b/src/pages/members/MemberCalendar.js
@@ -127,7 +127,7 @@ export default function MemberCalendar() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading calendar...
           </p>
         </div>
@@ -141,10 +141,10 @@ export default function MemberCalendar() {
 
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Calendar
           </h1>
-          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             View and manage your event RSVPs. Click on any event to see details and update your RSVP.
           </p>
 
@@ -156,26 +156,26 @@ export default function MemberCalendar() {
 
             <div className="flex gap-4 ml-auto">
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-var(--green-light)"></div>
-                <span className="text-sm text-var(--purple-lavender)">Going</span>
+                <div className="w-4 h-4 rounded bg-[var(--green-light)]"></div>
+                <span className="text-sm text-[var(--purple-lavender)]">Going</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-var(--orange-400)"></div>
-                <span className="text-sm text-var(--purple-lavender)">Maybe</span>
+                <div className="w-4 h-4 rounded bg-[var(--orange-400)]"></div>
+                <span className="text-sm text-[var(--purple-lavender)]">Maybe</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-var(--slate-400]"></div>
-                <span className="text-sm text-var(--purple-lavender)">Not Going</span>
+                <div className="w-4 h-4 rounded bg-[var(--slate-400)]"></div>
+                <span className="text-sm text-[var(--purple-lavender)]">Not Going</span>
               </div>
               <div className="flex items-center gap-2">
-                <div className="w-4 h-4 rounded bg-var(--neutral-800)"></div>
-                <span className="text-sm text-var(--purple-lavender)">No RSVP</span>
+                <div className="w-4 h-4 rounded bg-[var(--neutral-800)]"></div>
+                <span className="text-sm text-[var(--purple-lavender)]">No RSVP</span>
               </div>
             </div>
           </div>
         </div>
 
-        <Card className="p-6 bg-background rounded-2xl border border-var(--neutral-800) shadow-lg">
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <Calendar
             localizer={localizer}
             events={calendarEvents}
@@ -200,13 +200,13 @@ export default function MemberCalendar() {
               <>
                 <DialogHeader>
                   <div className="flex items-center gap-3 mb-2">
-                    <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
-                      <CalendarIcon className="h-6 w-6 text-var(--purple-lavender)" />
+                    <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+                      <CalendarIcon className="h-6 w-6 text-[var(--purple-lavender)]" />
                     </div>
                     {selectedEvent.user_rsvp_status && (
                       <Badge
                         className={`px-3 py-1 rounded-full text-sm ${selectedEvent.user_rsvp_status === 'yes'
-                          ? 'bg-var(--green-light) text-white'
+                          ? 'bg-[var(--green-light)] text-white'
                           : selectedEvent.user_rsvp_status === 'no'
                             ? 'bg-gray-400 text-white'
                             : 'bg-orange-400 text-white'
@@ -218,14 +218,14 @@ export default function MemberCalendar() {
                       </Badge>
                     )}
                   </div>
-                  <DialogTitle className="text-2xl text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {selectedEvent.title}
                   </DialogTitle>
                 </DialogHeader>
 
                 <div className="space-y-4 mt-4">
                   <div className="space-y-3">
-                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                       <CalendarIcon className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(selectedEvent.start_at).toLocaleDateString('en-US', {
@@ -236,17 +236,17 @@ export default function MemberCalendar() {
                         })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                       <Clock className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(selectedEvent.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(selectedEvent.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                       <MapPin className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
                     </div>
-                    <div className="flex items-center gap-3 text-var(--purple-lavender)">
+                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
                       <Users className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {selectedEvent.rsvp_count || 0} {selectedEvent.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -256,18 +256,18 @@ export default function MemberCalendar() {
                   </div>
 
                   {selectedEvent.description && (
-                    <div className="pt-4 border-t border-var(--neutral-800)">
-                      <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <div className="pt-4 border-t border-[var(--neutral-800)]">
+                      <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                         About This Event
                       </h3>
-                      <p className="text-var(--purple-lavender) leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {selectedEvent.description}
                       </p>
                     </div>
                   )}
 
-                  <div className="pt-4 border-t border-var(--neutral-800)">
-                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <div className="pt-4 border-t border-[var(--neutral-800)]">
+                    <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Your RSVP
                     </h3>
                     <div className="flex gap-3 flex-wrap">
@@ -276,8 +276,8 @@ export default function MemberCalendar() {
                         disabled={rsvpLoading}
                         size="sm"
                         className={`rounded-full px-6 flex items-center gap-2 ${selectedEvent.user_rsvp_status === 'yes'
-                          ? 'bg-var(--green-light) text-white hover:bg-var(--green-muted)'
-                          : 'bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--neutral-400:)'
+                          ? 'bg-[var(--green-light)] text-white hover:bg-[var(--green-muted)]'
+                          : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--neutral-400:)]'
                           }`}
                       >
                         <Check className="h-4 w-4" />
@@ -290,7 +290,7 @@ export default function MemberCalendar() {
                         variant="outline"
                         className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'maybe'
                           ? 'border-orange-400 bg-orange-100 text-orange-700'
-                          : 'border-var(--purple-lavender) text-var(--purple-lavender) hover:bg-var(--lavender-300)'
+                          : 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
                           }`}
                       >
                         <HelpCircle className="h-4 w-4" />
@@ -312,8 +312,8 @@ export default function MemberCalendar() {
                     </div>
                   </div>
 
-                  <div className="pt-4 border-t border-var(--neutral-800)">
-                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <div className="pt-4 border-t border-[var(--neutral-800)]">
+                    <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Add to Your Calendar
                     </h3>
                     <AddToCalendarButton
diff --git a/src/pages/members/MemberProfile.js b/src/pages/members/MemberProfile.js
index 6de7e42..f21c450 100644
--- a/src/pages/members/MemberProfile.js
+++ b/src/pages/members/MemberProfile.js
@@ -195,7 +195,7 @@ const MemberProfile = () => {
         <Navbar />
         <div className="max-w-4xl mx-auto px-6 py-12">
           <div className="text-center py-20">
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
           </div>
         </div>
       </div>
@@ -209,18 +209,18 @@ const MemberProfile = () => {
       <div className="max-w-4xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl md:text-5xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Member Profile
           </h1>
-          <p className="text-lg text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Enhance your profile with a photo and social media links.
           </p>
         </div>
 
         <form onSubmit={handleSubmit} className="space-y-8">
           {/* Profile Photo Section */}
-          <Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background border-[var(--neutral-800)] rounded-2xl">
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Profile Photo
             </h2>
 
@@ -231,7 +231,7 @@ const MemberProfile = () => {
                     <img
                       src={previewImage}
                       alt="Profile"
-                      className="w-40 h-40 rounded-full object-cover border-4 border-var(--neutral-800)"
+                      className="w-40 h-40 rounded-full object-cover border-4 border-[var(--neutral-800)]"
                     />
                     <Button
                       type="button"
@@ -242,8 +242,8 @@ const MemberProfile = () => {
                     </Button>
                   </div>
                 ) : (
-                  <div className="w-40 h-40 rounded-full bg-var(--lavender-500) border-4 border-var(--neutral-800) flex items-center justify-center">
-                    <User className="h-20 w-20 text-var(--neutral-800)" />
+                  <div className="w-40 h-40 rounded-full bg-[var(--lavender-500)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
+                    <User className="h-20 w-20 text-[var(--neutral-800)]" />
                   </div>
                 )}
               </div>
@@ -260,7 +260,7 @@ const MemberProfile = () => {
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                   disabled={uploading}
-                  className="bg-var(--purple-lavender) hover:bg-var(--purple-ink) text-white rounded-xl px-6 py-3 flex items-center gap-2"
+                  className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl px-6 py-3 flex items-center gap-2"
                   style={{ fontFamily: "'Inter', sans-serif" }}
                 >
                   {uploading ? (
@@ -275,7 +275,7 @@ const MemberProfile = () => {
                     </>
                   )}
                 </Button>
-                <p className="text-sm text-var(--purple-lavender) mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-[var(--purple-lavender)] mt-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   JPG, PNG, WebP, or GIF. Max 50MB.
                 </p>
               </div>
@@ -283,15 +283,15 @@ const MemberProfile = () => {
           </Card>
 
           {/* Social Media Section */}
-          <Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background border-[var(--neutral-800)] rounded-2xl">
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Social Media Links
             </h2>
 
             <div className="space-y-6">
               <div>
-                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Facebook className="h-4 w-4 text-var(--blue-facebook)" />
+                <Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Facebook className="h-4 w-4 text-[var(--blue-facebook)]" />
                   Facebook Profile URL
                 </Label>
                 <Input
@@ -300,14 +300,14 @@ const MemberProfile = () => {
                   value={formData.social_media_facebook}
                   onChange={handleInputChange}
                   placeholder="https://facebook.com/yourprofile"
-                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                  className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
 
               <div>
-                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Instagram className="h-4 w-4 text-var(--red-instagram)" />
+                <Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Instagram className="h-4 w-4 text-[var(--red-instagram)]" />
                   Instagram Profile URL
                 </Label>
                 <Input
@@ -316,14 +316,14 @@ const MemberProfile = () => {
                   value={formData.social_media_instagram}
                   onChange={handleInputChange}
                   placeholder="https://instagram.com/yourprofile"
-                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                  className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
 
               <div>
-                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Twitter className="h-4 w-4 text-var(--blue-twitter)" />
+                <Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Twitter className="h-4 w-4 text-[var(--blue-twitter)]" />
                   Twitter/X Profile URL
                 </Label>
                 <Input
@@ -332,14 +332,14 @@ const MemberProfile = () => {
                   value={formData.social_media_twitter}
                   onChange={handleInputChange}
                   placeholder="https://twitter.com/yourprofile"
-                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                  className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
 
               <div>
-                <Label className="flex items-center gap-2 text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  <Linkedin className="h-4 w-4 text-var(--blue-linkedin)" />
+                <Label className="flex items-center gap-2 text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Linkedin className="h-4 w-4 text-[var(--blue-linkedin)]" />
                   LinkedIn Profile URL
                 </Label>
                 <Input
@@ -348,7 +348,7 @@ const MemberProfile = () => {
                   value={formData.social_media_linkedin}
                   onChange={handleInputChange}
                   placeholder="https://linkedin.com/in/yourprofile"
-                  className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                  className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                   style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                 />
               </div>
@@ -356,33 +356,33 @@ const MemberProfile = () => {
           </Card>
 
           {/* Directory Settings Section */}
-          <Card className="p-8 bg-background border-var(--neutral-800) rounded-2xl">
-            <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <Card className="p-8 bg-background border-[var(--neutral-800)] rounded-2xl">
+            <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
               Directory Settings
             </h2>
 
             <div className="space-y-6">
-              <div className="flex items-center justify-between p-4 bg-var(--lavender-500) rounded-xl">
+              <div className="flex items-center justify-between p-4 bg-[var(--lavender-500)] rounded-xl">
                 <div className="flex-1">
-                  <Label className="text-var(--purple-ink) font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                    <Eye className="h-4 w-4 text-var(--purple-lavender)" />
+                  <Label className="text-[var(--purple-ink)] font-medium flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Eye className="h-4 w-4 text-[var(--purple-lavender)]" />
                     Show in Members Directory
                   </Label>
-                  <p className="text-sm text-var(--purple-lavender) mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-[var(--purple-lavender)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Allow other members to see your profile in the directory
                   </p>
                 </div>
                 <Switch
                   checked={formData.show_in_directory}
                   onCheckedChange={handleSwitchChange}
-                  className="data-[state=checked]:bg-var(--purple-lavender)"
+                  className="data-[state=checked]:bg-[var(--purple-lavender)]"
                 />
               </div>
 
               {formData.show_in_directory && (
                 <>
                   <div>
-                    <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Directory Email (visible to members)
                     </Label>
                     <Input
@@ -391,13 +391,13 @@ const MemberProfile = () => {
                       value={formData.directory_email}
                       onChange={handleInputChange}
                       placeholder="public.email@example.com"
-                      className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                      className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     />
                   </div>
 
                   <div>
-                    <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Bio (visible to members)
                     </Label>
                     <Textarea
@@ -406,14 +406,14 @@ const MemberProfile = () => {
                       onChange={handleInputChange}
                       placeholder="Tell other members about yourself..."
                       rows={4}
-                      className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                      className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     />
                   </div>
 
                   <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                     <div>
-                      <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Directory Address (optional)
                       </Label>
                       <Input
@@ -422,13 +422,13 @@ const MemberProfile = () => {
                         value={formData.directory_address}
                         onChange={handleInputChange}
                         placeholder="123 Main St, City, State"
-                        className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                        className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                         style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       />
                     </div>
 
                     <div>
-                      <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Directory Phone (optional)
                       </Label>
                       <Input
@@ -437,14 +437,14 @@ const MemberProfile = () => {
                         value={formData.directory_phone}
                         onChange={handleInputChange}
                         placeholder="(555) 123-4567"
-                        className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                        className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                         style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                       />
                     </div>
                   </div>
 
                   <div>
-                    <Label className="text-var(--purple-ink) mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <Label className="text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Partner Name (if applicable)
                     </Label>
                     <Input
@@ -453,7 +453,7 @@ const MemberProfile = () => {
                       value={formData.directory_partner_name}
                       onChange={handleInputChange}
                       placeholder="Partner's name"
-                      className="border-var(--neutral-800) rounded-xl focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                      className="border-[var(--neutral-800)] rounded-xl focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                       style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                     />
                   </div>
@@ -467,7 +467,7 @@ const MemberProfile = () => {
             <Button
               type="submit"
               disabled={saving}
-              className="bg-var(--orange-light) hover:bg-var(--orange-apricot) text-white rounded-xl px-8 py-3 text-lg"
+              className="bg-[var(--orange-light)] hover:bg-[var(--orange-apricot)] text-white rounded-xl px-8 py-3 text-lg"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               {saving ? (
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index 4a220c4..255c896 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -114,23 +114,23 @@ const MembersDirectory = () => {
   const Border = ({ yaxis = false }) => {
     return (
       yaxis ?
-        <div className=' border-2 w-full border-var(--purple-lavender) my-24' />
-        : <div className=' border-2 w-full border-var(--purple-lavender) mb-24' />
+        <div className=' border-2 w-full border-[var(--purple-lavender)] my-24' />
+        : <div className=' border-2 w-full border-[var(--purple-lavender)] mb-24' />
     )
   }
   const MemberCard = ({ member }) => (
-    <Card className="p-6 bg-background rounded-3xl border border-var(--neutral-800) hover:shadow-lg transition-all h-full">
+    <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
       {/* Profile Photo */}
       <div className="flex justify-center mb-4">
         {member.profile_photo_url ? (
           <img
             src={member.profile_photo_url}
             alt={`${member.first_name} ${member.last_name}`}
-            className="w-32 h-32 rounded-full object-cover border-4 border-var(--neutral-800)"
+            className="w-32 h-32 rounded-full object-cover border-4 border-[var(--neutral-800)]"
           />
         ) : (
-          <div className="w-32 h-32 rounded-full bg-var(--neutral-800) border-4 border-var(--neutral-800) flex items-center justify-center">
-            <span className="text-4xl font-semibold text-var(--purple-lavender)" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
+            <span className="text-4xl font-semibold text-[var(--purple-lavender)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {getInitials(member.first_name, member.last_name)}
             </span>
           </div>
@@ -138,15 +138,15 @@ const MembersDirectory = () => {
       </div>
 
       {/* Name */}
-      <h3 className="text-2xl font-semibold text-var(--purple-ink) text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+      <h3 className="text-2xl font-semibold text-[var(--purple-ink)] text-center mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
         {member.first_name} {member.last_name}
       </h3>
 
       {/* Partner Name */}
       {member.directory_partner_name && (
         <div className="flex items-center justify-center gap-2 mb-4">
-          <Heart className="h-4 w-4 text-var(--orange-light)" />
-          <span className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Heart className="h-4 w-4 text-[var(--orange-light)]" />
+          <span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Partner: {member.directory_partner_name}
           </span>
         </div>
@@ -154,7 +154,7 @@ const MembersDirectory = () => {
 
       {/* Bio */}
       {member.directory_bio && (
-        <p className="text-var(--purple-lavender) text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-[var(--purple-lavender)] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {member.directory_bio}
         </p>
       )}
@@ -162,8 +162,8 @@ const MembersDirectory = () => {
       {/* Member Since */}
       {member.created_at && (
         <div className="flex items-center justify-center gap-2 mb-4">
-          <Calendar className="h-4 w-4 text-var(--purple-lavender)" />
-          <span className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Calendar className="h-4 w-4 text-[var(--purple-lavender)]" />
+          <span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Member since {new Date(member.created_at).toLocaleDateString('en-US', {
               month: 'long',
               year: 'numeric'
@@ -176,10 +176,10 @@ const MembersDirectory = () => {
       <div className="space-y-3 mb-4">
         {member.directory_email && (
           <div className="flex items-center gap-2 text-sm">
-            <Mail className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
+            <Mail className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
             <a
               href={`mailto:${member.directory_email}`}
-              className="text-var(--purple-lavender) hover:text-var(--purple-ink) truncate"
+              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] truncate"
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               {member.directory_email}
@@ -189,10 +189,10 @@ const MembersDirectory = () => {
 
         {member.directory_phone && (
           <div className="flex items-center gap-2 text-sm">
-            <Phone className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0" />
+            <Phone className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
             <a
               href={`tel:${member.directory_phone}`}
-              className="text-var(--purple-lavender) hover:text-var(--purple-ink)"
+              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)]"
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               {member.directory_phone}
@@ -202,8 +202,8 @@ const MembersDirectory = () => {
 
         {member.directory_address && (
           <div className="flex items-start gap-2 text-sm">
-            <MapPin className="h-4 w-4 text-var(--purple-lavender) flex-shrink-0 mt-0.5" />
-            <span className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <MapPin className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
+            <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {member.directory_address}
             </span>
           </div>
@@ -212,17 +212,17 @@ const MembersDirectory = () => {
 
       {/* Social Media Links */}
       {(member.social_media_facebook || member.social_media_instagram || member.social_media_twitter || member.social_media_linkedin) && (
-        <div className="pt-4 border-t border-var(--neutral-800)">
+        <div className="pt-4 border-t border-[var(--neutral-800)]">
           <div className="flex justify-center gap-3">
             {member.social_media_facebook && (
               <a
                 href={getSocialMediaLink(member.social_media_facebook)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                 title="Facebook"
               >
-                <Facebook className="h-5 w-5 text-var(--blue-facebook)" />
+                <Facebook className="h-5 w-5 text-[var(--blue-facebook)]" />
               </a>
             )}
 
@@ -231,10 +231,10 @@ const MembersDirectory = () => {
                 href={getSocialMediaLink(member.social_media_instagram)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                 title="Instagram"
               >
-                <Instagram className="h-5 w-5 text-var(--red-instagram)" />
+                <Instagram className="h-5 w-5 text-[var(--red-instagram)]" />
               </a>
             )}
 
@@ -243,10 +243,10 @@ const MembersDirectory = () => {
                 href={getSocialMediaLink(member.social_media_twitter)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                 title="Twitter/X"
               >
-                <Twitter className="h-5 w-5 text-var(--blue-twitter)" />
+                <Twitter className="h-5 w-5 text-[var(--blue-twitter)]" />
               </a>
             )}
 
@@ -255,10 +255,10 @@ const MembersDirectory = () => {
                 href={getSocialMediaLink(member.social_media_linkedin)}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="p-2 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                className="p-2 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                 title="LinkedIn"
               >
-                <Linkedin className="h-5 w-5 text-var(--blue-linkedin)" />
+                <Linkedin className="h-5 w-5 text-[var(--blue-linkedin)]" />
               </a>
             )}
           </div>
@@ -266,10 +266,10 @@ const MembersDirectory = () => {
       )}
 
       {/* View Profile Button */}
-      <div className="pt-4 mt-4 border-t border-var(--neutral-800)">
+      <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
         <Button
           onClick={() => handleViewProfile(member.id)}
-          className="w-full bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full py-5"
+          className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full py-5"
         >
           <UserCircle className="h-4 w-4 mr-2" />
           View Full Profile
@@ -279,7 +279,7 @@ const MembersDirectory = () => {
   );
 
   return (
-    <div className="min-h-screen bg-gradient-to-bl from-var(--neutral-100:) to-var(--neutral-800)">
+    <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
       <Navbar />
 
       <div className="max-w-7xl mx-auto py-12">
@@ -289,29 +289,29 @@ const MembersDirectory = () => {
 
           {/* Header */}
           <div className="m-8 mt-14 flex flex-col sm:flex-row justify-between items-center ">
-            <h1 className="text-4xl md:text-5xl font-bold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
+            <h1 className="text-4xl md:text-5xl font-bold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Poppins', sans-serif" }}>
               LOAF Members
             </h1>
             <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-var(--purple-lavender) font-medium'>{totalMembers}</span>
+              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[var(--purple-lavender)] font-medium'>{totalMembers}</span>
             </p>
           </div>
 
           {/* Search Bar */}
           <div className="mb-24 mx-10">
             <div className="relative w-full  ">
-              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-var(--purple-lavender)" />
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
               <Input
                 type="text"
                 placeholder="Search by name or bio..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-var(--purple-lavender) focus:ring-var(--purple-lavender)"
+                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               />
             </div>
             {searchQuery && (
-              <p className="mt-3 text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="mt-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
               </p>
             )}
@@ -325,7 +325,7 @@ const MembersDirectory = () => {
         {/* Members Grid */}
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
           </div>
         ) : filteredMembers.length > 0 ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -335,11 +335,11 @@ const MembersDirectory = () => {
           </div>
         ) : (
           <div className="text-center py-20">
-            <User className="h-20 w-20 text-var(--neutral-800) mx-auto mb-6" />
-            <h3 className="text-2xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <User className="h-20 w-20 text-[var(--neutral-800)] mx-auto mb-6" />
+            <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               {searchQuery ? 'No Members Found' : 'No Members in Directory'}
             </h3>
-            <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {searchQuery
                 ? 'Try adjusting your search query.'
                 : 'Members who opt in to the directory will appear here.'}
@@ -354,18 +354,18 @@ const MembersDirectory = () => {
 
         {/* Info Card */}
         {!loading && members.length > 0 && (
-          <Card className="mt-12 p-6 bg-var(--lavender-500) border-var(--neutral-800)">
+          <Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
             <div className="flex items-start gap-4">
-              <div className="bg-var(--neutral-800)/20 p-3 rounded-lg">
-                <User className="h-6 w-6 text-var(--purple-lavender)" />
+              <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+                <User className="h-6 w-6 text-[var(--purple-lavender)]" />
               </div>
               <div>
-                <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Want to appear in the directory?
                 </h3>
-                <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
-                  <a href="/members/profile" className="text-var(--orange-light) hover:underline font-medium">
+                  <a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
                     Edit your profile →
                   </a>
                 </p>
@@ -381,13 +381,13 @@ const MembersDirectory = () => {
           {selectedMember && (
             <>
               <DialogHeader>
-                <DialogTitle className="text-3xl font-semibold text-var(--purple-ink)" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <DialogTitle className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {selectedMember.first_name} {selectedMember.last_name}
                 </DialogTitle>
                 {selectedMember.directory_partner_name && (
                   <DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                    <Heart className="h-5 w-5 text-var(--orange-light)" />
-                    <span className="text-var(--purple-lavender)">Partner: {selectedMember.directory_partner_name}</span>
+                    <Heart className="h-5 w-5 text-[var(--orange-light)]" />
+                    <span className="text-[var(--purple-lavender)]">Partner: {selectedMember.directory_partner_name}</span>
                   </DialogDescription>
                 )}
               </DialogHeader>
@@ -396,10 +396,10 @@ const MembersDirectory = () => {
                 {/* Bio */}
                 {selectedMember.directory_bio && (
                   <div>
-                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       About
                     </h3>
-                    <p className="text-var(--purple-lavender) leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-[var(--purple-lavender)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {selectedMember.directory_bio}
                     </p>
                   </div>
@@ -407,20 +407,20 @@ const MembersDirectory = () => {
 
                 {/* Contact Information */}
                 <div>
-                  <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                     Contact Information
                   </h3>
                   <div className="space-y-3">
                     {selectedMember.directory_email && (
                       <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
-                          <Mail className="h-5 w-5 text-var(--purple-lavender)" />
+                        <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
+                          <Mail className="h-5 w-5 text-[var(--purple-lavender)]" />
                         </div>
                         <div>
-                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
                           <a
                             href={`mailto:${selectedMember.directory_email}`}
-                            className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
+                            className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
                             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                           >
                             {selectedMember.directory_email}
@@ -431,14 +431,14 @@ const MembersDirectory = () => {
 
                     {selectedMember.directory_phone && (
                       <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
-                          <Phone className="h-5 w-5 text-var(--purple-lavender)" />
+                        <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
+                          <Phone className="h-5 w-5 text-[var(--purple-lavender)]" />
                         </div>
                         <div>
-                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
+                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
                           <a
                             href={`tel:${selectedMember.directory_phone}`}
-                            className="text-var(--purple-ink) hover:text-var(--purple-lavender) font-medium"
+                            className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
                             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                           >
                             {selectedMember.directory_phone}
@@ -449,12 +449,12 @@ const MembersDirectory = () => {
 
                     {selectedMember.directory_address && (
                       <div className="flex items-start gap-3">
-                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
-                          <MapPin className="h-5 w-5 text-var(--purple-lavender)" />
+                        <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
+                          <MapPin className="h-5 w-5 text-[var(--purple-lavender)]" />
                         </div>
                         <div>
-                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
-                          <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
+                          <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {selectedMember.directory_address}
                           </p>
                         </div>
@@ -463,12 +463,12 @@ const MembersDirectory = () => {
 
                     {selectedMember.directory_dob && (
                       <div className="flex items-center gap-3">
-                        <div className="p-2 rounded-lg bg-var(--lavender-500)">
-                          <Heart className="h-5 w-5 text-var(--orange-light)" />
+                        <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
+                          <Heart className="h-5 w-5 text-[var(--orange-light)]" />
                         </div>
                         <div>
-                          <p className="text-xs text-var(--purple-lavender) mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
-                          <p className="text-var(--purple-ink) font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
+                          <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {formatDate(selectedMember.directory_dob)}
                           </p>
                         </div>
@@ -480,14 +480,14 @@ const MembersDirectory = () => {
                 {/* Volunteer Interests */}
                 {selectedMember.volunteer_interests && selectedMember.volunteer_interests.length > 0 && (
                   <div>
-                    <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Volunteer Interests
                     </h3>
                     <div className="flex flex-wrap gap-2">
                       {selectedMember.volunteer_interests.map((interest, index) => (
                         <Badge
                           key={index}
-                          className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
+                          className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
                         >
                           {interest}
                         </Badge>
@@ -500,7 +500,7 @@ const MembersDirectory = () => {
                 {(selectedMember.social_media_facebook || selectedMember.social_media_instagram ||
                   selectedMember.social_media_twitter || selectedMember.social_media_linkedin) && (
                     <div>
-                      <h3 className="text-lg font-semibold text-var(--purple-ink) mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
                         Connect on Social Media
                       </h3>
                       <div className="flex gap-3">
@@ -509,10 +509,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_facebook)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                            className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                             title="Facebook"
                           >
-                            <Facebook className="h-6 w-6 text-var(--blue-facebook)" />
+                            <Facebook className="h-6 w-6 text-[var(--blue-facebook)]" />
                           </a>
                         )}
 
@@ -521,10 +521,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_instagram)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                            className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                             title="Instagram"
                           >
-                            <Instagram className="h-6 w-6 text-var(--red-instagram)" />
+                            <Instagram className="h-6 w-6 text-[var(--red-instagram)]" />
                           </a>
                         )}
 
@@ -533,10 +533,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_twitter)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                            className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                             title="Twitter/X"
                           >
-                            <Twitter className="h-6 w-6 text-var(--blue-twitter)" />
+                            <Twitter className="h-6 w-6 text-[var(--blue-twitter)]" />
                           </a>
                         )}
 
@@ -545,10 +545,10 @@ const MembersDirectory = () => {
                             href={getSocialMediaLink(selectedMember.social_media_linkedin)}
                             target="_blank"
                             rel="noopener noreferrer"
-                            className="p-3 rounded-lg bg-var(--lavender-500) hover:bg-var(--neutral-800) transition-colors"
+                            className="p-3 rounded-lg bg-[var(--lavender-500)] hover:bg-[var(--neutral-800)] transition-colors"
                             title="LinkedIn"
                           >
-                            <Linkedin className="h-6 w-6 text-var(--blue-linkedin)" />
+                            <Linkedin className="h-6 w-6 text-[var(--blue-linkedin)]" />
                           </a>
                         )}
                       </div>
@@ -565,21 +565,21 @@ const MembersDirectory = () => {
       {/* Pagination */}
       {!loading && filteredMembers.length > 0 && (
         <div className="mt-10 flex flex-col items-center gap-4 pb-12">
-          <p className="text-sm text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
           </p>
           <div className="flex flex-wrap items-center justify-center gap-2">
             <Button
               onClick={() => setCurrentPage(1)}
               disabled={currentPage === 1}
-              className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
+              className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
             >
               First Page
             </Button>
             <Button
               onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
               disabled={currentPage === 1}
-              className="bg-var(--neutral-800) rounded-full text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white"
+              className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
             >
               Previous
             </Button>
@@ -593,8 +593,8 @@ const MembersDirectory = () => {
                   onClick={() => setCurrentPage(pageNumber)}
                   className={
                     isActive
-                      ? "bg-var(--purple-lavender) text-white hover:bg-var(--purple-ink) rounded-full"
-                      : "bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) hover:text-white rounded-full"
+                      ? "bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
+                      : "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
                   }
                 >
                   {pageNumber}
@@ -605,14 +605,14 @@ const MembersDirectory = () => {
             <Button
               onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
               disabled={currentPage === totalPages}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
             >
               Next
             </Button>
             <Button
               onClick={() => setCurrentPage(totalPages)}
               disabled={currentPage === totalPages}
-              className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--purple-lavender) rounded-full hover:text-white"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
             >
               Last Page
             </Button>
diff --git a/src/pages/members/NewsletterArchive.js b/src/pages/members/NewsletterArchive.js
index 54e3909..4ae47f0 100644
--- a/src/pages/members/NewsletterArchive.js
+++ b/src/pages/members/NewsletterArchive.js
@@ -86,7 +86,7 @@ export default function NewsletterArchive() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-var(--purple-lavender)" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading newsletters...
           </p>
         </div>
@@ -101,10 +101,10 @@ export default function NewsletterArchive() {
       <div className="max-w-7xl mx-auto px-6 py-12">
         {/* Header */}
         <div className="mb-8">
-          <h1 className="text-4xl font-semibold text-var(--purple-ink) mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Newsletter Archive
           </h1>
-          <p className="text-var(--purple-lavender) mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse past monthly newsletters and stay informed about LOAF community updates.
           </p>
 
@@ -112,13 +112,13 @@ export default function NewsletterArchive() {
           <div className="flex gap-4 flex-wrap items-center">
             {/* Search */}
             <div className="relative flex-1 min-w-[300px]">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-var(--purple-lavender)" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--purple-lavender)]" />
               <Input
                 type="text"
                 placeholder="Search newsletters..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10 border-var(--neutral-800) focus:border-var(--purple-lavender)"
+                className="pl-10 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
               />
             </div>
 
@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
                 onClick={clearFilter}
                 variant={selectedYear === null ? "default" : "outline"}
                 size="sm"
-                className={selectedYear === null ? "bg-var(--purple-lavender) text-white" : "border-var(--purple-lavender) text-var(--purple-lavender)"}
+                className={selectedYear === null ? "bg-[var(--purple-lavender)] text-white" : "border-[var(--purple-lavender)] text-[var(--purple-lavender)]"}
               >
                 All Years
               </Button>
@@ -138,7 +138,7 @@ export default function NewsletterArchive() {
                   onClick={() => handleYearFilter(year)}
                   variant={selectedYear === year ? "default" : "outline"}
                   size="sm"
-                  className={selectedYear === year ? "bg-var(--purple-lavender) text-white" : "border-var(--purple-lavender) text-var(--purple-lavender)"}
+                  className={selectedYear === year ? "bg-[var(--purple-lavender)] text-white" : "border-[var(--purple-lavender)] text-[var(--purple-lavender)]"}
                 >
                   {year}
                 </Button>
@@ -149,9 +149,9 @@ export default function NewsletterArchive() {
 
         {/* Newsletter List */}
         {filteredNewsletters.length === 0 ? (
-          <Card className="p-12 text-center bg-background rounded-2xl border border-var(--neutral-800)">
-            <FileText className="h-16 w-16 text-var(--neutral-800) mx-auto mb-4" />
-            <p className="text-var(--purple-lavender) text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
+            <FileText className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
+            <p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No newsletters found
             </p>
           </Card>
@@ -159,37 +159,37 @@ export default function NewsletterArchive() {
           <div className="space-y-8">
             {sortedYears.map(year => (
               <div key={year}>
-                <h2 className="text-2xl font-semibold text-var(--purple-ink) mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   <Calendar className="h-6 w-6" />
                   {year}
                 </h2>
                 <div className="grid md:grid-cols-2 gap-6">
                   {groupedNewsletters[year].map(newsletter => (
-                    <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-var(--neutral-800) hover:shadow-lg transition-shadow">
+                    <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                       <div className="flex items-start gap-4">
-                        <div className="bg-var(--neutral-800)/20 p-3 rounded-lg flex-shrink-0">
-                          <FileText className="h-6 w-6 text-var(--purple-lavender)" />
+                        <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg flex-shrink-0">
+                          <FileText className="h-6 w-6 text-[var(--purple-lavender)]" />
                         </div>
                         <div className="flex-1 min-w-0">
-                          <h3 className="text-xl font-semibold text-var(--purple-ink) mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {newsletter.title}
                           </h3>
                           {newsletter.description && (
-                            <p className="text-var(--purple-lavender) mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-[var(--purple-lavender)] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {newsletter.description}
                             </p>
                           )}
                           <div className="flex items-center gap-3 mb-4">
-                            <Badge className="bg-var(--neutral-800) text-var(--purple-ink) hover:bg-var(--neutral-800)">
+                            <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]">
                               {formatDate(newsletter.published_date)}
                             </Badge>
-                            <Badge variant="outline" className="border-var(--purple-lavender) text-var(--purple-lavender)">
+                            <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
                               {newsletter.document_type === 'google_docs' ? 'Google Docs' : newsletter.document_type.toUpperCase()}
                             </Badge>
                           </div>
                           <Button
                             onClick={() => window.open(newsletter.document_url, '_blank')}
-                            className="w-full bg-var(--purple-lavender) text-white hover:bg-var(--purple-muted) rounded-full flex items-center justify-center gap-2"
+                            className="w-full bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center justify-center gap-2"
                           >
                             <ExternalLink className="h-4 w-4" />
                             View Newsletter
-- 
2.39.5


From 30d32d882339183f624dfb2060ca7d270564a2bd Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 13 Jan 2026 17:58:04 -0600
Subject: [PATCH 04/21] Theme refactor

---
 src/base.css       |  41 +++++++++
 src/components.css |  52 +++++++++++
 src/index.css      | 205 -----------------------------------------
 src/theme.css      | 225 +++++++++++++++++++++++++++++++++++++++++++++
 src/utilities.css  |  60 ++++++++++++
 tailwind.config.js |   4 +-
 6 files changed, 381 insertions(+), 206 deletions(-)
 create mode 100644 src/base.css
 create mode 100644 src/components.css
 create mode 100644 src/theme.css
 create mode 100644 src/utilities.css

diff --git a/src/base.css b/src/base.css
new file mode 100644
index 0000000..30953ed
--- /dev/null
+++ b/src/base.css
@@ -0,0 +1,41 @@
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer base {
+  [data-debug-wrapper="true"] {
+    display: contents !important;
+  }
+
+  [data-debug-wrapper="true"] > * {
+    margin-left: inherit;
+    margin-right: inherit;
+    margin-top: inherit;
+    margin-bottom: inherit;
+    padding-left: inherit;
+    padding-right: inherit;
+    padding-top: inherit;
+    padding-bottom: inherit;
+    column-gap: inherit;
+    row-gap: inherit;
+    gap: inherit;
+    border-left-width: inherit;
+    border-right-width: inherit;
+    border-top-width: inherit;
+    border-bottom-width: inherit;
+    border-left-style: inherit;
+    border-right-style: inherit;
+    border-top-style: inherit;
+    border-bottom-style: inherit;
+    border-left-color: inherit;
+    border-right-color: inherit;
+    border-top-color: inherit;
+    border-bottom-color: inherit;
+  }
+}
diff --git a/src/components.css b/src/components.css
new file mode 100644
index 0000000..93be360
--- /dev/null
+++ b/src/components.css
@@ -0,0 +1,52 @@
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:pointer-events-none disabled:opacity-50
+      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
+  }
+
+  .btn-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .btn-outline {
+    @apply border border-input shadow-sm hover:bg-accent hover:text-accent-foreground;
+  }
+
+  .btn-accent {
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90;
+  }
+
+  .btn-destructive {
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
+  }
+
+  .btn-link {
+    @apply text-primary underline-offset-4 hover:underline;
+  }
+
+  .btn-sm {
+    @apply h-8 rounded-md px-3 text-xs;
+  }
+
+  .btn-md {
+    @apply h-9 px-4 py-2;
+  }
+
+  .btn-lg {
+    @apply h-10 rounded-md px-8;
+  }
+
+  .btn-icon {
+    @apply h-9 w-9;
+  }
+}
diff --git a/src/index.css b/src/index.css
index ac0ece7..d5830f2 100644
--- a/src/index.css
+++ b/src/index.css
@@ -20,213 +20,8 @@ code {
     monospace;
 }
 
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 280 47% 27%;
-    --card: 0 0% 100%;
-    --card-foreground: 280 47% 27%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 280 47% 27%;
-    --primary: 280 47% 27%;
-    --primary-foreground: 0 0% 100%;
-    --secondary: 268 33% 89%;
-    --secondary-foreground: 280 47% 27%;
-    --muted: 268 43% 95%;
-    --muted-foreground: 268 35% 47%;
-    --accent: 17 100% 73%;
-    --accent-foreground: 280 47% 27%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 268 33% 89%;
-    --input: 268 33% 89%;
-    --ring: 268 35% 47%;
-    --chart-1: 268 36% 46%;
-    --chart-2: 17 100% 73%;
-    --chart-3: 268 33% 89%;
-    --chart-4: 280 44% 29%;
-    --chart-5: 268 35% 47%;
-    --radius: 0.5rem;
 
-    /* =========================
-     Brand Colors
-     ========================= */
-    --brand-dark-lavender: 267 47% 29%;
-    --brand-purple: 256 35% 47%;
-    --brand-lavender: 262 46% 80%;
-    --brand-light-lavender: 256 32% 88%;
-    --brand-white: 0 0% 100%;
 
-    --brand-dark-orange: 13 100% 42%;
-    --brand-orange: 24 86% 55%;
-    --brand-light-orange: 24 100% 67%;
-
-    --brand-pink: 324 55% 60%;
-    --dusty-pink: 323 39% 52%;
-    --dark-rose: 324 98% 32%;
-
-    /* 
-    ==========================
-      Color Patch 
-    ==========================
-     */
-
-    --blue-linkedin: #0a66c2;
-    --blue-facebook: #1877f2;
-    --blue-twitter: #1da1f2;
-    --purple-ink: #422268;
-    --purple-deep: #48286e;
-    --purple-muted: #533a82;
-    --purple-plum: #553d8a;
-    --purple-soft: #5a4290;
-    --purple-amethyst: #644c9f;
-    --purple-lilac: #664ea2;
-    --purple-lavender: #664fa3;
-    --purple-electric: #865edf;
-    --slate-dark: #3d405b;
-    --slate-muted: #6b708d;
-    --slate-600: #6b7280;
-    --slate-400: #9ca3af;
-    --slate-dark: #3d405b;
-    --slate-muted: #6b708d;
-    --slate-600: #6b7280;
-    --slate-400: #9ca3af;
-    --green-success: #4caf50;
-    --green-sage: #5a8f72;
-    --green-muted: #66927e;
-    --green-soft: #6a9680;
-    --green-eucalyptus: #6a9a83;
-    --green-fern: #6da085;
-    --green-mint: #6fa087;
-    --green-pastel: #6fa188;
-    --green-light: #81b29a;
-    --green-bg: #e8f5e9;
-    --orange-rust: #d16b54;
-    --orange-soft: #e07a5f;
-    --orange-peach: #e88a63;
-    --orange-sand: #e88d66;
-    --orange-apricot: #ff8c5a;
-    --orange-coral: #ff8c64;
-    --orange-light: #ff9e77;
-    --orange-500: #ea580c;
-    --orange-400: #fb923c;
-    --gold-soft: #e8bf7a;
-    --gold-warm: #f2cc8f;
-    --gold-soft: #e8bf7a;
-    --gold-warm: #f2cc8f;
-    --red-instagram: #e4405f;
-    --red-soft: #ffebee;
-    --lavender-100: #e8e0f5;
-    --lavender-200: #eeebf4;
-    --lavender-300: #f1eef9;
-    --lavender-400: #f9f5ff;
-    --lavender-500: #f8f7fb;
-    --lavender-600: #f9f7fc;
-    --lavender-700: #f9f8fb;
-    --lavender-800: #eaedf4;
-    --neutral-50: #fafafa;
-    --neutral-100: #f9fafb;
-    --neutral-200: #fdfcf8;
-    --neutral-300: #eae0d5;
-    --neutral-400: #c4bed8;
-    --neutral-500: #c5b4e3;
-    --neutral-600: #c5bfd9;
-    --neutral-700: #dcd7ea;
-    --neutral-800: #ddd8eb;
-    --neutral-900: #ffffff;
-  }
-  .dark {
-    --background: var(--brand-dark-lavender);
-    --foreground: var(--brand-light-lavender);
-    --card: var(--brand-purple);
-    --card-foreground: var(--brand-light-lavender);
-    --popover: var(--brand-purple);
-    --popover-foreground: var(--brand-light-lavender);
-    --primary: var(--brand-light-lavender);
-    --primary-foreground: var(--brand-dark-lavender);
-    --secondary: var(--brand-purple);
-    --secondary-foreground: var(--brand-light-lavender);
-    --muted: var(--brand-purple);
-    --muted-foreground: var(--brand-light-lavender);
-    --accent: var(--brand-light-lavender);
-    --accent-foreground: var(--brand-light-lavender);
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: var(--brand-light-lavender);
-    --border: var(--brand-purple);
-    --input: var(--brand-purple);
-    --ring: var(--brand-light-lavender);
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
-}
-
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
-}
-
-@layer base {
-  [data-debug-wrapper="true"] {
-    display: contents !important;
-  }
-
-  [data-debug-wrapper="true"] > * {
-    margin-left: inherit;
-    margin-right: inherit;
-    margin-top: inherit;
-    margin-bottom: inherit;
-    padding-left: inherit;
-    padding-right: inherit;
-    padding-top: inherit;
-    padding-bottom: inherit;
-    column-gap: inherit;
-    row-gap: inherit;
-    gap: inherit;
-    border-left-width: inherit;
-    border-right-width: inherit;
-    border-top-width: inherit;
-    border-bottom-width: inherit;
-    border-left-style: inherit;
-    border-right-style: inherit;
-    border-top-style: inherit;
-    border-bottom-style: inherit;
-    border-left-color: inherit;
-    border-right-color: inherit;
-    border-top-color: inherit;
-    border-bottom-color: inherit;
-  }
-}
-
-@layer utilities {
-  @supports selector(::-webkit-scrollbar) {
-    .scrollbar-dashboard::-webkit-scrollbar {
-      width: 2px;
-    }
-
-    .scrollbar-dashboard::-webkit-scrollbar-thumb {
-      background-color: #ddd8eb;
-      border-radius: 9999px;
-    }
-    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
-      height: 2px;
-    }
-
-    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
-      background-color: #ddd8eb;
-      border-radius: 9999px;
-    }
-    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
-      height: 0px;
-    }
-  }
-}
 
 /* 
 =========================
diff --git a/src/theme.css b/src/theme.css
new file mode 100644
index 0000000..8622685
--- /dev/null
+++ b/src/theme.css
@@ -0,0 +1,225 @@
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 280 47% 27%;
+    --card: 0 0% 100%;
+    --card-foreground: 280 47% 27%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 280 47% 27%;
+    --primary: 280 47% 27%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 268 33% 89%;
+    --secondary-foreground: 280 47% 27%;
+    --muted: 268 43% 95%;
+    --muted-foreground: 268 35% 47%;
+    --accent: var(--brand-orange);
+    --accent-foreground: 280 47% 27%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 268 33% 89%;
+    --input: 268 33% 89%;
+    --ring: 268 35% 47%;
+    --chart-1: 268 36% 46%;
+    --chart-2: 17 100% 73%;
+    --chart-3: 268 33% 89%;
+    --chart-4: 280 44% 29%;
+    --chart-5: 268 35% 47%;
+    --radius: 0.5rem;
+
+    /* =========================
+     Brand Colors
+     ========================= */
+    --brand-dark-lavender: 267 47% 29%;
+    --brand-purple: 256 35% 47%;
+    --brand-lavender: 262 46% 80%;
+    --brand-light-lavender: 256 32% 88%;
+    --brand-white: 0 0% 100%;
+
+    --brand-dark-orange: 13 100% 42%;
+    --brand-orange: 24 86% 55%;
+    --brand-light-orange: 24 100% 67%;
+
+    --brand-pink: 324 55% 60%;
+    --dusty-pink: 323 39% 52%;
+    --dark-rose: 324 98% 32%;
+
+    /* 
+    ==========================
+      Color Patch 
+    ==========================
+     */
+
+    --blue-linkedin: #0a66c2;
+    --blue-facebook: #1877f2;
+    --blue-twitter: #1da1f2;
+    --purple-ink: #422268;
+    --purple-deep: #48286e;
+    --purple-muted: #533a82;
+    --purple-plum: #553d8a;
+    --purple-soft: #5a4290;
+    --purple-amethyst: #644c9f;
+    --purple-lilac: #664ea2;
+    --purple-lavender: #664fa3;
+    --purple-electric: #865edf;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --slate-dark: #3d405b;
+    --slate-muted: #6b708d;
+    --slate-600: #6b7280;
+    --slate-400: #9ca3af;
+    --green-success: #4caf50;
+    --green-sage: #5a8f72;
+    --green-muted: #66927e;
+    --green-soft: #6a9680;
+    --green-eucalyptus: #6a9a83;
+    --green-fern: #6da085;
+    --green-mint: #6fa087;
+    --green-pastel: #6fa188;
+    --green-light: #81b29a;
+    --green-bg: #e8f5e9;
+    --orange-rust: #d16b54;
+    --orange-soft: #e07a5f;
+    --orange-peach: #e88a63;
+    --orange-sand: #e88d66;
+    --orange-apricot: #ff8c5a;
+    --orange-coral: #ff8c64;
+    --orange-light: #ff9e77;
+    --orange-500: #ea580c;
+    --orange-400: #fb923c;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --gold-soft: #e8bf7a;
+    --gold-warm: #f2cc8f;
+    --red-instagram: #e4405f;
+    --red-soft: #ffebee;
+    --lavender-100: #e8e0f5;
+    --lavender-200: #eeebf4;
+    --lavender-300: #f1eef9;
+    --lavender-400: #f9f5ff;
+    --lavender-500: #f8f7fb;
+    --lavender-600: #f9f7fc;
+    --lavender-700: #f9f8fb;
+    --lavender-800: #eaedf4;
+    --neutral-50: #fafafa;
+    --neutral-100: #f9fafb;
+    --neutral-200: #fdfcf8;
+    --neutral-300: #eae0d5;
+    --neutral-400: #c4bed8;
+    --neutral-500: #c5b4e3;
+    --neutral-600: #c5bfd9;
+    --neutral-700: #dcd7ea;
+    --neutral-800: #ddd8eb;
+    --neutral-900: #ffffff;
+  }
+  .dark {
+    --background: 246 28% 8%;
+    --foreground: 255 30% 92%;
+
+    --card: 248 26% 11%;
+    --card-foreground: 255 30% 92%;
+
+    --popover: 248 26% 12%;
+    --popover-foreground: 255 30% 92%;
+
+    --primary: 262 70% 72%;
+    --primary-foreground: 246 28% 10%;
+
+    --secondary: 262 22% 18%;
+    --secondary-foreground: 255 30% 92%;
+
+    --muted: 252 18% 15%;
+    --muted-foreground: var(--brand-lavender);
+
+    --accent: var(--brand-light-orange);
+    --accent-foreground: 246 28% 10%;
+
+    --destructive: 0 78% 56%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 255 14% 22%;
+    --input: 255 14% 20%;
+    --ring: 262 70% 72%;
+
+    /* charts (tuned for dark backgrounds) */
+    --chart-1: 262 70% 72%;
+    --chart-2: var(--dark-rose);
+    --chart-3: 168 48% 52%;
+    --chart-4: 286 64% 70%;
+    --chart-5: 210 70% 66%;
+
+    --radius: 0.5rem;
+
+    /* -------- Purples (Primary UI) -------- */
+    --purple-ink: #422268; /* deepest background */
+    --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */
+    --purple-deep: #24153a; /* app shell */
+    --purple-muted: #34204f; /* panels */
+    --purple-plum: #3f2760;
+    --purple-soft: #4b3374;
+    --purple-amethyst: #5c45a0;
+    --purple-lilac: #6a55b8;
+    --purple-lavender: #664fa3;
+    --purple-electric: #9b7cff; /* accents / focus */
+
+    /* -------- Slate / Text Neutrals -------- */
+    --slate-dark: #0f1020; /* page background */
+    --slate-muted: #2b2f44; /* borders / dividers */
+    --slate-600: #8b90a8; /* secondary text */
+    --slate-400: #c7cad6; /* primary text */
+
+    /* -------- Greens (Success / Calm) -------- */
+    --green-success: #3ddc84;
+    --green-sage: #4fa38a;
+    --green-muted: #5fb39a;
+    --green-soft: #6fc4aa;
+    --green-eucalyptus: #7dd3b0;
+    --green-fern: #8be0bc;
+    --green-mint: #66a38b;
+    --green-pastel: #a6ecd1;
+    --green-light: #5e8374;
+    --green-bg: #0f2a1e;
+
+    /* -------- Oranges (Warnings / Energy) -------- */
+    --orange-rust: #b4533c;
+    --orange-soft: #c8654c;
+    --orange-peach: #d97757;
+    --orange-sand: #e08966;
+    --orange-apricot: #ff9f6e;
+    --orange-coral: #ff8a75;
+    --orange-light: #ffab91;
+    --orange-500: #f97316;
+    --orange-400: #fb923c;
+
+    /* -------- Golds -------- */
+    --gold-soft: #e3c07a;
+    --gold-warm: #f5d89c;
+
+    /* -------- Reds -------- */
+
+    --red-soft: #3a141c;
+
+    /* -------- Lavender UI Layers -------- */
+    --lavender-100: #1c142c;
+    --lavender-200: #241a38;
+    --lavender-300: #2c2145;
+    --lavender-400: #342952;
+    --lavender-500: #211c35;
+    --lavender-600: #45396e;
+    --lavender-700: #4e417d;
+    --lavender-800: #584a8c;
+
+    /* -------- Neutral Surfaces -------- */
+    --neutral-50: #0b0b10; /* deepest bg */
+    --neutral-100: #12121a;
+    --neutral-200: #1a1a24;
+    --neutral-300: #232330;
+    --neutral-400: #2f2f40;
+    --neutral-500: #3b3b52;
+    --neutral-600: #515170;
+    --neutral-700: #77779a;
+    --neutral-800: var(--lavender-300); /* lightest bg */
+    --neutral-900: #f4f4ff; /* highest contrast text */
+  }
+}
diff --git a/src/utilities.css b/src/utilities.css
new file mode 100644
index 0000000..e8925d0
--- /dev/null
+++ b/src/utilities.css
@@ -0,0 +1,60 @@
+@layer utilities {
+  @supports selector(::-webkit-scrollbar) {
+    .scrollbar-dashboard::-webkit-scrollbar {
+      width: 2px;
+    }
+
+    .scrollbar-dashboard::-webkit-scrollbar-thumb {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .scrollbar-x-dashboard::-webkit-scrollbar:horizontal {
+      height: 2px;
+    }
+
+    .scrollbar-x-dashboard::-webkit-scrollbar-thumb:horizontal {
+      background-color: #ddd8eb;
+      border-radius: 9999px;
+    }
+    .hide-scrollbar-x::-webkit-scrollbar:horizontal {
+      height: 0px;
+    }
+  }
+  .ui-checkbox {
+    @apply appearance-none
+           w-5 h-5
+           rounded
+           border-2 border-[var(--neutral-800)]
+           bg-[hsl(var(--background))]
+           cursor-pointer
+           inline-grid place-content-center;
+  }
+
+  /* checked */
+  .ui-checkbox:checked {
+    @apply bg-brand-purple
+           border-brand-purple;
+  }
+
+  /* checkmark */
+  .ui-checkbox::after {
+    content: "";
+    @apply w-2.5 h-2.5 scale-0 transition-transform bg-white;
+    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
+  }
+
+  .ui-checkbox:checked::after {
+    @apply scale-100;
+  }
+
+  /* focus */
+  .ui-checkbox:focus-visible {
+    @apply outline-none ring-2 ring-brand-purple
+           ring-offset-2 ring-offset-[hsl(var(--background))];
+  }
+
+  /* disabled */
+  .ui-checkbox:disabled {
+    @apply opacity-50 cursor-not-allowed;
+  }
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index 7aecb23..c8d39f3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,7 +3,9 @@ module.exports = {
 	darkMode: ["class"],
 	content: [
 		"./src/**/*.{js,jsx,ts,tsx}",
-		"./public/index.html"
+		"./public/index.html",
+		"./src/index.css"
+
 	],
 	theme: {
 		extend: {
-- 
2.39.5


From e04d39fe17e621ccc766bb192cb7ae77709ee2be Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 13 Jan 2026 22:01:33 -0600
Subject: [PATCH 05/21] Refactor color scheme in member-related pages to use
 brand colors instead of CSS variables for consistency and improved
 readability

---
 src/components/AddToCalendarButton.js         |  6 +-
 src/components/AdminSidebar.js                |  2 +-
 src/components/AttendanceDialog.js            |  8 +-
 src/components/ChangePasswordDialog.js        |  8 +-
 src/components/ConfirmationDialog.js          |  8 +-
 src/components/CreateMemberDialog.js          | 24 ++---
 src/components/CreateStaffDialog.js           | 12 +--
 src/components/ImportMembersDialog.js         | 18 ++--
 src/components/InviteStaffDialog.js           | 12 +--
 src/components/MemberFooter.js                | 12 +--
 src/components/PaymentActivationDialog.js     | 22 ++---
 src/components/PendingInvitationsTable.js     | 16 ++--
 src/components/PlanDialog.js                  | 16 ++--
 src/components/PublicNavbar.js                |  4 +-
 src/components/RejectionDialog.js             | 10 +--
 src/components/WordPressImportWizard.js       | 50 +++++------
 .../registration/RegistrationStep1.js         | 18 ++--
 .../registration/RegistrationStep2.js         | 12 +--
 .../registration/RegistrationStep3.js         | 20 ++---
 .../registration/RegistrationStep4.js         | 16 ++--
 .../registration/RegistrationStepIndicator.js |  6 +-
 src/components/ui/button.jsx                  | 57 ++++++------
 src/components/ui/tabs.jsx                    |  2 +-
 src/pages/AcceptInvitation.js                 | 52 +++++------
 src/pages/ChangePasswordRequired.js           | 16 ++--
 src/pages/Dashboard.js                        | 70 +++++++--------
 src/pages/DonationSuccess.js                  | 14 +--
 src/pages/EventDetails.js                     | 20 ++---
 src/pages/Events.js                           | 16 ++--
 src/pages/ForgotPassword.js                   | 14 +--
 src/pages/Login.js                            | 10 +--
 src/pages/NotFound.js                         | 12 +--
 src/pages/PaymentCancel.js                    | 20 ++---
 src/pages/PaymentSuccess.js                   | 20 ++---
 src/pages/Plans.js                            | 40 ++++-----
 src/pages/Profile.js                          | 89 ++++++++++---------
 src/pages/Register.js                         |  8 +-
 src/pages/ResetPassword.js                    | 16 ++--
 src/pages/VerifyEmail.js                      | 10 +--
 src/pages/admin/AdminBylaws.js                | 36 ++++----
 src/pages/admin/AdminDashboard.js             |  2 +-
 src/pages/admin/AdminDonations.js             | 42 ++++-----
 src/pages/admin/AdminEventAttendance.js       | 48 +++++-----
 src/pages/admin/AdminEvents.js                | 32 +++----
 src/pages/admin/AdminFinancials.js            | 26 +++---
 src/pages/admin/AdminGallery.js               | 26 +++---
 src/pages/admin/AdminMembers.js               | 32 +++----
 src/pages/admin/AdminNewsletters.js           | 26 +++---
 src/pages/admin/AdminPermissions.js           | 30 +++----
 src/pages/admin/AdminPlans.js                 | 36 ++++----
 src/pages/admin/AdminRoles.js                 |  2 +-
 src/pages/admin/AdminStaff.js                 | 28 +++---
 src/pages/admin/AdminSubscriptions.js         | 60 ++++++-------
 src/pages/admin/AdminUserView.js              | 36 ++++----
 src/pages/admin/AdminValidations.js           | 24 ++---
 src/pages/members/Bylaws.js                   | 24 ++---
 src/pages/members/EventGallery.js             | 24 ++---
 src/pages/members/Financials.js               | 16 ++--
 src/pages/members/MemberCalendar.js           | 26 +++---
 src/pages/members/MembersDirectory.js         | 82 ++++++++---------
 src/pages/members/NewsletterArchive.js        | 22 ++---
 61 files changed, 731 insertions(+), 735 deletions(-)

diff --git a/src/components/AddToCalendarButton.js b/src/components/AddToCalendarButton.js
index 65fc891..cd8b1b5 100644
--- a/src/components/AddToCalendarButton.js
+++ b/src/components/AddToCalendarButton.js
@@ -187,7 +187,7 @@ export default function AddToCalendarButton({
             >
               <RefreshCw className="h-4 w-4 mr-2" />
               Subscribe to My Events
-              <div className="text-xs text-[var(--purple-lavender)] mt-0.5">
+              <div className="text-xs text-brand-purple  mt-0.5">
                 Auto-syncs your RSVP'd events
               </div>
             </DropdownMenuItem>
@@ -198,7 +198,7 @@ export default function AddToCalendarButton({
             >
               <Download className="h-4 w-4 mr-2" />
               Download All Events
-              <div className="text-xs text-[var(--purple-lavender)] mt-0.5">
+              <div className="text-xs text-brand-purple  mt-0.5">
                 One-time import of all upcoming events
               </div>
             </DropdownMenuItem>
@@ -206,7 +206,7 @@ export default function AddToCalendarButton({
         )}
 
         {!event && !showSubscribe && (
-          <div className="px-2 py-6 text-center text-sm text-[var(--purple-lavender)]">
+          <div className="px-2 py-6 text-center text-sm text-brand-purple ">
             No event selected
           </div>
         )}
diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index ca075c3..34a9861 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -211,7 +211,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
           className={`
             flex items-center gap-3 px-4 py-3 rounded-lg transition-all relative
             ${item.disabled
-              ? 'opacity-50 cursor-not-allowed text-[var(--purple-lavender)]'
+              ? 'opacity-50 cursor-not-allowed text-brand-purple '
               : active
                 ? 'bg-[var(--orange-light)]/10 text-[var(--orange-light)]'
                 : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/20'
diff --git a/src/components/AttendanceDialog.js b/src/components/AttendanceDialog.js
index 7853d6a..14afbc4 100644
--- a/src/components/AttendanceDialog.js
+++ b/src/components/AttendanceDialog.js
@@ -64,12 +64,12 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
         <div className="space-y-4 mt-4">
           {rsvps.length === 0 ? (
-            <p className="text-center text-[var(--purple-lavender)] py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
+            <p className="text-center text-brand-purple  py-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No RSVPs yet</p>
           ) : (
             rsvps.map((rsvp) => (
               <div
                 key={rsvp.user_id}
-                className="flex items-center gap-3 p-4 border-2 border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] transition-colors"
+                className="flex items-center gap-3 p-4 border-2 border-[var(--neutral-800)] rounded-xl hover:border-brand-purple  transition-colors"
               >
                 <Checkbox
                   checked={attendance[rsvp.user_id] || false}
@@ -80,7 +80,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
                 />
                 <div className="flex-1">
                   <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{rsvp.user_name}</p>
-                  <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
+                  <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{rsvp.user_email}</p>
                 </div>
                 {rsvp.attended && (
                   <span className="text-sm text-[var(--green-light)] font-medium">
@@ -103,7 +103,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
           <Button
             onClick={() => onOpenChange(false)}
             variant="outline"
-            className="flex-1 border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-background hover:text-[var(--purple-ink)] rounded-full"
+            className="flex-1 border-2 border-[var(--neutral-800)] text-brand-purple  hover:bg-background hover:text-[var(--purple-ink)] rounded-full"
           >
             Cancel
           </Button>
diff --git a/src/components/ChangePasswordDialog.js b/src/components/ChangePasswordDialog.js
index 331b772..a494af0 100644
--- a/src/components/ChangePasswordDialog.js
+++ b/src/components/ChangePasswordDialog.js
@@ -76,7 +76,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               Change Password
             </DialogTitle>
           </div>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your password to keep your account secure.
           </DialogDescription>
         </DialogHeader>
@@ -92,7 +92,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.currentPassword}
               onChange={handleInputChange}
               placeholder="Enter current password"
-              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -106,7 +106,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.newPassword}
               onChange={handleInputChange}
               placeholder="Enter new password (min. 6 characters)"
-              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -120,7 +120,7 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
               value={formData.confirmPassword}
               onChange={handleInputChange}
               placeholder="Re-enter new password"
-              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
diff --git a/src/components/ConfirmationDialog.js b/src/components/ConfirmationDialog.js
index 1b1ce5c..dc25cc6 100644
--- a/src/components/ConfirmationDialog.js
+++ b/src/components/ConfirmationDialog.js
@@ -48,8 +48,8 @@ const ConfirmationDialog = ({
     },
     info: {
       icon: Info,
-      iconColor: 'text-[var(--purple-lavender)]',
-      confirmButtonClass: 'bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-plum)] rounded-full px-6',
+      iconColor: 'text-brand-purple ',
+      confirmButtonClass: 'bg-brand-purple  text-white hover:bg-[var(--purple-plum)] rounded-full px-6',
     },
     success: {
       icon: CheckCircle,
@@ -77,7 +77,7 @@ const ConfirmationDialog = ({
                 {title}
               </AlertDialogTitle>
               <AlertDialogDescription
-                className="text-[var(--purple-lavender)] text-sm leading-relaxed"
+                className="text-brand-purple  text-sm leading-relaxed"
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
                 {description}
@@ -87,7 +87,7 @@ const ConfirmationDialog = ({
         </AlertDialogHeader>
         <AlertDialogFooter className="p-6 pt-4 bg-[var(--lavender-500)] flex-row gap-3 justify-end">
           <AlertDialogCancel
-            className="border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-background rounded-full px-6"
+            className="border-2 border-[var(--neutral-800)] text-brand-purple  hover:bg-background rounded-full px-6"
             disabled={loading}
           >
             {cancelText}
diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js
index 39dd96a..2476245 100644
--- a/src/components/CreateMemberDialog.js
+++ b/src/components/CreateMemberDialog.js
@@ -125,7 +125,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
             <UserPlus className="h-6 w-6" />
             Create Member
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new member account with direct login access. Member will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -143,7 +143,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="member@example.com"
                 />
                 {errors.email && (
@@ -160,7 +160,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Minimum 8 characters"
                 />
                 {errors.password && (
@@ -179,7 +179,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="John"
                 />
                 {errors.first_name && (
@@ -195,7 +195,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Doe"
                 />
                 {errors.last_name && (
@@ -214,7 +214,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
@@ -231,7 +231,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                 id="address"
                 value={formData.address}
                 onChange={(e) => handleChange('address', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="123 Main St"
               />
             </div>
@@ -244,7 +244,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="city"
                   value={formData.city}
                   onChange={(e) => handleChange('city', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="San Francisco"
                 />
               </div>
@@ -255,7 +255,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="state"
                   value={formData.state}
                   onChange={(e) => handleChange('state', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="CA"
                   maxLength={2}
                 />
@@ -267,7 +267,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="zipcode"
                   value={formData.zipcode}
                   onChange={(e) => handleChange('zipcode', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="94102"
                 />
               </div>
@@ -282,7 +282,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="date"
                   value={formData.date_of_birth}
                   onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 />
               </div>
 
@@ -293,7 +293,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="date"
                   value={formData.member_since}
                   onChange={(e) => handleChange('member_since', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 />
               </div>
             </div>
diff --git a/src/components/CreateStaffDialog.js b/src/components/CreateStaffDialog.js
index 7509e3d..5bbb606 100644
--- a/src/components/CreateStaffDialog.js
+++ b/src/components/CreateStaffDialog.js
@@ -105,7 +105,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             <UserPlus className="h-6 w-6" />
             Create Staff Member
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create a new staff account with direct login access. User will be created immediately.
           </DialogDescription>
         </DialogHeader>
@@ -122,7 +122,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="email"
                 value={formData.email}
                 onChange={(e) => handleChange('email', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="staff@example.com"
               />
               {errors.email && (
@@ -140,7 +140,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="password"
                 value={formData.password}
                 onChange={(e) => handleChange('password', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="Minimum 8 characters"
               />
               {errors.password && (
@@ -157,7 +157,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 id="first_name"
                 value={formData.first_name}
                 onChange={(e) => handleChange('first_name', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="John"
               />
               {errors.first_name && (
@@ -174,7 +174,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 id="last_name"
                 value={formData.last_name}
                 onChange={(e) => handleChange('last_name', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="Doe"
               />
               {errors.last_name && (
@@ -192,7 +192,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="(555) 123-4567"
               />
               {errors.phone && (
diff --git a/src/components/ImportMembersDialog.js b/src/components/ImportMembersDialog.js
index 7aa093d..f015e62 100644
--- a/src/components/ImportMembersDialog.js
+++ b/src/components/ImportMembersDialog.js
@@ -144,7 +144,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             <Upload className="h-6 w-6" />
             {importResult ? 'Import Results' : 'Import Members from CSV'}
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {importResult
               ? 'Review the import results below'
               : 'Upload a CSV file to bulk import members. Ensure the CSV has the required columns.'}
@@ -155,7 +155,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
           // Upload Form
           <div className="grid gap-6 py-4">
             {/* CSV Format Instructions */}
-            <Alert className="border-[var(--purple-lavender)] bg-[var(--lavender-700)]">
+            <Alert className="border-brand-purple  bg-[var(--lavender-700)]">
               <AlertDescription className="text-sm text-[var(--purple-ink)]">
                 <strong>Required columns:</strong> Email, First Name, Last Name, Phone, Role
                 <br />
@@ -168,8 +168,8 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* File Upload Area */}
             <div
               className={`border-2 border-dashed rounded-2xl p-12 text-center transition-colors ${dragActive
-                ? 'border-[var(--purple-lavender)] bg-[var(--lavender-700)]'
-                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:bg-[var(--lavender-700)]'
+                ? 'border-brand-purple  bg-[var(--lavender-700)]'
+                : 'border-[var(--neutral-800)] hover:border-brand-purple  hover:bg-[var(--lavender-700)]'
                 }`}
               onDragEnter={handleDrag}
               onDragLeave={handleDrag}
@@ -183,7 +183,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                     <p className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {file.name}
                     </p>
-                    <p className="text-sm text-[var(--purple-lavender)]">
+                    <p className="text-sm text-brand-purple ">
                       {(file.size / 1024).toFixed(2)} KB
                     </p>
                   </div>
@@ -203,7 +203,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                     <p className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       Drag and drop your CSV file here
                     </p>
-                    <p className="text-sm text-[var(--purple-lavender)] mb-4">or</p>
+                    <p className="text-sm text-brand-purple  mb-4">or</p>
                     <Label htmlFor="file-upload">
                       <Button variant="outline" className="rounded-xl cursor-pointer" asChild>
                         <span>Browse Files</span>
@@ -227,7 +227,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                 checked={updateExisting}
                 onCheckedChange={setUpdateExisting}
                 id="update-existing"
-                className="h-5 w-5 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
+                className="h-5 w-5 border-2 border-brand-purple  data-[state=checked]:bg-brand-purple "
               />
               <Label htmlFor="update-existing" className="text-[var(--purple-ink)] cursor-pointer">
                 Update existing members (if email already exists)
@@ -240,7 +240,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
             {/* Summary Cards */}
             <div className="grid md:grid-cols-4 gap-4">
               <div className="p-4 bg-background rounded-xl border border-[var(--neutral-800)] text-center">
-                <p className="text-sm text-[var(--purple-lavender)] mb-1">Total Rows</p>
+                <p className="text-sm text-brand-purple  mb-1">Total Rows</p>
                 <p className="text-2xl font-semibold text-[var(--purple-ink)]">{importResult.total_rows}</p>
               </div>
               <div className="p-4 bg-green-50 rounded-xl border border-green-200 text-center">
@@ -276,7 +276,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
                       {importResult.errors.map((error, idx) => (
                         <TableRow key={idx} className="hover:bg-[var(--lavender-700)]">
                           <TableCell className="font-medium text-[var(--purple-ink)]">{error.row}</TableCell>
-                          <TableCell className="text-[var(--purple-lavender)]">{error.email}</TableCell>
+                          <TableCell className="text-brand-purple ">{error.email}</TableCell>
                           <TableCell className="text-red-600 text-sm">{error.error}</TableCell>
                         </TableRow>
                       ))}
diff --git a/src/components/InviteStaffDialog.js b/src/components/InviteStaffDialog.js
index 2af9791..17e62e9 100644
--- a/src/components/InviteStaffDialog.js
+++ b/src/components/InviteStaffDialog.js
@@ -129,7 +129,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
             <Mail className="h-6 w-6" />
             {invitationUrl ? 'Invitation Sent' : 'Invite Staff Member'}
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {invitationUrl
               ? 'The invitation has been sent via email. You can also copy the link below.'
               : 'Send an email invitation to join as staff. They will set their own password.'}
@@ -148,7 +148,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               />
               <Button
                 onClick={copyToClipboard}
-                className="rounded-xl bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
+                className="rounded-xl bg-brand-purple  hover:bg-[var(--purple-ink)] text-white flex-shrink-0"
               >
                 {copied ? (
                   <>
@@ -178,7 +178,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="email"
                   value={formData.email}
                   onChange={(e) => handleChange('email', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="staff@example.com"
                 />
                 {errors.email && (
@@ -195,7 +195,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="John"
                 />
               </div>
@@ -209,7 +209,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Doe"
                 />
               </div>
@@ -224,7 +224,7 @@ const InviteStaffDialog = ({ open, onOpenChange, onSuccess }) => {
                   type="tel"
                   value={formData.phone}
                   onChange={(e) => handleChange('phone', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="(555) 123-4567"
                 />
               </div>
diff --git a/src/components/MemberFooter.js b/src/components/MemberFooter.js
index 6139838..987b9fe 100644
--- a/src/components/MemberFooter.js
+++ b/src/components/MemberFooter.js
@@ -4,7 +4,7 @@ import { Calendar, Users, User, BookOpen, FileText, DollarSign, Scale } from 'lu
 
 const MemberFooter = () => {
   return (
-    <footer className="bg-[var(--purple-ink)] text-white mt-auto">
+    <footer className="bg-brand-dark-lavender text-white mt-auto">
       <div className="max-w-7xl mx-auto px-6 py-12">
         <div className="grid md:grid-cols-4 gap-8">
           {/* Logo & About */}
@@ -89,12 +89,12 @@ const MemberFooter = () => {
                 </Link>
               </li>
               <li>
-                <a href="/#contact" className="text-gray-300 hover:text-white transition-colors">
+                <a href="/membership/contact-us" className="text-gray-300 hover:text-white transition-colors">
                   Contact Us
                 </a>
               </li>
               <li>
-                <a href="/#donate" className="text-gray-300 hover:text-white transition-colors">
+                <a href="/membership/donate" className="text-gray-300 hover:text-white transition-colors">
                   Donate
                 </a>
               </li>
@@ -106,10 +106,10 @@ const MemberFooter = () => {
       {/* Bottom Bar */}
       <div className="border-t border-[var(--purple-lavender)]">
         <div className="max-w-7xl mx-auto px-6 py-4">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-400" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="flex flex-col md:flex-row justify-between items-center gap-4 text-sm text-gray-300" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <div className="flex gap-6">
-              <a href="/#terms" className="hover:text-white transition-colors">Terms of Service</a>
-              <a href="/#privacy" className="hover:text-white transition-colors">Privacy Policy</a>
+              <a href="/membership/terms-of-service" className="hover:text-white transition-colors">Terms of Service</a>
+              <a href="/membership/privacy-policy" className="hover:text-white transition-colors">Privacy Policy</a>
             </div>
             <p>© 2025 LOAF. All rights reserved.</p>
           </div>
diff --git a/src/components/PaymentActivationDialog.js b/src/components/PaymentActivationDialog.js
index a0ec359..34074ac 100644
--- a/src/components/PaymentActivationDialog.js
+++ b/src/components/PaymentActivationDialog.js
@@ -162,7 +162,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
           <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Activate Manual Payment
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Record offline payment for {user.first_name} {user.last_name} ({user.email})
           </DialogDescription>
         </DialogHeader>
@@ -203,7 +203,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               </SelectContent>
             </Select>
             {selectedPlan && (
-              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {selectedPlan.description || `${selectedPlan.billing_cycle} subscription`}
               </p>
             )}
@@ -222,11 +222,11 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               placeholder="Enter amount"
               value={formData.amount}
               onChange={(e) => setFormData({ ...formData, amount: e.target.value })}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               required
             />
             {selectedPlan && (
-              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {formatPrice(selectedPlan.minimum_price_cents || selectedPlan.price_cents || 3000)}
               </p>
             )}
@@ -263,13 +263,13 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               Payment Date
             </Label>
             <div className="relative">
-              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+              <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
                 id="payment_date"
                 type="date"
                 value={formData.payment_date}
                 onChange={(e) => setFormData({ ...formData, payment_date: e.target.value })}
-                className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 required
               />
             </div>
@@ -308,7 +308,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                 onChange={(e) => setUseCustomPeriod(e.target.checked)}
                 className="rounded border-[var(--neutral-800)]"
               />
-              <Label htmlFor="use_custom_period" className="text-sm text-[var(--purple-lavender)] font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <Label htmlFor="use_custom_period" className="text-sm text-brand-purple  font-normal cursor-pointer" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Use custom dates instead of plan's billing cycle
               </Label>
             </div>
@@ -324,7 +324,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     type="date"
                     value={formData.custom_period_start}
                     onChange={(e) => setFormData({ ...formData, custom_period_start: e.target.value })}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     required={useCustomPeriod}
                   />
                 </div>
@@ -337,14 +337,14 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
                     type="date"
                     value={formData.custom_period_end}
                     onChange={(e) => setFormData({ ...formData, custom_period_end: e.target.value })}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     required={useCustomPeriod}
                   />
                 </div>
               </div>
             ) : (
               selectedPlan && (
-                <div className="text-sm text-[var(--purple-lavender)] bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="text-sm text-brand-purple  bg-[var(--lavender-300)] p-3 rounded-lg space-y-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {selectedPlan.custom_cycle_enabled ? (
                     <>
                       <p>
@@ -386,7 +386,7 @@ const PaymentActivationDialog = ({ open, onOpenChange, user, onSuccess }) => {
               placeholder="Additional notes about the payment..."
               value={formData.notes}
               onChange={(e) => setFormData({ ...formData, notes: e.target.value })}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] min-h-[100px]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple  min-h-[100px]"
             />
           </div>
 
diff --git a/src/components/PendingInvitationsTable.js b/src/components/PendingInvitationsTable.js
index 6be4eec..c2302a3 100644
--- a/src/components/PendingInvitationsTable.js
+++ b/src/components/PendingInvitationsTable.js
@@ -73,7 +73,7 @@ const PendingInvitationsTable = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
       admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
       member: { label: 'Member', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' }
     };
@@ -111,7 +111,7 @@ const PendingInvitationsTable = () => {
   if (loading) {
     return (
       <div className="text-center py-8">
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading invitations...
         </p>
       </div>
@@ -125,7 +125,7 @@ const PendingInvitationsTable = () => {
         <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
           No Pending Invitations
         </h3>
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           All invitations have been accepted or expired
         </p>
       </Card>
@@ -152,19 +152,19 @@ const PendingInvitationsTable = () => {
                 <TableCell className="font-medium text-[var(--purple-ink)]">
                   {invitation.email}
                 </TableCell>
-                <TableCell className="text-[var(--purple-lavender)]">
+                <TableCell className="text-brand-purple ">
                   {invitation.first_name && invitation.last_name
                     ? `${invitation.first_name} ${invitation.last_name}`
                     : '-'}
                 </TableCell>
                 <TableCell>{getRoleBadge(invitation.role)}</TableCell>
-                <TableCell className="text-[var(--purple-lavender)]">
+                <TableCell className="text-brand-purple ">
                   {new Date(invitation.invited_at).toLocaleDateString()}
                 </TableCell>
                 <TableCell>
                   <div className="flex items-center gap-2">
-                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-[var(--purple-lavender)]'}`} />
-                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-[var(--purple-lavender)]'}`}>
+                    <Clock className={`h-4 w-4 ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500' : 'text-brand-purple '}`} />
+                    <span className={`text-sm ${isExpiringSoon(invitation.expires_at) ? 'text-orange-500 font-semibold' : 'text-brand-purple '}`}>
                       {formatDate(invitation.expires_at)}
                     </span>
                   </div>
@@ -211,7 +211,7 @@ const PendingInvitationsTable = () => {
             <AlertDialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Revoke Invitation
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to revoke the invitation for{' '}
               <span className="font-semibold">{revokeDialog.invitation?.email}</span>?
               This action cannot be undone.
diff --git a/src/components/PlanDialog.js b/src/components/PlanDialog.js
index 01b30e0..3694d02 100644
--- a/src/components/PlanDialog.js
+++ b/src/components/PlanDialog.js
@@ -164,7 +164,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}
           </DialogTitle>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {plan ? 'Update plan details below' : 'Enter plan details to create a new subscription plan'}
           </DialogDescription>
         </DialogHeader>
@@ -216,7 +216,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-[var(--purple-lavender)] mt-1">Minimum $30</p>
+                <p className="text-xs text-brand-purple  mt-1">Minimum $30</p>
               </div>
 
               <div>
@@ -232,7 +232,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   required
                   className="mt-2"
                 />
-                <p className="text-xs text-[var(--purple-lavender)] mt-1">Pre-filled amount</p>
+                <p className="text-xs text-brand-purple  mt-1">Pre-filled amount</p>
               </div>
             </div>
 
@@ -240,7 +240,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
             <div className="flex items-center justify-between pt-2">
               <div>
                 <Label htmlFor="allow_donation">Allow Donations</Label>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Members can pay more than minimum
                 </p>
               </div>
@@ -252,7 +252,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                   onChange={(e) => setFormData({ ...formData, allow_donation: e.target.checked })}
                   className="sr-only peer"
                 />
-                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--purple-lavender)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-purple /20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
               </label>
             </div>
           </div>
@@ -283,7 +283,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
               <h3 className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Custom Billing Period
               </h3>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Set recurring date range (e.g., Jan 1 - Dec 31 for calendar year)
               </p>
 
@@ -361,7 +361,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
           <div className="flex items-center justify-between">
             <div>
               <Label htmlFor="active">Active Status</Label>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Inactive plans won't appear for new subscriptions
               </p>
             </div>
@@ -373,7 +373,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
                 onChange={(e) => setFormData({ ...formData, active: e.target.checked })}
                 className="sr-only peer"
               />
-              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-[var(--purple-lavender)]/20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
+              <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-brand-purple /20 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-background after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[var(--green-light)]"></div>
             </label>
           </div>
 
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index 1967772..ccd1431 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -105,7 +105,7 @@ const PublicNavbar = () => {
         </header>
 
         {/* Main Header - Navigation */}
-        <header className=" bg-[var(--purple-lavender)] px-[20px] py-2 flex justify-between items-center">
+        <header className=" bg-brand-purple  px-[20px] py-2 flex justify-between items-center">
           <Link to="/">
             <img src={loafLogo} alt="LOAF Logo" className="h-16 w-16 sm:h-20 sm:w-20 md:h-28 md:w-28 object-contain" />
           </Link>
@@ -204,7 +204,7 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-[var(--purple-lavender)] shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
diff --git a/src/components/RejectionDialog.js b/src/components/RejectionDialog.js
index 516a7d5..172766e 100644
--- a/src/components/RejectionDialog.js
+++ b/src/components/RejectionDialog.js
@@ -41,17 +41,17 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
               Reject Application
             </DialogTitle>
           </div>
-          <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             You are about to reject <strong>{user?.first_name} {user?.last_name}</strong>'s membership application.
           </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4 py-4">
           <div className="bg-[var(--lavender-400)] border border-[var(--neutral-800)] rounded-lg p-4">
-            <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Applicant:</strong> {user?.email}
             </p>
-            <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <strong>Status:</strong> {user?.status}
             </p>
           </div>
@@ -74,7 +74,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
             {error && (
               <p className="text-sm text-red-500">{error}</p>
             )}
-            <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               The applicant will receive an email with this reason.
             </p>
           </div>
@@ -85,7 +85,7 @@ export default function RejectionDialog({ open, onOpenChange, onConfirm, user, l
             type="button"
             onClick={handleClose}
             variant="outline"
-            className="border-2 border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-6"
+            className="border-2 border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-6"
             disabled={loading}
           >
             <X className="h-4 w-4 mr-2" />
diff --git a/src/components/WordPressImportWizard.js b/src/components/WordPressImportWizard.js
index 9885f98..9d0d45a 100644
--- a/src/components/WordPressImportWizard.js
+++ b/src/components/WordPressImportWizard.js
@@ -371,14 +371,14 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Upload WordPress CSV Export</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     Select the WordPress user export CSV file. The file will be analyzed for data quality issues.
                 </p>
             </div>
 
             <Card className="p-6 border-2 border-dashed border-[var(--neutral-800)] bg-[var(--lavender-400)]">
                 <div className="flex flex-col items-center gap-4">
-                    <Upload className="h-12 w-12 text-[var(--purple-lavender)]" />
+                    <Upload className="h-12 w-12 text-brand-purple " />
                     <div className="text-center">
                         <Input
                             type="file"
@@ -387,7 +387,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                             className="max-w-xs"
                         />
                         {uploadedFile && (
-                            <p className="text-sm text-[var(--purple-lavender)] mt-2">
+                            <p className="text-sm text-brand-purple  mt-2">
                                 Selected: {uploadedFile.name}
                             </p>
                         )}
@@ -399,7 +399,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <Button
                     onClick={handleUpload}
                     disabled={uploading}
-                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
+                    className="w-full bg-brand-purple  hover:bg-[var(--purple-ink)]"
                 >
                     {uploading ? (
                         <>
@@ -466,7 +466,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Field Mapping</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     WordPress fields have been automatically mapped to LOAF platform fields.
                 </p>
             </div>
@@ -538,7 +538,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Review & Adjust User Status</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     Review suggested status mappings and override as needed before import.
                 </p>
             </div>
@@ -550,7 +550,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                         checked={selectedRows.size === previewData.length && previewData.length > 0}
                         onCheckedChange={toggleSelectAll}
                     />
-                    <span className="text-sm text-[var(--purple-lavender)] font-medium">
+                    <span className="text-sm text-brand-purple  font-medium">
                         {selectedRows.size > 0 ? `${selectedRows.size} selected` : 'Select all'}
                     </span>
                     {selectedRows.size > 0 && (
@@ -572,7 +572,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Data table */}
             {loading ? (
                 <div className="flex items-center justify-center py-12">
-                    <Loader2 className="h-8 w-8 animate-spin text-[var(--purple-lavender)]" />
+                    <Loader2 className="h-8 w-8 animate-spin text-brand-purple " />
                 </div>
             ) : (
                 <div className="border rounded-lg overflow-hidden">
@@ -651,7 +651,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {/* Pagination */}
             {totalPages > 1 && (
                 <div className="flex items-center justify-between">
-                    <p className="text-sm text-[var(--purple-lavender)]">
+                    <p className="text-sm text-brand-purple ">
                         Page {currentPage} of {totalPages}
                     </p>
                     <div className="flex gap-2">
@@ -690,22 +690,22 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             <div className="space-y-6">
                 <div>
                     <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Import Preview</h3>
-                    <p className="text-sm text-[var(--purple-lavender)]">
+                    <p className="text-sm text-brand-purple ">
                         Review the final import settings before execution.
                     </p>
                 </div>
 
                 <div className="grid md:grid-cols-3 gap-4">
                     <Card className="p-6">
-                        <p className="text-sm text-[var(--purple-lavender)]">Total Users</p>
+                        <p className="text-sm text-brand-purple ">Total Users</p>
                         <p className="text-3xl font-semibold text-[var(--purple-ink)]">{analysisResult?.total_rows}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-[var(--purple-lavender)]">Status Overrides</p>
+                        <p className="text-sm text-brand-purple ">Status Overrides</p>
                         <p className="text-3xl font-semibold text-[var(--purple-ink)]">{overrideCount}</p>
                     </Card>
                     <Card className="p-6">
-                        <p className="text-sm text-[var(--purple-lavender)]">Expected Imports</p>
+                        <p className="text-sm text-brand-purple ">Expected Imports</p>
                         <p className="text-3xl font-semibold text-[var(--purple-ink)]">{analysisResult?.valid_rows}</p>
                     </Card>
                 </div>
@@ -715,15 +715,15 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                     <div className="space-y-3">
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[var(--purple-lavender)]">Send password reset emails to all imported users</span>
+                            <span className="text-sm text-brand-purple ">Send password reset emails to all imported users</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[var(--purple-lavender)]">Skip rows with errors and continue import</span>
+                            <span className="text-sm text-brand-purple ">Skip rows with errors and continue import</span>
                         </div>
                         <div className="flex items-center gap-2">
                             <CheckCircle className="h-5 w-5 text-green-600" />
-                            <span className="text-sm text-[var(--purple-lavender)]">Full rollback capability available after import</span>
+                            <span className="text-sm text-brand-purple ">Full rollback capability available after import</span>
                         </div>
                     </div>
                 </Card>
@@ -751,7 +751,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">
                     {importing ? 'Import in Progress...' : 'Ready to Import'}
                 </h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     {importing
                         ? 'Please wait while users are imported. This may take a few minutes.'
                         : 'Click "Start Import" to begin importing users.'}
@@ -761,7 +761,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {importing && (
                 <div className="space-y-4">
                     <Progress value={importProgress} className="w-full" />
-                    <p className="text-center text-sm text-[var(--purple-lavender)]">
+                    <p className="text-center text-sm text-brand-purple ">
                         {importProgress.toFixed(1)}% complete
                     </p>
                 </div>
@@ -770,7 +770,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
             {!importing && !importResults && (
                 <Button
                     onClick={handleExecuteImport}
-                    className="w-full bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] py-6 text-lg"
+                    className="w-full bg-brand-purple  hover:bg-[var(--purple-ink)] py-6 text-lg"
                 >
                     <Play className="mr-2 h-5 w-5" />
                     Start Import
@@ -787,7 +787,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
         <div className="space-y-6">
             <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2">Import Complete</h3>
-                <p className="text-sm text-[var(--purple-lavender)]">
+                <p className="text-sm text-brand-purple ">
                     Review the import results and download error reports if needed.
                 </p>
             </div>
@@ -854,7 +854,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                 Confirm Rollback
                             </DialogTitle>
                         </div>
-                        <DialogDescription className="text-[var(--purple-lavender)]">
+                        <DialogDescription className="text-brand-purple ">
                             This will permanently delete{' '}
                             <strong>{importResults?.successful_rows} users</strong> that were imported.
                             This action cannot be undone.
@@ -901,7 +901,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                     <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard
                     </DialogTitle>
-                    <DialogDescription className="text-[var(--purple-lavender)]">
+                    <DialogDescription className="text-brand-purple ">
                         Import WordPress users with interactive status review and full rollback capability
                     </DialogDescription>
                 </DialogHeader>
@@ -919,7 +919,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                     <div
                                         className={`
                                             w-10 h-10 rounded-full flex items-center justify-center
-                                            ${isCurrent ? 'bg-[var(--purple-lavender)] text-white' : ''}
+                                            ${isCurrent ? 'bg-brand-purple  text-white' : ''}
                                             ${isCompleted ? 'bg-green-600 text-white' : ''}
                                             ${!isCurrent && !isCompleted ? 'bg-gray-200 text-gray-600' : ''}
                                         `}
@@ -962,7 +962,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                         <Button
                             onClick={handleNext}
                             disabled={!canProceed()}
-                            className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
+                            className="bg-brand-purple  hover:bg-[var(--purple-ink)]"
                         >
                             Next
                             <ChevronRight className="h-4 w-4 ml-2" />
@@ -975,7 +975,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
                                 onOpenChange(false);
                                 if (onSuccess) onSuccess();
                             }}
-                            className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)]"
+                            className="bg-brand-purple  hover:bg-[var(--purple-ink)]"
                         >
                             Close
                         </Button>
diff --git a/src/components/registration/RegistrationStep1.js b/src/components/registration/RegistrationStep1.js
index e012931..9278070 100644
--- a/src/components/registration/RegistrationStep1.js
+++ b/src/components/registration/RegistrationStep1.js
@@ -40,7 +40,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="first-name-input"
             />
           </div>
@@ -52,7 +52,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="last-name-input"
             />
           </div>
@@ -69,7 +69,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="phone-input"
             />
           </div>
@@ -82,7 +82,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.date_of_birth}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="dob-input"
             />
           </div>
@@ -112,7 +112,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.city}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="city-input"
             />
           </div>
@@ -124,7 +124,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.state}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="state-input"
             />
           </div>
@@ -136,7 +136,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               required
               value={formData.zipcode}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="zipcode-input"
             />
           </div>
@@ -179,7 +179,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_first_name"
               value={formData.partner_first_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="partner-first-name-input"
             />
           </div>
@@ -190,7 +190,7 @@ const RegistrationStep1 = ({ formData, setFormData, handleInputChange }) => {
               name="partner_last_name"
               value={formData.partner_last_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="partner-last-name-input"
             />
           </div>
diff --git a/src/components/registration/RegistrationStep2.js b/src/components/registration/RegistrationStep2.js
index 8f217d2..6455fe2 100644
--- a/src/components/registration/RegistrationStep2.js
+++ b/src/components/registration/RegistrationStep2.js
@@ -36,7 +36,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
         <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Newsletter Publication Preferences *
         </h2>
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Please check what information may be published in LOAF Newsletter
         </p>
 
@@ -110,10 +110,10 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             value={formData.referred_by_member_name}
             onChange={handleInputChange}
             placeholder="Enter member name or email"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="referral-input"
           />
-          <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If referred by a current member, you may skip the event attendance requirement.
           </p>
         </div>
@@ -124,7 +124,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
         <h2 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Volunteer Interests (Optional)
         </h2>
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           I may at some time be interested in volunteering with LOAF in the following ways (training is provided)
         </p>
 
@@ -158,7 +158,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
             I am requesting for scholarship
           </Label>
         </div>
-        <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Scholarship information is kept confidential
         </p>
 
@@ -174,7 +174,7 @@ const RegistrationStep2 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell us why you're requesting a scholarship..."
               rows={4}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
         )}
diff --git a/src/components/registration/RegistrationStep3.js b/src/components/registration/RegistrationStep3.js
index 19b9e66..e20a183 100644
--- a/src/components/registration/RegistrationStep3.js
+++ b/src/components/registration/RegistrationStep3.js
@@ -27,7 +27,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
           Members Directory
         </h2>
 
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Would you like to be displayed on our private members directory? (optional and you can change the answer later)
         </p>
 
@@ -38,7 +38,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${formData.show_in_directory
                 ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
-                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
+                : 'border-[var(--neutral-800)] hover:border-brand-purple '
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: true }))}
@@ -63,7 +63,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               p-4 rounded-xl border-2 cursor-pointer transition-all
               ${!formData.show_in_directory
                 ? 'border-[var(--orange-light)] bg-[var(--orange-light)]/5'
-                : 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
+                : 'border-[var(--neutral-800)] hover:border-brand-purple '
               }
             `}
             onClick={() => setFormData(prev => ({ ...prev, show_in_directory: false }))}
@@ -88,7 +88,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
       {/* Conditional Directory Fields */}
       {formData.show_in_directory && (
         <div className="space-y-4 mt-6 p-6 bg-background rounded-xl border border-[var(--neutral-800)]">
-          <p className="text-[var(--purple-lavender)] text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Below, choose what information you would like include in the Members Only Directory.
             (If you ever want to update this information, remember the Directory Section and Account Section are separate)
           </p>
@@ -101,7 +101,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="email"
               value={formData.directory_email}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -114,7 +114,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               onChange={handleInputChange}
               placeholder="Tell other members about yourself..."
               rows={4}
-              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -125,7 +125,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_address"
               value={formData.directory_address}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -137,7 +137,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="tel"
               value={formData.directory_phone}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -149,7 +149,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               type="date"
               value={formData.directory_dob}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -162,7 +162,7 @@ const RegistrationStep3 = ({ formData, setFormData, handleInputChange }) => {
               name="directory_partner_name"
               value={formData.directory_partner_name}
               onChange={handleInputChange}
-              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
         </div>
diff --git a/src/components/registration/RegistrationStep4.js b/src/components/registration/RegistrationStep4.js
index 33d0c12..3a1f913 100644
--- a/src/components/registration/RegistrationStep4.js
+++ b/src/components/registration/RegistrationStep4.js
@@ -11,7 +11,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
           Account Credentials
         </h2>
 
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Your email is also your username that you can use to login.
           Please note you can only login after your application is validated.
         </p>
@@ -28,7 +28,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.email}
             onChange={handleInputChange}
             placeholder="your.email@example.com"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="email-input"
           />
         </div>
@@ -43,10 +43,10 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.password}
             onChange={handleInputChange}
             placeholder="At least 6 characters"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="password-input"
           />
-          <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Must be at least 6 characters long
           </p>
         </div>
@@ -60,7 +60,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
             value={formData.confirmPassword}
             onChange={handleInputChange}
             placeholder="Re-enter your password"
-            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+            className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             data-testid="confirm-password-input"
           />
           {formData.confirmPassword && formData.password !== formData.confirmPassword && (
@@ -79,7 +79,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
               name="accepts_tos"
               checked={formData.accepts_tos || false}
               onChange={handleInputChange}
-              className="mt-1 w-4 h-4 text-[var(--purple-lavender)] border-gray-300 rounded focus:ring-[var(--purple-lavender)]"
+              className="mt-1 w-4 h-4 text-brand-purple  border-gray-300 rounded focus:ring-brand-purple "
               required
               data-testid="tos-checkbox"
             />
@@ -89,7 +89,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="/become-a-member/terms-of-service"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+                className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
               >
                 Terms of Service
               </a>
@@ -98,7 +98,7 @@ const RegistrationStep4 = ({ formData, handleInputChange }) => {
                 href="become-a-member/privacy-policy"
                 target="_blank"
                 rel="noopener noreferrer"
-                className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+                className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
               >
                 Privacy Policy
               </a>
diff --git a/src/components/registration/RegistrationStepIndicator.js b/src/components/registration/RegistrationStepIndicator.js
index 0362bc4..5c5e28a 100644
--- a/src/components/registration/RegistrationStepIndicator.js
+++ b/src/components/registration/RegistrationStepIndicator.js
@@ -23,14 +23,14 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
                   ? 'bg-[var(--orange-light)] text-white scale-110 shadow-lg'
                   : currentStep > step.number
                     ? 'bg-[var(--green-light)] text-white'
-                    : 'bg-[var(--neutral-800)] text-[var(--purple-lavender)]'
+                    : 'bg-[var(--neutral-800)] text-brand-purple '
                 }
               `}>
                 {currentStep > step.number ? '✓' : step.number}
               </div>
               <span className={`
                 text-sm mt-2 font-medium transition-colors
-                ${currentStep === step.number ? 'text-[var(--orange-light)]' : 'text-[var(--purple-lavender)]'}
+                ${currentStep === step.number ? 'text-[var(--orange-light)]' : 'text-brand-purple '}
               `} style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {step.title}
               </span>
@@ -52,7 +52,7 @@ const RegistrationStepIndicator = ({ currentStep, totalSteps = 4 }) => {
       </div>
 
       {/* Step Counter */}
-      <p className="text-center text-[var(--purple-lavender)] mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+      <p className="text-center text-brand-purple  mt-6 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
         Step <span className="font-semibold text-[var(--orange-light)]">{currentStep}</span> of {totalSteps}
       </p>
     </div>
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
index 91db9be..a59bdf6 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -1,47 +1,42 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva } from "class-variance-authority";
+import { cva } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
+const buttonVariants = cva("btn", {
+  variants: {
+    variant: {
+      default: "btn-primary",
+      secondary: "btn-secondary",
+      ghost: "btn-ghost",
+      outline: "btn-outline",
+      accent: "btn-accent",
+      destructive: "btn-destructive",
+      link: "btn-link",
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
+    size: {
+      default: "btn-md",
+      sm: "btn-sm",
+      lg: "btn-lg",
+      icon: "btn-icon",
     },
-  }
-)
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+  },
+})
 
 const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot : "button"
   return (
     <Comp
-      className={cn(buttonVariants({ variant, size, className }))}
+      className={cn(buttonVariants({ variant, size }), className)}
       ref={ref}
-      {...props} />
-  );
+      {...props}
+    />
+  )
 })
 Button.displayName = "Button"
 
diff --git a/src/components/ui/tabs.jsx b/src/components/ui/tabs.jsx
index 17f5f86..5b36bcf 100644
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-[var(--purple-lavender)] rounded-2xl px-3 py-1 text-[var(--purple-lavender)] text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple  rounded-2xl px-3 py-1 text-brand-purple  text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
       className
     )}
     {...props}
diff --git a/src/pages/AcceptInvitation.js b/src/pages/AcceptInvitation.js
index 486438c..8f3b489 100644
--- a/src/pages/AcceptInvitation.js
+++ b/src/pages/AcceptInvitation.js
@@ -163,7 +163,7 @@ const AcceptInvitation = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
       admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
       member: { label: 'Member', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' }
     };
@@ -181,7 +181,7 @@ const AcceptInvitation = () => {
     return (
       <div className="min-h-screen bg-gradient-to-br from-[var(--lavender-700)] to-white flex items-center justify-center p-4">
         <Card className="w-full max-w-md p-12 bg-background rounded-2xl border border-[var(--neutral-800)] text-center">
-          <Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
+          <Loader2 className="h-12 w-12 text-brand-purple  mx-auto mb-4 animate-spin" />
           <p className="text-lg text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Verifying your invitation...
           </p>
@@ -198,12 +198,12 @@ const AcceptInvitation = () => {
           <h1 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Invalid Invitation
           </h1>
-          <p className="text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {error}
           </p>
           <Button
             onClick={() => navigate('/login')}
-            className="rounded-xl bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white"
+            className="rounded-xl bg-brand-purple  hover:bg-[var(--purple-ink)] text-white"
           >
             Go to Login
           </Button>
@@ -229,7 +229,7 @@ const AcceptInvitation = () => {
           <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF! 🎉
           </h1>
-          <p className="text-xl text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-xl text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your account has been created successfully.
           </p>
 
@@ -237,7 +237,7 @@ const AcceptInvitation = () => {
           <div className="mb-8 p-6 bg-gradient-to-r from-[var(--neutral-800)] to-[var(--lavender-700)] rounded-xl">
             <div className="grid md:grid-cols-2 gap-4 text-left">
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Name
                 </p>
                 <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -245,7 +245,7 @@ const AcceptInvitation = () => {
                 </p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Email
                 </p>
                 <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -253,13 +253,13 @@ const AcceptInvitation = () => {
                 </p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Role
                 </p>
                 <div>{getRoleBadge(successUser?.role)}</div>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Status
                 </p>
                 <Badge className="bg-[var(--green-light)] text-white px-4 py-2 rounded-full text-sm">
@@ -295,14 +295,14 @@ const AcceptInvitation = () => {
         {/* Header */}
         <div className="text-center mb-8">
           <div className="flex justify-center mb-4">
-            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] flex items-center justify-center">
+            <div className="h-16 w-16 rounded-full bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] flex items-center justify-center">
               <Mail className="h-8 w-8 text-white" />
             </div>
           </div>
           <h1 className="text-3xl md:text-4xl font-semibold text-[var(--purple-ink)] mb-3" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome to LOAF!
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Complete your profile to accept the invitation
           </p>
         </div>
@@ -311,7 +311,7 @@ const AcceptInvitation = () => {
         <div className="mb-8 p-6 bg-gradient-to-r from-[var(--neutral-800)] to-[var(--lavender-700)] rounded-xl">
           <div className="grid md:grid-cols-2 gap-4 text-sm">
             <div>
-              <p className="text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Email Address
               </p>
               <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -319,13 +319,13 @@ const AcceptInvitation = () => {
               </p>
             </div>
             <div>
-              <p className="text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Role
               </p>
               <div>{getRoleBadge(invitation?.role)}</div>
             </div>
             <div className="md:col-span-2">
-              <p className="text-[var(--purple-lavender)] mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-1 flex items-center gap-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <Calendar className="h-4 w-4" />
                 Invitation Expires
               </p>
@@ -350,7 +350,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.password}
                   onChange={(e) => handleChange('password', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Minimum 8 characters"
                 />
                 {formErrors.password && (
@@ -367,7 +367,7 @@ const AcceptInvitation = () => {
                   type="password"
                   value={formData.confirmPassword}
                   onChange={(e) => handleChange('confirmPassword', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Re-enter password"
                 />
                 {formErrors.confirmPassword && (
@@ -386,7 +386,7 @@ const AcceptInvitation = () => {
                   id="first_name"
                   value={formData.first_name}
                   onChange={(e) => handleChange('first_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="John"
                 />
                 {formErrors.first_name && (
@@ -402,7 +402,7 @@ const AcceptInvitation = () => {
                   id="last_name"
                   value={formData.last_name}
                   onChange={(e) => handleChange('last_name', e.target.value)}
-                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="Doe"
                 />
                 {formErrors.last_name && (
@@ -421,7 +421,7 @@ const AcceptInvitation = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={(e) => handleChange('phone', e.target.value)}
-                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 placeholder="(555) 123-4567"
               />
               {formErrors.phone && (
@@ -445,7 +445,7 @@ const AcceptInvitation = () => {
                     id="address"
                     value={formData.address}
                     onChange={(e) => handleChange('address', e.target.value)}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     placeholder="123 Main St"
                   />
                 </div>
@@ -458,7 +458,7 @@ const AcceptInvitation = () => {
                       id="city"
                       value={formData.city}
                       onChange={(e) => handleChange('city', e.target.value)}
-                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="San Francisco"
                     />
                   </div>
@@ -469,7 +469,7 @@ const AcceptInvitation = () => {
                       id="state"
                       value={formData.state}
                       onChange={(e) => handleChange('state', e.target.value)}
-                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="CA"
                       maxLength={2}
                     />
@@ -481,7 +481,7 @@ const AcceptInvitation = () => {
                       id="zipcode"
                       value={formData.zipcode}
                       onChange={(e) => handleChange('zipcode', e.target.value)}
-                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="94102"
                     />
                   </div>
@@ -495,7 +495,7 @@ const AcceptInvitation = () => {
                     type="date"
                     value={formData.date_of_birth}
                     onChange={(e) => handleChange('date_of_birth', e.target.value)}
-                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
               </>
@@ -526,11 +526,11 @@ const AcceptInvitation = () => {
 
         {/* Footer Note */}
         <div className="mt-6 text-center">
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Already have an account?{' '}
             <button
               onClick={() => navigate('/login')}
-              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+              className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
             >
               Sign in instead
             </button>
diff --git a/src/pages/ChangePasswordRequired.js b/src/pages/ChangePasswordRequired.js
index 64e76d5..af26d75 100644
--- a/src/pages/ChangePasswordRequired.js
+++ b/src/pages/ChangePasswordRequired.js
@@ -95,7 +95,7 @@ const ChangePasswordRequired = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Password Change Required
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Your password was reset by an administrator. Please create a new password to continue.
             </p>
           </div>
@@ -111,7 +111,7 @@ const ChangePasswordRequired = () => {
                 value={formData.currentPassword}
                 onChange={handleInputChange}
                 placeholder="Enter temporary password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -125,7 +125,7 @@ const ChangePasswordRequired = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -139,14 +139,14 @@ const ChangePasswordRequired = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
-            <div className="bg-[var(--lavender-300)] border-l-4 border-[var(--purple-lavender)] p-4 rounded-lg">
+            <div className="bg-[var(--lavender-300)] border-l-4 border-brand-purple  p-4 rounded-lg">
               <div className="flex items-start">
-                <Lock className="h-5 w-5 text-[var(--purple-lavender)] mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <Lock className="h-5 w-5 text-brand-purple  mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <p className="font-medium text-[var(--purple-ink)] mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
@@ -169,7 +169,7 @@ const ChangePasswordRequired = () => {
               <button
                 type="button"
                 onClick={handleLogout}
-                className="text-[var(--purple-lavender)] hover:text-[var(--orange-light)] text-sm underline"
+                className="text-brand-purple  hover:text-[var(--orange-light)] text-sm underline"
               >
                 Logout instead
               </button>
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index b698627..fe2b335 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -120,21 +120,21 @@ const Dashboard = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Welcome Back, {user?.first_name}!
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Here's an overview of your membership status and upcoming events.
           </p>
         </div>
 
         {/* Email Verification Alert */}
         {user && !user.email_verified && (
-          <Card className="p-6 bg-[var(--lavender-300)] border-2 border-[var(--purple-lavender)] mb-8">
+          <Card className="p-6 bg-[var(--lavender-300)] border-2 border-brand-purple  mb-8">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-brand-purple  flex-shrink-0 mt-1" />
               <div className="flex-1">
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Verify Your Email Address
                 </h3>
-                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Please verify your email address to complete your registration.
                   Check your inbox for the verification link.
                 </p>
@@ -142,7 +142,7 @@ const Dashboard = () => {
                   onClick={handleResendVerification}
                   disabled={resendLoading}
                   variant="outline"
-                  className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
+                  className="border-2 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
                 >
                   <Mail className="h-4 w-4 mr-2" />
                   {resendLoading ? 'Sending...' : 'Resend Verification Email'}
@@ -162,7 +162,7 @@ const Dashboard = () => {
               <div className="mb-4">
                 {getStatusBadge(user?.status)}
               </div>
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {getStatusMessage(user?.status)}
               </p>
             </div>
@@ -187,15 +187,15 @@ const Dashboard = () => {
             </h3>
             <div className="space-y-4">
               <div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
                 <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.email}</p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
                 <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user?.role}</p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
                 <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
                 </p>
@@ -203,13 +203,13 @@ const Dashboard = () => {
               {user?.subscription_start_date && user?.subscription_end_date && (
                 <>
                   <div className="pt-4 border-t border-[var(--neutral-800)]">
-                    <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
+                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Membership Period</p>
                     <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {new Date(user.subscription_start_date).toLocaleDateString()} - {new Date(user.subscription_end_date).toLocaleDateString()}
                     </p>
                   </div>
                   <div>
-                    <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
+                    <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Days Remaining</p>
                     <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {Math.max(0, Math.ceil((new Date(user.subscription_end_date) - new Date()) / (1000 * 60 * 60 * 24)))} days
                     </p>
@@ -228,7 +228,7 @@ const Dashboard = () => {
               <Link to="/events">
                 <Button
                   variant="ghost"
-                  className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)]"
+                  className="text-[var(--orange-light)] hover:text-brand-purple "
                   data-testid="view-all-events-button"
                 >
                   View All
@@ -237,26 +237,26 @@ const Dashboard = () => {
             </div>
 
             {loading ? (
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
             ) : events.length > 0 ? (
               <div className="space-y-4">
                 {events.map((event) => (
                   <Link to={`/events/${event.id}`} key={event.id}>
                     <div
-                      className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] hover:shadow-md transition-all cursor-pointer"
+                      className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-brand-purple  hover:shadow-md transition-all cursor-pointer"
                       data-testid={`event-card-${event.id}`}
                     >
                       <div className="flex items-start gap-4">
                         <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                          <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
+                          <Calendar className="h-6 w-6 text-brand-purple " />
                         </div>
                         <div className="flex-1">
                           <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {new Date(event.start_at).toLocaleDateString()} at{' '}
                             {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                           </p>
-                          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                         </div>
                       </div>
                     </div>
@@ -266,8 +266,8 @@ const Dashboard = () => {
             ) : (
               <div className="text-center py-12">
                 <Calendar className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
+                <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No upcoming events at the moment.</p>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Check back later for new events!</p>
               </div>
             )}
           </Card>
@@ -280,7 +280,7 @@ const Dashboard = () => {
               <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Application Under Review
               </h3>
-              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your membership application is being reviewed by our admin team. You'll be notified once validated!
               </p>
             </div>
@@ -289,15 +289,15 @@ const Dashboard = () => {
 
         {/* Payment Prompt for payment_pending status */}
         {user?.status === 'payment_pending' && (
-          <Card className="mt-8 p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border-2 border-[var(--purple-lavender)]">
+          <Card className="mt-8 p-8 bg-gradient-to-br from-[var(--neutral-800)]/20 to-[var(--lavender-300)]/20 rounded-2xl border-2 border-brand-purple ">
             <div className="text-center">
               <div className="mb-4">
-                <AlertCircle className="h-16 w-16 text-[var(--purple-lavender)] mx-auto" />
+                <AlertCircle className="h-16 w-16 text-brand-purple  mx-auto" />
               </div>
               <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Complete Your Payment
               </h3>
-              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Great news! Your membership application has been validated. Complete your payment to activate your membership and gain full access to all member benefits.
               </p>
               <Link to="/plans">
@@ -322,7 +322,7 @@ const Dashboard = () => {
           </div>
 
           {activityLoading ? (
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event activity...</p>
           ) : eventActivity ? (
             <div className="space-y-8">
               {/* Stats Cards */}
@@ -330,10 +330,10 @@ const Dashboard = () => {
                 <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
                   <div className="flex items-center gap-4">
                     <div className="bg-[var(--neutral-800)]/20 p-4 rounded-lg">
-                      <Calendar className="h-8 w-8 text-[var(--purple-lavender)]" />
+                      <Calendar className="h-8 w-8 text-brand-purple " />
                     </div>
                     <div>
-                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
                       <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {eventActivity.total_rsvps}
                       </p>
@@ -346,7 +346,7 @@ const Dashboard = () => {
                       <CheckCircle className="h-8 w-8 text-[var(--green-light)]" />
                     </div>
                     <div>
-                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Events Attended</p>
                       <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {eventActivity.total_attended}
                       </p>
@@ -364,15 +364,15 @@ const Dashboard = () => {
                   <div className="space-y-3">
                     {eventActivity.upcoming_events.map((event) => (
                       <Link to={`/events/${event.id}`} key={event.id}>
-                        <div className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-[var(--purple-lavender)] hover:shadow-md transition-all">
+                        <div className="p-4 border border-[var(--neutral-800)] rounded-xl hover:border-brand-purple  hover:shadow-md transition-all">
                           <div className="flex items-start justify-between gap-4">
                             <div className="flex-1">
                               <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                              <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 {new Date(event.start_at).toLocaleDateString()} at{' '}
                                 {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                               </p>
-                              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
+                              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</p>
                             </div>
                             <Badge className={
                               event.rsvp_status === 'yes' ? 'bg-[var(--green-light)] text-white' :
@@ -402,7 +402,7 @@ const Dashboard = () => {
                         <div className="flex items-start justify-between gap-4">
                           <div className="flex-1">
                             <h4 className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>{event.title}</h4>
-                            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {new Date(event.start_at).toLocaleDateString()} at{' '}
                               {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                             </p>
@@ -412,7 +412,7 @@ const Dashboard = () => {
                               {event.attended ? 'Attended' : 'Did not attend'}
                             </Badge>
                             {event.attended && event.attended_at && (
-                              <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 Checked in: {new Date(event.attended_at).toLocaleDateString()}
                               </p>
                             )}
@@ -422,7 +422,7 @@ const Dashboard = () => {
                     ))}
                   </div>
                   {eventActivity.past_events.length > 5 && (
-                    <p className="text-sm text-center text-[var(--purple-lavender)] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-sm text-center text-brand-purple  mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Showing 5 of {eventActivity.past_events.length} past events
                     </p>
                   )}
@@ -438,7 +438,7 @@ const Dashboard = () => {
                       <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                         No Event Activity Yet
                       </h3>
-                      <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Browse upcoming events and RSVP to start building your event history!
                       </p>
                       <Link to="/events">
@@ -455,7 +455,7 @@ const Dashboard = () => {
             <Card className="p-12 bg-background rounded-2xl border border-[var(--neutral-800)]">
               <div className="text-center">
                 <AlertCircle className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Failed to load event activity. Please try refreshing the page.
                 </p>
               </div>
diff --git a/src/pages/DonationSuccess.js b/src/pages/DonationSuccess.js
index 7d65b3f..58a7bd3 100644
--- a/src/pages/DonationSuccess.js
+++ b/src/pages/DonationSuccess.js
@@ -37,7 +37,7 @@ const DonationSuccess = () => {
 
             {/* Message */}
             <div className="space-y-4 mb-8">
-              <p className="text-xl text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-xl text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Your generous contribution helps support our community and continue our mission.
               </p>
 
@@ -48,12 +48,12 @@ const DonationSuccess = () => {
                     Your Support Makes a Difference
                   </span>
                 </div>
-                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A receipt for your donation has been sent to your email address.
                 </p>
               </div>
 
-              <p className="text-base text-[var(--purple-lavender)] pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-brand-purple  pt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 We deeply appreciate your support and commitment to LOAF's mission of building a vibrant, inclusive community.
               </p>
             </div>
@@ -62,7 +62,7 @@ const DonationSuccess = () => {
             <div className="flex flex-col sm:flex-row gap-4 justify-center">
               <Button
                 onClick={() => navigate('/')}
-                className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
+                className="bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full px-8 py-6 text-lg font-medium shadow-lg"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Return to Home
@@ -70,7 +70,7 @@ const DonationSuccess = () => {
               <Button
                 onClick={() => navigate('/donate')}
                 variant="outline"
-                className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]/20 rounded-full px-8 py-6 text-lg font-medium"
+                className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--neutral-800)]/20 rounded-full px-8 py-6 text-lg font-medium"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 Make Another Donation
@@ -80,12 +80,12 @@ const DonationSuccess = () => {
 
           {/* Additional Info */}
           <div className="mt-12 text-center">
-            <p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Have questions about your donation?
             </p>
             <a
               href="mailto:support@loaf.org"
-              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium transition-colors"
+              className="text-[var(--orange-light)] hover:text-brand-purple  font-medium transition-colors"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Contact us at support@loaf.org
diff --git a/src/pages/EventDetails.js b/src/pages/EventDetails.js
index 1e389af..8422274 100644
--- a/src/pages/EventDetails.js
+++ b/src/pages/EventDetails.js
@@ -51,7 +51,7 @@ const EventDetails = () => {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading event...</p>
         </div>
       </div>
     );
@@ -68,7 +68,7 @@ const EventDetails = () => {
       <div className="max-w-4xl mx-auto px-6 py-12">
         <button
           onClick={() => navigate('/events')}
-          className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors mb-8"
+          className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors mb-8"
           data-testid="back-to-events-button"
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
@@ -79,7 +79,7 @@ const EventDetails = () => {
           <div className="mb-8">
             <div className="flex items-center gap-4 mb-6">
               <div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
-                <Calendar className="h-10 w-10 text-[var(--purple-lavender)]" />
+                <Calendar className="h-10 w-10 text-brand-purple " />
               </div>
               {event.user_rsvp_status && (
                 <Badge
@@ -102,7 +102,7 @@ const EventDetails = () => {
             </h1>
 
             <div className="space-y-4 text-lg">
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleDateString('en-US', {
@@ -113,18 +113,18 @@ const EventDetails = () => {
                   })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <Calendar className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} -{' '}
                   {new Date(event.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                 </span>
               </div>
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <MapPin className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
               </div>
-              <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+              <div className="flex items-center gap-3 text-brand-purple ">
                 <Users className="h-5 w-5" />
                 <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.rsvp_count || 0} {event.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -139,7 +139,7 @@ const EventDetails = () => {
               <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About This Event
               </h2>
-              <p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {event.description}
               </p>
             </div>
@@ -168,7 +168,7 @@ const EventDetails = () => {
                 variant="outline"
                 className={`rounded-full px-8 py-6 flex items-center gap-2 border-2 ${event.user_rsvp_status === 'maybe'
                   ? 'border-orange-400 bg-orange-100 text-orange-700'
-                  : 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
+                  : 'border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)]'
                   }`}
                 data-testid="rsvp-maybe-button"
               >
@@ -195,7 +195,7 @@ const EventDetails = () => {
               <h2 className="text-xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Add to Your Calendar
               </h2>
-              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Never miss this event! Add it to your calendar app for reminders.
               </p>
               <AddToCalendarButton
diff --git a/src/pages/Events.js b/src/pages/Events.js
index b221a2f..daa9e08 100644
--- a/src/pages/Events.js
+++ b/src/pages/Events.js
@@ -54,14 +54,14 @@ const Events = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Upcoming Events
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse and RSVP to our community events.
           </p>
         </div>
 
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
           </div>
         ) : events.length > 0 ? (
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
@@ -73,7 +73,7 @@ const Events = () => {
                 >
                   <div className="flex justify-between items-start mb-4">
                     <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                      <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
+                      <Calendar className="h-6 w-6 text-brand-purple " />
                     </div>
                     {getRSVPBadge(event.user_rsvp_status)}
                   </div>
@@ -83,24 +83,24 @@ const Events = () => {
                   </h3>
 
                   {event.description && (
-                    <p className="text-[var(--purple-lavender)] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple  mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {event.description}
                     </p>
                   )}
 
                   <div className="space-y-2 text-sm">
-                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-2 text-brand-purple ">
                       <Calendar className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(event.start_at).toLocaleDateString()} at{' '}
                         {new Date(event.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-2 text-brand-purple ">
                       <MapPin className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
                     </div>
-                    <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-2 text-brand-purple ">
                       <Users className="h-4 w-4" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.rsvp_count || 0} attending</span>
                     </div>
@@ -120,7 +120,7 @@ const Events = () => {
             <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Events Available
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               There are no upcoming events at the moment. Check back later!
             </p>
           </div>
diff --git a/src/pages/ForgotPassword.js b/src/pages/ForgotPassword.js
index a49e87f..2993ad7 100644
--- a/src/pages/ForgotPassword.js
+++ b/src/pages/ForgotPassword.js
@@ -37,7 +37,7 @@ const ForgotPassword = () => {
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/login" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
+          <Link to="/login" className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Login
           </Link>
@@ -48,12 +48,12 @@ const ForgotPassword = () => {
             <>
               <div className="mb-8 text-center">
                 <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
-                  <Mail className="h-8 w-8 text-[var(--purple-lavender)]" />
+                  <Mail className="h-8 w-8 text-brand-purple " />
                 </div>
                 <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Forgot Password?
                 </h1>
-                <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   No worries! Enter your email and we'll send you reset instructions.
                 </p>
               </div>
@@ -69,7 +69,7 @@ const ForgotPassword = () => {
                     value={email}
                     onChange={(e) => setEmail(e.target.value)}
                     placeholder="your.email@example.com"
-                    className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -82,7 +82,7 @@ const ForgotPassword = () => {
                   <ArrowRight className="ml-2 h-5 w-5" />
                 </Button>
 
-                <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Remember your password?{' '}
                   <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                     Login here
@@ -98,11 +98,11 @@ const ForgotPassword = () => {
               <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Check Your Email
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 If an account exists for <span className="font-medium text-[var(--purple-ink)]">{email}</span>,
                 you will receive a password reset link shortly.
               </p>
-              <p className="text-sm text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The link will expire in 1 hour. If you don't see the email, check your spam folder.
               </p>
               <Link to="/login">
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 51e3d2f..8edcd89 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -60,7 +60,7 @@ const Login = () => {
 
       <div className="max-w-md mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
+          <Link to="/" className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
@@ -71,7 +71,7 @@ const Login = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Welcome Back
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Login to access your member dashboard.
             </p>
           </div>
@@ -87,7 +87,7 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 data-testid="login-email-input"
               />
             </div>
@@ -106,7 +106,7 @@ const Login = () => {
                 value={formData.password}
                 onChange={handleInputChange}
                 placeholder="Enter your password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 data-testid="login-password-input"
               />
             </div>
@@ -121,7 +121,7 @@ const Login = () => {
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Don't have an account?{' '}
               <Link to="/register" className="text-[var(--orange-light)] hover:underline font-medium">
                 Register here
diff --git a/src/pages/NotFound.js b/src/pages/NotFound.js
index 812ef47..0ff678b 100644
--- a/src/pages/NotFound.js
+++ b/src/pages/NotFound.js
@@ -20,7 +20,7 @@ const NotFound = () => {
               404
             </h1>
             <div className="absolute inset-0 flex items-center justify-center">
-              <Search className="h-24 w-24 text-[var(--purple-lavender)] opacity-30" />
+              <Search className="h-24 w-24 text-brand-purple  opacity-30" />
             </div>
           </div>
         </div>
@@ -33,7 +33,7 @@ const NotFound = () => {
           Page Not Found
         </h2>
         <p
-          className="text-lg text-[var(--purple-lavender)] mb-8 max-w-md mx-auto"
+          className="text-lg text-brand-purple  mb-8 max-w-md mx-auto"
           style={{ fontFamily: "'Nunito Sans', sans-serif" }}
         >
           Oops! The page you're looking for doesn't exist. It might have been moved or deleted.
@@ -44,14 +44,14 @@ const NotFound = () => {
           <Button
             onClick={() => navigate(-1)}
             variant="outline"
-            className="rounded-xl border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-700)] px-6 py-6"
+            className="rounded-xl border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-700)] px-6 py-6"
           >
             <ArrowLeft className="h-5 w-5 mr-2" />
             Go Back
           </Button>
           <Button
             onClick={() => navigate('/')}
-            className="rounded-xl bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-[var(--purple-lavender)] text-white px-6 py-6"
+            className="rounded-xl bg-gradient-to-r from-brand-purple  to-[var(--purple-ink)] hover:from-[var(--purple-ink)] hover:to-brand-purple  text-white px-6 py-6"
           >
             <Home className="h-5 w-5 mr-2" />
             Back to Home
@@ -61,13 +61,13 @@ const NotFound = () => {
         {/* Help Text */}
         <div className="mt-8 pt-8 border-t border-[var(--neutral-800)]">
           <p
-            className="text-sm text-[var(--purple-lavender)]"
+            className="text-sm text-brand-purple "
             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
           >
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaftx.org"
-              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] font-semibold underline"
+              className="text-brand-purple  hover:text-[var(--purple-ink)] font-semibold underline"
             >
               support@loaftx.org
             </a>
diff --git a/src/pages/PaymentCancel.js b/src/pages/PaymentCancel.js
index 42cff63..d1e9743 100644
--- a/src/pages/PaymentCancel.js
+++ b/src/pages/PaymentCancel.js
@@ -25,7 +25,7 @@ const PaymentCancel = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Cancelled
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple  max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Your payment was cancelled. No charges have been made to your account.
           </p>
         </div>
@@ -37,7 +37,7 @@ const PaymentCancel = () => {
           </h2>
 
           <div className="space-y-6 mb-8">
-            <p className="text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               You cancelled the payment process or closed the checkout page. Your membership has not been activated yet.
             </p>
 
@@ -47,14 +47,14 @@ const PaymentCancel = () => {
               </h3>
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
-                  <CreditCard className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <CreditCard className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Return to the plans page to complete your subscription
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
-                  <Mail className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <Mail className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Contact us if you experienced any issues during checkout
                   </span>
                 </li>
@@ -62,7 +62,7 @@ const PaymentCancel = () => {
             </div>
 
             <div className="bg-[var(--lavender-300)] p-6 rounded-xl">
-              <p className="text-sm text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <span className="font-medium text-[var(--purple-ink)]">Note:</span>{' '}
                 Your membership application is still validated. You can complete payment whenever you're ready.
               </p>
@@ -82,7 +82,7 @@ const PaymentCancel = () => {
             <Button
               onClick={() => navigate('/dashboard')}
               variant="outline"
-              className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="back-to-dashboard-button"
             >
               <ArrowLeft className="mr-2 h-5 w-5" />
@@ -96,13 +96,13 @@ const PaymentCancel = () => {
           <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-3 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
             Need Assistance?
           </h3>
-          <p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             If you encountered any technical issues or have questions about the payment process, our support team is here to help.
           </p>
           <div className="text-center">
             <a
               href="mailto:support@loaf.org"
-              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium text-lg"
+              className="text-[var(--orange-light)] hover:text-brand-purple  font-medium text-lg"
             >
               support@loaf.org
             </a>
diff --git a/src/pages/PaymentSuccess.js b/src/pages/PaymentSuccess.js
index dc94548..34c763b 100644
--- a/src/pages/PaymentSuccess.js
+++ b/src/pages/PaymentSuccess.js
@@ -36,7 +36,7 @@ const PaymentSuccess = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Payment Successful!
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple  max-w-2xl mx-auto mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Thank you for your payment. Your LOAF membership is now active!
           </p>
         </div>
@@ -55,25 +55,25 @@ const PaymentSuccess = () => {
               <ul className="space-y-3">
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Your membership is now active and you have full access to all member benefits
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You can now RSVP and attend members-only events
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Access the community directory and connect with other members
                   </span>
                 </li>
                 <li className="flex items-start gap-3">
                   <CheckCircle className="h-5 w-5 text-[var(--green-light)] flex-shrink-0 mt-0.5" />
-                  <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You'll receive our newsletter with exclusive updates and announcements
                   </span>
                 </li>
@@ -82,11 +82,11 @@ const PaymentSuccess = () => {
 
             {sessionId && (
               <div className="bg-[var(--neutral-800)]/20 p-4 rounded-xl">
-                <p className="text-sm text-[var(--purple-lavender)] text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <span className="font-medium text-[var(--purple-ink)]">Transaction ID:</span>{' '}
                   <span className="font-mono text-xs">{sessionId}</span>
                 </p>
-                <p className="text-xs text-[var(--purple-lavender)] text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-brand-purple  text-center mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   A confirmation email has been sent to your registered email address.
                 </p>
               </div>
@@ -106,7 +106,7 @@ const PaymentSuccess = () => {
             <Button
               onClick={() => navigate('/events')}
               variant="outline"
-              className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
+              className="border-2 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full px-8 py-6 text-lg font-semibold"
               data-testid="browse-events-button"
             >
               <Calendar className="mr-2 h-5 w-5" />
@@ -117,11 +117,11 @@ const PaymentSuccess = () => {
 
         {/* Additional Info */}
         <div className="text-center">
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Need help? Contact us at{' '}
             <a
               href="mailto:support@loaf.org"
-              className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
+              className="text-[var(--orange-light)] hover:text-brand-purple  font-medium"
             >
               support@loaf.org
             </a>
diff --git a/src/pages/Plans.js b/src/pages/Plans.js
index 4b6ec4d..59a648d 100644
--- a/src/pages/Plans.js
+++ b/src/pages/Plans.js
@@ -217,27 +217,27 @@ const Plans = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Membership Plans
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)] max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple  max-w-2xl mx-auto" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Choose the membership plan that works best for you and become part of our vibrant community.
           </p>
         </div>
 
         {/* Status Banner */}
         {statusInfo && statusInfo.title && (
-          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-[var(--purple-lavender)]">
+          <Card className="max-w-3xl mx-auto mb-8 p-6 bg-gradient-to-r from-[var(--lavender-300)] to-[var(--neutral-800)]/30 border-2 border-brand-purple ">
             <div className="flex items-start gap-4">
-              <AlertCircle className="h-6 w-6 text-[var(--purple-lavender)] flex-shrink-0 mt-1" />
+              <AlertCircle className="h-6 w-6 text-brand-purple  flex-shrink-0 mt-1" />
               <div className="flex-1">
                 <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {statusInfo.title}
                 </h3>
-                <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {statusInfo.message}
                 </p>
                 {statusInfo.action && statusInfo.actionLink && (
                   <Button
                     onClick={() => navigate(statusInfo.actionLink)}
-                    className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
+                    className="bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full"
                   >
                     {statusInfo.action}
                   </Button>
@@ -249,8 +249,8 @@ const Plans = () => {
 
         {loading ? (
           <div className="text-center py-20">
-            <Loader2 className="h-12 w-12 text-[var(--purple-lavender)] mx-auto mb-4 animate-spin" />
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+            <Loader2 className="h-12 w-12 text-brand-purple  mx-auto mb-4 animate-spin" />
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
           </div>
         ) : plans.length > 0 ? (
           <div className={`grid gap-6 sm:gap-8 mx-auto ${plans.length === 1
@@ -266,19 +266,19 @@ const Plans = () => {
               return (
                 <Card
                   key={plan.id}
-                  className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] hover:shadow-xl transition-all"
+                  className="p-8 bg-background rounded-2xl border-2 border-[var(--neutral-800)] hover:border-brand-purple  hover:shadow-xl transition-all"
                   data-testid={`plan-card-${plan.id}`}
                 >
                   {/* Plan Header */}
                   <div className="text-center mb-6">
                     <div className="bg-[var(--neutral-800)]/20 p-4 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
-                      <CreditCard className="h-8 w-8 text-[var(--purple-lavender)]" />
+                      <CreditCard className="h-8 w-8 text-brand-purple " />
                     </div>
                     <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {plan.name}
                     </h2>
                     {plan.description && (
-                      <p className="text-sm text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {plan.description}
                       </p>
                     )}
@@ -286,18 +286,18 @@ const Plans = () => {
 
                   {/* Pricing */}
                   <div className="text-center mb-8">
-                    <div className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Starting at
                     </div>
                     <div className="text-2xl sm:text-3xl md:text-4xl font-bold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {formatPrice(minimumPrice)}
                     </div>
                     {suggestedPrice > minimumPrice && (
-                      <div className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         Suggested: {formatPrice(suggestedPrice)}
                       </div>
                     )}
-                    <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {getBillingCycleLabel(plan.billing_cycle)}
                     </p>
                     {plan.allow_donation && (
@@ -356,7 +356,7 @@ const Plans = () => {
             <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Plans Available
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Membership plans are not currently available. Please check back later!
             </p>
           </div>
@@ -368,13 +368,13 @@ const Plans = () => {
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-4 text-center" style={{ fontFamily: "'Inter', sans-serif" }}>
               Need Help Choosing?
             </h3>
-            <p className="text-[var(--purple-lavender)] text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-center mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               If you have any questions about our membership plans or need assistance, please contact us.
             </p>
             <div className="text-center">
               <a
                 href="mailto:support@loaf.org"
-                className="text-[var(--orange-light)] hover:text-[var(--purple-lavender)] font-medium"
+                className="text-[var(--orange-light)] hover:text-brand-purple  font-medium"
               >
                 support@loaf.org
               </a>
@@ -390,7 +390,7 @@ const Plans = () => {
             <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Choose Your Amount
             </DialogTitle>
-            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {selectedPlan?.name} - {getBillingCycleLabel(selectedPlan?.billing_cycle)}
             </DialogDescription>
           </DialogHeader>
@@ -402,7 +402,7 @@ const Plans = () => {
                 Amount (USD) *
               </Label>
               <div className="relative mt-2">
-                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-[var(--purple-lavender)] text-lg font-semibold">
+                <span className="absolute left-4 top-1/2 transform -translate-y-1/2 text-brand-purple  text-lg font-semibold">
                   $
                 </span>
                 <Input
@@ -412,11 +412,11 @@ const Plans = () => {
                   min={selectedPlan ? (selectedPlan.minimum_price_cents / 100).toFixed(2) : "30.00"}
                   value={amountInput}
                   onChange={(e) => setAmountInput(e.target.value)}
-                  className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="pl-8 h-14 text-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   placeholder="50.00"
                 />
               </div>
-              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Minimum: {selectedPlan ? formatPrice(selectedPlan.minimum_price_cents || 3000) : '$30.00'}
               </p>
             </div>
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index ffd8760..4c51fbf 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -213,17 +213,17 @@ const Profile = () => {
 
   if (!profileData) {
     return (
-      <div className="min-h-screen bg-background">
+      <div className="min-h-screen bg-white">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading profile...</p>
         </div>
       </div>
     );
   }
 
   return (
-    <div className="min-h-screen bg-background">
+    <div className="min-h-screen bg-white">
       <Navbar />
 
       <div className="max-w-4xl mx-auto px-6 py-12">
@@ -231,33 +231,33 @@ const Profile = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             My Profile
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Update your personal information below.
           </p>
         </div>
 
-        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
+        <Card className="p-8 bg-white rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           {/* Read-only Information */}
           <div className="mb-8 pb-8 border-b border-[var(--neutral-800)]">
             <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <User className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <User className="h-6 w-6 text-brand-purple " />
               Account Information
             </h2>
             <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
                 <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.email}</p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Status</p>
                 <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.status.replace('_', ' ')}</p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Role</p>
                 <p className="text-[var(--purple-ink)] font-medium capitalize" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{profileData.role}</p>
               </div>
               <div>
-                <p className="text-sm text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
+                <p className="text-sm text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</p>
                 <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {new Date(profileData.date_of_birth).toLocaleDateString()}
                 </p>
@@ -269,7 +269,7 @@ const Profile = () => {
                 type="button"
                 onClick={() => setPasswordDialogOpen(true)}
                 variant="outline"
-                className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-6 py-3"
+                className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-6 py-3"
               >
                 <Lock className="h-4 w-4 mr-2" />
                 Change Password
@@ -280,13 +280,13 @@ const Profile = () => {
           {/* Profile Photo Section */}
           <div className="pb-8 mb-8 border-b border-[var(--neutral-800)]">
             <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-              <Camera className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Camera className="h-6 w-6 text-brand-purple " />
               Profile Photo
             </h2>
             <div className="flex flex-col md:flex-row items-center gap-6">
               <Avatar className="h-32 w-32 border-4 border-[var(--neutral-800)]">
                 <AvatarImage src={previewImage} alt="Profile" />
-                <AvatarFallback className="bg-[var(--lavender-300)] text-[var(--purple-lavender)] text-3xl">
+                <AvatarFallback className="bg-[var(--lavender-300)] text-brand-purple  text-3xl">
                   {profileData?.first_name?.charAt(0)}{profileData?.last_name?.charAt(0)}
                 </AvatarFallback>
               </Avatar>
@@ -304,7 +304,7 @@ const Profile = () => {
                   type="button"
                   onClick={() => fileInputRef.current?.click()}
                   disabled={uploadingPhoto}
-                  className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full px-6 py-3"
+                  className="bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full px-6 py-3"
                 >
                   <Upload className="h-4 w-4 mr-2" />
                   {uploadingPhoto ? 'Uploading...' : 'Upload Photo'}
@@ -323,7 +323,7 @@ const Profile = () => {
                   </Button>
                 )}
 
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Upload a profile photo (Max {maxFileSizeMB}MB)
                 </p>
               </div>
@@ -344,7 +344,7 @@ const Profile = () => {
                   name="first_name"
                   value={formData.first_name}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   data-testid="first-name-input"
                 />
               </div>
@@ -355,7 +355,7 @@ const Profile = () => {
                   name="last_name"
                   value={formData.last_name}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   data-testid="last-name-input"
                 />
               </div>
@@ -369,7 +369,7 @@ const Profile = () => {
                 type="tel"
                 value={formData.phone}
                 onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 data-testid="phone-input"
               />
             </div>
@@ -381,7 +381,7 @@ const Profile = () => {
                 name="address"
                 value={formData.address}
                 onChange={handleInputChange}
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple  "
                 data-testid="address-input"
               />
             </div>
@@ -394,7 +394,7 @@ const Profile = () => {
                   name="city"
                   value={formData.city}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   data-testid="city-input"
                 />
               </div>
@@ -405,7 +405,7 @@ const Profile = () => {
                   name="state"
                   value={formData.state}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   data-testid="state-input"
                 />
               </div>
@@ -416,7 +416,7 @@ const Profile = () => {
                   name="zipcode"
                   value={formData.zipcode}
                   onChange={handleInputChange}
-                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   data-testid="zipcode-input"
                 />
               </div>
@@ -437,7 +437,7 @@ const Profile = () => {
                       name="partner_first_name"
                       value={formData.partner_first_name}
                       onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="Optional"
                     />
                   </div>
@@ -448,7 +448,7 @@ const Profile = () => {
                       name="partner_last_name"
                       value={formData.partner_last_name}
                       onChange={handleInputChange}
-                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       placeholder="Optional"
                     />
                   </div>
@@ -460,10 +460,11 @@ const Profile = () => {
                       id="partner_is_member"
                       name="partner_is_member"
                       checked={formData.partner_is_member}
+                      accent-color="var(--brand-white)"
                       onChange={handleCheckboxChange}
-                      className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                      className="ui-checkbox "
                     />
-                    <Label htmlFor="partner_is_member" className="cursor-pointer text-[var(--purple-ink)]">
+                    <Label htmlFor="partner_is_member" className="cursor-pointer text-[var(--purple-ink)] ">
                       My partner is a current member
                     </Label>
                   </div>
@@ -474,7 +475,7 @@ const Profile = () => {
                       name="partner_plan_to_become_member"
                       checked={formData.partner_plan_to_become_member}
                       onChange={handleCheckboxChange}
-                      className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                      className="ui-checkbox "
                     />
                     <Label htmlFor="partner_plan_to_become_member" className="cursor-pointer text-[var(--purple-ink)]">
                       My partner plans to become a member
@@ -490,7 +491,7 @@ const Profile = () => {
                 <Mail className="h-6 w-6 text-[var(--green-light)]" />
                 Newsletter Preferences
               </h2>
-              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Choose what information you'd like published in our member newsletter.
               </p>
               <div className="space-y-3">
@@ -501,7 +502,7 @@ const Profile = () => {
                     name="newsletter_publish_name"
                     checked={formData.newsletter_publish_name}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="ui-checkbox "
                   />
                   <Label htmlFor="newsletter_publish_name" className="cursor-pointer text-[var(--purple-ink)]">
                     Publish my name
@@ -514,7 +515,7 @@ const Profile = () => {
                     name="newsletter_publish_photo"
                     checked={formData.newsletter_publish_photo}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="ui-checkbox"
                   />
                   <Label htmlFor="newsletter_publish_photo" className="cursor-pointer text-[var(--purple-ink)]">
                     Publish my photo
@@ -527,7 +528,7 @@ const Profile = () => {
                     name="newsletter_publish_birthday"
                     checked={formData.newsletter_publish_birthday}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="ui-checkbox"
                   />
                   <Label htmlFor="newsletter_publish_birthday" className="cursor-pointer text-[var(--purple-ink)]">
                     Publish my birthday
@@ -540,7 +541,7 @@ const Profile = () => {
                     name="newsletter_publish_none"
                     checked={formData.newsletter_publish_none}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="ui-checkbox"
                   />
                   <Label htmlFor="newsletter_publish_none" className="cursor-pointer text-[var(--purple-ink)]">
                     Do not publish any information
@@ -552,10 +553,10 @@ const Profile = () => {
             {/* Section 4: Volunteer Interests */}
             <div className="pt-8 mt-8 border-t border-[var(--neutral-800)]">
               <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6 flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
-                <Users className="h-6 w-6 text-[var(--purple-lavender)]" />
+                <Users className="h-6 w-6 text-brand-purple " />
                 Volunteer Interests
               </h2>
-              <p className="text-[var(--purple-lavender)] mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Select areas where you'd like to volunteer and help our community.
               </p>
               <div className="grid md:grid-cols-2 gap-3">
@@ -566,7 +567,7 @@ const Profile = () => {
                       id={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
                       checked={formData.volunteer_interests.includes(option)}
                       onChange={() => handleVolunteerToggle(option)}
-                      className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                      className="ui-checkbox "
                     />
                     <Label
                       htmlFor={`volunteer_${option.replace(/\s+/g, '_').toLowerCase()}`}
@@ -585,7 +586,7 @@ const Profile = () => {
                 <BookUser className="h-6 w-6 text-[var(--orange-light)]" />
                 Member Directory Settings
               </h2>
-              <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Control your visibility and information in the member directory.
               </p>
 
@@ -597,7 +598,7 @@ const Profile = () => {
                     name="show_in_directory"
                     checked={formData.show_in_directory}
                     onChange={handleCheckboxChange}
-                    className="w-5 h-5 text-[var(--purple-lavender)] border-2 border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="ui-checkbox"
                   />
                   <Label htmlFor="show_in_directory" className="cursor-pointer text-[var(--purple-ink)] font-medium">
                     Include me in the member directory
@@ -614,7 +615,7 @@ const Profile = () => {
                         type="email"
                         value={formData.directory_email}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                         placeholder="Optional - email to show in directory"
                       />
                     </div>
@@ -626,7 +627,7 @@ const Profile = () => {
                         name="directory_bio"
                         value={formData.directory_bio}
                         onChange={handleInputChange}
-                        className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] min-h-[100px]"
+                        className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple  min-h-[100px]"
                         placeholder="Tell other members about yourself..."
                       />
                     </div>
@@ -638,7 +639,7 @@ const Profile = () => {
                         name="directory_address"
                         value={formData.directory_address}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                         placeholder="Optional - address to show in directory"
                       />
                     </div>
@@ -651,7 +652,7 @@ const Profile = () => {
                         type="tel"
                         value={formData.directory_phone}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                         placeholder="Optional - phone to show in directory"
                       />
                     </div>
@@ -664,7 +665,7 @@ const Profile = () => {
                         type="date"
                         value={formData.directory_dob}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                       />
                     </div>
 
@@ -675,7 +676,7 @@ const Profile = () => {
                         name="directory_partner_name"
                         value={formData.directory_partner_name}
                         onChange={handleInputChange}
-                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                        className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                         placeholder="Optional - partner name to show in directory"
                       />
                     </div>
@@ -688,7 +689,7 @@ const Profile = () => {
               <Button
                 type="submit"
                 disabled={loading}
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
+                className="bg-brand-purple text-white hover:bg-brand-dark-lavender  rounded-full px-8 py-6 text-lg font-medium shadow-lg disabled:opacity-50"
                 data-testid="save-profile-button"
               >
                 <Save className="h-5 w-5 mr-2" />
diff --git a/src/pages/Register.js b/src/pages/Register.js
index 127c788..a1b31ab 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -188,7 +188,7 @@ const Register = () => {
 
       <div className="max-w-4xl mx-auto px-6 py-12">
         <div className="mb-8">
-          <Link to="/" className="inline-flex items-center text-[var(--purple-lavender)] hover:text-[var(--orange-light)] transition-colors">
+          <Link to="/" className="inline-flex items-center text-brand-purple  hover:text-[var(--orange-light)] transition-colors">
             <ArrowLeft className="h-4 w-4 mr-2" />
             Back to Home
           </Link>
@@ -199,7 +199,7 @@ const Register = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Join Our Community
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Fill out the form below to start your membership journey.
             </p>
           </div>
@@ -245,7 +245,7 @@ const Register = () => {
                   type="button"
                   onClick={handleBack}
                   variant="outline"
-                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-[var(--purple-lavender)] text-[var(--purple-ink)]"
+                  className="rounded-full px-6 py-6 text-lg border-2 border-[var(--neutral-800)] hover:border-brand-purple  text-[var(--purple-ink)]"
                 >
                   <ArrowLeft className="mr-2 h-5 w-5" />
                   Back
@@ -276,7 +276,7 @@ const Register = () => {
               )}
             </div>
 
-            <p className="text-center text-[var(--purple-lavender)] mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-brand-purple  mt-4" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Already have an account?{' '}
               <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here
diff --git a/src/pages/ResetPassword.js b/src/pages/ResetPassword.js
index 75e29f4..d4ce90f 100644
--- a/src/pages/ResetPassword.js
+++ b/src/pages/ResetPassword.js
@@ -71,12 +71,12 @@ const ResetPassword = () => {
         <Card className="p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg">
           <div className="mb-8 text-center">
             <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-[var(--lavender-300)] mb-4">
-              <Lock className="h-8 w-8 text-[var(--purple-lavender)]" />
+              <Lock className="h-8 w-8 text-brand-purple " />
             </div>
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Reset Password
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Enter your new password below.
             </p>
           </div>
@@ -92,7 +92,7 @@ const ResetPassword = () => {
                 value={formData.newPassword}
                 onChange={handleInputChange}
                 placeholder="Enter new password (min. 6 characters)"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -106,14 +106,14 @@ const ResetPassword = () => {
                 value={formData.confirmPassword}
                 onChange={handleInputChange}
                 placeholder="Re-enter new password"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
-            <div className="bg-[var(--lavender-300)] border-l-4 border-[var(--purple-lavender)] p-4 rounded-lg">
+            <div className="bg-[var(--lavender-300)] border-l-4 border-brand-purple  p-4 rounded-lg">
               <div className="flex items-start">
-                <AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] mr-2 mt-0.5 flex-shrink-0" />
-                <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <AlertCircle className="h-5 w-5 text-brand-purple  mr-2 mt-0.5 flex-shrink-0" />
+                <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <p className="font-medium text-[var(--purple-ink)] mb-1">Password Requirements:</p>
                   <ul className="list-disc list-inside space-y-1">
                     <li>At least 6 characters long</li>
@@ -132,7 +132,7 @@ const ResetPassword = () => {
               <ArrowRight className="ml-2 h-5 w-5" />
             </Button>
 
-            <p className="text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Remember your password?{' '}
               <Link to="/login" className="text-[var(--orange-light)] hover:underline font-medium">
                 Login here
diff --git a/src/pages/VerifyEmail.js b/src/pages/VerifyEmail.js
index bacae69..4851148 100644
--- a/src/pages/VerifyEmail.js
+++ b/src/pages/VerifyEmail.js
@@ -52,11 +52,11 @@ const VerifyEmail = () => {
         <Card className="p-6 sm:p-8 md:p-12 bg-background rounded-2xl border border-[var(--neutral-800)] shadow-lg text-center">
           {status === 'loading' && (
             <>
-              <Loader2 className="h-20 w-20 text-[var(--purple-lavender)] mx-auto mb-6 animate-spin" />
+              <Loader2 className="h-20 w-20 text-brand-purple  mx-auto mb-6 animate-spin" />
               <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verifying Your Email...
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Please wait while we verify your email address.
               </p>
             </>
@@ -68,10 +68,10 @@ const VerifyEmail = () => {
               <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Email Verified Successfully!
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
-              <p className="text-base text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-base text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Next steps: Attend an event and meet a board member within 90 days. Once you've attended an event, our admin team will review your application.
               </p>
               <Link to="/login">
@@ -91,7 +91,7 @@ const VerifyEmail = () => {
               <h1 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 Verification Failed
               </h1>
-              <p className="text-lg text-[var(--purple-lavender)] mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-lg text-brand-purple  mb-8" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {message}
               </p>
               <Link to="/">
diff --git a/src/pages/admin/AdminBylaws.js b/src/pages/admin/AdminBylaws.js
index 505c728..3151cc6 100644
--- a/src/pages/admin/AdminBylaws.js
+++ b/src/pages/admin/AdminBylaws.js
@@ -169,7 +169,7 @@ const AdminBylaws = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[var(--purple-lavender)]">Loading bylaws...</p>
+        <p className="text-brand-purple ">Loading bylaws...</p>
       </div>
     );
   }
@@ -182,14 +182,14 @@ const AdminBylaws = () => {
           <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Bylaws Management
           </h1>
-          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage LOAF governing bylaws and version history
           </p>
         </div>
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -199,10 +199,10 @@ const AdminBylaws = () => {
 
       {/* Current Bylaws */}
       {currentBylaws ? (
-        <Card className="p-6 border-2 border-[var(--purple-lavender)]">
+        <Card className="p-6 border-2 border-brand-purple ">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-3 rounded-xl">
+              <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-3 rounded-xl">
                 <Scale className="h-6 w-6 text-white" />
               </div>
               <div>
@@ -214,7 +214,7 @@ const AdminBylaws = () => {
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
-                  <span className="text-[var(--purple-lavender)] text-sm">
+                  <span className="text-brand-purple  text-sm">
                     Version {currentBylaws.version}
                   </span>
                 </div>
@@ -225,7 +225,7 @@ const AdminBylaws = () => {
                 variant="outline"
                 size="sm"
                 onClick={() => window.open(currentBylaws.document_url, '_blank')}
-                className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                className="border-brand-purple  text-brand-purple "
               >
                 <ExternalLink className="h-4 w-4 mr-1" />
                 View
@@ -235,7 +235,7 @@ const AdminBylaws = () => {
                   variant="outline"
                   size="sm"
                   onClick={() => handleEdit(currentBylaws)}
-                  className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                  className="border-brand-purple  text-brand-purple "
                 >
                   <Edit className="h-4 w-4" />
                 </Button>
@@ -252,7 +252,7 @@ const AdminBylaws = () => {
               )}
             </div>
           </div>
-          <div className="flex items-center gap-4 text-sm text-[var(--purple-lavender)]">
+          <div className="flex items-center gap-4 text-sm text-brand-purple ">
             <span>Effective Date: <strong>{formatDate(currentBylaws.effective_date)}</strong></span>
             <span>•</span>
             <span>Document Type: <strong>{currentBylaws.document_type === 'upload' ? 'PDF Upload' : 'Link'}</strong></span>
@@ -261,9 +261,9 @@ const AdminBylaws = () => {
       ) : (
         <Card className="p-12 text-center">
           <Scale className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-          <p className="text-[var(--purple-lavender)] text-lg mb-4">No current bylaws set</p>
+          <p className="text-brand-purple  text-lg mb-4">No current bylaws set</p>
           {hasPermission('bylaws.create') && (
-            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
+            <Button onClick={handleCreate} className="bg-brand-purple  text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create Bylaws
             </Button>
@@ -285,7 +285,7 @@ const AdminBylaws = () => {
                     <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-1">
                       {bylawsDoc.title}
                     </h3>
-                    <div className="flex items-center gap-3 text-sm text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-sm text-brand-purple ">
                       <span>Version {bylawsDoc.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylawsDoc.effective_date)}</span>
@@ -296,7 +296,7 @@ const AdminBylaws = () => {
                       variant="outline"
                       size="sm"
                       onClick={() => window.open(bylawsDoc.document_url, '_blank')}
-                      className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                      className="border-brand-purple  text-brand-purple "
                     >
                       <ExternalLink className="h-4 w-4" />
                     </Button>
@@ -305,7 +305,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(bylawsDoc)}
-                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                        className="border-brand-purple  text-brand-purple "
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -404,12 +404,12 @@ const AdminBylaws = () => {
                     required={!selectedBylaws}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedBylaws && !uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -424,7 +424,7 @@ const AdminBylaws = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                  <p className="text-sm text-brand-purple  mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -455,7 +455,7 @@ const AdminBylaws = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[var(--purple-lavender)] text-white"
+                className="bg-brand-purple  text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedBylaws ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index 5319e25..8431607 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -91,7 +91,7 @@ const AdminDashboard = () => {
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
           <div className="flex items-center justify-between mb-4">
-            <div className="bg-orange-100 p-3 rounded-lg">
+            <div className=" p-3 rounded-lg">
               <Clock className="h-6 w-6 text-orange-600" />
             </div>
           </div>
diff --git a/src/pages/admin/AdminDonations.js b/src/pages/admin/AdminDonations.js
index 0fcdd9e..248ecc5 100644
--- a/src/pages/admin/AdminDonations.js
+++ b/src/pages/admin/AdminDonations.js
@@ -167,13 +167,13 @@ const AdminDonations = () => {
   };
 
   const getTypeBadgeColor = (type) => {
-    return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-[var(--purple-lavender)]';
+    return type === 'member' ? 'bg-[var(--green-light)]' : 'bg-brand-purple ';
   };
 
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
+        <Loader2 className="h-12 w-12 animate-spin text-brand-purple " />
       </div>
     );
   }
@@ -185,7 +185,7 @@ const AdminDonations = () => {
         <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Donation Management
         </h1>
-        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Track and manage all donations from members and the public
         </p>
       </div>
@@ -195,7 +195,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
               <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -203,7 +203,7 @@ const AdminDonations = () => {
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <Heart className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Heart className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -211,7 +211,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Member Donations
               </p>
               <p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -227,15 +227,15 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Public Donations
               </p>
-              <p className="text-3xl font-bold text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+              <p className="text-3xl font-bold text-brand-purple  mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 {stats.public_donations || 0}
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <Globe className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Globe className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -243,7 +243,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Amount
               </p>
               <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -251,7 +251,7 @@ const AdminDonations = () => {
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <DollarSign className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -263,12 +263,12 @@ const AdminDonations = () => {
           {/* Search and Export Row */}
           <div className="flex flex-col md:flex-row gap-4 justify-between">
             <div className="flex-1 relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
                 placeholder="Search by donor name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="pl-10 rounded-full border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
             {hasPermission('donations.export') && (
@@ -287,14 +287,14 @@ const AdminDonations = () => {
                     onClick={() => handleExport('all')}
                     className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                    <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                     <span className="text-[var(--purple-ink)]">Export All Donations</span>
                   </DropdownMenuItem>
                   <DropdownMenuItem
                     onClick={() => handleExport('current')}
                     className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                   >
-                    <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                    <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                     <span className="text-[var(--purple-ink)]">Export Current View</span>
                   </DropdownMenuItem>
                 </DropdownMenuContent>
@@ -354,7 +354,7 @@ const AdminDonations = () => {
 
           {/* Active Filters Summary */}
           {(searchQuery || typeFilter !== 'all' || statusFilter !== 'all' || startDate || endDate) && (
-            <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Showing {filteredDonations.length} of {donations.length} donations
             </div>
           )}
@@ -393,7 +393,7 @@ const AdminDonations = () => {
                   <td colSpan="6" className="px-6 py-12 text-center">
                     <div className="flex flex-col items-center gap-3">
                       <Heart className="h-12 w-12 text-[var(--neutral-800)]" />
-                      <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donations.length === 0 ? 'No donations yet' : 'No donations match your filters'}
                       </p>
                     </div>
@@ -407,7 +407,7 @@ const AdminDonations = () => {
                         <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                           {donation.donor_name || 'Anonymous'}
                         </p>
-                        <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {donation.donor_email || 'No email'}
                         </p>
                       </div>
@@ -431,7 +431,7 @@ const AdminDonations = () => {
                       </Badge>
                     </td>
                     <td className="px-6 py-4">
-                      <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+                      <div className="flex items-center gap-2 text-brand-purple ">
                         <Calendar className="h-4 w-4" />
                         <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {formatDate(donation.created_at)}
@@ -439,7 +439,7 @@ const AdminDonations = () => {
                       </div>
                     </td>
                     <td className="px-6 py-4">
-                      <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {donation.payment_method || 'N/A'}
                       </p>
                     </td>
@@ -456,7 +456,7 @@ const AdminDonations = () => {
         <Card className="p-6 bg-gradient-to-r from-[var(--lavender-400)] to-[var(--lavender-300)] rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 This Month's Donations
               </p>
               <p className="text-2xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
diff --git a/src/pages/admin/AdminEventAttendance.js b/src/pages/admin/AdminEventAttendance.js
index fd197a8..e93836c 100644
--- a/src/pages/admin/AdminEventAttendance.js
+++ b/src/pages/admin/AdminEventAttendance.js
@@ -213,7 +213,7 @@ const AdminEventAttendance = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center h-64">
-        <div className="text-[var(--purple-lavender)]">Loading event data...</div>
+        <div className="text-brand-purple ">Loading event data...</div>
       </div>
     );
   }
@@ -221,8 +221,8 @@ const AdminEventAttendance = () => {
   if (!event) {
     return (
       <div className="text-center py-12">
-        <p className="text-[var(--purple-lavender)] mb-4">Event not found</p>
-        <Button onClick={() => navigate('/admin/events')} className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl">
+        <p className="text-brand-purple  mb-4">Event not found</p>
+        <Button onClick={() => navigate('/admin/events')} className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl">
           Back to Events
         </Button>
       </div>
@@ -237,7 +237,7 @@ const AdminEventAttendance = () => {
           <Button
             onClick={() => navigate('/admin/events')}
             variant="outline"
-            className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
+            className="border-[var(--neutral-800)] text-brand-purple  rounded-xl"
             style={{ fontFamily: "'Inter', sans-serif" }}
           >
             <ArrowLeft className="h-4 w-4 mr-2" />
@@ -247,7 +247,7 @@ const AdminEventAttendance = () => {
             <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Attendance
             </h1>
-            <p className="text-[var(--purple-lavender)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage RSVPs and track attendance for this event
             </p>
           </div>
@@ -269,7 +269,7 @@ const AdminEventAttendance = () => {
             <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               {event.title}
             </h2>
-            <div className="flex flex-wrap gap-4 text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="flex flex-wrap gap-4 text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
                 <span>{moment(event.start_at).format('MMMM D, YYYY [at] h:mm A')}</span>
@@ -292,9 +292,9 @@ const AdminEventAttendance = () => {
       <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4">
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <Users className="h-8 w-8 text-[var(--purple-lavender)]" />
+            <Users className="h-8 w-8 text-brand-purple " />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total RSVPs</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.total}</p>
             </div>
           </div>
@@ -304,7 +304,7 @@ const AdminEventAttendance = () => {
           <div className="flex items-center gap-3">
             <UserCheck className="h-8 w-8 text-[var(--green-light)]" />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
             </div>
           </div>
@@ -314,7 +314,7 @@ const AdminEventAttendance = () => {
           <div className="flex items-center gap-3">
             <UserX className="h-8 w-8 text-[var(--orange-soft)]" />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.noCount}</p>
             </div>
           </div>
@@ -324,7 +324,7 @@ const AdminEventAttendance = () => {
           <div className="flex items-center gap-3">
             <HelpCircle className="h-8 w-8 text-[var(--gold-warm)]" />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Maybe</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.maybeCount}</p>
             </div>
           </div>
@@ -332,9 +332,9 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <Check className="h-8 w-8 text-[var(--purple-lavender)]" />
+            <Check className="h-8 w-8 text-brand-purple " />
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Attended</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.attendedCount}</p>
             </div>
           </div>
@@ -350,8 +350,8 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('all')}
               variant={activeTab === 'all' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'all'
-                ? 'bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                ? 'bg-brand-purple  hover:bg-[var(--purple-ink)] text-white'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -362,7 +362,7 @@ const AdminEventAttendance = () => {
               variant={activeTab === 'yes' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'yes'
                 ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -373,7 +373,7 @@ const AdminEventAttendance = () => {
               variant={activeTab === 'no' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'no'
                 ? 'bg-[var(--orange-soft)] hover:bg-[var(--orange-rust)] text-white'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -384,7 +384,7 @@ const AdminEventAttendance = () => {
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'maybe'
                 ? 'bg-[var(--gold-warm)] hover:bg-[var(--gold-soft)] text-[var(--purple-ink)]'
-                : 'border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-500)]'
+                : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
@@ -395,7 +395,7 @@ const AdminEventAttendance = () => {
           {/* Search and Bulk Actions */}
           <div className="flex flex-wrap gap-3 items-center justify-between">
             <div className="flex-1 min-w-[200px] max-w-md relative">
-              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-brand-purple " />
               <Input
                 type="text"
                 placeholder="Search by name or email..."
@@ -408,7 +408,7 @@ const AdminEventAttendance = () => {
 
             {selectedRsvps.size > 0 && (
               <div className="flex gap-2">
-                <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
+                <Badge className="bg-brand-purple  text-white px-3 py-1">
                   {selectedRsvps.size} selected
                 </Badge>
                 <Button
@@ -477,7 +477,7 @@ const AdminEventAttendance = () => {
                     <td className="px-4 py-3 text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_name}
                     </td>
-                    <td className="px-4 py-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.user_email}
                     </td>
                     <td className="px-4 py-3">
@@ -510,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--green-light)] hover:text-white hover:border-[var(--green-light)] rounded-lg min-w-[120px]"
+                          className="border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--green-light)] hover:text-white hover:border-[var(--green-light)] rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />
@@ -518,7 +518,7 @@ const AdminEventAttendance = () => {
                         </Button>
                       )}
                     </td>
-                    <td className="px-4 py-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <td className="px-4 py-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {rsvp.attended_at ? moment(rsvp.attended_at).format('MMM D, YYYY h:mm A') : '-'}
                     </td>
                   </tr>
@@ -526,7 +526,7 @@ const AdminEventAttendance = () => {
               ) : (
                 <tr>
                   <td colSpan="6" className="px-4 py-12 text-center">
-                    <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {searchQuery ? 'No RSVPs match your search' : 'No RSVPs for this filter'}
                     </p>
                   </td>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index 9d2746e..5f6801c 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -137,7 +137,7 @@ const AdminEvents = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Management
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage community events.
           </p>
         </div>
@@ -174,7 +174,7 @@ const AdminEvents = () => {
                     value={formData.title}
                     onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                     required
-                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -186,7 +186,7 @@ const AdminEvents = () => {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)] rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] focus:border-brand-purple  rounded-lg p-3"
                   />
                 </div>
 
@@ -200,7 +200,7 @@ const AdminEvents = () => {
                       value={formData.start_at}
                       onChange={(e) => setFormData({ ...formData, start_at: e.target.value })}
                       required
-                      className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     />
                   </div>
 
@@ -213,7 +213,7 @@ const AdminEvents = () => {
                       value={formData.end_at}
                       onChange={(e) => setFormData({ ...formData, end_at: e.target.value })}
                       required
-                      className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                      className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                     />
                   </div>
                 </div>
@@ -226,7 +226,7 @@ const AdminEvents = () => {
                     value={formData.location}
                     onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                     required
-                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -239,7 +239,7 @@ const AdminEvents = () => {
                     value={formData.capacity}
                     onChange={(e) => setFormData({ ...formData, capacity: e.target.value })}
                     placeholder="Leave empty for unlimited"
-                    className="border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                    className="border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   />
                 </div>
 
@@ -249,7 +249,7 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-[var(--purple-lavender)] border-[var(--neutral-800)] rounded focus:ring-[var(--purple-lavender)]"
+                    className="w-4 h-4 text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
                   />
                   <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
@@ -281,7 +281,7 @@ const AdminEvents = () => {
       {/* Events List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading events...</p>
         </div>
       ) : events.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -294,7 +294,7 @@ const AdminEvents = () => {
               {/* Event Header */}
               <div className="flex justify-between items-start mb-4">
                 <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                  <Calendar className="h-6 w-6 text-[var(--purple-lavender)]" />
+                  <Calendar className="h-6 w-6 text-brand-purple " />
                 </div>
                 <Badge
                   className={`${event.published
@@ -312,13 +312,13 @@ const AdminEvents = () => {
               </h3>
 
               {event.description && (
-                <p className="text-[var(--purple-lavender)] mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple  mb-4 line-clamp-2 text-sm" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {event.description}
                 </p>
               )}
 
               <div className="space-y-2 mb-4">
-                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <Calendar className="h-4 w-4" />
                   <span>
                     {new Date(event.start_at).toLocaleDateString()} at{' '}
@@ -328,11 +328,11 @@ const AdminEvents = () => {
                     })}
                   </span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <MapPin className="h-4 w-4" />
                   <span className="truncate">{event.location}</span>
                 </div>
-                <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <div className="flex items-center gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   <Users className="h-4 w-4" />
                   <span>{event.rsvp_count || 0} attending</span>
                 </div>
@@ -358,7 +358,7 @@ const AdminEvents = () => {
                     onClick={() => togglePublish(event)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
                     data-testid={`toggle-publish-${event.id}`}
                   >
                     {event.published ? (
@@ -402,7 +402,7 @@ const AdminEvents = () => {
           <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Events Yet
           </h3>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create your first event to get started!
           </p>
           <Button
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
index 65e07dd..ff4b3b4 100644
--- a/src/pages/admin/AdminFinancials.js
+++ b/src/pages/admin/AdminFinancials.js
@@ -147,7 +147,7 @@ const AdminFinancials = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[var(--purple-lavender)]">Loading financial reports...</p>
+        <p className="text-brand-purple ">Loading financial reports...</p>
       </div>
     );
   }
@@ -160,14 +160,14 @@ const AdminFinancials = () => {
           <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports Management
           </h1>
-          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage annual financial reports
           </p>
         </div>
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -179,9 +179,9 @@ const AdminFinancials = () => {
       {reports.length === 0 ? (
         <Card className="p-12 text-center">
           <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-          <p className="text-[var(--purple-lavender)] text-lg mb-4">No financial reports yet</p>
+          <p className="text-brand-purple  text-lg mb-4">No financial reports yet</p>
           {hasPermission('financials.create') && (
-            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
+            <Button onClick={handleCreate} className="bg-brand-purple  text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Report
             </Button>
@@ -192,7 +192,7 @@ const AdminFinancials = () => {
           {reports.map(report => (
             <Card key={report.id} className="p-6">
               <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
+                <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
                   <DollarSign className="h-6 w-6 mx-auto mb-1" />
                   <div className="text-2xl font-bold">{report.year}</div>
                 </div>
@@ -201,14 +201,14 @@ const AdminFinancials = () => {
                     {report.title}
                   </h3>
                   <div className="flex items-center gap-3">
-                    <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
+                    <Badge variant="outline" className="border-brand-purple  text-brand-purple ">
                       {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                     </Badge>
                     <Button
                       variant="ghost"
                       size="sm"
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="text-[var(--purple-lavender)] hover:text-[var(--purple-muted)]"
+                      className="text-brand-purple  hover:text-[var(--purple-muted)]"
                     >
                       <ExternalLink className="h-4 w-4 mr-1" />
                       View
@@ -222,7 +222,7 @@ const AdminFinancials = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleEdit(report)}
-                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                        className="border-brand-purple  text-brand-purple "
                       >
                         <Edit className="h-4 w-4" />
                       </Button>
@@ -313,12 +313,12 @@ const AdminFinancials = () => {
                     required={!selectedReport}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedReport && !uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -333,7 +333,7 @@ const AdminFinancials = () => {
                     placeholder="https://docs.google.com/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                  <p className="text-sm text-brand-purple  mt-1">
                     Paste the shareable link to your document (Google Drive, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -350,7 +350,7 @@ const AdminFinancials = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[var(--purple-lavender)] text-white"
+                className="bg-brand-purple  text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedReport ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminGallery.js b/src/pages/admin/AdminGallery.js
index eda10d3..93110a6 100644
--- a/src/pages/admin/AdminGallery.js
+++ b/src/pages/admin/AdminGallery.js
@@ -156,7 +156,7 @@ const AdminGallery = () => {
         <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Event Gallery Management
         </h1>
-        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Upload and manage photos for event galleries
         </p>
       </div>
@@ -186,17 +186,17 @@ const AdminGallery = () => {
           {events.length === 0 && (
             <div className="mt-4 p-4 bg-[var(--lavender-300)] border-2 border-[var(--neutral-800)] rounded-xl">
               <div className="flex items-start gap-3">
-                <AlertCircle className="h-5 w-5 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
+                <AlertCircle className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
                 <div className="flex-1">
                   <h4 className="text-sm font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                     No Events Available
                   </h4>
-                  <p className="text-sm text-[var(--purple-lavender)] mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <p className="text-sm text-brand-purple  mb-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     You need to create an event before uploading gallery images. Events help organize photos by occasion.
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
+                      className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
+                className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl"
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -236,7 +236,7 @@ const AdminGallery = () => {
                   </>
                 )}
               </Button>
-              <p className="text-sm text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 You can select multiple images. Max {formatFileSize(maxFileSize)} per image.
               </p>
             </div>
@@ -251,7 +251,7 @@ const AdminGallery = () => {
             <h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1">
+            <Badge className="bg-brand-purple  text-white px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>
@@ -275,7 +275,7 @@ const AdminGallery = () => {
                         <Button
                           onClick={() => openEditCaption(image)}
                           size="sm"
-                          className="bg-background/90 hover:bg-background text-[var(--purple-ink)] rounded-lg"
+                          className="bg-background/90 hover:bg-background text-[var(--purple-ink)]  dark:text-[#ddd8eb] rounded-lg"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Edit className="h-4 w-4 mr-1" />
@@ -299,7 +299,7 @@ const AdminGallery = () => {
                   {/* Caption Preview */}
                   {image.caption && (
                     <div className="mt-2">
-                      <p className="text-sm text-[var(--purple-lavender)] line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-brand-purple  line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {image.caption}
                       </p>
                     </div>
@@ -307,7 +307,7 @@ const AdminGallery = () => {
 
                   {/* File Size */}
                   <div className="mt-1">
-                    <p className="text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {formatFileSize(image.file_size_bytes)}
                     </p>
                   </div>
@@ -320,7 +320,7 @@ const AdminGallery = () => {
               <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Images Yet
               </h3>
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Upload images to create a gallery for this event.
               </p>
             </div>
@@ -367,14 +367,14 @@ const AdminGallery = () => {
             <Button
               onClick={() => setEditingCaption(null)}
               variant="outline"
-              className="border-[var(--neutral-800)] text-[var(--purple-lavender)] rounded-xl"
+              className="border-[var(--neutral-800)] text-brand-purple  rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Cancel
             </Button>
             <Button
               onClick={handleUpdateCaption}
-              className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl"
+              className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl"
               style={{ fontFamily: "'Inter', sans-serif" }}
             >
               Save Caption
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index d4c613a..0514e2b 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -248,7 +248,7 @@ const AdminMembers = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Members Management
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage paying members and their subscriptions.
             </p>
           </div>
@@ -257,7 +257,7 @@ const AdminMembers = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
+                    className="bg-brand-purple hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
                     disabled={exporting}
                   >
                     {exporting ? (
@@ -298,7 +298,7 @@ const AdminMembers = () => {
             {hasPermission('users.invite') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
+                className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Member
@@ -321,25 +321,25 @@ const AdminMembers = () => {
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'payment_pending').length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'inactive').length}
           </p>
@@ -350,12 +350,12 @@ const AdminMembers = () => {
       <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
             <Input
               placeholder="Search by name or email..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               data-testid="search-members-input"
             />
           </div>
@@ -381,7 +381,7 @@ const AdminMembers = () => {
       {/* Members List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
@@ -406,7 +406,7 @@ const AdminMembers = () => {
                       </h3>
                       {getStatusBadge(user.status)}
                     </div>
-                    <div className="grid md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       <p>Email: {user.email}</p>
                       <p>Phone: {user.phone}</p>
                       <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -432,7 +432,7 @@ const AdminMembers = () => {
                                 )}
                               </span>
                             </div>
-                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {reminderInfo.emailReminders > 0 && (
                                 <p>
                                   <Mail className="inline h-3 w-3 mr-1" />
@@ -459,7 +459,7 @@ const AdminMembers = () => {
                               )}
                             </div>
                             {reminderInfo.lastReminderAt && (
-                              <p className="mt-2 text-xs text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="mt-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 Last reminder: {new Date(reminderInfo.lastReminderAt).toLocaleDateString()} at {new Date(reminderInfo.lastReminderAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                               </p>
                             )}
@@ -478,7 +478,7 @@ const AdminMembers = () => {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white"
+                        className="border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
                       >
                         <Eye className="h-4 w-4 mr-1" />
                         View Profile
@@ -500,7 +500,7 @@ const AdminMembers = () => {
 
                   {/* Status Management */}
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-[var(--purple-lavender)] whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <span className="text-sm text-brand-purple  whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Change Status:
                     </span>
                     <Select
@@ -531,7 +531,7 @@ const AdminMembers = () => {
           <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Members Found
           </h3>
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || statusFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'No members yet'}
diff --git a/src/pages/admin/AdminNewsletters.js b/src/pages/admin/AdminNewsletters.js
index b08c2c9..c330b46 100644
--- a/src/pages/admin/AdminNewsletters.js
+++ b/src/pages/admin/AdminNewsletters.js
@@ -175,7 +175,7 @@ const AdminNewsletters = () => {
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-[60vh]">
-        <p className="text-[var(--purple-lavender)]">Loading newsletters...</p>
+        <p className="text-brand-purple ">Loading newsletters...</p>
       </div>
     );
   }
@@ -188,14 +188,14 @@ const AdminNewsletters = () => {
           <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Newsletter Management
           </h1>
-          <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Create and manage newsletter archive
           </p>
         </div>
         {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Newsletter
@@ -207,9 +207,9 @@ const AdminNewsletters = () => {
       {newsletters.length === 0 ? (
         <Card className="p-12 text-center">
           <FileText className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-          <p className="text-[var(--purple-lavender)] text-lg mb-4">No newsletters yet</p>
+          <p className="text-brand-purple  text-lg mb-4">No newsletters yet</p>
           {hasPermission('newsletters.create') && (
-            <Button onClick={handleCreate} className="bg-[var(--purple-lavender)] text-white">
+            <Button onClick={handleCreate} className="bg-brand-purple  text-white">
               <Plus className="h-4 w-4 mr-2" />
               Create First Newsletter
             </Button>
@@ -232,20 +232,20 @@ const AdminNewsletters = () => {
                           {newsletter.title}
                         </h3>
                         {newsletter.description && (
-                          <p className="text-[var(--purple-lavender)] mb-3">{newsletter.description}</p>
+                          <p className="text-brand-purple  mb-3">{newsletter.description}</p>
                         )}
                         <div className="flex items-center gap-3">
                           <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)]">
                             {formatDate(newsletter.published_date)}
                           </Badge>
-                          <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
+                          <Badge variant="outline" className="border-brand-purple  text-brand-purple ">
                             {newsletter.document_type === 'upload' ? 'PDF Upload' : 'Link'}
                           </Badge>
                           <Button
                             variant="ghost"
                             size="sm"
                             onClick={() => window.open(newsletter.document_url, '_blank')}
-                            className="text-[var(--purple-lavender)] hover:text-[var(--purple-muted)]"
+                            className="text-brand-purple  hover:text-[var(--purple-muted)]"
                           >
                             <ExternalLink className="h-4 w-4 mr-1" />
                             View
@@ -259,7 +259,7 @@ const AdminNewsletters = () => {
                               variant="outline"
                               size="sm"
                               onClick={() => handleEdit(newsletter)}
-                              className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]"
+                              className="border-brand-purple  text-brand-purple "
                             >
                               <Edit className="h-4 w-4" />
                             </Button>
@@ -361,12 +361,12 @@ const AdminNewsletters = () => {
                     required={!selectedNewsletter}
                   />
                   {uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Selected: {uploadedFile.name}
                     </p>
                   )}
                   {selectedNewsletter && !uploadedFile && (
-                    <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                    <p className="text-sm text-brand-purple  mt-1">
                       Current file will be kept if no new file is selected
                     </p>
                   )}
@@ -381,7 +381,7 @@ const AdminNewsletters = () => {
                     placeholder="https://docs.google.com/document/d/... or https://example.com/file.pdf"
                     required
                   />
-                  <p className="text-sm text-[var(--purple-lavender)] mt-1">
+                  <p className="text-sm text-brand-purple  mt-1">
                     Paste the shareable link to your document (Google Docs, Dropbox, PDF URL, etc.)
                   </p>
                 </div>
@@ -398,7 +398,7 @@ const AdminNewsletters = () => {
               </Button>
               <Button
                 type="submit"
-                className="bg-[var(--purple-lavender)] text-white"
+                className="bg-brand-purple  text-white"
                 disabled={submitting}
               >
                 {submitting ? 'Saving...' : selectedNewsletter ? 'Update' : 'Create'}
diff --git a/src/pages/admin/AdminPermissions.js b/src/pages/admin/AdminPermissions.js
index fb0d94c..a9e5b4a 100644
--- a/src/pages/admin/AdminPermissions.js
+++ b/src/pages/admin/AdminPermissions.js
@@ -188,7 +188,7 @@ const AdminPermissions = () => {
   const getRoleBadge = (role) => {
     const config = {
       admin: { label: 'Admin', color: 'bg-[var(--green-light)]', icon: Shield },
-      member: { label: 'Member', color: 'bg-[var(--purple-lavender)]', icon: Shield },
+      member: { label: 'Member', color: 'bg-brand-purple ', icon: Shield },
       guest: { label: 'Guest', color: 'bg-gray-400', icon: Shield }
     };
 
@@ -206,7 +206,7 @@ const AdminPermissions = () => {
   if (loading) {
     return (
       <div className="text-center py-20">
-        <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Loading permissions...
         </p>
       </div>
@@ -220,7 +220,7 @@ const AdminPermissions = () => {
         <h2 className="text-3xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Access Denied
         </h2>
-        <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           You don't have permission to manage role permissions.
         </p>
         <p className="text-sm text-gray-500 mt-2">
@@ -236,7 +236,7 @@ const AdminPermissions = () => {
         <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Permission Management
         </h1>
-        <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Configure granular permissions for each role. Superadmin always has all permissions.
         </p>
       </div>
@@ -260,7 +260,7 @@ const AdminPermissions = () => {
             {/* Stats */}
             <div className="grid md:grid-cols-3 gap-4 mb-8">
               <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Total Permissions
                 </p>
                 <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -268,7 +268,7 @@ const AdminPermissions = () => {
                 </p>
               </Card>
               <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Assigned
                 </p>
                 <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -276,7 +276,7 @@ const AdminPermissions = () => {
                 </p>
               </Card>
               <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-                <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Modules
                 </p>
                 <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -300,21 +300,21 @@ const AdminPermissions = () => {
                           checked={isModuleFullySelected(role, module)}
                           onCheckedChange={() => toggleModule(role, module)}
                           onClick={(e) => e.stopPropagation()}
-                          className="h-6 w-6 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
+                          className="h-6 w-6 border-2 border-brand-purple  data-[state=checked]:bg-brand-purple "
                         />
                         <div>
                           <h3 className="text-xl font-semibold text-[var(--purple-ink)] capitalize" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {module}
                           </h3>
-                          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {getModuleProgress(role, module)} permissions
                           </p>
                         </div>
                       </div>
                       {expandedModules[module] ? (
-                        <ChevronUp className="h-6 w-6 text-[var(--purple-lavender)]" />
+                        <ChevronUp className="h-6 w-6 text-brand-purple " />
                       ) : (
-                        <ChevronDown className="h-6 w-6 text-[var(--purple-lavender)]" />
+                        <ChevronDown className="h-6 w-6 text-brand-purple " />
                       )}
                     </div>
                   </div>
@@ -331,13 +331,13 @@ const AdminPermissions = () => {
                             <Checkbox
                               checked={selectedPermissions[role].includes(perm.code)}
                               onCheckedChange={() => togglePermission(role, perm.code)}
-                              className="mt-1 h-5 w-5 border-2 border-[var(--purple-lavender)] data-[state=checked]:bg-[var(--purple-lavender)]"
+                              className="mt-1 h-5 w-5 border-2 border-brand-purple  data-[state=checked]:bg-brand-purple "
                             />
                             <div className="flex-1">
                               <p className="font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                                 {perm.name}
                               </p>
-                              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                                 {perm.description}
                               </p>
                               <p className="text-xs text-gray-400 mt-1 font-mono">
@@ -357,7 +357,7 @@ const AdminPermissions = () => {
       </Tabs>
 
       {/* Superadmin Note */}
-      <Card className="p-6 bg-gradient-to-r from-[var(--purple-lavender)] to-[var(--purple-ink)] rounded-2xl border-none mb-8">
+      <Card className="p-6 bg-gradient-to-r from-brand-purple  to-[var(--purple-ink)] rounded-2xl border-none mb-8">
         <div className="flex items-start gap-4">
           <Lock className="h-6 w-6 text-white flex-shrink-0 mt-1" />
           <div className="text-white">
@@ -392,7 +392,7 @@ const AdminPermissions = () => {
             <AlertDialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Confirm Permission Changes
             </AlertDialogTitle>
-            <AlertDialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <AlertDialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to update permissions for <span className="font-semibold capitalize">{selectedRole}</span>?
               This will immediately affect all users with this role.
             </AlertDialogDescription>
diff --git a/src/pages/admin/AdminPlans.js b/src/pages/admin/AdminPlans.js
index 25110d0..9231efc 100644
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -134,7 +134,7 @@ const AdminPlans = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Subscription Plans
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage membership plans and pricing.
             </p>
           </div>
@@ -153,25 +153,25 @@ const AdminPlans = () => {
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Plans</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Plans</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.filter(p => p.active).length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Subscribers</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plans.reduce((sum, p) => sum + (p.subscriber_count || 0), 0)}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Revenue (Annual Est.)</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {formatPrice(
               plans.reduce((sum, p) => {
@@ -189,12 +189,12 @@ const AdminPlans = () => {
       <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <div className="relative">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
             <Input
               placeholder="Search plans..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
           <Select value={activeFilter} onValueChange={setActiveFilter}>
@@ -213,7 +213,7 @@ const AdminPlans = () => {
       {/* Plans Grid */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading plans...</p>
         </div>
       ) : filteredPlans.length > 0 ? (
         <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
@@ -221,7 +221,7 @@ const AdminPlans = () => {
             <Card
               key={plan.id}
               className={`p-6 bg-background rounded-2xl border-2 transition-all hover:shadow-lg ${plan.active
-                ? 'border-[var(--neutral-800)] hover:border-[var(--purple-lavender)]'
+                ? 'border-[var(--neutral-800)] hover:border-brand-purple '
                 : 'border-gray-400 opacity-60'
                 }`}
             >
@@ -242,7 +242,7 @@ const AdminPlans = () => {
                   </Badge>
                 )}
                 {plan.custom_cycle_enabled && (
-                  <Badge className="bg-[var(--purple-lavender)] text-white">
+                  <Badge className="bg-brand-purple  text-white">
                     Custom Dates
                   </Badge>
                 )}
@@ -260,7 +260,7 @@ const AdminPlans = () => {
 
               {/* Description */}
               {plan.description && (
-                <p className="text-sm text-[var(--purple-lavender)] mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple  mb-4 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {plan.description}
                 </p>
               )}
@@ -272,16 +272,16 @@ const AdminPlans = () => {
                     {formatPrice(plan.minimum_price_cents || plan.price_cents)}
                   </div>
                   {plan.suggested_price_cents && plan.suggested_price_cents > plan.minimum_price_cents && (
-                    <div className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       (Suggested: {formatPrice(plan.suggested_price_cents)})
                     </div>
                   )}
                 </div>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   {getBillingCycleLabel(plan.billing_cycle)}
                 </p>
                 {plan.custom_cycle_enabled && (
-                  <p className="text-xs text-[var(--purple-lavender)] font-mono mt-1">
+                  <p className="text-xs text-brand-purple  font-mono mt-1">
                     {formatCustomCycleDates(plan)}
                   </p>
                 )}
@@ -294,7 +294,7 @@ const AdminPlans = () => {
                     onClick={() => handleEditPlan(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full"
                   >
                     <Edit className="h-4 w-4 mr-1" />
                     Edit
@@ -314,7 +314,7 @@ const AdminPlans = () => {
 
               {/* Warning for plans with subscribers */}
               {plan.subscriber_count > 0 && (
-                <p className="text-xs text-[var(--purple-lavender)] mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-xs text-brand-purple  mt-2 text-center" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Cannot delete plan with active subscribers
                 </p>
               )}
@@ -327,7 +327,7 @@ const AdminPlans = () => {
           <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Plans Found
           </h3>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || activeFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'Create your first subscription plan to get started'}
@@ -359,7 +359,7 @@ const AdminPlans = () => {
             <h2 className="text-xl sm:text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Delete Plan
             </h2>
-            <p className="text-sm sm:text-base text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-sm sm:text-base text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Are you sure you want to delete "{planToDelete?.name}"? This action
               will deactivate the plan and it won't be available for new subscriptions.
             </p>
diff --git a/src/pages/admin/AdminRoles.js b/src/pages/admin/AdminRoles.js
index 51f2e9f..dbff079 100644
--- a/src/pages/admin/AdminRoles.js
+++ b/src/pages/admin/AdminRoles.js
@@ -188,7 +188,7 @@ const AdminRoles = () => {
       {/* Header */}
       <div className="flex justify-between items-center">
         <div>
-          <h1 className="text-3xl font-bold">Role Management</h1>
+          <h1 className="text-3xl font-bold text-[var(--purple-ink)]">Role Management</h1>
           <p className="text-gray-600 mt-1">
             Create and manage custom roles with specific permissions
           </p>
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index 61a8aaf..1a4645b 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -99,7 +99,7 @@ const AdminStaff = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-[var(--purple-lavender)] text-white' },
+      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
       admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
       moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
       staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
@@ -137,7 +137,7 @@ const AdminStaff = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Staff Management
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage internal team members and their roles.
             </p>
           </div>
@@ -145,7 +145,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-[var(--purple-lavender)] hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
+                className="bg-brand-purple  hover:bg-[var(--purple-ink)] dark:hover:bg-brand-dark-lavender text-white rounded-xl h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-xl h-12 px-6"
+                className="bg-[var(--green-light)] hover:bg-[var(--green-sage)] text-white rounded-xl h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff
@@ -167,25 +167,25 @@ const AdminStaff = () => {
       {/* Stats */}
       <div className="grid md:grid-cols-4 gap-4 mb-8">
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Staff</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Admins</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => ['admin', 'superadmin'].includes(u.role)).length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Moderators</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.role === 'moderator').length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
           <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
@@ -210,12 +210,12 @@ const AdminStaff = () => {
           <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
             <div className="grid md:grid-cols-2 gap-4">
               <div className="relative">
-                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+                <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
                 <Input
                   placeholder="Search by name or email..."
                   value={searchQuery}
                   onChange={(e) => setSearchQuery(e.target.value)}
-                  className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                   data-testid="search-staff-input"
                 />
               </div>
@@ -238,7 +238,7 @@ const AdminStaff = () => {
           {/* Staff List */}
           {loading ? (
             <div className="text-center py-20">
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading staff...</p>
             </div>
           ) : filteredUsers.length > 0 ? (
             <div className="space-y-4">
@@ -264,7 +264,7 @@ const AdminStaff = () => {
                           {getRoleBadge(user.role)}
                           {getStatusBadge(user.status)}
                         </div>
-                        <div className="grid md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone}</p>
                           <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -280,7 +280,7 @@ const AdminStaff = () => {
                       <Button
                         onClick={() => navigate(`/admin/users/${user.id}`)}
                         variant="outline"
-                        className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
+                        className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
                       >
                         <Edit className="h-4 w-4 mr-2" />
                         Manage
@@ -330,7 +330,7 @@ const AdminStaff = () => {
               <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Staff Found
               </h3>
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {searchQuery || roleFilter !== 'all'
                   ? 'Try adjusting your filters'
                   : 'No staff members yet'}
diff --git a/src/pages/admin/AdminSubscriptions.js b/src/pages/admin/AdminSubscriptions.js
index 4b891b1..6b21248 100644
--- a/src/pages/admin/AdminSubscriptions.js
+++ b/src/pages/admin/AdminSubscriptions.js
@@ -277,7 +277,7 @@ Proceed with activation?`;
   if (loading) {
     return (
       <div className="flex items-center justify-center min-h-screen">
-        <Loader2 className="h-12 w-12 animate-spin text-[var(--purple-lavender)]" />
+        <Loader2 className="h-12 w-12 animate-spin text-brand-purple " />
       </div>
     );
   }
@@ -289,7 +289,7 @@ Proceed with activation?`;
         <h1 className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
           Subscription Management
         </h1>
-        <p className="text-[var(--purple-lavender)] mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  mt-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           View and manage all member subscriptions
         </p>
       </div>
@@ -299,7 +299,7 @@ Proceed with activation?`;
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Subscriptions
               </p>
               <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -307,7 +307,7 @@ Proceed with activation?`;
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <CreditCard className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <CreditCard className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -315,7 +315,7 @@ Proceed with activation?`;
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Active Members
               </p>
               <p className="text-3xl font-bold text-[var(--green-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -331,7 +331,7 @@ Proceed with activation?`;
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Revenue
               </p>
               <p className="text-3xl font-bold text-[var(--purple-ink)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -339,7 +339,7 @@ Proceed with activation?`;
               </p>
             </div>
             <div className="p-3 bg-[var(--neutral-800)]/20 rounded-full">
-              <DollarSign className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <DollarSign className="h-6 w-6 text-brand-purple " />
             </div>
           </div>
         </Card>
@@ -347,7 +347,7 @@ Proceed with activation?`;
         <Card className="p-6 bg-background rounded-2xl border-2 border-[var(--neutral-800)]">
           <div className="flex items-center justify-between">
             <div>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Total Donations
               </p>
               <p className="text-3xl font-bold text-[var(--orange-light)] mt-2" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -367,12 +367,12 @@ Proceed with activation?`;
           {/* Search */}
           <div className="md:col-span-1">
             <div className="relative">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
                 placeholder="Search by name or email..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="pl-10 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
           </div>
@@ -409,7 +409,7 @@ Proceed with activation?`;
         </div>
 
         <div className="mt-4 flex items-center justify-between">
-          <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Showing {filteredSubscriptions.length} of {subscriptions.length} subscriptions
           </div>
 
@@ -430,14 +430,14 @@ Proceed with activation?`;
                   onClick={() => handleExport('all')}
                   className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                 >
-                  <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                  <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                   <span className="text-[var(--purple-ink)]">Export All Subscriptions</span>
                 </DropdownMenuItem>
                 <DropdownMenuItem
                   onClick={() => handleExport('current')}
                   className="cursor-pointer hover:bg-[var(--lavender-300)] rounded-lg p-3"
                 >
-                  <FileDown className="h-4 w-4 mr-2 text-[var(--purple-lavender)]" />
+                  <FileDown className="h-4 w-4 mr-2 text-brand-purple " />
                   <span className="text-[var(--purple-ink)]">Export Current View</span>
                 </DropdownMenuItem>
               </DropdownMenuContent>
@@ -460,7 +460,7 @@ Proceed with activation?`;
                       <p className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
                       </p>
-                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.user.email}
                       </p>
                     </div>
@@ -470,12 +470,12 @@ Proceed with activation?`;
                   {/* Plan & Period */}
                   <div className="grid grid-cols-2 gap-3 text-sm">
                     <div>
-                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Plan</p>
+                      <p className="text-xs text-brand-purple  mb-1">Plan</p>
                       <p className="font-medium text-[var(--purple-ink)]">{sub.plan.name}</p>
-                      <p className="text-xs text-[var(--purple-lavender)]">{sub.plan.billing_cycle}</p>
+                      <p className="text-xs text-brand-purple ">{sub.plan.billing_cycle}</p>
                     </div>
                     <div>
-                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Period</p>
+                      <p className="text-xs text-brand-purple  mb-1">Period</p>
                       <p className="text-[var(--purple-ink)]">
                         {new Date(sub.current_period_start).toLocaleDateString()} -
                         {new Date(sub.current_period_end).toLocaleDateString()}
@@ -486,19 +486,19 @@ Proceed with activation?`;
                   {/* Pricing */}
                   <div className="grid grid-cols-3 gap-2 text-sm bg-background/50 p-3 rounded">
                     <div>
-                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Base Fee</p>
+                      <p className="text-xs text-brand-purple  mb-1">Base Fee</p>
                       <p className="font-medium text-[var(--purple-ink)]">
                         ${(sub.base_fee_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Donation</p>
+                      <p className="text-xs text-brand-purple  mb-1">Donation</p>
                       <p className="font-medium text-[var(--purple-ink)]">
                         ${(sub.donation_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     <div>
-                      <p className="text-xs text-[var(--purple-lavender)] mb-1">Total</p>
+                      <p className="text-xs text-brand-purple  mb-1">Total</p>
                       <p className="font-semibold text-[var(--purple-ink)]">
                         ${(sub.total_cents / 100).toFixed(2)}
                       </p>
@@ -512,7 +512,7 @@ Proceed with activation?`;
                         size="sm"
                         variant="outline"
                         onClick={() => handleEdit(sub)}
-                        className="flex-1 text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
+                        className="flex-1 text-brand-purple  hover:bg-[var(--neutral-800)]"
                       >
                         <Edit className="h-4 w-4 mr-2" />
                         Edit
@@ -534,7 +534,7 @@ Proceed with activation?`;
               </Card>
             ))
           ) : (
-            <div className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No subscriptions found
             </div>
           )}
@@ -579,7 +579,7 @@ Proceed with activation?`;
                       <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.user.first_name} {sub.user.last_name}
                       </div>
-                      <div className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.user.email}
                       </div>
                     </td>
@@ -587,7 +587,7 @@ Proceed with activation?`;
                       <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.plan.name}
                       </div>
-                      <div className="text-xs text-[var(--purple-lavender)]">
+                      <div className="text-xs text-brand-purple ">
                         {sub.plan.billing_cycle}
                       </div>
                     </td>
@@ -599,7 +599,7 @@ Proceed with activation?`;
                     <td className="p-4">
                       <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         <div>{formatDate(sub.start_date)}</div>
-                        <div className="text-xs text-[var(--purple-lavender)]">to {formatDate(sub.end_date)}</div>
+                        <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
                       </div>
                     </td>
                     <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
@@ -618,7 +618,7 @@ Proceed with activation?`;
                             size="sm"
                             variant="outline"
                             onClick={() => handleEdit(sub)}
-                            className="text-[var(--purple-lavender)] hover:bg-[var(--neutral-800)]"
+                            className="text-brand-purple  hover:bg-[var(--neutral-800)]"
                           >
                             <Edit className="h-4 w-4" />
                           </Button>
@@ -639,7 +639,7 @@ Proceed with activation?`;
                 ))
               ) : (
                 <tr>
-                  <td colSpan="8" className="p-12 text-center text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <td colSpan="8" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     No subscriptions found
                   </td>
                 </tr>
@@ -656,7 +656,7 @@ Proceed with activation?`;
             <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Edit Subscription
             </DialogTitle>
-            <DialogDescription className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <DialogDescription className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Update subscription status or end date for {selectedSubscription?.user.first_name} {selectedSubscription?.user.last_name}
             </DialogDescription>
           </DialogHeader>
@@ -740,13 +740,13 @@ Proceed with activation?`;
                 End Date
               </Label>
               <div className="relative">
-                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+                <Calendar className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
                 <Input
                   id="end_date"
                   type="date"
                   value={editFormData.end_date}
                   onChange={(e) => setEditFormData({ ...editFormData, end_date: e.target.value })}
-                  className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                  className="pl-12 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
                 />
               </div>
             </div>
diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index 9014aa4..8bc4d40 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -240,7 +240,7 @@ const AdminUserView = () => {
             </div>
 
             {/* Contact Info */}
-            <div className="grid md:grid-cols-2 gap-4 text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <div className="grid md:grid-cols-2 gap-4 text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               <div className="flex items-center gap-2">
                 <Mail className="h-4 w-4" />
                 <span>{user.email}</span>
@@ -272,7 +272,7 @@ const AdminUserView = () => {
             onClick={handleResetPasswordRequest}
             disabled={resetPasswordLoading}
             variant="outline"
-            className="border-2 border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full px-4 py-2 disabled:opacity-50"
+            className="border-2 border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full px-4 py-2 disabled:opacity-50"
           >
             <Lock className="h-4 w-4 mr-2" />
             {resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
@@ -321,7 +321,7 @@ const AdminUserView = () => {
             </Button>
           )}
 
-          <div className="flex items-center gap-2 text-sm text-[var(--purple-lavender)] ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <div className="flex items-center gap-2 text-sm text-brand-purple  ml-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             <AlertTriangle className="h-4 w-4" />
             <span>User will receive a temporary password via email</span>
           </div>
@@ -336,12 +336,12 @@ const AdminUserView = () => {
 
         <div className="grid md:grid-cols-2 gap-6">
           <div>
-            <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
+            <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</label>
             <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.address}</p>
           </div>
 
           <div>
-            <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
+            <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
             <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {new Date(user.date_of_birth).toLocaleDateString()}
             </p>
@@ -349,7 +349,7 @@ const AdminUserView = () => {
 
           {user.partner_first_name && (
             <div>
-              <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
+              <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
               <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 {user.partner_first_name} {user.partner_last_name}
               </p>
@@ -358,14 +358,14 @@ const AdminUserView = () => {
 
           {user.referred_by_member_name && (
             <div>
-              <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
+              <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Referred By</label>
               <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{user.referred_by_member_name}</p>
             </div>
           )}
 
           {user.lead_sources && user.lead_sources.length > 0 && (
             <div className="md:col-span-2">
-              <label className="text-sm font-medium text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
+              <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Lead Sources</label>
               <div className="flex flex-wrap gap-2 mt-2">
                 {user.lead_sources.map((source, idx) => (
                   <Badge key={idx} variant="outline">{source}</Badge>
@@ -384,9 +384,9 @@ const AdminUserView = () => {
           </h2>
 
           {subscriptionsLoading ? (
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
           ) : subscriptions.length === 0 ? (
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
           ) : (
             <div className="space-y-6">
               {subscriptions.map((sub) => (
@@ -396,7 +396,7 @@ const AdminUserView = () => {
                       <h3 className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                         {sub.plan.name}
                       </h3>
-                      <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {sub.plan.billing_cycle}
                       </p>
                     </div>
@@ -411,42 +411,42 @@ const AdminUserView = () => {
 
                   <div className="grid md:grid-cols-2 gap-4 text-sm">
                     <div>
-                      <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
+                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
                       <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(sub.start_date).toLocaleDateString()}
                       </p>
                     </div>
                     {sub.end_date && (
                       <div>
-                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
+                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
                         <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {new Date(sub.end_date).toLocaleDateString()}
                         </p>
                       </div>
                     )}
                     <div>
-                      <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
+                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
                       <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         ${(sub.base_subscription_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     {sub.donation_cents > 0 && (
                       <div>
-                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
+                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
                         <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           ${(sub.donation_cents / 100).toFixed(2)}
                         </p>
                       </div>
                     )}
                     <div>
-                      <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
+                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
                       <p className="text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         ${(sub.amount_paid_cents / 100).toFixed(2)}
                       </p>
                     </div>
                     {sub.payment_method && (
                       <div>
-                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
+                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
                         <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {sub.payment_method}
                         </p>
@@ -454,7 +454,7 @@ const AdminUserView = () => {
                     )}
                     {sub.stripe_subscription_id && (
                       <div className="md:col-span-2">
-                        <label className="text-[var(--purple-lavender)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
+                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
                         <p className="text-[var(--purple-ink)] text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           {sub.stripe_subscription_id}
                         </p>
diff --git a/src/pages/admin/AdminValidations.js b/src/pages/admin/AdminValidations.js
index 86ab5cb..1ece097 100644
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -282,7 +282,7 @@ const AdminValidations = () => {
         <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
           Validation Queue
         </h1>
-        <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           Review and validate pending membership applications.
         </p>
       </div>
@@ -291,31 +291,31 @@ const AdminValidations = () => {
       <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid grid-cols-2 md:grid-cols-5 gap-4">
           <div>
-            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
+            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Pending</p>
             <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
+            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Awaiting Email</p>
             <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pending_email').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
+            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validation</p>
             <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pending_validation').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
+            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pre-Validated</p>
             <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'pre_validated').length}
             </p>
           </div>
           <div>
-            <p className="text-sm text-[var(--purple-lavender)] mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+            <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
             <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               {pendingUsers.filter(u => u.status === 'payment_pending').length}
             </p>
@@ -333,12 +333,12 @@ const AdminValidations = () => {
       <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] mb-8">
         <div className="grid md:grid-cols-3 gap-4">
           <div className="relative md:col-span-2">
-            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+            <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
             <Input
               placeholder="Search by name, email, or phone..."
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+              className="pl-12 h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
             />
           </div>
 
@@ -361,7 +361,7 @@ const AdminValidations = () => {
       {/* Table */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading pending applications...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <>
@@ -507,7 +507,7 @@ const AdminValidations = () => {
           <div className="mt-8 flex flex-col md:flex-row justify-between items-center gap-4">
             {/* Page size selector */}
             <div className="flex items-center gap-2">
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Show</p>
               <Select
                 value={itemsPerPage.toString()}
                 onValueChange={(val) => {
@@ -525,7 +525,7 @@ const AdminValidations = () => {
                   <SelectItem value="100">100</SelectItem>
                 </SelectContent>
               </Select>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 entries (showing {(currentPage - 1) * itemsPerPage + 1}-
                 {Math.min(currentPage * itemsPerPage, filteredUsers.length)} of {filteredUsers.length})
               </p>
@@ -586,7 +586,7 @@ const AdminValidations = () => {
           <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             No Pending Validations
           </h3>
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {searchQuery || statusFilter !== 'all'
               ? 'Try adjusting your filters'
               : 'All applications have been reviewed!'}
diff --git a/src/pages/members/Bylaws.js b/src/pages/members/Bylaws.js
index acb6b08..cce734e 100644
--- a/src/pages/members/Bylaws.js
+++ b/src/pages/members/Bylaws.js
@@ -54,7 +54,7 @@ export default function Bylaws() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading bylaws...
           </p>
         </div>
@@ -72,16 +72,16 @@ export default function Bylaws() {
           <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             LOAF Bylaws
           </h1>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Review the official governing bylaws and policies of the LOAF community.
           </p>
         </div>
 
         {/* Current Bylaws */}
         {currentBylaws ? (
-          <Card className="p-8 bg-background rounded-2xl border-2 border-[var(--purple-lavender)] mb-6">
+          <Card className="p-8 bg-background rounded-2xl border-2 border-brand-purple  mb-6">
             <div className="flex items-start gap-4 mb-6">
-              <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-4 rounded-xl">
+              <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl">
                 <Scale className="h-8 w-8 text-white" />
               </div>
               <div className="flex-1">
@@ -94,7 +94,7 @@ export default function Bylaws() {
                     Current Version
                   </Badge>
                 </div>
-                <div className="flex items-center gap-4 text-[var(--purple-lavender)] mb-4">
+                <div className="flex items-center gap-4 text-brand-purple  mb-4">
                   <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Version: <strong>{currentBylaws.version}</strong>
                   </span>
@@ -106,7 +106,7 @@ export default function Bylaws() {
                 <Button
                   onClick={() => window.open(currentBylaws.document_url, '_blank')}
                   size="lg"
-                  className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+                  className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
                 >
                   <ExternalLink className="h-5 w-5" />
                   View Current Bylaws
@@ -117,7 +117,7 @@ export default function Bylaws() {
         ) : (
           <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)] mb-6">
             <Scale className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-            <p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No current bylaws document available
             </p>
           </Card>
@@ -129,7 +129,7 @@ export default function Bylaws() {
             <Button
               onClick={() => setShowHistory(!showHistory)}
               variant="outline"
-              className="w-full border-[var(--neutral-800)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full flex items-center justify-center gap-2"
+              className="w-full border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full flex items-center justify-center gap-2"
             >
               <History className="h-4 w-4" />
               {showHistory ? 'Hide' : 'View'} Version History ({history.length - 1} previous {history.length - 1 === 1 ? 'version' : 'versions'})
@@ -150,7 +150,7 @@ export default function Bylaws() {
                     <h4 className="text-lg font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {bylaws.title}
                     </h4>
-                    <div className="flex items-center gap-3 text-sm text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-sm text-brand-purple ">
                       <span>Version {bylaws.version}</span>
                       <span>•</span>
                       <span>Effective {formatDate(bylaws.effective_date)}</span>
@@ -160,7 +160,7 @@ export default function Bylaws() {
                     onClick={() => window.open(bylaws.document_url, '_blank')}
                     variant="outline"
                     size="sm"
-                    className="border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)] rounded-full flex items-center gap-2"
+                    className="border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)] rounded-full flex items-center gap-2"
                   >
                     <ExternalLink className="h-4 w-4" />
                     View
@@ -174,12 +174,12 @@ export default function Bylaws() {
         {/* Information Card */}
         <Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
           <div className="flex items-start gap-3">
-            <Scale className="h-5 w-5 text-[var(--purple-lavender)] mt-1" />
+            <Scale className="h-5 w-5 text-brand-purple  mt-1" />
             <div>
               <h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                 About LOAF Bylaws
               </h4>
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 The bylaws serve as the governing document for LOAF, outlining the organization's structure,
                 membership requirements, officer responsibilities, and operational procedures. All members are
                 encouraged to familiarize themselves with these guidelines.
diff --git a/src/pages/members/EventGallery.js b/src/pages/members/EventGallery.js
index 26bbce1..08551d7 100644
--- a/src/pages/members/EventGallery.js
+++ b/src/pages/members/EventGallery.js
@@ -124,7 +124,7 @@ const EventGallery = () => {
           </div>
         )}
         <div className="absolute top-3 right-3">
-          <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1 rounded-full">
+          <Badge className="bg-brand-purple  text-white px-3 py-1 rounded-full">
             {event.gallery_count} {event.gallery_count === 1 ? 'photo' : 'photos'}
           </Badge>
         </div>
@@ -136,19 +136,19 @@ const EventGallery = () => {
       </h3>
 
       {event.description && (
-        <p className="text-[var(--purple-lavender)] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {event.description}
         </p>
       )}
 
       <div className="space-y-2 text-sm">
-        <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+        <div className="flex items-center gap-2 text-brand-purple ">
           <Calendar className="h-4 w-4" />
           <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             {moment(event.start_at).format('MMMM D, YYYY')}
           </span>
         </div>
-        <div className="flex items-center gap-2 text-[var(--purple-lavender)]">
+        <div className="flex items-center gap-2 text-brand-purple ">
           <MapPin className="h-4 w-4" />
           <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{event.location}</span>
         </div>
@@ -168,7 +168,7 @@ const EventGallery = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Event Gallery
             </h1>
-            <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Browse photos from past LOAF events.
             </p>
           </div>
@@ -176,7 +176,7 @@ const EventGallery = () => {
           {/* Events Grid */}
           {loading ? (
             <div className="text-center py-20">
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading galleries...</p>
             </div>
           ) : events.length > 0 ? (
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -190,7 +190,7 @@ const EventGallery = () => {
               <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
                 No Event Galleries Yet
               </h3>
-              <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Event photos will appear here once admins upload them.
               </p>
             </div>
@@ -210,7 +210,7 @@ const EventGallery = () => {
         <Button
           onClick={handleBackToEvents}
           variant="ghost"
-          className="mb-6 text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-500)]"
+          className="mb-6 text-brand-purple  hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-500)]"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <ArrowLeft className="h-4 w-4 mr-2" />
@@ -222,7 +222,7 @@ const EventGallery = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             {selectedEvent.title}
           </h1>
-          <div className="flex flex-wrap gap-4 text-[var(--purple-lavender)]">
+          <div className="flex flex-wrap gap-4 text-brand-purple ">
             <div className="flex items-center gap-2">
               <Calendar className="h-5 w-5" />
               <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -233,7 +233,7 @@ const EventGallery = () => {
               <MapPin className="h-5 w-5" />
               <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
             </div>
-            <Badge className="bg-[var(--purple-lavender)] text-white px-3 py-1 rounded-full">
+            <Badge className="bg-brand-purple  text-white px-3 py-1 rounded-full">
               {selectedEvent.gallery_count} {selectedEvent.gallery_count === 1 ? 'photo' : 'photos'}
             </Badge>
           </div>
@@ -242,7 +242,7 @@ const EventGallery = () => {
         {/* Gallery Grid */}
         {galleryLoading ? (
           <div className="text-center py-20">
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading images...</p>
           </div>
         ) : galleryImages.length > 0 ? (
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
@@ -276,7 +276,7 @@ const EventGallery = () => {
             <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               No Photos Yet
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Photos from this event will appear here once uploaded.
             </p>
           </div>
diff --git a/src/pages/members/Financials.js b/src/pages/members/Financials.js
index a5539dc..d4989d9 100644
--- a/src/pages/members/Financials.js
+++ b/src/pages/members/Financials.js
@@ -32,7 +32,7 @@ export default function Financials() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading financial reports...
           </p>
         </div>
@@ -50,7 +50,7 @@ export default function Financials() {
           <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Financial Reports
           </h1>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Access annual financial reports and stay informed about LOAF's fiscal responsibility.
           </p>
         </div>
@@ -59,7 +59,7 @@ export default function Financials() {
         {reports.length === 0 ? (
           <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
             <TrendingUp className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-            <p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No financial reports available yet
             </p>
           </Card>
@@ -69,7 +69,7 @@ export default function Financials() {
               <Card key={report.id} className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                 <div className="flex items-center gap-6">
                   {/* Year Badge */}
-                  <div className="bg-gradient-to-br from-[var(--purple-lavender)] to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
+                  <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-6 rounded-xl text-white min-w-[120px] text-center">
                     <DollarSign className="h-8 w-8 mx-auto mb-2" />
                     <div className="text-3xl font-bold" style={{ fontFamily: "'Inter', sans-serif" }}>
                       {report.year}
@@ -83,13 +83,13 @@ export default function Financials() {
                       {report.title}
                     </h3>
                     <div className="flex items-center gap-2 mb-4">
-                      <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
+                      <Badge variant="outline" className="border-brand-purple  text-brand-purple ">
                         {report.document_type === 'google_drive' ? 'Google Drive' : report.document_type.toUpperCase()}
                       </Badge>
                     </div>
                     <Button
                       onClick={() => window.open(report.document_url, '_blank')}
-                      className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+                      className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
                     >
                       <ExternalLink className="h-4 w-4" />
                       View Report
@@ -105,12 +105,12 @@ export default function Financials() {
         {reports.length > 0 && (
           <Card className="mt-8 p-6 bg-[var(--lavender-600)] border border-[var(--neutral-800)]">
             <div className="flex items-start gap-3">
-              <TrendingUp className="h-5 w-5 text-[var(--purple-lavender)] mt-1" />
+              <TrendingUp className="h-5 w-5 text-brand-purple  mt-1" />
               <div>
                 <h4 className="font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Transparency & Accountability
                 </h4>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   LOAF is committed to financial transparency. These reports provide detailed information about our
                   revenue, expenses, and how member contributions support our community programs and operations.
                 </p>
diff --git a/src/pages/members/MemberCalendar.js b/src/pages/members/MemberCalendar.js
index 43be6b7..1136be1 100644
--- a/src/pages/members/MemberCalendar.js
+++ b/src/pages/members/MemberCalendar.js
@@ -127,7 +127,7 @@ export default function MemberCalendar() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading calendar...
           </p>
         </div>
@@ -144,7 +144,7 @@ export default function MemberCalendar() {
           <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Event Calendar
           </h1>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             View and manage your event RSVPs. Click on any event to see details and update your RSVP.
           </p>
 
@@ -157,19 +157,19 @@ export default function MemberCalendar() {
             <div className="flex gap-4 ml-auto">
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 rounded bg-[var(--green-light)]"></div>
-                <span className="text-sm text-[var(--purple-lavender)]">Going</span>
+                <span className="text-sm text-brand-purple ">Going</span>
               </div>
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 rounded bg-[var(--orange-400)]"></div>
-                <span className="text-sm text-[var(--purple-lavender)]">Maybe</span>
+                <span className="text-sm text-brand-purple ">Maybe</span>
               </div>
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 rounded bg-[var(--slate-400)]"></div>
-                <span className="text-sm text-[var(--purple-lavender)]">Not Going</span>
+                <span className="text-sm text-brand-purple ">Not Going</span>
               </div>
               <div className="flex items-center gap-2">
                 <div className="w-4 h-4 rounded bg-[var(--neutral-800)]"></div>
-                <span className="text-sm text-[var(--purple-lavender)]">No RSVP</span>
+                <span className="text-sm text-brand-purple ">No RSVP</span>
               </div>
             </div>
           </div>
@@ -201,7 +201,7 @@ export default function MemberCalendar() {
                 <DialogHeader>
                   <div className="flex items-center gap-3 mb-2">
                     <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                      <CalendarIcon className="h-6 w-6 text-[var(--purple-lavender)]" />
+                      <CalendarIcon className="h-6 w-6 text-brand-purple " />
                     </div>
                     {selectedEvent.user_rsvp_status && (
                       <Badge
@@ -225,7 +225,7 @@ export default function MemberCalendar() {
 
                 <div className="space-y-4 mt-4">
                   <div className="space-y-3">
-                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-brand-purple ">
                       <CalendarIcon className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(selectedEvent.start_at).toLocaleDateString('en-US', {
@@ -236,17 +236,17 @@ export default function MemberCalendar() {
                         })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-brand-purple ">
                       <Clock className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {new Date(selectedEvent.start_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })} - {new Date(selectedEvent.end_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
                       </span>
                     </div>
-                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-brand-purple ">
                       <MapPin className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>{selectedEvent.location}</span>
                     </div>
-                    <div className="flex items-center gap-3 text-[var(--purple-lavender)]">
+                    <div className="flex items-center gap-3 text-brand-purple ">
                       <Users className="h-5 w-5" />
                       <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {selectedEvent.rsvp_count || 0} {selectedEvent.rsvp_count === 1 ? 'person' : 'people'} attending
@@ -260,7 +260,7 @@ export default function MemberCalendar() {
                       <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                         About This Event
                       </h3>
-                      <p className="text-[var(--purple-lavender)] leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                      <p className="text-brand-purple  leading-relaxed whitespace-pre-line" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                         {selectedEvent.description}
                       </p>
                     </div>
@@ -290,7 +290,7 @@ export default function MemberCalendar() {
                         variant="outline"
                         className={`rounded-full px-6 flex items-center gap-2 border-2 ${selectedEvent.user_rsvp_status === 'maybe'
                           ? 'border-orange-400 bg-orange-100 text-orange-700'
-                          : 'border-[var(--purple-lavender)] text-[var(--purple-lavender)] hover:bg-[var(--lavender-300)]'
+                          : 'border-brand-purple  text-brand-purple  hover:bg-[var(--lavender-300)]'
                           }`}
                       >
                         <HelpCircle className="h-4 w-4" />
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index 255c896..ba24ce9 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -114,8 +114,8 @@ const MembersDirectory = () => {
   const Border = ({ yaxis = false }) => {
     return (
       yaxis ?
-        <div className=' border-2 w-full border-[var(--purple-lavender)] my-24' />
-        : <div className=' border-2 w-full border-[var(--purple-lavender)] mb-24' />
+        <div className=' border-2 w-full border-brand-purple  my-24' />
+        : <div className=' border-2 w-full border-brand-purple  mb-24' />
     )
   }
   const MemberCard = ({ member }) => (
@@ -130,7 +130,7 @@ const MembersDirectory = () => {
           />
         ) : (
           <div className="w-32 h-32 rounded-full bg-[var(--neutral-800)] border-4 border-[var(--neutral-800)] flex items-center justify-center">
-            <span className="text-4xl font-semibold text-[var(--purple-lavender)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+            <span className="text-4xl font-semibold text-brand-purple " style={{ fontFamily: "'Inter', sans-serif" }}>
               {getInitials(member.first_name, member.last_name)}
             </span>
           </div>
@@ -146,7 +146,7 @@ const MembersDirectory = () => {
       {member.directory_partner_name && (
         <div className="flex items-center justify-center gap-2 mb-4">
           <Heart className="h-4 w-4 text-[var(--orange-light)]" />
-          <span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Partner: {member.directory_partner_name}
           </span>
         </div>
@@ -154,7 +154,7 @@ const MembersDirectory = () => {
 
       {/* Bio */}
       {member.directory_bio && (
-        <p className="text-[var(--purple-lavender)] text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+        <p className="text-brand-purple  text-center mb-4 line-clamp-3" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
           {member.directory_bio}
         </p>
       )}
@@ -162,8 +162,8 @@ const MembersDirectory = () => {
       {/* Member Since */}
       {member.created_at && (
         <div className="flex items-center justify-center gap-2 mb-4">
-          <Calendar className="h-4 w-4 text-[var(--purple-lavender)]" />
-          <span className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <Calendar className="h-4 w-4 text-brand-purple " />
+          <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Member since {new Date(member.created_at).toLocaleDateString('en-US', {
               month: 'long',
               year: 'numeric'
@@ -176,10 +176,10 @@ const MembersDirectory = () => {
       <div className="space-y-3 mb-4">
         {member.directory_email && (
           <div className="flex items-center gap-2 text-sm">
-            <Mail className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
+            <Mail className="h-4 w-4 text-brand-purple  flex-shrink-0" />
             <a
               href={`mailto:${member.directory_email}`}
-              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)] truncate"
+              className="text-brand-purple  hover:text-[var(--purple-ink)] truncate"
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               {member.directory_email}
@@ -189,10 +189,10 @@ const MembersDirectory = () => {
 
         {member.directory_phone && (
           <div className="flex items-center gap-2 text-sm">
-            <Phone className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0" />
+            <Phone className="h-4 w-4 text-brand-purple  flex-shrink-0" />
             <a
               href={`tel:${member.directory_phone}`}
-              className="text-[var(--purple-lavender)] hover:text-[var(--purple-ink)]"
+              className="text-brand-purple  hover:text-[var(--purple-ink)]"
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
               {member.directory_phone}
@@ -202,8 +202,8 @@ const MembersDirectory = () => {
 
         {member.directory_address && (
           <div className="flex items-start gap-2 text-sm">
-            <MapPin className="h-4 w-4 text-[var(--purple-lavender)] flex-shrink-0 mt-0.5" />
-            <span className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <MapPin className="h-4 w-4 text-brand-purple  flex-shrink-0 mt-0.5" />
+            <span className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {member.directory_address}
             </span>
           </div>
@@ -269,7 +269,7 @@ const MembersDirectory = () => {
       <div className="pt-4 mt-4 border-t border-[var(--neutral-800)]">
         <Button
           onClick={() => handleViewProfile(member.id)}
-          className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full py-5"
+          className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full py-5"
         >
           <UserCircle className="h-4 w-4 mr-2" />
           View Full Profile
@@ -293,25 +293,25 @@ const MembersDirectory = () => {
               LOAF Members
             </h1>
             <p className="text-lg " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-[var(--purple-lavender)] font-medium'>{totalMembers}</span>
+              <span className='text-foreground'>Number of current memebers in the directory: </span> <span className='text-brand-purple  font-medium'>{totalMembers}</span>
             </p>
           </div>
 
           {/* Search Bar */}
           <div className="mb-24 mx-10">
             <div className="relative w-full  ">
-              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-brand-purple " />
               <Input
                 type="text"
                 placeholder="Search by name or bio..."
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
-                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-[var(--purple-lavender)] focus:ring-[var(--purple-lavender)]"
+                className="pl-12 pr-4 py-6 text-3xl font-medium bg-background border-foreground rounded-full focus:border-brand-purple  focus:ring-brand-purple "
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               />
             </div>
             {searchQuery && (
-              <p className="mt-3 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="mt-3 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 Found {filteredMembers.length} {filteredMembers.length === 1 ? 'member' : 'members'}
               </p>
             )}
@@ -325,7 +325,7 @@ const MembersDirectory = () => {
         {/* Members Grid */}
         {loading ? (
           <div className="text-center py-20">
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
           </div>
         ) : filteredMembers.length > 0 ? (
           <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
@@ -339,7 +339,7 @@ const MembersDirectory = () => {
             <h3 className="text-2xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               {searchQuery ? 'No Members Found' : 'No Members in Directory'}
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               {searchQuery
                 ? 'Try adjusting your search query.'
                 : 'Members who opt in to the directory will appear here.'}
@@ -357,13 +357,13 @@ const MembersDirectory = () => {
           <Card className="mt-12 p-6 bg-[var(--lavender-500)] border-[var(--neutral-800)]">
             <div className="flex items-start gap-4">
               <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                <User className="h-6 w-6 text-[var(--purple-lavender)]" />
+                <User className="h-6 w-6 text-brand-purple " />
               </div>
               <div>
                 <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Want to appear in the directory?
                 </h3>
-                <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   Update your profile settings to show in the directory and add your photo, bio, and contact information.{' '}
                   <a href="/members/profile" className="text-[var(--orange-light)] hover:underline font-medium">
                     Edit your profile →
@@ -387,7 +387,7 @@ const MembersDirectory = () => {
                 {selectedMember.directory_partner_name && (
                   <DialogDescription className="flex items-center gap-2 text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     <Heart className="h-5 w-5 text-[var(--orange-light)]" />
-                    <span className="text-[var(--purple-lavender)]">Partner: {selectedMember.directory_partner_name}</span>
+                    <span className="text-brand-purple ">Partner: {selectedMember.directory_partner_name}</span>
                   </DialogDescription>
                 )}
               </DialogHeader>
@@ -399,7 +399,7 @@ const MembersDirectory = () => {
                     <h3 className="text-lg font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                       About
                     </h3>
-                    <p className="text-[var(--purple-lavender)] leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <p className="text-brand-purple  leading-relaxed" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       {selectedMember.directory_bio}
                     </p>
                   </div>
@@ -414,13 +414,13 @@ const MembersDirectory = () => {
                     {selectedMember.directory_email && (
                       <div className="flex items-center gap-3">
                         <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
-                          <Mail className="h-5 w-5 text-[var(--purple-lavender)]" />
+                          <Mail className="h-5 w-5 text-brand-purple " />
                         </div>
                         <div>
-                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
+                          <p className="text-xs text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Email</p>
                           <a
                             href={`mailto:${selectedMember.directory_email}`}
-                            className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
+                            className="text-[var(--purple-ink)] hover:text-brand-purple  font-medium"
                             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                           >
                             {selectedMember.directory_email}
@@ -432,13 +432,13 @@ const MembersDirectory = () => {
                     {selectedMember.directory_phone && (
                       <div className="flex items-center gap-3">
                         <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
-                          <Phone className="h-5 w-5 text-[var(--purple-lavender)]" />
+                          <Phone className="h-5 w-5 text-brand-purple " />
                         </div>
                         <div>
-                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
+                          <p className="text-xs text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Phone</p>
                           <a
                             href={`tel:${selectedMember.directory_phone}`}
-                            className="text-[var(--purple-ink)] hover:text-[var(--purple-lavender)] font-medium"
+                            className="text-[var(--purple-ink)] hover:text-brand-purple  font-medium"
                             style={{ fontFamily: "'Nunito Sans', sans-serif" }}
                           >
                             {selectedMember.directory_phone}
@@ -450,10 +450,10 @@ const MembersDirectory = () => {
                     {selectedMember.directory_address && (
                       <div className="flex items-start gap-3">
                         <div className="p-2 rounded-lg bg-[var(--lavender-500)]">
-                          <MapPin className="h-5 w-5 text-[var(--purple-lavender)]" />
+                          <MapPin className="h-5 w-5 text-brand-purple " />
                         </div>
                         <div>
-                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
+                          <p className="text-xs text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Address</p>
                           <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {selectedMember.directory_address}
                           </p>
@@ -467,7 +467,7 @@ const MembersDirectory = () => {
                           <Heart className="h-5 w-5 text-[var(--orange-light)]" />
                         </div>
                         <div>
-                          <p className="text-xs text-[var(--purple-lavender)] mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
+                          <p className="text-xs text-brand-purple  mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Birthday</p>
                           <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                             {formatDate(selectedMember.directory_dob)}
                           </p>
@@ -487,7 +487,7 @@ const MembersDirectory = () => {
                       {selectedMember.volunteer_interests.map((interest, index) => (
                         <Badge
                           key={index}
-                          className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
+                          className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white"
                         >
                           {interest}
                         </Badge>
@@ -565,21 +565,21 @@ const MembersDirectory = () => {
       {/* Pagination */}
       {!loading && filteredMembers.length > 0 && (
         <div className="mt-10 flex flex-col items-center gap-4 pb-12">
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Showing {pageStart + 1}–{Math.min(pageStart + pageSize, filteredMembers.length)} of {filteredMembers.length}
           </p>
           <div className="flex flex-wrap items-center justify-center gap-2">
             <Button
               onClick={() => setCurrentPage(1)}
               disabled={currentPage === 1}
-              className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
+              className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white"
             >
               First Page
             </Button>
             <Button
               onClick={() => setCurrentPage((page) => Math.max(1, page - 1))}
               disabled={currentPage === 1}
-              className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white"
+              className="bg-[var(--neutral-800)] rounded-full text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white"
             >
               Previous
             </Button>
@@ -593,8 +593,8 @@ const MembersDirectory = () => {
                   onClick={() => setCurrentPage(pageNumber)}
                   className={
                     isActive
-                      ? "bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-ink)] rounded-full"
-                      : "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] hover:text-white rounded-full"
+                      ? "bg-brand-purple  text-white hover:bg-[var(--purple-ink)] rounded-full"
+                      : "bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  hover:text-white rounded-full"
                   }
                 >
                   {pageNumber}
@@ -605,14 +605,14 @@ const MembersDirectory = () => {
             <Button
               onClick={() => setCurrentPage((page) => Math.min(totalPages, page + 1))}
               disabled={currentPage === totalPages}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  rounded-full hover:text-white"
             >
               Next
             </Button>
             <Button
               onClick={() => setCurrentPage(totalPages)}
               disabled={currentPage === totalPages}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--purple-lavender)] rounded-full hover:text-white"
+              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple  rounded-full hover:text-white"
             >
               Last Page
             </Button>
diff --git a/src/pages/members/NewsletterArchive.js b/src/pages/members/NewsletterArchive.js
index 4ae47f0..ef2b265 100644
--- a/src/pages/members/NewsletterArchive.js
+++ b/src/pages/members/NewsletterArchive.js
@@ -86,7 +86,7 @@ export default function NewsletterArchive() {
       <div className="min-h-screen bg-background">
         <Navbar />
         <div className="flex items-center justify-center min-h-[60vh]">
-          <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Loading newsletters...
           </p>
         </div>
@@ -104,7 +104,7 @@ export default function NewsletterArchive() {
           <h1 className="text-4xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Newsletter Archive
           </h1>
-          <p className="text-[var(--purple-lavender)] mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-brand-purple  mb-6" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Browse past monthly newsletters and stay informed about LOAF community updates.
           </p>
 
@@ -112,13 +112,13 @@ export default function NewsletterArchive() {
           <div className="flex gap-4 flex-wrap items-center">
             {/* Search */}
             <div className="relative flex-1 min-w-[300px]">
-              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-[var(--purple-lavender)]" />
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-brand-purple " />
               <Input
                 type="text"
                 placeholder="Search newsletters..."
                 value={searchTerm}
                 onChange={(e) => setSearchTerm(e.target.value)}
-                className="pl-10 border-[var(--neutral-800)] focus:border-[var(--purple-lavender)]"
+                className="pl-10 border-[var(--neutral-800)] focus:border-brand-purple "
               />
             </div>
 
@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
                 onClick={clearFilter}
                 variant={selectedYear === null ? "default" : "outline"}
                 size="sm"
-                className={selectedYear === null ? "bg-[var(--purple-lavender)] text-white" : "border-[var(--purple-lavender)] text-[var(--purple-lavender)]"}
+                className={selectedYear === null ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
               >
                 All Years
               </Button>
@@ -138,7 +138,7 @@ export default function NewsletterArchive() {
                   onClick={() => handleYearFilter(year)}
                   variant={selectedYear === year ? "default" : "outline"}
                   size="sm"
-                  className={selectedYear === year ? "bg-[var(--purple-lavender)] text-white" : "border-[var(--purple-lavender)] text-[var(--purple-lavender)]"}
+                  className={selectedYear === year ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
                 >
                   {year}
                 </Button>
@@ -151,7 +151,7 @@ export default function NewsletterArchive() {
         {filteredNewsletters.length === 0 ? (
           <Card className="p-12 text-center bg-background rounded-2xl border border-[var(--neutral-800)]">
             <FileText className="h-16 w-16 text-[var(--neutral-800)] mx-auto mb-4" />
-            <p className="text-[var(--purple-lavender)] text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple  text-lg" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               No newsletters found
             </p>
           </Card>
@@ -168,14 +168,14 @@ export default function NewsletterArchive() {
                     <Card key={newsletter.id} className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg transition-shadow">
                       <div className="flex items-start gap-4">
                         <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg flex-shrink-0">
-                          <FileText className="h-6 w-6 text-[var(--purple-lavender)]" />
+                          <FileText className="h-6 w-6 text-brand-purple " />
                         </div>
                         <div className="flex-1 min-w-0">
                           <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
                             {newsletter.title}
                           </h3>
                           {newsletter.description && (
-                            <p className="text-[var(--purple-lavender)] mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <p className="text-brand-purple  mb-3 line-clamp-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                               {newsletter.description}
                             </p>
                           )}
@@ -183,13 +183,13 @@ export default function NewsletterArchive() {
                             <Badge className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]">
                               {formatDate(newsletter.published_date)}
                             </Badge>
-                            <Badge variant="outline" className="border-[var(--purple-lavender)] text-[var(--purple-lavender)]">
+                            <Badge variant="outline" className="border-brand-purple  text-brand-purple ">
                               {newsletter.document_type === 'google_docs' ? 'Google Docs' : newsletter.document_type.toUpperCase()}
                             </Badge>
                           </div>
                           <Button
                             onClick={() => window.open(newsletter.document_url, '_blank')}
-                            className="w-full bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center justify-center gap-2"
+                            className="w-full bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center justify-center gap-2"
                           >
                             <ExternalLink className="h-4 w-4" />
                             View Newsletter
-- 
2.39.5


From 21a269998dbc3c7afb90fa0c24b46fcd1e6bae44 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 13 Jan 2026 22:01:49 -0600
Subject: [PATCH 06/21] refactor: restructure styles and components for
 improved theming and consistency

---
 src/App.css                            | 32 -----------
 src/components.css                     | 52 -----------------
 src/components/AdminSidebar.js         | 14 ++---
 src/components/ChangePasswordDialog.js |  5 +-
 src/components/ui/badge.jsx            | 31 +++++++----
 src/index.css                          | 30 ++--------
 src/pages/admin/AdminDashboard.js      |  2 +-
 src/pages/admin/AdminMembers.js        | 56 +++++++++----------
 src/styles/App.css                     | 56 +++++++++++++++++++
 src/{ => styles}/base.css              |  1 +
 src/styles/components.css              | 77 ++++++++++++++++++++++++++
 src/{ => styles}/theme.css             | 12 +++-
 src/{ => styles}/utilities.css         |  2 +
 13 files changed, 209 insertions(+), 161 deletions(-)
 delete mode 100644 src/App.css
 delete mode 100644 src/components.css
 create mode 100644 src/styles/App.css
 rename src/{ => styles}/base.css (98%)
 create mode 100644 src/styles/components.css
 rename src/{ => styles}/theme.css (96%)
 rename src/{ => styles}/utilities.css (98%)

diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 69893d5..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,32 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Nunito Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', sans-serif;
-  background-color: #FFFFFF;
-  color: #422268;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: 'Inter', sans-serif;
-  font-weight: 600;
-}
-
-.inter {
-  font-family: 'Inter', sans-serif;
-}
-
-.nunito-sans {
-  font-family: 'Nunito Sans', sans-serif;
-}
-
-.bg-purple-gradient {
-  background: linear-gradient(135deg, rgba(100, 76, 159, 0.2) 0%, rgba(72, 40, 110, 0.2) 100%);
-}
-
-.bg-soft-mesh {
-  background: radial-gradient(ellipse at top right, rgba(221, 216, 235, 0.4) 0%, #FFFFFF 50%, #FFFFFF 100%);
-}
diff --git a/src/components.css b/src/components.css
deleted file mode 100644
index 93be360..0000000
--- a/src/components.css
+++ /dev/null
@@ -1,52 +0,0 @@
-@layer components {
-  .btn {
-    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
-      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
-      disabled:pointer-events-none disabled:opacity-50
-      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
-  }
-
-  .btn-primary {
-    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90;
-  }
-
-  .btn-secondary {
-    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80;
-  }
-
-  .btn-ghost {
-    @apply hover:bg-accent hover:text-accent-foreground;
-  }
-
-  .btn-outline {
-    @apply border border-input shadow-sm hover:bg-accent hover:text-accent-foreground;
-  }
-
-  .btn-accent {
-    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90;
-  }
-
-  .btn-destructive {
-    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90;
-  }
-
-  .btn-link {
-    @apply text-primary underline-offset-4 hover:underline;
-  }
-
-  .btn-sm {
-    @apply h-8 rounded-md px-3 text-xs;
-  }
-
-  .btn-md {
-    @apply h-9 px-4 py-2;
-  }
-
-  .btn-lg {
-    @apply h-10 rounded-md px-8;
-  }
-
-  .btn-icon {
-    @apply h-9 w-9;
-  }
-}
diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index 34a9861..6b58359 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -283,7 +283,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             />
             {isOpen && (
               <div className="flex-1 min-w-0">
-                <h2 className="text-xl font-semibold text-primary" style={{ fontFamily: "'Inter', sans-serif" }}>
+                <h2 className="text-xl font-semibold text-primary dark:text-brand-light-lavender " style={{ fontFamily: "'Inter', sans-serif" }}>
                   Admin
                 </h2>
                 <p className="text-xs text-muted-foreground group-hover:text-accent transition-colors" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -384,7 +384,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                   {user.first_name?.[0]}{user.last_name?.[0]}
                 </div>
                 <div className="flex-1 min-w-0">
-                  <p className="text-sm font-medium text-primary truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  <p className="text-sm font-medium text-primary dark:text-brand-light-lavender  truncate" style={{ fontFamily: "'Inter', sans-serif" }}>
                     {user.first_name} {user.last_name}
                   </p>
                   <p className="text-xs text-muted-foreground capitalize truncate" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -392,7 +392,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
                   </p>
                 </div>
               </div>
-              <Link to='/profile'><Settings size={16} />
+              <Link className='dark:text-brand-lavender ' to='/profile'><Settings size={16} />
               </Link>
             </div>
           )}
@@ -406,16 +406,16 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
               aria-label={isDark ? 'Switch to light mode' : 'Switch to dark mode'}
               className={`
                 flex items-center gap-3 px-4 py-3 rounded-lg w-full
-                text-primary hover:bg-muted/20 transition-colors
+                text-primary dark:text-brand-lavender  hover:bg-muted/20 transition-colors
                 ${!isOpen && 'justify-center'}
               `}
             >
               {isDark ? (
-                <Sun className="h-5 w-5 flex-shrink-0" />
+                <Sun className="h-5 w-5 flex-shrink-0 " />
               ) : (
                 <Moon className="h-5 w-5 flex-shrink-0" />
               )}
-              {isOpen && <span>{isDark ? 'Light mode' : 'Dark mode'}</span>}
+              {isOpen && <span >{isDark ? 'Light mode' : 'Dark mode'}</span>}
             </button>
             {!isOpen && (
               <div className="absolute left-full ml-2 top-1/2 -translate-y-1/2 px-3 py-2 bg-primary foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
@@ -429,7 +429,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             {isOpen ? (
               <div className="px-4 py-3 bg-[var(--lavender-500)] rounded-lg">
                 <div className="flex items-center justify-between mb-2">
-                  <span className="text-sm font-medium text-primary">Storage Usage</span>
+                  <span className="text-sm font-medium text-primary dark:text-brand-light-lavender ">Storage Usage</span>
                   <span className="text-xs text-muted-foreground">{storagePercentage}%</span>
                 </div>
                 <div className="w-full bg-[var(--neutral-800)] rounded-full h-2">
diff --git a/src/components/ChangePasswordDialog.js b/src/components/ChangePasswordDialog.js
index a494af0..916bdf1 100644
--- a/src/components/ChangePasswordDialog.js
+++ b/src/components/ChangePasswordDialog.js
@@ -127,16 +127,15 @@ const ChangePasswordDialog = ({ open, onOpenChange }) => {
           <DialogFooter className="mt-6">
             <Button
               type="button"
-              variant="outline"
               onClick={() => onOpenChange(false)}
-              className="rounded-full px-6"
+              className="btn-outline mr-33"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 disabled:opacity-50"
+              className=" btn-primary"
             >
               {loading ? 'Changing...' : 'Change Password'}
             </Button>
diff --git a/src/components/ui/badge.jsx b/src/components/ui/badge.jsx
index a687eba..ede76de 100644
--- a/src/components/ui/badge.jsx
+++ b/src/components/ui/badge.jsx
@@ -1,7 +1,7 @@
-import * as React from "react"
+import * as React from "react";
 import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
@@ -15,20 +15,31 @@ const badgeVariants = cva(
         destructive:
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
+        green:
+          "border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]",
+        orange:
+          "border-transparent bg-orange-500 text-white hover:bg-orange-500/80",
+        orange2:
+          "border-transparent bg-orange-100 text-orange-700 hover:bg-orange-100/80",
+        pink: "border-transparent bg-[var(--pink-500)] text-white hover:bg-[var(--pink-500)]/80",
+        red: "border-transparent bg-red-100 text-red-700 hover:bg-red-100/80",
+        red2: "border-transparent bg-red-500 text-white hover:bg-red-500/80",
+        gray: "border-transparent bg-gray-200 text-gray-700 hover:bg-gray-200/80",
+        gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
+        gray3:
+          "border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-)
+);
 
-function Badge({
-  className,
-  variant,
-  ...props
-}) {
-  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+function Badge({ className, variant, ...props }) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/src/index.css b/src/index.css
index d5830f2..4e8de36 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,28 +1,8 @@
-@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
-
-@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
-
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
-    monospace;
-}
-
-
-
-
+@import "./styles/App.css";
+@import "./styles/theme.css";
+@import "./styles/components.css";
+@import "./styles/base.css";
+@import "./styles/utilities.css";
 /* 
 =========================
   End of File
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index 8431607..c8c73ce 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -67,7 +67,7 @@ const AdminDashboard = () => {
         </div>
         <Link to={'/'}>
           <Button
-            className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender"
           >
             <Globe />
             View Public Site
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 0514e2b..0ea371f 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -201,20 +201,20 @@ const AdminMembers = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      pending_email: { label: 'Pending Email', className: 'bg-orange-100 text-orange-700' },
-      pending_validation: { label: 'Pending Validation', className: 'bg-gray-200 text-gray-700' },
-      pre_validated: { label: 'Pre-Validated', className: 'bg-[var(--green-light)] text-white' },
-      payment_pending: { label: 'Payment Pending', className: 'bg-orange-500 text-white' },
-      active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
-      inactive: { label: 'Inactive', className: 'bg-gray-400 text-white' },
-      canceled: { label: 'Canceled', className: 'bg-red-100 text-red-700' },
-      expired: { label: 'Expired', className: 'bg-red-500 text-white' },
-      abandoned: { label: 'Abandoned', className: 'bg-gray-300 text-gray-600' }
+      pending_email: { label: 'Pending Email', variant: 'orange2' },
+      pending_validation: { label: 'Pending Validation', variant: 'gray' },
+      pre_validated: { label: 'Pre-Validated', variant: 'green' },
+      payment_pending: { label: 'Payment Pending', variant: 'orange' },
+      active: { label: 'Active', variant: 'green' },
+      inactive: { label: 'Inactive', variant: 'gray2' },
+      canceled: { label: 'Canceled', variant: 'red' },
+      expired: { label: 'Expired', variant: 'red2' },
+      abandoned: { label: 'Abandoned', variant: 'gray3' }
     };
 
     const statusConfig = config[status] || config.inactive;
     return (
-      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
         {statusConfig.label}
       </Badge>
     );
@@ -248,7 +248,7 @@ const AdminMembers = () => {
             <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
               Members Management
             </h1>
-            <p className="text-lg text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-lg text-brand-purple dark:text-brand-lavender" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Manage paying members and their subscriptions.
             </p>
           </div>
@@ -257,7 +257,7 @@ const AdminMembers = () => {
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button
-                    className="bg-brand-purple hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
+                    className="btn-util-purple "
                     disabled={exporting}
                   >
                     {exporting ? (
@@ -288,7 +288,7 @@ const AdminMembers = () => {
             {hasPermission('users.import') && (
               <Button
                 onClick={() => setImportDialogOpen(true)}
-                className="bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-xl h-12 px-6"
+                className="btn-util-green "
               >
                 <Upload className="h-5 w-5 mr-2" />
                 Import
@@ -298,7 +298,7 @@ const AdminMembers = () => {
             {hasPermission('users.invite') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl h-12 px-6"
+                className="btn-util-purple "
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Member
@@ -308,7 +308,7 @@ const AdminMembers = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[var(--green-light)] hover:bg-[var(--green-fern)] text-white rounded-xl h-12 px-6"
+                className="btn-util-green "
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Member
@@ -321,26 +321,26 @@ const AdminMembers = () => {
       {/* Stats */}
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
+          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'active').length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
+          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'payment_pending').length}
           </p>
         </Card>
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple  mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
+          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {users.filter(u => u.status === 'inactive').length}
           </p>
         </Card>
@@ -381,7 +381,7 @@ const AdminMembers = () => {
       {/* Members List */}
       {loading ? (
         <div className="text-center py-20">
-          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
+          <p className="text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading members...</p>
         </div>
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
@@ -401,12 +401,12 @@ const AdminMembers = () => {
                   {/* Info */}
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-3 mb-2 flex-wrap">
-                      <h3 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                      <h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
                         {user.first_name} {user.last_name}
                       </h3>
                       {getStatusBadge(user.status)}
                     </div>
-                    <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       <p>Email: {user.email}</p>
                       <p>Phone: {user.phone}</p>
                       <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
@@ -478,7 +478,7 @@ const AdminMembers = () => {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
+                        className="border-brand-purple  text-brand-purple dark:bg-background dark:border-brand-lavender dark:text-brand-light-lavender hover:bg-brand-light-lavender  "
                       >
                         <Eye className="h-4 w-4 mr-1" />
                         View Profile
@@ -500,7 +500,7 @@ const AdminMembers = () => {
 
                   {/* Status Management */}
                   <div className="flex items-center gap-2">
-                    <span className="text-sm text-brand-purple  whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                    <span className="text-sm text-brand-purple dark:text-brand-lavender  whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       Change Status:
                     </span>
                     <Select
diff --git a/src/styles/App.css b/src/styles/App.css
new file mode 100644
index 0000000..c44d773
--- /dev/null
+++ b/src/styles/App.css
@@ -0,0 +1,56 @@
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
+
+@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+    monospace;
+}
+
+body {
+  font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Roboto", "Oxygen", sans-serif;
+  background-color: #ffffff;
+  color: #422268;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Poppins", sans-serif;
+  font-weight: 600;
+}
+
+.inter {
+  font-family: "Poppins", sans-serif;
+}
+
+.nunito-sans {
+  font-family: "Nunito Sans", sans-serif;
+}
+
+.bg-purple-gradient {
+  background: linear-gradient(
+    135deg,
+    rgba(100, 76, 159, 0.2) 0%,
+    rgba(72, 40, 110, 0.2) 100%
+  );
+}
+
+.bg-soft-mesh {
+  background: radial-gradient(
+    ellipse at top right,
+    rgba(221, 216, 235, 0.4) 0%,
+    #ffffff 50%,
+    #ffffff 100%
+  );
+}
diff --git a/src/base.css b/src/styles/base.css
similarity index 98%
rename from src/base.css
rename to src/styles/base.css
index 30953ed..d91253d 100644
--- a/src/base.css
+++ b/src/styles/base.css
@@ -1,3 +1,4 @@
+@tailwind base;
 
 @layer base {
   * {
diff --git a/src/styles/components.css b/src/styles/components.css
new file mode 100644
index 0000000..c10131b
--- /dev/null
+++ b/src/styles/components.css
@@ -0,0 +1,77 @@
+@tailwind components;
+
+@layer components {
+  .btn {
+    @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors
+      focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring
+      disabled:pointer-events-none disabled:opacity-50
+      [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0;
+  }
+
+  .btn-primary {
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
+  }
+
+  .btn-secondary {
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
+  }
+
+  .btn-ghost {
+    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
+  }
+
+  .btn-outline {
+    @apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6;
+  }
+
+  .btn-accent {
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6;
+  }
+
+  .btn-destructive {
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6;
+  }
+
+  .btn-link {
+    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
+  }
+
+  .btn-sm {
+    @apply h-8 rounded-full px-3 text-xs disabled:opacity-50 px-6;
+  }
+
+  .btn-md {
+    @apply h-9 px-4 py-2 rounded-full disabled:opacity-50 px-6;
+  }
+
+  .btn-lg {
+    @apply h-10 rounded-full px-8 disabled:opacity-50;
+  }
+
+  .btn-icon {
+    @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
+  }
+  .btn-util-green {
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
+  }
+
+  .btn-util-purple {
+    @apply bg-brand-purple  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
+  }
+
+  .btn-light-orange {
+    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
+  }
+  .btn-pink {
+    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
+  }
+.btn-lavender {
+    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
+  }
+  .badge {
+    @apply px-3 py-1 rounded-full text-sm font-medium ;
+  }
+  .badge-green {
+    @apply bg-[var(--green-light)] text-white;
+  }
+}
diff --git a/src/theme.css b/src/styles/theme.css
similarity index 96%
rename from src/theme.css
rename to src/styles/theme.css
index 8622685..2427b1e 100644
--- a/src/theme.css
+++ b/src/styles/theme.css
@@ -1,3 +1,5 @@
+@tailwind base;
+
 @layer base {
   :root {
     --background: 0 0% 100%;
@@ -53,6 +55,7 @@
     --blue-facebook: #1877f2;
     --blue-twitter: #1da1f2;
     --purple-ink: #422268;
+    --purple-ink-2: #422268;
     --purple-deep: #48286e;
     --purple-muted: #533a82;
     --purple-plum: #553d8a;
@@ -74,6 +77,7 @@
     --green-muted: #66927e;
     --green-soft: #6a9680;
     --green-eucalyptus: #6a9a83;
+    --green-forest: #5e8374;
     --green-fern: #6da085;
     --green-mint: #6fa087;
     --green-pastel: #6fa188;
@@ -154,6 +158,7 @@
     /* -------- Purples (Primary UI) -------- */
     --purple-ink: #422268; /* deepest background */
     --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */
+    --purple-ink-2: #422268;
     --purple-deep: #24153a; /* app shell */
     --purple-muted: #34204f; /* panels */
     --purple-plum: #3f2760;
@@ -175,10 +180,11 @@
     --green-muted: #5fb39a;
     --green-soft: #6fc4aa;
     --green-eucalyptus: #7dd3b0;
-    --green-fern: #8be0bc;
-    --green-mint: #66a38b;
+    --green-fern: #315446;
+    --green-mint: #8be0bc;
+    --green-forest: #5e8374;
     --green-pastel: #a6ecd1;
-    --green-light: #5e8374;
+    --green-light: #66a38b;
     --green-bg: #0f2a1e;
 
     /* -------- Oranges (Warnings / Energy) -------- */
diff --git a/src/utilities.css b/src/styles/utilities.css
similarity index 98%
rename from src/utilities.css
rename to src/styles/utilities.css
index e8925d0..baa0293 100644
--- a/src/utilities.css
+++ b/src/styles/utilities.css
@@ -1,3 +1,5 @@
+@tailwind utilities;
+
 @layer utilities {
   @supports selector(::-webkit-scrollbar) {
     .scrollbar-dashboard::-webkit-scrollbar {
-- 
2.39.5


From 4cdccc03235408a1d93199cde2b3006c550510ba Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 13 Jan 2026 23:51:13 -0600
Subject: [PATCH 07/21] refactor: update button and badge styles for improved
 theming and consistency

---
 src/components/ui/badge.jsx         |  1 +
 src/components/ui/button.jsx        |  1 +
 src/components/ui/tabs.jsx          |  2 +-
 src/pages/Login.js                  |  6 ++--
 src/pages/admin/AdminBylaws.js      | 12 ++++----
 src/pages/admin/AdminDashboard.js   | 26 ++++++++--------
 src/pages/admin/AdminEvents.js      |  2 +-
 src/pages/admin/AdminFinancials.js  |  4 +--
 src/pages/admin/AdminGallery.js     |  6 ++--
 src/pages/admin/AdminNewsletters.js |  2 +-
 src/pages/admin/AdminPlans.js       |  2 +-
 src/pages/admin/AdminRoles.js       |  2 +-
 src/pages/admin/AdminStaff.js       | 24 +++++++--------
 src/pages/admin/AdminValidations.js |  2 +-
 src/styles/components.css           | 46 +++++++++++++++++++----------
 src/styles/theme.css                | 14 +++++++++
 16 files changed, 92 insertions(+), 60 deletions(-)

diff --git a/src/components/ui/badge.jsx b/src/components/ui/badge.jsx
index ede76de..3da4bcf 100644
--- a/src/components/ui/badge.jsx
+++ b/src/components/ui/badge.jsx
@@ -28,6 +28,7 @@ const badgeVariants = cva(
         gray2: "border-transparent bg-gray-400 text-white hover:bg-gray-400/80",
         gray3:
           "border-transparent bg-gray-300 text-gray-600 hover:bg-gray-300/80",
+        purple: "bg-light-lavender",
       },
     },
     defaultVariants: {
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
index a59bdf6..ced3c5f 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -14,6 +14,7 @@ const buttonVariants = cva("btn", {
       accent: "btn-accent",
       destructive: "btn-destructive",
       link: "btn-link",
+      
     },
     size: {
       default: "btn-md",
diff --git a/src/components/ui/tabs.jsx b/src/components/ui/tabs.jsx
index 5b36bcf..c646f8e 100644
--- a/src/components/ui/tabs.jsx
+++ b/src/components/ui/tabs.jsx
@@ -21,7 +21,7 @@ const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple  rounded-2xl px-3 py-1 text-brand-purple  text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap hover:bg-[var(--lavender-300)] border-2 border-brand-purple  rounded-2xl px-3 py-1 text-brand-purple  text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-foreground data-[state=active]:text-background data-[state=active]:border-foreground data-[state=active]:shadow dark:data-[state=active]:bg-brand-light-lavender dark:data-[state=active]:text-background dark:border-brand-light-lavender dark:text-brand-light-lavender",
       className
     )}
     {...props}
diff --git a/src/pages/Login.js b/src/pages/Login.js
index 8edcd89..5bab4b7 100644
--- a/src/pages/Login.js
+++ b/src/pages/Login.js
@@ -87,8 +87,8 @@ const Login = () => {
                 value={formData.email}
                 onChange={handleInputChange}
                 placeholder="your.email@example.com"
-                className="h-14 rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
-                data-testid="login-email-input"
+                className="h-14 rounded-xl border-2  focus:border-brand-purple "
+                data-testid="login-email-input "
               />
             </div>
 
@@ -114,7 +114,7 @@ const Login = () => {
             <Button
               type="submit"
               disabled={loading}
-              className="w-full bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50"
+              className="w-full py-6 text-lg font-medium shadow-lg hover:scale-105 disabled:opacity-50 btn-lavender"
               data-testid="login-submit-button"
             >
               {loading ? 'Logging in...' : 'Login'}
diff --git a/src/pages/admin/AdminBylaws.js b/src/pages/admin/AdminBylaws.js
index 3151cc6..5fdd4df 100644
--- a/src/pages/admin/AdminBylaws.js
+++ b/src/pages/admin/AdminBylaws.js
@@ -189,7 +189,7 @@ const AdminBylaws = () => {
         {hasPermission('bylaws.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Version
@@ -202,8 +202,8 @@ const AdminBylaws = () => {
         <Card className="p-6 border-2 border-brand-purple ">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center gap-3">
-              <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-3 rounded-xl">
-                <Scale className="h-6 w-6 text-white" />
+              <div className="bg-light-lavender p-3 rounded-xl">
+                <Scale className="h-6 w-6 " />
               </div>
               <div>
                 <h3 className="text-xl font-semibold text-[var(--purple-ink)]">
@@ -315,7 +315,7 @@ const AdminBylaws = () => {
                         variant="outline"
                         size="sm"
                         onClick={() => handleDelete(bylawsDoc)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className="btn-outline-destructive"
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
@@ -482,9 +482,9 @@ const AdminBylaws = () => {
               Cancel
             </Button>
             <Button
-              variant="destructive"
+              variant="outline"
               onClick={confirmDelete}
-              className="bg-red-500 hover:bg-red-600"
+              className="btn-outline-destructive"
             >
               Delete
             </Button>
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index c8c73ce..dffb129 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -61,7 +61,7 @@ const AdminDashboard = () => {
           <h1 className="text-4xl md:text-5xl font-semibold text-[var(--purple-ink)] mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
             Admin Dashboard
           </h1>
-          <p className="text-lg text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+          <p className="text-lg text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
             Manage users, events, and membership applications.
           </p>
         </div>
@@ -80,13 +80,13 @@ const AdminDashboard = () => {
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
           <div className="flex items-center justify-between mb-4">
             <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-              <Users className="h-6 w-6 text-[var(--purple-lavender)]" />
+              <Users className="h-6 w-6 text-brand-purple" />
             </div>
           </div>
           <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.totalMembers}
           </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
+          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
         </Card>
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
@@ -98,7 +98,7 @@ const AdminDashboard = () => {
           <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.pendingValidations}
           </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
+          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
         </Card>
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
@@ -110,7 +110,7 @@ const AdminDashboard = () => {
           <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
             {loading ? '-' : stats.activeMembers}
           </p>
-          <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
+          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
         </Card>
       </div>
 
@@ -118,15 +118,15 @@ const AdminDashboard = () => {
       <div className="grid md:grid-cols-2 gap-8">
         <Link to="/admin/members">
           <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-lg hover:-translate-y-1 transition-all cursor-pointer" data-testid="quick-action-users">
-            <Users className="h-12 w-12 text-[var(--purple-lavender)] mb-4" />
+            <Users className="h-12 w-12 text-brand-purple mb-4" />
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Manage Members
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               View and manage paying members and their subscription status.
             </p>
             <Button
-              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+              className="btn-lavender mt-4"
               data-testid="manage-users-button"
             >
               Go to Members
@@ -140,11 +140,11 @@ const AdminDashboard = () => {
             <h3 className="text-xl font-semibold text-[var(--purple-ink)] mb-2" style={{ fontFamily: "'Inter', sans-serif" }}>
               Validation Queue
             </h3>
-            <p className="text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
               Review and validate pending membership applications.
             </p>
             <Button
-              className="mt-4 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+              className="mt-4 btn-lavender"
               data-testid="manage-validations-button"
             >
               View Validations
@@ -165,7 +165,7 @@ const AdminDashboard = () => {
                 <h3 className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Members Needing Personal Outreach
                 </h3>
-                <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                   These members have received multiple reminder emails. Consider calling them directly.
                 </p>
               </div>
@@ -185,7 +185,7 @@ const AdminDashboard = () => {
                             {user.totalReminders} reminder{user.totalReminders !== 1 ? 's' : ''}
                           </Badge>
                         </div>
-                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone || 'N/A'}</p>
                           <p className="capitalize">Status: {user.status.replace('_', ' ')}</p>
@@ -225,7 +225,7 @@ const AdminDashboard = () => {
             </div>
 
             <div className="mt-6 p-4 bg-[var(--neutral-800)]/20 rounded-lg border border-[var(--neutral-800)]">
-              <p className="text-sm text-[var(--purple-lavender)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+              <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                 <strong>💡 Tip for helping older members:</strong> Many of our members are older ladies who may struggle with email.
                 A friendly phone call can help them complete the registration process and feel more welcomed to the community.
               </p>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index 5f6801c..a7bac7b 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -150,7 +150,7 @@ const AdminEvents = () => {
                   resetForm();
                   setEditingEvent(null);
                 }}
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender "
                 data-testid="create-event-button"
               >
                 <Plus className="mr-2 h-5 w-5" />
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
index ff4b3b4..d854dc4 100644
--- a/src/pages/admin/AdminFinancials.js
+++ b/src/pages/admin/AdminFinancials.js
@@ -167,7 +167,7 @@ const AdminFinancials = () => {
         {hasPermission('financials.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Report
@@ -192,7 +192,7 @@ const AdminFinancials = () => {
           {reports.map(report => (
             <Card key={report.id} className="p-6">
               <div className="flex items-center gap-6">
-                <div className="bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] p-4 rounded-xl text-white min-w-[100px] text-center">
+                <div className="bg-light-lavender p-4 rounded-xl min-w-[100px] text-center">
                   <DollarSign className="h-6 w-6 mx-auto mb-1" />
                   <div className="text-2xl font-bold">{report.year}</div>
                 </div>
diff --git a/src/pages/admin/AdminGallery.js b/src/pages/admin/AdminGallery.js
index 93110a6..2b510b8 100644
--- a/src/pages/admin/AdminGallery.js
+++ b/src/pages/admin/AdminGallery.js
@@ -196,7 +196,7 @@ const AdminGallery = () => {
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl text-sm"
+                      className="btn-lavender  text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
@@ -221,7 +221,7 @@ const AdminGallery = () => {
               <Button
                 onClick={() => fileInputRef.current?.click()}
                 disabled={uploading}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] text-white rounded-xl"
+                className="btn-lavender "
                 style={{ fontFamily: "'Inter', sans-serif" }}
               >
                 {uploading ? (
@@ -251,7 +251,7 @@ const AdminGallery = () => {
             <h2 className="text-xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
               Gallery Images
             </h2>
-            <Badge className="bg-brand-purple  text-white px-3 py-1">
+            <Badge variant="purple" className=" px-3 py-1">
               {galleryImages.length} {galleryImages.length === 1 ? 'image' : 'images'}
             </Badge>
           </div>
diff --git a/src/pages/admin/AdminNewsletters.js b/src/pages/admin/AdminNewsletters.js
index c330b46..5f3a4e3 100644
--- a/src/pages/admin/AdminNewsletters.js
+++ b/src/pages/admin/AdminNewsletters.js
@@ -195,7 +195,7 @@ const AdminNewsletters = () => {
         {hasPermission('newsletters.create') && (
           <Button
             onClick={handleCreate}
-            className="bg-brand-purple  text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2"
+            className="btn-light-lavender flex items-center gap-2"
           >
             <Plus className="h-4 w-4" />
             Add Newsletter
diff --git a/src/pages/admin/AdminPlans.js b/src/pages/admin/AdminPlans.js
index 9231efc..8e77961 100644
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -141,7 +141,7 @@ const AdminPlans = () => {
           {hasPermission('subscriptions.plans') && (
             <Button
               onClick={handleCreatePlan}
-              className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+              className="btn-lavender "
             >
               <Plus className="h-4 w-4 mr-2" />
               Create Plan
diff --git a/src/pages/admin/AdminRoles.js b/src/pages/admin/AdminRoles.js
index dbff079..658f654 100644
--- a/src/pages/admin/AdminRoles.js
+++ b/src/pages/admin/AdminRoles.js
@@ -193,7 +193,7 @@ const AdminRoles = () => {
             Create and manage custom roles with specific permissions
           </p>
         </div>
-        <Button onClick={() => setShowCreateModal(true)}>
+        <Button className="btn-lavender " onClick={() => setShowCreateModal(true)}>
           <Plus className="w-4 h-4 mr-2" />
           Create Role
         </Button>
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index 1a4645b..f9a2bed 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -99,16 +99,16 @@ const AdminStaff = () => {
 
   const getRoleBadge = (role) => {
     const config = {
-      superadmin: { label: 'Superadmin', className: 'bg-brand-purple  text-white' },
-      admin: { label: 'Admin', className: 'bg-[var(--green-light)] text-white' },
-      moderator: { label: 'Moderator', className: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
-      staff: { label: 'Staff', className: 'bg-gray-200 text-gray-700' },
-      media: { label: 'Media', className: 'bg-gray-400 text-white' }
+      superadmin: { label: 'Superadmin', variant: 'purple' },
+      admin: { label: 'Admin', variant: 'green' },
+      moderator: { label: 'Moderator', variant: 'bg-[var(--neutral-800)] text-[var(--purple-ink)]' },
+      staff: { label: 'Staff', variant: 'gray' },
+      media: { label: 'Media', variant: 'gray2' }
     };
 
     const roleConfig = config[role] || { label: role, className: 'bg-gray-500 text-white' };
     return (
-      <Badge className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <Badge variant={roleConfig.variant} className={`${roleConfig.className} px-3 py-1 rounded-full text-sm`}>
         <Shield className="h-3 w-3 mr-1 inline" />
         {roleConfig.label}
       </Badge>
@@ -117,13 +117,13 @@ const AdminStaff = () => {
 
   const getStatusBadge = (status) => {
     const config = {
-      active: { label: 'Active', className: 'bg-[var(--green-light)] text-white' },
+      active: { label: 'Active', variant: 'green' },
       inactive: { label: 'Inactive', className: 'bg-gray-400 text-white ' }
     };
 
     const statusConfig = config[status] || config.inactive;
     return (
-      <Badge className={`${statusConfig.className} px-3 py-1 rounded-full text-sm`}>
+      <Badge variant={statusConfig.variant} className={` px-3 py-1 rounded-full text-sm`}>
         {statusConfig.label}
       </Badge>
     );
@@ -145,7 +145,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setInviteDialogOpen(true)}
-                className="bg-brand-purple  hover:bg-[var(--purple-ink)] dark:hover:bg-brand-dark-lavender text-white rounded-xl h-12 px-6"
+                className="btn-util-purple  h-12 px-6"
               >
                 <Mail className="h-5 w-5 mr-2" />
                 Invite Staff
@@ -154,7 +154,7 @@ const AdminStaff = () => {
             {hasPermission('users.create') && (
               <Button
                 onClick={() => setCreateDialogOpen(true)}
-                className="bg-[var(--green-light)] hover:bg-[var(--green-sage)] text-white rounded-xl h-12 px-6"
+                className="btn-util-green h-12 px-6"
               >
                 <UserPlus className="h-5 w-5 mr-2" />
                 Create Staff
@@ -195,11 +195,11 @@ const AdminStaff = () => {
       {/* Tabs */}
       <Tabs value={activeTab} onValueChange={setActiveTab} className="mb-8">
         <TabsList className="grid w-full grid-cols-2 mb-8">
-          <TabsTrigger value="staff-list" className="text-lg py-3">
+          <TabsTrigger value="staff-list" className="text-lg  py-3">
             <UserCog className="h-5 w-5 mr-2" />
             Staff Members
           </TabsTrigger>
-          <TabsTrigger value="pending-invitations" className="text-lg py-3">
+          <TabsTrigger value="pending-invitations" className="text-lg py-3  ">
             <Mail className="h-5 w-5 mr-2" />
             Pending Invitations
           </TabsTrigger>
diff --git a/src/pages/admin/AdminValidations.js b/src/pages/admin/AdminValidations.js
index 1ece097..84d873c 100644
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -450,7 +450,7 @@ const AdminValidations = () => {
                               <Button
                                 onClick={() => handleActivatePayment(user)}
                                 size="sm"
-                                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+                                className="btn-light-lavender"
                               >
                                 <CheckCircle className="h-4 w-4 mr-1" />
                                 Activate Payment
diff --git a/src/styles/components.css b/src/styles/components.css
index c10131b..a935eec 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -9,31 +9,35 @@
   }
 
   .btn-primary {
-    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6;
+    @apply bg-primary text-primary-foreground shadow hover:bg-primary/90 rounded-full px-6 disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-secondary {
-    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6;
+    @apply bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80 rounded-full disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-ghost {
-    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6;
+    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-outline {
-    @apply border border-primary border-2 bg-white text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6;
+    @apply border border-primary border-2 text-primary shadow-sm hover:bg-primary/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-accent {
-    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6;
+    @apply bg-accent text-accent-foreground shadow hover:bg-accent/90 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-destructive {
-    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6;
+    @apply bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90 rounded-full disabled:opacity-50  px-6 transition-transform;
+  }
+
+  .btn-outline-destructive {
+    @apply border border-destructive border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-link {
-    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6;
+    @apply text-primary underline-offset-4 hover:underline disabled:opacity-50 px-6 transition-transform;
   }
 
   .btn-sm {
@@ -52,26 +56,38 @@
     @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
   }
   .btn-util-green {
-    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white rounded-xl h-12 px-6;
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 transition-transform;
   }
 
   .btn-util-purple {
-    @apply bg-brand-purple  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-[var(--purple-lavender)] transition-transform hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
 
   .btn-light-orange {
-    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-brand-light-orange  hover:bg-brand-orange text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
   .btn-pink {
-    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6;
+    @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
-.btn-lavender {
-    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender
+  .btn-lavender {
+    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
   }
+  .btn-light-lavender {
+    @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
+  }
+
+  /* Badges */
+ 
   .badge {
-    @apply px-3 py-1 rounded-full text-sm font-medium ;
+    @apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
   }
   .badge-green {
-    @apply bg-[var(--green-light)] text-white;
+    @apply bg-[var(--green-light)] text-white transition-transform;
   }
+ /* Backgrounds */
+    .bg-light-lavender {
+    @apply bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
+  }
+
+
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 2427b1e..4e53c32 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -118,6 +118,12 @@
     --neutral-900: #ffffff;
   }
   .dark {
+    /* 
+    ==========================
+      Dark Theme Colors
+    ==========================
+    */
+
     --background: 246 28% 8%;
     --foreground: 255 30% 92%;
 
@@ -155,6 +161,14 @@
 
     --radius: 0.5rem;
 
+    /* 
+    =========================
+      Brand Colors
+    =========================
+    */
+
+    --brand-purple: 262 46% 80%;
+
     /* -------- Purples (Primary UI) -------- */
     --purple-ink: #422268; /* deepest background */
     --purple-ink: hsl(var(--brand-light-lavender)); /* deepest background */
-- 
2.39.5


From 4ccaca192d8080df3ff2e33e48a93de2621762a8 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 14 Jan 2026 11:07:43 -0600
Subject: [PATCH 08/21] refactor: update button and badge styles for improved
 theming and consistency

---
 src/components/ui/badge.jsx           |  2 +-
 src/components/ui/button.jsx          | 38 +++++++++++-----------
 src/pages/admin/AdminBylaws.js        |  8 ++---
 src/pages/admin/AdminDashboard.js     | 46 ++++++++++++++++-----------
 src/pages/admin/AdminEvents.js        |  9 +++---
 src/pages/admin/AdminFinancials.js    |  4 +--
 src/pages/admin/AdminMembers.js       |  2 +-
 src/pages/admin/AdminNewsletters.js   |  4 +--
 src/pages/admin/AdminPlans.js         |  4 +--
 src/pages/admin/AdminStaff.js         |  6 ++--
 src/pages/admin/AdminSubscriptions.js | 10 +++---
 src/pages/admin/AdminValidations.js   |  6 ++--
 src/styles/components.css             | 11 ++++---
 src/styles/theme.css                  |  3 +-
 14 files changed, 85 insertions(+), 68 deletions(-)

diff --git a/src/components/ui/badge.jsx b/src/components/ui/badge.jsx
index 3da4bcf..6907614 100644
--- a/src/components/ui/badge.jsx
+++ b/src/components/ui/badge.jsx
@@ -16,7 +16,7 @@ const badgeVariants = cva(
           "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
         outline: "text-foreground",
         green:
-          "border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]",
+          "border-transparent bg-[var(--green-forest)] text-white hover:bg-[var(--green-fern)]",
         orange:
           "border-transparent bg-orange-500 text-white hover:bg-orange-500/80",
         orange2:
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.jsx
index ced3c5f..a6252a7 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.jsx
@@ -1,8 +1,8 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva("btn", {
   variants: {
@@ -11,10 +11,10 @@ const buttonVariants = cva("btn", {
       secondary: "btn-secondary",
       ghost: "btn-ghost",
       outline: "btn-outline",
+      "outline-destructive": "btn-outline-destructive",
       accent: "btn-accent",
       destructive: "btn-destructive",
       link: "btn-link",
-      
     },
     size: {
       default: "btn-md",
@@ -27,18 +27,20 @@ const buttonVariants = cva("btn", {
     variant: "default",
     size: "default",
   },
-})
+});
 
-const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "button"
-  return (
-    <Comp
-      className={cn(buttonVariants({ variant, size }), className)}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Button.displayName = "Button"
+const Button = React.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/pages/admin/AdminBylaws.js b/src/pages/admin/AdminBylaws.js
index 5fdd4df..cee3c44 100644
--- a/src/pages/admin/AdminBylaws.js
+++ b/src/pages/admin/AdminBylaws.js
@@ -210,7 +210,7 @@ const AdminBylaws = () => {
                   {currentBylaws.title}
                 </h3>
                 <div className="flex items-center gap-2 mt-1">
-                  <Badge className="bg-[var(--green-light)] text-white">
+                  <Badge variant={'green'} className="">
                     <Check className="h-3 w-3 mr-1" />
                     Current Version
                   </Badge>
@@ -222,7 +222,7 @@ const AdminBylaws = () => {
             </div>
             <div className="flex gap-2">
               <Button
-                variant="outline"
+                variant="ghost"
                 size="sm"
                 onClick={() => window.open(currentBylaws.document_url, '_blank')}
                 className="border-brand-purple  text-brand-purple "
@@ -242,10 +242,10 @@ const AdminBylaws = () => {
               )}
               {hasPermission('bylaws.delete') && (
                 <Button
-                  variant="outline"
+                  variant="outline-destructive"
                   size="sm"
                   onClick={() => handleDelete(currentBylaws)}
-                  className="border-red-500 text-red-500 hover:bg-red-50"
+                  className="border-red-500 text-red-500"
                 >
                   <Trash2 className="h-4 w-4" />
                 </Button>
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index dffb129..6c2d934 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -78,38 +78,48 @@ const AdminDashboard = () => {
       {/* Stats Grid */}
       <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
-          <div className="flex items-center justify-between mb-4">
-            <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-              <Users className="h-6 w-6 text-brand-purple" />
+          <div className='flex items-start justify-between'>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+              {loading ? '-' : stats.totalMembers}
+            </p>
+            <div className="flex items-start justify-between mb-4">
+              <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
+                <Users className="h-6 w-6 text-brand-purple" />
+              </div>
             </div>
+
           </div>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {loading ? '-' : stats.totalMembers}
-          </p>
           <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
         </Card>
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
-          <div className="flex items-center justify-between mb-4">
-            <div className=" p-3 rounded-lg">
-              <Clock className="h-6 w-6 text-orange-600" />
+          <div className='flex items-start justify-between'>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+              {loading ? '-' : stats.pendingValidations}
+            </p>
+            <div className="flex items-start justify-between mb-4">
+              <div className=" p-3 rounded-lg">
+                <Clock className="h-6 w-6 text-orange-600" />
+              </div>
             </div>
+
           </div>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {loading ? '-' : stats.pendingValidations}
-          </p>
+
           <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
         </Card>
 
         <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
-          <div className="flex items-center justify-between mb-4">
-            <div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
-              <CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
+          <div className='flex items-start justify-between'>
+            <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
+              {loading ? '-' : stats.activeMembers}
+            </p>
+            <div className="flex items-start justify-between mb-4">
+              <div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
+                <CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
+              </div>
             </div>
+
           </div>
-          <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {loading ? '-' : stats.activeMembers}
-          </p>
           <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
         </Card>
       </div>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index a7bac7b..2a2df32 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -297,8 +297,9 @@ const AdminEvents = () => {
                   <Calendar className="h-6 w-6 text-brand-purple " />
                 </div>
                 <Badge
+
                   className={`${event.published
-                    ? 'bg-[var(--green-light)] text-white'
+                    ? 'border-transparent bg-[var(--green-light)] text-white hover:bg-[var(--green-forest)]'
                     : 'bg-gray-400 text-white'
                     } px-3 py-1 rounded-full`}
                 >
@@ -345,7 +346,7 @@ const AdminEvents = () => {
                   onClick={() => navigate(`/admin/events/${event.id}/attendance`)}
                   variant="outline"
                   size="sm"
-                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white"
+                  className="w-full border-[var(--green-light)] text-[var(--green-light)] hover:bg-[var(--green-light)] hover:text-white dark:hover:text-background"
                   data-testid={`mark-attendance-${event.id}`}
                 >
                   <Users className="h-4 w-4 mr-2" />
@@ -358,7 +359,7 @@ const AdminEvents = () => {
                     onClick={() => togglePublish(event)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white dark:hover:bg-brand-lavender dark:hover:text-background"
                     data-testid={`toggle-publish-${event.id}`}
                   >
                     {event.published ? (
@@ -377,7 +378,7 @@ const AdminEvents = () => {
                     onClick={() => handleEdit(event)}
                     variant="outline"
                     size="sm"
-                    className="border-gray-400 text-gray-600 hover:bg-gray-400 hover:text-white"
+                    className="border-gray-400 text-gray-600 dark:text-gray-400 hover:bg-gray-400 dark:hover:text-background hover:text-white"
                     data-testid={`edit-event-${event.id}`}
                   >
                     <Edit className="h-4 w-4" />
diff --git a/src/pages/admin/AdminFinancials.js b/src/pages/admin/AdminFinancials.js
index d854dc4..d29bc67 100644
--- a/src/pages/admin/AdminFinancials.js
+++ b/src/pages/admin/AdminFinancials.js
@@ -229,10 +229,10 @@ const AdminFinancials = () => {
                     )}
                     {hasPermission('financials.delete') && (
                       <Button
-                        variant="outline"
+                        variant="outline-destructive"
                         size="sm"
                         onClick={() => handleDelete(report)}
-                        className="border-red-500 text-red-500 hover:bg-red-50"
+                        className=""
                       >
                         <Trash2 className="h-4 w-4" />
                       </Button>
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 0ea371f..5a2d181 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -478,7 +478,7 @@ const AdminMembers = () => {
                       <Button
                         variant="outline"
                         size="sm"
-                        className="border-brand-purple  text-brand-purple dark:bg-background dark:border-brand-lavender dark:text-brand-light-lavender hover:bg-brand-light-lavender  "
+                        className=""
                       >
                         <Eye className="h-4 w-4 mr-1" />
                         View Profile
diff --git a/src/pages/admin/AdminNewsletters.js b/src/pages/admin/AdminNewsletters.js
index 5f3a4e3..a03b876 100644
--- a/src/pages/admin/AdminNewsletters.js
+++ b/src/pages/admin/AdminNewsletters.js
@@ -266,10 +266,10 @@ const AdminNewsletters = () => {
                           )}
                           {hasPermission('newsletters.delete') && (
                             <Button
-                              variant="outline"
+                              variant="outline-destructive"
                               size="sm"
                               onClick={() => handleDelete(newsletter)}
-                              className="border-red-500 text-red-500 hover:bg-red-50"
+                              className=""
                             >
                               <Trash2 className="h-4 w-4" />
                             </Button>
diff --git a/src/pages/admin/AdminPlans.js b/src/pages/admin/AdminPlans.js
index 8e77961..279e6e3 100644
--- a/src/pages/admin/AdminPlans.js
+++ b/src/pages/admin/AdminPlans.js
@@ -294,7 +294,7 @@ const AdminPlans = () => {
                     onClick={() => handleEditPlan(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full"
+                    className="flex-1 border-brand-purple  text-brand-purple  hover:bg-brand-purple  hover:text-white rounded-full dark:hover:text-background"
                   >
                     <Edit className="h-4 w-4 mr-1" />
                     Edit
@@ -303,7 +303,7 @@ const AdminPlans = () => {
                     onClick={() => handleDeleteClick(plan)}
                     variant="outline"
                     size="sm"
-                    className="flex-1 border-red-500 text-red-500 hover:bg-red-500 hover:text-white rounded-full"
+                    className="flex-1 border-red-500 text-red-500 hover:bg-red-500 dark:hover:bg-red-500/10 hover:text-white rounded-full"
                     disabled={plan.subscriber_count > 0}
                   >
                     <Trash2 className="h-4 w-4 mr-1" />
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index f9a2bed..e484e69 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -291,8 +291,8 @@ const AdminStaff = () => {
                           onClick={() => handleToggleStatus(user.id, user.status)}
                           variant="outline"
                           className={`border-2 rounded-full px-4 py-2 ${user.status === 'active'
-                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50'
-                            : 'border-green-500 text-green-600 hover:bg-green-50'
+                            ? 'border-orange-500 text-orange-600 hover:bg-orange-50 dark:hover:bg-orange-600/10'
+                            : 'border-green-500 text-green-600 hover:bg-green-50 hover:dark:bg-green-600/10'
                             }`}
                         >
                           {user.status === 'active' ? (
@@ -313,7 +313,7 @@ const AdminStaff = () => {
                         <Button
                           onClick={() => handleDeleteUser(user.id, `${user.first_name} ${user.last_name}`)}
                           variant="outline"
-                          className="border-2 border-red-500 text-red-600 hover:bg-red-50 rounded-full px-4 py-2"
+                          className="border-2 border-red-500 text-red-600 hover:bg-red-50 dark:hover:bg-red-600/10  rounded-full px-4 py-2"
                         >
                           <Trash2 className="h-4 w-4 mr-2" />
                           Delete
diff --git a/src/pages/admin/AdminSubscriptions.js b/src/pages/admin/AdminSubscriptions.js
index 6b21248..bb0e4c5 100644
--- a/src/pages/admin/AdminSubscriptions.js
+++ b/src/pages/admin/AdminSubscriptions.js
@@ -419,7 +419,7 @@ Proceed with activation?`;
               <DropdownMenuTrigger asChild>
                 <Button
                   disabled={exporting}
-                  className="bg-[var(--green-light)] text-white hover:bg-[var(--green-soft)] rounded-full px-6 py-2 flex items-center gap-2"
+                  className="btn-green py-2 flex items-center gap-2"
                 >
                   <Download className="h-4 w-4" />
                   {exporting ? 'Exporting...' : 'Export'}
@@ -521,9 +521,9 @@ Proceed with activation?`;
                     {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                       <Button
                         size="sm"
-                        variant="outline"
+                        variant="outline-destructive"
                         onClick={() => handleCancelSubscription(sub.id)}
-                        className="flex-1 text-red-600 hover:bg-red-50"
+                        className="flex-1 "
                       >
                         <XCircle className="h-4 w-4 mr-2" />
                         Cancel
@@ -626,9 +626,9 @@ Proceed with activation?`;
                         {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
                           <Button
                             size="sm"
-                            variant="outline"
+                            variant="outline-destructive"
                             onClick={() => handleCancelSubscription(sub.id)}
-                            className="text-red-600 hover:bg-red-50"
+                            className=""
                           >
                             <XCircle className="h-4 w-4" />
                           </Button>
diff --git a/src/pages/admin/AdminValidations.js b/src/pages/admin/AdminValidations.js
index 84d873c..d2ab17c 100644
--- a/src/pages/admin/AdminValidations.js
+++ b/src/pages/admin/AdminValidations.js
@@ -437,7 +437,7 @@ const AdminValidations = () => {
                                 disabled={actionLoading === user.id}
                                 size="sm"
                                 variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                               >
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
@@ -462,7 +462,7 @@ const AdminValidations = () => {
                                 disabled={actionLoading === user.id}
                                 size="sm"
                                 variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                               >
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
@@ -487,7 +487,7 @@ const AdminValidations = () => {
                                 disabled={actionLoading === user.id}
                                 size="sm"
                                 variant="outline"
-                                className="border-2 border-red-500 text-red-500 hover:bg-red-50"
+                                className="border-2 border-red-500 text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10"
                               >
                                 <X className="h-4 w-4 mr-1" />
                                 Reject
diff --git a/src/styles/components.css b/src/styles/components.css
index a935eec..822a2c6 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -17,7 +17,7 @@
   }
 
   .btn-ghost {
-    @apply hover:bg-accent hover:text-accent-foreground rounded-full disabled:opacity-50 px-6 transition-transform;
+    @apply hover:bg-brand-purple bg-brand-purple/10  rounded-full disabled:opacity-50 px-6 transition-transform text-brand-purple  hover:text-[var(--purple-muted)];
   }
 
   .btn-outline {
@@ -33,7 +33,7 @@
   }
 
   .btn-outline-destructive {
-    @apply border border-destructive border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50  px-6 transition-transform;
+    @apply border border-destructive bg-none border-2 text-destructive shadow-sm hover:bg-destructive/10 dark:hover:bg-destructive/10 rounded-full disabled:opacity-50  px-6 transition-transform;
   }
 
   .btn-link {
@@ -55,12 +55,15 @@
   .btn-icon {
     @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
   }
+  .btn-green {
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-full px-6 ;
+  }
   .btn-util-green {
-    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 transition-transform;
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 ;
   }
 
   .btn-util-purple {
-    @apply bg-[var(--purple-lavender)] transition-transform hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
+    @apply bg-[var(--purple-lavender)]  hover:bg-[var(--purple-ink-2)] text-background dark:text-white dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
 
   .btn-light-orange {
diff --git a/src/styles/theme.css b/src/styles/theme.css
index 4e53c32..34e662a 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -54,6 +54,7 @@
     --blue-linkedin: #0a66c2;
     --blue-facebook: #1877f2;
     --blue-twitter: #1da1f2;
+    --red-instagram: #e4405f;
     --purple-ink: #422268;
     --purple-ink-2: #422268;
     --purple-deep: #48286e;
@@ -96,7 +97,6 @@
     --gold-warm: #f2cc8f;
     --gold-soft: #e8bf7a;
     --gold-warm: #f2cc8f;
-    --red-instagram: #e4405f;
     --red-soft: #ffebee;
     --lavender-100: #e8e0f5;
     --lavender-200: #eeebf4;
@@ -243,3 +243,4 @@
     --neutral-900: #f4f4ff; /* highest contrast text */
   }
 }
+
-- 
2.39.5


From a935c0f4ddda90d92c5dda5d59aa40c60afbe2e4 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 14 Jan 2026 11:08:16 -0600
Subject: [PATCH 09/21] fix: correct green-forest color value for consistency

---
 src/styles/theme.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/theme.css b/src/styles/theme.css
index 34e662a..fd138a9 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -78,7 +78,7 @@
     --green-muted: #66927e;
     --green-soft: #6a9680;
     --green-eucalyptus: #6a9a83;
-    --green-forest: #5e8374;
+    --green-forest: #5e8EsOkvcwL7472374;
     --green-fern: #6da085;
     --green-mint: #6fa087;
     --green-pastel: #6fa188;
-- 
2.39.5


From 0ebfe71361a9cdbfed3a9aeac10c93f3e2de9d96 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 14 Jan 2026 13:23:52 -0600
Subject: [PATCH 10/21] refactor: update button styles and text for improved
 consistency and theming

---
 src/components/AddToCalendarButton.js   |  2 +-
 src/components/Navbar.js                | 15 ++++-----------
 src/components/PublicNavbar.js          |  4 ++--
 src/components/ui/dropdown-menu.jsx     |  4 ++--
 src/pages/Dashboard.js                  |  9 ++++-----
 src/pages/EventDetails.js               |  2 +-
 src/pages/admin/AdminEventAttendance.js | 20 ++++++++++----------
 src/pages/members/NewsletterArchive.js  |  2 +-
 8 files changed, 25 insertions(+), 33 deletions(-)

diff --git a/src/components/AddToCalendarButton.js b/src/components/AddToCalendarButton.js
index cd8b1b5..e85e29e 100644
--- a/src/components/AddToCalendarButton.js
+++ b/src/components/AddToCalendarButton.js
@@ -117,7 +117,7 @@ export default function AddToCalendarButton({
   return (
     <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
       <DropdownMenuTrigger asChild>
-        <Button variant={variant} size={size} className="gap-2">
+        <Button variant={variant} size={size} className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender">
           <Calendar className="h-4 w-4" />
           Add to Calendar
           <ChevronDown className="h-4 w-4" />
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 9d529a5..2431c3b 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -39,7 +39,7 @@ const Navbar = () => {
               style={{ fontFamily: "'Poppins', sans-serif" }}
               data-testid="admin-nav-button"
             >
-              Admin Panel
+              Dashboard
             </button>
           </Link>
         )}
@@ -110,7 +110,7 @@ const Navbar = () => {
             className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
             style={{ fontFamily: "'Poppins', sans-serif" }}
           >
-            Dashboard
+            My Profile
           </Link>
           <Link
             to="/events"
@@ -170,14 +170,7 @@ const Navbar = () => {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
-          <Link
-            to="/profile"
-            className="text-white text-[17.5px] font-medium hover:opacity-80 transition-opacity"
-            style={{ fontFamily: "'Poppins', sans-serif" }}
-            data-testid="profile-nav-button"
-          >
-            Profile
-          </Link>
+
         </nav>
 
         {/* Mobile Hamburger Button */}
@@ -373,7 +366,7 @@ const Navbar = () => {
                     className="w-full bg-background/20 hover:bg-background/30 text-white rounded-lg"
                     style={{ fontFamily: "'Poppins', sans-serif" }}
                   >
-                    Admin Panel
+                    Dashboard
                   </Button>
                 </Link>
               )}
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index ccd1431..6c7af8a 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -165,7 +165,7 @@ const PublicNavbar = () => {
               className={getDesktopLinkClasses(user ? "/dashboard" : "/become-a-member")}
               style={{ fontFamily: "'Nunito Sans', sans-serif" }}
             >
-              {user ? 'Dashboard' : 'Become a Member'}
+              {user ? 'My Profile' : 'Become a Member'}
             </Link>
             {!user && (
               <Link
@@ -270,7 +270,7 @@ const PublicNavbar = () => {
                 className={getMobileLinkClasses(user ? "/dashboard" : "/become-a-member")}
                 style={{ fontFamily: "'Nunito Sans', sans-serif" }}
               >
-                {user ? 'Dashboard' : 'Become a Member'}
+                {user ? 'My Profile' : 'Become a Member'}
               </Link>
 
               {!user && (
diff --git a/src/components/ui/dropdown-menu.jsx b/src/components/ui/dropdown-menu.jsx
index 91d98a3..f848ec2 100644
--- a/src/components/ui/dropdown-menu.jsx
+++ b/src/components/ui/dropdown-menu.jsx
@@ -20,7 +20,7 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-brand-light-lavender data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       inset && "pl-8",
       className
     )}
@@ -63,7 +63,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-brand-light-lavender focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
       inset && "pl-8",
       className
     )}
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index fe2b335..1b4f052 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -168,11 +168,11 @@ const Dashboard = () => {
             </div>
             <Link to="/profile">
               <Button
-                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6"
+                className="btn-lavender"
                 data-testid="view-profile-button"
               >
                 <User className="h-4 w-4 mr-2" />
-                View Profile
+                Edit Profile
               </Button>
             </Link>
           </div>
@@ -227,8 +227,7 @@ const Dashboard = () => {
               </h3>
               <Link to="/events">
                 <Button
-                  variant="ghost"
-                  className="text-[var(--orange-light)] hover:text-brand-purple "
+                  className="btn-lavender "
                   data-testid="view-all-events-button"
                 >
                   View All
@@ -442,7 +441,7 @@ const Dashboard = () => {
                         Browse upcoming events and RSVP to start building your event history!
                       </p>
                       <Link to="/events">
-                        <Button className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6">
+                        <Button className="bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender px-6">
                           <Calendar className="h-4 w-4 mr-2" />
                           Browse Events
                         </Button>
diff --git a/src/pages/EventDetails.js b/src/pages/EventDetails.js
index 8422274..93afe40 100644
--- a/src/pages/EventDetails.js
+++ b/src/pages/EventDetails.js
@@ -155,7 +155,7 @@ const EventDetails = () => {
                 disabled={rsvpLoading}
                 className={`rounded-full px-8 py-6 flex items-center gap-2 ${event.user_rsvp_status === 'yes'
                   ? 'bg-[var(--green-light)] text-white'
-                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background'
+                  : 'bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender'
                   }`}
                 data-testid="rsvp-yes-button"
               >
diff --git a/src/pages/admin/AdminEventAttendance.js b/src/pages/admin/AdminEventAttendance.js
index e93836c..2657756 100644
--- a/src/pages/admin/AdminEventAttendance.js
+++ b/src/pages/admin/AdminEventAttendance.js
@@ -254,7 +254,7 @@ const AdminEventAttendance = () => {
         </div>
         <Button
           onClick={exportToCSV}
-          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-xl"
+          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] dark:bg-[var(--green-forest)] text-white rounded-xl"
           style={{ fontFamily: "'Inter', sans-serif" }}
         >
           <Download className="h-4 w-4 mr-2" />
@@ -282,7 +282,7 @@ const AdminEventAttendance = () => {
               )}
             </div>
           </div>
-          <Badge className={`${event.published ? 'bg-[var(--green-light)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
+          <Badge className={`${event.published ? 'bg-[var(--green-light)] dark:bg-[var(--green-forest)]' : 'bg-[var(--neutral-800)]'} text-white px-3 py-1`}>
             {event.published ? 'Published' : 'Draft'}
           </Badge>
         </div>
@@ -302,7 +302,7 @@ const AdminEventAttendance = () => {
 
         <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
           <div className="flex items-center gap-3">
-            <UserCheck className="h-8 w-8 text-[var(--green-light)]" />
+            <UserCheck className="h-8 w-8 text-[var(--green-light)] dark:text-[var(--green-forest)]" />
             <div>
               <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Yes</p>
               <p className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>{stats.yesCount}</p>
@@ -320,7 +320,7 @@ const AdminEventAttendance = () => {
           </div>
         </Card>
 
-        <Card className="p-4 bg-background border-[var(--neutral-800)] rounded-xl">
+        <Card className="p-4 bg-background border-[var(--neutral-800)]  rounded-xl">
           <div className="flex items-center gap-3">
             <HelpCircle className="h-8 w-8 text-[var(--gold-warm)]" />
             <div>
@@ -350,7 +350,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('all')}
               variant={activeTab === 'all' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'all'
-                ? 'bg-brand-purple  hover:bg-[var(--purple-ink)] text-white'
+                ? 'bg-brand-purple  hover:bg-[var(--purple-ink)] dark:bg-brand-dark-lavender text-white'
                 : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -361,7 +361,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('yes')}
               variant={activeTab === 'yes' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'yes'
-                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white'
+                ? 'bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] dark:bg-[var(--green-forest)] text-white'
                 : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -383,7 +383,7 @@ const AdminEventAttendance = () => {
               onClick={() => setActiveTab('maybe')}
               variant={activeTab === 'maybe' ? 'default' : 'outline'}
               className={`rounded-xl ${activeTab === 'maybe'
-                ? 'bg-[var(--gold-warm)] hover:bg-[var(--gold-soft)] text-[var(--purple-ink)]'
+                ? 'bg-[var(--gold-warm)] dark:bg-orange-400 hover:bg-[var(--gold-soft)] text-white'
                 : 'border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--lavender-500)]'
                 }`}
               style={{ fontFamily: "'Inter', sans-serif" }}
@@ -483,7 +483,7 @@ const AdminEventAttendance = () => {
                     <td className="px-4 py-3">
                       <Badge
                         className={`${rsvp.rsvp_status === 'yes'
-                          ? 'bg-[var(--green-light)]'
+                          ? 'bg-[var(--green-light)] dark:bg-[var(--green-forest)]'
                           : rsvp.rsvp_status === 'no'
                             ? 'bg-[var(--orange-soft)]'
                             : 'bg-[var(--gold-warm)] text-[var(--purple-ink)]'
@@ -498,7 +498,7 @@ const AdminEventAttendance = () => {
                           onClick={() => handleIndividualAttendance(rsvp.user_id, false)}
                           disabled={saving}
                           size="sm"
-                          className="bg-[var(--green-light)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
+                          className="bg-[var(--green-light)] dark:bg-[var(--green-forest)] hover:bg-[var(--green-eucalyptus)] text-white rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <Check className="h-3 w-3 mr-1" />
@@ -510,7 +510,7 @@ const AdminEventAttendance = () => {
                           disabled={saving}
                           size="sm"
                           variant="outline"
-                          className="border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--green-light)] hover:text-white hover:border-[var(--green-light)] rounded-lg min-w-[120px]"
+                          className="border-[var(--neutral-800)] text-brand-purple  hover:bg-[var(--green-light)] dark:bg-[var(--green-forest)] hover:text-white hover:border-[var(--green-light)] dark:bg-[var(--green-forest)] rounded-lg min-w-[120px]"
                           style={{ fontFamily: "'Inter', sans-serif" }}
                         >
                           <X className="h-3 w-3 mr-1" />
diff --git a/src/pages/members/NewsletterArchive.js b/src/pages/members/NewsletterArchive.js
index ef2b265..45576d4 100644
--- a/src/pages/members/NewsletterArchive.js
+++ b/src/pages/members/NewsletterArchive.js
@@ -128,7 +128,7 @@ export default function NewsletterArchive() {
                 onClick={clearFilter}
                 variant={selectedYear === null ? "default" : "outline"}
                 size="sm"
-                className={selectedYear === null ? "bg-brand-purple  text-white" : "border-brand-purple  text-brand-purple "}
+                className={selectedYear === null ? "bg-brand-purple hover:bg-[var(--purple-muted)]  text-white" : "border-brand-lavender  text-brand-lavender "}
               >
                 All Years
               </Button>
-- 
2.39.5


From 0c1202d89a385611dd93e68a2285339324a413a0 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 14 Jan 2026 13:43:04 -0600
Subject: [PATCH 11/21] refactor: add scrollbar styles to dialog components for
 improved usability

---
 src/components/AttendanceDialog.js      |  2 +-
 src/components/CreateMemberDialog.js    |  2 +-
 src/components/ImportMembersDialog.js   |  2 +-
 src/components/Navbar.js                |  2 +-
 src/components/PlanDialog.js            |  2 +-
 src/components/PublicNavbar.js          |  2 +-
 src/components/WordPressImportWizard.js |  2 +-
 src/components/ui/command.jsx           |  2 +-
 src/components/ui/context-menu.jsx      |  2 +-
 src/components/ui/dropdown-menu.jsx     |  2 +-
 src/components/ui/input.jsx             |  2 +-
 src/components/ui/select.jsx            |  2 +-
 src/layouts/AdminLayout.js              |  2 +-
 src/pages/admin/AdminEvents.js          |  6 +++---
 src/pages/admin/AdminRoles.js           | 12 ++++++------
 src/pages/members/MemberCalendar.js     |  2 +-
 src/pages/members/MembersDirectory.js   |  2 +-
 17 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/AttendanceDialog.js b/src/components/AttendanceDialog.js
index 14afbc4..d950e04 100644
--- a/src/components/AttendanceDialog.js
+++ b/src/components/AttendanceDialog.js
@@ -55,7 +55,7 @@ export const AttendanceDialog = ({ event, open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background">
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto bg-background scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             Mark Attendance: {event?.title}
diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js
index 2476245..c287564 100644
--- a/src/components/CreateMemberDialog.js
+++ b/src/components/CreateMemberDialog.js
@@ -119,7 +119,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <UserPlus className="h-6 w-6" />
diff --git a/src/components/ImportMembersDialog.js b/src/components/ImportMembersDialog.js
index f015e62..28e8cc7 100644
--- a/src/components/ImportMembersDialog.js
+++ b/src/components/ImportMembersDialog.js
@@ -138,7 +138,7 @@ const ImportMembersDialog = ({ open, onOpenChange, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[800px] rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
             <Upload className="h-6 w-6" />
diff --git a/src/components/Navbar.js b/src/components/Navbar.js
index 2431c3b..6614881 100644
--- a/src/components/Navbar.js
+++ b/src/components/Navbar.js
@@ -224,7 +224,7 @@ const Navbar = () => {
             )}
 
             {/* Navigation Links */}
-            <nav className="flex-1 overflow-y-auto py-6 px-4">
+            <nav className="flex-1 overflow-y-auto scrollbar-dashboard py-6 px-4">
               <div className="space-y-2">
                 <Link
                   to="/"
diff --git a/src/components/PlanDialog.js b/src/components/PlanDialog.js
index 3694d02..3736214 100644
--- a/src/components/PlanDialog.js
+++ b/src/components/PlanDialog.js
@@ -159,7 +159,7 @@ const PlanDialog = ({ open, onOpenChange, plan, onSuccess }) => {
 
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto">
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh] overflow-y-auto scrollbar-dashboard">
         <DialogHeader>
           <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
             {plan ? 'Edit Plan' : 'Create New Plan'}
diff --git a/src/components/PublicNavbar.js b/src/components/PublicNavbar.js
index 6c7af8a..132ce49 100644
--- a/src/components/PublicNavbar.js
+++ b/src/components/PublicNavbar.js
@@ -204,7 +204,7 @@ const PublicNavbar = () => {
           />
 
           {/* Drawer */}
-          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto">
+          <div className="fixed right-0 top-0 h-full w-[280px] bg-brand-purple  shadow-xl overflow-y-auto scrollbar-dashboard">
             {/* Header */}
             <div className="flex justify-between items-center p-6 border-b border-[var(--purple-deep)]">
               <span className="text-white text-lg font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
diff --git a/src/components/WordPressImportWizard.js b/src/components/WordPressImportWizard.js
index 9d0d45a..bb99f72 100644
--- a/src/components/WordPressImportWizard.js
+++ b/src/components/WordPressImportWizard.js
@@ -896,7 +896,7 @@ export default function WordPressImportWizard({ open, onOpenChange, onSuccess })
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
-            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-6xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
                 <DialogHeader>
                     <DialogTitle className="text-2xl font-semibold text-[var(--purple-ink)]">
                         WordPress Import Wizard
diff --git a/src/components/ui/command.jsx b/src/components/ui/command.jsx
index e0eac77..a470ce3 100644
--- a/src/components/ui/command.jsx
+++ b/src/components/ui/command.jsx
@@ -50,7 +50,7 @@ CommandInput.displayName = CommandPrimitive.Input.displayName
 const CommandList = React.forwardRef(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
-    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
+    className={cn("max-h-[300px] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden", className)}
     {...props} />
 ))
 
diff --git a/src/components/ui/context-menu.jsx b/src/components/ui/context-menu.jsx
index b450396..14f9b46 100644
--- a/src/components/ui/context-menu.jsx
+++ b/src/components/ui/context-menu.jsx
@@ -47,7 +47,7 @@ const ContextMenuContent = React.forwardRef(({ className, ...props }, ref) => (
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props} />
diff --git a/src/components/ui/dropdown-menu.jsx b/src/components/ui/dropdown-menu.jsx
index f848ec2..4dbb017 100644
--- a/src/components/ui/dropdown-menu.jsx
+++ b/src/components/ui/dropdown-menu.jsx
@@ -50,7 +50,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto scrollbar-dashboard scrollbar-x-dashboard overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.jsx
index 764b48f..0148d4c 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.jsx
@@ -7,7 +7,7 @@ const Input = React.forwardRef(({ className, type, ...props }, ref) => {
     <input
       type={type}
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
       ref={ref}
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.jsx
index b1367bf..93913ea 100644
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.jsx
@@ -52,7 +52,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden scrollbar-dashboard scrollbar-x-dashboard rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
diff --git a/src/layouts/AdminLayout.js b/src/layouts/AdminLayout.js
index a93df83..a57e9d6 100644
--- a/src/layouts/AdminLayout.js
+++ b/src/layouts/AdminLayout.js
@@ -63,7 +63,7 @@ const AdminLayout = ({ children }) => {
       )}
 
       {/* Main Content Area */}
-      <main className="flex-1 overflow-y-auto">
+      <main className="flex-1 overflow-y-auto scrollbar-dashboard">
         <div className="max-w-7xl mx-auto px-6 py-8">
           {children}
         </div>
diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index 2a2df32..a0df97a 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -158,7 +158,7 @@ const AdminEvents = () => {
               </Button>
             </DialogTrigger>
 
-            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto">
+            <DialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
               <DialogHeader>
                 <DialogTitle className="text-2xl text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   {editingEvent ? 'Edit Event' : 'Create New Event'}
@@ -186,7 +186,7 @@ const AdminEvents = () => {
                     value={formData.description}
                     onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                     rows={4}
-                    className="w-full border-2 border-[var(--neutral-800)] focus:border-brand-purple  rounded-lg p-3"
+                    className="w-full border-2 border-[var(--neutral-800)] bg-background focus:border-brand-purple  rounded-lg p-3"
                   />
                 </div>
 
@@ -249,7 +249,7 @@ const AdminEvents = () => {
                     id="published"
                     checked={formData.published}
                     onChange={(e) => setFormData({ ...formData, published: e.target.checked })}
-                    className="w-4 h-4 text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
+                    className="w-4 h-4 ui-checkbox text-brand-purple  border-[var(--neutral-800)] rounded focus:ring-brand-purple "
                   />
                   <label htmlFor="published" className="text-sm font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     Publish event (make visible to members)
diff --git a/src/pages/admin/AdminRoles.js b/src/pages/admin/AdminRoles.js
index 658f654..4f5f328 100644
--- a/src/pages/admin/AdminRoles.js
+++ b/src/pages/admin/AdminRoles.js
@@ -184,9 +184,9 @@ const AdminRoles = () => {
   const groupedPermissions = groupPermissionsByModule();
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6 ">
       {/* Header */}
-      <div className="flex justify-between items-center">
+      <div className="flex justify-between items-center ">
         <div>
           <h1 className="text-3xl font-bold text-[var(--purple-ink)]">Role Management</h1>
           <p className="text-gray-600 mt-1">
@@ -273,7 +273,7 @@ const AdminRoles = () => {
 
       {/* Create Role Modal */}
       <Dialog open={showCreateModal} onOpenChange={setShowCreateModal}>
-        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto scrollbar-dashboard scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Create New Role</DialogTitle>
             <DialogDescription>
@@ -317,7 +317,7 @@ const AdminRoles = () => {
               <p className="text-sm text-gray-600 mb-3">
                 Select permissions for this role. You can also add permissions later.
               </p>
-              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto">
+              <div className="border rounded-lg p-4 max-h-64 overflow-y-auto scrollbar-dashboard">
                 {Object.entries(groupedPermissions).map(([module, perms]) => (
                   <div key={module} className="mb-4">
                     <button
@@ -373,7 +373,7 @@ const AdminRoles = () => {
 
       {/* Edit Role Modal */}
       <Dialog open={showEditModal} onOpenChange={setShowEditModal}>
-        <DialogContent>
+        <DialogContent >
           <DialogHeader>
             <DialogTitle>Edit Role</DialogTitle>
             <DialogDescription>
@@ -417,7 +417,7 @@ const AdminRoles = () => {
 
       {/* Manage Permissions Modal */}
       <Dialog open={showPermissionsModal} onOpenChange={setShowPermissionsModal}>
-        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto">
+        <DialogContent className="max-w-3xl max-h-[80vh] overflow-y-auto scrollbar-dashboard">
           <DialogHeader>
             <DialogTitle>Manage Permissions: {selectedRole?.name}</DialogTitle>
             <DialogDescription>
diff --git a/src/pages/members/MemberCalendar.js b/src/pages/members/MemberCalendar.js
index 1136be1..9ed6f7b 100644
--- a/src/pages/members/MemberCalendar.js
+++ b/src/pages/members/MemberCalendar.js
@@ -195,7 +195,7 @@ export default function MemberCalendar() {
         </Card>
 
         <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
+          <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
             {selectedEvent && (
               <>
                 <DialogHeader>
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index ba24ce9..5d17b86 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -377,7 +377,7 @@ const MembersDirectory = () => {
 
       {/* Profile Detail Dialog */}
       <Dialog open={profileDialogOpen} onOpenChange={setProfileDialogOpen}>
-        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto">
+        <DialogContent className="sm:max-w-[600px] bg-background rounded-2xl max-h-[90vh] overflow-y-auto scrollbar-dashboard">
           {selectedMember && (
             <>
               <DialogHeader>
-- 
2.39.5


From 9287adec01206183c24417f831848d2e239006c0 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Wed, 14 Jan 2026 13:59:21 -0600
Subject: [PATCH 12/21] refactor: update button styles for improved theming and
 consistency

---
 src/pages/admin/AdminEvents.js  | 4 ++--
 src/pages/admin/AdminGallery.js | 4 ++--
 src/styles/components.css       | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/pages/admin/AdminEvents.js b/src/pages/admin/AdminEvents.js
index a0df97a..4ccda8a 100644
--- a/src/pages/admin/AdminEvents.js
+++ b/src/pages/admin/AdminEvents.js
@@ -267,7 +267,7 @@ const AdminEvents = () => {
                   </Button>
                   <Button
                     type="submit"
-                    className="flex-1 bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full"
+                    className="btn-lavender flex-1"
                   >
                     {editingEvent ? 'Update Event' : 'Create Event'}
                   </Button>
@@ -408,7 +408,7 @@ const AdminEvents = () => {
           </p>
           <Button
             onClick={() => setIsCreateDialogOpen(true)}
-            className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-8"
+            className="btn-lavender px-8"
           >
             <Plus className="mr-2 h-5 w-5" />
             Create Event
diff --git a/src/pages/admin/AdminGallery.js b/src/pages/admin/AdminGallery.js
index 2b510b8..c30c545 100644
--- a/src/pages/admin/AdminGallery.js
+++ b/src/pages/admin/AdminGallery.js
@@ -184,7 +184,7 @@ const AdminGallery = () => {
 
           {/* Empty State Message */}
           {events.length === 0 && (
-            <div className="mt-4 p-4 bg-[var(--lavender-300)] border-2 border-[var(--neutral-800)] rounded-xl">
+            <div className="mt-4 p-4 bg-[var(--lavender-300)] dark:bg-brand-lavender/10 dark:border-transparent border-2 border-[var(--neutral-800)] rounded-xl">
               <div className="flex items-start gap-3">
                 <AlertCircle className="h-5 w-5 text-brand-purple  flex-shrink-0 mt-0.5" />
                 <div className="flex-1">
@@ -196,7 +196,7 @@ const AdminGallery = () => {
                   </p>
                   <Link to="/admin/events">
                     <Button
-                      className="btn-lavender  text-sm"
+                      className="btn-lavender text-sm"
                       style={{ fontFamily: "'Inter', sans-serif" }}
                     >
                       <Calendar className="h-4 w-4 mr-2" />
diff --git a/src/styles/components.css b/src/styles/components.css
index 822a2c6..494188d 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -73,7 +73,7 @@
     @apply bg-brand-pink  hover:bg-brand-dark-rose dark:text-[var(--lavender-100)] text-background dark:hover:text-white rounded-xl h-12 px-6 transition-transform;
   }
   .btn-lavender {
-    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
+    @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-foreground dark:hover:text-background;
   }
   .btn-light-lavender {
     @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
-- 
2.39.5


From 57cd18ad9db6cf22dbfe9de7e6ed9c7ce18a8507 Mon Sep 17 00:00:00 2001
From: Koncept Kit <63216427+konceptkit@users.noreply.github.com>
Date: Fri, 16 Jan 2026 19:07:14 +0700
Subject: [PATCH 13/21] - Add Settings menu for Stripe configuration- In the
 Member Profile page, Superadmin can assign new Role to the member- Stripe
 Configuration is now stored with encryption in Database

---
 src/App.js                         |   8 +
 src/components/AdminSidebar.js     |  29 +-
 src/components/ChangeRoleDialog.js | 149 +++++++++
 src/pages/admin/AdminSettings.js   | 486 +++++++++++++++++++++++++++++
 src/pages/admin/AdminUserView.js   |  26 +-
 5 files changed, 693 insertions(+), 5 deletions(-)
 create mode 100644 src/components/ChangeRoleDialog.js
 create mode 100644 src/pages/admin/AdminSettings.js

diff --git a/src/App.js b/src/App.js
index ed23527..7023eb9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -22,6 +22,7 @@ import AdminUserView from './pages/admin/AdminUserView';
 import AdminStaff from './pages/admin/AdminStaff';
 import AdminMembers from './pages/admin/AdminMembers';
 import AdminPermissions from './pages/admin/AdminPermissions';
+import AdminSettings from './pages/admin/AdminSettings';
 import AdminRoles from './pages/admin/AdminRoles';
 import AdminEvents from './pages/admin/AdminEvents';
 import AdminEventAttendance from './pages/admin/AdminEventAttendance';
@@ -290,6 +291,13 @@ function App() {
               </AdminLayout>
             </PrivateRoute>
           } />
+          <Route path="/admin/settings" element={
+            <PrivateRoute adminOnly>
+              <AdminLayout>
+                <AdminSettings />
+              </AdminLayout>
+            </PrivateRoute>
+          } />
 
           {/* 404 - Catch all undefined routes */}
           <Route path="*" element={<NotFound />} />
diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index 182fb06..26c8702 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -175,17 +175,28 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
       path: '/admin/permissions',
       disabled: false,
       superadminOnly: true
+    },
+    {
+      name: 'Settings',
+      icon: Settings,
+      path: '/admin/settings',
+      disabled: false,
+      superadminOnly: true
     }
   ];
 
   // Filter nav items based on user role
   const filteredNavItems = navItems.filter(item => {
     if (item.superadminOnly && user?.role !== 'superadmin') {
+      console.log('Filtering out superadmin-only item:', item.name, 'User role:', user?.role);
       return false;
     }
     return true;
   });
 
+  // Debug: Log filtered items count
+  console.log('Total nav items:', navItems.length, 'Filtered items:', filteredNavItems.length, 'User role:', user?.role);
+
   const isActive = (path) => {
     if (path === '/admin') {
       return location.pathname === '/admin';
@@ -364,11 +375,21 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             {renderNavItem(filteredNavItems.find(item => item.name === 'Bylaws'))}
           </div>
 
-          {/* Permissions - Superadmin only (no header) */}
+          {/* SYSTEM Section - Superadmin only */}
           {user?.role === 'superadmin' && (
-            <div className="mt-6">
-              {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
-            </div>
+            <>
+              {isOpen && (
+                <div className="px-4 py-2 mt-6">
+                  <h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+                    System
+                  </h3>
+                </div>
+              )}
+              <div className="space-y-1">
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Permissions'))}
+                {renderNavItem(filteredNavItems.find(item => item.name === 'Settings'))}
+              </div>
+            </>
           )}
         </nav>
 
diff --git a/src/components/ChangeRoleDialog.js b/src/components/ChangeRoleDialog.js
new file mode 100644
index 0000000..dafa8d3
--- /dev/null
+++ b/src/components/ChangeRoleDialog.js
@@ -0,0 +1,149 @@
+import React, { useState, useEffect } from 'react';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from './ui/dialog';
+import { Button } from './ui/button';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
+import { Label } from './ui/label';
+import { AlertCircle, Shield } from 'lucide-react';
+import api from '../utils/api';
+import { toast } from 'sonner';
+
+export default function ChangeRoleDialog({ open, onClose, user, onSuccess }) {
+  const [roles, setRoles] = useState([]);
+  const [selectedRole, setSelectedRole] = useState('');
+  const [selectedRoleId, setSelectedRoleId] = useState(null);
+  const [loadingRoles, setLoadingRoles] = useState(false);
+  const [submitting, setSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      fetchRoles();
+      // Pre-select current role
+      setSelectedRole(user.role);
+      setSelectedRoleId(user.role_id);
+    }
+  }, [open, user]);
+
+  const fetchRoles = async () => {
+    setLoadingRoles(true);
+    try {
+      // Reuse existing endpoint that returns assignable roles based on privilege
+      const response = await api.get('/admin/roles/assignable');
+      // Map API response to format expected by Select component
+      const mappedRoles = response.data.map(role => ({
+        value: role.code,
+        label: role.name,
+        id: role.id,
+        description: role.description
+      }));
+      setRoles(mappedRoles);
+    } catch (error) {
+      console.error('Failed to fetch assignable roles:', error);
+      toast.error('Failed to load roles. Please try again.');
+    } finally {
+      setLoadingRoles(false);
+    }
+  };
+
+  const handleSubmit = async () => {
+    if (!selectedRole) {
+      toast.error('Please select a role');
+      return;
+    }
+
+    // Don't submit if role hasn't changed
+    if (selectedRole === user.role && selectedRoleId === user.role_id) {
+      toast.info('The selected role is the same as current role');
+      return;
+    }
+
+    setSubmitting(true);
+    try {
+      await api.put(`/admin/users/${user.id}/role`, {
+        role: selectedRole,
+        role_id: selectedRoleId
+      });
+
+      toast.success(`Role changed to ${selectedRole}`);
+
+      onSuccess();
+      onClose();
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Failed to change role';
+      toast.error(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5 text-[#664fa3]" />
+            Change User Role
+          </DialogTitle>
+          <DialogDescription>
+            Change role for {user.first_name} {user.last_name} ({user.email})
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4 py-4">
+          {/* Current Role Display */}
+          <div className="p-3 bg-[#f1eef9] rounded-lg border border-[#DDD8EB]">
+            <p className="text-sm text-gray-600">Current Role</p>
+            <p className="font-semibold text-[#664fa3] capitalize">{user.role}</p>
+          </div>
+
+          {/* Role Selection */}
+          <div className="space-y-2">
+            <Label htmlFor="role">New Role</Label>
+            <Select value={selectedRole} onValueChange={setSelectedRole} disabled={loadingRoles}>
+              <SelectTrigger>
+                <SelectValue placeholder={loadingRoles ? "Loading roles..." : "Select role"} />
+              </SelectTrigger>
+              <SelectContent>
+                {roles.map((role) => (
+                  <SelectItem key={role.value} value={role.value}>
+                    <span className="capitalize">{role.label}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+
+          {/* Warning for privileged roles */}
+          {(selectedRole === 'admin' || selectedRole === 'superadmin') && (
+            <div className="flex items-start gap-2 p-3 bg-amber-50 border border-amber-200 rounded-lg">
+              <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
+              <div className="text-sm">
+                <p className="font-semibold text-amber-900">Admin Access Warning</p>
+                <p className="text-amber-700">
+                  This user will gain full administrative access to the system.
+                </p>
+              </div>
+            </div>
+          )}
+        </div>
+
+        <div className="flex justify-end gap-3">
+          <Button
+            variant="outline"
+            onClick={onClose}
+            disabled={submitting}
+            className="border-2 border-gray-300 rounded-full"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSubmit}
+            disabled={submitting || loadingRoles}
+            className="bg-[#664fa3] hover:bg-[#7d5ec2] text-white rounded-full"
+          >
+            {submitting ? 'Changing Role...' : 'Change Role'}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pages/admin/AdminSettings.js b/src/pages/admin/AdminSettings.js
new file mode 100644
index 0000000..6967086
--- /dev/null
+++ b/src/pages/admin/AdminSettings.js
@@ -0,0 +1,486 @@
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '../../components/ui/card';
+import { Button } from '../../components/ui/button';
+import { Input } from '../../components/ui/input';
+import { Label } from '../../components/ui/label';
+import { AlertCircle, CheckCircle, Settings as SettingsIcon, RefreshCw, Zap, Edit, Save, X, Copy, Eye, EyeOff, ExternalLink } from 'lucide-react';
+import api from '../../utils/api';
+import { toast } from 'sonner';
+
+export default function AdminSettings() {
+  const [stripeStatus, setStripeStatus] = useState(null);
+  const [loadingStatus, setLoadingStatus] = useState(true);
+  const [testing, setTesting] = useState(false);
+  const [isEditing, setIsEditing] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    secret_key: '',
+    webhook_secret: ''
+  });
+
+  // Show/hide sensitive values
+  const [showSecretKey, setShowSecretKey] = useState(false);
+  const [showWebhookSecret, setShowWebhookSecret] = useState(false);
+
+  useEffect(() => {
+    fetchStripeStatus();
+  }, []);
+
+  const fetchStripeStatus = async () => {
+    setLoadingStatus(true);
+    try {
+      const response = await api.get('/admin/settings/stripe/status');
+      setStripeStatus(response.data);
+    } catch (error) {
+      console.error('Failed to fetch Stripe status:', error);
+      toast.error('Failed to load Stripe status');
+    } finally {
+      setLoadingStatus(false);
+    }
+  };
+
+  const handleTestConnection = async () => {
+    setTesting(true);
+    try {
+      const response = await api.post('/admin/settings/stripe/test-connection');
+      toast.success(response.data.message);
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Connection test failed';
+      toast.error(message);
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setFormData({
+      secret_key: '',
+      webhook_secret: ''
+    });
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+    setFormData({
+      secret_key: '',
+      webhook_secret: ''
+    });
+    setShowSecretKey(false);
+    setShowWebhookSecret(false);
+  };
+
+  const handleSave = async () => {
+    // Validate inputs
+    if (!formData.secret_key || !formData.webhook_secret) {
+      toast.error('Both Secret Key and Webhook Secret are required');
+      return;
+    }
+
+    if (!formData.secret_key.startsWith('sk_test_') && !formData.secret_key.startsWith('sk_live_')) {
+      toast.error('Invalid Secret Key format. Must start with sk_test_ or sk_live_');
+      return;
+    }
+
+    if (!formData.webhook_secret.startsWith('whsec_')) {
+      toast.error('Invalid Webhook Secret format. Must start with whsec_');
+      return;
+    }
+
+    setSaving(true);
+    try {
+      await api.put('/admin/settings/stripe', formData);
+      toast.success('Stripe settings updated successfully');
+      setIsEditing(false);
+      setFormData({
+        secret_key: '',
+        webhook_secret: ''
+      });
+      setShowSecretKey(false);
+      setShowWebhookSecret(false);
+      // Refresh status
+      await fetchStripeStatus();
+    } catch (error) {
+      const message = error.response?.data?.detail || 'Failed to update Stripe settings';
+      toast.error(message);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const copyToClipboard = (text, label) => {
+    navigator.clipboard.writeText(text);
+    toast.success(`${label} copied to clipboard`);
+  };
+
+  if (loadingStatus) {
+    return (
+      <div className="container mx-auto p-6">
+        <div className="flex items-center justify-center py-12">
+          <RefreshCw className="h-8 w-8 animate-spin text-brand-purple" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto p-6 max-w-4xl">
+      {/* Header */}
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold text-gray-900 flex items-center gap-3">
+          <SettingsIcon className="h-8 w-8 text-brand-purple" />
+          Settings
+        </h1>
+        <p className="text-gray-600 mt-2">
+          Manage system configuration and integrations
+        </p>
+      </div>
+
+      {/* Stripe Integration Card */}
+      <Card className="border-2 border-[var(--lavender-200)] shadow-sm">
+        <CardHeader className="bg-gradient-to-r from-[var(--lavender-100)] to-white border-b-2 border-[var(--lavender-200)]">
+          <div className="flex justify-between items-start">
+            <div>
+              <CardTitle className="flex items-center gap-2">
+                <Zap className="h-5 w-5 text-brand-purple" />
+                Stripe Integration
+              </CardTitle>
+              <CardDescription>
+                Payment processing and subscription management
+              </CardDescription>
+            </div>
+            {!isEditing && (
+              <Button
+                onClick={handleEditClick}
+                variant="outline"
+                className="border-2 border-brand-purple text-brand-purple hover:bg-[#f1eef9] rounded-full"
+              >
+                <Edit className="h-4 w-4 mr-2" />
+                Edit Settings
+              </Button>
+            )}
+          </div>
+        </CardHeader>
+
+        <CardContent className="pt-6 space-y-6">
+          {isEditing ? (
+            /* Edit Mode */
+            <div className="space-y-6">
+              {/* Secret Key Input */}
+              <div className="space-y-2">
+                <Label htmlFor="secret_key">Stripe Secret Key</Label>
+                <div className="relative">
+                  <Input
+                    id="secret_key"
+                    type={showSecretKey ? 'text' : 'password'}
+                    value={formData.secret_key}
+                    onChange={(e) => setFormData({ ...formData, secret_key: e.target.value })}
+                    placeholder="sk_test_... or sk_live_..."
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowSecretKey(!showSecretKey)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                  >
+                    {showSecretKey ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                <p className="text-xs text-gray-500">
+                  Get this from your Stripe Dashboard → Developers → API keys
+                </p>
+              </div>
+
+              {/* Webhook Secret Input */}
+              <div className="space-y-2">
+                <Label htmlFor="webhook_secret">Stripe Webhook Secret</Label>
+                <div className="relative">
+                  <Input
+                    id="webhook_secret"
+                    type={showWebhookSecret ? 'text' : 'password'}
+                    value={formData.webhook_secret}
+                    onChange={(e) => setFormData({ ...formData, webhook_secret: e.target.value })}
+                    placeholder="whsec_..."
+                    className="pr-10"
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowWebhookSecret(!showWebhookSecret)}
+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
+                  >
+                    {showWebhookSecret ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                  </button>
+                </div>
+                <p className="text-xs text-gray-500">
+                  Get this from your Stripe Dashboard → Developers → Webhooks → Add endpoint
+                </p>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
+                <Button
+                  onClick={handleCancelEdit}
+                  variant="outline"
+                  className="border-2 border-gray-300 rounded-full"
+                  disabled={saving}
+                >
+                  <X className="h-4 w-4 mr-2" />
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleSave}
+                  disabled={saving}
+                  className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
+                >
+                  {saving ? (
+                    <>
+                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                      Saving...
+                    </>
+                  ) : (
+                    <>
+                      <Save className="h-4 w-4 mr-2" />
+                      Save Settings
+                    </>
+                  )}
+                </Button>
+              </div>
+            </div>
+          ) : (
+            /* View Mode */
+            <>
+              {/* Status Display */}
+              <div className="space-y-4">
+                <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                  <div>
+                    <p className="font-semibold text-gray-900">Configuration Status</p>
+                    <p className="text-sm text-gray-600">Credentials stored in database (encrypted)</p>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {stripeStatus?.configured ? (
+                      <>
+                        <CheckCircle className="h-5 w-5 text-green-600" />
+                        <span className="text-green-600 font-semibold">Configured</span>
+                      </>
+                    ) : (
+                      <>
+                        <AlertCircle className="h-5 w-5 text-amber-600" />
+                        <span className="text-amber-600 font-semibold">Not Configured</span>
+                      </>
+                    )}
+                  </div>
+                </div>
+
+                {stripeStatus?.configured && (
+                  <>
+                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                      <div>
+                        <p className="font-semibold text-gray-900">Environment</p>
+                        <p className="text-sm text-gray-600">Detected from secret key prefix</p>
+                      </div>
+                      <span className={`px-3 py-1 rounded-full text-sm font-semibold ${
+                        stripeStatus.environment === 'live'
+                          ? 'bg-green-100 text-green-800 border-2 border-green-300'
+                          : 'bg-blue-100 text-blue-800 border-2 border-blue-300'
+                      }`}>
+                        {stripeStatus.environment === 'live' ? 'Live' : 'Test'}
+                      </span>
+                    </div>
+
+                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                      <div>
+                        <p className="font-semibold text-gray-900">Secret Key</p>
+                        <p className="text-sm text-gray-600 font-mono">
+                          {stripeStatus.secret_key_prefix}...
+                        </p>
+                      </div>
+                      <CheckCircle className="h-5 w-5 text-green-600" />
+                    </div>
+
+                    <div className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
+                      <div>
+                        <p className="font-semibold text-gray-900">Webhook Secret</p>
+                        <p className="text-sm text-gray-600">Webhook endpoint configuration</p>
+                      </div>
+                      {stripeStatus.webhook_secret_set ? (
+                        <div className="flex items-center gap-2">
+                          <CheckCircle className="h-5 w-5 text-green-600" />
+                          <span className="text-green-600 font-semibold text-sm">Set</span>
+                        </div>
+                      ) : (
+                        <div className="flex items-center gap-2">
+                          <AlertCircle className="h-5 w-5 text-amber-600" />
+                          <span className="text-amber-600 font-semibold text-sm">Not Set</span>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* Webhook URL */}
+                    <div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
+                      <div className="flex items-start justify-between gap-2">
+                        <div className="flex-1">
+                          <p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
+                            <ExternalLink className="h-4 w-4" />
+                            Webhook URL
+                          </p>
+                          <p className="text-sm text-blue-700 mb-2">
+                            Configure this webhook endpoint in your Stripe Dashboard:
+                          </p>
+                          <div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
+                            {stripeStatus.webhook_url}
+                          </div>
+                        </div>
+                        <Button
+                          onClick={() => copyToClipboard(stripeStatus.webhook_url, 'Webhook URL')}
+                          variant="outline"
+                          size="sm"
+                          className="border-blue-300 text-blue-700 hover:bg-blue-100"
+                        >
+                          <Copy className="h-4 w-4" />
+                        </Button>
+                      </div>
+                      <div className="mt-3 text-xs text-blue-600">
+                        <p className="font-semibold mb-1">Webhook Events:</p>
+                        <div className="space-y-2">
+                          <div>
+                            <p className="font-medium text-blue-700">✅ Currently Handled:</p>
+                            <ul className="list-disc list-inside ml-2">
+                              <li>checkout.session.completed - Subscription & donation payments</li>
+                            </ul>
+                          </div>
+                          <div className="opacity-70">
+                            <p className="font-medium text-blue-700">🔄 Coming Soon:</p>
+                            <ul className="list-disc list-inside ml-2">
+                              <li>invoice.payment_succeeded</li>
+                              <li>invoice.payment_failed</li>
+                              <li>customer.subscription.updated</li>
+                              <li>customer.subscription.deleted</li>
+                            </ul>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+
+              {/* Configuration Instructions (Not Configured) */}
+              {!stripeStatus?.configured && (
+                <>
+                  <div className="p-4 bg-amber-50 border-2 border-amber-200 rounded-lg">
+                    <div className="flex items-start gap-2">
+                      <AlertCircle className="h-5 w-5 text-amber-600 flex-shrink-0 mt-0.5" />
+                      <div className="text-sm">
+                        <p className="font-semibold text-amber-900 mb-2">Configuration Required</p>
+                        <p className="text-amber-700 mb-2">
+                          Click "Edit Settings" above to configure your Stripe credentials.
+                        </p>
+                        <p className="text-amber-700">
+                          Get your API keys from{' '}
+                          <a
+                            href="https://dashboard.stripe.com/apikeys"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="font-semibold underline"
+                          >
+                            Stripe Dashboard
+                          </a>
+                        </p>
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Webhook URL Info (Always visible) */}
+                  <div className="p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1">
+                        <p className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
+                          <ExternalLink className="h-4 w-4" />
+                          Webhook URL Configuration
+                        </p>
+                        <p className="text-sm text-blue-700 mb-2">
+                          After configuring your API keys, set up this webhook endpoint in your Stripe Dashboard:
+                        </p>
+                        <div className="bg-white p-2 rounded border border-blue-300 font-mono text-sm break-all">
+                          {stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe'}
+                        </div>
+                      </div>
+                      <Button
+                        onClick={() => copyToClipboard(stripeStatus?.webhook_url || 'http://localhost:8000/api/webhooks/stripe', 'Webhook URL')}
+                        variant="outline"
+                        size="sm"
+                        className="border-blue-300 text-blue-700 hover:bg-blue-100"
+                      >
+                        <Copy className="h-4 w-4" />
+                      </Button>
+                    </div>
+                    <div className="mt-3 text-xs text-blue-600">
+                      <p className="font-semibold mb-1">Webhook Events:</p>
+                      <div className="space-y-2">
+                        <div>
+                          <p className="font-medium text-blue-700">✅ Currently Handled:</p>
+                          <ul className="list-disc list-inside ml-2">
+                            <li>checkout.session.completed - Subscription & donation payments</li>
+                          </ul>
+                        </div>
+                        <div className="opacity-70">
+                          <p className="font-medium text-blue-700">🔄 Coming Soon:</p>
+                          <ul className="list-disc list-inside ml-2">
+                            <li>invoice.payment_succeeded</li>
+                            <li>invoice.payment_failed</li>
+                            <li>customer.subscription.updated</li>
+                            <li>customer.subscription.deleted</li>
+                          </ul>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {/* Test Connection Button */}
+              {stripeStatus?.configured && (
+                <div className="flex justify-end gap-3 pt-4 border-t-2 border-gray-100">
+                  <Button
+                    onClick={fetchStripeStatus}
+                    variant="outline"
+                    className="border-2 border-gray-300 rounded-full"
+                    disabled={loadingStatus}
+                  >
+                    <RefreshCw className={`h-4 w-4 mr-2 ${loadingStatus ? 'animate-spin' : ''}`} />
+                    Refresh Status
+                  </Button>
+                  <Button
+                    onClick={handleTestConnection}
+                    disabled={testing}
+                    className="bg-brand-purple hover:bg-[var(--purple-dark)] text-white rounded-full"
+                  >
+                    {testing ? (
+                      <>
+                        <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                        Testing...
+                      </>
+                    ) : (
+                      <>
+                        <Zap className="h-4 w-4 mr-2" />
+                        Test Connection
+                      </>
+                    )}
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Future Settings Sections Placeholder */}
+      <div className="mt-6 p-6 border-2 border-dashed border-gray-300 rounded-lg text-center text-gray-500">
+        <p className="text-sm">Additional settings sections will be added here</p>
+        <p className="text-xs mt-1">(Email, Storage, Notifications, etc.)</p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index 8bc4d40..d94bd76 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -5,9 +5,10 @@ import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
 import { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';
-import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2 } from 'lucide-react';
+import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2, Shield } from 'lucide-react';
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
+import ChangeRoleDialog from '../../components/ChangeRoleDialog';
 
 const AdminUserView = () => {
   const { userId } = useParams();
@@ -24,6 +25,7 @@ const AdminUserView = () => {
   const [maxFileSizeMB, setMaxFileSizeMB] = useState(50);
   const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800);
   const fileInputRef = useRef(null);
+  const [changeRoleDialogOpen, setChangeRoleDialogOpen] = useState(false);
 
   useEffect(() => {
     fetchConfig();
@@ -202,6 +204,11 @@ const AdminUserView = () => {
     return {};
   };
 
+  const handleRoleChanged = () => {
+    // Refresh user data after role change
+    fetchUserProfile();
+  };
+
   if (loading) return <div>Loading...</div>;
   if (!user) return null;
 
@@ -278,6 +285,15 @@ const AdminUserView = () => {
             {resetPasswordLoading ? 'Resetting...' : 'Reset Password'}
           </Button>
 
+          <Button
+            onClick={() => setChangeRoleDialogOpen(true)}
+            variant="outline"
+            className="border-2 border-brand-purple text-brand-purple hover:bg-[var(--lavender-300)] rounded-full px-4 py-2"
+          >
+            <Shield className="h-4 w-4 mr-2" />
+            Change Role
+          </Button>
+
           {!user.email_verified && (
             <Button
               onClick={handleResendVerificationRequest}
@@ -476,6 +492,14 @@ const AdminUserView = () => {
         loading={resetPasswordLoading || resendVerificationLoading}
         {...getActionMessage()}
       />
+
+      {/* Change Role Dialog */}
+      <ChangeRoleDialog
+        open={changeRoleDialogOpen}
+        onClose={() => setChangeRoleDialogOpen(false)}
+        user={user}
+        onSuccess={handleRoleChanged}
+      />
     </>
   );
 };
-- 
2.39.5


From c79db66739022f3d8c618800f069df87ab46db9d Mon Sep 17 00:00:00 2001
From: Koncept Kit <63216427+konceptkit@users.noreply.github.com>
Date: Tue, 20 Jan 2026 23:52:35 +0700
Subject: [PATCH 14/21] - Details Column - Expandable chevron button for each
 row- Expandable Transaction Details - Click chevron to show/hide details-
 Payment Information Section:- Stripe Transaction IDs Section- Copy to
 Clipboard - One-click copy for all transaction IDs- Update Stripe webhook
 event permission on Stripe Config page.

---
 src/pages/admin/AdminDonations.js     | 256 ++++++++++++++++----
 src/pages/admin/AdminSettings.js      |  36 ++-
 src/pages/admin/AdminSubscriptions.js | 327 +++++++++++++++++++++-----
 3 files changed, 503 insertions(+), 116 deletions(-)

diff --git a/src/pages/admin/AdminDonations.js b/src/pages/admin/AdminDonations.js
index 248ecc5..4e53094 100644
--- a/src/pages/admin/AdminDonations.js
+++ b/src/pages/admin/AdminDonations.js
@@ -28,7 +28,13 @@ import {
   Loader2,
   Download,
   FileDown,
-  Calendar
+  Calendar,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Copy,
+  CreditCard,
+  Info
 } from 'lucide-react';
 
 const AdminDonations = () => {
@@ -43,6 +49,7 @@ const AdminDonations = () => {
   const [statusFilter, setStatusFilter] = useState('all');
   const [startDate, setStartDate] = useState('');
   const [endDate, setEndDate] = useState('');
+  const [expandedRows, setExpandedRows] = useState(new Set());
 
   useEffect(() => {
     fetchData();
@@ -157,6 +164,27 @@ const AdminDonations = () => {
     });
   };
 
+  const toggleRowExpansion = (donationId) => {
+    setExpandedRows((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(donationId)) {
+        newExpanded.delete(donationId);
+      } else {
+        newExpanded.add(donationId);
+      }
+      return newExpanded;
+    });
+  };
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch (error) {
+      toast.error('Failed to copy to clipboard');
+    }
+  };
+
   const getStatusBadgeVariant = (status) => {
     const variants = {
       completed: 'default',
@@ -385,12 +413,15 @@ const AdminDonations = () => {
                 <th className="px-6 py-4 text-left text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Payment Method
                 </th>
+                <th className="px-6 py-4 text-center text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Details
+                </th>
               </tr>
             </thead>
             <tbody className="divide-y divide-[var(--neutral-800)]">
               {filteredDonations.length === 0 ? (
                 <tr>
-                  <td colSpan="6" className="px-6 py-12 text-center">
+                  <td colSpan="7" className="px-6 py-12 text-center">
                     <div className="flex flex-col items-center gap-3">
                       <Heart className="h-12 w-12 text-[var(--neutral-800)]" />
                       <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
@@ -400,51 +431,182 @@ const AdminDonations = () => {
                   </td>
                 </tr>
               ) : (
-                filteredDonations.map((donation) => (
-                  <tr key={donation.id} className="hover:bg-[var(--lavender-400)] transition-colors">
-                    <td className="px-6 py-4">
-                      <div>
-                        <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                          {donation.donor_name || 'Anonymous'}
-                        </p>
-                        <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {donation.donor_email || 'No email'}
-                        </p>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      <Badge
-                        className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
-                        style={{ fontFamily: "'Inter', sans-serif" }}
-                      >
-                        {donation.donation_type === 'member' ? 'Member' : 'Public'}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4">
-                      <p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {donation.amount}
-                      </p>
-                    </td>
-                    <td className="px-6 py-4">
-                      <Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
-                        {donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
-                      </Badge>
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-2 text-brand-purple ">
-                        <Calendar className="h-4 w-4" />
-                        <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {formatDate(donation.created_at)}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {donation.payment_method || 'N/A'}
-                      </p>
-                    </td>
-                  </tr>
-                ))
+                filteredDonations.map((donation) => {
+                  const isExpanded = expandedRows.has(donation.id);
+                  return (
+                    <React.Fragment key={donation.id}>
+                      <tr className="hover:bg-[var(--lavender-400)] transition-colors">
+                        <td className="px-6 py-4">
+                          <div>
+                            <p className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                              {donation.donor_name || 'Anonymous'}
+                            </p>
+                            <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              {donation.donor_email || 'No email'}
+                            </p>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4">
+                          <Badge
+                            className={`${getTypeBadgeColor(donation.donation_type)} text-white border-none rounded-full px-3 py-1`}
+                            style={{ fontFamily: "'Inter', sans-serif" }}
+                          >
+                            {donation.donation_type === 'member' ? 'Member' : 'Public'}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-4">
+                          <p className="font-semibold text-[var(--purple-ink)] text-lg" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {donation.amount}
+                          </p>
+                        </td>
+                        <td className="px-6 py-4">
+                          <Badge variant={getStatusBadgeVariant(donation.status)} className="rounded-full">
+                            {donation.status.charAt(0).toUpperCase() + donation.status.slice(1)}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-4">
+                          <div className="flex items-center gap-2 text-brand-purple ">
+                            <Calendar className="h-4 w-4" />
+                            <span style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                              {formatDate(donation.created_at)}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4">
+                          <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            {donation.payment_method || 'N/A'}
+                          </p>
+                        </td>
+                        <td className="px-6 py-4 text-center">
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            onClick={() => toggleRowExpansion(donation.id)}
+                            className="text-brand-purple hover:bg-[var(--neutral-800)]"
+                          >
+                            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+                          </Button>
+                        </td>
+                      </tr>
+                      {/* Expandable Details Row */}
+                      {isExpanded && (
+                        <tr className="bg-[var(--lavender-400)]/30">
+                          <td colSpan="7" className="px-6 py-6">
+                            <div className="space-y-4">
+                              <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Transaction Details
+                              </h4>
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {/* Payment Information */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <CreditCard className="h-4 w-4" />
+                                    Payment Information
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {donation.payment_completed_at && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Date:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{formatDate(donation.payment_completed_at)}</span>
+                                      </div>
+                                    )}
+                                    {donation.payment_method && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Method:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium capitalize">{donation.payment_method}</span>
+                                      </div>
+                                    )}
+                                    {donation.card_brand && donation.card_last4 && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Card:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{donation.card_brand} ****{donation.card_last4}</span>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {/* Stripe Transaction IDs */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <Info className="h-4 w-4" />
+                                    Stripe Transaction IDs
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {donation.stripe_payment_intent_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Payment Intent:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_payment_intent_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_payment_intent_id, 'Payment Intent ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_charge_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Charge ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_charge_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_charge_id, 'Charge ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_customer_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Customer ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {donation.stripe_customer_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(donation.stripe_customer_id, 'Customer ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {donation.stripe_receipt_url && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Receipt:</span>
+                                        <Button
+                                          size="sm"
+                                          variant="outline"
+                                          onClick={() => window.open(donation.stripe_receipt_url, '_blank')}
+                                          className="text-brand-purple hover:bg-[var(--neutral-800)]"
+                                        >
+                                          <ExternalLink className="h-3 w-3 mr-1" />
+                                          View Receipt
+                                        </Button>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })
               )}
             </tbody>
           </table>
diff --git a/src/pages/admin/AdminSettings.js b/src/pages/admin/AdminSettings.js
index 6967086..5d106c6 100644
--- a/src/pages/admin/AdminSettings.js
+++ b/src/pages/admin/AdminSettings.js
@@ -342,16 +342,26 @@ export default function AdminSettings() {
                         </Button>
                       </div>
                       <div className="mt-3 text-xs text-blue-600">
-                        <p className="font-semibold mb-1">Webhook Events:</p>
+                        <p className="font-semibold mb-1">Webhook Events to Configure:</p>
                         <div className="space-y-2">
                           <div>
-                            <p className="font-medium text-blue-700">✅ Currently Handled:</p>
+                            <p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
                             <ul className="list-disc list-inside ml-2">
-                              <li>checkout.session.completed - Subscription & donation payments</li>
+                              <li>checkout.session.completed - Handles subscriptions & donations</li>
                             </ul>
                           </div>
+                          <div className="opacity-80">
+                            <p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
+                            <ul className="list-disc list-inside ml-2 text-xs">
+                              <li>payment_intent.created</li>
+                              <li>payment_intent.succeeded</li>
+                              <li>charge.succeeded</li>
+                              <li>charge.updated</li>
+                            </ul>
+                            <p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
+                          </div>
                           <div className="opacity-70">
-                            <p className="font-medium text-blue-700">🔄 Coming Soon:</p>
+                            <p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
                             <ul className="list-disc list-inside ml-2">
                               <li>invoice.payment_succeeded</li>
                               <li>invoice.payment_failed</li>
@@ -417,16 +427,26 @@ export default function AdminSettings() {
                       </Button>
                     </div>
                     <div className="mt-3 text-xs text-blue-600">
-                      <p className="font-semibold mb-1">Webhook Events:</p>
+                      <p className="font-semibold mb-1">Webhook Events to Configure:</p>
                       <div className="space-y-2">
                         <div>
-                          <p className="font-medium text-blue-700">✅ Currently Handled:</p>
+                          <p className="font-medium text-blue-700">✅ Required (Configure in Stripe):</p>
                           <ul className="list-disc list-inside ml-2">
-                            <li>checkout.session.completed - Subscription & donation payments</li>
+                            <li>checkout.session.completed - Handles subscriptions & donations</li>
                           </ul>
                         </div>
+                        <div className="opacity-80">
+                          <p className="font-medium text-blue-700">🔔 Automatically Triggered:</p>
+                          <ul className="list-disc list-inside ml-2 text-xs">
+                            <li>payment_intent.created</li>
+                            <li>payment_intent.succeeded</li>
+                            <li>charge.succeeded</li>
+                            <li>charge.updated</li>
+                          </ul>
+                          <p className="text-xs italic mt-1">These fire automatically with checkout.session.completed</p>
+                        </div>
                         <div className="opacity-70">
-                          <p className="font-medium text-blue-700">🔄 Coming Soon:</p>
+                          <p className="font-medium text-blue-700">🔄 Coming Soon (Recurring Subscriptions):</p>
                           <ul className="list-disc list-inside ml-2">
                             <li>invoice.payment_succeeded</li>
                             <li>invoice.payment_failed</li>
diff --git a/src/pages/admin/AdminSubscriptions.js b/src/pages/admin/AdminSubscriptions.js
index bb0e4c5..815580d 100644
--- a/src/pages/admin/AdminSubscriptions.js
+++ b/src/pages/admin/AdminSubscriptions.js
@@ -35,7 +35,11 @@ import {
   Download,
   FileDown,
   AlertTriangle,
-  Info
+  Info,
+  ChevronDown,
+  ChevronUp,
+  ExternalLink,
+  Copy
 } from 'lucide-react';
 import {
   DropdownMenu,
@@ -55,6 +59,7 @@ const AdminSubscriptions = () => {
   const [statusFilter, setStatusFilter] = useState('all');
   const [planFilter, setPlanFilter] = useState('all');
   const [exporting, setExporting] = useState(false);
+  const [expandedRows, setExpandedRows] = useState(new Set());
 
   // Edit subscription dialog state
   const [editDialogOpen, setEditDialogOpen] = useState(false);
@@ -265,6 +270,38 @@ Proceed with activation?`;
     });
   };
 
+  const formatDateTime = (dateString) => {
+    if (!dateString) return 'N/A';
+    return new Date(dateString).toLocaleString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit'
+    });
+  };
+
+  const toggleRowExpansion = (subscriptionId) => {
+    setExpandedRows((prev) => {
+      const newExpanded = new Set(prev);
+      if (newExpanded.has(subscriptionId)) {
+        newExpanded.delete(subscriptionId);
+      } else {
+        newExpanded.add(subscriptionId);
+      }
+      return newExpanded;
+    });
+  };
+
+  const copyToClipboard = async (text, label) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      toast.success(`${label} copied to clipboard`);
+    } catch (error) {
+      toast.error('Failed to copy to clipboard');
+    }
+  };
+
   const getStatusBadgeVariant = (status) => {
     const variants = {
       active: 'default',
@@ -566,6 +603,9 @@ Proceed with activation?`;
                 <th className="text-right p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Total
                 </th>
+                <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
+                  Details
+                </th>
                 <th className="text-center p-4 text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Inter', sans-serif" }}>
                   Actions
                 </th>
@@ -573,73 +613,238 @@ Proceed with activation?`;
             </thead>
             <tbody>
               {filteredSubscriptions.length > 0 ? (
-                filteredSubscriptions.map((sub) => (
-                  <tr key={sub.id} className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
-                    <td className="p-4">
-                      <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {sub.user.first_name} {sub.user.last_name}
-                      </div>
-                      <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {sub.user.email}
-                      </div>
-                    </td>
-                    <td className="p-4">
-                      <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {sub.plan.name}
-                      </div>
-                      <div className="text-xs text-brand-purple ">
-                        {sub.plan.billing_cycle}
-                      </div>
-                    </td>
-                    <td className="p-4">
-                      <Badge variant={getStatusBadgeVariant(sub.status)}>
-                        {sub.status}
-                      </Badge>
-                    </td>
-                    <td className="p-4">
-                      <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        <div>{formatDate(sub.start_date)}</div>
-                        <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
-                      </div>
-                    </td>
-                    <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      {formatPrice(sub.base_subscription_cents || 0)}
-                    </td>
-                    <td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      {formatPrice(sub.donation_cents || 0)}
-                    </td>
-                    <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                      {formatPrice(sub.amount_paid_cents || 0)}
-                    </td>
-                    <td className="p-4">
-                      <div className="flex items-center justify-center gap-2">
-                        {hasPermission('subscriptions.edit') && (
+                filteredSubscriptions.map((sub) => {
+                  const isExpanded = expandedRows.has(sub.id);
+                  return (
+                    <React.Fragment key={sub.id}>
+                      <tr className="border-b border-[var(--neutral-800)] hover:bg-[var(--lavender-400)] transition-colors">
+                        <td className="p-4">
+                          <div className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {sub.user.first_name} {sub.user.last_name}
+                          </div>
+                          <div className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            {sub.user.email}
+                          </div>
+                        </td>
+                        <td className="p-4">
+                          <div className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            {sub.plan.name}
+                          </div>
+                          <div className="text-xs text-brand-purple ">
+                            {sub.plan.billing_cycle}
+                          </div>
+                        </td>
+                        <td className="p-4">
+                          <Badge variant={getStatusBadgeVariant(sub.status)}>
+                            {sub.status}
+                          </Badge>
+                        </td>
+                        <td className="p-4">
+                          <div className="text-sm text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <div>{formatDate(sub.start_date)}</div>
+                            <div className="text-xs text-brand-purple ">to {formatDate(sub.end_date)}</div>
+                          </div>
+                        </td>
+                        <td className="p-4 text-right text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          {formatPrice(sub.base_subscription_cents || 0)}
+                        </td>
+                        <td className="p-4 text-right text-[var(--orange-light)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          {formatPrice(sub.donation_cents || 0)}
+                        </td>
+                        <td className="p-4 text-right font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                          {formatPrice(sub.amount_paid_cents || 0)}
+                        </td>
+                        <td className="p-4">
                           <Button
                             size="sm"
-                            variant="outline"
-                            onClick={() => handleEdit(sub)}
+                            variant="ghost"
+                            onClick={() => toggleRowExpansion(sub.id)}
                             className="text-brand-purple  hover:bg-[var(--neutral-800)]"
                           >
-                            <Edit className="h-4 w-4" />
+                            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
                           </Button>
-                        )}
-                        {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
-                          <Button
-                            size="sm"
-                            variant="outline-destructive"
-                            onClick={() => handleCancelSubscription(sub.id)}
-                            className=""
-                          >
-                            <XCircle className="h-4 w-4" />
-                          </Button>
-                        )}
-                      </div>
-                    </td>
-                  </tr>
-                ))
+                        </td>
+                        <td className="p-4">
+                          <div className="flex items-center justify-center gap-2">
+                            {hasPermission('subscriptions.edit') && (
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => handleEdit(sub)}
+                                className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+                              >
+                                <Edit className="h-4 w-4" />
+                              </Button>
+                            )}
+                            {sub.status === 'active' && hasPermission('subscriptions.cancel') && (
+                              <Button
+                                size="sm"
+                                variant="outline-destructive"
+                                onClick={() => handleCancelSubscription(sub.id)}
+                                className=""
+                              >
+                                <XCircle className="h-4 w-4" />
+                              </Button>
+                            )}
+                          </div>
+                        </td>
+                      </tr>
+                      {/* Expandable Details Row */}
+                      {isExpanded && (
+                        <tr className="bg-[var(--lavender-400)]/30">
+                          <td colSpan="9" className="p-6">
+                            <div className="space-y-4">
+                              <h4 className="font-semibold text-[var(--purple-ink)] text-lg mb-4" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                Transaction Details
+                              </h4>
+                              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                {/* Payment Information */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <CreditCard className="h-4 w-4" />
+                                    Payment Information
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {sub.payment_completed_at && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Date:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{formatDateTime(sub.payment_completed_at)}</span>
+                                      </div>
+                                    )}
+                                    {sub.payment_method && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Payment Method:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium capitalize">{sub.payment_method}</span>
+                                      </div>
+                                    )}
+                                    {sub.card_brand && sub.card_last4 && (
+                                      <div className="flex justify-between">
+                                        <span className="text-brand-purple ">Card:</span>
+                                        <span className="text-[var(--purple-ink)] font-medium">{sub.card_brand} ****{sub.card_last4}</span>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+
+                                {/* Stripe Transaction IDs */}
+                                <div className="space-y-3">
+                                  <h5 className="font-medium text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                    <Info className="h-4 w-4" />
+                                    Stripe Transaction IDs
+                                  </h5>
+                                  <div className="space-y-2 text-sm">
+                                    {sub.stripe_payment_intent_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Payment Intent:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_payment_intent_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_payment_intent_id, 'Payment Intent ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_charge_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Charge ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_charge_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_charge_id, 'Charge ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_subscription_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Subscription ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_subscription_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_subscription_id, 'Subscription ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_invoice_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Invoice ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_invoice_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_invoice_id, 'Invoice ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_customer_id && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Customer ID:</span>
+                                        <div className="flex items-center gap-1">
+                                          <code className="text-xs bg-[var(--neutral-800)]/30 px-2 py-1 rounded text-[var(--purple-ink)]">
+                                            {sub.stripe_customer_id.substring(0, 20)}...
+                                          </code>
+                                          <Button
+                                            size="sm"
+                                            variant="ghost"
+                                            onClick={() => copyToClipboard(sub.stripe_customer_id, 'Customer ID')}
+                                          >
+                                            <Copy className="h-3 w-3" />
+                                          </Button>
+                                        </div>
+                                      </div>
+                                    )}
+                                    {sub.stripe_receipt_url && (
+                                      <div className="flex items-center justify-between gap-2">
+                                        <span className="text-brand-purple ">Receipt:</span>
+                                        <Button
+                                          size="sm"
+                                          variant="outline"
+                                          onClick={() => window.open(sub.stripe_receipt_url, '_blank')}
+                                          className="text-brand-purple  hover:bg-[var(--neutral-800)]"
+                                        >
+                                          <ExternalLink className="h-3 w-3 mr-1" />
+                                          View Receipt
+                                        </Button>
+                                      </div>
+                                    )}
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </td>
+                        </tr>
+                      )}
+                    </React.Fragment>
+                  );
+                })
               ) : (
                 <tr>
-                  <td colSpan="8" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                  <td colSpan="9" className="p-12 text-center text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                     No subscriptions found
                   </td>
                 </tr>
-- 
2.39.5


From 3822ba8ffb8f950fa5f2d3e29c10ae14b989de98 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 20 Jan 2026 12:33:17 -0600
Subject: [PATCH 15/21] feat: add member since date handling across admin and
 member views

---
 src/pages/Dashboard.js                |  3 +-
 src/pages/admin/AdminMembers.js       | 21 +++++----
 src/pages/admin/AdminStaff.js         | 21 +++++----
 src/pages/admin/AdminUserView.js      | 65 ++++++++++++++++++++++++++-
 src/pages/members/MembersDirectory.js | 13 +++---
 5 files changed, 98 insertions(+), 25 deletions(-)

diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index 1b4f052..eb9429a 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -17,6 +17,7 @@ const Dashboard = () => {
   const [resendLoading, setResendLoading] = useState(false);
   const [eventActivity, setEventActivity] = useState(null);
   const [activityLoading, setActivityLoading] = useState(true);
+  const joinedDate = user?.member_since || user?.created_at;
 
   useEffect(() => {
     fetchUpcomingEvents();
@@ -197,7 +198,7 @@ const Dashboard = () => {
               <div>
                 <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</p>
                 <p className="text-[var(--purple-ink)] font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                  {user?.created_at ? new Date(user.created_at).toLocaleDateString() : 'N/A'}
+                  {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}
                 </p>
               </div>
               {user?.subscription_start_date && user?.subscription_end_date && (
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 5a2d181..1091f80 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -385,13 +385,15 @@ const AdminMembers = () => {
         </div>
       ) : filteredUsers.length > 0 ? (
         <div className="space-y-4">
-          {filteredUsers.map((user) => (
-            <Card
-              key={user.id}
-              className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
-              data-testid={`member-card-${user.id}`}
-            >
-              <div className="flex justify-between items-start flex-wrap gap-4">
+          {filteredUsers.map((user) => {
+            const joinedDate = user.member_since || user.created_at;
+            return (
+              <Card
+                key={user.id}
+                className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
+                data-testid={`member-card-${user.id}`}
+              >
+                <div className="flex justify-between items-start flex-wrap gap-4">
                 <div className="flex items-start gap-4 flex-1">
                   {/* Avatar */}
                   <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
@@ -409,7 +411,7 @@ const AdminMembers = () => {
                     <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                       <p>Email: {user.email}</p>
                       <p>Phone: {user.phone}</p>
-                      <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                      <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                       {user.referred_by_member_name && (
                         <p>Referred by: {user.referred_by_member_name}</p>
                       )}
@@ -523,7 +525,8 @@ const AdminMembers = () => {
                 </div>
               </div>
             </Card>
-          ))}
+            );
+          })}
         </div>
       ) : (
         <div className="text-center py-20">
diff --git a/src/pages/admin/AdminStaff.js b/src/pages/admin/AdminStaff.js
index e484e69..046a681 100644
--- a/src/pages/admin/AdminStaff.js
+++ b/src/pages/admin/AdminStaff.js
@@ -242,12 +242,14 @@ const AdminStaff = () => {
             </div>
           ) : filteredUsers.length > 0 ? (
             <div className="space-y-4">
-              {filteredUsers.map((user) => (
-                <Card
-                  key={user.id}
-                  className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
-                  data-testid={`staff-card-${user.id}`}
-                >
+              {filteredUsers.map((user) => {
+                const joinedDate = user.member_since || user.created_at;
+                return (
+                  <Card
+                    key={user.id}
+                    className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)] hover:shadow-md transition-shadow"
+                    data-testid={`staff-card-${user.id}`}
+                  >
                   <div className="flex justify-between items-start flex-wrap gap-4">
                     <div className="flex items-start gap-4 flex-1">
                       {/* Avatar */}
@@ -267,7 +269,7 @@ const AdminStaff = () => {
                         <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
                           <p>Email: {user.email}</p>
                           <p>Phone: {user.phone}</p>
-                          <p>Joined: {new Date(user.created_at).toLocaleDateString()}</p>
+                          <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
                           {user.last_login && (
                             <p>Last Login: {new Date(user.last_login).toLocaleDateString()}</p>
                           )}
@@ -321,8 +323,9 @@ const AdminStaff = () => {
                       )}
                     </div>
                   </div>
-                </Card>
-              ))}
+                  </Card>
+                );
+              })}
             </div>
           ) : (
             <div className="text-center py-20">
diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index d94bd76..d20c48d 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -5,6 +5,7 @@ import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
 import { Avatar, AvatarImage, AvatarFallback } from '../../components/ui/avatar';
+import { Input } from '../../components/ui/input';
 import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera, Upload, Trash2, Shield } from 'lucide-react';
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
@@ -24,15 +25,31 @@ const AdminUserView = () => {
   const [uploadingPhoto, setUploadingPhoto] = useState(false);
   const [maxFileSizeMB, setMaxFileSizeMB] = useState(50);
   const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800);
+  const [memberSince, setMemberSince] = useState('');
+  const [memberSinceSaving, setMemberSinceSaving] = useState(false);
   const fileInputRef = useRef(null);
   const [changeRoleDialogOpen, setChangeRoleDialogOpen] = useState(false);
 
+  const formatDateInputValue = (value) => {
+    if (!value) return '';
+    if (typeof value === 'string') {
+      return value.slice(0, 10);
+    }
+    return new Date(value).toISOString().slice(0, 10);
+  };
+
   useEffect(() => {
     fetchConfig();
     fetchUserProfile();
     fetchSubscriptions();
   }, [userId]);
 
+  useEffect(() => {
+    if (user) {
+      setMemberSince(formatDateInputValue(user.member_since));
+    }
+  }, [user]);
+
   const fetchUserProfile = async () => {
     try {
       const response = await api.get(`/admin/users/${userId}`);
@@ -177,6 +194,27 @@ const AdminUserView = () => {
     }
   };
 
+  const handleMemberSinceSave = async () => {
+    if (!user) return;
+    setMemberSinceSaving(true);
+    try {
+      const payload = {
+        member_since: memberSince ? memberSince : null
+      };
+      const response = await api.put(`/admin/users/${userId}`, payload);
+      setUser(prev => ({
+        ...prev,
+        ...(response?.data || {}),
+        member_since: payload.member_since
+      }));
+      toast.success('Member since updated successfully');
+    } catch (error) {
+      toast.error(error.response?.data?.detail || 'Failed to update member since');
+    } finally {
+      setMemberSinceSaving(false);
+    }
+  };
+
   const getActionMessage = () => {
     if (!pendingAction || !user) return {};
 
@@ -212,6 +250,10 @@ const AdminUserView = () => {
   if (loading) return <div>Loading...</div>;
   if (!user) return null;
 
+  const joinedDate = user.member_since || user.created_at;
+  const memberSinceBaseline = formatDateInputValue(user.member_since);
+  const memberSinceHasChanges = memberSince !== memberSinceBaseline;
+
   return (
     <>
       {/* Back Button */}
@@ -262,7 +304,7 @@ const AdminUserView = () => {
               </div>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
-                <span>Joined {new Date(user.created_at).toLocaleDateString()}</span>
+                <span>Joined {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</span>
               </div>
             </div>
           </div>
@@ -363,6 +405,27 @@ const AdminUserView = () => {
             </p>
           </div>
 
+          <div>
+            <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Member Since</label>
+            <div className="mt-1 flex flex-wrap items-center gap-2">
+              <Input
+                type="date"
+                value={memberSince}
+                onChange={(e) => setMemberSince(e.target.value)}
+                className="max-w-[200px] border-[var(--neutral-800)]"
+              />
+              <Button
+                type="button"
+                size="sm"
+                onClick={handleMemberSinceSave}
+                disabled={memberSinceSaving || !memberSinceHasChanges}
+                className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+              >
+                {memberSinceSaving ? 'Saving...' : 'Save'}
+              </Button>
+            </div>
+          </div>
+
           {user.partner_first_name && (
             <div>
               <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Partner</label>
diff --git a/src/pages/members/MembersDirectory.js b/src/pages/members/MembersDirectory.js
index 5d17b86..31bd3d3 100644
--- a/src/pages/members/MembersDirectory.js
+++ b/src/pages/members/MembersDirectory.js
@@ -118,8 +118,10 @@ const MembersDirectory = () => {
         : <div className=' border-2 w-full border-brand-purple  mb-24' />
     )
   }
-  const MemberCard = ({ member }) => (
-    <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
+  const MemberCard = ({ member }) => {
+    const joinedDate = member.member_since || member.created_at;
+    return (
+      <Card className="p-6 bg-background rounded-3xl border border-[var(--neutral-800)] hover:shadow-lg transition-all h-full">
       {/* Profile Photo */}
       <div className="flex justify-center mb-4">
         {member.profile_photo_url ? (
@@ -160,11 +162,11 @@ const MembersDirectory = () => {
       )}
 
       {/* Member Since */}
-      {member.created_at && (
+      {joinedDate && (
         <div className="flex items-center justify-center gap-2 mb-4">
           <Calendar className="h-4 w-4 text-brand-purple " />
           <span className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-            Member since {new Date(member.created_at).toLocaleDateString('en-US', {
+            Member since {new Date(joinedDate).toLocaleDateString('en-US', {
               month: 'long',
               year: 'numeric'
             })}
@@ -276,7 +278,8 @@ const MembersDirectory = () => {
         </Button>
       </div>
     </Card>
-  );
+    );
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-bl from-[var(--neutral-100:)] to-[var(--neutral-800)]">
-- 
2.39.5


From c73ebfb6c0b4bf594db827bab04d01de640f966d Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 20 Jan 2026 14:43:17 -0600
Subject: [PATCH 16/21] feat: implement StatCard component and integrate it
 into AdminDashboard and AdminMembers for improved stats display

---
 src/components/StatCard.jsx       |  36 ++++
 src/components/ui/card.jsx        |  57 ++++--
 src/pages/admin/AdminDashboard.js |  88 ++++-----
 src/pages/admin/AdminMembers.js   | 315 ++++++++++++++++--------------
 4 files changed, 278 insertions(+), 218 deletions(-)
 create mode 100644 src/components/StatCard.jsx

diff --git a/src/components/StatCard.jsx b/src/components/StatCard.jsx
new file mode 100644
index 0000000..e6a0f8b
--- /dev/null
+++ b/src/components/StatCard.jsx
@@ -0,0 +1,36 @@
+import React from "react";
+import { Card } from "./ui/card";
+
+export const StatCard = ({
+  title,
+  value,
+  icon: Icon,
+  iconBgClass,
+  dataTestId,
+}) => (
+  <Card
+    className="p-6 flex flex-col justify-between bg-background rounded-2xl border border-[var(--neutral-800)]"
+    data-testid={dataTestId}
+  >
+    <div className="flex items-start gap-4 mb-4 ">
+      <div className={`${iconBgClass} p-3 rounded-lg `}>
+        <Icon className="size-8" />
+      </div>
+
+      <div className="space-y-8">
+        <p
+          className="text-6xl font-semibold text-[var(--purple-ink)] mb-1"
+          style={{ fontFamily: "'Inter', sans-serif" }}
+        >
+          {value}
+        </p>
+      </div>
+    </div>
+    <p
+      className="text-sm text-brand-purple "
+      style={{ fontFamily: "'Nunito Sans', sans-serif" }}
+    >
+      {title}
+    </p>
+  </Card>
+);
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.jsx
index 2985cca..853f881 100644
--- a/src/components/ui/card.jsx
+++ b/src/components/ui/card.jsx
@@ -1,50 +1,65 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
-    {...props} />
-))
-Card.displayName = "Card"
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className,
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props} />
-))
-CardHeader.displayName = "CardHeader"
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props} />
-))
-CardTitle.displayName = "CardTitle"
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
-    {...props} />
-))
-CardDescription.displayName = "CardDescription"
+    {...props}
+  />
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex items-center p-6 pt-0", className)}
-    {...props} />
-))
-CardFooter.displayName = "CardFooter"
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/src/pages/admin/AdminDashboard.js b/src/pages/admin/AdminDashboard.js
index 6c2d934..fef95b2 100644
--- a/src/pages/admin/AdminDashboard.js
+++ b/src/pages/admin/AdminDashboard.js
@@ -4,13 +4,16 @@ import api from '../../utils/api';
 import { Card } from '../../components/ui/card';
 import { Button } from '../../components/ui/button';
 import { Badge } from '../../components/ui/badge';
-import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle, Globe } from 'lucide-react';
+import { Users, Calendar, Clock, CheckCircle, Mail, AlertCircle, Globe, CircleMinus } from 'lucide-react';
+import { StatCard } from '../../components/StatCard';
+
 
 const AdminDashboard = () => {
   const [stats, setStats] = useState({
     totalMembers: 0,
     pendingValidations: 0,
-    activeMembers: 0
+    activeMembers: 0,
+    inactiveMembers: 0
   });
   const [usersNeedingAttention, setUsersNeedingAttention] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -29,7 +32,8 @@ const AdminDashboard = () => {
         pendingValidations: users.filter(u =>
           ['pending_email', 'pending_validation', 'pre_validated', 'payment_pending'].includes(u.status)
         ).length,
-        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length
+        activeMembers: users.filter(u => u.status === 'active' && u.role === 'member').length,
+        inactiveMembers: users.filter(u => u.status === 'inactive' && u.role === 'member').length
       });
 
       // Find users who have received 3+ reminders (may need personal outreach)
@@ -76,52 +80,42 @@ const AdminDashboard = () => {
       </div>
 
       {/* Stats Grid */}
-      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-total-users">
-          <div className='flex items-start justify-between'>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {loading ? '-' : stats.totalMembers}
-            </p>
-            <div className="flex items-start justify-between mb-4">
-              <div className="bg-[var(--neutral-800)]/20 p-3 rounded-lg">
-                <Users className="h-6 w-6 text-brand-purple" />
-              </div>
-            </div>
 
-          </div>
-          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-        </Card>
+      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+          Quick Overview
+        </div>
+        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8  ">
+          <StatCard
+            title="Total Members"
+            value={loading ? '-' : stats.totalMembers}
+            icon={Users}
+            iconBgClass="text-brand-purple"
+            dataTestId="stat-total-users"
+          />
+          <StatCard
+            title="Pending Validations"
+            value={loading ? '-' : stats.pendingValidations}
+            icon={Clock}
+            iconBgClass="text-brand-light-orange"
+            dataTestId="stat-total-users"
+          />
+          <StatCard
+            title="Active Members"
+            value={loading ? '-' : stats.activeMembers}
+            icon={CheckCircle}
+            iconBgClass="text-[var(--green-light)]"
+            dataTestId="stat-total-users"
+          />
+          <StatCard
+            title="Inactive Members"
+            value={loading ? '-' : stats.inactiveMembers}
+            icon={CircleMinus}
+            iconBgClass="text-brand-pink"
+            dataTestId="stat-total-users"
+          />
 
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-pending-validations">
-          <div className='flex items-start justify-between'>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {loading ? '-' : stats.pendingValidations}
-            </p>
-            <div className="flex items-start justify-between mb-4">
-              <div className=" p-3 rounded-lg">
-                <Clock className="h-6 w-6 text-orange-600" />
-              </div>
-            </div>
-
-          </div>
-
-          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Pending Validations</p>
-        </Card>
-
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]" data-testid="stat-active-members">
-          <div className='flex items-start justify-between'>
-            <p className="text-3xl font-semibold text-[var(--purple-ink)] mb-1" style={{ fontFamily: "'Inter', sans-serif" }}>
-              {loading ? '-' : stats.activeMembers}
-            </p>
-            <div className="flex items-start justify-between mb-4">
-              <div className="bg-[var(--green-light)]/20 p-3 rounded-lg">
-                <CheckCircle className="h-6 w-6 text-[var(--green-light)]" />
-              </div>
-            </div>
-
-          </div>
-          <p className="text-sm text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active Members</p>
-        </Card>
+        </div>
       </div>
 
       {/* Quick Actions */}
diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 1091f80..39614ba 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -14,12 +14,13 @@ import {
   DropdownMenuTrigger,
 } from '../../components/ui/dropdown-menu';
 import { toast } from 'sonner';
-import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircle, Clock, Mail, UserPlus, Upload, Download, FileDown, ChevronDown } from 'lucide-react';
+import { Users, Search, User, CreditCard, Eye, CheckCircle, Calendar, AlertCircle, Clock, Mail, UserPlus, Upload, Download, FileDown, ChevronDown, CircleMinus } from 'lucide-react';
 import PaymentActivationDialog from '../../components/PaymentActivationDialog';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import CreateMemberDialog from '../../components/CreateMemberDialog';
 import InviteStaffDialog from '../../components/InviteStaffDialog';
 import WordPressImportWizard from '../../components/WordPressImportWizard';
+import { StatCard } from '@/components/StatCard';
 
 const AdminMembers = () => {
   const navigate = useNavigate();
@@ -319,31 +320,45 @@ const AdminMembers = () => {
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Members</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Active</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'active').length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Pending</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'payment_pending').length}
-          </p>
-        </Card>
-        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
-          <p className="text-sm text-brand-purple dark:text-brand-lavender mb-2" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Inactive</p>
-          <p className="text-4xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-            {users.filter(u => u.status === 'inactive').length}
-          </p>
-        </Card>
+      <div className='rounded-3xl bg-brand-lavender/10 p-8 mb-8'>
+        <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
+          Quick Overview
+        </div>
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+
+
+          <StatCard
+            title="Total Members"
+            value={users.length}
+            icon={Users}
+            iconBgClass="bg-[var(--blue-light)] text-[var(--blue-dark)]"
+            dataTestId="stat-total-members"
+          />
+          <StatCard
+            title="Active"
+            value={users.filter(u => u.status === 'active').length}
+            icon={CheckCircle}
+            iconBgClass="text-[var(--green-light)]"
+            dataTestId="stat-active-members"
+          />
+          <StatCard
+            title="Payment Pending"
+            value={users.filter(u => u.status === 'payment_pending').length}
+            icon={CreditCard}
+            iconBgClass="text-brand-light-orange"
+            dataTestId="stat-payment-pending-members"
+          />
+          <StatCard
+            title="Inactive"
+            value={users.filter(u => u.status === 'inactive').length}
+            icon={CircleMinus}
+            iconBgClass=" text-brand-pink"
+            dataTestId="stat-inactive-members"
+          />
+
+
+
+        </div>
       </div>
 
       {/* Filters */}
@@ -394,137 +409,137 @@ const AdminMembers = () => {
                 data-testid={`member-card-${user.id}`}
               >
                 <div className="flex justify-between items-start flex-wrap gap-4">
-                <div className="flex items-start gap-4 flex-1">
-                  {/* Avatar */}
-                  <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
-                    {user.first_name?.[0]}{user.last_name?.[0]}
+                  <div className="flex items-start gap-4 flex-1">
+                    {/* Avatar */}
+                    <div className="h-14 w-14 rounded-full bg-[var(--neutral-800)] flex items-center justify-center text-[var(--purple-ink)] font-semibold text-lg flex-shrink-0">
+                      {user.first_name?.[0]}{user.last_name?.[0]}
+                    </div>
+
+                    {/* Info */}
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-3 mb-2 flex-wrap">
+                        <h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
+                          {user.first_name} {user.last_name}
+                        </h3>
+                        {getStatusBadge(user.status)}
+                      </div>
+                      <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <p>Email: {user.email}</p>
+                        <p>Phone: {user.phone}</p>
+                        <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
+                        {user.referred_by_member_name && (
+                          <p>Referred by: {user.referred_by_member_name}</p>
+                        )}
+                      </div>
+
+                      {/* Reminder Info */}
+                      {(() => {
+                        const reminderInfo = getReminderInfo(user);
+                        if (reminderInfo.totalReminders > 0) {
+                          return (
+                            <div className="mt-4 p-3 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
+                              <div className="flex items-center gap-2 mb-2">
+                                <AlertCircle className="h-4 w-4 text-[var(--orange-light)]" />
+                                <span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                                  {reminderInfo.totalReminders} reminder{reminderInfo.totalReminders !== 1 ? 's' : ''} sent
+                                  {reminderInfo.totalReminders >= 3 && (
+                                    <Badge className="ml-2 bg-[var(--orange-light)] text-white px-2 py-0.5 rounded-full text-xs">
+                                      Needs attention
+                                    </Badge>
+                                  )}
+                                </span>
+                              </div>
+                              <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {reminderInfo.emailReminders > 0 && (
+                                  <p>
+                                    <Mail className="inline h-3 w-3 mr-1" />
+                                    {reminderInfo.emailReminders} email verification
+                                  </p>
+                                )}
+                                {reminderInfo.eventReminders > 0 && (
+                                  <p>
+                                    <Calendar className="inline h-3 w-3 mr-1" />
+                                    {reminderInfo.eventReminders} event attendance
+                                  </p>
+                                )}
+                                {reminderInfo.paymentReminders > 0 && (
+                                  <p>
+                                    <Clock className="inline h-3 w-3 mr-1" />
+                                    {reminderInfo.paymentReminders} payment
+                                  </p>
+                                )}
+                                {reminderInfo.renewalReminders > 0 && (
+                                  <p>
+                                    <CheckCircle className="inline h-3 w-3 mr-1" />
+                                    {reminderInfo.renewalReminders} renewal
+                                  </p>
+                                )}
+                              </div>
+                              {reminderInfo.lastReminderAt && (
+                                <p className="mt-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                  Last reminder: {new Date(reminderInfo.lastReminderAt).toLocaleDateString()} at {new Date(reminderInfo.lastReminderAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                                </p>
+                              )}
+                            </div>
+                          );
+                        }
+                        return null;
+                      })()}
+                    </div>
                   </div>
 
-                  {/* Info */}
-                  <div className="flex-1 min-w-0">
-                    <div className="flex items-center gap-3 mb-2 flex-wrap">
-                      <h3 className="text-xl font-semibold text-[var(--purple-ink)] " style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {user.first_name} {user.last_name}
-                      </h3>
-                      {getStatusBadge(user.status)}
-                    </div>
-                    <div className="grid md:grid-cols-2 gap-2 text-sm text-brand-purple dark:text-brand-lavender  " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      <p>Email: {user.email}</p>
-                      <p>Phone: {user.phone}</p>
-                      <p>Joined: {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</p>
-                      {user.referred_by_member_name && (
-                        <p>Referred by: {user.referred_by_member_name}</p>
+                  {/* Actions */}
+                  <div className="flex flex-col gap-3">
+                    <div className="flex gap-2 flex-wrap">
+                      <Link to={`/admin/users/${user.id}`}>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className=""
+                        >
+                          <Eye className="h-4 w-4 mr-1" />
+                          View Profile
+                        </Button>
+                      </Link>
+
+                      {/* Show Activate Payment button for payment_pending users */}
+                      {user.status === 'payment_pending' && (
+                        <Button
+                          onClick={() => handleActivatePayment(user)}
+                          size="sm"
+                          className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
+                        >
+                          <CheckCircle className="h-4 w-4 mr-1" />
+                          Activate Payment
+                        </Button>
                       )}
                     </div>
 
-                    {/* Reminder Info */}
-                    {(() => {
-                      const reminderInfo = getReminderInfo(user);
-                      if (reminderInfo.totalReminders > 0) {
-                        return (
-                          <div className="mt-4 p-3 bg-[var(--lavender-500)] rounded-lg border border-[var(--neutral-800)]">
-                            <div className="flex items-center gap-2 mb-2">
-                              <AlertCircle className="h-4 w-4 text-[var(--orange-light)]" />
-                              <span className="text-sm font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                                {reminderInfo.totalReminders} reminder{reminderInfo.totalReminders !== 1 ? 's' : ''} sent
-                                {reminderInfo.totalReminders >= 3 && (
-                                  <Badge className="ml-2 bg-[var(--orange-light)] text-white px-2 py-0.5 rounded-full text-xs">
-                                    Needs attention
-                                  </Badge>
-                                )}
-                              </span>
-                            </div>
-                            <div className="grid grid-cols-2 md:grid-cols-4 gap-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                              {reminderInfo.emailReminders > 0 && (
-                                <p>
-                                  <Mail className="inline h-3 w-3 mr-1" />
-                                  {reminderInfo.emailReminders} email verification
-                                </p>
-                              )}
-                              {reminderInfo.eventReminders > 0 && (
-                                <p>
-                                  <Calendar className="inline h-3 w-3 mr-1" />
-                                  {reminderInfo.eventReminders} event attendance
-                                </p>
-                              )}
-                              {reminderInfo.paymentReminders > 0 && (
-                                <p>
-                                  <Clock className="inline h-3 w-3 mr-1" />
-                                  {reminderInfo.paymentReminders} payment
-                                </p>
-                              )}
-                              {reminderInfo.renewalReminders > 0 && (
-                                <p>
-                                  <CheckCircle className="inline h-3 w-3 mr-1" />
-                                  {reminderInfo.renewalReminders} renewal
-                                </p>
-                              )}
-                            </div>
-                            {reminderInfo.lastReminderAt && (
-                              <p className="mt-2 text-xs text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                                Last reminder: {new Date(reminderInfo.lastReminderAt).toLocaleDateString()} at {new Date(reminderInfo.lastReminderAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
-                              </p>
-                            )}
-                          </div>
-                        );
-                      }
-                      return null;
-                    })()}
+                    {/* Status Management */}
+                    <div className="flex items-center gap-2">
+                      <span className="text-sm text-brand-purple dark:text-brand-lavender  whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        Change Status:
+                      </span>
+                      <Select
+                        value={user.status}
+                        onValueChange={(newStatus) => handleStatusChangeRequest(user.id, user.status, newStatus, user)}
+                        disabled={statusChanging === user.id}
+                      >
+                        <SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
+                          <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="payment_pending">Payment Pending</SelectItem>
+                          <SelectItem value="active">Active</SelectItem>
+                          <SelectItem value="inactive">Inactive</SelectItem>
+                          <SelectItem value="canceled">Canceled</SelectItem>
+                          <SelectItem value="expired">Expired</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
                   </div>
                 </div>
-
-                {/* Actions */}
-                <div className="flex flex-col gap-3">
-                  <div className="flex gap-2 flex-wrap">
-                    <Link to={`/admin/users/${user.id}`}>
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className=""
-                      >
-                        <Eye className="h-4 w-4 mr-1" />
-                        View Profile
-                      </Button>
-                    </Link>
-
-                    {/* Show Activate Payment button for payment_pending users */}
-                    {user.status === 'payment_pending' && (
-                      <Button
-                        onClick={() => handleActivatePayment(user)}
-                        size="sm"
-                        className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background"
-                      >
-                        <CheckCircle className="h-4 w-4 mr-1" />
-                        Activate Payment
-                      </Button>
-                    )}
-                  </div>
-
-                  {/* Status Management */}
-                  <div className="flex items-center gap-2">
-                    <span className="text-sm text-brand-purple dark:text-brand-lavender  whitespace-nowrap" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                      Change Status:
-                    </span>
-                    <Select
-                      value={user.status}
-                      onValueChange={(newStatus) => handleStatusChangeRequest(user.id, user.status, newStatus, user)}
-                      disabled={statusChanging === user.id}
-                    >
-                      <SelectTrigger className="w-[180px] h-9 border-[var(--neutral-800)]">
-                        <SelectValue />
-                      </SelectTrigger>
-                      <SelectContent>
-                        <SelectItem value="payment_pending">Payment Pending</SelectItem>
-                        <SelectItem value="active">Active</SelectItem>
-                        <SelectItem value="inactive">Inactive</SelectItem>
-                        <SelectItem value="canceled">Canceled</SelectItem>
-                        <SelectItem value="expired">Expired</SelectItem>
-                      </SelectContent>
-                    </Select>
-                  </div>
-                </div>
-              </div>
-            </Card>
+              </Card>
             );
           })}
         </div>
-- 
2.39.5


From 819062d69742c7e33186b039428c303f2a507796 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 20 Jan 2026 14:45:05 -0600
Subject: [PATCH 17/21] fixed spacing in AdminMembers.js

---
 src/pages/admin/AdminMembers.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/admin/AdminMembers.js b/src/pages/admin/AdminMembers.js
index 39614ba..c1e6a95 100644
--- a/src/pages/admin/AdminMembers.js
+++ b/src/pages/admin/AdminMembers.js
@@ -324,7 +324,7 @@ const AdminMembers = () => {
         <div className=' text-2xl text-[var(--purple-ink)] pb-8 font-semibold'>
           Quick Overview
         </div>
-        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
 
 
           <StatCard
-- 
2.39.5


From 65c3e3b92d83007ed2ad3c9095f0ecce5281807c Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 20 Jan 2026 16:02:54 -0600
Subject: [PATCH 18/21] fix: update color styles in AdminSidebar, Register, and
 CSS files for improved UI consistency

---
 src/components/AdminSidebar.js |  4 ++--
 src/pages/Register.js          |  4 ++--
 src/styles/components.css      | 16 +++++++---------
 src/styles/theme.css           |  3 +--
 4 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/components/AdminSidebar.js b/src/components/AdminSidebar.js
index 26c8702..12401d5 100644
--- a/src/components/AdminSidebar.js
+++ b/src/components/AdminSidebar.js
@@ -224,7 +224,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
             ${item.disabled
               ? 'opacity-50 cursor-not-allowed text-brand-purple '
               : active
-                ? 'bg-[var(--orange-light)]/10 text-[var(--orange-light)]'
+                ? 'bg-[var(--orange-light)]/10 text-[var(--purple-ink)]'
                 : 'text-[var(--purple-ink)] hover:bg-[var(--neutral-800)]/20'
             }
           `}
@@ -254,7 +254,7 @@ const AdminSidebar = ({ isOpen, onToggle, isMobile }) => {
 
           {/* Badge when collapsed */}
           {!isOpen && item.badge > 0 && !item.disabled && (
-            <div className="absolute -top-1 -right-1 bg-accent foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
+            <div className="absolute -top-1 -right-1 bg-accent text-white foreground text-xs rounded-full h-5 w-5 flex items-center justify-center font-medium">
               {item.badge}
             </div>
           )}
diff --git a/src/pages/Register.js b/src/pages/Register.js
index a1b31ab..7bd7fc5 100644
--- a/src/pages/Register.js
+++ b/src/pages/Register.js
@@ -258,7 +258,7 @@ const Register = () => {
                 <Button
                   type="button"
                   onClick={handleNext}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform"
                 >
                   Next
                   <ArrowRight className="ml-2 h-5 w-5" />
@@ -267,7 +267,7 @@ const Register = () => {
                 <Button
                   type="submit"
                   disabled={loading}
-                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-background rounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
+                  className="bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-purple hover:text-backgroundrounded-full px-6 py-6 text-lg font-medium shadow-lg hover:scale-105 transition-transform disabled:opacity-50 disabled:cursor-not-allowed"
                   data-testid="submit-register-button"
                 >
                   {loading ? 'Creating Account...' : 'Create Account'}
diff --git a/src/styles/components.css b/src/styles/components.css
index 494188d..3654b21 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -17,7 +17,7 @@
   }
 
   .btn-ghost {
-    @apply hover:bg-brand-purple bg-brand-purple/10  rounded-full disabled:opacity-50 px-6 transition-transform text-brand-purple  hover:text-[var(--purple-muted)];
+    @apply hover:bg-brand-purple bg-brand-purple/10  rounded-full disabled:opacity-50 px-6 transition-transform text-brand-purple  hover:text-background;
   }
 
   .btn-outline {
@@ -56,10 +56,10 @@
     @apply h-9 w-9 rounded-full disabled:opacity-50 px-6;
   }
   .btn-green {
-    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-full px-6 ;
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-full px-6;
   }
   .btn-util-green {
-    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6 ;
+    @apply bg-[var(--green-light)] hover:bg-[var(--green-forest)] text-white transition-transform rounded-xl h-12 px-6;
   }
 
   .btn-util-purple {
@@ -76,21 +76,19 @@
     @apply bg-[var(--purple-lavender)] text-white hover:bg-[var(--purple-muted)] rounded-full flex items-center gap-2 dark:hover:bg-foreground dark:hover:text-background;
   }
   .btn-light-lavender {
-    @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender ;
+    @apply bg-[var(--neutral-800)] text-[var(--purple-ink)] hover:bg-brand-lavender rounded-full px-6 transition-transform dark:hover:bg-brand-lavender dark:hover:text-brand-dark-lavender;
   }
 
   /* Badges */
- 
+
   .badge {
     @apply px-3 py-1 rounded-full text-sm font-medium transition-transform;
   }
   .badge-green {
     @apply bg-[var(--green-light)] text-white transition-transform;
   }
- /* Backgrounds */
-    .bg-light-lavender {
+  /* Backgrounds */
+  .bg-light-lavender {
     @apply bg-gradient-to-br from-brand-purple  to-[var(--purple-ink)] text-white bg-[var(--neutral-800)] transition-transform dark:bg-brand-lavender dark:text-brand-dark-lavender;
   }
-
-
 }
diff --git a/src/styles/theme.css b/src/styles/theme.css
index fd138a9..7096ed1 100644
--- a/src/styles/theme.css
+++ b/src/styles/theme.css
@@ -78,7 +78,7 @@
     --green-muted: #66927e;
     --green-soft: #6a9680;
     --green-eucalyptus: #6a9a83;
-    --green-forest: #5e8EsOkvcwL7472374;
+    --green-forest: #5a7d68;
     --green-fern: #6da085;
     --green-mint: #6fa087;
     --green-pastel: #6fa188;
@@ -243,4 +243,3 @@
     --neutral-900: #f4f4ff; /* highest contrast text */
   }
 }
-
-- 
2.39.5


From 264ee860dfcf2f9c8f6042cde43aa3b0fdbaaa12 Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 20 Jan 2026 16:16:23 -0600
Subject: [PATCH 19/21] feat: add member since date handling in
 CreateMemberDialog and CreateStaffDialog for improved member tracking

---
 src/components/CreateMemberDialog.js |  5 +++--
 src/components/CreateStaffDialog.js  | 23 ++++++++++++++++++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/CreateMemberDialog.js b/src/components/CreateMemberDialog.js
index c287564..02b077e 100644
--- a/src/components/CreateMemberDialog.js
+++ b/src/components/CreateMemberDialog.js
@@ -31,6 +31,7 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
+  const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -84,8 +85,8 @@ const CreateMemberDialog = ({ open, onOpenChange, onSuccess }) => {
       if (payload.date_of_birth === '') {
         delete payload.date_of_birth;
       }
-      if (payload.member_since === '') {
-        delete payload.member_since;
+      if (!payload.member_since) {
+        payload.member_since = getTodayDate();
       }
 
       await api.post('/admin/users/create', payload);
diff --git a/src/components/CreateStaffDialog.js b/src/components/CreateStaffDialog.js
index 5bbb606..166806f 100644
--- a/src/components/CreateStaffDialog.js
+++ b/src/components/CreateStaffDialog.js
@@ -22,10 +22,12 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     first_name: '',
     last_name: '',
     phone: '',
+    member_since: '',
     role: 'admin'
   });
   const [loading, setLoading] = useState(false);
   const [errors, setErrors] = useState({});
+  const getTodayDate = () => new Date().toISOString().slice(0, 10);
 
   const handleChange = (field, value) => {
     setFormData(prev => ({ ...prev, [field]: value }));
@@ -74,7 +76,11 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
     setLoading(true);
 
     try {
-      await api.post('/admin/users/create', formData);
+      const payload = { ...formData };
+      if (!payload.member_since) {
+        payload.member_since = getTodayDate();
+      }
+      await api.post('/admin/users/create', payload);
       toast.success('Staff member created successfully');
 
       // Reset form
@@ -84,6 +90,7 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
         first_name: '',
         last_name: '',
         phone: '',
+        member_since: '',
         role: 'admin'
       });
 
@@ -200,6 +207,20 @@ const CreateStaffDialog = ({ open, onOpenChange, onSuccess }) => {
               )}
             </div>
 
+            {/* Member Since */}
+            <div className="grid gap-2">
+              <Label htmlFor="member_since" className="text-[var(--purple-ink)]">
+                Member Since
+              </Label>
+              <Input
+                id="member_since"
+                type="date"
+                value={formData.member_since}
+                onChange={(e) => handleChange('member_since', e.target.value)}
+                className="rounded-xl border-2 border-[var(--neutral-800)] focus:border-brand-purple "
+              />
+            </div>
+
             {/* Role */}
             <div className="grid gap-2">
               <Label htmlFor="role" className="text-[var(--purple-ink)]">
-- 
2.39.5


From 8ea486a4f4e09761145e40ab661c3720027489fb Mon Sep 17 00:00:00 2001
From: kayela <kayela@konceptkit.com>
Date: Tue, 20 Jan 2026 22:51:44 -0600
Subject: [PATCH 20/21] feat: enhance date formatting in AdminUserView for
 improved readability and consistency

---
 src/pages/admin/AdminUserView.js | 39 +++++++++++++++++++++++++++-----
 1 file changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index d20c48d..350880a 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -30,12 +30,39 @@ const AdminUserView = () => {
   const fileInputRef = useRef(null);
   const [changeRoleDialogOpen, setChangeRoleDialogOpen] = useState(false);
 
+  const formatLocalDateInputValue = (date) => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    return `${year}-${month}-${day}`;
+  };
+
   const formatDateInputValue = (value) => {
     if (!value) return '';
     if (typeof value === 'string') {
-      return value.slice(0, 10);
+      if (/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+        return value;
+      }
+      const parsed = new Date(value);
+      if (Number.isNaN(parsed.getTime())) {
+        return value.slice(0, 10);
+      }
+      return formatLocalDateInputValue(parsed);
     }
-    return new Date(value).toISOString().slice(0, 10);
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return '';
+    return formatLocalDateInputValue(parsed);
+  };
+
+  const formatDateDisplayValue = (value) => {
+    if (!value) return 'N/A';
+    if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}$/.test(value)) {
+      const [year, month, day] = value.split('-').map(Number);
+      return new Date(year, month - 1, day).toLocaleDateString();
+    }
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return 'N/A';
+    return parsed.toLocaleDateString();
   };
 
   useEffect(() => {
@@ -304,7 +331,7 @@ const AdminUserView = () => {
               </div>
               <div className="flex items-center gap-2">
                 <Calendar className="h-4 w-4" />
-                <span>Joined {joinedDate ? new Date(joinedDate).toLocaleDateString() : 'N/A'}</span>
+                <span>Joined {formatDateDisplayValue(joinedDate)}</span>
               </div>
             </div>
           </div>
@@ -401,7 +428,7 @@ const AdminUserView = () => {
           <div>
             <label className="text-sm font-medium text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Date of Birth</label>
             <p className="text-[var(--purple-ink)] mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-              {new Date(user.date_of_birth).toLocaleDateString()}
+              {formatDateDisplayValue(user.date_of_birth)}
             </p>
           </div>
 
@@ -492,14 +519,14 @@ const AdminUserView = () => {
                     <div>
                       <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
                       <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {new Date(sub.start_date).toLocaleDateString()}
+                        {formatDateDisplayValue(sub.start_date)}
                       </p>
                     </div>
                     {sub.end_date && (
                       <div>
                         <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
                         <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {new Date(sub.end_date).toLocaleDateString()}
+                          {formatDateDisplayValue(sub.end_date)}
                         </p>
                       </div>
                     )}
-- 
2.39.5


From 002ef5c89789ff75856ebd89ac97eacc8f55e21e Mon Sep 17 00:00:00 2001
From: Koncept Kit <63216427+konceptkit@users.noreply.github.com>
Date: Sat, 24 Jan 2026 23:56:15 +0700
Subject: [PATCH 21/21] Fixes

---
 src/components/TransactionHistory.js | 252 +++++++++++++++++++++++++++
 src/pages/Profile.js                 |  29 +++
 src/pages/admin/AdminUserView.js     | 120 +++----------
 3 files changed, 302 insertions(+), 99 deletions(-)
 create mode 100644 src/components/TransactionHistory.js

diff --git a/src/components/TransactionHistory.js b/src/components/TransactionHistory.js
new file mode 100644
index 0000000..9843a53
--- /dev/null
+++ b/src/components/TransactionHistory.js
@@ -0,0 +1,252 @@
+import React, { useState } from 'react';
+import { Card } from './ui/card';
+import { Badge } from './ui/badge';
+import { Button } from './ui/button';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
+import { Receipt, CreditCard, Heart, Calendar, ExternalLink, DollarSign } from 'lucide-react';
+
+/**
+ * TransactionHistory Component
+ * Displays user transaction history including subscriptions and donations
+ * 
+ * @param {Object} props
+ * @param {Array} props.subscriptions - List of subscription transactions
+ * @param {Array} props.donations - List of donation transactions
+ * @param {number} props.totalSubscriptionCents - Total subscription amount in cents
+ * @param {number} props.totalDonationCents - Total donation amount in cents
+ * @param {boolean} props.loading - Loading state
+ * @param {boolean} props.isAdmin - Whether viewing as admin (shows extra fields)
+ */
+const TransactionHistory = ({
+    subscriptions = [],
+    donations = [],
+    totalSubscriptionCents = 0,
+    totalDonationCents = 0,
+    loading = false,
+    isAdmin = false
+}) => {
+    const [activeTab, setActiveTab] = useState('all');
+
+    const formatAmount = (cents) => {
+        if (!cents) return '$0.00';
+        return `$${(cents / 100).toFixed(2)}`;
+    };
+
+    const formatDate = (dateString) => {
+        if (!dateString) return 'N/A';
+        return new Date(dateString).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    };
+
+    const getStatusBadgeClass = (status) => {
+        switch (status?.toLowerCase()) {
+            case 'active':
+            case 'completed':
+                return 'bg-green-100 text-green-800 border-green-200';
+            case 'pending':
+                return 'bg-yellow-100 text-yellow-800 border-yellow-200';
+            case 'cancelled':
+            case 'failed':
+            case 'expired':
+                return 'bg-red-100 text-red-800 border-red-200';
+            default:
+                return 'bg-gray-100 text-gray-800 border-gray-200';
+        }
+    };
+
+    const allTransactions = [
+        ...subscriptions.map(s => ({ ...s, sortDate: s.created_at })),
+        ...donations.map(d => ({ ...d, sortDate: d.created_at }))
+    ].sort((a, b) => new Date(b.sortDate) - new Date(a.sortDate));
+
+    const TransactionRow = ({ transaction }) => {
+        const isSubscription = transaction.type === 'subscription';
+
+        return (
+            <div className="flex flex-col sm:flex-row sm:items-center justify-between p-4 border-b border-[var(--neutral-800)] last:border-b-0 hover:bg-[var(--lavender-500)] transition-colors">
+                <div className="flex items-start gap-3 mb-2 sm:mb-0">
+                    <div className={`p-2 rounded-lg ${isSubscription ? 'bg-[var(--purple-lavender)] bg-opacity-20' : 'bg-[var(--orange-light)] bg-opacity-20'}`}>
+                        {isSubscription ? (
+                            <CreditCard className="h-5 w-5 text-[var(--purple-lavender)]" />
+                        ) : (
+                            <Heart className="h-5 w-5 text-[var(--orange-light)]" />
+                        )}
+                    </div>
+                    <div className="flex-1">
+                        <div className="flex items-center gap-2 flex-wrap">
+                            <span className="font-medium text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                {transaction.description}
+                            </span>
+                            <Badge className={`text-xs ${getStatusBadgeClass(transaction.status)}`}>
+                                {transaction.status}
+                            </Badge>
+                        </div>
+                        <div className="flex items-center gap-2 text-sm text-brand-purple mt-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                            <Calendar className="h-3 w-3" />
+                            <span>{formatDate(transaction.payment_completed_at || transaction.created_at)}</span>
+                            {transaction.card_brand && transaction.card_last4 && (
+                                <>
+                                    <span className="text-[var(--neutral-800)]">•</span>
+                                    <span>{transaction.card_brand} ****{transaction.card_last4}</span>
+                                </>
+                            )}
+                            {isSubscription && transaction.billing_cycle && (
+                                <>
+                                    <span className="text-[var(--neutral-800)]">•</span>
+                                    <span className="capitalize">{transaction.billing_cycle}</span>
+                                </>
+                            )}
+                        </div>
+                        {isAdmin && transaction.manual_payment && (
+                            <div className="text-xs text-[var(--orange-light)] mt-1">
+                                Manual Payment {transaction.manual_payment_notes && `- ${transaction.manual_payment_notes}`}
+                            </div>
+                        )}
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 pl-10 sm:pl-0">
+                    <div className="text-right">
+                        <div className="font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                            {formatAmount(transaction.amount_cents)}
+                        </div>
+                        {isSubscription && transaction.donation_cents > 0 && (
+                            <div className="text-xs text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                                (incl. {formatAmount(transaction.donation_cents)} donation)
+                            </div>
+                        )}
+                    </div>
+                    {transaction.stripe_receipt_url && (
+                        <a
+                            href={transaction.stripe_receipt_url}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="p-2 text-brand-purple hover:text-[var(--purple-ink)] hover:bg-[var(--lavender-300)] rounded-lg transition-colors"
+                            title="View Receipt"
+                        >
+                            <ExternalLink className="h-4 w-4" />
+                        </a>
+                    )}
+                </div>
+            </div>
+        );
+    };
+
+    const EmptyState = ({ type }) => (
+        <div className="py-12 text-center">
+            <div className="mx-auto w-16 h-16 bg-[var(--lavender-300)] rounded-full flex items-center justify-center mb-4">
+                {type === 'subscription' ? (
+                    <CreditCard className="h-8 w-8 text-brand-purple" />
+                ) : type === 'donation' ? (
+                    <Heart className="h-8 w-8 text-brand-purple" />
+                ) : (
+                    <Receipt className="h-8 w-8 text-brand-purple" />
+                )}
+            </div>
+            <p className="text-brand-purple" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                {type === 'subscription'
+                    ? 'No subscription payments yet'
+                    : type === 'donation'
+                        ? 'No donations yet'
+                        : 'No transactions yet'}
+            </p>
+        </div>
+    );
+
+    if (loading) {
+        return (
+            <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)]">
+                <div className="flex items-center justify-center py-12">
+                    <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-[var(--purple-lavender)]"></div>
+                </div>
+            </Card>
+        );
+    }
+
+    return (
+        <Card className="p-6 bg-background rounded-2xl border border-[var(--neutral-800)]">
+            <div className="flex items-center justify-between mb-6">
+                <h2 className="text-2xl font-semibold text-[var(--purple-ink)] flex items-center gap-2" style={{ fontFamily: "'Inter', sans-serif" }}>
+                    <Receipt className="h-6 w-6 text-brand-purple" />
+                    Transaction History
+                </h2>
+            </div>
+
+            {/* Summary Cards */}
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+                <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
+                    <div className="flex items-center gap-2 text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <CreditCard className="h-4 w-4" />
+                        <span className="text-sm">Total Subscriptions</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {formatAmount(totalSubscriptionCents)}
+                    </div>
+                    <div className="text-xs text-brand-purple mt-1">{subscriptions.length} payment(s)</div>
+                </div>
+                <div className="p-4 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
+                    <div className="flex items-center gap-2 text-brand-purple mb-1" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
+                        <Heart className="h-4 w-4" />
+                        <span className="text-sm">Total Donations</span>
+                    </div>
+                    <div className="text-2xl font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
+                        {formatAmount(totalDonationCents)}
+                    </div>
+                    <div className="text-xs text-brand-purple mt-1">{donations.length} donation(s)</div>
+                </div>
+            </div>
+
+            {/* Tabs */}
+            <Tabs value={activeTab} onValueChange={setActiveTab} className="w-full">
+                <TabsList className="grid w-full grid-cols-3 mb-4">
+                    <TabsTrigger value="all" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        All ({allTransactions.length})
+                    </TabsTrigger>
+                    <TabsTrigger value="subscriptions" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        Subscriptions ({subscriptions.length})
+                    </TabsTrigger>
+                    <TabsTrigger value="donations" className="data-[state=active]:bg-[var(--purple-lavender)] data-[state=active]:text-white">
+                        Donations ({donations.length})
+                    </TabsTrigger>
+                </TabsList>
+
+                <div className="border border-[var(--neutral-800)] rounded-xl overflow-hidden">
+                    <TabsContent value="all" className="m-0">
+                        {allTransactions.length > 0 ? (
+                            allTransactions.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="all" />
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="subscriptions" className="m-0">
+                        {subscriptions.length > 0 ? (
+                            subscriptions.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="subscription" />
+                        )}
+                    </TabsContent>
+
+                    <TabsContent value="donations" className="m-0">
+                        {donations.length > 0 ? (
+                            donations.map((transaction) => (
+                                <TransactionRow key={transaction.id} transaction={transaction} />
+                            ))
+                        ) : (
+                            <EmptyState type="donation" />
+                        )}
+                    </TabsContent>
+                </div>
+            </Tabs>
+        </Card>
+    );
+};
+
+export default TransactionHistory;
diff --git a/src/pages/Profile.js b/src/pages/Profile.js
index 4c51fbf..d270dfa 100644
--- a/src/pages/Profile.js
+++ b/src/pages/Profile.js
@@ -12,6 +12,7 @@ import MemberFooter from '../components/MemberFooter';
 import { User, Save, Lock, Heart, Users, Mail, BookUser, Camera, Upload, Trash2 } from 'lucide-react';
 import { Avatar, AvatarImage, AvatarFallback } from '../components/ui/avatar';
 import ChangePasswordDialog from '../components/ChangePasswordDialog';
+import TransactionHistory from '../components/TransactionHistory';
 
 const Profile = () => {
   const { user } = useAuth();
@@ -24,6 +25,8 @@ const Profile = () => {
   const fileInputRef = useRef(null);
   const [maxFileSizeMB, setMaxFileSizeMB] = useState(50); // Default 50MB
   const [maxFileSizeBytes, setMaxFileSizeBytes] = useState(52428800); // Default 50MB in bytes
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
   const [formData, setFormData] = useState({
     // Personal Information
     first_name: '',
@@ -58,6 +61,7 @@ const Profile = () => {
   useEffect(() => {
     fetchConfig();
     fetchProfile();
+    fetchTransactions();
   }, []);
 
   const fetchConfig = async () => {
@@ -112,6 +116,19 @@ const Profile = () => {
     }
   };
 
+  const fetchTransactions = async () => {
+    try {
+      setTransactionsLoading(true);
+      const response = await api.get('/members/transactions');
+      setTransactions(response.data);
+    } catch (error) {
+      console.error('Failed to load transactions:', error);
+      // Don't show error toast - transactions are optional
+    } finally {
+      setTransactionsLoading(false);
+    }
+  };
+
   const handleInputChange = (e) => {
     const { name, value } = e.target;
     setFormData(prev => ({ ...prev, [name]: value }));
@@ -703,6 +720,18 @@ const Profile = () => {
           open={passwordDialogOpen}
           onOpenChange={setPasswordDialogOpen}
         />
+
+        {/* Transaction History Section */}
+        <div className="mt-8">
+          <TransactionHistory
+            subscriptions={transactions.subscriptions}
+            donations={transactions.donations}
+            totalSubscriptionCents={transactions.total_subscription_amount_cents}
+            totalDonationCents={transactions.total_donation_amount_cents}
+            loading={transactionsLoading}
+            isAdmin={false}
+          />
+        </div>
       </div>
       <MemberFooter />
     </div>
diff --git a/src/pages/admin/AdminUserView.js b/src/pages/admin/AdminUserView.js
index 350880a..e2cdb77 100644
--- a/src/pages/admin/AdminUserView.js
+++ b/src/pages/admin/AdminUserView.js
@@ -10,6 +10,7 @@ import { ArrowLeft, Mail, Phone, MapPin, Calendar, Lock, AlertTriangle, Camera,
 import { toast } from 'sonner';
 import ConfirmationDialog from '../../components/ConfirmationDialog';
 import ChangeRoleDialog from '../../components/ChangeRoleDialog';
+import TransactionHistory from '../../components/TransactionHistory';
 
 const AdminUserView = () => {
   const { userId } = useParams();
@@ -18,8 +19,8 @@ const AdminUserView = () => {
   const [loading, setLoading] = useState(true);
   const [resetPasswordLoading, setResetPasswordLoading] = useState(false);
   const [resendVerificationLoading, setResendVerificationLoading] = useState(false);
-  const [subscriptions, setSubscriptions] = useState([]);
-  const [subscriptionsLoading, setSubscriptionsLoading] = useState(true);
+  const [transactions, setTransactions] = useState({ subscriptions: [], donations: [] });
+  const [transactionsLoading, setTransactionsLoading] = useState(true);
   const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
   const [pendingAction, setPendingAction] = useState(null);
   const [uploadingPhoto, setUploadingPhoto] = useState(false);
@@ -68,7 +69,7 @@ const AdminUserView = () => {
   useEffect(() => {
     fetchConfig();
     fetchUserProfile();
-    fetchSubscriptions();
+    fetchTransactions();
   }, [userId]);
 
   useEffect(() => {
@@ -89,14 +90,15 @@ const AdminUserView = () => {
     }
   };
 
-  const fetchSubscriptions = async () => {
+  const fetchTransactions = async () => {
     try {
-      const response = await api.get(`/admin/subscriptions?user_id=${userId}`);
-      setSubscriptions(response.data);
+      setTransactionsLoading(true);
+      const response = await api.get(`/admin/users/${userId}/transactions`);
+      setTransactions(response.data);
     } catch (error) {
-      console.error('Failed to fetch subscriptions:', error);
+      console.error('Failed to fetch transactions:', error);
     } finally {
-      setSubscriptionsLoading(false);
+      setTransactionsLoading(false);
     }
   };
 
@@ -482,97 +484,17 @@ const AdminUserView = () => {
         </div>
       </Card>
 
-      {/* Subscription Info (if applicable) */}
-      {user.role === 'member' && (
-        <Card className="p-8 bg-background rounded-2xl border border-[var(--neutral-800)] mt-8">
-          <h2 className="text-2xl font-semibold text-[var(--purple-ink)] mb-6" style={{ fontFamily: "'Inter', sans-serif" }}>
-            Subscription Information
-          </h2>
-
-          {subscriptionsLoading ? (
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Loading subscriptions...</p>
-          ) : subscriptions.length === 0 ? (
-            <p className="text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>No subscriptions found for this member.</p>
-          ) : (
-            <div className="space-y-6">
-              {subscriptions.map((sub) => (
-                <div key={sub.id} className="p-6 bg-[var(--lavender-500)] rounded-xl border border-[var(--neutral-800)]">
-                  <div className="flex items-start justify-between mb-4">
-                    <div>
-                      <h3 className="text-lg font-semibold text-[var(--purple-ink)]" style={{ fontFamily: "'Inter', sans-serif" }}>
-                        {sub.plan.name}
-                      </h3>
-                      <p className="text-sm text-brand-purple " style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {sub.plan.billing_cycle}
-                      </p>
-                    </div>
-                    <Badge className={
-                      sub.status === 'active' ? 'bg-[var(--green-light)] text-white' :
-                        sub.status === 'expired' ? 'bg-red-500 text-white' :
-                          'bg-gray-400 text-white'
-                    }>
-                      {sub.status}
-                    </Badge>
-                  </div>
-
-                  <div className="grid md:grid-cols-2 gap-4 text-sm">
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Start Date</label>
-                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        {formatDateDisplayValue(sub.start_date)}
-                      </p>
-                    </div>
-                    {sub.end_date && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>End Date</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {formatDateDisplayValue(sub.end_date)}
-                        </p>
-                      </div>
-                    )}
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Base Amount</label>
-                      <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        ${(sub.base_subscription_cents / 100).toFixed(2)}
-                      </p>
-                    </div>
-                    {sub.donation_cents > 0 && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Donation</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          ${(sub.donation_cents / 100).toFixed(2)}
-                        </p>
-                      </div>
-                    )}
-                    <div>
-                      <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Total Paid</label>
-                      <p className="text-[var(--purple-ink)] font-semibold" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                        ${(sub.amount_paid_cents / 100).toFixed(2)}
-                      </p>
-                    </div>
-                    {sub.payment_method && (
-                      <div>
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Payment Method</label>
-                        <p className="text-[var(--purple-ink)]" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {sub.payment_method}
-                        </p>
-                      </div>
-                    )}
-                    {sub.stripe_subscription_id && (
-                      <div className="md:col-span-2">
-                        <label className="text-brand-purple  font-medium" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>Stripe Subscription ID</label>
-                        <p className="text-[var(--purple-ink)] text-xs font-mono" style={{ fontFamily: "'Nunito Sans', sans-serif" }}>
-                          {sub.stripe_subscription_id}
-                        </p>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </Card>
-      )}
+      {/* Transaction History */}
+      <div className="mt-8">
+        <TransactionHistory
+          subscriptions={transactions.subscriptions}
+          donations={transactions.donations}
+          totalSubscriptionCents={transactions.total_subscription_amount_cents}
+          totalDonationCents={transactions.total_donation_amount_cents}
+          loading={transactionsLoading}
+          isAdmin={true}
+        />
+      </div>
 
       {/* Admin Action Confirmation Dialog */}
       <ConfirmationDialog
-- 
2.39.5