diff --git a/TODO.md b/TODO.md
index ce557d5..6a90791 100644
--- a/TODO.md
+++ b/TODO.md
@@ -1,24 +1,3 @@
-# Edit Functionality for User and Family Data
-
-## Tasks
-- [x] Add editProfile() and updateProfile() methods in FamilyController
-- [x] Add routes for profile.edit and profile.update in web.php
-- [x] Create profile-edit.blade.php view
-- [x] Add edit buttons in show.blade.php
-- [x] Add edit link in dashboard.blade.php for user card
-- [x] Test the edit forms
-
-# Image Upload Modal Component
-
-## Tasks
-- [x] Create migration for profile_picture column in users table
-- [x] Update User model to add profile_picture to fillable and casts
-- [x] Add cropperjs and browser-image-compression to package.json
-- [x] Update app.js to import cropperjs and browser-image-compression
-- [x] Create image-upload-modal.blade.php component
-- [x] Add uploadProfilePicture method to FamilyController
-- [x] Add route for profile picture upload in web.php
-- [x] Update profile-edit.blade.php to include profile picture section
-- [x] Update updateProfile method to handle profile_picture (not needed, upload is separate)
-- [x] Run npm install and php artisan migrate
-- [x] Test the image upload functionality (implementation complete, manual testing required)
+- [x] Add the :root CSS variables block to the <style> in resources/views/layouts/app.blade.php
+- [x] Update existing custom styles in the layout to use the new CSS variables (e.g., background-color: hsl(var(--primary)))
+- [x] Verify that the colors are applied correctly in the views
diff --git a/resources/css/app.css b/resources/css/app.css
index 3e6abea..b1d185f 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -8,4 +8,55 @@
 @theme {
     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
         'Segoe UI Symbol', 'Noto Color Emoji';
+
+    /* Base Colors */
+    --color-background: hsl(220 15% 97%);
+    --color-foreground: hsl(215 25% 27%);
+
+    --color-card: hsl(0 0% 100%);
+    --color-card-foreground: hsl(215 25% 27%);
+
+    /* Primary - Soft Purple */
+    --color-primary: hsl(250 60% 70%);
+    --color-primary-foreground: hsl(0 0% 100%);
+
+    /* Secondary - Soft Sage Green */
+    --color-secondary: hsl(140 30% 75%);
+    --color-secondary-foreground: hsl(140 45% 25%);
+
+    /* Success - Soft Mint */
+    --color-success: hsl(150 40% 70%);
+    --color-success-foreground: hsl(150 45% 20%);
+
+    /* Warning - Soft Peach */
+    --color-warning: hsl(35 60% 80%);
+    --color-warning-foreground: hsl(35 60% 30%);
+
+    /* Info - Soft Sky Blue */
+    --color-info: hsl(200 50% 75%);
+    --color-info-foreground: hsl(200 60% 25%);
+
+    --color-muted: hsl(220 15% 94%);
+    --color-muted-foreground: hsl(215 15% 50%);
+
+    --color-accent: hsl(250 60% 92%);
+    --color-accent-foreground: hsl(250 60% 30%);
+
+    --color-destructive: hsl(0 50% 75%);
+    --color-destructive-foreground: hsl(0 0% 100%);
+
+    --color-border: hsl(220 15% 88%);
+    --color-input: hsl(220 15% 92%);
+    --color-ring: hsl(250 60% 70%);
+    --radius: 0.75rem;
+
+    /* Sidebar */
+    --color-sidebar-background: hsl(250 25% 96%);
+    --color-sidebar-foreground: hsl(215 25% 35%);
+    --color-sidebar-primary: hsl(250 60% 70%);
+    --color-sidebar-primary-foreground: hsl(0 0% 100%);
+    --color-sidebar-accent: hsl(250 25% 90%);
+    --color-sidebar-accent-foreground: hsl(215 25% 40%);
+    --color-sidebar-border: hsl(250 20% 85%);
+    --color-sidebar-ring: hsl(250 60% 70%);
 }
diff --git a/resources/views/clubs/explore.blade.php b/resources/views/clubs/explore.blade.php
index fee33db..50b2289 100644
--- a/resources/views/clubs/explore.blade.php
+++ b/resources/views/clubs/explore.blade.php
@@ -3,24 +3,24 @@
 @section('content')
 <div class="container py-4">
     <!-- Hero Section -->
-    <div class="text-center mb-5">
-        <h1 class="display-4 fw-bold text-danger mb-2">Find Your Perfect Fit</h1>
+    <div class="text-center mb-3">
+        <h1 class="display-4 fw-bold text-primary mb-2">Find Your Perfect Fit</h1>
         <p class="lead text-muted">Discover sports clubs, trainers, nutrition clinics, and more near you</p>
-        <p class="text-muted"><i class="bi bi-geo-alt-fill me-1"></i><span id="currentLocation">Detecting location...</span></p>
+        <p class="text-muted"><span id="currentLocation" class="badge bg-primary text-white rounded-pill px-3 py-2"><i class="bi bi-geo-alt-fill me-1 fs-5"></i>Detecting location...</span></p>
     </div>
 
     <!-- Search Bar with Near Me Button -->
     <div class="row justify-content-center mb-4">
         <div class="col-lg-10">
-            <div class="card shadow-sm border-0">
-                <div class="card-body p-2">
-                    <div class="input-group">
+            <div class="card shadow-sm rounded-pill border-0">
+                <div class="card-body rounded-pill p-2">
+                    <div class="input-group rounded-pill">
                         <span class="input-group-text bg-white border-0">
                             <i class="bi bi-search"></i>
                         </span>
-                        <input type="text" id="searchInput" class="form-control border-0"
+                        <input type="text" id="searchInput" class="form-control bg-white border-0"
                                placeholder="Search for clubs, trainers, nutrition clinics...">
-                        <button class="btn btn-danger px-4" id="nearMeBtn" type="button">
+                        <button class="btn btn-primary px-4 rounded-pill" id="nearMeBtn" type="button">
                             <i class="bi bi-geo-alt-fill me-2"></i>Near Me
                         </button>
                     </div>
@@ -33,34 +33,34 @@
     <div class="row justify-content-center mb-4">
         <div class="col-lg-10">
             <div class="d-flex flex-wrap gap-2 justify-content-center">
-                <button class="btn btn-danger category-btn active" data-category="all">
+                <button class="btn btn-primary category-btn active" data-category="all">
                     <i class="bi bi-search me-2"></i>All
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="sports-clubs">
+                <button class="btn btn-outline-primary category-btn" data-category="sports-clubs">
                     <i class="bi bi-trophy me-2"></i>Sports Clubs
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="personal-trainers">
+                <button class="btn btn-outline-primary category-btn" data-category="personal-trainers">
                     <i class="bi bi-person me-2"></i>Personal Trainers
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="events">
+                <button class="btn btn-outline-primary category-btn" data-category="events">
                     <i class="bi bi-calendar-event me-2"></i>Events
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="nutrition-clinic">
+                <button class="btn btn-outline-primary category-btn" data-category="nutrition-clinic">
                     <i class="bi bi-apple me-2"></i>Nutrition Clinic
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="physiotherapy-clinics">
+                <button class="btn btn-outline-primary category-btn" data-category="physiotherapy-clinics">
                     <i class="bi bi-activity me-2"></i>Physiotherapy Clinics
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="sports-shops">
+                <button class="btn btn-outline-primary category-btn" data-category="sports-shops">
                     <i class="bi bi-bag me-2"></i>Sports Shops
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="venues">
-                    <i class="bi bi-building me-2"></i>Venues
+                <button class="btn btn-outline-primary category-btn" data-category="venues">
+                    <i class="bi bi-building-fill me-2"></i>Venues
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="supplements">
+                <button class="btn btn-outline-primary category-btn" data-category="supplements">
                     <i class="bi bi-box me-2"></i>Supplements
                 </button>
-                <button class="btn btn-outline-danger category-btn" data-category="food-plans">
+                <button class="btn btn-outline-primary category-btn" data-category="food-plans">
                     <i class="bi bi-egg-fried me-2"></i>Food Plans
                 </button>
             </div>
@@ -76,7 +76,7 @@
 
     <!-- Loading Spinner -->
     <div id="loadingSpinner" class="text-center py-5">
-        <div class="spinner-border text-danger" role="status">
+        <div class="spinner-border text-primary" role="status">
             <span class="visually-hidden">Loading...</span>
         </div>
         <p class="mt-3 text-muted">Finding what's near you...</p>
@@ -88,6 +88,8 @@
             <div class="row g-4" id="clubsContainer">
                 <!-- Club cards will be inserted here -->
             </div>
+        </div>
+        <div class="col-12 d-flex justify-content-center">
             <div id="noResults" class="d-flex flex-column align-items-center justify-content-center text-center" style="display: none; min-height: 400px;">
                 <i class="bi bi-inbox" style="font-size: 4rem; color: #dee2e6;"></i>
                 <h4 class="mt-3 text-muted">No Results Found</h4>
@@ -116,7 +118,7 @@
                         <i class="bi bi-geo-alt-fill me-1"></i>
                         <span id="modalLocationCoordinates">Drag the marker to set your location</span>
                     </small>
-                    <button type="button" class="btn btn-danger" id="applyLocationBtn">
+                    <button type="button" class="btn btn-primary" id="applyLocationBtn">
                         <i class="bi bi-check-circle me-2"></i>Apply Location
                     </button>
                 </div>
@@ -146,7 +148,7 @@
 
     .category-btn.active {
         transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(220, 53, 69, 0.3);
+        box-shadow: 0 4px 8px hsl(var(--primary) / 0.3);
     }
 
     .club-card {
@@ -171,7 +173,7 @@
         position: absolute;
         top: 10px;
         right: 10px;
-        background: #dc3545;
+        background: #0d6efd;
         color: white;
         padding: 0.25rem 0.75rem;
         border-radius: 20px;
@@ -180,7 +182,7 @@
     }
 
     .stat-box {
-        background: #f8f9fa;
+        background: hsl(var(--muted));
         border-radius: 8px;
         padding: 0.75rem;
         text-align: center;
@@ -188,18 +190,18 @@
 
     .stat-box i {
         font-size: 1.25rem;
-        color: #dc3545;
+        color: hsl(var(--primary));
     }
 
     .stat-box .stat-number {
         font-size: 1.25rem;
         font-weight: 700;
-        color: #212529;
+        color: hsl(var(--foreground));
     }
 
     .stat-box .stat-label {
         font-size: 0.75rem;
-        color: #6c757d;
+        color: hsl(var(--muted-foreground));
     }
 
     /* Pulsing animation for location marker */
@@ -220,6 +222,28 @@
 
     .pulse-marker {
         animation: pulse 2s ease-in-out infinite;
+        color: #0d6efd;
+    }
+
+    #currentLocation {
+        font-size: 1.2rem;
+    }
+
+    .input-group.rounded-pill {
+        overflow: hidden;
+    }
+
+    .input-group.rounded-pill .input-group-text {
+        border-radius: 50rem 0 0 50rem !important;
+    }
+
+    .input-group.rounded-pill .form-control {
+        border-radius: 0;
+    }
+
+    .form-control:focus {
+        border-color: #ced4da !important;
+        box-shadow: none !important;
     }
 </style>
 @endpush
@@ -254,11 +278,11 @@ document.addEventListener('DOMContentLoaded', function() {
     document.querySelectorAll('.category-btn').forEach(btn => {
         btn.addEventListener('click', function() {
             document.querySelectorAll('.category-btn').forEach(b => {
-                b.classList.remove('active', 'btn-danger');
-                b.classList.add('btn-outline-danger');
+                b.classList.remove('active', 'btn-primary');
+                b.classList.add('btn-outline-primary');
             });
-            this.classList.remove('btn-outline-danger');
-            this.classList.add('active', 'btn-danger');
+            this.classList.remove('btn-outline-primary');
+            this.classList.add('active', 'btn-primary');
 
             currentCategory = this.dataset.category;
             filterClubs();
@@ -338,8 +362,8 @@ function startWatchingLocation() {
 
 // Update location display
 function updateLocationDisplay(lat, lng) {
-    document.getElementById('currentLocation').textContent =
-        `${lat.toFixed(4)}, ${lng.toFixed(4)}`;
+    document.getElementById('currentLocation').innerHTML =
+        `<i class="bi bi-geo-alt-fill me-1 fs-5"></i>${lat.toFixed(4)}, ${lng.toFixed(4)}`;
     document.getElementById('modalLocationCoordinates').textContent =
         `Latitude: ${lat.toFixed(6)}, Longitude: ${lng.toFixed(6)}`;
 }
@@ -350,7 +374,7 @@ function initMap(lat, lng) {
         map.remove();
     }
 
-    map = L.map('map').setView([lat, lng], 13);
+    map = L.map('map', { attributionControl: false }).setView([lat, lng], 13);
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
         attribution: '&copy; OpenStreetMap contributors',
@@ -478,10 +502,10 @@ function displayClubs(clubs) {
                     </div>
 
                     <div class="d-grid gap-2">
-                        <button class="btn btn-danger">
+                        <button class="btn btn-primary">
                             <i class="bi bi-person-plus me-2"></i>Join Club
                         </button>
-                        <button class="btn btn-outline-danger">View Details</button>
+                        <button class="btn btn-outline-primary">View Details</button>
                     </div>
                 </div>
             </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index 0058144..1474139 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -26,10 +26,130 @@
 
     <!-- Custom Styles -->
     <style>
+        :root {
+          /* Base Colors */
+          --background: 220 15% 97%;
+          --foreground: 215 25% 27%;
+
+          --card: 0 0% 100%;
+          --card-foreground: 215 25% 27%;
+
+          /* Primary - Soft Purple */
+          --primary: 250 60% 70%;
+          --primary-foreground: 0 0% 100%;
+          --primary-hover: 250 60% 65%;
+
+          /* Secondary - Soft Sage Green */
+          --secondary: 140 30% 75%;
+          --secondary-foreground: 140 45% 25%;
+
+          /* Success - Soft Mint */
+          --success: 150 40% 70%;
+          --success-foreground: 150 45% 20%;
+
+          /* Warning - Soft Peach */
+          --warning: 35 60% 80%;
+          --warning-foreground: 35 60% 30%;
+
+          /* Info - Soft Sky Blue */
+          --info: 200 50% 75%;
+          --info-foreground: 200 60% 25%;
+
+          --muted: 220 15% 94%;
+          --muted-foreground: 215 15% 50%;
+
+          --accent: 250 60% 92%;
+          --accent-foreground: 250 60% 30%;
+
+          --destructive: 0 50% 75%;
+          --destructive-foreground: 0 0% 100%;
+
+          --border: 220 15% 88%;
+          --input: 220 15% 92%;
+          --ring: 250 60% 70%;
+          --radius: 0.75rem;
+
+          /* Sidebar */
+          --sidebar-background: 250 25% 96%;
+          --sidebar-foreground: 215 25% 35%;
+          --sidebar-primary: 250 60% 70%;
+          --sidebar-primary-foreground: 0 0% 100%;
+          --sidebar-accent: 250 25% 90%;
+          --sidebar-accent-foreground: 215 25% 40%;
+          --sidebar-border: 250 20% 85%;
+          --sidebar-ring: 250 60% 70%;
+
+          /* Gradients */
+          --gradient-primary: linear-gradient(135deg, hsl(250 60% 75%), hsl(250 60% 65%));
+          --gradient-secondary: linear-gradient(135deg, hsl(140 30% 80%), hsl(140 30% 70%));
+          --gradient-sidebar: linear-gradient(180deg, hsl(250 25% 98%), hsl(250 25% 94%));
+          --gradient-success: linear-gradient(135deg, hsl(150 40% 75%), hsl(150 40% 65%));
+          --gradient-warning: linear-gradient(135deg, hsl(35 60% 85%), hsl(35 60% 75%));
+          --gradient-info: linear-gradient(135deg, hsl(200 50% 80%), hsl(200 50% 70%));
+
+          /* Shadows */
+          --shadow-card: 0 2px 12px hsl(250 20% 70% / 0.08);
+          --shadow-elevated: 0 8px 30px hsl(250 20% 60% / 0.12);
+          --shadow-primary: 0 4px 20px hsl(250 60% 70% / 0.25);
+
+          /* Bootstrap Overrides */
+          --bs-primary: hsl(var(--primary));
+          --bs-secondary: hsl(var(--secondary));
+          --bs-success: hsl(var(--success));
+          --bs-info: hsl(var(--info));
+          --bs-warning: hsl(var(--warning));
+          --bs-danger: hsl(var(--destructive));
+          --bs-light: hsl(var(--muted));
+          --bs-dark: hsl(var(--foreground));
+          --bs-white: hsl(var(--card));
+          --bs-body-color: hsl(var(--foreground));
+          --bs-body-bg: hsl(var(--background));
+        }
+
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #f8f9fa;
+            background-color: hsl(var(--background));
         }
+
+        /* Theme Overrides */
+        .text-primary { color: hsl(var(--primary)) !important; }
+        .text-secondary { color: hsl(var(--secondary)) !important; }
+        .text-success { color: hsl(var(--success)) !important; }
+        .text-info { color: hsl(var(--info)) !important; }
+        .text-warning { color: hsl(var(--warning)) !important; }
+        .text-danger { color: hsl(var(--destructive)) !important; }
+        .text-muted { color: hsl(var(--muted-foreground)) !important; }
+
+        .bg-primary { background-color: hsl(var(--primary)) !important; }
+        .bg-secondary { background-color: hsl(var(--secondary)) !important; }
+        .bg-success { background-color: hsl(var(--success)) !important; }
+        .bg-info { background-color: hsl(var(--info)) !important; }
+        .bg-warning { background-color: hsl(var(--warning)) !important; }
+        .bg-danger { background-color: hsl(var(--destructive)) !important; }
+        .bg-light { background-color: hsl(var(--muted)) !important; }
+        .bg-white { background-color: #ffffff !important; }
+
+        .btn-primary {
+            background-color: hsl(var(--primary)) !important;
+            border-color: hsl(var(--primary)) !important;
+        }
+        .btn-primary:hover {
+            background-color: hsl(var(--primary-hover)) !important;
+            border-color: hsl(var(--primary-hover)) !important;
+        }
+        .btn-outline-primary {
+            color: hsl(var(--primary)) !important;
+            border-color: hsl(var(--primary)) !important;
+        }
+        .btn-outline-primary:hover {
+            background-color: hsl(var(--primary)) !important;
+            border-color: hsl(var(--primary)) !important;
+        }
+
+        .border { border-color: hsl(var(--border)) !important; }
+        .border-primary { border-color: hsl(var(--primary)) !important; }
+
+        .card { background-color: #ffffff !important; }
         .navbar-brand {
             font-weight: 600;
         }
@@ -50,12 +170,12 @@
             font-weight: 500;
         }
         .btn-primary {
-            background-color: #0d6efd;
-            border-color: #0d6efd;
+            background-color: hsl(var(--primary));
+            border-color: hsl(var(--primary));
         }
         .btn-primary:hover {
-            background-color: #0b5ed7;
-            border-color: #0a58ca;
+            background-color: hsl(var(--primary-hover));
+            border-color: hsl(var(--primary-hover));
         }
         .user-avatar {
             width: 32px;
@@ -68,8 +188,8 @@
             width: 32px;
             height: 32px;
             border-radius: 50%;
-            background-color: #0d6efd;
-            color: white;
+            background-color: hsl(var(--primary));
+            color: hsl(var(--primary-foreground));
             display: inline-flex;
             align-items: center;
             justify-content: center;
@@ -94,8 +214,8 @@
             position: absolute;
             top: 0;
             right: 0;
-            background-color: #dc3545;
-            color: white;
+            background-color: hsl(var(--destructive));
+            color: hsl(var(--destructive-foreground));
             border-radius: 50%;
             width: 18px;
             height: 18px;
@@ -112,24 +232,24 @@
         }
         .notification-item {
             padding: 0.75rem 1rem;
-            border-bottom: 1px solid #f0f0f0;
+            border-bottom: 1px solid hsl(var(--border));
             transition: background-color 0.2s;
         }
         .notification-item:hover {
-            background-color: #f8f9fa;
+            background-color: hsl(var(--muted));
         }
         .notification-item:last-child {
             border-bottom: none;
         }
         .notification-item.unread {
-            background-color: #f0f7ff;
+            background-color: hsl(var(--accent));
         }
     </style>
 
     @stack('styles')
 </head>
 <body>
-    <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
+    <nav class="navbar navbar-expand-md navbar-light bg-light shadow-sm">
         <div class="container">
             <a class="navbar-brand" href="{{ Auth::check() ? route('clubs.explore') : url('/') }}">
                 <img src="{{ asset('images/logo.png') }}" alt="TAKEONE" height="40">