diff --git a/.gitignore b/.gitignore
index 32334ae..41c70d1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -177,3 +177,4 @@ terraform/aws/lambda_email_processor.zip
 PR-description.txt
 commit-message.txt
 frontend/dev-dist/
+frontend/bundle-stats.html
diff --git a/backend/app/main.py b/backend/app/main.py
index beca04f..24245c3 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -33,7 +33,7 @@
 numeric_level = getattr(logging, log_level, logging.WARNING)
 
 # Configure security settings based on environment variable
-# In production with Cloudflare + Fly.io + nginx + frontend + backend, 
+# In production with Cloudflare + Fly.io + nginx + frontend + backend,
 # we expect ~6 proxy hops, so we set a higher threshold
 suspicious_proxy_chain_length = int(os.getenv("SUSPICIOUS_PROXY_CHAIN_LENGTH", "3"))
 
@@ -65,8 +65,8 @@
 # Check if we're running tests by looking for pytest in sys.argv or test environment
 import sys
 is_testing = (
-    "pytest" in sys.modules or 
-    "pytest" in sys.argv[0] or 
+    "pytest" in sys.modules or
+    "pytest" in sys.argv[0] or
     any("pytest" in arg for arg in sys.argv) or
     os.getenv("PYTEST_CURRENT_TEST") or
     os.getenv("TESTING") == "true"
@@ -82,7 +82,7 @@
             tables_exist = True
     except:
         tables_exist = False
-    
+
     if not tables_exist:
         print("🔧 Creating database tables...")
         Base.metadata.create_all(bind=engine)
@@ -99,17 +99,17 @@ async def lifespan(app: FastAPI):
     # Startup logic
     startup_end_time = time.time()
     total_startup_time = startup_end_time - startup_start_time
-    
+
     print(f"🚀 Application startup completed in {total_startup_time:.2f}s")
     print(f"🎯 FastAPI application fully started in {total_startup_time:.2f}s")
     print(f"🔧 Environment: {os.getenv('ENVIRONMENT', 'production')}")
     print(f"🔧 Log level: {log_level}")
     print(f"🔧 Database URL configured: {'Yes' if os.getenv('DATABASE_URL') else 'No'}")
-    
+
     # Warm database connections for better performance
     from app.database import warm_database_connections
     warm_database_connections()
-    
+
     yield
     # Shutdown logic (if any) can be added here
 
@@ -132,19 +132,19 @@ async def custom_rate_limit_handler(request: Request, exc: RateLimitExceeded):
     """
     # Try to extract limit information from the exception
     limit_detail = str(exc.detail) if hasattr(exc, 'detail') else "rate limit exceeded"
-    
+
     # Calculate reset time (default to 1 minute for most limits, 24 hours for daily limits)
     # This is a best-effort calculation - slowapi doesn't expose the exact reset time
     reset_time = datetime.now(timezone.utc) + timedelta(minutes=1)
-    
+
     # Check if this is a daily limit (contains "day" or "/d")
     if "day" in limit_detail.lower() or "/d" in limit_detail.lower():
         reset_time = datetime.now(timezone.utc) + timedelta(days=1)
-    
+
     reset_timestamp = int(reset_time.timestamp())
     now = datetime.now(timezone.utc)
     retry_after_seconds = int((reset_time - now).total_seconds())
-    
+
     # Special handling for resend verification endpoint
     if "/resend-verification" in str(request.url.path):
         from app.routers.auth import RESEND_VERIFICATION_RATE_LIMIT
@@ -183,20 +183,25 @@ async def custom_rate_limit_handler(request: Request, exc: RateLimitExceeded):
 
 app.add_exception_handler(RateLimitExceeded, custom_rate_limit_handler)
 
-# Configure CORS with more restrictive settings
+# Configure CORS
 # Get allowed origins from environment variable or use defaults
 allowed_origins_env = os.getenv("ALLOWED_ORIGINS", "")
 if allowed_origins_env:
-    # Parse comma-separated origins from environment variable
-    allow_origins = [origin.strip() for origin in allowed_origins_env.split(",")]
+    # Robust parsing: remove brackets, all quotes, and whitespace
+    import re
+    clean_env = re.sub(r'[\[\]"\'\s]', '', allowed_origins_env)
+    allow_origins = [origin.strip() for origin in clean_env.split(",") if origin.strip()]
 else:
     # Default origins for development
     allow_origins = [
-        "http://localhost",  # Allow nginx proxy
+        "http://localhost",
         "http://localhost:3000",
         "http://127.0.0.1:3000"
     ]
 
+# Log the allowed origins for debugging
+print(f"CORS Allowed Origins: {allow_origins}")
+
 app.add_middleware(
     CORSMiddleware,
     allow_origins=allow_origins,
@@ -229,7 +234,7 @@ async def fix_request_scheme(request: Request, call_next):
     elif not forwarded_proto and request.headers.get("host", "").endswith(".gr"):
         # If no header but domain suggests production, default to HTTPS
         request.scope["scheme"] = "https"
-    
+
     response = await call_next(request)
     return response
 
@@ -239,7 +244,7 @@ async def add_security_headers(request, call_next):
     # Get client IP for security monitoring (but don't log every request)
     client_ip = get_client_ip(request)
     formatted_ip = format_ip_for_logging(client_ip, include_private=False)
-    
+
     response = await call_next(request)
 
     # Security headers
@@ -283,27 +288,27 @@ async def add_security_headers(request, call_next):
 @app.middleware("http")
 async def enhanced_security_logging(request, call_next):
     """Enhanced security logging with detailed client IP analysis"""
-    
+
     # Get client IP for logging (this already extracts only the first IP)
     client_ip = get_client_ip(request)
     formatted_ip = format_ip_for_logging(client_ip)
-    
+
     # Check for truly suspicious patterns (not just normal proxy chains)
     suspicious_activity = False
     suspicious_details = []
-    
+
     # Check X-Forwarded-For for unusual patterns (not just multiple IPs)
     if 'X-Forwarded-For' in request.headers:
         forwarded_for = request.headers['X-Forwarded-For']
         ips = [ip.strip() for ip in forwarded_for.split(',')]
         suspicious_details.append(f"Suspicious IPs: {(ips)}")
-        
+
         # Only log if there are more than the configured threshold (unusual proxy chain)
         # or if the first IP looks suspicious
         if len(ips) > suspicious_proxy_chain_length:
             suspicious_activity = True
             suspicious_details.append(f"Unusual proxy chain length: {len(ips)} IPs (threshold: {suspicious_proxy_chain_length})")
-        
+
         # Check if first IP is private but others are public (potential spoofing)
         if len(ips) >= 2:
             first_ip = ips[0]
@@ -311,7 +316,7 @@ async def enhanced_security_logging(request, call_next):
             if is_private_ip(first_ip) and not is_private_ip(second_ip):
                 suspicious_activity = True
                 suspicious_details.append("Private IP followed by public IP in chain")
-    
+
     # Check for other suspicious patterns
     suspicious_headers = ['X-Real-IP', 'X-Forwarded-Host', 'X-Forwarded-Proto']
     for header in suspicious_headers:
@@ -321,20 +326,20 @@ async def enhanced_security_logging(request, call_next):
             if ',' in str(header_value):
                 suspicious_activity = True
                 suspicious_details.append(f"Multiple values in {header}")
-    
+
     # Log suspicious activity only once per request
     if suspicious_activity:
         print(f"[SECURITY] Suspicious activity detected from IP: {formatted_ip}")
         for detail in suspicious_details:
             print(f"[SECURITY] Detail: {detail}")
-    
+
     # Process the request
     response = await call_next(request)
-    
+
     # Only log failed requests or truly suspicious activity
     if response.status_code >= 400 or suspicious_activity:
         print(f"[SECURITY] {request.method} {request.url.path} - Status: {response.status_code} - Client IP: {formatted_ip}")
-    
+
     return response
 
 # Mount static files for uploads with security restrictions
@@ -350,20 +355,20 @@ def load_routers():
     """Load routers lazily to improve startup time"""
     print("🔧 Loading API routers...")
     router_start = time.time()
-    
+
     # Import only the most essential routers for startup
     from app.routers import auth, users, settings, notifications
-    
+
     # Include only the most critical routers (others moved to lazy loading)
     app.include_router(auth.router, prefix="/api/v1/auth", tags=["Authentication"])
     app.include_router(users.router, prefix="/api/v1/users", tags=["Users"])
     app.include_router(settings.router, prefix="/api/v1/settings", tags=["Settings"])
     app.include_router(notifications.router, prefix="/api/v1/notifications", tags=["Notifications"])
-    
+
     # Import unsubscribe router
     from app.routers import unsubscribe
     app.include_router(unsubscribe.router, prefix="/api/v1", tags=["Unsubscribe"])
-    
+
     # Moved to lazy loading:
     # - dive_sites (already implemented)
     # - newsletters (heavy AI/ML dependencies)
@@ -375,7 +380,7 @@ def load_routers():
     # - tags (can be lazy loaded, not critical for homepage)
     # - dives (can be lazy loaded, not critical for homepage)
     # - dive_routes (can be lazy loaded, not critical for homepage)
-    
+
     router_time = time.time() - router_start
     print(f"✅ Essential routers loaded in {router_time:.2f}s")
 
@@ -384,10 +389,10 @@ def load_dive_sites_router():
     if not hasattr(app, '_dive_sites_router_loaded'):
         print("🔧 Loading dive-sites router lazily...")
         router_start = time.time()
-        
+
         from app.routers import dive_sites
         app.include_router(dive_sites.router, prefix="/api/v1/dive-sites", tags=["Dive Sites"])
-        
+
         app._dive_sites_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Dive-sites router loaded lazily in {router_time:.2f}s")
@@ -397,10 +402,10 @@ def load_newsletters_router():
     if not hasattr(app, '_newsletters_router_loaded'):
         print("🔧 Loading newsletters router lazily...")
         router_start = time.time()
-        
+
         from app.routers import newsletters
         app.include_router(newsletters.router, prefix="/api/v1/newsletters", tags=["Newsletters"])
-        
+
         app._newsletters_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Newsletters router loaded lazily in {router_time:.2f}s")
@@ -410,10 +415,10 @@ def load_system_router():
     if not hasattr(app, '_system_router_loaded'):
         print("🔧 Loading system router lazily...")
         router_start = time.time()
-        
+
         from app.routers import system
         app.include_router(system.router, prefix="/api/v1/admin/system", tags=["System"])
-        
+
         app._system_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ System router loaded lazily in {router_time:.2f}s")
@@ -423,10 +428,10 @@ def load_privacy_router():
     if not hasattr(app, '_privacy_router_loaded'):
         print("🔧 Loading privacy router lazily...")
         router_start = time.time()
-        
+
         from app.routers import privacy
         app.include_router(privacy.router, prefix="/api/v1/privacy", tags=["Privacy"])
-        
+
         app._privacy_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Privacy router loaded lazily in {router_time:.2f}s")
@@ -436,10 +441,10 @@ def load_diving_organizations_router():
     if not hasattr(app, '_diving_organizations_router_loaded'):
         print("🔧 Loading diving organizations router lazily...")
         router_start = time.time()
-        
+
         from app.routers import diving_organizations
         app.include_router(diving_organizations.router, prefix="/api/v1/diving-organizations", tags=["Diving Organizations"])
-        
+
         app._diving_organizations_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Diving organizations router loaded lazily in {router_time:.2f}s")
@@ -449,10 +454,10 @@ def load_user_certifications_router():
     if not hasattr(app, '_user_certifications_router_loaded'):
         print("🔧 Loading user certifications router lazily...")
         router_start = time.time()
-        
+
         from app.routers import user_certifications
         app.include_router(user_certifications.router, prefix="/api/v1/user-certifications", tags=["User Certifications"])
-        
+
         app._user_certifications_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ User certifications router loaded lazily in {router_time:.2f}s")
@@ -462,10 +467,10 @@ def load_diving_centers_router():
     if not hasattr(app, '_diving_centers_router_loaded'):
         print("🔧 Loading diving centers router lazily...")
         router_start = time.time()
-        
+
         from app.routers import diving_centers
         app.include_router(diving_centers.router, prefix="/api/v1/diving-centers", tags=["Diving Centers"])
-        
+
         app._diving_centers_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Diving centers router loaded lazily in {router_time:.2f}s")
@@ -475,10 +480,10 @@ def load_tags_router():
     if not hasattr(app, '_tags_router_loaded'):
         print("🔧 Loading tags router lazily...")
         router_start = time.time()
-        
+
         from app.routers import tags
         app.include_router(tags.router, prefix="/api/v1/tags", tags=["Tags"])
-        
+
         app._tags_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Tags router loaded lazily in {router_time:.2f}s")
@@ -488,10 +493,10 @@ def load_dives_router():
     if not hasattr(app, '_dives_router_loaded'):
         print("🔧 Loading dives router lazily...")
         router_start = time.time()
-        
+
         from app.routers.dives import router as dives_router
         app.include_router(dives_router, prefix="/api/v1/dives", tags=["Dives"])
-        
+
         app._dives_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Dives router loaded lazily in {router_time:.2f}s")
@@ -501,10 +506,10 @@ def load_dive_routes_router():
     if not hasattr(app, '_dive_routes_router_loaded'):
         print("🔧 Loading dive routes router lazily...")
         router_start = time.time()
-        
+
         from app.routers import dive_routes
         app.include_router(dive_routes.router, prefix="/api/v1/dive-routes", tags=["Dive Routes"])
-        
+
         app._dive_routes_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Dive routes router loaded lazily in {router_time:.2f}s")
@@ -514,10 +519,10 @@ def load_search_router():
     if not hasattr(app, '_search_router_loaded'):
         print("🔧 Loading search router lazily...")
         router_start = time.time()
-        
+
         from app.routers import search
         app.include_router(search.router, prefix="/api/v1/search", tags=["Search"])
-        
+
         app._search_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Search router loaded lazily in {router_time:.2f}s")
@@ -527,10 +532,10 @@ def load_share_router():
     if not hasattr(app, '_share_router_loaded'):
         print("🔧 Loading share router lazily...")
         router_start = time.time()
-        
+
         from app.routers import share
         app.include_router(share.router, prefix="/api/v1/share", tags=["Share"])
-        
+
         app._share_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Share router loaded lazily in {router_time:.2f}s")
@@ -540,10 +545,10 @@ def load_weather_router():
     if not hasattr(app, '_weather_router_loaded'):
         print("🔧 Loading weather router lazily...")
         router_start = time.time()
-        
+
         from app.routers import weather
         app.include_router(weather.router, prefix="/api/v1/weather", tags=["Weather"])
-        
+
         app._weather_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Weather router loaded lazily in {router_time:.2f}s")
@@ -553,10 +558,10 @@ def load_admin_chat_router():
     if not hasattr(app, '_admin_chat_router_loaded'):
         print("🔧 Loading admin-chat router lazily...")
         router_start = time.time()
-        
+
         from app.routers.admin import chat as admin_chat
         app.include_router(admin_chat.router, prefix="/api/v1/admin/chat", tags=["Admin Chatbot"])
-        
+
         app._admin_chat_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Admin-chat router loaded lazily in {router_time:.2f}s")
@@ -569,82 +574,82 @@ def load_admin_chat_router():
 async def lazy_router_loading(request: Request, call_next):
     """Load routers lazily when first accessed"""
     path = request.url.path
-    
+
     # Check if we need to load all routers for documentation
     is_docs = path in DOCS_PATHS
-    
+
     # Load dive-sites router
     if (path.startswith("/api/v1/dive-sites") or is_docs) and not hasattr(app, '_dive_sites_router_loaded'):
         load_dive_sites_router()
-    
+
     # Load newsletters router
     if (path.startswith("/api/v1/newsletters") or is_docs) and not hasattr(app, '_newsletters_router_loaded'):
         load_newsletters_router()
-    
+
     # Load system router
     if (path.startswith("/api/v1/admin/system") or is_docs) and not hasattr(app, '_system_router_loaded'):
         load_system_router()
-    
+
     # Load admin chat router
     if (path.startswith("/api/v1/admin/chat") or is_docs) and not hasattr(app, '_admin_chat_router_loaded'):
         load_admin_chat_router()
-    
+
     # Load privacy router
     if (path.startswith("/api/v1/privacy") or is_docs) and not hasattr(app, '_privacy_router_loaded'):
         load_privacy_router()
-    
+
     # Load diving organizations router
     if (path.startswith("/api/v1/diving-organizations") or is_docs) and not hasattr(app, '_diving_organizations_router_loaded'):
         load_diving_organizations_router()
-    
+
     # Load user certifications router
     if (path.startswith("/api/v1/user-certifications") or is_docs) and not hasattr(app, '_user_certifications_router_loaded'):
         load_user_certifications_router()
-    
+
     # Load diving centers router
     if (path.startswith("/api/v1/diving-centers") or is_docs) and not hasattr(app, '_diving_centers_router_loaded'):
         load_diving_centers_router()
-    
+
     # Load tags router
     if (path.startswith("/api/v1/tags") or is_docs) and not hasattr(app, '_tags_router_loaded'):
         load_tags_router()
-    
+
     # Load dives router
     if (path.startswith("/api/v1/dives") or is_docs) and not hasattr(app, '_dives_router_loaded'):
         load_dives_router()
-    
+
     # Load dive routes router
     if (path.startswith("/api/v1/dive-routes") or is_docs) and not hasattr(app, '_dive_routes_router_loaded'):
         load_dive_routes_router()
-    
+
     # Load search router
     if (path.startswith("/api/v1/search") or is_docs) and not hasattr(app, '_search_router_loaded'):
         load_search_router()
-    
+
     # Load share router
     if (path.startswith("/api/v1/share") or is_docs) and not hasattr(app, '_share_router_loaded'):
         load_share_router()
-    
+
     # Load weather router
     if (path.startswith("/api/v1/weather") or is_docs) and not hasattr(app, '_weather_router_loaded'):
         load_weather_router()
-    
+
     # Load short links router
     if (path.startswith("/l/") or path.startswith("/api/v1/short-links") or is_docs) and not hasattr(app, '_short_links_router_loaded'):
         load_short_links_router()
-    
+
     # Load chat router
     if (path.startswith("/api/v1/chat") or is_docs) and not hasattr(app, '_chat_router_loaded'):
         load_chat_router()
-        
+
     # Load user chat router
     if (path.startswith("/api/v1/user-chat") or is_docs) and not hasattr(app, '_user_chat_router_loaded'):
         load_user_chat_router()
-        
+
     # Load user friendships router
     if (path.startswith("/api/v1/user-friendships") or is_docs) and not hasattr(app, '_user_friendships_router_loaded'):
         load_user_friendships_router()
-    
+
     response = await call_next(request)
     return response
 
@@ -653,13 +658,13 @@ def load_short_links_router():
     if not hasattr(app, '_short_links_router_loaded'):
         print("🔧 Loading short links router lazily...")
         router_start = time.time()
-        
+
         from app.routers import short_links
         # Mount the creation endpoint under API
         app.include_router(short_links.api_router, prefix="/api/v1/short-links", tags=["Short Links"])
         # Mount the redirection endpoint at /l
         app.include_router(short_links.redirect_router, prefix="/l", tags=["Short Links Redirection"])
-        
+
         app._short_links_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Short links router loaded lazily in {router_time:.2f}s")
@@ -669,10 +674,10 @@ def load_chat_router():
     if not hasattr(app, '_chat_router_loaded'):
         print("🔧 Loading chat router lazily...")
         router_start = time.time()
-        
+
         from app.routers import chat
         app.include_router(chat.router, prefix="/api/v1/chat", tags=["Chatbot"])
-        
+
         app._chat_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ Chat router loaded lazily in {router_time:.2f}s")
@@ -682,10 +687,10 @@ def load_user_chat_router():
     if not hasattr(app, '_user_chat_router_loaded'):
         print("🔧 Loading user chat router lazily...")
         router_start = time.time()
-        
+
         from app.routers import user_chat
         app.include_router(user_chat.router, prefix="/api/v1/user-chat", tags=["User Chat"])
-        
+
         app._user_chat_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ User Chat router loaded lazily in {router_time:.2f}s")
@@ -695,10 +700,10 @@ def load_user_friendships_router():
     if not hasattr(app, '_user_friendships_router_loaded'):
         print("🔧 Loading user friendships router lazily...")
         router_start = time.time()
-        
+
         from app.routers import user_friendships
         app.include_router(user_friendships.router, prefix="/api/v1/user-friendships", tags=["User Friendships"])
-        
+
         app._user_friendships_router_loaded = True
         router_time = time.time() - router_start
         print(f"✅ User Friendships router loaded lazily in {router_time:.2f}s")
diff --git a/frontend/index.html b/frontend/index.html
index 9bb4042..eafba4b 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -101,6 +101,6 @@
         </nav>
       </div>
     </div>
-    <script type="module" src="/src/index.js"></script>
+    <script type="module" src="/src/index.jsx"></script>
   </body>
 </html>
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index eea4ecc..3d8b797 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -73,6 +73,7 @@
         "postcss": "^8.4.31",
         "prettier": "^3.2.5",
         "puppeteer": "^24.15.0",
+        "rollup-plugin-visualizer": "^7.0.1",
         "tailwindcss": "^3.4.17",
         "vite": "^7.3.0",
         "vite-plugin-pwa": "^1.2.0",
@@ -6706,6 +6707,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/bundle-name": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bundle-name/-/bundle-name-4.1.0.tgz",
+      "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "run-applescript": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/cac": {
       "version": "6.7.14",
       "resolved": "https://registry.npmjs.org/cac/-/cac-6.7.14.tgz",
@@ -6799,9 +6816,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001775",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001775.tgz",
-      "integrity": "sha512-s3Qv7Lht9zbVKE9XoTyRG6wVDCKdtOFIjBGg3+Yhn6JaytuNKPIjBMTMIY1AnOH3seL5mvF+x33oGAyK3hVt3A==",
+      "version": "1.0.30001777",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001777.tgz",
+      "integrity": "sha512-tmN+fJxroPndC74efCdp12j+0rk0RHwV5Jwa1zWaFVyw2ZxAuPeG8ZgWC3Wz7uSjT3qMRQ5XHZ4COgQmsCMJAQ==",
       "dev": true,
       "funding": [
         {
@@ -7559,6 +7576,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/default-browser": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/default-browser/-/default-browser-5.5.0.tgz",
+      "integrity": "sha512-H9LMLr5zwIbSxrmvikGuI/5KGhZ8E2zH3stkMgM5LpOWDutGM2JZaj460Udnf1a+946zc7YBgrqEWwbk7zHvGw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "bundle-name": "^4.1.0",
+        "default-browser-id": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/default-browser-id": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/default-browser-id/-/default-browser-id-5.0.1.tgz",
+      "integrity": "sha512-x1VCxdX4t+8wVfd1so/9w+vQ4vx7lKd2Qp5tDRutErwmR85OgmfX7RlLRMWafRMY7hbEiXIbudNrjOAPa/hL8Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -7577,6 +7624,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-3.0.0.tgz",
+      "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/define-properties": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
@@ -9099,6 +9159,19 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.5.0.tgz",
+      "integrity": "sha512-CQ+bEO+Tva/qlmw24dCejulK5pMzVnUOFOijVogd3KQs07HnRIgp8TGipvCCRT06xeYEbpbgwaCxglFyiuIcmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
@@ -9837,6 +9910,22 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-docker": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-3.0.0.tgz",
+      "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "is-docker": "cli.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -9915,6 +10004,38 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-in-ssh": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-in-ssh/-/is-in-ssh-1.0.0.tgz",
+      "integrity": "sha512-jYa6Q9rH90kR1vKB6NM7qqd1mge3Fx4Dhw5TVlK1MUBqhEOuCagrEHMevNuCcbECmXZ0ThXkRm+Ymr51HwEPAw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/is-inside-container": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-inside-container/-/is-inside-container-1.0.0.tgz",
+      "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-docker": "^3.0.0"
+      },
+      "bin": {
+        "is-inside-container": "cli.js"
+      },
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/is-map": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
@@ -10178,6 +10299,22 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-wsl": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-3.1.1.tgz",
+      "integrity": "sha512-e6rvdUCiQCAuumZslxRJWR/Doq4VpPR82kqclvcS0efgt430SlGIk05vdCN58+VrzgtIcfNODjozVielycD4Sw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-inside-container": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/isarray": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
@@ -11884,6 +12021,27 @@
         "wrappy": "1"
       }
     },
+    "node_modules/open": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-11.0.0.tgz",
+      "integrity": "sha512-smsWv2LzFjP03xmvFoJ331ss6h+jixfA4UUV/Bsiyuu4YJPfN+FIQGOIiv4w9/+MoHkfkJ22UIaQWRVFRfH6Vw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "default-browser": "^5.4.0",
+        "define-lazy-prop": "^3.0.0",
+        "is-in-ssh": "^1.0.0",
+        "is-inside-container": "^1.0.0",
+        "powershell-utils": "^0.1.0",
+        "wsl-utils": "^0.3.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -12411,6 +12569,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/powershell-utils": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/powershell-utils/-/powershell-utils-0.1.0.tgz",
+      "integrity": "sha512-dM0jVuXJPsDN6DvRpea484tCUaMiXWjuCn++HGTqUWzGDjv5tZkEZldAJ/UMlqRYGFrD/etByo4/xOuC/snX2A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -13485,6 +13656,188 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/rollup-plugin-visualizer": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-7.0.1.tgz",
+      "integrity": "sha512-UJUT4+1Ho4OcWmPYU3sYXgUqI8B8Ayfe06MX7y0qCJ1K8aGoKtR/NDd/2nZqM7ADkrzny+I99Ul7GgyoiVNAgg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "open": "^11.0.0",
+        "picomatch": "^4.0.2",
+        "source-map": "^0.7.4",
+        "yargs": "^18.0.0"
+      },
+      "bin": {
+        "rollup-plugin-visualizer": "dist/bin/cli.js"
+      },
+      "engines": {
+        "node": ">=22"
+      },
+      "peerDependencies": {
+        "rolldown": "1.x || ^1.0.0-beta || ^1.0.0-rc",
+        "rollup": "2.x || 3.x || 4.x"
+      },
+      "peerDependenciesMeta": {
+        "rolldown": {
+          "optional": true
+        },
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/ansi-regex": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
+      "integrity": "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/ansi-styles": {
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.3.tgz",
+      "integrity": "sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/cliui": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-9.0.1.tgz",
+      "integrity": "sha512-k7ndgKhwoQveBL+/1tqGJYNz097I7WOvwbmmU2AR5+magtbjPWQTS1C5vzGkBC8Ym8UWRzfKUzUUqFLypY4Q+w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^7.2.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/emoji-regex": {
+      "version": "10.6.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.6.0.tgz",
+      "integrity": "sha512-toUI84YS5YmxW219erniWD0CIVOo46xGKColeNQRgOzDorgBi1v4D71/OFzgD9GO2UGKIv1C3Sp8DAn0+j5w7A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/string-width": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.2.0.tgz",
+      "integrity": "sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/strip-ansi": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.2.0.tgz",
+      "integrity": "sha512-yDPMNjp4WyfYBkHnjIRLfca1i6KMyGCtsVgoKe/z1+6vukgaENdgGBZt+ZmKPc4gavvEZ5OgHfHdrazhgNyG7w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^6.2.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/wrap-ansi": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.2.tgz",
+      "integrity": "sha512-42AtmgqjV+X1VpdOfyTGOYRi0/zsoLqtXQckTmqTeybT+BDIbM/Guxo7x3pE2vtpr1ok6xRqM9OpBe+Jyoqyww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/yargs": {
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-18.0.0.tgz",
+      "integrity": "sha512-4UEqdc2RYGHZc7Doyqkrqiln3p9X2DZVxaGbwhn2pi7MrRagKaOcIKe8L3OxYcbhXLgLFUS3zAYuQjKBQgmuNg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^9.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "string-width": "^7.2.0",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^22.0.0"
+      },
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
+    "node_modules/rollup-plugin-visualizer/node_modules/yargs-parser": {
+      "version": "22.0.0",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-22.0.0.tgz",
+      "integrity": "sha512-rwu/ClNdSMpkSrUb+d6BRsSkLUq1fmfsY6TOpYzTwvwkg1/NRG85KBy3kq++A8LKQwX6lsu+aWad+2khvuXrqw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "^20.19.0 || ^22.12.0 || >=23"
+      }
+    },
     "node_modules/rrweb-cssom": {
       "version": "0.8.0",
       "resolved": "https://registry.npmjs.org/rrweb-cssom/-/rrweb-cssom-0.8.0.tgz",
@@ -13492,6 +13845,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/run-applescript": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/run-applescript/-/run-applescript-7.1.0.tgz",
+      "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -16353,6 +16719,23 @@
         }
       }
     },
+    "node_modules/wsl-utils": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/wsl-utils/-/wsl-utils-0.3.1.tgz",
+      "integrity": "sha512-g/eziiSUNBSsdDJtCLB8bdYEUMj4jR7AGeUo96p/3dTafgjHhpF4RiCFPiRILwjQoDXx5MqkBr4fwWtR3Ky4Wg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "is-wsl": "^3.1.0",
+        "powershell-utils": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=20"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 9206b6e..24ace2c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -67,6 +67,7 @@
     "postcss": "^8.4.31",
     "prettier": "^3.2.5",
     "puppeteer": "^24.15.0",
+    "rollup-plugin-visualizer": "^7.0.1",
     "tailwindcss": "^3.4.17",
     "vite": "^7.3.0",
     "vite-plugin-pwa": "^1.2.0",
@@ -78,6 +79,7 @@
     "postinstall": "npx update-browserslist-db@latest || true",
     "start": "vite",
     "build": "vite build",
+    "preview": "vite preview",
     "build:prod": "vite build",
     "build:with-compression": "npm run build && ./scripts/precompress-assets.sh",
     "test": "vitest",
diff --git a/frontend/src/App.js b/frontend/src/App.jsx
similarity index 100%
rename from frontend/src/App.js
rename to frontend/src/App.jsx
diff --git a/frontend/src/components/AdvancedDiveProfileChart.js b/frontend/src/components/AdvancedDiveProfileChart.jsx
similarity index 100%
rename from frontend/src/components/AdvancedDiveProfileChart.js
rename to frontend/src/components/AdvancedDiveProfileChart.jsx
diff --git a/frontend/src/components/AnimatedCounter.js b/frontend/src/components/AnimatedCounter.jsx
similarity index 100%
rename from frontend/src/components/AnimatedCounter.js
rename to frontend/src/components/AnimatedCounter.jsx
diff --git a/frontend/src/components/Avatar.js b/frontend/src/components/Avatar.jsx
similarity index 100%
rename from frontend/src/components/Avatar.js
rename to frontend/src/components/Avatar.jsx
diff --git a/frontend/src/components/BackgroundLogo.js b/frontend/src/components/BackgroundLogo.jsx
similarity index 100%
rename from frontend/src/components/BackgroundLogo.js
rename to frontend/src/components/BackgroundLogo.jsx
diff --git a/frontend/src/components/Breadcrumbs.js b/frontend/src/components/Breadcrumbs.jsx
similarity index 100%
rename from frontend/src/components/Breadcrumbs.js
rename to frontend/src/components/Breadcrumbs.jsx
diff --git a/frontend/src/components/BuddyRequests.js b/frontend/src/components/BuddyRequests.jsx
similarity index 100%
rename from frontend/src/components/BuddyRequests.js
rename to frontend/src/components/BuddyRequests.jsx
diff --git a/frontend/src/components/CommunityVerdict.js b/frontend/src/components/CommunityVerdict.jsx
similarity index 100%
rename from frontend/src/components/CommunityVerdict.js
rename to frontend/src/components/CommunityVerdict.jsx
diff --git a/frontend/src/components/DesktopSearchBar.js b/frontend/src/components/DesktopSearchBar.jsx
similarity index 100%
rename from frontend/src/components/DesktopSearchBar.js
rename to frontend/src/components/DesktopSearchBar.jsx
diff --git a/frontend/src/components/DiveInfoGrid.jsx b/frontend/src/components/DiveInfoGrid.jsx
new file mode 100644
index 0000000..a3ccb54
--- /dev/null
+++ b/frontend/src/components/DiveInfoGrid.jsx
@@ -0,0 +1,330 @@
+import { Row, Col } from 'antd';
+import { Grid } from 'antd-mobile';
+import { Calendar, Clock, Eye, TrendingUp, User } from 'lucide-react';
+import React from 'react';
+
+import { getDifficultyLabel, getDifficultyColorClasses } from '../utils/difficultyHelpers';
+import { getTagColor } from '../utils/tagHelpers';
+
+const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
+  return (
+    <>
+      <div className='flex items-center gap-2 mb-4 pb-2 border-b border-gray-100'>
+        <h2 className='text-xl font-semibold'>Dive Information</h2>
+        {hasDeco && (
+          <span className='text-red-500 font-medium text-sm border border-red-200 bg-red-50 px-2 py-0.5 rounded'>
+            Deco
+          </span>
+        )}
+      </div>
+
+      {isMobile ? (
+        // Mobile View: Ant Design Mobile Grid
+        <div className='mb-4'>
+          <Grid columns={2} gap={16}>
+            <Grid.Item>
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Difficulty
+                </span>
+                <div className='flex items-center mt-0.5'>
+                  {dive.difficulty_code ? (
+                    <span
+                      className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getDifficultyColorClasses(dive.difficulty_code)}`}
+                    >
+                      {dive.difficulty_label || getDifficultyLabel(dive.difficulty_code)}
+                    </span>
+                  ) : (
+                    <span className='text-sm text-gray-500'>-</span>
+                  )}
+                </div>
+              </div>
+            </Grid.Item>
+
+            <Grid.Item>
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Date & Time
+                </span>
+                <div className='flex items-center gap-1.5'>
+                  <Calendar className='w-4 h-4 text-gray-400' />
+                  <span className='text-sm font-medium text-gray-900'>
+                    {formatDate(dive.dive_date)}
+                    {dive.dive_time && (
+                      <span className='text-gray-500 font-normal ml-1'>
+                        {formatTime(dive.dive_time)}
+                      </span>
+                    )}
+                  </span>
+                </div>
+              </div>
+            </Grid.Item>
+
+            <Grid.Item>
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Max Depth
+                </span>
+                <div className='flex items-center gap-1.5'>
+                  <TrendingUp className='w-4 h-4 text-gray-400' />
+                  <span className='text-sm font-bold text-gray-900'>
+                    {dive.max_depth || '-'}
+                    <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
+                  </span>
+                </div>
+              </div>
+            </Grid.Item>
+
+            <Grid.Item>
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Duration
+                </span>
+                <div className='flex items-center gap-1.5'>
+                  <Clock className='w-4 h-4 text-gray-400' />
+                  <span className='text-sm font-bold text-gray-900'>
+                    {dive.duration || '-'}
+                    <span className='text-xs font-normal text-gray-400 ml-0.5'>min</span>
+                  </span>
+                </div>
+              </div>
+            </Grid.Item>
+
+            {dive.average_depth && (
+              <Grid.Item>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Avg Depth
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <TrendingUp size={15} className='text-gray-500' />
+                    <span className='text-sm font-medium'>{dive.average_depth}m</span>
+                  </div>
+                </div>
+              </Grid.Item>
+            )}
+
+            {dive.visibility_rating && (
+              <Grid.Item>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Visibility
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <Eye size={15} className='text-gray-500' />
+                    <span className='text-sm font-medium'>{dive.visibility_rating}/10</span>
+                  </div>
+                </div>
+              </Grid.Item>
+            )}
+
+            {dive.user_rating && (
+              <Grid.Item>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Rating
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <img
+                      src='/arts/divemap_shell.png'
+                      alt='Rating'
+                      className='w-4 h-4 object-contain'
+                    />
+                    <span className='text-sm font-medium'>{dive.user_rating}/10</span>
+                  </div>
+                </div>
+              </Grid.Item>
+            )}
+
+            {dive.suit_type && (
+              <Grid.Item>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Suit
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <User size={15} className='text-gray-500' />
+                    <span className='text-sm font-medium capitalize'>
+                      {dive.suit_type.replace('_', ' ')}
+                    </span>
+                  </div>
+                </div>
+              </Grid.Item>
+            )}
+
+            <Grid.Item span={2}>
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Tags
+                </span>
+                {dive.tags && dive.tags.length > 0 ? (
+                  <div className='flex flex-wrap gap-2 mt-0.5'>
+                    {dive.tags.map(tag => (
+                      <span
+                        key={tag.id}
+                        className={`px-2 py-0.5 rounded-full text-xs font-medium ${getTagColor(tag.name)}`}
+                      >
+                        {tag.name}
+                      </span>
+                    ))}
+                  </div>
+                ) : (
+                  <span className='text-sm text-gray-400'>-</span>
+                )}
+              </div>
+            </Grid.Item>
+          </Grid>
+        </div>
+      ) : (
+        // Desktop View
+        <>
+          <div className='mb-4'>
+            <Row gutter={[32, 16]}>
+              <Col>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Difficulty
+                  </span>
+                  <div className='flex items-center mt-0.5'>
+                    {dive.difficulty_code ? (
+                      <span
+                        className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getDifficultyColorClasses(dive.difficulty_code)}`}
+                      >
+                        {dive.difficulty_label || getDifficultyLabel(dive.difficulty_code)}
+                      </span>
+                    ) : (
+                      <span className='text-sm text-gray-500'>-</span>
+                    )}
+                  </div>
+                </div>
+              </Col>
+
+              <Col>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Max Depth
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <TrendingUp className='w-4 h-4 text-gray-400' />
+                    <span className='text-sm font-bold text-gray-900'>
+                      {dive.max_depth || '-'}
+                      <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
+                    </span>
+                  </div>
+                </div>
+              </Col>
+
+              <Col>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Duration
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <Clock className='w-4 h-4 text-gray-400' />
+                    <span className='text-sm font-bold text-gray-900'>
+                      {dive.duration || '-'}
+                      <span className='text-xs font-normal text-gray-400 ml-0.5'>min</span>
+                    </span>
+                  </div>
+                </div>
+              </Col>
+
+              <Col>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Date & Time
+                  </span>
+                  <div className='flex items-center gap-1.5'>
+                    <Calendar className='w-4 h-4 text-gray-400' />
+                    <span className='text-sm font-medium text-gray-900'>
+                      {formatDate(dive.dive_date)}
+                      {dive.dive_time && (
+                        <span className='text-gray-500 font-normal ml-1'>
+                          {formatTime(dive.dive_time)}
+                        </span>
+                      )}
+                    </span>
+                  </div>
+                </div>
+              </Col>
+
+              <Col flex='auto'>
+                <div className='flex flex-col'>
+                  <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                    Tags
+                  </span>
+                  {dive.tags && dive.tags.length > 0 ? (
+                    <div className='flex flex-wrap gap-2 mt-0.5'>
+                      {dive.tags.map(tag => (
+                        <span
+                          key={tag.id}
+                          className={`px-2 py-0.5 rounded-full text-xs font-medium ${getTagColor(tag.name)}`}
+                        >
+                          {tag.name}
+                        </span>
+                      ))}
+                    </div>
+                  ) : (
+                    <span className='text-sm text-gray-400'>-</span>
+                  )}
+                </div>
+              </Col>
+            </Row>
+          </div>
+
+          <div className='mb-4'>
+            <Row gutter={[16, 16]}>
+              {dive.average_depth && (
+                <Col xs={24} sm={12} md={6}>
+                  <div className='flex items-center gap-2'>
+                    <TrendingUp size={15} className='text-gray-500' />
+                    <span className='text-sm text-gray-600'>Avg Depth:</span>
+                    <span className='font-medium'>{dive.average_depth}m</span>
+                  </div>
+                </Col>
+              )}
+
+              {dive.visibility_rating && (
+                <Col xs={24} sm={12} md={6}>
+                  <div className='flex items-center gap-2'>
+                    <Eye size={15} className='text-gray-500' />
+                    <span className='text-sm text-gray-600'>Visibility:</span>
+                    <span className='font-medium'>{dive.visibility_rating}/10</span>
+                  </div>
+                </Col>
+              )}
+
+              {dive.user_rating && (
+                <Col xs={24} sm={12} md={6}>
+                  <div className='flex items-center gap-2'>
+                    <img
+                      src='/arts/divemap_shell.png'
+                      alt='Rating'
+                      className='w-4 h-4 object-contain'
+                    />
+                    <span className='text-sm text-gray-600'>Rating:</span>
+                    <span className='font-medium'>{dive.user_rating}/10</span>
+                  </div>
+                </Col>
+              )}
+
+              {dive.suit_type && (
+                <Col xs={24} sm={12} md={6}>
+                  <div className='flex items-center gap-2'>
+                    <User size={15} className='text-gray-500' />
+                    <span className='text-sm text-gray-600'>Suit:</span>
+                    <span className='font-medium capitalize'>
+                      {dive.suit_type.replace('_', ' ')}
+                    </span>
+                  </div>
+                </Col>
+              )}
+            </Row>
+          </div>
+        </>
+      )}
+    </>
+  );
+};
+
+export default DiveInfoGrid;
diff --git a/frontend/src/components/DiveMapComponents.jsx b/frontend/src/components/DiveMapComponents.jsx
new file mode 100644
index 0000000..e937b87
--- /dev/null
+++ b/frontend/src/components/DiveMapComponents.jsx
@@ -0,0 +1,256 @@
+import L from 'leaflet';
+import escape from 'lodash/escape';
+import React, { useEffect, useRef, useCallback } from 'react';
+import { useMap } from 'react-leaflet';
+
+import { getRouteTypeColor } from '../utils/colorPalette';
+import { calculateRouteBearings, formatBearing } from '../utils/routeUtils';
+
+// Custom zoom control component for dive detail page
+export const ZoomControl = ({ currentZoom }) => {
+  return (
+    <div className='absolute top-2 left-12 bg-white rounded px-2 py-1 text-xs font-medium z-10 shadow-sm border border-gray-200'>
+      Zoom: {currentZoom.toFixed(1)}
+    </div>
+  );
+};
+
+// Custom zoom tracking component for dive detail page
+export const ZoomTracker = ({ onZoomChange }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    const handleZoomEnd = () => {
+      onZoomChange(map.getZoom());
+    };
+
+    map.on('zoomend', handleZoomEnd);
+
+    // Set initial zoom
+    onZoomChange(map.getZoom());
+
+    return () => {
+      map.off('zoomend', handleZoomEnd);
+    };
+  }, [map, onZoomChange]);
+
+  return null;
+};
+
+// Custom route layer component for dive detail page
+export const MapViewUpdater = ({ viewport }) => {
+  const map = useMap();
+
+  useEffect(() => {
+    if (viewport && viewport.center && viewport.zoom) {
+      map.setView(viewport.center, viewport.zoom);
+    }
+  }, [map, viewport?.center, viewport?.zoom]);
+
+  return null;
+};
+
+export const DiveRouteLayer = ({ route, diveSiteId, diveSite }) => {
+  const map = useMap();
+  const routeLayerRef = useRef(null);
+  const diveSiteMarkerRef = useRef(null);
+  const bearingMarkersRef = useRef([]);
+  const hasRenderedRef = useRef(false);
+  const lastRouteIdRef = useRef(null);
+
+  // Function to update bearing markers visibility based on zoom
+  const updateBearingMarkersVisibility = useCallback(() => {
+    const currentZoom = map.getZoom();
+    const shouldShow = currentZoom >= 16 && currentZoom <= 18;
+
+    bearingMarkersRef.current.forEach(marker => {
+      if (shouldShow) {
+        if (!map.hasLayer(marker)) {
+          map.addLayer(marker);
+        }
+      } else {
+        if (map.hasLayer(marker)) {
+          map.removeLayer(marker);
+        }
+      }
+    });
+  }, [map]);
+
+  useEffect(() => {
+    if (!route?.route_data) {
+      return;
+    }
+
+    // Check if this is the same route as before
+    const isSameRoute = lastRouteIdRef.current === route?.id;
+
+    // Prevent duplicate rendering for the same route
+    if (hasRenderedRef.current && routeLayerRef.current && isSameRoute) {
+      // Still update bearing visibility on zoom even if route hasn't changed
+      updateBearingMarkersVisibility();
+      return;
+    }
+
+    // Clear existing layers and bearing markers
+    if (routeLayerRef.current) {
+      map.removeLayer(routeLayerRef.current);
+    }
+    if (diveSiteMarkerRef.current) {
+      map.removeLayer(diveSiteMarkerRef.current);
+    }
+    bearingMarkersRef.current.forEach(marker => {
+      map.removeLayer(marker);
+    });
+    bearingMarkersRef.current = [];
+
+    // Add dive site marker
+    if (diveSite && diveSite.latitude && diveSite.longitude) {
+      const diveSiteMarker = L.marker([diveSite.latitude, diveSite.longitude], {
+        icon: L.divIcon({
+          className: 'dive-site-marker',
+          html: '<div style="background-color: #dc2626; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
+          iconSize: [20, 20],
+          iconAnchor: [10, 10],
+        }),
+      });
+
+      diveSiteMarker.bindPopup(`
+        <div class="p-2">
+          <h3 class="font-semibold text-gray-800 mb-1">${escape(diveSite.name)}</h3>
+          <p class="text-sm text-gray-600">Dive Site</p>
+        </div>
+      `);
+
+      map.addLayer(diveSiteMarker);
+      diveSiteMarkerRef.current = diveSiteMarker;
+    }
+
+    // Add route layer
+    const routeLayer = L.geoJSON(route.route_data, {
+      style: feature => {
+        // Determine color based on route type and segment type
+        let routeColor;
+        if (feature.properties?.color) {
+          routeColor = feature.properties.color;
+        } else if (feature.properties?.segmentType) {
+          routeColor = getRouteTypeColor(feature.properties.segmentType);
+        } else {
+          routeColor = getRouteTypeColor(route.route_type);
+        }
+
+        return {
+          color: routeColor,
+          weight: 6, // Increased weight for better visibility
+          opacity: 0.9,
+          fillOpacity: 0.3,
+        };
+      },
+      pointToLayer: (feature, latlng) => {
+        let routeColor;
+        if (feature.properties?.color) {
+          routeColor = feature.properties.color;
+        } else if (feature.properties?.segmentType) {
+          routeColor = getRouteTypeColor(feature.properties.segmentType);
+        } else {
+          routeColor = getRouteTypeColor(route.route_type);
+        }
+
+        return L.circleMarker(latlng, {
+          radius: 8, // Increased radius for better visibility
+          fillColor: routeColor,
+          color: routeColor,
+          weight: 3,
+          opacity: 0.9,
+          fillOpacity: 0.7,
+        });
+      },
+    });
+
+    // Add popup to route
+    routeLayer.bindPopup(`
+      <div class="p-2">
+        <h3 class="font-semibold text-gray-800 mb-1">${escape(route.name)}</h3>
+        <p class="text-sm text-gray-600 mb-2">${escape(route.description || 'No description')}</p>
+        <div class="flex items-center gap-2 text-xs text-gray-500">
+          <span class="px-2 py-1 bg-gray-100 rounded">${escape(route.route_type)}</span>
+          <span>by ${escape(route.creator_username || 'Unknown')}</span>
+        </div>
+      </div>
+    `);
+
+    map.addLayer(routeLayer);
+    routeLayerRef.current = routeLayer;
+
+    // Calculate bearings and create markers (but don't add to map yet)
+    const bearings = calculateRouteBearings(route.route_data);
+    bearings.forEach(({ position, bearing }) => {
+      const bearingLabel = formatBearing(bearing, true);
+
+      // Create a custom icon with bearing text
+      const bearingIcon = L.divIcon({
+        className: 'bearing-label',
+        html: `
+          <div style="
+            background-color: rgba(255, 255, 255, 0.9);
+            border: 2px solid #2563eb;
+            border-radius: 4px;
+            padding: 2px 6px;
+            font-size: 11px;
+            font-weight: bold;
+            color: #1e40af;
+            white-space: nowrap;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+            text-align: center;
+          ">
+            ${bearingLabel}
+          </div>
+        `,
+        iconSize: [60, 20],
+        iconAnchor: [30, 10],
+      });
+
+      const bearingMarker = L.marker(position, {
+        icon: bearingIcon,
+        interactive: false,
+        zIndexOffset: 500,
+      });
+
+      // Store marker but don't add to map yet
+      bearingMarkersRef.current.push(bearingMarker);
+    });
+
+    // Update visibility based on initial zoom
+    updateBearingMarkersVisibility();
+
+    // Mark as rendered and track route ID
+    hasRenderedRef.current = true;
+    lastRouteIdRef.current = route?.id;
+
+    // Listen for zoom changes
+    map.on('zoomend', updateBearingMarkersVisibility);
+
+    return () => {
+      map.off('zoomend', updateBearingMarkersVisibility);
+
+      // Only cleanup if we're not about to re-render with the same route
+      const isSameRoute = lastRouteIdRef.current === route?.id;
+
+      if (routeLayerRef.current && !isSameRoute) {
+        map.removeLayer(routeLayerRef.current);
+      }
+
+      if (diveSiteMarkerRef.current && !isSameRoute) {
+        map.removeLayer(diveSiteMarkerRef.current);
+      }
+
+      if (!isSameRoute) {
+        bearingMarkersRef.current.forEach(marker => {
+          map.removeLayer(marker);
+        });
+        bearingMarkersRef.current = [];
+      }
+    };
+  }, [map, route?.id, route?.route_data, diveSite?.id, updateBearingMarkersVisibility]);
+
+  return null;
+};
diff --git a/frontend/src/components/DiveProfileModal.js b/frontend/src/components/DiveProfileModal.jsx
similarity index 73%
rename from frontend/src/components/DiveProfileModal.js
rename to frontend/src/components/DiveProfileModal.jsx
index 17dd073..1fbf674 100644
--- a/frontend/src/components/DiveProfileModal.js
+++ b/frontend/src/components/DiveProfileModal.jsx
@@ -1,10 +1,10 @@
 import { Modal } from 'antd';
 import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
+import { useEffect, useState, lazy, Suspense } from 'react';
 
 import { useResponsive } from '../hooks/useResponsive';
 
-import AdvancedDiveProfileChart from './AdvancedDiveProfileChart';
+const AdvancedDiveProfileChart = lazy(() => import('./AdvancedDiveProfileChart'));
 
 const DiveProfileModal = ({
   isOpen,
@@ -58,15 +58,23 @@ const DiveProfileModal = ({
     >
       {/* Chart content - scrollable */}
       <div className={`flex-1 overflow-y-auto min-h-0 ${isMobileLandscape ? 'p-1' : 'p-6'}`}>
-        <AdvancedDiveProfileChart
-          profileData={profileData}
-          isLoading={isLoading}
-          error={error}
-          showTemperature={showTemperature}
-          screenSize={isMobileLandscape ? 'mobile' : screenSize}
-          onDecoStatusChange={onDecoStatusChange}
-          onClose={isMobileLandscape ? onClose : undefined}
-        />
+        <Suspense
+          fallback={
+            <div className='h-full flex items-center justify-center bg-gray-50 rounded'>
+              Loading Detailed Chart...
+            </div>
+          }
+        >
+          <AdvancedDiveProfileChart
+            profileData={profileData}
+            isLoading={isLoading}
+            error={error}
+            showTemperature={showTemperature}
+            screenSize={isMobileLandscape ? 'mobile' : screenSize}
+            onDecoStatusChange={onDecoStatusChange}
+            onClose={isMobileLandscape ? onClose : undefined}
+          />
+        </Suspense>
       </div>
     </Modal>
   );
diff --git a/frontend/src/components/DiveProfileUpload.js b/frontend/src/components/DiveProfileUpload.jsx
similarity index 100%
rename from frontend/src/components/DiveProfileUpload.js
rename to frontend/src/components/DiveProfileUpload.jsx
diff --git a/frontend/src/components/DiveSidebar.jsx b/frontend/src/components/DiveSidebar.jsx
new file mode 100644
index 0000000..1212085
--- /dev/null
+++ b/frontend/src/components/DiveSidebar.jsx
@@ -0,0 +1,86 @@
+import { MapPin } from 'lucide-react';
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+
+import { decodeHtmlEntities } from '../utils/htmlDecode';
+import { slugify } from '../utils/slugify';
+import { renderTextWithLinks } from '../utils/textHelpers';
+
+const DiveSidebar = ({ dive, formatDate }) => {
+  return (
+    <div className='space-y-6'>
+      {/* Dive Site Information */}
+      {dive.dive_site && (
+        <div className='bg-white rounded-lg shadow p-6'>
+          <h2 className='text-xl font-semibold mb-4'>Dive Site</h2>
+          <div className='space-y-3'>
+            <div className='flex items-center gap-2'>
+              <MapPin size={15} className='text-gray-500' />
+              <span className='font-medium'>{dive.dive_site.name}</span>
+            </div>
+            {dive.dive_site.description && (
+              <p className='text-sm text-gray-600'>
+                {renderTextWithLinks(decodeHtmlEntities(dive.dive_site.description))}
+              </p>
+            )}
+            <RouterLink
+              to={`/dive-sites/${dive.dive_site.id}/${slugify(dive.dive_site.name)}`}
+              state={{ from: window.location.pathname + window.location.search }}
+              className='text-blue-600 hover:text-blue-800 text-sm'
+            >
+              View dive site details →
+            </RouterLink>
+          </div>
+        </div>
+      )}
+
+      {/* Diving Center Information */}
+      {dive.diving_center && (
+        <div className='bg-white rounded-lg shadow p-6'>
+          <h2 className='text-xl font-semibold mb-4'>Diving Center</h2>
+          <div className='space-y-3'>
+            <div className='flex items-center gap-2'>
+              <MapPin size={15} className='text-gray-500' />
+              <span className='font-medium'>{dive.diving_center.name}</span>
+            </div>
+            {dive.diving_center.description && (
+              <p className='text-sm text-gray-600'>
+                {renderTextWithLinks(decodeHtmlEntities(dive.diving_center.description))}
+              </p>
+            )}
+            <RouterLink
+              to={`/diving-centers/${dive.diving_center.id}/${slugify(dive.diving_center.name)}`}
+              state={{ from: window.location.pathname + window.location.search }}
+              className='text-blue-600 hover:text-blue-800 text-sm'
+            >
+              View diving center details →
+            </RouterLink>
+          </div>
+        </div>
+      )}
+
+      {/* Statistics */}
+      <div className='bg-white rounded-lg shadow p-6'>
+        <h2 className='text-xl font-semibold mb-4'>Statistics</h2>
+        <div className='space-y-3'>
+          <div className='flex justify-between'>
+            <span className='text-gray-600'>Total Dives</span>
+            <span className='font-medium'>{dive.user?.number_of_dives || 0}</span>
+          </div>
+          <div className='flex justify-between'>
+            <span className='text-gray-600'>Dive Date</span>
+            <span className='font-medium'>{formatDate(dive.dive_date)}</span>
+          </div>
+          {dive.created_at && (
+            <div className='flex justify-between'>
+              <span className='text-gray-600'>Logged</span>
+              <span className='font-medium'>{formatDate(dive.created_at)}</span>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default DiveSidebar;
diff --git a/frontend/src/components/DiveSiteCard.jsx b/frontend/src/components/DiveSiteCard.jsx
new file mode 100644
index 0000000..c00fbe4
--- /dev/null
+++ b/frontend/src/components/DiveSiteCard.jsx
@@ -0,0 +1,386 @@
+import { Globe, User, TrendingUp, Fish, ChevronRight, Route } from 'lucide-react';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { getDifficultyLabel, getDifficultyColorClasses } from '../utils/difficultyHelpers';
+import { decodeHtmlEntities } from '../utils/htmlDecode';
+import { slugify } from '../utils/slugify';
+import { getTagColor } from '../utils/tagHelpers';
+import { renderTextWithLinks } from '../utils/textHelpers';
+
+export const DiveSiteListCard = ({
+  site,
+  compactLayout,
+  getMediaLink,
+  getThumbnailUrl,
+  handleFilterChange,
+}) => {
+  return (
+    <div
+      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 relative ${compactLayout ? 'p-4' : 'p-6'}`}
+    >
+      <div className='flex gap-4 sm:gap-6'>
+        {site.thumbnail && (
+          <Link
+            to={getMediaLink(site)}
+            className='shrink-0 w-24 h-24 sm:w-40 sm:h-32 rounded-lg overflow-hidden bg-gray-100 hidden sm:block'
+          >
+            <img
+              src={getThumbnailUrl(site)}
+              alt={site.name}
+              className='w-full h-full object-cover hover:scale-105 transition-transform duration-300'
+              loading='lazy'
+            />
+          </Link>
+        )}
+        <div className='flex flex-col space-y-3 sm:space-y-4 flex-1 min-w-0'>
+          {/* HEADER ROW */}
+          <div className='flex items-start justify-between gap-4'>
+            <div className='flex-1 min-w-0'>
+              {/* Kicker: Location */}
+              {(site.country || site.region) && (
+                <div className='flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-blue-600 mb-1.5'>
+                  <Globe className='w-3 h-3' />
+                  {site.country && (
+                    <button
+                      onClick={e => {
+                        e.preventDefault();
+                        handleFilterChange('country', site.country);
+                      }}
+                      className='hover:underline hover:text-blue-800 transition-colors'
+                    >
+                      {site.country}
+                    </button>
+                  )}
+                  {site.country && site.region && <span className='mx-1'>&rsaquo;</span>}
+                  {site.region && (
+                    <button
+                      onClick={e => {
+                        e.preventDefault();
+                        handleFilterChange('region', site.region);
+                      }}
+                      className='hover:underline hover:text-blue-800 transition-colors'
+                    >
+                      {site.region}
+                    </button>
+                  )}
+                </div>
+              )}
+
+              {/* Title: Site Name */}
+              <h3
+                className={`font-semibold text-gray-900 leading-snug flex items-center gap-2 flex-wrap ${compactLayout ? 'text-lg' : 'text-xl'}`}
+              >
+                <Link
+                  to={`/dive-sites/${site.id}/${slugify(site.name)}`}
+                  state={{
+                    from: window.location.pathname + window.location.search,
+                  }}
+                  className='hover:text-blue-600 transition-colors'
+                >
+                  {site.name}
+                </Link>
+                {site.route_count > 0 && (
+                  <span className='inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold uppercase tracking-wider'>
+                    <Route className='w-2.5 h-2.5' />
+                    {site.route_count} Route{site.route_count > 1 ? 's' : ''}
+                  </span>
+                )}
+              </h3>
+            </div>
+
+            {/* Top Right: Rating */}
+            {site.average_rating !== undefined && site.average_rating !== null && (
+              <div className='flex flex-col items-end gap-1'>
+                <div className='flex items-center gap-1.5 text-yellow-500'>
+                  <img
+                    src='/arts/divemap_shell.png'
+                    alt='Rating'
+                    className='w-5 h-5 object-contain'
+                  />
+                  <span className='text-lg font-bold text-gray-900'>
+                    {Number(site.average_rating).toFixed(1)}
+                    <span className='text-xs font-normal text-gray-400 ml-0.5'>/10</span>
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Content Row: Byline, Description, and Mobile Thumbnail */}
+          <div className='flex gap-4 items-start'>
+            <div className='flex-1 min-w-0'>
+              {/* Meta Byline (Creator) */}
+              {site.created_by_username && (
+                <div className='text-xs text-gray-500 flex items-center gap-1.5 mb-2'>
+                  <div className='flex items-center gap-1'>
+                    <User className='w-3.5 h-3.5' />
+                    <span>{site.created_by_username}</span>
+                  </div>
+                </div>
+              )}
+
+              {/* BODY: Description */}
+              {site.description && (
+                <div
+                  className={`text-gray-600 leading-relaxed line-clamp-3 ${compactLayout ? 'text-xs' : 'text-sm'}`}
+                >
+                  {renderTextWithLinks(decodeHtmlEntities(site.description), {
+                    shorten: false,
+                    isUGC: true,
+                  })}
+                </div>
+              )}
+            </div>
+
+            {/* Mobile Thumbnail */}
+            {site.thumbnail && (
+              <Link
+                to={getMediaLink(site)}
+                className='sm:hidden shrink-0 w-20 h-20 rounded-lg overflow-hidden bg-gray-100'
+              >
+                <img
+                  src={getThumbnailUrl(site)}
+                  alt={site.name}
+                  className='w-full h-full object-cover'
+                  loading='lazy'
+                />
+              </Link>
+            )}
+          </div>
+
+          {/* STATS STRIP (De-boxed) */}
+          <div className='flex flex-wrap gap-x-8 gap-y-3 py-3 border-y border-gray-50'>
+            {site.max_depth !== undefined && site.max_depth !== null && (
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Max Depth
+                </span>
+                <div className='flex items-center gap-1.5'>
+                  <TrendingUp className='w-4 h-4 text-gray-400' />
+                  <span className='text-sm font-bold text-gray-900'>
+                    {site.max_depth}
+                    <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
+                  </span>
+                </div>
+              </div>
+            )}
+            {site.difficulty_code && site.difficulty_code !== 'unspecified' && (
+              <div className='flex flex-col'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Level
+                </span>
+                <div className='flex items-center mt-0.5'>
+                  <span
+                    className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getDifficultyColorClasses(site.difficulty_code)}`}
+                  >
+                    {site.difficulty_label || getDifficultyLabel(site.difficulty_code)}
+                  </span>
+                </div>
+              </div>
+            )}
+            {site.marine_life && (
+              <div className='flex flex-col flex-1 min-w-[150px]'>
+                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
+                  Marine Life
+                </span>
+                <div className='flex items-center gap-1.5'>
+                  <Fish className='w-4 h-4 text-blue-400' />
+                  <span
+                    className='text-sm text-gray-700 truncate max-w-[200px]'
+                    title={site.marine_life}
+                  >
+                    {site.marine_life}
+                  </span>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* FOOTER: Tags & Actions */}
+          <div className='flex items-center justify-between gap-4 mt-auto'>
+            <div className='flex flex-wrap items-center gap-3'>
+              {/* Tags */}
+              {site.tags && site.tags.length > 0 && (
+                <div className='flex flex-wrap gap-1.5'>
+                  {site.tags.slice(0, 3).map((tag, index) => {
+                    const tagName = tag.name || tag;
+                    return (
+                      <span
+                        key={index}
+                        className={`px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors ${getTagColor(tagName)}`}
+                      >
+                        {tagName}
+                      </span>
+                    );
+                  })}
+                  {site.tags.length > 3 && (
+                    <span className='text-xs font-medium text-gray-400'>
+                      +{site.tags.length - 3}
+                    </span>
+                  )}
+                </div>
+              )}
+            </div>
+
+            <Link
+              to={`/dive-sites/${site.id}/${slugify(site.name)}`}
+              className='inline-flex items-center gap-1 text-sm font-semibold text-blue-600 hover:text-blue-800 transition-colors group'
+            >
+              View Details
+              <ChevronRight className='w-4 h-4 transition-transform group-hover:translate-x-0.5' />
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const DiveSiteGridCard = ({
+  site,
+  compactLayout,
+  getMediaLink,
+  getThumbnailUrl,
+  handleFilterChange,
+}) => {
+  return (
+    <div className='dive-item bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden'>
+      {site.thumbnail && (
+        <Link
+          to={getMediaLink(site)}
+          className='block w-full aspect-video overflow-hidden bg-gray-100'
+        >
+          <img
+            src={getThumbnailUrl(site)}
+            alt={site.name}
+            className='w-full h-full object-cover transition-transform duration-300 hover:scale-105'
+            loading='lazy'
+          />
+        </Link>
+      )}
+      <div className={`flex flex-col h-full ${compactLayout ? 'p-4' : 'p-6'}`}>
+        {/* Header: Kicker & Title */}
+        <div className='mb-3'>
+          {(site.country || site.region) && (
+            <div className='text-[10px] font-bold uppercase tracking-widest text-blue-600 mb-1 flex items-center gap-1'>
+              <Globe className='w-2.5 h-2.5' />
+              {site.country && (
+                <button
+                  onClick={e => {
+                    e.preventDefault();
+                    handleFilterChange('country', site.country);
+                  }}
+                  className='hover:underline hover:text-blue-800 transition-colors'
+                >
+                  {site.country}
+                </button>
+              )}
+              {site.country && site.region && <span className='mx-1'>&rsaquo;</span>}
+              {site.region && (
+                <button
+                  onClick={e => {
+                    e.preventDefault();
+                    handleFilterChange('region', site.region);
+                  }}
+                  className='hover:underline hover:text-blue-800 transition-colors'
+                >
+                  {site.region}
+                </button>
+              )}
+            </div>
+          )}
+          <div className='flex items-start justify-between gap-2'>
+            <h3 className='font-semibold text-gray-900 leading-snug line-clamp-1 flex-1'>
+              <Link
+                to={`/dive-sites/${site.id}/${slugify(site.name)}`}
+                className='hover:text-blue-600 transition-colors'
+              >
+                {site.name}
+              </Link>
+            </h3>
+          </div>
+        </div>
+
+        {/* Meta Byline (Creator) */}
+        {site.created_by_username && (
+          <div className='text-xs text-gray-500 flex items-center gap-1.5 mb-2'>
+            <div className='flex items-center gap-1'>
+              <User className='w-3.5 h-3.5' />
+              <span>{site.created_by_username}</span>
+            </div>
+          </div>
+        )}
+
+        {/* Body: Description */}
+        {site.description && (
+          <div className='text-xs text-gray-500 leading-relaxed line-clamp-2 mb-4'>
+            {renderTextWithLinks(decodeHtmlEntities(site.description), {
+              shorten: false,
+              isUGC: true,
+            })}
+          </div>
+        )}
+
+        {/* Stats Strip (Simplified for Grid) */}
+        {((site.average_rating !== undefined && site.average_rating !== null) ||
+          (site.max_depth !== undefined && site.max_depth !== null)) && (
+          <div className='grid grid-cols-2 gap-4 py-3 border-y border-gray-50 mb-4'>
+            {site.average_rating !== undefined && site.average_rating !== null && (
+              <div className='flex items-center gap-2'>
+                <img
+                  src='/arts/divemap_shell.png'
+                  alt='Rating'
+                  className='w-4 h-4 object-contain'
+                />
+                <div>
+                  <p className='text-[10px] text-gray-400 uppercase font-medium leading-none mb-0.5'>
+                    Rating
+                  </p>
+                  <p className='text-sm font-bold text-gray-900 leading-none'>
+                    {Number(site.average_rating).toFixed(1)}
+                  </p>
+                </div>
+              </div>
+            )}
+            {site.max_depth !== undefined && site.max_depth !== null && (
+              <div className='flex items-center gap-2'>
+                <TrendingUp className='w-4 h-4 text-gray-400' />
+                <div>
+                  <p className='text-[10px] text-gray-400 uppercase font-medium leading-none mb-0.5'>
+                    Max Depth
+                  </p>
+                  <p className='text-sm font-bold text-gray-900 leading-none'>{site.max_depth}m</p>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Footer */}
+        <div className='mt-auto flex items-center justify-between pt-2'>
+          <div className='flex gap-1'>
+            {site.tags &&
+              site.tags.slice(0, 2).map((tag, idx) => {
+                const tagName = tag.name || tag;
+                return (
+                  <span
+                    key={idx}
+                    className={`w-2 h-2 rounded-full ${getTagColor(tagName, true)}`}
+                    title={tagName}
+                  />
+                );
+              })}
+          </div>
+          <Link
+            to={`/dive-sites/${site.id}/${slugify(site.name)}`}
+            className='inline-flex items-center text-xs font-semibold text-blue-600 hover:text-blue-800 group'
+          >
+            Details
+            <ChevronRight className='w-3 h-3 ml-0.5 transition-transform group-hover:translate-x-0.5' />
+          </Link>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/src/components/DiveSiteRoutes.js b/frontend/src/components/DiveSiteRoutes.jsx
similarity index 100%
rename from frontend/src/components/DiveSiteRoutes.js
rename to frontend/src/components/DiveSiteRoutes.jsx
diff --git a/frontend/src/components/DiveSiteSidebar.jsx b/frontend/src/components/DiveSiteSidebar.jsx
new file mode 100644
index 0000000..f67712e
--- /dev/null
+++ b/frontend/src/components/DiveSiteSidebar.jsx
@@ -0,0 +1,168 @@
+import { Collapse } from 'antd';
+import { Link, MapPin } from 'lucide-react';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { formatCost, DEFAULT_CURRENCY } from '../utils/currency';
+import { decodeHtmlEntities } from '../utils/htmlDecode';
+import { slugify } from '../utils/slugify';
+
+import WeatherConditionsCard from './MarineConditionsCard';
+
+const DiveSiteSidebar = ({
+  diveSite,
+  windData,
+  isWindLoading,
+  setIsMarineExpanded,
+  divingCenters,
+  nearbyDiveSites,
+  isNearbyLoading,
+  setIsNearbyExpanded,
+}) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className='space-y-6'>
+      {/* Weather Conditions - Collapsible */}
+      <div className='bg-white rounded-lg shadow-md overflow-hidden'>
+        <Collapse
+          ghost
+          onChange={keys => setIsMarineExpanded(keys.includes('weather'))}
+          items={[
+            {
+              key: 'weather',
+              label: (
+                <span className='text-lg font-semibold text-gray-900'>
+                  Current Weather Conditions
+                </span>
+              ),
+              children: (
+                <div className='-m-4'>
+                  {/* Negative margin to counteract Collapse padding */}
+                  <WeatherConditionsCard windData={windData} loading={isWindLoading} />
+                </div>
+              ),
+            },
+          ]}
+        />
+      </div>
+
+      {/* Access Instructions - Desktop View Only */}
+      {diveSite.access_instructions && (
+        <div className='hidden lg:block bg-white p-4 sm:p-6 rounded-lg shadow-md'>
+          <h3 className='text-lg font-semibold text-gray-900 mb-4'>Access Instructions</h3>
+          <p className='text-gray-700 text-sm'>
+            {decodeHtmlEntities(diveSite.access_instructions)}
+          </p>
+        </div>
+      )}
+
+      {/* Associated Diving Centers - Moved to Sidebar */}
+      {divingCenters && divingCenters.length > 0 && (
+        <div className='bg-white p-4 sm:p-6 rounded-lg shadow-md'>
+          <h3 className='text-lg font-semibold text-gray-900 mb-4'>Diving Centers</h3>
+          <div className='space-y-4'>
+            {divingCenters.map(center => (
+              <div key={center.id} className='border rounded-lg p-3'>
+                <div className='flex flex-col gap-1 mb-2'>
+                  <h4 className='font-medium text-gray-900 text-sm'>{center.name}</h4>
+                  {center.dive_cost && (
+                    <span className='text-green-600 font-medium text-xs'>
+                      {formatCost(center.dive_cost, center.currency || DEFAULT_CURRENCY)}
+                    </span>
+                  )}
+                </div>
+                {center.description && (
+                  <p className='text-gray-600 text-xs mb-2 line-clamp-2'>
+                    {decodeHtmlEntities(center.description)}
+                  </p>
+                )}
+                <div className='flex flex-wrap gap-2 text-xs'>
+                  {center.email && (
+                    <a
+                      href={`mailto:${center.email}`}
+                      className='flex items-center text-blue-600 hover:text-blue-700'
+                      title='Email'
+                    >
+                      <Link className='h-3 w-3 mr-1' />
+                      Email
+                    </a>
+                  )}
+                  {center.phone && (
+                    <a
+                      href={`tel:${center.phone}`}
+                      className='flex items-center text-blue-600 hover:text-blue-700'
+                      title='Phone'
+                    >
+                      <Link className='h-3 w-3 mr-1' />
+                      Phone
+                    </a>
+                  )}
+                  {center.website && (
+                    <a
+                      href={center.website}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='flex items-center text-blue-600 hover:text-blue-700'
+                      title='Website'
+                    >
+                      <Link className='h-3 w-3 mr-1' />
+                      Web
+                    </a>
+                  )}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Nearby Dive Sites - Desktop View Only */}
+      {diveSite.latitude && diveSite.longitude && (
+        <div className='hidden lg:block bg-white rounded-lg shadow-md overflow-hidden'>
+          <Collapse
+            ghost
+            onChange={keys => setIsNearbyExpanded(keys.includes('nearby-desktop'))}
+            items={[
+              {
+                key: 'nearby-desktop',
+                label: (
+                  <span className='text-lg font-semibold text-gray-900'>Nearby Dive Sites</span>
+                ),
+                children: (
+                  <div className='space-y-2'>
+                    {isNearbyLoading ? (
+                      <div className='text-center py-4 text-gray-500'>Loading nearby sites...</div>
+                    ) : nearbyDiveSites && nearbyDiveSites.length > 0 ? (
+                      nearbyDiveSites.slice(0, 6).map(site => (
+                        <button
+                          key={site.id}
+                          onClick={() => navigate(`/dive-sites/${site.id}/${slugify(site.name)}`)}
+                          className='flex items-center p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left w-full'
+                        >
+                          <MapPin className='w-4 h-4 mr-2 flex-shrink-0 text-blue-600' />
+                          <div className='min-w-0 flex-1'>
+                            <div className='font-medium text-gray-900 text-sm truncate'>
+                              {site.name}
+                            </div>
+                            <div className='text-xs text-gray-500'>{site.distance_km} km away</div>
+                          </div>
+                        </button>
+                      ))
+                    ) : (
+                      <div className='text-center py-4 text-gray-500'>
+                        No nearby dive sites found.
+                      </div>
+                    )}
+                  </div>
+                ),
+              },
+            ]}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default DiveSiteSidebar;
diff --git a/frontend/src/components/DiveSiteSuitabilityLegend.js b/frontend/src/components/DiveSiteSuitabilityLegend.jsx
similarity index 100%
rename from frontend/src/components/DiveSiteSuitabilityLegend.js
rename to frontend/src/components/DiveSiteSuitabilityLegend.jsx
diff --git a/frontend/src/components/DiveSitesFilterBar.js b/frontend/src/components/DiveSitesFilterBar.jsx
similarity index 100%
rename from frontend/src/components/DiveSitesFilterBar.js
rename to frontend/src/components/DiveSitesFilterBar.jsx
diff --git a/frontend/src/components/DiveSitesMap.js b/frontend/src/components/DiveSitesMap.jsx
similarity index 100%
rename from frontend/src/components/DiveSitesMap.js
rename to frontend/src/components/DiveSitesMap.jsx
diff --git a/frontend/src/components/DivesMap.js b/frontend/src/components/DivesMap.jsx
similarity index 100%
rename from frontend/src/components/DivesMap.js
rename to frontend/src/components/DivesMap.jsx
diff --git a/frontend/src/components/DivingCenterForm.js b/frontend/src/components/DivingCenterForm.jsx
similarity index 100%
rename from frontend/src/components/DivingCenterForm.js
rename to frontend/src/components/DivingCenterForm.jsx
diff --git a/frontend/src/components/DivingCenterSearchableDropdown.js b/frontend/src/components/DivingCenterSearchableDropdown.jsx
similarity index 100%
rename from frontend/src/components/DivingCenterSearchableDropdown.js
rename to frontend/src/components/DivingCenterSearchableDropdown.jsx
diff --git a/frontend/src/components/DivingCentersDesktopSearchBar.js b/frontend/src/components/DivingCentersDesktopSearchBar.jsx
similarity index 100%
rename from frontend/src/components/DivingCentersDesktopSearchBar.js
rename to frontend/src/components/DivingCentersDesktopSearchBar.jsx
diff --git a/frontend/src/components/DivingCentersFilterBar.js b/frontend/src/components/DivingCentersFilterBar.jsx
similarity index 100%
rename from frontend/src/components/DivingCentersFilterBar.js
rename to frontend/src/components/DivingCentersFilterBar.jsx
diff --git a/frontend/src/components/DivingCentersMap.js b/frontend/src/components/DivingCentersMap.jsx
similarity index 100%
rename from frontend/src/components/DivingCentersMap.js
rename to frontend/src/components/DivingCentersMap.jsx
diff --git a/frontend/src/components/DivingCentersResponsiveFilterBar.js b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
similarity index 100%
rename from frontend/src/components/DivingCentersResponsiveFilterBar.js
rename to frontend/src/components/DivingCentersResponsiveFilterBar.jsx
diff --git a/frontend/src/components/EmailVerificationBanner.js b/frontend/src/components/EmailVerificationBanner.jsx
similarity index 100%
rename from frontend/src/components/EmailVerificationBanner.js
rename to frontend/src/components/EmailVerificationBanner.jsx
diff --git a/frontend/src/components/EmptyState.js b/frontend/src/components/EmptyState.jsx
similarity index 100%
rename from frontend/src/components/EmptyState.js
rename to frontend/src/components/EmptyState.jsx
diff --git a/frontend/src/components/ErrorPage.js b/frontend/src/components/ErrorPage.jsx
similarity index 100%
rename from frontend/src/components/ErrorPage.js
rename to frontend/src/components/ErrorPage.jsx
diff --git a/frontend/src/components/FuzzySearchInput.js b/frontend/src/components/FuzzySearchInput.jsx
similarity index 100%
rename from frontend/src/components/FuzzySearchInput.js
rename to frontend/src/components/FuzzySearchInput.jsx
diff --git a/frontend/src/components/GasTanksDisplay.js b/frontend/src/components/GasTanksDisplay.jsx
similarity index 100%
rename from frontend/src/components/GasTanksDisplay.js
rename to frontend/src/components/GasTanksDisplay.jsx
diff --git a/frontend/src/components/GlobalSearchBar.js b/frontend/src/components/GlobalSearchBar.jsx
similarity index 100%
rename from frontend/src/components/GlobalSearchBar.js
rename to frontend/src/components/GlobalSearchBar.jsx
diff --git a/frontend/src/components/HeroSection.js b/frontend/src/components/HeroSection.jsx
similarity index 100%
rename from frontend/src/components/HeroSection.js
rename to frontend/src/components/HeroSection.jsx
diff --git a/frontend/src/components/ImportDivesModal.js b/frontend/src/components/ImportDivesModal.jsx
similarity index 100%
rename from frontend/src/components/ImportDivesModal.js
rename to frontend/src/components/ImportDivesModal.jsx
diff --git a/frontend/src/components/LeafletMapView.js b/frontend/src/components/LeafletMapView.jsx
similarity index 100%
rename from frontend/src/components/LeafletMapView.js
rename to frontend/src/components/LeafletMapView.jsx
diff --git a/frontend/src/components/Lightbox/Lightbox.js b/frontend/src/components/Lightbox/Lightbox.jsx
similarity index 100%
rename from frontend/src/components/Lightbox/Lightbox.js
rename to frontend/src/components/Lightbox/Lightbox.jsx
diff --git a/frontend/src/components/Lightbox/ReactImage.js b/frontend/src/components/Lightbox/ReactImage.jsx
similarity index 100%
rename from frontend/src/components/Lightbox/ReactImage.js
rename to frontend/src/components/Lightbox/ReactImage.jsx
diff --git a/frontend/src/components/LoadingSkeleton.js b/frontend/src/components/LoadingSkeleton.jsx
similarity index 100%
rename from frontend/src/components/LoadingSkeleton.js
rename to frontend/src/components/LoadingSkeleton.jsx
diff --git a/frontend/src/components/Logo.js b/frontend/src/components/Logo.jsx
similarity index 100%
rename from frontend/src/components/Logo.js
rename to frontend/src/components/Logo.jsx
diff --git a/frontend/src/components/MapLayersPanel.js b/frontend/src/components/MapLayersPanel.jsx
similarity index 100%
rename from frontend/src/components/MapLayersPanel.js
rename to frontend/src/components/MapLayersPanel.jsx
diff --git a/frontend/src/components/MarineConditionsCard.js b/frontend/src/components/MarineConditionsCard.jsx
similarity index 100%
rename from frontend/src/components/MarineConditionsCard.js
rename to frontend/src/components/MarineConditionsCard.jsx
diff --git a/frontend/src/components/MaskedEmail.js b/frontend/src/components/MaskedEmail.jsx
similarity index 100%
rename from frontend/src/components/MaskedEmail.js
rename to frontend/src/components/MaskedEmail.jsx
diff --git a/frontend/src/components/MatchTypeBadge.js b/frontend/src/components/MatchTypeBadge.jsx
similarity index 100%
rename from frontend/src/components/MatchTypeBadge.js
rename to frontend/src/components/MatchTypeBadge.jsx
diff --git a/frontend/src/components/MiniMap.js b/frontend/src/components/MiniMap.jsx
similarity index 100%
rename from frontend/src/components/MiniMap.js
rename to frontend/src/components/MiniMap.jsx
diff --git a/frontend/src/components/MobileMapControls.js b/frontend/src/components/MobileMapControls.jsx
similarity index 100%
rename from frontend/src/components/MobileMapControls.js
rename to frontend/src/components/MobileMapControls.jsx
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.jsx
similarity index 100%
rename from frontend/src/components/Navbar.js
rename to frontend/src/components/Navbar.jsx
diff --git a/frontend/src/components/NavbarDesktopControls.js b/frontend/src/components/NavbarDesktopControls.jsx
similarity index 100%
rename from frontend/src/components/NavbarDesktopControls.js
rename to frontend/src/components/NavbarDesktopControls.jsx
diff --git a/frontend/src/components/NavbarMobileControls.js b/frontend/src/components/NavbarMobileControls.jsx
similarity index 100%
rename from frontend/src/components/NavbarMobileControls.js
rename to frontend/src/components/NavbarMobileControls.jsx
diff --git a/frontend/src/components/NewsletterUpload.js b/frontend/src/components/NewsletterUpload.jsx
similarity index 100%
rename from frontend/src/components/NewsletterUpload.js
rename to frontend/src/components/NewsletterUpload.jsx
diff --git a/frontend/src/components/NotificationBell.js b/frontend/src/components/NotificationBell.jsx
similarity index 100%
rename from frontend/src/components/NotificationBell.js
rename to frontend/src/components/NotificationBell.jsx
diff --git a/frontend/src/components/NotificationItem.js b/frontend/src/components/NotificationItem.jsx
similarity index 100%
rename from frontend/src/components/NotificationItem.js
rename to frontend/src/components/NotificationItem.jsx
diff --git a/frontend/src/components/OrganizationLogo.js b/frontend/src/components/OrganizationLogo.jsx
similarity index 100%
rename from frontend/src/components/OrganizationLogo.js
rename to frontend/src/components/OrganizationLogo.jsx
diff --git a/frontend/src/components/PageHeader.js b/frontend/src/components/PageHeader.jsx
similarity index 100%
rename from frontend/src/components/PageHeader.js
rename to frontend/src/components/PageHeader.jsx
diff --git a/frontend/src/components/PopularRoutes.js b/frontend/src/components/PopularRoutes.jsx
similarity index 100%
rename from frontend/src/components/PopularRoutes.js
rename to frontend/src/components/PopularRoutes.jsx
diff --git a/frontend/src/components/RateLimitError.js b/frontend/src/components/RateLimitError.jsx
similarity index 100%
rename from frontend/src/components/RateLimitError.js
rename to frontend/src/components/RateLimitError.jsx
diff --git a/frontend/src/components/ReportIssueButton.js b/frontend/src/components/ReportIssueButton.jsx
similarity index 100%
rename from frontend/src/components/ReportIssueButton.js
rename to frontend/src/components/ReportIssueButton.jsx
diff --git a/frontend/src/components/ResponsiveFilterBar.js b/frontend/src/components/ResponsiveFilterBar.js
deleted file mode 100644
index 0c86319..0000000
--- a/frontend/src/components/ResponsiveFilterBar.js
+++ /dev/null
@@ -1,2767 +0,0 @@
-import {
-  Filter,
-  X,
-  Search,
-  Wrench,
-  Settings,
-  List,
-  Map,
-  RotateCcw,
-  SortAsc,
-  SortDesc,
-  TrendingUp,
-  Grid,
-  ChevronDown,
-} from 'lucide-react';
-import PropTypes from 'prop-types';
-import { useState, useEffect, useRef } from 'react';
-
-import { searchUsers } from '../api';
-import useClickOutside from '../hooks/useClickOutside';
-import { useResponsiveScroll } from '../hooks/useResponsive';
-import { getDiveSites, getUniqueCountries, getUniqueRegions } from '../services/diveSites';
-import { searchDivingCenters } from '../services/divingCenters';
-import { getDifficultyOptions, getDifficultyLabel } from '../utils/difficultyHelpers';
-import { getTagColor } from '../utils/tagHelpers';
-
-import Modal from './ui/Modal';
-import Select from './ui/Select';
-
-const ResponsiveFilterBar = ({
-  showFilters = false,
-  onToggleFilters = () => {},
-  onClearFilters = () => {},
-  activeFiltersCount = 0,
-  filters = {},
-  onFilterChange = () => {},
-  onQuickFilter = () => {},
-  quickFilters = [],
-  className = '',
-  variant = 'sticky',
-  showQuickFilters = true,
-  showAdvancedToggle = true,
-  searchQuery = '',
-  onSearchChange = () => {},
-  onSearchSubmit = () => {},
-  // New sorting props
-  sortBy = '',
-  sortOrder = 'asc',
-  sortOptions = [],
-  onSortChange = () => {},
-  onReset = () => {},
-  viewMode = 'list',
-  onViewModeChange = () => {},
-  compactLayout = false,
-  onDisplayOptionChange = () => {},
-  // New prop for page-specific quick filters
-  pageType = 'dive-sites',
-  user = null,
-}) => {
-  const { isMobile, navbarVisible, searchBarVisible, quickFiltersVisible } = useResponsiveScroll();
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [isFilterOverlayOpen, setIsFilterOverlayOpen] = useState(false);
-  const [activeTab, setActiveTab] = useState('filters');
-  const searchBarRef = useRef(null);
-  const [searchBarHeight, setSearchBarHeight] = useState(64);
-
-  // Dive site search state (for dives page)
-  const [diveSiteSearch, setDiveSiteSearch] = useState('');
-  const [isDiveSiteDropdownOpen, setIsDiveSiteDropdownOpen] = useState(false);
-  const diveSiteDropdownRef = useRef(null);
-
-  // Searchable state for dive-trips page
-  const [divingCenterSearch, setDivingCenterSearch] = useState('');
-  const [divingCenterSearchResults, setDivingCenterSearchResults] = useState([]);
-  const [divingCenterSearchLoading, setDivingCenterSearchLoading] = useState(false);
-  const [isDivingCenterDropdownOpen, setIsDivingCenterDropdownOpen] = useState(false);
-  const divingCenterDropdownRef = useRef(null);
-  const divingCenterSearchTimeoutRef = useRef(null);
-
-  const [diveSiteSearchForTrips, setDiveSiteSearchForTrips] = useState('');
-  const [diveSiteSearchResultsForTrips, setDiveSiteSearchResultsForTrips] = useState([]);
-  const [diveSiteSearchLoadingForTrips, setDiveSiteSearchLoadingForTrips] = useState(false);
-  const [isDiveSiteDropdownOpenForTrips, setIsDiveSiteDropdownOpenForTrips] = useState(false);
-  const diveSiteDropdownRefForTrips = useRef(null);
-  const diveSiteSearchTimeoutRefForTrips = useRef(null);
-
-  // Country and region search state
-  const [countrySearch, setCountrySearch] = useState('');
-  const [countrySearchResults, setCountrySearchResults] = useState([]);
-  const [countrySearchLoading, setCountrySearchLoading] = useState(false);
-  const [isCountryDropdownOpen, setIsCountryDropdownOpen] = useState(false);
-  const countryDropdownRef = useRef(null);
-  const countrySearchTimeoutRef = useRef(null);
-
-  const [regionSearch, setRegionSearch] = useState('');
-  const [regionSearchResults, setRegionSearchResults] = useState([]);
-  const [regionSearchLoading, setRegionSearchLoading] = useState(false);
-  const [isRegionDropdownOpen, setIsRegionDropdownOpen] = useState(false);
-  const regionDropdownRef = useRef(null);
-  const regionSearchTimeoutRef = useRef(null);
-
-  // Username/Owner and Buddy search state (for dives page)
-  const [ownerSearch, setOwnerSearch] = useState('');
-  const [ownerSearchResults, setOwnerSearchResults] = useState([]);
-  const [ownerSearchLoading, setOwnerSearchLoading] = useState(false);
-  const [isOwnerDropdownOpen, setIsOwnerDropdownOpen] = useState(false);
-  const ownerDropdownRef = useRef(null);
-  const ownerSearchTimeoutRef = useRef(null);
-
-  const [buddySearch, setBuddySearch] = useState('');
-  const [buddySearchResults, setBuddySearchResults] = useState([]);
-  const [buddySearchLoading, setBuddySearchLoading] = useState(false);
-  const [isBuddyDropdownOpen, setIsBuddyDropdownOpen] = useState(false);
-  const buddyDropdownRef = useRef(null);
-  const buddySearchTimeoutRef = useRef(null);
-
-  // Sorting state management
-  const [pendingSortBy, setPendingSortBy] = useState(sortBy);
-  const [pendingSortOrder, setPendingSortOrder] = useState(sortOrder);
-
-  // Update pending values when props change
-  useEffect(() => {
-    setPendingSortBy(sortBy);
-    setPendingSortOrder(sortOrder);
-  }, [sortBy, sortOrder]);
-
-  // Track search bar height for positioning quick filters
-  useEffect(() => {
-    if (searchBarRef.current && searchBarVisible) {
-      const updateHeight = () => {
-        if (searchBarRef.current) {
-          setSearchBarHeight(searchBarRef.current.offsetHeight);
-        }
-      };
-      updateHeight();
-      // Update on resize
-      window.addEventListener('resize', updateHeight, { passive: true });
-      return () => window.removeEventListener('resize', updateHeight);
-    }
-  }, [searchBarVisible]);
-
-  // Tag color function - same as in DiveSitesFilterBar
-  const getTagColor = tagName => {
-    const colorMap = {
-      beginner: 'bg-green-100 text-green-800',
-      intermediate: 'bg-yellow-100 text-yellow-800',
-      advanced: 'bg-orange-100 text-orange-800',
-      expert: 'bg-red-100 text-red-800',
-      deep: 'bg-blue-100 text-blue-800',
-      shallow: 'bg-cyan-100 text-cyan-800',
-      wreck: 'bg-purple-100 text-purple-800',
-      reef: 'bg-emerald-100 text-emerald-800',
-      cave: 'bg-indigo-100 text-indigo-800',
-      wall: 'bg-slate-100 text-slate-800',
-      drift: 'bg-teal-100 text-teal-800',
-      night: 'bg-violet-100 text-violet-800',
-      photography: 'bg-pink-100 text-pink-800',
-      marine: 'bg-cyan-100 text-cyan-800',
-      training: 'bg-amber-100 text-amber-800',
-      tech: 'bg-red-100 text-red-800',
-      boat: 'bg-blue-100 text-blue-800',
-      shore: 'bg-green-100 text-green-800',
-    };
-
-    const lowerTagName = tagName.toLowerCase();
-    if (colorMap[lowerTagName]) {
-      return colorMap[lowerTagName];
-    }
-
-    for (const [key, color] of Object.entries(colorMap)) {
-      if (lowerTagName.includes(key) || key.includes(lowerTagName)) {
-        return color;
-      }
-    }
-
-    const colors = [
-      'bg-blue-100 text-blue-800',
-      'bg-green-100 text-green-800',
-      'bg-yellow-100 text-yellow-800',
-      'bg-orange-100 text-orange-800',
-      'bg-red-100 text-red-800',
-      'bg-purple-100 text-purple-800',
-      'bg-pink-100 text-pink-800',
-      'bg-indigo-100 text-indigo-800',
-      'bg-cyan-100 text-cyan-800',
-      'bg-teal-100 text-teal-800',
-      'bg-emerald-100 text-emerald-800',
-      'bg-amber-100 text-amber-800',
-      'bg-violet-100 text-violet-800',
-      'bg-slate-100 text-slate-800',
-    ];
-
-    let hash = 0;
-    for (let i = 0; i < tagName.length; i++) {
-      hash = (hash << 5) - hash + tagName.charCodeAt(i);
-      hash = hash & hash;
-    }
-
-    return colors[Math.abs(hash) % colors.length];
-  };
-
-  const handleToggleFilters = () => {
-    setIsExpanded(!isExpanded);
-    onToggleFilters();
-  };
-
-  // Initialize dive site search when dive_site_id is set
-  useEffect(() => {
-    if (filters.country) {
-      setCountrySearch(filters.country);
-    } else {
-      setCountrySearch('');
-    }
-  }, [filters.country]);
-
-  useEffect(() => {
-    if (filters.region) {
-      setRegionSearch(filters.region);
-    } else {
-      setRegionSearch('');
-    }
-  }, [filters.region]);
-
-  useEffect(() => {
-    if (pageType === 'dives' && filters.availableDiveSites && filters.dive_site_id) {
-      const selectedSite = filters.availableDiveSites.find(
-        site => site.id.toString() === filters.dive_site_id.toString()
-      );
-      if (selectedSite) {
-        setDiveSiteSearch(selectedSite.name);
-      } else {
-        setDiveSiteSearch('');
-      }
-    } else if (!filters.dive_site_id) {
-      setDiveSiteSearch('');
-    }
-  }, [filters.dive_site_id, filters.availableDiveSites, pageType]);
-
-  // Initialize search values when filters are set for dive-trips
-  useEffect(() => {
-    if (pageType === 'dive-trips') {
-      // Initialize diving center search
-      if (filters.diving_center_id && filters.availableDivingCenters) {
-        const selectedCenter = filters.availableDivingCenters.find(
-          center => center.id.toString() === filters.diving_center_id.toString()
-        );
-        if (selectedCenter) {
-          setDivingCenterSearch(selectedCenter.name);
-        }
-      } else if (!filters.diving_center_id) {
-        setDivingCenterSearch('');
-      }
-
-      // Initialize dive site search
-      if (filters.dive_site_id && filters.availableDiveSites) {
-        const selectedSite = filters.availableDiveSites.find(
-          site => site.id.toString() === filters.dive_site_id.toString()
-        );
-        if (selectedSite) {
-          setDiveSiteSearchForTrips(selectedSite.name);
-        }
-      } else if (!filters.dive_site_id) {
-        setDiveSiteSearchForTrips('');
-      }
-    }
-  }, [
-    filters.diving_center_id,
-    filters.dive_site_id,
-    filters.availableDivingCenters,
-    filters.availableDiveSites,
-    pageType,
-  ]);
-
-  // Initialize dive site search when dive_site_id is set for dives page
-  useEffect(() => {
-    if (pageType === 'dives') {
-      if (filters.dive_site_id && filters.availableDiveSites) {
-        const selectedSite = filters.availableDiveSites.find(
-          site => site.id.toString() === filters.dive_site_id.toString()
-        );
-        if (selectedSite) {
-          setDiveSiteSearch(selectedSite.name);
-        } else {
-          // If not found in availableDiveSites, try to fetch it
-          setDiveSiteSearch('');
-        }
-      } else if (!filters.dive_site_id) {
-        setDiveSiteSearch('');
-        setDiveSiteSearchResults([]);
-      }
-    }
-  }, [filters.dive_site_id, filters.availableDiveSites, pageType]);
-
-  // Track if user is actively typing in search fields to prevent useEffect from resetting
-  const ownerSearchInputRef = useRef(false);
-  const buddySearchInputRef = useRef(false);
-  // Track the last value the user typed to prevent clearing while typing
-  const lastTypedBuddySearchRef = useRef('');
-  const lastTypedOwnerSearchRef = useRef('');
-
-  // Initialize owner and buddy search values for dives page
-  // Only sync from filters when user is not actively typing
-  // Use refs to track previous filter values to detect external changes
-  const prevUsernameRef = useRef(filters.username);
-  const prevBuddyUsernameRef = useRef(filters.buddy_username);
-
-  // Use a separate effect that only runs when filters actually change externally
-  // (not on every render). We use a ref to track the previous filter values
-  // and only update when they actually change AND user is not typing.
-  useEffect(() => {
-    if (pageType === 'dives') {
-      // Only sync ownerSearch from filters if user is not actively typing
-      // AND the filter value actually changed (not just a re-render)
-      if (!ownerSearchInputRef.current) {
-        const usernameChanged = prevUsernameRef.current !== filters.username;
-        if (usernameChanged) {
-          if (filters.username) {
-            setOwnerSearch(filters.username);
-            lastTypedOwnerSearchRef.current = ''; // Reset typed value when filter is set externally
-          } else {
-            // Only clear if filter was explicitly cleared (changed from non-empty to empty)
-            // Use functional update to check current value without adding to dependencies
-            setOwnerSearch(prev => {
-              // Only clear if current value matches the previous filter value
-              // AND it doesn't match what the user last typed
-              // This prevents clearing when user is typing
-              if (
-                prevUsernameRef.current &&
-                prev === prevUsernameRef.current &&
-                prev !== lastTypedOwnerSearchRef.current
-              ) {
-                return '';
-              }
-              return prev;
-            });
-          }
-          prevUsernameRef.current = filters.username;
-        }
-      }
-
-      // Only sync buddySearch from filters if user is not actively typing
-      // AND the filter value actually changed (not just a re-render)
-      if (!buddySearchInputRef.current) {
-        const buddyUsernameChanged = prevBuddyUsernameRef.current !== filters.buddy_username;
-        if (buddyUsernameChanged) {
-          if (filters.buddy_username) {
-            setBuddySearch(filters.buddy_username);
-            lastTypedBuddySearchRef.current = ''; // Reset typed value when filter is set externally
-          } else {
-            // Only clear if filter was explicitly cleared (changed from non-empty to empty)
-            // Use functional update to check current value without adding to dependencies
-            setBuddySearch(prev => {
-              // Only clear if current value matches the previous filter value
-              // AND it doesn't match what the user last typed
-              // This prevents clearing when user is typing
-              if (
-                prevBuddyUsernameRef.current &&
-                prev === prevBuddyUsernameRef.current &&
-                prev !== lastTypedBuddySearchRef.current
-              ) {
-                return '';
-              }
-              return prev;
-            });
-          }
-          prevBuddyUsernameRef.current = filters.buddy_username;
-        }
-      }
-    }
-    // Only depend on filters and pageType, NOT on ownerSearch/buddySearch state
-    // This prevents the effect from running on every keystroke
-  }, [filters.username, filters.buddy_username, pageType]);
-
-  // Cleanup timeouts on unmount
-  useEffect(() => {
-    return () => {
-      if (divingCenterSearchTimeoutRef.current) {
-        clearTimeout(divingCenterSearchTimeoutRef.current);
-      }
-      if (diveSiteSearchTimeoutRefForTrips.current) {
-        clearTimeout(diveSiteSearchTimeoutRefForTrips.current);
-      }
-      if (diveSiteSearchTimeoutRef.current) {
-        clearTimeout(diveSiteSearchTimeoutRef.current);
-      }
-      if (countrySearchTimeoutRef.current) {
-        clearTimeout(countrySearchTimeoutRef.current);
-      }
-      if (regionSearchTimeoutRef.current) {
-        clearTimeout(regionSearchTimeoutRef.current);
-      }
-      if (ownerSearchTimeoutRef.current) {
-        clearTimeout(ownerSearchTimeoutRef.current);
-      }
-      if (buddySearchTimeoutRef.current) {
-        clearTimeout(buddySearchTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Handle clicking outside dropdowns
-  useClickOutside(
-    diveSiteDropdownRef,
-    () => setIsDiveSiteDropdownOpen(false),
-    isDiveSiteDropdownOpen
-  );
-  useClickOutside(
-    divingCenterDropdownRef,
-    () => setIsDivingCenterDropdownOpen(false),
-    isDivingCenterDropdownOpen
-  );
-  useClickOutside(
-    diveSiteDropdownRefForTrips,
-    () => setIsDiveSiteDropdownOpenForTrips(false),
-    isDiveSiteDropdownOpenForTrips
-  );
-  useClickOutside(countryDropdownRef, () => setIsCountryDropdownOpen(false), isCountryDropdownOpen);
-  useClickOutside(regionDropdownRef, () => setIsRegionDropdownOpen(false), isRegionDropdownOpen);
-
-  useClickOutside(
-    ownerDropdownRef,
-    () => {
-      setIsOwnerDropdownOpen(false);
-      // Reset ref when dropdown closes (user clicked away without selecting)
-      // This allows sync from filters if needed
-      if (!ownerSearch) {
-        ownerSearchInputRef.current = false;
-      }
-    },
-    isOwnerDropdownOpen
-  );
-
-  useClickOutside(
-    buddyDropdownRef,
-    () => {
-      setIsBuddyDropdownOpen(false);
-      // Reset ref when dropdown closes (user clicked away without selecting)
-      // This allows sync from filters if needed
-      if (!buddySearch) {
-        buddySearchInputRef.current = false;
-      }
-    },
-    isBuddyDropdownOpen
-  );
-
-  // Dive site search state for dives page (API-based)
-  const [diveSiteSearchResults, setDiveSiteSearchResults] = useState([]);
-  const [diveSiteSearchLoading, setDiveSiteSearchLoading] = useState(false);
-  const diveSiteSearchTimeoutRef = useRef(null);
-
-  // Handle dive site selection
-  const handleDiveSiteSelect = (siteId, siteName) => {
-    onFilterChange('dive_site_id', siteId.toString());
-    setDiveSiteSearch(siteName);
-    setIsDiveSiteDropdownOpen(false);
-  };
-
-  // Handle dive site search change for dives page (API-based)
-  const handleDiveSiteSearchChange = value => {
-    setDiveSiteSearch(value);
-    setIsDiveSiteDropdownOpen(true);
-    if (!value) {
-      // Clear dive_site_id when search is cleared
-      onFilterChange('dive_site_id', '');
-      setDiveSiteSearchResults([]);
-      return;
-    }
-
-    // Clear previous timeout
-    if (diveSiteSearchTimeoutRef.current) {
-      clearTimeout(diveSiteSearchTimeoutRef.current);
-    }
-
-    // Debounce search: wait 0.5 seconds after user stops typing
-    diveSiteSearchTimeoutRef.current = setTimeout(async () => {
-      try {
-        setDiveSiteSearchLoading(true);
-        const response = await getDiveSites({
-          search: value,
-          page_size: 25,
-          detail_level: 'basic',
-        });
-
-        // Handle different possible response structures
-        let results = [];
-        if (Array.isArray(response)) {
-          results = response;
-        } else if (response && Array.isArray(response.items)) {
-          results = response.items;
-        } else if (response && Array.isArray(response.data)) {
-          results = response.data;
-        } else if (response && Array.isArray(response.results)) {
-          results = response.results;
-        }
-
-        setDiveSiteSearchResults(results);
-      } catch (error) {
-        console.error('Search dive sites failed', error);
-        setDiveSiteSearchResults([]);
-      } finally {
-        setDiveSiteSearchLoading(false);
-      }
-    }, 500);
-  };
-
-  // Handle diving center search for dive-trips
-  const handleDivingCenterSearchChangeForTrips = value => {
-    setDivingCenterSearch(value);
-    setIsDivingCenterDropdownOpen(true);
-    if (!value) {
-      onFilterChange('diving_center_id', '');
-      setDivingCenterSearchResults([]);
-      return;
-    }
-
-    // Clear previous timeout
-    if (divingCenterSearchTimeoutRef.current) {
-      clearTimeout(divingCenterSearchTimeoutRef.current);
-    }
-
-    // Debounce search: wait 0.5 seconds after user stops typing
-    divingCenterSearchTimeoutRef.current = setTimeout(async () => {
-      try {
-        setDivingCenterSearchLoading(true);
-        const results = await searchDivingCenters({
-          q: value,
-          limit: 20,
-        });
-        setDivingCenterSearchResults(Array.isArray(results) ? results : []);
-      } catch (error) {
-        console.error('Search diving centers failed', error);
-        setDivingCenterSearchResults([]);
-      } finally {
-        setDivingCenterSearchLoading(false);
-      }
-    }, 500);
-  };
-
-  // Handle dive site search for dive-trips
-  const handleDiveSiteSearchChangeForTrips = value => {
-    setDiveSiteSearchForTrips(value);
-    setIsDiveSiteDropdownOpenForTrips(true);
-    if (!value) {
-      onFilterChange('dive_site_id', '');
-      setDiveSiteSearchResultsForTrips([]);
-      return;
-    }
-
-    // Clear previous timeout
-    if (diveSiteSearchTimeoutRefForTrips.current) {
-      clearTimeout(diveSiteSearchTimeoutRefForTrips.current);
-    }
-
-    // Debounce search: wait 0.5 seconds after user stops typing
-    diveSiteSearchTimeoutRefForTrips.current = setTimeout(async () => {
-      try {
-        setDiveSiteSearchLoadingForTrips(true);
-        const response = await getDiveSites({
-          search: value,
-          page_size: 25,
-          detail_level: 'basic',
-        });
-
-        // Handle different possible response structures
-        let results = [];
-        if (Array.isArray(response)) {
-          results = response;
-        } else if (response && Array.isArray(response.items)) {
-          results = response.items;
-        } else if (response && Array.isArray(response.data)) {
-          results = response.data;
-        } else if (response && Array.isArray(response.results)) {
-          results = response.results;
-        }
-
-        setDiveSiteSearchResultsForTrips(results);
-      } catch (error) {
-        console.error('Search dive sites failed', error);
-        setDiveSiteSearchResultsForTrips([]);
-      } finally {
-        setDiveSiteSearchLoadingForTrips(false);
-      }
-    }, 500);
-  };
-
-  // Handle diving center selection for dive-trips
-  const handleDivingCenterSelectForTrips = (centerId, centerName) => {
-    onFilterChange('diving_center_id', centerId.toString());
-    setDivingCenterSearch(centerName);
-    setIsDivingCenterDropdownOpen(false);
-  };
-
-  // Handle dive site selection for dive-trips
-  const handleDiveSiteSelectForTrips = (siteId, siteName) => {
-    onFilterChange('dive_site_id', siteId.toString());
-    setDiveSiteSearchForTrips(siteName);
-    setIsDiveSiteDropdownOpenForTrips(false);
-  };
-
-  // Handle country search
-  const handleCountrySearchChange = value => {
-    setCountrySearch(value);
-    setIsCountryDropdownOpen(true);
-    if (!value) {
-      onFilterChange('country', '');
-      setCountrySearchResults([]);
-      return;
-    }
-
-    if (countrySearchTimeoutRef.current) {
-      clearTimeout(countrySearchTimeoutRef.current);
-    }
-
-    countrySearchTimeoutRef.current = setTimeout(async () => {
-      try {
-        setCountrySearchLoading(true);
-        const results = await getUniqueCountries(value);
-        setCountrySearchResults(results.map(country => ({ name: country })));
-      } catch (error) {
-        console.error('Search countries failed', error);
-        setCountrySearchResults([]);
-      } finally {
-        setCountrySearchLoading(false);
-      }
-    }, 500);
-  };
-
-  // Handle region search
-  const handleRegionSearchChange = value => {
-    setRegionSearch(value);
-    setIsRegionDropdownOpen(true);
-    if (!value) {
-      onFilterChange('region', '');
-      setRegionSearchResults([]);
-      return;
-    }
-
-    if (regionSearchTimeoutRef.current) {
-      clearTimeout(regionSearchTimeoutRef.current);
-    }
-
-    regionSearchTimeoutRef.current = setTimeout(async () => {
-      try {
-        setRegionSearchLoading(true);
-        const results = await getUniqueRegions(filters.country, value);
-        setRegionSearchResults(results.map(region => ({ name: region })));
-      } catch (error) {
-        console.error('Search regions failed', error);
-        setRegionSearchResults([]);
-      } finally {
-        setRegionSearchLoading(false);
-      }
-    }, 500);
-  };
-
-  // Handle owner/username search for dives
-  const handleOwnerSearchChange = value => {
-    ownerSearchInputRef.current = true; // Mark that user is actively typing
-    lastTypedOwnerSearchRef.current = value; // Track what user typed
-    setOwnerSearch(value);
-    setIsOwnerDropdownOpen(true);
-    if (!value) {
-      onFilterChange('username', '');
-      setOwnerSearchResults([]);
-      ownerSearchInputRef.current = false; // User cleared, allow sync
-      lastTypedOwnerSearchRef.current = ''; // Reset typed value
-      return;
-    }
-
-    if (ownerSearchTimeoutRef.current) {
-      clearTimeout(ownerSearchTimeoutRef.current);
-    }
-
-    ownerSearchTimeoutRef.current = setTimeout(async () => {
-      try {
-        setOwnerSearchLoading(true);
-        // Include self when searching for owners (for filtering dives)
-        const results = await searchUsers(value, 20, true);
-        setOwnerSearchResults(Array.isArray(results) ? results : []);
-      } catch (error) {
-        console.error('Search users failed', error);
-        setOwnerSearchResults([]);
-      } finally {
-        setOwnerSearchLoading(false);
-      }
-    }, 500);
-  };
-
-  // Handle buddy search for dives
-  const handleBuddySearchChange = value => {
-    buddySearchInputRef.current = true; // Mark that user is actively typing
-    lastTypedBuddySearchRef.current = value; // Track what user typed
-    setBuddySearch(value);
-    setIsBuddyDropdownOpen(true);
-    if (!value) {
-      onFilterChange('buddy_username', '');
-      setBuddySearchResults([]);
-      buddySearchInputRef.current = false; // User cleared, allow sync
-      lastTypedBuddySearchRef.current = ''; // Reset typed value
-      return;
-    }
-
-    if (buddySearchTimeoutRef.current) {
-      clearTimeout(buddySearchTimeoutRef.current);
-    }
-
-    buddySearchTimeoutRef.current = setTimeout(async () => {
-      try {
-        setBuddySearchLoading(true);
-        // Include self when searching for buddies (for filtering dives)
-        const results = await searchUsers(value, 20, true);
-        setBuddySearchResults(Array.isArray(results) ? results : []);
-      } catch (error) {
-        console.error('Search users failed', error);
-        setBuddySearchResults([]);
-      } finally {
-        setBuddySearchLoading(false);
-      }
-    }, 500);
-  };
-
-  // Handle country selection
-  const handleCountrySelect = countryName => {
-    onFilterChange('country', countryName);
-    setCountrySearch(countryName);
-    setIsCountryDropdownOpen(false);
-  };
-
-  // Handle region selection
-  const handleRegionSelect = regionName => {
-    onFilterChange('region', regionName);
-    setRegionSearch(regionName);
-    setIsRegionDropdownOpen(false);
-  };
-
-  // Handle owner selection
-  const handleOwnerSelect = user => {
-    ownerSearchInputRef.current = false; // User selected, allow sync from filters
-    lastTypedOwnerSearchRef.current = ''; // Reset typed value when user selects
-    onFilterChange('username', user.username);
-    setOwnerSearch(user.username);
-    setIsOwnerDropdownOpen(false);
-  };
-
-  // Handle buddy selection
-  const handleBuddySelect = user => {
-    buddySearchInputRef.current = false; // User selected, allow sync from filters
-    lastTypedBuddySearchRef.current = ''; // Reset typed value when user selects
-    onFilterChange('buddy_username', user.username);
-    setBuddySearch(user.username);
-    setIsBuddyDropdownOpen(false);
-  };
-
-  const handleFilterOverlayToggle = () => {
-    setIsFilterOverlayOpen(!isFilterOverlayOpen);
-    setActiveTab('filters'); // Reset to filters tab when opening
-  };
-
-  // Sorting handlers
-  const handleSortFieldChange = newSortBy => {
-    const option = sortOptions.find(opt => opt.value === newSortBy);
-    const newSortOrder = option?.defaultOrder || pendingSortOrder;
-    setPendingSortBy(newSortBy);
-    setPendingSortOrder(newSortOrder);
-  };
-
-  const handleSortOrderToggle = () => {
-    const newSortOrder = pendingSortOrder === 'asc' ? 'desc' : 'asc';
-    setPendingSortOrder(newSortOrder);
-  };
-
-  const handleReset = () => {
-    const firstOption = sortOptions[0];
-    if (firstOption) {
-      const defaultSortBy = firstOption.value;
-      const defaultSortOrder = firstOption.defaultOrder || 'asc';
-      setPendingSortBy(defaultSortBy);
-      setPendingSortOrder(defaultSortOrder);
-      onReset();
-    }
-  };
-
-  const handleViewModeChange = newViewMode => {
-    onViewModeChange(newViewMode);
-  };
-
-  // Handle applying all changes (filters + sorting + view)
-  const handleApplyAll = () => {
-    // Apply sorting changes if they differ from current
-    if (pendingSortBy !== sortBy || pendingSortOrder !== sortOrder) {
-      onSortChange(pendingSortBy, pendingSortOrder);
-    }
-
-    // Close the overlay
-    setIsFilterOverlayOpen(false);
-  };
-
-  // Get current sort option for display
-  const currentSortOption = sortOptions.find(opt => opt.value === sortBy);
-  const currentSortLabel = currentSortOption ? currentSortOption.label : 'Default';
-
-  // Get display text for sort order
-  const getSortOrderText = order => {
-    return order === 'asc' ? 'Ascending' : 'Descending';
-  };
-
-  const getActiveFilters = () => {
-    const active = [];
-    if (filters.search_query)
-      active.push({ key: 'search_query', label: 'Search', value: filters.search_query });
-    if (filters.search) active.push({ key: 'search', label: 'Search', value: filters.search });
-    if (filters.username)
-      active.push({ key: 'username', label: 'Username', value: filters.username });
-    if (filters.buddy_username)
-      active.push({ key: 'buddy_username', label: 'Buddy', value: filters.buddy_username });
-    if (filters.dive_site_id && pageType === 'dives' && filters.availableDiveSites) {
-      const selectedSite = filters.availableDiveSites.find(
-        site => site.id.toString() === filters.dive_site_id.toString()
-      );
-      if (selectedSite) {
-        active.push({ key: 'dive_site_id', label: 'Dive Site', value: selectedSite.name });
-      }
-    }
-    if (filters.country) active.push({ key: 'country', label: 'Country', value: filters.country });
-    if (filters.region) active.push({ key: 'region', label: 'Region', value: filters.region });
-    if (filters.difficulty_code) {
-      const difficultyLabel = getDifficultyLabel(filters.difficulty_code);
-      active.push({
-        key: 'difficulty_code',
-        label: 'Difficulty',
-        value: difficultyLabel,
-      });
-    }
-    if (filters.exclude_unspecified_difficulty) {
-      active.push({
-        key: 'exclude_unspecified_difficulty',
-        label: 'Exclude Unspecified',
-        value: 'Yes',
-      });
-    }
-    if (filters.min_rating)
-      active.push({ key: 'min_rating', label: 'Min Rating', value: `≥${filters.min_rating}` });
-    if (filters.tag_ids && filters.tag_ids.length > 0) {
-      const tagNames = filters.availableTags
-        ?.filter(tag => filters.tag_ids.includes(tag.id))
-        .map(tag => tag.name)
-        .join(', ');
-      if (tagNames) {
-        active.push({ key: 'tag_ids', label: 'Tags', value: tagNames });
-      }
-    }
-    return active;
-  };
-
-  const activeFilters = getActiveFilters();
-
-  // Desktop version - similar to original
-  if (!isMobile) {
-    return (
-      <div
-        data-testid='responsive-filter-bar'
-        className={`bg-white border-b border-gray-200 shadow-sm sticky top-0 z-40 ${className}`}
-      >
-        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 p-4'>
-          {/* Quick Filters */}
-          {showQuickFilters && (
-            <div className='flex items-center gap-2 sm:ml-2 w-full sm:w-auto justify-center sm:justify-end'>
-              {/* Page-specific quick filters */}
-              {pageType === 'dives' ? (
-                // Dives page quick filters
-                <>
-                  {user && user.id && (
-                    <button
-                      onClick={() => onQuickFilter('my_dives')}
-                      className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                        quickFilters.includes('my_dives')
-                          ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                          : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                      }`}
-                      title='My Dives'
-                    >
-                      👤 <span className='hidden sm:inline'>My Dives</span>
-                    </button>
-                  )}
-                  <button
-                    onClick={() => onQuickFilter('wrecks')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('wrecks')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Wreck dives'
-                  >
-                    🚢 <span className='hidden sm:inline'>Wreck</span>
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('reefs')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('reefs')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Reef dives'
-                  >
-                    🐠 <span className='hidden sm:inline'>Reef</span>
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('boat_dive')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('boat_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Boat dives'
-                  >
-                    🚤 <span className='hidden sm:inline'>Boat</span>
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('shore_dive')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('shore_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Shore dives'
-                  >
-                    🏖️ <span className='hidden sm:inline'>Shore</span>
-                  </button>
-                </>
-              ) : pageType === 'dive-trips' ? null : ( // No quick filters for dive trips
-                // Default dive-sites quick filters
-                <>
-                  <button
-                    onClick={() => onQuickFilter('wrecks')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('wrecks')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Wreck dive sites'
-                  >
-                    🚢 <span className='hidden sm:inline'>Wreck</span>
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('reefs')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('reefs')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Reef dive sites'
-                  >
-                    🐠 <span className='hidden sm:inline'>Reef</span>
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('boat_dive')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('boat_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Boat dive sites'
-                  >
-                    🚤 <span className='hidden sm:inline'>Boat</span>
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('shore_dive')}
-                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
-                      quickFilters.includes('shore_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
-                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
-                    }`}
-                    title='Shore dive sites'
-                  >
-                    🏖️ <span className='hidden sm:inline'>Shore</span>
-                  </button>
-                </>
-              )}
-            </div>
-          )}
-
-          {/* Filter Actions */}
-          <div className='flex items-center gap-3 ml-4'>
-            {activeFiltersCount > 0 && (
-              <div className='flex items-center gap-2'>
-                <span className='text-xs sm:text-sm text-gray-600'>
-                  {activeFiltersCount} active filter{activeFiltersCount !== 1 ? 's' : ''}
-                </span>
-                <button
-                  onClick={onClearFilters}
-                  className='p-1 text-gray-400 hover:text-gray-600 transition-colors'
-                  title='Clear all filters'
-                >
-                  <X className='h-4 w-4' />
-                </button>
-              </div>
-            )}
-
-            {showAdvancedToggle && (
-              <button
-                onClick={handleToggleFilters}
-                className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
-                  showFilters
-                    ? 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 shadow-sm'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300'
-                }`}
-              >
-                <Filter className='h-4 w-4' />
-                <span className='text-sm font-medium'>
-                  {showFilters ? 'Hide Filters' : 'Show Filters'}
-                </span>
-              </button>
-            )}
-          </div>
-        </div>
-
-        {/* Active Filters Display */}
-        {activeFilters.length > 0 && (
-          <div className='border-t border-gray-200 py-2 px-3 bg-blue-50'>
-            <div className='flex items-center gap-2 mb-1.5'>
-              <span className='text-xs font-medium text-blue-900'>Active Filters:</span>
-            </div>
-            <div className='flex flex-wrap gap-1 justify-start'>
-              {activeFilters.map(filter => (
-                <div
-                  key={filter.key}
-                  className='inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full border border-blue-200'
-                >
-                  <span className='font-medium'>{filter.label}:</span>
-                  <span className='max-w-[100px] truncate'>{filter.value}</span>
-                  <button
-                    onClick={() => onFilterChange(filter.key, '')}
-                    className='ml-1 text-blue-600 hover:text-blue-800 active:text-blue-900 transition-colors p-0.5 rounded-full hover:bg-blue-200 active:bg-blue-300'
-                    title={`Remove ${filter.label} filter`}
-                  >
-                    <X className='h-2.5 w-2.5' />
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-
-        {/* Desktop: Sorting & View Controls */}
-        <div className='border-t border-gray-200 bg-white py-3 px-4'>
-          <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3'>
-            {/* Sorting Controls */}
-            <div className='flex items-center gap-3'>
-              <Select
-                id='desktop-sort-by'
-                label='Sort by:'
-                className='flex-row items-center gap-2'
-                value={sortBy}
-                onValueChange={value => onSortChange(value, sortOrder)}
-                options={sortOptions.map(opt => ({ value: opt.value, label: opt.label }))}
-              />
-
-              <div className='flex items-center gap-1'>
-                <button
-                  onClick={() => onSortChange(sortBy, 'asc')}
-                  aria-label='Sort Ascending'
-                  className={`px-3 py-2 text-sm rounded-l-md border transition-colors min-h-[40px] sm:min-h-0 ${
-                    sortOrder === 'asc'
-                      ? 'bg-blue-600 text-white border-blue-600'
-                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
-                  }`}
-                  title='Sort Ascending'
-                >
-                  <SortAsc className='h-4 w-4' />
-                </button>
-                <button
-                  onClick={() => onSortChange(sortBy, 'desc')}
-                  aria-label='Sort Descending'
-                  className={`px-3 py-2 text-sm rounded-r-md border-l-0 border transition-colors min-h-[40px] sm:min-h-0 ${
-                    sortOrder === 'desc'
-                      ? 'bg-blue-600 text-white border-blue-600'
-                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
-                  }`}
-                  title='Sort Descending'
-                >
-                  <SortDesc className='h-4 w-4' />
-                </button>
-              </div>
-            </div>
-
-            {/* View Mode & Display Options */}
-            <div className='flex items-center gap-3'>
-              {/* View Mode Selection */}
-              <div className='flex items-center gap-2'>
-                <label className='text-sm font-medium text-gray-700'>View:</label>
-                <div className='flex rounded-md shadow-sm' data-testid='view-mode-toggle'>
-                  <button
-                    onClick={() => onViewModeChange('list')}
-                    aria-label='List View'
-                    data-testid='list-view-button'
-                    className={`px-3 py-2 text-sm border transition-colors rounded-l-md min-h-[40px] sm:min-h-0 ${
-                      viewMode === 'list'
-                        ? 'bg-blue-600 text-white border-blue-600 active'
-                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
-                    }`}
-                    title='List View'
-                  >
-                    <List className='h-4 w-4' />
-                  </button>
-                  <button
-                    onClick={() => onViewModeChange('grid')}
-                    aria-label='Grid View'
-                    data-testid='grid-view-button'
-                    className={`px-3 py-2 text-sm border border-l-0 transition-colors min-h-[40px] sm:min-h-0 ${
-                      viewMode === 'grid'
-                        ? 'bg-blue-600 text-white border-blue-600 active'
-                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
-                    }`}
-                    title='Grid View'
-                  >
-                    <Grid className='h-4 w-4' />
-                  </button>
-                  <button
-                    onClick={() => onViewModeChange('map')}
-                    aria-label='Map View'
-                    data-testid='map-view-button'
-                    className={`px-3 py-2 text-sm border border-l-0 transition-colors rounded-r-md min-h-[40px] sm:min-h-0 ${
-                      viewMode === 'map'
-                        ? 'bg-blue-600 text-white border-blue-600 active'
-                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
-                    }`}
-                    title='Map View'
-                  >
-                    <Map className='h-4 w-4' />
-                  </button>
-                </div>
-              </div>
-
-              {/* Display Options */}
-              <div className='flex items-center gap-2'>
-                <label className='text-sm font-medium text-gray-700'>Display:</label>
-                <div className='flex items-center gap-2'>
-                  <label className='flex items-center gap-1 text-sm text-gray-700'>
-                    <input
-                      type='checkbox'
-                      checked={compactLayout}
-                      onChange={() => onDisplayOptionChange('compact')}
-                      className='rounded border-gray-300 text-blue-600 focus:ring-blue-500'
-                    />
-                    Compact
-                  </label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        {/* Desktop: Expandable Filters Section */}
-        {showFilters && (
-          <div className='border-t border-gray-200 bg-gray-50'>
-            <div className='p-4'>
-              <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
-                {/* Difficulty Level Filter */}
-                <div>
-                  <Select
-                    id='desktop-difficulty-filter'
-                    label='Difficulty Level'
-                    value={filters.difficulty_code || 'all'}
-                    onValueChange={value =>
-                      onFilterChange('difficulty_code', value === 'all' ? '' : value)
-                    }
-                    options={[
-                      { value: 'all', label: 'All Levels' },
-                      ...getDifficultyOptions()
-                        .filter(opt => opt.value !== null)
-                        .map(opt => ({ value: opt.value, label: opt.label })),
-                    ]}
-                  />
-                  <label className='flex items-center mt-2'>
-                    <input
-                      type='checkbox'
-                      checked={filters.exclude_unspecified_difficulty ?? false}
-                      onChange={e =>
-                        onFilterChange('exclude_unspecified_difficulty', e.target.checked)
-                      }
-                      className='mr-2'
-                    />
-                    <span className='text-xs text-gray-600'>Exclude Unspecified</span>
-                  </label>
-                </div>
-
-                {/* Min Rating Filter - Only show for dive-sites and dives, not dive-trips */}
-                {pageType !== 'dive-trips' && (
-                  <div>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>
-                      Min Rating (≥)
-                    </label>
-                    <input
-                      type='number'
-                      min='0'
-                      max='10'
-                      step='1'
-                      placeholder='Min rating (1-10)'
-                      value={filters.min_rating || ''}
-                      onChange={e => onFilterChange('min_rating', e.target.value)}
-                      onKeyDown={e => {
-                        if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === ',') {
-                          e.preventDefault();
-                        }
-                      }}
-                      className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm ${
-                        filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10)
-                          ? 'border-red-500 ring-1 ring-red-500'
-                          : 'border-gray-300'
-                      }`}
-                    />
-                    {filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10) && (
-                      <p className='text-red-500 text-xs mt-1'>Rating must be between 0 and 10</p>
-                    )}
-                  </div>
-                )}
-
-                {/* Diving Center Filter - Searchable for dive-trips */}
-                {pageType === 'dive-trips' && (
-                  <div className='relative' ref={divingCenterDropdownRef}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>
-                      Diving Center
-                    </label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for a diving center...'
-                        value={divingCenterSearch}
-                        onChange={e => handleDivingCenterSearchChangeForTrips(e.target.value)}
-                        onFocus={() => setIsDivingCenterDropdownOpen(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {divingCenterSearchLoading ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isDivingCenterDropdownOpen ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isDivingCenterDropdownOpen && divingCenterSearchResults.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {divingCenterSearchResults.map(center => (
-                          <div
-                            key={center.id}
-                            onClick={() => handleDivingCenterSelectForTrips(center.id, center.name)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleDivingCenterSelectForTrips(center.id, center.name);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{center.name}</div>
-                            {center.country && (
-                              <div className='text-sm text-gray-500'>{center.country}</div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isDivingCenterDropdownOpen &&
-                      divingCenterSearch &&
-                      !divingCenterSearchLoading &&
-                      divingCenterSearchResults.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>
-                            No diving centers found
-                          </div>
-                        </div>
-                      )}
-                  </div>
-                )}
-
-                {/* Dive Site Filter - Show for dives and dive-trips */}
-                {pageType === 'dives' && (
-                  <div className='relative' ref={diveSiteDropdownRef}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>
-                      Dive Site
-                    </label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for a dive site...'
-                        value={diveSiteSearch}
-                        onChange={e => handleDiveSiteSearchChange(e.target.value)}
-                        onFocus={() => setIsDiveSiteDropdownOpen(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {diveSiteSearchLoading ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isDiveSiteDropdownOpen ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isDiveSiteDropdownOpen && diveSiteSearchResults.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {diveSiteSearchResults.map(site => (
-                          <div
-                            key={site.id}
-                            onClick={() => handleDiveSiteSelect(site.id, site.name)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleDiveSiteSelect(site.id, site.name);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{site.name}</div>
-                            {site.country && (
-                              <div className='text-sm text-gray-500'>{site.country}</div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isDiveSiteDropdownOpen &&
-                      diveSiteSearch &&
-                      !diveSiteSearchLoading &&
-                      diveSiteSearchResults.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>No dive sites found</div>
-                        </div>
-                      )}
-                  </div>
-                )}
-
-                {/* Owner Filter - Searchable for dives page */}
-                {pageType === 'dives' && (
-                  <div className='relative' ref={ownerDropdownRef}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>Owner</label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for owner...'
-                        value={ownerSearch}
-                        onChange={e => handleOwnerSearchChange(e.target.value)}
-                        onFocus={() => setIsOwnerDropdownOpen(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {ownerSearchLoading ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isOwnerDropdownOpen ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isOwnerDropdownOpen && ownerSearchResults.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {ownerSearchResults.map(user => (
-                          <div
-                            key={user.id}
-                            onClick={() => handleOwnerSelect(user)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleOwnerSelect(user);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{user.username}</div>
-                            {user.name && <div className='text-sm text-gray-500'>{user.name}</div>}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isOwnerDropdownOpen &&
-                      ownerSearch &&
-                      !ownerSearchLoading &&
-                      ownerSearchResults.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>No users found</div>
-                        </div>
-                      )}
-                  </div>
-                )}
-
-                {/* Buddy Filter - Searchable for dives page */}
-                {pageType === 'dives' && (
-                  <div className='relative' ref={buddyDropdownRef}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>Buddy</label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for buddy...'
-                        value={buddySearch}
-                        onChange={e => handleBuddySearchChange(e.target.value)}
-                        onFocus={() => setIsBuddyDropdownOpen(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {buddySearchLoading ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isBuddyDropdownOpen ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isBuddyDropdownOpen && buddySearchResults.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {buddySearchResults.map(user => (
-                          <div
-                            key={user.id}
-                            onClick={() => handleBuddySelect(user)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleBuddySelect(user);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{user.username}</div>
-                            {user.name && <div className='text-sm text-gray-500'>{user.name}</div>}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isBuddyDropdownOpen &&
-                      buddySearch &&
-                      !buddySearchLoading &&
-                      buddySearchResults.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>No users found</div>
-                        </div>
-                      )}
-                    <p className='mt-1 text-xs text-gray-500'>
-                      Show dives where this user is a buddy
-                    </p>
-                  </div>
-                )}
-
-                {/* Dive Site Filter - Searchable for dive-trips */}
-                {pageType === 'dive-trips' && (
-                  <div className='relative' ref={diveSiteDropdownRefForTrips}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>
-                      Dive Site
-                    </label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for a dive site...'
-                        value={diveSiteSearchForTrips}
-                        onChange={e => handleDiveSiteSearchChangeForTrips(e.target.value)}
-                        onFocus={() => setIsDiveSiteDropdownOpenForTrips(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {diveSiteSearchLoadingForTrips ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isDiveSiteDropdownOpenForTrips ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isDiveSiteDropdownOpenForTrips && diveSiteSearchResultsForTrips.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {diveSiteSearchResultsForTrips.map(site => (
-                          <div
-                            key={site.id}
-                            onClick={() => handleDiveSiteSelectForTrips(site.id, site.name)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleDiveSiteSelectForTrips(site.id, site.name);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{site.name}</div>
-                            {site.country && (
-                              <div className='text-sm text-gray-500'>{site.country}</div>
-                            )}
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isDiveSiteDropdownOpenForTrips &&
-                      diveSiteSearchForTrips &&
-                      !diveSiteSearchLoadingForTrips &&
-                      diveSiteSearchResultsForTrips.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>No dive sites found</div>
-                        </div>
-                      )}
-                  </div>
-                )}
-
-                {/* Date Range Filters - For dive-trips */}
-                {pageType === 'dive-trips' && (
-                  <>
-                    <div>
-                      <label className='block text-sm font-medium text-gray-700 mb-2'>
-                        Start Date
-                      </label>
-                      <input
-                        type='date'
-                        value={filters.start_date || ''}
-                        onChange={e => onFilterChange('start_date', e.target.value)}
-                        className='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                    </div>
-                    <div>
-                      <label className='block text-sm font-medium text-gray-700 mb-2'>
-                        End Date
-                      </label>
-                      <input
-                        type='date'
-                        value={filters.end_date || ''}
-                        onChange={e => onFilterChange('end_date', e.target.value)}
-                        className='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                    </div>
-                  </>
-                )}
-
-                {/* Country Filter - Searchable (not for dives page) */}
-                {pageType !== 'dives' && (
-                  <div className='relative' ref={countryDropdownRef}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>Country</label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for a country...'
-                        value={countrySearch}
-                        onChange={e => handleCountrySearchChange(e.target.value)}
-                        onFocus={() => setIsCountryDropdownOpen(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {countrySearchLoading ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isCountryDropdownOpen ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isCountryDropdownOpen && countrySearchResults.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {countrySearchResults.map((country, index) => (
-                          <div
-                            key={index}
-                            onClick={() => handleCountrySelect(country.name)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleCountrySelect(country.name);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{country.name}</div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isCountryDropdownOpen &&
-                      countrySearch &&
-                      !countrySearchLoading &&
-                      countrySearchResults.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>No countries found</div>
-                        </div>
-                      )}
-                  </div>
-                )}
-
-                {/* Region Filter - Searchable (not for dives page) */}
-                {pageType !== 'dives' && (
-                  <div className='relative' ref={regionDropdownRef}>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>Region</label>
-                    <div className='relative'>
-                      <input
-                        type='text'
-                        placeholder='Search for a region...'
-                        value={regionSearch}
-                        onChange={e => handleRegionSearchChange(e.target.value)}
-                        onFocus={() => setIsRegionDropdownOpen(true)}
-                        className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-                      />
-                      <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                        {regionSearchLoading ? (
-                          <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                        ) : (
-                          <ChevronDown
-                            size={16}
-                            className={`text-gray-400 transition-transform ${
-                              isRegionDropdownOpen ? 'rotate-180' : ''
-                            }`}
-                          />
-                        )}
-                      </div>
-                    </div>
-                    {/* Dropdown */}
-                    {isRegionDropdownOpen && regionSearchResults.length > 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
-                        {regionSearchResults.map((region, index) => (
-                          <div
-                            key={index}
-                            onClick={() => handleRegionSelect(region.name)}
-                            onKeyDown={e => {
-                              if (e.key === 'Enter' || e.key === ' ') {
-                                e.preventDefault();
-                                handleRegionSelect(region.name);
-                              }
-                            }}
-                            role='button'
-                            tabIndex={0}
-                            className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
-                          >
-                            <div className='font-medium text-gray-900'>{region.name}</div>
-                          </div>
-                        ))}
-                      </div>
-                    )}
-                    {isRegionDropdownOpen &&
-                      regionSearch &&
-                      !regionSearchLoading &&
-                      regionSearchResults.length === 0 && (
-                        <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
-                          <div className='px-3 py-2 text-gray-500 text-sm'>No regions found</div>
-                        </div>
-                      )}
-                  </div>
-                )}
-
-                {/* Tags Filter */}
-                {filters.availableTags && filters.availableTags.length > 0 && (
-                  <div className='md:col-span-2 lg:col-span-3'>
-                    <label className='block text-sm font-medium text-gray-700 mb-2'>Tags</label>
-                    <div className='flex flex-wrap gap-2'>
-                      {filters.availableTags.map(tag => (
-                        <button
-                          key={tag.id}
-                          type='button'
-                          onClick={() => {
-                            const tagId = parseInt(tag.id);
-                            const currentTagIds = filters.tag_ids || [];
-                            const newTagIds = currentTagIds.includes(tagId)
-                              ? currentTagIds.filter(id => id !== tagId)
-                              : [...currentTagIds, tagId];
-                            onFilterChange('tag_ids', newTagIds);
-                          }}
-                          className={`px-3 py-2 rounded-full text-sm font-medium transition-all duration-200 hover:scale-105 ${
-                            (filters.tag_ids || []).includes(tag.id)
-                              ? `${getTagColor(tag.name)} border-2 border-current shadow-md`
-                              : `${getTagColor(tag.name)} opacity-60 hover:opacity-100 border-2 border-transparent`
-                          }`}
-                        >
-                          {tag.name}
-                        </button>
-                      ))}
-                    </div>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-  // Mobile version with scroll-based behavior
-  return (
-    <>
-      {/* Sticky Container for Search & Filters */}
-      <div className='sticky top-0 left-0 right-0 z-[100] w-full'>
-        {/* Mobile Search Bar */}
-        <div
-          ref={searchBarRef}
-          data-testid='mobile-search-bar'
-          className='bg-white border-b border-gray-200 shadow-sm'
-        >
-          <div className='p-3'>
-            <div className='relative'>
-              <Search className='absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400' />
-              <input
-                type='text'
-                placeholder='Search dive sites...'
-                value={searchQuery}
-                onChange={e => onSearchChange(e.target.value)}
-                onKeyPress={e => e.key === 'Enter' && onSearchSubmit()}
-                className='w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
-              />
-            </div>
-          </div>
-        </div>
-
-        {/* Mobile Quick Filters Bar */}
-        <div
-          data-testid='mobile-quick-filters'
-          className='bg-white border-b border-gray-200 shadow-sm'
-        >
-          <div className='flex items-center justify-between p-3'>
-            {/* Filter Icon with Count */}
-            <button
-              data-testid='mobile-filter-button'
-              onClick={handleFilterOverlayToggle}
-              className='flex items-center gap-2 px-3 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors min-h-[44px]'
-            >
-              <Wrench className='h-5 w-5' />
-              {activeFiltersCount > 0 && (
-                <span className='bg-blue-600 text-white text-xs rounded-full px-2 py-1 min-w-[20px] text-center'>
-                  {activeFiltersCount}
-                </span>
-              )}
-            </button>
-
-            {/* Quick Filter Buttons */}
-            <div className='flex items-center gap-2 overflow-x-auto flex-1 ml-3'>
-              {/* Page-specific mobile quick filters */}
-              {pageType === 'dives' ? (
-                // Dives page mobile quick filters
-                <>
-                  {user && user.id && (
-                    <button
-                      onClick={() => onQuickFilter('my_dives')}
-                      aria-label='My Dives'
-                      className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                        quickFilters.includes('my_dives')
-                          ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                          : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                      }`}
-                      title='My Dives'
-                    >
-                      👤
-                    </button>
-                  )}
-                  <button
-                    onClick={() => onQuickFilter('wrecks')}
-                    aria-label='Wreck Dives'
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('wrecks')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Wreck dives'
-                  >
-                    🚢
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('reefs')}
-                    aria-label='Reef Dives'
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('reefs')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Reef dives'
-                  >
-                    🐠
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('boat_dive')}
-                    aria-label='Boat Dives'
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('boat_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Boat dives'
-                  >
-                    🚤
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('shore_dive')}
-                    aria-label='Shore Dives'
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('shore_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Shore dives'
-                  >
-                    🏖️
-                  </button>
-                </>
-              ) : pageType === 'dive-trips' ? null : ( // No quick filters for dive trips
-                // Default dive-sites mobile quick filters
-                <>
-                  <button
-                    onClick={() => onQuickFilter('wrecks')}
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('wrecks')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Wreck dive sites'
-                  >
-                    🚢
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('reefs')}
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('reefs')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Reef dive sites'
-                  >
-                    🐠
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('boat_dive')}
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('boat_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Boat dive sites'
-                  >
-                    🚤
-                  </button>
-                  <button
-                    onClick={() => onQuickFilter('shore_dive')}
-                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
-                      quickFilters.includes('shore_dive')
-                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
-                    }`}
-                    title='Shore dive sites'
-                  >
-                    🏖️
-                  </button>
-                </>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Mobile Filter Overlay - Full Page with Tabs */}
-
-      <Modal
-        isOpen={isFilterOverlayOpen}
-        onClose={handleFilterOverlayToggle}
-        title='Filters & Sorting'
-        className='w-full h-screen sm:h-auto sm:max-w-2xl p-0 flex flex-col'
-        showCloseButton={true}
-      >
-        {/* Tab Navigation */}
-
-        <div className='flex border-b border-gray-200 bg-white'>
-          <button
-            onClick={() => setActiveTab('filters')}
-            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
-              activeTab === 'filters'
-                ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
-                : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
-            }`}
-          >
-            <Filter className='h-4 w-4 inline mr-2' />
-            Filters
-          </button>
-
-          <button
-            onClick={() => setActiveTab('sorting')}
-            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
-              activeTab === 'sorting'
-                ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
-                : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
-            }`}
-          >
-            <Settings className='h-4 w-4 inline mr-2' />
-            Sorting & View
-          </button>
-        </div>
-
-        {/* Tab Content */}
-
-        <div className='flex-1 overflow-y-auto min-h-0'>
-          {/* Filters Tab */}
-
-          {activeTab === 'filters' && (
-            <div className='p-4 space-y-6 pb-4'>
-              {/* Difficulty Level Filter */}
-
-              <div>
-                <Select
-                  id='mobile-difficulty-filter'
-                  label='Difficulty Level'
-                  value={filters.difficulty_code || 'all'}
-                  onValueChange={value =>
-                    onFilterChange('difficulty_code', value === 'all' ? '' : value)
-                  }
-                  options={[
-                    { value: 'all', label: 'All Levels' },
-                    ...getDifficultyOptions()
-                      .filter(opt => opt.value !== null)
-                      .map(opt => ({ value: opt.value, label: opt.label })),
-                  ]}
-                />
-
-                <label className='flex items-center mt-2'>
-                  <input
-                    type='checkbox'
-                    checked={filters.exclude_unspecified_difficulty ?? false}
-                    onChange={e =>
-                      onFilterChange('exclude_unspecified_difficulty', e.target.checked)
-                    }
-                    className='mr-2'
-                  />
-
-                  <span className='text-sm text-gray-600'>Exclude Unspecified</span>
-                </label>
-              </div>
-
-              {/* Dive Site Filter - Searchable for dives page (mobile) */}
-
-              {pageType === 'dives' && (
-                <div className='relative' ref={diveSiteDropdownRef}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Dive Site</label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for a dive site...'
-                      value={diveSiteSearch}
-                      onChange={e => handleDiveSiteSearchChange(e.target.value)}
-                      onFocus={() => setIsDiveSiteDropdownOpen(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {diveSiteSearchLoading ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isDiveSiteDropdownOpen ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isDiveSiteDropdownOpen && diveSiteSearchResults.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {diveSiteSearchResults.map(site => (
-                        <div
-                          key={site.id}
-                          onClick={() => handleDiveSiteSelect(site.id, site.name)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleDiveSiteSelect(site.id, site.name);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{site.name}</div>
-
-                          {site.country && (
-                            <div className='text-sm text-gray-500'>{site.country}</div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isDiveSiteDropdownOpen &&
-                    diveSiteSearch &&
-                    !diveSiteSearchLoading &&
-                    diveSiteSearchResults.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>No dive sites found</div>
-                      </div>
-                    )}
-                </div>
-              )}
-
-              {/* Owner Filter - Searchable for dives page (mobile) */}
-
-              {pageType === 'dives' && (
-                <div className='relative' ref={ownerDropdownRef}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Owner</label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for owner...'
-                      value={ownerSearch}
-                      onChange={e => handleOwnerSearchChange(e.target.value)}
-                      onFocus={() => setIsOwnerDropdownOpen(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {ownerSearchLoading ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isOwnerDropdownOpen ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isOwnerDropdownOpen && ownerSearchResults.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {ownerSearchResults.map(user => (
-                        <div
-                          key={user.id}
-                          onClick={() => handleOwnerSelect(user)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleOwnerSelect(user);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{user.username}</div>
-
-                          {user.name && <div className='text-sm text-gray-500'>{user.name}</div>}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isOwnerDropdownOpen &&
-                    ownerSearch &&
-                    !ownerSearchLoading &&
-                    ownerSearchResults.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>No users found</div>
-                      </div>
-                    )}
-                </div>
-              )}
-
-              {/* Buddy Filter - Searchable for dives page (mobile) */}
-
-              {pageType === 'dives' && (
-                <div className='relative' ref={buddyDropdownRef}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Buddy</label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for buddy...'
-                      value={buddySearch}
-                      onChange={e => handleBuddySearchChange(e.target.value)}
-                      onFocus={() => setIsBuddyDropdownOpen(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {buddySearchLoading ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isBuddyDropdownOpen ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isBuddyDropdownOpen && buddySearchResults.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {buddySearchResults.map(user => (
-                        <div
-                          key={user.id}
-                          onClick={() => handleBuddySelect(user)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleBuddySelect(user);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{user.username}</div>
-
-                          {user.name && <div className='text-sm text-gray-500'>{user.name}</div>}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isBuddyDropdownOpen &&
-                    buddySearch &&
-                    !buddySearchLoading &&
-                    buddySearchResults.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>No users found</div>
-                      </div>
-                    )}
-
-                  <p className='mt-1 text-xs text-gray-500'>
-                    Show dives where this user is a buddy
-                  </p>
-                </div>
-              )}
-
-              {/* Diving Center Filter - Searchable for dive-trips (mobile) */}
-
-              {pageType === 'dive-trips' && (
-                <div className='relative' ref={divingCenterDropdownRef}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>
-                    Diving Center
-                  </label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for a diving center...'
-                      value={divingCenterSearch}
-                      onChange={e => handleDivingCenterSearchChangeForTrips(e.target.value)}
-                      onFocus={() => setIsDivingCenterDropdownOpen(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {divingCenterSearchLoading ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isDivingCenterDropdownOpen ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isDivingCenterDropdownOpen && divingCenterSearchResults.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {divingCenterSearchResults.map(center => (
-                        <div
-                          key={center.id}
-                          onClick={() => handleDivingCenterSelectForTrips(center.id, center.name)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleDivingCenterSelectForTrips(center.id, center.name);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{center.name}</div>
-
-                          {center.country && (
-                            <div className='text-sm text-gray-500'>{center.country}</div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isDivingCenterDropdownOpen &&
-                    divingCenterSearch &&
-                    !divingCenterSearchLoading &&
-                    divingCenterSearchResults.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>
-                          No diving centers found
-                        </div>
-                      </div>
-                    )}
-                </div>
-              )}
-
-              {/* Dive Site Filter - Searchable for dive-trips (mobile) */}
-
-              {pageType === 'dive-trips' && (
-                <div className='relative' ref={diveSiteDropdownRefForTrips}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Dive Site</label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for a dive site...'
-                      value={diveSiteSearchForTrips}
-                      onChange={e => handleDiveSiteSearchChangeForTrips(e.target.value)}
-                      onFocus={() => setIsDiveSiteDropdownOpenForTrips(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {diveSiteSearchLoadingForTrips ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isDiveSiteDropdownOpenForTrips ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isDiveSiteDropdownOpenForTrips && diveSiteSearchResultsForTrips.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {diveSiteSearchResultsForTrips.map(site => (
-                        <div
-                          key={site.id}
-                          onClick={() => handleDiveSiteSelectForTrips(site.id, site.name)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleDiveSiteSelectForTrips(site.id, site.name);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{site.name}</div>
-
-                          {site.country && (
-                            <div className='text-sm text-gray-500'>{site.country}</div>
-                          )}
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isDiveSiteDropdownOpenForTrips &&
-                    diveSiteSearchForTrips &&
-                    !diveSiteSearchLoadingForTrips &&
-                    diveSiteSearchResultsForTrips.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>No dive sites found</div>
-                      </div>
-                    )}
-                </div>
-              )}
-
-              {/* Date Range Filters - For dive-trips (mobile) */}
-
-              {pageType === 'dive-trips' && (
-                <>
-                  <div>
-                    <label className='block text-sm font-medium text-gray-700 mb-3'>
-                      Start Date
-                    </label>
-
-                    <input
-                      type='date'
-                      value={filters.start_date || ''}
-                      onChange={e => onFilterChange('start_date', e.target.value)}
-                      className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-                  </div>
-
-                  <div>
-                    <label className='block text-sm font-medium text-gray-700 mb-3'>End Date</label>
-
-                    <input
-                      type='date'
-                      value={filters.end_date || ''}
-                      onChange={e => onFilterChange('end_date', e.target.value)}
-                      className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-                  </div>
-                </>
-              )}
-
-              {/* Min Rating Filter - Only show for dive-sites and dives, not dive-trips */}
-
-              {pageType !== 'dive-trips' && (
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>
-                    Min Rating (≥)
-                  </label>
-
-                  <input
-                    type='number'
-                    min='0'
-                    max='10'
-                    step='1'
-                    placeholder='Min rating (1-10)'
-                    value={filters.min_rating || ''}
-                    onChange={e => onFilterChange('min_rating', e.target.value)}
-                    onKeyDown={e => {
-                      if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === ',') {
-                        e.preventDefault();
-                      }
-                    }}
-                    className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px] ${
-                      filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10)
-                        ? 'border-red-500 ring-1 ring-red-500'
-                        : 'border-gray-300'
-                    }`}
-                  />
-                  {filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10) && (
-                    <p className='text-red-500 text-sm mt-1'>Rating must be between 0 and 10</p>
-                  )}
-                </div>
-              )}
-
-              {/* Country Filter - Searchable (mobile, not for dives page) */}
-
-              {pageType !== 'dives' && (
-                <div className='relative' ref={countryDropdownRef}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Country</label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for a country...'
-                      value={countrySearch}
-                      onChange={e => handleCountrySearchChange(e.target.value)}
-                      onFocus={() => setIsCountryDropdownOpen(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {countrySearchLoading ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isCountryDropdownOpen ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isCountryDropdownOpen && countrySearchResults.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {countrySearchResults.map((country, index) => (
-                        <div
-                          key={index}
-                          onClick={() => handleCountrySelect(country.name)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleCountrySelect(country.name);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{country.name}</div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isCountryDropdownOpen &&
-                    countrySearch &&
-                    !countrySearchLoading &&
-                    countrySearchResults.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>No countries found</div>
-                      </div>
-                    )}
-                </div>
-              )}
-
-              {/* Region Filter - Searchable (mobile, not for dives page) */}
-
-              {pageType !== 'dives' && (
-                <div className='relative' ref={regionDropdownRef}>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Region</label>
-
-                  <div className='relative'>
-                    <input
-                      type='text'
-                      placeholder='Search for a region...'
-                      value={regionSearch}
-                      onChange={e => handleRegionSearchChange(e.target.value)}
-                      onFocus={() => setIsRegionDropdownOpen(true)}
-                      className='w-full px-4 py-2 pr-10 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
-                    />
-
-                    <div className='absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none'>
-                      {regionSearchLoading ? (
-                        <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
-                      ) : (
-                        <ChevronDown
-                          size={16}
-                          className={`text-gray-400 transition-transform ${
-                            isRegionDropdownOpen ? 'rotate-180' : ''
-                          }`}
-                        />
-                      )}
-                    </div>
-                  </div>
-
-                  {/* Dropdown */}
-
-                  {isRegionDropdownOpen && regionSearchResults.length > 0 && (
-                    <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg max-h-60 overflow-auto'>
-                      {regionSearchResults.map((region, index) => (
-                        <div
-                          key={index}
-                          onClick={() => handleRegionSelect(region.name)}
-                          onKeyDown={e => {
-                            if (e.key === 'Enter' || e.key === ' ') {
-                              e.preventDefault();
-
-                              handleRegionSelect(region.name);
-                            }
-                          }}
-                          role='button'
-                          tabIndex={0}
-                          className='px-4 py-3 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0 min-h-[44px]'
-                        >
-                          <div className='font-medium text-gray-900'>{region.name}</div>
-                        </div>
-                      ))}
-                    </div>
-                  )}
-
-                  {isRegionDropdownOpen &&
-                    regionSearch &&
-                    !regionSearchLoading &&
-                    regionSearchResults.length === 0 && (
-                      <div className='absolute z-10 w-full mt-1 bg-white border border-gray-300 rounded-lg shadow-lg'>
-                        <div className='px-4 py-3 text-gray-500 text-sm'>No regions found</div>
-                      </div>
-                    )}
-                </div>
-              )}
-
-              {/* Tags Filter */}
-
-              {filters.availableTags && filters.availableTags.length > 0 && (
-                <div>
-                  <label className='block text-sm font-medium text-gray-700 mb-3'>Tags</label>
-
-                  <div className='flex flex-wrap gap-3'>
-                    {filters.availableTags.map(tag => (
-                      <button
-                        key={tag.id}
-                        type='button'
-                        onClick={() => {
-                          const tagId = parseInt(tag.id);
-
-                          const currentTagIds = filters.tag_ids || [];
-
-                          const newTagIds = currentTagIds.includes(tagId)
-                            ? currentTagIds.filter(id => id !== tagId)
-                            : [...currentTagIds, tagId];
-
-                          onFilterChange('tag_ids', newTagIds);
-                        }}
-                        className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 hover:scale-105 min-h-[34px] ${
-                          (filters.tag_ids || []).includes(tag.id)
-                            ? `${getTagColor(tag.name)} border-2 border-current shadow-md`
-                            : `${getTagColor(tag.name)} opacity-60 hover:opacity-100 border-2 border-transparent`
-                        }`}
-                      >
-                        {tag.name}
-                      </button>
-                    ))}
-                  </div>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Sorting & View Tab - Compact Mobile Interface */}
-
-          {activeTab === 'sorting' && (
-            <div className='p-4 space-y-6 pb-4'>
-              {/* Sort Field Selection - Compact Dropdown */}
-
-              <Select
-                id='mobile-sort-by'
-                label='Sort Field'
-                value={pendingSortBy || 'all'}
-                onValueChange={value => handleSortFieldChange(value === 'all' ? '' : value)}
-                options={[
-                  { value: 'all', label: 'Select sort field' },
-                  ...sortOptions.map(opt => ({
-                    value: opt.value,
-                    label: `${opt.label} (${opt.defaultOrder === 'asc' ? 'Low to High' : 'High to Low'})`,
-                  })),
-                ]}
-              />
-
-              {/* Sort Order - Compact Toggle */}
-
-              <div>
-                <h4 className='text-sm font-medium text-gray-700 mb-3'>Sort Order</h4>
-
-                <div className='flex gap-2'>
-                  <button
-                    onClick={() => setPendingSortOrder('asc')}
-                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
-                      pendingSortOrder === 'asc'
-                        ? 'bg-blue-50 border-blue-200 text-blue-900'
-                        : 'bg-white border-gray-200 hover:bg-gray-50'
-                    }`}
-                  >
-                    <div className='flex items-center justify-center gap-2'>
-                      <SortAsc className='w-4 h-4' />
-                      Ascending
-                    </div>
-                  </button>
-
-                  <button
-                    onClick={() => setPendingSortOrder('desc')}
-                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
-                      pendingSortOrder === 'desc'
-                        ? 'bg-blue-50 border-blue-200 text-blue-900'
-                        : 'bg-white border-gray-200 hover:bg-gray-50'
-                    }`}
-                  >
-                    <div className='flex items-center justify-center gap-2'>
-                      <SortDesc className='w-4 h-4' />
-                      Descending
-                    </div>
-                  </button>
-                </div>
-              </div>
-
-              {/* View Mode Selection - Compact Buttons */}
-
-              <div>
-                <h4 className='text-sm font-medium text-gray-700 mb-3'>View Mode</h4>
-
-                <div className='flex gap-2' data-testid='view-mode-toggle'>
-                  <button
-                    onClick={() => handleViewModeChange('list')}
-                    data-testid='list-view-button'
-                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
-                      viewMode === 'list'
-                        ? 'bg-blue-50 border-blue-200 text-blue-900 active'
-                        : 'bg-white border-gray-200 hover:bg-gray-50'
-                    }`}
-                  >
-                    <div className='flex items-center justify-center gap-2'>
-                      <List className='w-4 h-4' />
-                      List
-                    </div>
-                  </button>
-
-                  <button
-                    onClick={() => handleViewModeChange('map')}
-                    data-testid='map-view-button'
-                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
-                      viewMode === 'map'
-                        ? 'bg-blue-50 border-blue-200 text-blue-900 active'
-                        : 'bg-white border-gray-200 hover:bg-gray-50'
-                    }`}
-                  >
-                    <div className='flex items-center justify-center gap-2'>
-                      <Map className='w-4 h-4' />
-                      Map
-                    </div>
-                  </button>
-                </div>
-              </div>
-
-              {/* Display Options - Compact Checkbox */}
-
-              <div>
-                <h4 className='text-sm font-medium text-gray-700 mb-3'>Display Options</h4>
-
-                <div className='space-y-2'>
-                  <label className='flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors'>
-                    <input
-                      type='checkbox'
-                      className='w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500'
-                      checked={compactLayout}
-                      onChange={() => onDisplayOptionChange('compact')}
-                    />
-
-                    <span className='text-sm text-gray-700'>Compact layout</span>
-                  </label>
-                </div>
-              </div>
-
-              {/* Sorting Action Buttons - Only Reset button, no Apply Sort */}
-
-              <div className='flex gap-3 pt-4'>
-                <button
-                  onClick={handleReset}
-                  className='flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors'
-                >
-                  <RotateCcw className='w-4 h-4 inline mr-2' />
-                  Reset
-                </button>
-              </div>
-            </div>
-          )}
-        </div>
-
-        {/* Footer Actions - Single Apply All button */}
-
-        <div className='border-t border-gray-200 p-4 bg-gray-50 flex gap-3'>
-          <button
-            onClick={onClearFilters}
-            className='flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors min-h-[34px]'
-          >
-            Clear All
-          </button>
-
-          <button
-            onClick={handleApplyAll}
-            className='flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors min-h-[34px]'
-          >
-            Apply All
-          </button>
-        </div>
-      </Modal>
-    </>
-  );
-};
-
-ResponsiveFilterBar.propTypes = {
-  showFilters: PropTypes.bool,
-
-  onToggleFilters: PropTypes.func,
-
-  onClearFilters: PropTypes.func,
-
-  activeFiltersCount: PropTypes.number,
-
-  filters: PropTypes.object,
-
-  onFilterChange: PropTypes.func,
-
-  onQuickFilter: PropTypes.func,
-
-  quickFilters: PropTypes.array,
-
-  className: PropTypes.string,
-
-  variant: PropTypes.oneOf(['sticky', 'floating', 'inline']),
-
-  showQuickFilters: PropTypes.bool,
-
-  showAdvancedToggle: PropTypes.bool,
-
-  searchQuery: PropTypes.string,
-
-  onSearchChange: PropTypes.func,
-
-  onSearchSubmit: PropTypes.func,
-
-  // New sorting props
-
-  sortBy: PropTypes.string,
-
-  sortOrder: PropTypes.oneOf(['asc', 'desc']),
-
-  sortOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-
-      label: PropTypes.string.isRequired,
-
-      defaultOrder: PropTypes.oneOf(['asc', 'desc']),
-
-      icon: PropTypes.element,
-    })
-  ),
-
-  onSortChange: PropTypes.func,
-
-  onReset: PropTypes.func,
-
-  viewMode: PropTypes.oneOf(['list', 'grid', 'map']),
-
-  onViewModeChange: PropTypes.func,
-
-  compactLayout: PropTypes.bool,
-
-  onDisplayOptionChange: PropTypes.func,
-
-  // New prop for page-specific quick filters
-
-  pageType: PropTypes.string,
-
-  user: PropTypes.object,
-};
-
-export default ResponsiveFilterBar;
diff --git a/frontend/src/components/ResponsiveFilterBar.jsx b/frontend/src/components/ResponsiveFilterBar.jsx
new file mode 100644
index 0000000..044c852
--- /dev/null
+++ b/frontend/src/components/ResponsiveFilterBar.jsx
@@ -0,0 +1,1482 @@
+import {
+  Filter,
+  X,
+  Search,
+  Wrench,
+  Settings,
+  List,
+  Map,
+  RotateCcw,
+  SortAsc,
+  SortDesc,
+  TrendingUp,
+  Grid,
+  ChevronDown,
+} from 'lucide-react';
+import PropTypes from 'prop-types';
+import { useState, useEffect, useRef } from 'react';
+
+import { useResponsiveScroll } from '../hooks/useResponsive';
+import { getDiveSites } from '../services/diveSites';
+import { getDifficultyOptions, getDifficultyLabel } from '../utils/difficultyHelpers';
+import { getTagColor } from '../utils/tagHelpers';
+
+import { DiveSiteSearchDropdown } from './ui/DiveSiteSearchDropdown';
+import { DivingCenterSearchDropdown } from './ui/DivingCenterSearchDropdown';
+import { CountrySearchDropdown, RegionSearchDropdown } from './ui/LocationSearchDropdowns';
+import Modal from './ui/Modal';
+import Select from './ui/Select';
+import { UserSearchDropdown } from './ui/UserSearchDropdown';
+
+const ResponsiveFilterBar = ({
+  showFilters = false,
+  onToggleFilters = () => {},
+  onClearFilters = () => {},
+  activeFiltersCount = 0,
+  filters = {},
+  onFilterChange = () => {},
+  onQuickFilter = () => {},
+  quickFilters = [],
+  className = '',
+  variant = 'sticky',
+  showQuickFilters = true,
+  showAdvancedToggle = true,
+  searchQuery = '',
+  onSearchChange = () => {},
+  onSearchSubmit = () => {},
+  // New sorting props
+  sortBy = '',
+  sortOrder = 'asc',
+  sortOptions = [],
+  onSortChange = () => {},
+  onReset = () => {},
+  viewMode = 'list',
+  onViewModeChange = () => {},
+  compactLayout = false,
+  onDisplayOptionChange = () => {},
+  // New prop for page-specific quick filters
+  pageType = 'dive-sites',
+  user = null,
+}) => {
+  const { isMobile, navbarVisible, searchBarVisible, quickFiltersVisible } = useResponsiveScroll();
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [isFilterOverlayOpen, setIsFilterOverlayOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState('filters');
+  const searchBarRef = useRef(null);
+  const [searchBarHeight, setSearchBarHeight] = useState(64);
+
+  // Sorting state management
+  const [pendingSortBy, setPendingSortBy] = useState(sortBy);
+  const [pendingSortOrder, setPendingSortOrder] = useState(sortOrder);
+
+  // Update pending values when props change
+  useEffect(() => {
+    setPendingSortBy(sortBy);
+    setPendingSortOrder(sortOrder);
+  }, [sortBy, sortOrder]);
+
+  // Track search bar height for positioning quick filters
+  useEffect(() => {
+    if (searchBarRef.current && searchBarVisible) {
+      const updateHeight = () => {
+        if (searchBarRef.current) {
+          setSearchBarHeight(searchBarRef.current.offsetHeight);
+        }
+      };
+      updateHeight();
+      // Update on resize
+      window.addEventListener('resize', updateHeight, { passive: true });
+      return () => window.removeEventListener('resize', updateHeight);
+    }
+  }, [searchBarVisible]);
+
+  // Tag color function - same as in DiveSitesFilterBar
+  const getTagColor = tagName => {
+    const colorMap = {
+      beginner: 'bg-green-100 text-green-800',
+      intermediate: 'bg-yellow-100 text-yellow-800',
+      advanced: 'bg-orange-100 text-orange-800',
+      expert: 'bg-red-100 text-red-800',
+      deep: 'bg-blue-100 text-blue-800',
+      shallow: 'bg-cyan-100 text-cyan-800',
+      wreck: 'bg-purple-100 text-purple-800',
+      reef: 'bg-emerald-100 text-emerald-800',
+      cave: 'bg-indigo-100 text-indigo-800',
+      wall: 'bg-slate-100 text-slate-800',
+      drift: 'bg-teal-100 text-teal-800',
+      night: 'bg-violet-100 text-violet-800',
+      photography: 'bg-pink-100 text-pink-800',
+      marine: 'bg-cyan-100 text-cyan-800',
+      training: 'bg-amber-100 text-amber-800',
+      tech: 'bg-red-100 text-red-800',
+      boat: 'bg-blue-100 text-blue-800',
+      shore: 'bg-green-100 text-green-800',
+    };
+
+    const lowerTagName = tagName.toLowerCase();
+    if (colorMap[lowerTagName]) {
+      return colorMap[lowerTagName];
+    }
+
+    for (const [key, color] of Object.entries(colorMap)) {
+      if (lowerTagName.includes(key) || key.includes(lowerTagName)) {
+        return color;
+      }
+    }
+
+    const colors = [
+      'bg-blue-100 text-blue-800',
+      'bg-green-100 text-green-800',
+      'bg-yellow-100 text-yellow-800',
+      'bg-orange-100 text-orange-800',
+      'bg-red-100 text-red-800',
+      'bg-purple-100 text-purple-800',
+      'bg-pink-100 text-pink-800',
+      'bg-indigo-100 text-indigo-800',
+      'bg-cyan-100 text-cyan-800',
+      'bg-teal-100 text-teal-800',
+      'bg-emerald-100 text-emerald-800',
+      'bg-amber-100 text-amber-800',
+      'bg-violet-100 text-violet-800',
+      'bg-slate-100 text-slate-800',
+    ];
+
+    let hash = 0;
+    for (let i = 0; i < tagName.length; i++) {
+      hash = (hash << 5) - hash + tagName.charCodeAt(i);
+      hash = hash & hash;
+    }
+
+    return colors[Math.abs(hash) % colors.length];
+  };
+
+  const handleToggleFilters = () => {
+    setIsExpanded(!isExpanded);
+    onToggleFilters();
+  };
+
+  // Handle clicking outside dropdowns
+
+  // Dive site search state for dives page (API-based)
+  const [diveSiteSearchResults, setDiveSiteSearchResults] = useState([]);
+  const [diveSiteSearchLoading, setDiveSiteSearchLoading] = useState(false);
+  const diveSiteSearchTimeoutRef = useRef(null);
+
+  // Handle dive site selection
+
+  // Handle diving center selection for dive-trips
+
+  // Handle dive site selection for dive-trips
+
+  // Handle country selection
+
+  // Handle region selection
+
+  // Handle owner selection
+
+  // Handle buddy selection
+
+  const handleFilterOverlayToggle = () => {
+    setIsFilterOverlayOpen(!isFilterOverlayOpen);
+    setActiveTab('filters'); // Reset to filters tab when opening
+  };
+
+  // Sorting handlers
+  const handleSortFieldChange = newSortBy => {
+    const option = sortOptions.find(opt => opt.value === newSortBy);
+    const newSortOrder = option?.defaultOrder || pendingSortOrder;
+    setPendingSortBy(newSortBy);
+    setPendingSortOrder(newSortOrder);
+  };
+
+  const handleSortOrderToggle = () => {
+    const newSortOrder = pendingSortOrder === 'asc' ? 'desc' : 'asc';
+    setPendingSortOrder(newSortOrder);
+  };
+
+  const handleReset = () => {
+    const firstOption = sortOptions[0];
+    if (firstOption) {
+      const defaultSortBy = firstOption.value;
+      const defaultSortOrder = firstOption.defaultOrder || 'asc';
+      setPendingSortBy(defaultSortBy);
+      setPendingSortOrder(defaultSortOrder);
+      onReset();
+    }
+  };
+
+  const handleViewModeChange = newViewMode => {
+    onViewModeChange(newViewMode);
+  };
+
+  // Handle applying all changes (filters + sorting + view)
+  const handleApplyAll = () => {
+    // Apply sorting changes if they differ from current
+    if (pendingSortBy !== sortBy || pendingSortOrder !== sortOrder) {
+      onSortChange(pendingSortBy, pendingSortOrder);
+    }
+
+    // Close the overlay
+    setIsFilterOverlayOpen(false);
+  };
+
+  // Get current sort option for display
+  const currentSortOption = sortOptions.find(opt => opt.value === sortBy);
+  const currentSortLabel = currentSortOption ? currentSortOption.label : 'Default';
+
+  // Get display text for sort order
+  const getSortOrderText = order => {
+    return order === 'asc' ? 'Ascending' : 'Descending';
+  };
+
+  const getActiveFilters = () => {
+    const active = [];
+    if (filters.search_query)
+      active.push({ key: 'search_query', label: 'Search', value: filters.search_query });
+    if (filters.search) active.push({ key: 'search', label: 'Search', value: filters.search });
+    if (filters.username)
+      active.push({ key: 'username', label: 'Username', value: filters.username });
+    if (filters.buddy_username)
+      active.push({ key: 'buddy_username', label: 'Buddy', value: filters.buddy_username });
+    if (filters.dive_site_id && pageType === 'dives' && filters.availableDiveSites) {
+      const selectedSite = filters.availableDiveSites.find(
+        site => site.id.toString() === filters.dive_site_id.toString()
+      );
+      if (selectedSite) {
+        active.push({ key: 'dive_site_id', label: 'Dive Site', value: selectedSite.name });
+      }
+    }
+    if (filters.country) active.push({ key: 'country', label: 'Country', value: filters.country });
+    if (filters.region) active.push({ key: 'region', label: 'Region', value: filters.region });
+    if (filters.difficulty_code) {
+      const difficultyLabel = getDifficultyLabel(filters.difficulty_code);
+      active.push({
+        key: 'difficulty_code',
+        label: 'Difficulty',
+        value: difficultyLabel,
+      });
+    }
+    if (filters.exclude_unspecified_difficulty) {
+      active.push({
+        key: 'exclude_unspecified_difficulty',
+        label: 'Exclude Unspecified',
+        value: 'Yes',
+      });
+    }
+    if (filters.min_rating)
+      active.push({ key: 'min_rating', label: 'Min Rating', value: `≥${filters.min_rating}` });
+    if (filters.tag_ids && filters.tag_ids.length > 0) {
+      const tagNames = filters.availableTags
+        ?.filter(tag => filters.tag_ids.includes(tag.id))
+        .map(tag => tag.name)
+        .join(', ');
+      if (tagNames) {
+        active.push({ key: 'tag_ids', label: 'Tags', value: tagNames });
+      }
+    }
+    return active;
+  };
+
+  const activeFilters = getActiveFilters();
+
+  // Desktop version - similar to original
+  if (!isMobile) {
+    return (
+      <div
+        data-testid='responsive-filter-bar'
+        className={`bg-white border-b border-gray-200 shadow-sm sticky top-0 z-40 ${className}`}
+      >
+        <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 sm:gap-4 p-4'>
+          {/* Quick Filters */}
+          {showQuickFilters && (
+            <div className='flex items-center gap-2 sm:ml-2 w-full sm:w-auto justify-center sm:justify-end'>
+              {/* Page-specific quick filters */}
+              {pageType === 'dives' ? (
+                // Dives page quick filters
+                <>
+                  {user && user.id && (
+                    <button
+                      onClick={() => onQuickFilter('my_dives')}
+                      className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                        quickFilters.includes('my_dives')
+                          ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                          : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                      }`}
+                      title='My Dives'
+                    >
+                      👤 <span className='hidden sm:inline'>My Dives</span>
+                    </button>
+                  )}
+                  <button
+                    onClick={() => onQuickFilter('wrecks')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('wrecks')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Wreck dives'
+                  >
+                    🚢 <span className='hidden sm:inline'>Wreck</span>
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('reefs')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('reefs')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Reef dives'
+                  >
+                    🐠 <span className='hidden sm:inline'>Reef</span>
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('boat_dive')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('boat_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Boat dives'
+                  >
+                    🚤 <span className='hidden sm:inline'>Boat</span>
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('shore_dive')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('shore_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Shore dives'
+                  >
+                    🏖️ <span className='hidden sm:inline'>Shore</span>
+                  </button>
+                </>
+              ) : pageType === 'dive-trips' ? null : ( // No quick filters for dive trips
+                // Default dive-sites quick filters
+                <>
+                  <button
+                    onClick={() => onQuickFilter('wrecks')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('wrecks')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Wreck dive sites'
+                  >
+                    🚢 <span className='hidden sm:inline'>Wreck</span>
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('reefs')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('reefs')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Reef dive sites'
+                  >
+                    🐠 <span className='hidden sm:inline'>Reef</span>
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('boat_dive')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('boat_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Boat dive sites'
+                  >
+                    🚤 <span className='hidden sm:inline'>Boat</span>
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('shore_dive')}
+                    className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
+                      quickFilters.includes('shore_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300 shadow-sm'
+                        : 'bg-gray-50 text-gray-600 border border-gray-200 hover:bg-gray-100 active:bg-gray-200'
+                    }`}
+                    title='Shore dive sites'
+                  >
+                    🏖️ <span className='hidden sm:inline'>Shore</span>
+                  </button>
+                </>
+              )}
+            </div>
+          )}
+
+          {/* Filter Actions */}
+          <div className='flex items-center gap-3 ml-4'>
+            {activeFiltersCount > 0 && (
+              <div className='flex items-center gap-2'>
+                <span className='text-xs sm:text-sm text-gray-600'>
+                  {activeFiltersCount} active filter{activeFiltersCount !== 1 ? 's' : ''}
+                </span>
+                <button
+                  onClick={onClearFilters}
+                  className='p-1 text-gray-400 hover:text-gray-600 transition-colors'
+                  title='Clear all filters'
+                >
+                  <X className='h-4 w-4' />
+                </button>
+              </div>
+            )}
+
+            {showAdvancedToggle && (
+              <button
+                onClick={handleToggleFilters}
+                className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
+                  showFilters
+                    ? 'bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 shadow-sm'
+                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200 active:bg-gray-300'
+                }`}
+              >
+                <Filter className='h-4 w-4' />
+                <span className='text-sm font-medium'>
+                  {showFilters ? 'Hide Filters' : 'Show Filters'}
+                </span>
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Active Filters Display */}
+        {activeFilters.length > 0 && (
+          <div className='border-t border-gray-200 py-2 px-3 bg-blue-50'>
+            <div className='flex items-center gap-2 mb-1.5'>
+              <span className='text-xs font-medium text-blue-900'>Active Filters:</span>
+            </div>
+            <div className='flex flex-wrap gap-1 justify-start'>
+              {activeFilters.map(filter => (
+                <div
+                  key={filter.key}
+                  className='inline-flex items-center gap-1 px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full border border-blue-200'
+                >
+                  <span className='font-medium'>{filter.label}:</span>
+                  <span className='max-w-[100px] truncate'>{filter.value}</span>
+                  <button
+                    onClick={() => onFilterChange(filter.key, '')}
+                    className='ml-1 text-blue-600 hover:text-blue-800 active:text-blue-900 transition-colors p-0.5 rounded-full hover:bg-blue-200 active:bg-blue-300'
+                    title={`Remove ${filter.label} filter`}
+                  >
+                    <X className='h-2.5 w-2.5' />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Desktop: Sorting & View Controls */}
+        <div className='border-t border-gray-200 bg-white py-3 px-4'>
+          <div className='flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3'>
+            {/* Sorting Controls */}
+            <div className='flex items-center gap-3'>
+              <Select
+                id='desktop-sort-by'
+                label='Sort by:'
+                className='flex-row items-center gap-2'
+                value={sortBy}
+                onValueChange={value => onSortChange(value, sortOrder)}
+                options={sortOptions.map(opt => ({ value: opt.value, label: opt.label }))}
+              />
+
+              <div className='flex items-center gap-1'>
+                <button
+                  onClick={() => onSortChange(sortBy, 'asc')}
+                  aria-label='Sort Ascending'
+                  className={`px-3 py-2 text-sm rounded-l-md border transition-colors min-h-[40px] sm:min-h-0 ${
+                    sortOrder === 'asc'
+                      ? 'bg-blue-600 text-white border-blue-600'
+                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                  }`}
+                  title='Sort Ascending'
+                >
+                  <SortAsc className='h-4 w-4' />
+                </button>
+                <button
+                  onClick={() => onSortChange(sortBy, 'desc')}
+                  aria-label='Sort Descending'
+                  className={`px-3 py-2 text-sm rounded-r-md border-l-0 border transition-colors min-h-[40px] sm:min-h-0 ${
+                    sortOrder === 'desc'
+                      ? 'bg-blue-600 text-white border-blue-600'
+                      : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                  }`}
+                  title='Sort Descending'
+                >
+                  <SortDesc className='h-4 w-4' />
+                </button>
+              </div>
+            </div>
+
+            {/* View Mode & Display Options */}
+            <div className='flex items-center gap-3'>
+              {/* View Mode Selection */}
+              <div className='flex items-center gap-2'>
+                <label className='text-sm font-medium text-gray-700'>View:</label>
+                <div className='flex rounded-md shadow-sm' data-testid='view-mode-toggle'>
+                  <button
+                    onClick={() => onViewModeChange('list')}
+                    aria-label='List View'
+                    data-testid='list-view-button'
+                    className={`px-3 py-2 text-sm border transition-colors rounded-l-md min-h-[40px] sm:min-h-0 ${
+                      viewMode === 'list'
+                        ? 'bg-blue-600 text-white border-blue-600 active'
+                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                    }`}
+                    title='List View'
+                  >
+                    <List className='h-4 w-4' />
+                  </button>
+                  <button
+                    onClick={() => onViewModeChange('grid')}
+                    aria-label='Grid View'
+                    data-testid='grid-view-button'
+                    className={`px-3 py-2 text-sm border border-l-0 transition-colors min-h-[40px] sm:min-h-0 ${
+                      viewMode === 'grid'
+                        ? 'bg-blue-600 text-white border-blue-600 active'
+                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                    }`}
+                    title='Grid View'
+                  >
+                    <Grid className='h-4 w-4' />
+                  </button>
+                  <button
+                    onClick={() => onViewModeChange('map')}
+                    aria-label='Map View'
+                    data-testid='map-view-button'
+                    className={`px-3 py-2 text-sm border border-l-0 transition-colors rounded-r-md min-h-[40px] sm:min-h-0 ${
+                      viewMode === 'map'
+                        ? 'bg-blue-600 text-white border-blue-600 active'
+                        : 'bg-white text-gray-700 border-gray-300 hover:bg-gray-50'
+                    }`}
+                    title='Map View'
+                  >
+                    <Map className='h-4 w-4' />
+                  </button>
+                </div>
+              </div>
+
+              {/* Display Options */}
+              <div className='flex items-center gap-2'>
+                <label className='text-sm font-medium text-gray-700'>Display:</label>
+                <div className='flex items-center gap-2'>
+                  <label className='flex items-center gap-1 text-sm text-gray-700'>
+                    <input
+                      type='checkbox'
+                      checked={compactLayout}
+                      onChange={() => onDisplayOptionChange('compact')}
+                      className='rounded border-gray-300 text-blue-600 focus:ring-blue-500'
+                    />
+                    Compact
+                  </label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Desktop: Expandable Filters Section */}
+        {showFilters && (
+          <div className='border-t border-gray-200 bg-gray-50'>
+            <div className='p-4'>
+              <div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
+                {/* Difficulty Level Filter */}
+                <div>
+                  <Select
+                    id='desktop-difficulty-filter'
+                    label='Difficulty Level'
+                    value={filters.difficulty_code || 'all'}
+                    onValueChange={value =>
+                      onFilterChange('difficulty_code', value === 'all' ? '' : value)
+                    }
+                    options={[
+                      { value: 'all', label: 'All Levels' },
+                      ...getDifficultyOptions()
+                        .filter(opt => opt.value !== null)
+                        .map(opt => ({ value: opt.value, label: opt.label })),
+                    ]}
+                  />
+                  <label className='flex items-center mt-2'>
+                    <input
+                      type='checkbox'
+                      checked={filters.exclude_unspecified_difficulty ?? false}
+                      onChange={e =>
+                        onFilterChange('exclude_unspecified_difficulty', e.target.checked)
+                      }
+                      className='mr-2'
+                    />
+                    <span className='text-xs text-gray-600'>Exclude Unspecified</span>
+                  </label>
+                </div>
+
+                {/* Min Rating Filter - Only show for dive-sites and dives, not dive-trips */}
+                {pageType !== 'dive-trips' && (
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 mb-2'>
+                      Min Rating (≥)
+                    </label>
+                    <input
+                      type='number'
+                      min='0'
+                      max='10'
+                      step='1'
+                      placeholder='Min rating (1-10)'
+                      value={filters.min_rating || ''}
+                      onChange={e => onFilterChange('min_rating', e.target.value)}
+                      onKeyDown={e => {
+                        if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === ',') {
+                          e.preventDefault();
+                        }
+                      }}
+                      className={`w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm ${
+                        filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10)
+                          ? 'border-red-500 ring-1 ring-red-500'
+                          : 'border-gray-300'
+                      }`}
+                    />
+                    {filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10) && (
+                      <p className='text-red-500 text-xs mt-1'>Rating must be between 0 and 10</p>
+                    )}
+                  </div>
+                )}
+
+                {/* Diving Center Filter - Searchable for dive-trips */}
+                {pageType === 'dive-trips' && (
+                  <DivingCenterSearchDropdown
+                    value={filters.diving_center_name || ''}
+                    onChange={center => {
+                      if (center) {
+                        onFilterChange('diving_center_id', center.id);
+                        onFilterChange('diving_center_name', center.name);
+                      } else {
+                        onFilterChange('diving_center_id', '');
+                        onFilterChange('diving_center_name', '');
+                      }
+                    }}
+                  />
+                )}
+
+                {/* Dive Site Filter - Show for dives and dive-trips */}
+                {pageType === 'dives' && (
+                  <DiveSiteSearchDropdown
+                    value={{ id: filters.dive_site_id, name: filters.dive_site_name }}
+                    onChange={site => {
+                      if (site) {
+                        onFilterChange('dive_site_id', site.id);
+                        onFilterChange('dive_site_name', site.name);
+                      } else {
+                        onFilterChange('dive_site_id', '');
+                        onFilterChange('dive_site_name', '');
+                      }
+                    }}
+                  />
+                )}
+
+                {/* Owner Filter - Searchable for dives page */}
+                {pageType === 'dives' && (
+                  <UserSearchDropdown
+                    label='User/Owner'
+                    placeholder='Search users...'
+                    value={{ id: filters.owner_id, name: filters.owner_name }}
+                    onChange={user => {
+                      if (user) {
+                        onFilterChange('owner_id', user.id);
+                        onFilterChange('owner_name', user.name);
+                      } else {
+                        onFilterChange('owner_id', '');
+                        onFilterChange('owner_name', '');
+                      }
+                    }}
+                  />
+                )}
+
+                {/* Buddy Filter - Searchable for dives page */}
+                {pageType === 'dives' && (
+                  <UserSearchDropdown
+                    label='Buddy'
+                    placeholder='Search buddies...'
+                    value={{ id: filters.buddy_id, name: filters.buddy_name }}
+                    onChange={user => {
+                      if (user) {
+                        onFilterChange('buddy_id', user.id);
+                        onFilterChange('buddy_name', user.name);
+                      } else {
+                        onFilterChange('buddy_id', '');
+                        onFilterChange('buddy_name', '');
+                      }
+                    }}
+                  />
+                )}
+
+                {/* Dive Site Filter - Searchable for dive-trips */}
+                {pageType === 'dive-trips' && (
+                  <DiveSiteSearchDropdown
+                    value={{ id: filters.dive_site_id, name: filters.dive_site_name }}
+                    onChange={site => {
+                      if (site) {
+                        onFilterChange('dive_site_id', site.id);
+                        onFilterChange('dive_site_name', site.name);
+                      } else {
+                        onFilterChange('dive_site_id', '');
+                        onFilterChange('dive_site_name', '');
+                      }
+                    }}
+                  />
+                )}
+
+                {/* Date Range Filters - For dive-trips */}
+                {pageType === 'dive-trips' && (
+                  <>
+                    <div>
+                      <label className='block text-sm font-medium text-gray-700 mb-2'>
+                        Start Date
+                      </label>
+                      <input
+                        type='date'
+                        value={filters.start_date || ''}
+                        onChange={e => onFilterChange('start_date', e.target.value)}
+                        className='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
+                      />
+                    </div>
+                    <div>
+                      <label className='block text-sm font-medium text-gray-700 mb-2'>
+                        End Date
+                      </label>
+                      <input
+                        type='date'
+                        value={filters.end_date || ''}
+                        onChange={e => onFilterChange('end_date', e.target.value)}
+                        className='w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
+                      />
+                    </div>
+                  </>
+                )}
+
+                {/* Country Filter - Searchable (not for dives page) */}
+                {pageType !== 'dives' && (
+                  <CountrySearchDropdown
+                    value={filters.country || ''}
+                    onChange={val => onFilterChange('country', val)}
+                  />
+                )}
+
+                {/* Region Filter - Searchable (not for dives page) */}
+                {pageType !== 'dives' && (
+                  <RegionSearchDropdown
+                    value={filters.region || ''}
+                    countryFilter={filters.country || ''}
+                    onChange={val => onFilterChange('region', val)}
+                  />
+                )}
+
+                {/* Tags Filter */}
+                {filters.availableTags && filters.availableTags.length > 0 && (
+                  <div className='md:col-span-2 lg:col-span-3'>
+                    <label className='block text-sm font-medium text-gray-700 mb-2'>Tags</label>
+                    <div className='flex flex-wrap gap-2'>
+                      {filters.availableTags.map(tag => (
+                        <button
+                          key={tag.id}
+                          type='button'
+                          onClick={() => {
+                            const tagId = parseInt(tag.id);
+                            const currentTagIds = filters.tag_ids || [];
+                            const newTagIds = currentTagIds.includes(tagId)
+                              ? currentTagIds.filter(id => id !== tagId)
+                              : [...currentTagIds, tagId];
+                            onFilterChange('tag_ids', newTagIds);
+                          }}
+                          className={`px-3 py-2 rounded-full text-sm font-medium transition-all duration-200 hover:scale-105 ${
+                            (filters.tag_ids || []).includes(tag.id)
+                              ? `${getTagColor(tag.name)} border-2 border-current shadow-md`
+                              : `${getTagColor(tag.name)} opacity-60 hover:opacity-100 border-2 border-transparent`
+                          }`}
+                        >
+                          {tag.name}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Mobile version with scroll-based behavior
+  return (
+    <>
+      {/* Sticky Container for Search & Filters */}
+      <div className='sticky top-0 left-0 right-0 z-[100] w-full'>
+        {/* Mobile Search Bar */}
+        <div
+          ref={searchBarRef}
+          data-testid='mobile-search-bar'
+          className='bg-white border-b border-gray-200 shadow-sm'
+        >
+          <div className='p-3'>
+            <div className='relative'>
+              <Search className='absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400' />
+              <input
+                type='text'
+                placeholder='Search dive sites...'
+                value={searchQuery}
+                onChange={e => onSearchChange(e.target.value)}
+                onKeyPress={e => e.key === 'Enter' && onSearchSubmit()}
+                className='w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Quick Filters Bar */}
+        <div
+          data-testid='mobile-quick-filters'
+          className='bg-white border-b border-gray-200 shadow-sm'
+        >
+          <div className='flex items-center justify-between p-3'>
+            {/* Filter Icon with Count */}
+            <button
+              data-testid='mobile-filter-button'
+              onClick={handleFilterOverlayToggle}
+              className='flex items-center gap-2 px-3 py-2 bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition-colors min-h-[44px]'
+            >
+              <Wrench className='h-5 w-5' />
+              {activeFiltersCount > 0 && (
+                <span className='bg-blue-600 text-white text-xs rounded-full px-2 py-1 min-w-[20px] text-center'>
+                  {activeFiltersCount}
+                </span>
+              )}
+            </button>
+
+            {/* Quick Filter Buttons */}
+            <div className='flex items-center gap-2 overflow-x-auto flex-1 ml-3'>
+              {/* Page-specific mobile quick filters */}
+              {pageType === 'dives' ? (
+                // Dives page mobile quick filters
+                <>
+                  {user && user.id && (
+                    <button
+                      onClick={() => onQuickFilter('my_dives')}
+                      aria-label='My Dives'
+                      className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                        quickFilters.includes('my_dives')
+                          ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                          : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                      }`}
+                      title='My Dives'
+                    >
+                      👤
+                    </button>
+                  )}
+                  <button
+                    onClick={() => onQuickFilter('wrecks')}
+                    aria-label='Wreck Dives'
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('wrecks')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Wreck dives'
+                  >
+                    🚢
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('reefs')}
+                    aria-label='Reef Dives'
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('reefs')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Reef dives'
+                  >
+                    🐠
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('boat_dive')}
+                    aria-label='Boat Dives'
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('boat_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Boat dives'
+                  >
+                    🚤
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('shore_dive')}
+                    aria-label='Shore Dives'
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('shore_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Shore dives'
+                  >
+                    🏖️
+                  </button>
+                </>
+              ) : pageType === 'dive-trips' ? null : ( // No quick filters for dive trips
+                // Default dive-sites mobile quick filters
+                <>
+                  <button
+                    onClick={() => onQuickFilter('wrecks')}
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('wrecks')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Wreck dive sites'
+                  >
+                    🚢
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('reefs')}
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('reefs')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Reef dive sites'
+                  >
+                    🐠
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('boat_dive')}
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('boat_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Boat dive sites'
+                  >
+                    🚤
+                  </button>
+                  <button
+                    onClick={() => onQuickFilter('shore_dive')}
+                    className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors min-h-[44px] ${
+                      quickFilters.includes('shore_dive')
+                        ? 'bg-blue-100 text-blue-700 border border-blue-300'
+                        : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    }`}
+                    title='Shore dive sites'
+                  >
+                    🏖️
+                  </button>
+                </>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Mobile Filter Overlay - Full Page with Tabs */}
+
+      <Modal
+        isOpen={isFilterOverlayOpen}
+        onClose={handleFilterOverlayToggle}
+        title='Filters & Sorting'
+        className='w-full h-screen sm:h-auto sm:max-w-2xl p-0 flex flex-col'
+        showCloseButton={true}
+      >
+        {/* Tab Navigation */}
+
+        <div className='flex border-b border-gray-200 bg-white'>
+          <button
+            onClick={() => setActiveTab('filters')}
+            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+              activeTab === 'filters'
+                ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
+                : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
+            }`}
+          >
+            <Filter className='h-4 w-4 inline mr-2' />
+            Filters
+          </button>
+
+          <button
+            onClick={() => setActiveTab('sorting')}
+            className={`flex-1 px-4 py-3 text-sm font-medium transition-colors ${
+              activeTab === 'sorting'
+                ? 'text-blue-600 border-b-2 border-blue-600 bg-blue-50'
+                : 'text-gray-600 hover:text-gray-800 hover:bg-gray-50'
+            }`}
+          >
+            <Settings className='h-4 w-4 inline mr-2' />
+            Sorting & View
+          </button>
+        </div>
+
+        {/* Tab Content */}
+
+        <div className='flex-1 overflow-y-auto min-h-0'>
+          {/* Filters Tab */}
+
+          {activeTab === 'filters' && (
+            <div className='p-4 space-y-6 pb-4'>
+              {/* Difficulty Level Filter */}
+
+              <div>
+                <Select
+                  id='mobile-difficulty-filter'
+                  label='Difficulty Level'
+                  value={filters.difficulty_code || 'all'}
+                  onValueChange={value =>
+                    onFilterChange('difficulty_code', value === 'all' ? '' : value)
+                  }
+                  options={[
+                    { value: 'all', label: 'All Levels' },
+                    ...getDifficultyOptions()
+                      .filter(opt => opt.value !== null)
+                      .map(opt => ({ value: opt.value, label: opt.label })),
+                  ]}
+                />
+
+                <label className='flex items-center mt-2'>
+                  <input
+                    type='checkbox'
+                    checked={filters.exclude_unspecified_difficulty ?? false}
+                    onChange={e =>
+                      onFilterChange('exclude_unspecified_difficulty', e.target.checked)
+                    }
+                    className='mr-2'
+                  />
+
+                  <span className='text-sm text-gray-600'>Exclude Unspecified</span>
+                </label>
+              </div>
+
+              {/* Dive Site Filter - Searchable for dives page (mobile) */}
+
+              {pageType === 'dives' && (
+                <DiveSiteSearchDropdown
+                  value={{ id: filters.dive_site_id, name: filters.dive_site_name }}
+                  onChange={site => {
+                    if (site) {
+                      onFilterChange('dive_site_id', site.id);
+                      onFilterChange('dive_site_name', site.name);
+                    } else {
+                      onFilterChange('dive_site_id', '');
+                      onFilterChange('dive_site_name', '');
+                    }
+                  }}
+                />
+              )}
+
+              {/* Owner Filter - Searchable for dives page (mobile) */}
+
+              {pageType === 'dives' && (
+                <UserSearchDropdown
+                  label='User/Owner'
+                  placeholder='Search users...'
+                  value={{ id: filters.owner_id, name: filters.owner_name }}
+                  onChange={user => {
+                    if (user) {
+                      onFilterChange('owner_id', user.id);
+                      onFilterChange('owner_name', user.name);
+                    } else {
+                      onFilterChange('owner_id', '');
+                      onFilterChange('owner_name', '');
+                    }
+                  }}
+                />
+              )}
+
+              {/* Buddy Filter - Searchable for dives page (mobile) */}
+
+              {pageType === 'dives' && (
+                <UserSearchDropdown
+                  label='Buddy'
+                  placeholder='Search buddies...'
+                  value={{ id: filters.buddy_id, name: filters.buddy_name }}
+                  onChange={user => {
+                    if (user) {
+                      onFilterChange('buddy_id', user.id);
+                      onFilterChange('buddy_name', user.name);
+                    } else {
+                      onFilterChange('buddy_id', '');
+                      onFilterChange('buddy_name', '');
+                    }
+                  }}
+                />
+              )}
+
+              {/* Diving Center Filter - Searchable for dive-trips (mobile) */}
+              {pageType === 'dive-trips' && (
+                <DivingCenterSearchDropdown
+                  value={filters.diving_center_name || ''}
+                  onChange={center => {
+                    if (center) {
+                      onFilterChange('diving_center_id', center.id);
+                      onFilterChange('diving_center_name', center.name);
+                    } else {
+                      onFilterChange('diving_center_id', '');
+                      onFilterChange('diving_center_name', '');
+                    }
+                  }}
+                />
+              )}
+
+              {/* Dive Site Filter - Searchable for dive-trips (mobile) */}
+
+              {pageType === 'dive-trips' && (
+                <DiveSiteSearchDropdown
+                  value={{ id: filters.dive_site_id, name: filters.dive_site_name }}
+                  onChange={site => {
+                    if (site) {
+                      onFilterChange('dive_site_id', site.id);
+                      onFilterChange('dive_site_name', site.name);
+                    } else {
+                      onFilterChange('dive_site_id', '');
+                      onFilterChange('dive_site_name', '');
+                    }
+                  }}
+                />
+              )}
+
+              {/* Date Range Filters - For dive-trips (mobile) */}
+
+              {pageType === 'dive-trips' && (
+                <>
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 mb-3'>
+                      Start Date
+                    </label>
+
+                    <input
+                      type='date'
+                      value={filters.start_date || ''}
+                      onChange={e => onFilterChange('start_date', e.target.value)}
+                      className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
+                    />
+                  </div>
+
+                  <div>
+                    <label className='block text-sm font-medium text-gray-700 mb-3'>End Date</label>
+
+                    <input
+                      type='date'
+                      value={filters.end_date || ''}
+                      onChange={e => onFilterChange('end_date', e.target.value)}
+                      className='w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px]'
+                    />
+                  </div>
+                </>
+              )}
+
+              {/* Min Rating Filter - Only show for dive-sites and dives, not dive-trips */}
+
+              {pageType !== 'dive-trips' && (
+                <div>
+                  <label className='block text-sm font-medium text-gray-700 mb-3'>
+                    Min Rating (≥)
+                  </label>
+
+                  <input
+                    type='number'
+                    min='0'
+                    max='10'
+                    step='1'
+                    placeholder='Min rating (1-10)'
+                    value={filters.min_rating || ''}
+                    onChange={e => onFilterChange('min_rating', e.target.value)}
+                    onKeyDown={e => {
+                      if (e.key === '.' || e.key === 'e' || e.key === 'E' || e.key === ',') {
+                        e.preventDefault();
+                      }
+                    }}
+                    className={`w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-base min-h-[34px] ${
+                      filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10)
+                        ? 'border-red-500 ring-1 ring-red-500'
+                        : 'border-gray-300'
+                    }`}
+                  />
+                  {filters.min_rating && (filters.min_rating < 0 || filters.min_rating > 10) && (
+                    <p className='text-red-500 text-sm mt-1'>Rating must be between 0 and 10</p>
+                  )}
+                </div>
+              )}
+
+              {/* Country Filter - Searchable (mobile, not for dives page) */}
+
+              {pageType !== 'dives' && (
+                <CountrySearchDropdown
+                  value={filters.country}
+                  onChange={country => {
+                    onFilterChange('country', country);
+                    onFilterChange('region', ''); // Reset region when country changes
+                  }}
+                />
+              )}
+
+              {/* Region Filter - Searchable (mobile, not for dives page) */}
+
+              {pageType !== 'dives' && (
+                <RegionSearchDropdown
+                  country={filters.country}
+                  value={filters.region}
+                  onChange={region => onFilterChange('region', region)}
+                />
+              )}
+
+              {/* Tags Filter */}
+
+              {filters.availableTags && filters.availableTags.length > 0 && (
+                <div>
+                  <label className='block text-sm font-medium text-gray-700 mb-3'>Tags</label>
+
+                  <div className='flex flex-wrap gap-3'>
+                    {filters.availableTags.map(tag => (
+                      <button
+                        key={tag.id}
+                        type='button'
+                        onClick={() => {
+                          const tagId = parseInt(tag.id);
+
+                          const currentTagIds = filters.tag_ids || [];
+
+                          const newTagIds = currentTagIds.includes(tagId)
+                            ? currentTagIds.filter(id => id !== tagId)
+                            : [...currentTagIds, tagId];
+
+                          onFilterChange('tag_ids', newTagIds);
+                        }}
+                        className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 hover:scale-105 min-h-[34px] ${
+                          (filters.tag_ids || []).includes(tag.id)
+                            ? `${getTagColor(tag.name)} border-2 border-current shadow-md`
+                            : `${getTagColor(tag.name)} opacity-60 hover:opacity-100 border-2 border-transparent`
+                        }`}
+                      >
+                        {tag.name}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
+
+          {/* Sorting & View Tab - Compact Mobile Interface */}
+
+          {activeTab === 'sorting' && (
+            <div className='p-4 space-y-6 pb-4'>
+              {/* Sort Field Selection - Compact Dropdown */}
+
+              <Select
+                id='mobile-sort-by'
+                label='Sort Field'
+                value={pendingSortBy || 'all'}
+                onValueChange={value => handleSortFieldChange(value === 'all' ? '' : value)}
+                options={[
+                  { value: 'all', label: 'Select sort field' },
+                  ...sortOptions.map(opt => ({
+                    value: opt.value,
+                    label: `${opt.label} (${opt.defaultOrder === 'asc' ? 'Low to High' : 'High to Low'})`,
+                  })),
+                ]}
+              />
+
+              {/* Sort Order - Compact Toggle */}
+
+              <div>
+                <h4 className='text-sm font-medium text-gray-700 mb-3'>Sort Order</h4>
+
+                <div className='flex gap-2'>
+                  <button
+                    onClick={() => setPendingSortOrder('asc')}
+                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
+                      pendingSortOrder === 'asc'
+                        ? 'bg-blue-50 border-blue-200 text-blue-900'
+                        : 'bg-white border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <div className='flex items-center justify-center gap-2'>
+                      <SortAsc className='w-4 h-4' />
+                      Ascending
+                    </div>
+                  </button>
+
+                  <button
+                    onClick={() => setPendingSortOrder('desc')}
+                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
+                      pendingSortOrder === 'desc'
+                        ? 'bg-blue-50 border-blue-200 text-blue-900'
+                        : 'bg-white border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <div className='flex items-center justify-center gap-2'>
+                      <SortDesc className='w-4 h-4' />
+                      Descending
+                    </div>
+                  </button>
+                </div>
+              </div>
+
+              {/* View Mode Selection - Compact Buttons */}
+
+              <div>
+                <h4 className='text-sm font-medium text-gray-700 mb-3'>View Mode</h4>
+
+                <div className='flex gap-2' data-testid='view-mode-toggle'>
+                  <button
+                    onClick={() => handleViewModeChange('list')}
+                    data-testid='list-view-button'
+                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
+                      viewMode === 'list'
+                        ? 'bg-blue-50 border-blue-200 text-blue-900 active'
+                        : 'bg-white border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <div className='flex items-center justify-center gap-2'>
+                      <List className='w-4 h-4' />
+                      List
+                    </div>
+                  </button>
+
+                  <button
+                    onClick={() => handleViewModeChange('map')}
+                    data-testid='map-view-button'
+                    className={`flex-1 px-4 py-2 text-sm font-medium rounded-lg border transition-colors min-h-[34px] ${
+                      viewMode === 'map'
+                        ? 'bg-blue-50 border-blue-200 text-blue-900 active'
+                        : 'bg-white border-gray-200 hover:bg-gray-50'
+                    }`}
+                  >
+                    <div className='flex items-center justify-center gap-2'>
+                      <Map className='w-4 h-4' />
+                      Map
+                    </div>
+                  </button>
+                </div>
+              </div>
+
+              {/* Display Options - Compact Checkbox */}
+
+              <div>
+                <h4 className='text-sm font-medium text-gray-700 mb-3'>Display Options</h4>
+
+                <div className='space-y-2'>
+                  <label className='flex items-center gap-3 p-3 bg-gray-50 border border-gray-200 rounded-lg cursor-pointer hover:bg-gray-100 transition-colors'>
+                    <input
+                      type='checkbox'
+                      className='w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500'
+                      checked={compactLayout}
+                      onChange={() => onDisplayOptionChange('compact')}
+                    />
+
+                    <span className='text-sm text-gray-700'>Compact layout</span>
+                  </label>
+                </div>
+              </div>
+
+              {/* Sorting Action Buttons - Only Reset button, no Apply Sort */}
+
+              <div className='flex gap-3 pt-4'>
+                <button
+                  onClick={handleReset}
+                  className='flex-1 bg-gray-200 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-300 transition-colors'
+                >
+                  <RotateCcw className='w-4 h-4 inline mr-2' />
+                  Reset
+                </button>
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Footer Actions - Single Apply All button */}
+
+        <div className='border-t border-gray-200 p-4 bg-gray-50 flex gap-3'>
+          <button
+            onClick={onClearFilters}
+            className='flex-1 px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors min-h-[34px]'
+          >
+            Clear All
+          </button>
+
+          <button
+            onClick={handleApplyAll}
+            className='flex-1 px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors min-h-[34px]'
+          >
+            Apply All
+          </button>
+        </div>
+      </Modal>
+    </>
+  );
+};
+
+ResponsiveFilterBar.propTypes = {
+  showFilters: PropTypes.bool,
+
+  onToggleFilters: PropTypes.func,
+
+  onClearFilters: PropTypes.func,
+
+  activeFiltersCount: PropTypes.number,
+
+  filters: PropTypes.object,
+
+  onFilterChange: PropTypes.func,
+
+  onQuickFilter: PropTypes.func,
+
+  quickFilters: PropTypes.array,
+
+  className: PropTypes.string,
+
+  variant: PropTypes.oneOf(['sticky', 'floating', 'inline']),
+
+  showQuickFilters: PropTypes.bool,
+
+  showAdvancedToggle: PropTypes.bool,
+
+  searchQuery: PropTypes.string,
+
+  onSearchChange: PropTypes.func,
+
+  onSearchSubmit: PropTypes.func,
+
+  // New sorting props
+
+  sortBy: PropTypes.string,
+
+  sortOrder: PropTypes.oneOf(['asc', 'desc']),
+
+  sortOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+
+      label: PropTypes.string.isRequired,
+
+      defaultOrder: PropTypes.oneOf(['asc', 'desc']),
+
+      icon: PropTypes.element,
+    })
+  ),
+
+  onSortChange: PropTypes.func,
+
+  onReset: PropTypes.func,
+
+  viewMode: PropTypes.oneOf(['list', 'grid', 'map']),
+
+  onViewModeChange: PropTypes.func,
+
+  compactLayout: PropTypes.bool,
+
+  onDisplayOptionChange: PropTypes.func,
+
+  // New prop for page-specific quick filters
+
+  pageType: PropTypes.string,
+
+  user: PropTypes.object,
+};
+
+export default ResponsiveFilterBar;
diff --git a/frontend/src/components/RouteCanvas.js b/frontend/src/components/RouteCanvas.jsx
similarity index 100%
rename from frontend/src/components/RouteCanvas.js
rename to frontend/src/components/RouteCanvas.jsx
diff --git a/frontend/src/components/RoutePreview.js b/frontend/src/components/RoutePreview.jsx
similarity index 100%
rename from frontend/src/components/RoutePreview.js
rename to frontend/src/components/RoutePreview.jsx
diff --git a/frontend/src/components/RouteSelection.js b/frontend/src/components/RouteSelection.jsx
similarity index 100%
rename from frontend/src/components/RouteSelection.js
rename to frontend/src/components/RouteSelection.jsx
diff --git a/frontend/src/components/SEO.js b/frontend/src/components/SEO.jsx
similarity index 100%
rename from frontend/src/components/SEO.js
rename to frontend/src/components/SEO.jsx
diff --git a/frontend/src/components/SessionManager.js b/frontend/src/components/SessionManager.jsx
similarity index 100%
rename from frontend/src/components/SessionManager.js
rename to frontend/src/components/SessionManager.jsx
diff --git a/frontend/src/components/ShareButton.js b/frontend/src/components/ShareButton.jsx
similarity index 100%
rename from frontend/src/components/ShareButton.js
rename to frontend/src/components/ShareButton.jsx
diff --git a/frontend/src/components/ShareModal.js b/frontend/src/components/ShareModal.jsx
similarity index 100%
rename from frontend/src/components/ShareModal.js
rename to frontend/src/components/ShareModal.jsx
diff --git a/frontend/src/components/SocialMediaIcons.js b/frontend/src/components/SocialMediaIcons.jsx
similarity index 100%
rename from frontend/src/components/SocialMediaIcons.js
rename to frontend/src/components/SocialMediaIcons.jsx
diff --git a/frontend/src/components/StickyFilterBar.js b/frontend/src/components/StickyFilterBar.jsx
similarity index 100%
rename from frontend/src/components/StickyFilterBar.js
rename to frontend/src/components/StickyFilterBar.jsx
diff --git a/frontend/src/components/StickyRateBar.js b/frontend/src/components/StickyRateBar.jsx
similarity index 100%
rename from frontend/src/components/StickyRateBar.js
rename to frontend/src/components/StickyRateBar.jsx
diff --git a/frontend/src/components/TripFormModal.js b/frontend/src/components/TripFormModal.jsx
similarity index 100%
rename from frontend/src/components/TripFormModal.js
rename to frontend/src/components/TripFormModal.jsx
diff --git a/frontend/src/components/TripHeader.js b/frontend/src/components/TripHeader.jsx
similarity index 100%
rename from frontend/src/components/TripHeader.js
rename to frontend/src/components/TripHeader.jsx
diff --git a/frontend/src/components/Turnstile.js b/frontend/src/components/Turnstile.jsx
similarity index 100%
rename from frontend/src/components/Turnstile.js
rename to frontend/src/components/Turnstile.jsx
diff --git a/frontend/src/components/UnifiedMapFilters.js b/frontend/src/components/UnifiedMapFilters.jsx
similarity index 100%
rename from frontend/src/components/UnifiedMapFilters.js
rename to frontend/src/components/UnifiedMapFilters.jsx
diff --git a/frontend/src/components/UploadPhotosComponent.js b/frontend/src/components/UploadPhotosComponent.jsx
similarity index 100%
rename from frontend/src/components/UploadPhotosComponent.js
rename to frontend/src/components/UploadPhotosComponent.jsx
diff --git a/frontend/src/components/UserChat/ChatDropdown.js b/frontend/src/components/UserChat/ChatDropdown.jsx
similarity index 100%
rename from frontend/src/components/UserChat/ChatDropdown.js
rename to frontend/src/components/UserChat/ChatDropdown.jsx
diff --git a/frontend/src/components/UserChat/ChatInbox.js b/frontend/src/components/UserChat/ChatInbox.jsx
similarity index 100%
rename from frontend/src/components/UserChat/ChatInbox.js
rename to frontend/src/components/UserChat/ChatInbox.jsx
diff --git a/frontend/src/components/UserChat/ChatRoom.js b/frontend/src/components/UserChat/ChatRoom.jsx
similarity index 100%
rename from frontend/src/components/UserChat/ChatRoom.js
rename to frontend/src/components/UserChat/ChatRoom.jsx
diff --git a/frontend/src/components/UserChat/LinkPreview.js b/frontend/src/components/UserChat/LinkPreview.jsx
similarity index 100%
rename from frontend/src/components/UserChat/LinkPreview.js
rename to frontend/src/components/UserChat/LinkPreview.jsx
diff --git a/frontend/src/components/UserChat/MessageBubble.js b/frontend/src/components/UserChat/MessageBubble.jsx
similarity index 100%
rename from frontend/src/components/UserChat/MessageBubble.js
rename to frontend/src/components/UserChat/MessageBubble.jsx
diff --git a/frontend/src/components/UserChat/NewChatModal.js b/frontend/src/components/UserChat/NewChatModal.jsx
similarity index 100%
rename from frontend/src/components/UserChat/NewChatModal.js
rename to frontend/src/components/UserChat/NewChatModal.jsx
diff --git a/frontend/src/components/UserChat/RoomSettings.js b/frontend/src/components/UserChat/RoomSettings.jsx
similarity index 100%
rename from frontend/src/components/UserChat/RoomSettings.js
rename to frontend/src/components/UserChat/RoomSettings.jsx
diff --git a/frontend/src/components/UserSearchInput.js b/frontend/src/components/UserSearchInput.jsx
similarity index 100%
rename from frontend/src/components/UserSearchInput.js
rename to frontend/src/components/UserSearchInput.jsx
diff --git a/frontend/src/components/WindArrowLegend.js b/frontend/src/components/WindArrowLegend.jsx
similarity index 100%
rename from frontend/src/components/WindArrowLegend.js
rename to frontend/src/components/WindArrowLegend.jsx
diff --git a/frontend/src/components/WindDataError.js b/frontend/src/components/WindDataError.jsx
similarity index 100%
rename from frontend/src/components/WindDataError.js
rename to frontend/src/components/WindDataError.jsx
diff --git a/frontend/src/components/WindDateTimePicker.js b/frontend/src/components/WindDateTimePicker.jsx
similarity index 100%
rename from frontend/src/components/WindDateTimePicker.js
rename to frontend/src/components/WindDateTimePicker.jsx
diff --git a/frontend/src/components/WindOverlay.js b/frontend/src/components/WindOverlay.jsx
similarity index 100%
rename from frontend/src/components/WindOverlay.js
rename to frontend/src/components/WindOverlay.jsx
diff --git a/frontend/src/components/WindOverlayLegend.js b/frontend/src/components/WindOverlayLegend.jsx
similarity index 100%
rename from frontend/src/components/WindOverlayLegend.js
rename to frontend/src/components/WindOverlayLegend.jsx
diff --git a/frontend/src/components/WindOverlayToggle.js b/frontend/src/components/WindOverlayToggle.jsx
similarity index 100%
rename from frontend/src/components/WindOverlayToggle.js
rename to frontend/src/components/WindOverlayToggle.jsx
diff --git a/frontend/src/components/YouTubePreview.js b/frontend/src/components/YouTubePreview.jsx
similarity index 100%
rename from frontend/src/components/YouTubePreview.js
rename to frontend/src/components/YouTubePreview.jsx
diff --git a/frontend/src/components/calculators/BestMixCalculator.js b/frontend/src/components/calculators/BestMixCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/BestMixCalculator.js
rename to frontend/src/components/calculators/BestMixCalculator.jsx
diff --git a/frontend/src/components/calculators/GasFillPriceCalculator.js b/frontend/src/components/calculators/GasFillPriceCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/GasFillPriceCalculator.js
rename to frontend/src/components/calculators/GasFillPriceCalculator.jsx
diff --git a/frontend/src/components/calculators/GasPlanningCalculator.js b/frontend/src/components/calculators/GasPlanningCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/GasPlanningCalculator.js
rename to frontend/src/components/calculators/GasPlanningCalculator.jsx
diff --git a/frontend/src/components/calculators/ICDCalculator.js b/frontend/src/components/calculators/ICDCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/ICDCalculator.js
rename to frontend/src/components/calculators/ICDCalculator.jsx
diff --git a/frontend/src/components/calculators/MinGasCalculator.js b/frontend/src/components/calculators/MinGasCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/MinGasCalculator.js
rename to frontend/src/components/calculators/MinGasCalculator.jsx
diff --git a/frontend/src/components/calculators/ModCalculator.js b/frontend/src/components/calculators/ModCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/ModCalculator.js
rename to frontend/src/components/calculators/ModCalculator.jsx
diff --git a/frontend/src/components/calculators/SacRateCalculator.js b/frontend/src/components/calculators/SacRateCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/SacRateCalculator.js
rename to frontend/src/components/calculators/SacRateCalculator.jsx
diff --git a/frontend/src/components/calculators/WeightCalculator.js b/frontend/src/components/calculators/WeightCalculator.jsx
similarity index 100%
rename from frontend/src/components/calculators/WeightCalculator.js
rename to frontend/src/components/calculators/WeightCalculator.jsx
diff --git a/frontend/src/components/forms/FormField.js b/frontend/src/components/forms/FormField.jsx
similarity index 100%
rename from frontend/src/components/forms/FormField.js
rename to frontend/src/components/forms/FormField.jsx
diff --git a/frontend/src/components/forms/GasMixInput.js b/frontend/src/components/forms/GasMixInput.jsx
similarity index 100%
rename from frontend/src/components/forms/GasMixInput.js
rename to frontend/src/components/forms/GasMixInput.jsx
diff --git a/frontend/src/components/forms/GasTanksInput.js b/frontend/src/components/forms/GasTanksInput.jsx
similarity index 100%
rename from frontend/src/components/forms/GasTanksInput.js
rename to frontend/src/components/forms/GasTanksInput.jsx
diff --git a/frontend/src/components/tables/AdminChatFeedbackTable.js b/frontend/src/components/tables/AdminChatFeedbackTable.jsx
similarity index 72%
rename from frontend/src/components/tables/AdminChatFeedbackTable.js
rename to frontend/src/components/tables/AdminChatFeedbackTable.jsx
index 30958e0..72bb874 100644
--- a/frontend/src/components/tables/AdminChatFeedbackTable.js
+++ b/frontend/src/components/tables/AdminChatFeedbackTable.jsx
@@ -9,6 +9,8 @@ import { Eye, ChevronUp, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-r
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Pagination from '../ui/Pagination';
+
 const AdminChatFeedbackTable = ({
   data = [],
   columns,
@@ -141,52 +143,15 @@ const AdminChatFeedbackTable = ({
       </div>
 
       {/* Pagination Controls */}
-      <div className='flex flex-col sm:flex-row justify-between items-center gap-4 px-2'>
-        {/* Page Size Selection */}
-        <div className='flex items-center gap-2'>
-          <label
-            htmlFor='page-size-select'
-            className='text-sm font-medium text-gray-700 dark:text-gray-300'
-          >
-            Show:
-          </label>
-          <select
-            id='page-size-select'
-            value={pagination.pageSize}
-            onChange={e => handlePageSizeChange(Number(e.target.value))}
-            className='px-3 py-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-          <span className='text-sm text-gray-600 dark:text-gray-400'>per page</span>
-        </div>
-
-        {/* Pagination Info */}
-        <div className='text-sm text-gray-600 dark:text-gray-400'>
-          Page {pagination.pageIndex + 1}
-        </div>
-
-        {/* Pagination Navigation */}
-        <div className='flex items-center gap-2'>
-          <button
-            onClick={() => handlePageChange(pagination.pageIndex - 1)}
-            disabled={!hasPreviousPage}
-            className='px-3 py-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors'
-          >
-            <ChevronLeft className='h-4 w-4' />
-          </button>
-
-          <button
-            onClick={() => handlePageChange(pagination.pageIndex + 1)}
-            disabled={!hasNextPage}
-            className='px-3 py-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors'
-          >
-            <ChevronRight className='h-4 w-4' />
-          </button>
-        </div>
-      </div>
+      <Pagination
+        currentPage={pagination.pageIndex + 1}
+        pageSize={pagination.pageSize}
+        totalCount={pagination.totalCount}
+        itemName='feedback items'
+        onPageChange={newPage => handlePageChange(newPage - 1)}
+        onPageSizeChange={handlePageSizeChange}
+        className='mt-4'
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/tables/AdminChatHistoryTable.js b/frontend/src/components/tables/AdminChatHistoryTable.jsx
similarity index 72%
rename from frontend/src/components/tables/AdminChatHistoryTable.js
rename to frontend/src/components/tables/AdminChatHistoryTable.jsx
index ebb68cb..cbda158 100644
--- a/frontend/src/components/tables/AdminChatHistoryTable.js
+++ b/frontend/src/components/tables/AdminChatHistoryTable.jsx
@@ -9,6 +9,8 @@ import { Eye, ChevronUp, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-r
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import Pagination from '../ui/Pagination';
+
 const AdminChatHistoryTable = ({
   data = [],
   columns,
@@ -142,52 +144,15 @@ const AdminChatHistoryTable = ({
       </div>
 
       {/* Pagination Controls */}
-      <div className='flex flex-col sm:flex-row justify-between items-center gap-4 px-2'>
-        {/* Page Size Selection */}
-        <div className='flex items-center gap-2'>
-          <label
-            htmlFor='page-size-select'
-            className='text-sm font-medium text-gray-700 dark:text-gray-300'
-          >
-            Show:
-          </label>
-          <select
-            id='page-size-select'
-            value={pagination.pageSize}
-            onChange={e => handlePageSizeChange(Number(e.target.value))}
-            className='px-3 py-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 rounded-md text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-          <span className='text-sm text-gray-600 dark:text-gray-400'>per page</span>
-        </div>
-
-        {/* Pagination Info */}
-        <div className='text-sm text-gray-600 dark:text-gray-400'>
-          Page {pagination.pageIndex + 1}
-        </div>
-
-        {/* Pagination Navigation */}
-        <div className='flex items-center gap-2'>
-          <button
-            onClick={() => handlePageChange(pagination.pageIndex - 1)}
-            disabled={!hasPreviousPage}
-            className='px-3 py-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors'
-          >
-            <ChevronLeft className='h-4 w-4' />
-          </button>
-
-          <button
-            onClick={() => handlePageChange(pagination.pageIndex + 1)}
-            disabled={!hasNextPage}
-            className='px-3 py-1 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors'
-          >
-            <ChevronRight className='h-4 w-4' />
-          </button>
-        </div>
-      </div>
+      <Pagination
+        currentPage={pagination.pageIndex + 1}
+        pageSize={pagination.pageSize}
+        totalCount={pagination.totalCount}
+        itemName='chat sessions'
+        onPageChange={newPage => handlePageChange(newPage - 1)}
+        onPageSizeChange={handlePageSizeChange}
+        className='mt-4'
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/tables/AdminDiveRoutesTable.js b/frontend/src/components/tables/AdminDiveRoutesTable.jsx
similarity index 82%
rename from frontend/src/components/tables/AdminDiveRoutesTable.js
rename to frontend/src/components/tables/AdminDiveRoutesTable.jsx
index 2138d1a..07001d9 100644
--- a/frontend/src/components/tables/AdminDiveRoutesTable.js
+++ b/frontend/src/components/tables/AdminDiveRoutesTable.jsx
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 
 import { decodeHtmlEntities } from '../../utils/htmlDecode';
 import { getRouteTypeLabel } from '../../utils/routeUtils';
+import Pagination from '../ui/Pagination';
 
 /**
  * AdminDiveRoutesTable - TanStack Table implementation for Dive Routes
@@ -251,59 +252,15 @@ const AdminDiveRoutesTable = ({
       </div>
 
       {/* Pagination Controls */}
-      <div className='flex flex-col sm:flex-row justify-between items-center gap-4'>
-        {/* Page Size Selection */}
-        <div className='flex items-center gap-2'>
-          <label htmlFor='page-size-select' className='text-sm font-medium text-gray-700'>
-            Show:
-          </label>
-          <select
-            id='page-size-select'
-            value={pagination.pageSize}
-            onChange={e => handlePageSizeChange(Number(e.target.value))}
-            className='px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-          <span className='text-sm text-gray-600'>per page</span>
-        </div>
-
-        {/* Pagination Info */}
-        {pagination.totalCount !== undefined && (
-          <div className='text-sm text-gray-600'>
-            Showing {pagination.pageIndex * pagination.pageSize + 1} to{' '}
-            {Math.min((pagination.pageIndex + 1) * pagination.pageSize, pagination.totalCount)} of{' '}
-            {pagination.totalCount} dive routes
-          </div>
-        )}
-
-        {/* Pagination Navigation */}
-        {pagination.totalCount !== undefined && (
-          <div className='flex items-center gap-2'>
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex - 1)}
-              disabled={!table.getCanPreviousPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronLeft className='h-4 w-4' />
-            </button>
-
-            <span className='text-sm text-gray-700'>
-              Page {pagination.pageIndex + 1} of {pagination.pageCount || 1}
-            </span>
-
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex + 1)}
-              disabled={!table.getCanNextPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronRight className='h-4 w-4' />
-            </button>
-          </div>
-        )}
-      </div>
+      <Pagination
+        currentPage={pagination.pageIndex + 1}
+        pageSize={pagination.pageSize}
+        totalCount={pagination.totalCount}
+        itemName='dive routes'
+        onPageChange={newPage => handlePageChange(newPage - 1)}
+        onPageSizeChange={handlePageSizeChange}
+        className='mt-4'
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/tables/AdminDiveSitesTable.js b/frontend/src/components/tables/AdminDiveSitesTable.jsx
similarity index 84%
rename from frontend/src/components/tables/AdminDiveSitesTable.js
rename to frontend/src/components/tables/AdminDiveSitesTable.jsx
index d011a37..c9263d9 100644
--- a/frontend/src/components/tables/AdminDiveSitesTable.js
+++ b/frontend/src/components/tables/AdminDiveSitesTable.jsx
@@ -10,6 +10,7 @@ import PropTypes from 'prop-types';
 
 import { getDifficultyLabel, getDifficultyColorClasses } from '../../utils/difficultyHelpers';
 import { decodeHtmlEntities } from '../../utils/htmlDecode';
+import Pagination from '../ui/Pagination';
 
 /**
  * AdminDiveSitesTable - TanStack Table implementation
@@ -295,59 +296,15 @@ const AdminDiveSitesTable = ({
       </div>
 
       {/* Pagination Controls */}
-      <div className='flex flex-col sm:flex-row justify-between items-center gap-4'>
-        {/* Page Size Selection */}
-        <div className='flex items-center gap-2'>
-          <label htmlFor='page-size-select' className='text-sm font-medium text-gray-700'>
-            Show:
-          </label>
-          <select
-            id='page-size-select'
-            value={pagination.pageSize}
-            onChange={e => handlePageSizeChange(Number(e.target.value))}
-            className='px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-          <span className='text-sm text-gray-600'>per page</span>
-        </div>
-
-        {/* Pagination Info */}
-        {pagination.totalCount !== undefined && (
-          <div className='text-sm text-gray-600'>
-            Showing {pagination.pageIndex * pagination.pageSize + 1} to{' '}
-            {Math.min((pagination.pageIndex + 1) * pagination.pageSize, pagination.totalCount)} of{' '}
-            {pagination.totalCount} dive sites
-          </div>
-        )}
-
-        {/* Pagination Navigation */}
-        {pagination.totalCount !== undefined && (
-          <div className='flex items-center gap-2'>
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex - 1)}
-              disabled={!table.getCanPreviousPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronLeft className='h-4 w-4' />
-            </button>
-
-            <span className='text-sm text-gray-700'>
-              Page {pagination.pageIndex + 1} of {pagination.pageCount || 1}
-            </span>
-
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex + 1)}
-              disabled={!table.getCanNextPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronRight className='h-4 w-4' />
-            </button>
-          </div>
-        )}
-      </div>
+      <Pagination
+        currentPage={pagination.pageIndex + 1}
+        pageSize={pagination.pageSize}
+        totalCount={pagination.totalCount}
+        itemName='dive sites'
+        onPageChange={newPage => handlePageChange(newPage - 1)}
+        onPageSizeChange={handlePageSizeChange}
+        className='mt-4'
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/tables/AdminDivesTable.js b/frontend/src/components/tables/AdminDivesTable.jsx
similarity index 100%
rename from frontend/src/components/tables/AdminDivesTable.js
rename to frontend/src/components/tables/AdminDivesTable.jsx
diff --git a/frontend/src/components/tables/AdminDivingCentersTable.js b/frontend/src/components/tables/AdminDivingCentersTable.jsx
similarity index 83%
rename from frontend/src/components/tables/AdminDivingCentersTable.js
rename to frontend/src/components/tables/AdminDivingCentersTable.jsx
index 7ff0abf..62a641d 100644
--- a/frontend/src/components/tables/AdminDivingCentersTable.js
+++ b/frontend/src/components/tables/AdminDivingCentersTable.jsx
@@ -9,6 +9,7 @@ import { Edit, Trash2, Eye, ChevronUp, ChevronDown, ChevronLeft, ChevronRight }
 import PropTypes from 'prop-types';
 
 import { decodeHtmlEntities } from '../../utils/htmlDecode';
+import Pagination from '../ui/Pagination';
 
 /**
  * AdminDivingCentersTable - TanStack Table implementation for diving centers
@@ -274,59 +275,15 @@ const AdminDivingCentersTable = ({
       </div>
 
       {/* Pagination Controls */}
-      <div className='flex flex-col sm:flex-row justify-between items-center gap-4'>
-        {/* Page Size Selection */}
-        <div className='flex items-center gap-2'>
-          <label htmlFor='page-size-select' className='text-sm font-medium text-gray-700'>
-            Show:
-          </label>
-          <select
-            id='page-size-select'
-            value={pagination.pageSize}
-            onChange={e => handlePageSizeChange(Number(e.target.value))}
-            className='px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-          <span className='text-sm text-gray-600'>per page</span>
-        </div>
-
-        {/* Pagination Info */}
-        {pagination.totalCount !== undefined && (
-          <div className='text-sm text-gray-600'>
-            Showing {pagination.pageIndex * pagination.pageSize + 1} to{' '}
-            {Math.min((pagination.pageIndex + 1) * pagination.pageSize, pagination.totalCount)} of{' '}
-            {pagination.totalCount} diving centers
-          </div>
-        )}
-
-        {/* Pagination Navigation */}
-        {pagination.totalCount !== undefined && (
-          <div className='flex items-center gap-2'>
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex - 1)}
-              disabled={!table.getCanPreviousPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronLeft className='h-4 w-4' />
-            </button>
-
-            <span className='text-sm text-gray-700'>
-              Page {pagination.pageIndex + 1} of {pagination.pageCount || 1}
-            </span>
-
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex + 1)}
-              disabled={!table.getCanNextPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronRight className='h-4 w-4' />
-            </button>
-          </div>
-        )}
-      </div>
+      <Pagination
+        currentPage={pagination.pageIndex + 1}
+        pageSize={pagination.pageSize}
+        totalCount={pagination.totalCount}
+        itemName='diving centers'
+        onPageChange={newPage => handlePageChange(newPage - 1)}
+        onPageSizeChange={handlePageSizeChange}
+        className='mt-4'
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/tables/AdminUsersTable.js b/frontend/src/components/tables/AdminUsersTable.jsx
similarity index 79%
rename from frontend/src/components/tables/AdminUsersTable.js
rename to frontend/src/components/tables/AdminUsersTable.jsx
index a159f30..fd2cd6c 100644
--- a/frontend/src/components/tables/AdminUsersTable.js
+++ b/frontend/src/components/tables/AdminUsersTable.jsx
@@ -8,6 +8,8 @@ import {
 import { Edit, Trash2, ChevronUp, ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
 import PropTypes from 'prop-types';
 
+import Pagination from '../ui/Pagination';
+
 /**
  * AdminUsersTable - TanStack Table implementation for users
  */
@@ -252,66 +254,15 @@ const AdminUsersTable = ({
       </div>
 
       {/* Pagination Controls */}
-      <div className='flex flex-col sm:flex-row justify-between items-center gap-4'>
-        {/* Page Size Selection */}
-        <div className='flex items-center gap-2'>
-          <label htmlFor='page-size-select' className='text-sm font-medium text-gray-700'>
-            Show:
-          </label>
-          <select
-            id='page-size-select'
-            value={pagination.pageSize}
-            onChange={e => handlePageSizeChange(Number(e.target.value))}
-            className='px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-          >
-            <option value={25}>25</option>
-            <option value={50}>50</option>
-            <option value={100}>100</option>
-          </select>
-          <span className='text-sm text-gray-600'>per page</span>
-        </div>
-
-        {/* Pagination Info */}
-        {pagination.totalCount !== undefined && (
-          <div className='text-sm text-gray-600'>
-            Showing {pagination.pageIndex * pagination.pageSize + 1} to{' '}
-            {Math.min((pagination.pageIndex + 1) * pagination.pageSize, table.getRowCount())} of{' '}
-            {table.getRowCount()} results
-          </div>
-        )}
-
-        {/* Pagination Navigation */}
-        {pagination.totalCount !== undefined && (
-          <div className='flex items-center gap-2'>
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex - 1)}
-              disabled={!table.getCanPreviousPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronLeft className='h-4 w-4' />
-            </button>
-
-            <span className='text-sm text-gray-700'>
-              Page {pagination.pageIndex + 1} of {table.getPageCount()}
-            </span>
-
-            <button
-              onClick={() => handlePageChange(pagination.pageIndex + 1)}
-              disabled={!table.getCanNextPage()}
-              className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-            >
-              <ChevronRight className='h-5 w-5' />
-            </button>
-            <button
-              onClick={() => handlePageChange(table.getPageCount() - 1)}
-              disabled={!table.getCanNextPage()}
-              className='relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed'
-            >
-              <ChevronRight className='h-5 w-5' />
-            </button>
-          </div>
-        )}
-      </div>
+      <Pagination
+        currentPage={pagination.pageIndex + 1}
+        pageSize={pagination.pageSize}
+        totalCount={pagination.totalCount}
+        itemName='users'
+        onPageChange={newPage => handlePageChange(newPage - 1)}
+        onPageSizeChange={handlePageSizeChange}
+        className='mt-4'
+      />
     </div>
   );
 };
diff --git a/frontend/src/components/ui/AutocompleteDropdown.jsx b/frontend/src/components/ui/AutocompleteDropdown.jsx
new file mode 100644
index 0000000..4c08f02
--- /dev/null
+++ b/frontend/src/components/ui/AutocompleteDropdown.jsx
@@ -0,0 +1,164 @@
+import { ChevronDown, X } from 'lucide-react';
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+
+import useClickOutside from '../../hooks/useClickOutside';
+
+const AutocompleteDropdown = ({
+  label,
+  placeholder,
+  value,
+  onChange,
+  fetchData,
+  renderItem,
+  keyExtractor,
+  displayValueExtractor,
+  emptyMessage = 'No results found',
+  debounceTime = 300,
+  className = '',
+}) => {
+  const [search, setSearch] = useState('');
+  const [results, setResults] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  const dropdownRef = useRef(null);
+  const timeoutRef = useRef(null);
+
+  // Sync internal search state with external value if it changes
+  useEffect(() => {
+    if (value && typeof value === 'string') {
+      setSearch(value);
+    } else if (!value) {
+      setSearch('');
+    }
+  }, [value]);
+
+  useClickOutside(dropdownRef, () => setIsOpen(false));
+
+  const handleSearchChange = newSearch => {
+    setSearch(newSearch);
+    setIsOpen(true);
+
+    if (!newSearch.trim()) {
+      onChange(null);
+      setResults([]);
+      return;
+    }
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(async () => {
+      try {
+        setIsLoading(true);
+        const data = await fetchData(newSearch);
+        setResults(data || []);
+      } catch (error) {
+        console.error('Search failed', error);
+        setResults([]);
+      } finally {
+        setIsLoading(false);
+      }
+    }, debounceTime);
+  };
+
+  const handleSelect = item => {
+    const displayValue = displayValueExtractor ? displayValueExtractor(item) : item;
+    setSearch(displayValue);
+    setIsOpen(false);
+    onChange(item);
+  };
+
+  const handleClear = e => {
+    e.stopPropagation();
+    setSearch('');
+    setResults([]);
+    onChange(null);
+  };
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      {label && <label className='block text-sm font-medium text-gray-700 mb-2'>{label}</label>}
+      <div className='relative'>
+        <input
+          type='text'
+          placeholder={placeholder}
+          value={search}
+          onChange={e => handleSearchChange(e.target.value)}
+          onFocus={() => setIsOpen(true)}
+          className='w-full px-3 py-2 pr-10 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm'
+        />
+        <div className='absolute inset-y-0 right-0 flex items-center pr-3'>
+          {isLoading ? (
+            <div className='animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400'></div>
+          ) : search && isOpen ? (
+            <X
+              size={16}
+              className='text-gray-400 cursor-pointer hover:text-gray-600'
+              onClick={handleClear}
+            />
+          ) : (
+            <ChevronDown
+              size={16}
+              className={`text-gray-400 transition-transform pointer-events-none ${
+                isOpen ? 'rotate-180' : ''
+              }`}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Dropdown */}
+      {isOpen && search.trim() && !isLoading && results.length > 0 && (
+        <div className='absolute z-[100] w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg max-h-60 overflow-auto'>
+          {results.map((item, index) => (
+            <div
+              key={keyExtractor ? keyExtractor(item, index) : index}
+              onClick={() => handleSelect(item)}
+              onKeyDown={e => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  handleSelect(item);
+                }
+              }}
+              role='button'
+              tabIndex={0}
+              className='px-3 py-2 hover:bg-gray-100 cursor-pointer border-b border-gray-100 last:border-b-0'
+            >
+              {renderItem ? (
+                renderItem(item)
+              ) : (
+                <div className='font-medium text-gray-900'>{item}</div>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Empty state */}
+      {isOpen && search.trim() && !isLoading && results.length === 0 && (
+        <div className='absolute z-[100] w-full mt-1 bg-white border border-gray-300 rounded-md shadow-lg'>
+          <div className='px-3 py-2 text-gray-500 text-sm'>{emptyMessage}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+AutocompleteDropdown.propTypes = {
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  renderItem: PropTypes.func,
+  keyExtractor: PropTypes.func,
+  displayValueExtractor: PropTypes.func,
+  emptyMessage: PropTypes.string,
+  debounceTime: PropTypes.number,
+  className: PropTypes.string,
+};
+
+export default AutocompleteDropdown;
diff --git a/frontend/src/components/ui/Button.js b/frontend/src/components/ui/Button.jsx
similarity index 100%
rename from frontend/src/components/ui/Button.js
rename to frontend/src/components/ui/Button.jsx
diff --git a/frontend/src/components/ui/Combobox.js b/frontend/src/components/ui/Combobox.jsx
similarity index 100%
rename from frontend/src/components/ui/Combobox.js
rename to frontend/src/components/ui/Combobox.jsx
diff --git a/frontend/src/components/ui/DiveSiteSearchDropdown.jsx b/frontend/src/components/ui/DiveSiteSearchDropdown.jsx
new file mode 100644
index 0000000..bc175de
--- /dev/null
+++ b/frontend/src/components/ui/DiveSiteSearchDropdown.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+
+import { getDiveSites } from '../../services/diveSites';
+
+import AutocompleteDropdown from './AutocompleteDropdown';
+
+export const DiveSiteSearchDropdown = ({
+  value,
+  onChange,
+  label = 'Dive Site',
+  placeholder = 'Search dive sites...',
+  className,
+}) => {
+  const fetchDiveSites = async query => {
+    try {
+      const response = await getDiveSites({
+        search: query,
+        page_size: 25,
+        detail_level: 'basic',
+      });
+
+      let results = [];
+      if (Array.isArray(response)) {
+        results = response;
+      } else if (response && Array.isArray(response.items)) {
+        results = response.items;
+      } else if (response && Array.isArray(response.data)) {
+        results = response.data;
+      }
+      return results;
+    } catch (error) {
+      console.error('Search dive sites failed', error);
+      return [];
+    }
+  };
+
+  const renderDiveSiteItem = site => (
+    <div>
+      <div className='font-medium text-gray-900'>{site.name}</div>
+      {site.country && (
+        <div className='text-xs text-gray-500'>
+          {site.country}
+          {site.region ? `, ${site.region}` : ''}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <AutocompleteDropdown
+      label={label}
+      placeholder={placeholder}
+      value={value}
+      onChange={selectedSite =>
+        onChange(selectedSite ? { id: selectedSite.id, name: selectedSite.name } : null)
+      }
+      fetchData={fetchDiveSites}
+      renderItem={renderDiveSiteItem}
+      keyExtractor={site => site.id}
+      displayValueExtractor={site => site.name}
+      emptyMessage='No dive sites found'
+      className={className}
+    />
+  );
+};
diff --git a/frontend/src/components/ui/DivingCenterSearchDropdown.jsx b/frontend/src/components/ui/DivingCenterSearchDropdown.jsx
new file mode 100644
index 0000000..54fa46e
--- /dev/null
+++ b/frontend/src/components/ui/DivingCenterSearchDropdown.jsx
@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { searchDivingCenters } from '../../services/divingCenters';
+
+import AutocompleteDropdown from './AutocompleteDropdown';
+
+export const DivingCenterSearchDropdown = ({
+  value,
+  onChange,
+  label = 'Diving Center',
+  placeholder = 'Search diving centers...',
+  className,
+}) => {
+  const fetchDivingCenters = async query => {
+    try {
+      const results = await searchDivingCenters({
+        q: query,
+        limit: 20,
+      });
+      return Array.isArray(results) ? results : [];
+    } catch (error) {
+      console.error('Search diving centers failed', error);
+      return [];
+    }
+  };
+
+  const renderCenterItem = center => (
+    <div>
+      <div className='font-medium text-gray-900'>{center.name}</div>
+      {center.country && (
+        <div className='text-xs text-gray-500'>
+          {center.country}
+          {center.region ? `, ${center.region}` : ''}
+        </div>
+      )}
+    </div>
+  );
+
+  return (
+    <AutocompleteDropdown
+      label={label}
+      placeholder={placeholder}
+      value={value}
+      onChange={selectedCenter =>
+        onChange(selectedCenter ? { id: selectedCenter.id, name: selectedCenter.name } : null)
+      }
+      fetchData={fetchDivingCenters}
+      renderItem={renderCenterItem}
+      keyExtractor={center => center.id}
+      displayValueExtractor={center => center.name}
+      emptyMessage='No diving centers found'
+      className={className}
+    />
+  );
+};
diff --git a/frontend/src/components/ui/LocationSearchDropdowns.jsx b/frontend/src/components/ui/LocationSearchDropdowns.jsx
new file mode 100644
index 0000000..065c897
--- /dev/null
+++ b/frontend/src/components/ui/LocationSearchDropdowns.jsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { getUniqueCountries, getUniqueRegions } from '../../services/diveSites';
+
+import AutocompleteDropdown from './AutocompleteDropdown';
+
+export const CountrySearchDropdown = ({ value, onChange, className }) => {
+  const fetchCountries = async query => {
+    try {
+      const results = await getUniqueCountries(query);
+      return results; // Returns array of strings
+    } catch (error) {
+      console.error('Failed to fetch countries:', error);
+      return [];
+    }
+  };
+
+  const handleChange = selected => {
+    onChange(selected || '');
+  };
+
+  return (
+    <AutocompleteDropdown
+      label='Country'
+      placeholder='Search for a country...'
+      value={value}
+      onChange={handleChange}
+      fetchData={fetchCountries}
+      emptyMessage='No countries found'
+      className={className}
+    />
+  );
+};
+
+export const RegionSearchDropdown = ({ value, onChange, countryFilter, className }) => {
+  const fetchRegions = async query => {
+    try {
+      const results = await getUniqueRegions(query, countryFilter || undefined);
+      return results; // Returns array of strings
+    } catch (error) {
+      console.error('Failed to fetch regions:', error);
+      return [];
+    }
+  };
+
+  return (
+    <AutocompleteDropdown
+      label='Region/State'
+      placeholder='Search for a region...'
+      value={value}
+      onChange={selected => onChange(selected || '')}
+      fetchData={fetchRegions}
+      emptyMessage='No regions found'
+      className={className}
+    />
+  );
+};
diff --git a/frontend/src/components/ui/Modal.js b/frontend/src/components/ui/Modal.jsx
similarity index 100%
rename from frontend/src/components/ui/Modal.js
rename to frontend/src/components/ui/Modal.jsx
diff --git a/frontend/src/components/ui/Pagination.jsx b/frontend/src/components/ui/Pagination.jsx
new file mode 100644
index 0000000..a9de25c
--- /dev/null
+++ b/frontend/src/components/ui/Pagination.jsx
@@ -0,0 +1,96 @@
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+export const Pagination = ({
+  currentPage,
+  pageSize,
+  totalCount,
+  itemName = 'items',
+  onPageChange,
+  onPageSizeChange,
+  className = '',
+  pageSizeOptions = [25, 50, 100],
+}) => {
+  if (totalCount === undefined || totalCount === null) return null;
+
+  const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+  const hasPrevPage = currentPage > 1;
+  const hasNextPage = currentPage < totalPages;
+  const startItem = Math.max(1, (currentPage - 1) * pageSize + 1);
+  const endItem = Math.min(currentPage * pageSize, totalCount);
+
+  return (
+    <div className={`bg-white rounded-lg shadow-md p-4 sm:p-6 ${className}`}>
+      <div className='flex flex-col lg:flex-row justify-between items-center gap-4'>
+        <div className='flex flex-col sm:flex-row items-center gap-3 sm:gap-4 w-full lg:w-auto'>
+          {/* Page Size Selection */}
+          <div className='flex items-center gap-2 w-full sm:w-auto justify-center sm:justify-start'>
+            <label className='text-xs sm:text-sm font-medium text-gray-700 whitespace-nowrap'>
+              Show:
+            </label>
+            <select
+              value={pageSize}
+              onChange={e => onPageSizeChange(parseInt(e.target.value))}
+              className='px-2 py-1 border border-gray-300 rounded-md text-xs sm:text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 min-h-[36px] sm:min-h-0 touch-manipulation'
+            >
+              {pageSizeOptions.map(size => (
+                <option key={size} value={size}>
+                  {size}
+                </option>
+              ))}
+            </select>
+            <span className='text-xs sm:text-sm text-gray-600 whitespace-nowrap'>per page</span>
+          </div>
+
+          {/* Pagination Info */}
+          {totalCount > 0 && (
+            <div className='text-xs sm:text-sm text-gray-600 text-center sm:text-left'>
+              Showing {startItem} to {endItem} of {totalCount} {itemName}
+            </div>
+          )}
+
+          {/* Pagination Navigation */}
+          {totalCount > 0 && (
+            <div className='flex items-center gap-1 sm:gap-2 justify-center w-full sm:w-auto mt-2 sm:mt-0'>
+              <button
+                onClick={() => onPageChange(currentPage - 1)}
+                disabled={!hasPrevPage}
+                className='px-2 sm:px-3 py-1 sm:py-1.5 border border-gray-300 rounded-md text-xs sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 active:bg-gray-100 min-h-[36px] sm:min-h-0 touch-manipulation transition-colors'
+                aria-label='Previous Page'
+              >
+                <ChevronLeft className='h-4 w-4' />
+              </button>
+
+              <span className='text-xs sm:text-sm text-gray-700 px-2'>
+                Page {currentPage} of {totalPages}
+              </span>
+
+              <button
+                onClick={() => onPageChange(currentPage + 1)}
+                disabled={!hasNextPage}
+                className='px-2 sm:px-3 py-1 sm:py-1.5 border border-gray-300 rounded-md text-xs sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 active:bg-gray-100 min-h-[36px] sm:min-h-0 touch-manipulation transition-colors'
+                aria-label='Next Page'
+              >
+                <ChevronRight className='h-4 w-4' />
+              </button>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+Pagination.propTypes = {
+  currentPage: PropTypes.number.isRequired,
+  pageSize: PropTypes.number.isRequired,
+  totalCount: PropTypes.number,
+  itemName: PropTypes.string,
+  onPageChange: PropTypes.func.isRequired,
+  onPageSizeChange: PropTypes.func.isRequired,
+  className: PropTypes.string,
+  pageSizeOptions: PropTypes.arrayOf(PropTypes.number),
+};
+
+export default Pagination;
diff --git a/frontend/src/components/ui/Select.js b/frontend/src/components/ui/Select.jsx
similarity index 100%
rename from frontend/src/components/ui/Select.js
rename to frontend/src/components/ui/Select.jsx
diff --git a/frontend/src/components/ui/ShellRating.js b/frontend/src/components/ui/ShellRating.jsx
similarity index 100%
rename from frontend/src/components/ui/ShellRating.js
rename to frontend/src/components/ui/ShellRating.jsx
diff --git a/frontend/src/components/ui/Tabs.js b/frontend/src/components/ui/Tabs.jsx
similarity index 100%
rename from frontend/src/components/ui/Tabs.js
rename to frontend/src/components/ui/Tabs.jsx
diff --git a/frontend/src/components/ui/UserSearchDropdown.jsx b/frontend/src/components/ui/UserSearchDropdown.jsx
new file mode 100644
index 0000000..f4c83f6
--- /dev/null
+++ b/frontend/src/components/ui/UserSearchDropdown.jsx
@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { searchUsers } from '../../api';
+
+import AutocompleteDropdown from './AutocompleteDropdown';
+
+export const UserSearchDropdown = ({
+  value,
+  onChange,
+  label = 'User',
+  placeholder = 'Search users...',
+  includeSelf = true,
+  className,
+}) => {
+  const fetchUsers = async query => {
+    try {
+      const results = await searchUsers(query, 20, includeSelf);
+      return Array.isArray(results) ? results : [];
+    } catch (error) {
+      console.error('Search users failed', error);
+      return [];
+    }
+  };
+
+  const renderUserItem = user => (
+    <div className='flex items-center gap-2'>
+      {user.avatar_url ? (
+        <img
+          src={user.avatar_url}
+          alt={user.username}
+          className='w-6 h-6 rounded-full object-cover'
+        />
+      ) : (
+        <div className='w-6 h-6 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 text-xs font-bold'>
+          {user.username.charAt(0).toUpperCase()}
+        </div>
+      )}
+      <div>
+        <div className='font-medium text-gray-900'>{user.username}</div>
+        {user.name && <div className='text-xs text-gray-500'>{user.name}</div>}
+      </div>
+    </div>
+  );
+
+  return (
+    <AutocompleteDropdown
+      label={label}
+      placeholder={placeholder}
+      value={value}
+      onChange={selectedUser => onChange(selectedUser ? selectedUser.username : '')}
+      fetchData={fetchUsers}
+      renderItem={renderUserItem}
+      keyExtractor={user => user.id}
+      displayValueExtractor={user => user.username}
+      emptyMessage='No users found'
+      className={className}
+    />
+  );
+};
diff --git a/frontend/src/contexts/AuthContext.js b/frontend/src/contexts/AuthContext.jsx
similarity index 100%
rename from frontend/src/contexts/AuthContext.js
rename to frontend/src/contexts/AuthContext.jsx
diff --git a/frontend/src/contexts/NotificationContext.js b/frontend/src/contexts/NotificationContext.jsx
similarity index 100%
rename from frontend/src/contexts/NotificationContext.js
rename to frontend/src/contexts/NotificationContext.jsx
diff --git a/frontend/src/index.js b/frontend/src/index.jsx
similarity index 100%
rename from frontend/src/index.js
rename to frontend/src/index.jsx
diff --git a/frontend/src/pages/API.js b/frontend/src/pages/API.jsx
similarity index 100%
rename from frontend/src/pages/API.js
rename to frontend/src/pages/API.jsx
diff --git a/frontend/src/pages/About.js b/frontend/src/pages/About.jsx
similarity index 100%
rename from frontend/src/pages/About.js
rename to frontend/src/pages/About.jsx
diff --git a/frontend/src/pages/Admin.js b/frontend/src/pages/Admin.jsx
similarity index 100%
rename from frontend/src/pages/Admin.js
rename to frontend/src/pages/Admin.jsx
diff --git a/frontend/src/pages/AdminAuditLogs.js b/frontend/src/pages/AdminAuditLogs.jsx
similarity index 100%
rename from frontend/src/pages/AdminAuditLogs.js
rename to frontend/src/pages/AdminAuditLogs.jsx
diff --git a/frontend/src/pages/AdminChatFeedback.js b/frontend/src/pages/AdminChatFeedback.jsx
similarity index 100%
rename from frontend/src/pages/AdminChatFeedback.js
rename to frontend/src/pages/AdminChatFeedback.jsx
diff --git a/frontend/src/pages/AdminChatHistory.js b/frontend/src/pages/AdminChatHistory.jsx
similarity index 100%
rename from frontend/src/pages/AdminChatHistory.js
rename to frontend/src/pages/AdminChatHistory.jsx
diff --git a/frontend/src/pages/AdminDiveRoutes.js b/frontend/src/pages/AdminDiveRoutes.jsx
similarity index 100%
rename from frontend/src/pages/AdminDiveRoutes.js
rename to frontend/src/pages/AdminDiveRoutes.jsx
diff --git a/frontend/src/pages/AdminDiveSiteAliases.js b/frontend/src/pages/AdminDiveSiteAliases.jsx
similarity index 100%
rename from frontend/src/pages/AdminDiveSiteAliases.js
rename to frontend/src/pages/AdminDiveSiteAliases.jsx
diff --git a/frontend/src/pages/AdminDiveSites.js b/frontend/src/pages/AdminDiveSites.jsx
similarity index 100%
rename from frontend/src/pages/AdminDiveSites.js
rename to frontend/src/pages/AdminDiveSites.jsx
diff --git a/frontend/src/pages/AdminDives.js b/frontend/src/pages/AdminDives.jsx
similarity index 100%
rename from frontend/src/pages/AdminDives.js
rename to frontend/src/pages/AdminDives.jsx
diff --git a/frontend/src/pages/AdminDivesDesktop.js b/frontend/src/pages/AdminDivesDesktop.jsx
similarity index 100%
rename from frontend/src/pages/AdminDivesDesktop.js
rename to frontend/src/pages/AdminDivesDesktop.jsx
diff --git a/frontend/src/pages/AdminDivesMobile.js b/frontend/src/pages/AdminDivesMobile.jsx
similarity index 100%
rename from frontend/src/pages/AdminDivesMobile.js
rename to frontend/src/pages/AdminDivesMobile.jsx
diff --git a/frontend/src/pages/AdminDivingCenters.js b/frontend/src/pages/AdminDivingCenters.jsx
similarity index 100%
rename from frontend/src/pages/AdminDivingCenters.js
rename to frontend/src/pages/AdminDivingCenters.jsx
diff --git a/frontend/src/pages/AdminDivingOrganizationCertifications.js b/frontend/src/pages/AdminDivingOrganizationCertifications.jsx
similarity index 100%
rename from frontend/src/pages/AdminDivingOrganizationCertifications.js
rename to frontend/src/pages/AdminDivingOrganizationCertifications.jsx
diff --git a/frontend/src/pages/AdminDivingOrganizations.js b/frontend/src/pages/AdminDivingOrganizations.jsx
similarity index 100%
rename from frontend/src/pages/AdminDivingOrganizations.js
rename to frontend/src/pages/AdminDivingOrganizations.jsx
diff --git a/frontend/src/pages/AdminGeneralStatistics.js b/frontend/src/pages/AdminGeneralStatistics.jsx
similarity index 100%
rename from frontend/src/pages/AdminGeneralStatistics.js
rename to frontend/src/pages/AdminGeneralStatistics.jsx
diff --git a/frontend/src/pages/AdminGrowthVisualizations.js b/frontend/src/pages/AdminGrowthVisualizations.jsx
similarity index 100%
rename from frontend/src/pages/AdminGrowthVisualizations.js
rename to frontend/src/pages/AdminGrowthVisualizations.jsx
diff --git a/frontend/src/pages/AdminNewsletters.js b/frontend/src/pages/AdminNewsletters.jsx
similarity index 100%
rename from frontend/src/pages/AdminNewsletters.js
rename to frontend/src/pages/AdminNewsletters.jsx
diff --git a/frontend/src/pages/AdminNotificationPreferences.js b/frontend/src/pages/AdminNotificationPreferences.jsx
similarity index 100%
rename from frontend/src/pages/AdminNotificationPreferences.js
rename to frontend/src/pages/AdminNotificationPreferences.jsx
diff --git a/frontend/src/pages/AdminOwnershipRequests.js b/frontend/src/pages/AdminOwnershipRequests.jsx
similarity index 100%
rename from frontend/src/pages/AdminOwnershipRequests.js
rename to frontend/src/pages/AdminOwnershipRequests.jsx
diff --git a/frontend/src/pages/AdminRecentActivity.js b/frontend/src/pages/AdminRecentActivity.jsx
similarity index 100%
rename from frontend/src/pages/AdminRecentActivity.js
rename to frontend/src/pages/AdminRecentActivity.jsx
diff --git a/frontend/src/pages/AdminSystemMetrics.js b/frontend/src/pages/AdminSystemMetrics.jsx
similarity index 100%
rename from frontend/src/pages/AdminSystemMetrics.js
rename to frontend/src/pages/AdminSystemMetrics.jsx
diff --git a/frontend/src/pages/AdminTags.js b/frontend/src/pages/AdminTags.jsx
similarity index 100%
rename from frontend/src/pages/AdminTags.js
rename to frontend/src/pages/AdminTags.jsx
diff --git a/frontend/src/pages/AdminUsers.js b/frontend/src/pages/AdminUsers.jsx
similarity index 100%
rename from frontend/src/pages/AdminUsers.js
rename to frontend/src/pages/AdminUsers.jsx
diff --git a/frontend/src/pages/Buddies.js b/frontend/src/pages/Buddies.jsx
similarity index 100%
rename from frontend/src/pages/Buddies.js
rename to frontend/src/pages/Buddies.jsx
diff --git a/frontend/src/pages/Changelog.js b/frontend/src/pages/Changelog.jsx
similarity index 100%
rename from frontend/src/pages/Changelog.js
rename to frontend/src/pages/Changelog.jsx
diff --git a/frontend/src/pages/CheckYourEmail.js b/frontend/src/pages/CheckYourEmail.jsx
similarity index 100%
rename from frontend/src/pages/CheckYourEmail.js
rename to frontend/src/pages/CheckYourEmail.jsx
diff --git a/frontend/src/pages/CreateDive.js b/frontend/src/pages/CreateDive.jsx
similarity index 100%
rename from frontend/src/pages/CreateDive.js
rename to frontend/src/pages/CreateDive.jsx
diff --git a/frontend/src/pages/CreateDiveSite.js b/frontend/src/pages/CreateDiveSite.jsx
similarity index 100%
rename from frontend/src/pages/CreateDiveSite.js
rename to frontend/src/pages/CreateDiveSite.jsx
diff --git a/frontend/src/pages/CreateDivingCenter.js b/frontend/src/pages/CreateDivingCenter.jsx
similarity index 100%
rename from frontend/src/pages/CreateDivingCenter.js
rename to frontend/src/pages/CreateDivingCenter.jsx
diff --git a/frontend/src/pages/CreateTrip.js b/frontend/src/pages/CreateTrip.jsx
similarity index 100%
rename from frontend/src/pages/CreateTrip.js
rename to frontend/src/pages/CreateTrip.jsx
diff --git a/frontend/src/pages/DiveDetail.js b/frontend/src/pages/DiveDetail.jsx
similarity index 61%
rename from frontend/src/pages/DiveDetail.js
rename to frontend/src/pages/DiveDetail.jsx
index f6a220c..142808c 100644
--- a/frontend/src/pages/DiveDetail.js
+++ b/frontend/src/pages/DiveDetail.jsx
@@ -21,7 +21,7 @@ import {
   Video,
   TrendingUp,
 } from 'lucide-react';
-import { useState, useEffect, useRef, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback, lazy, Suspense } from 'react';
 import { toast } from 'react-hot-toast';
 import { MapContainer, TileLayer, useMap } from 'react-leaflet';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
@@ -38,9 +38,16 @@ import Slideshow from 'yet-another-react-lightbox/plugins/slideshow';
 import Thumbnails from 'yet-another-react-lightbox/plugins/thumbnails';
 
 import api from '../api';
-import AdvancedDiveProfileChart from '../components/AdvancedDiveProfileChart';
 import Breadcrumbs from '../components/Breadcrumbs';
+import DiveInfoGrid from '../components/DiveInfoGrid';
+import {
+  ZoomControl,
+  ZoomTracker,
+  MapViewUpdater,
+  DiveRouteLayer,
+} from '../components/DiveMapComponents';
 import DiveProfileModal from '../components/DiveProfileModal';
+import DiveSidebar from '../components/DiveSidebar';
 import GasTanksDisplay from '../components/GasTanksDisplay';
 import Lightbox from '../components/Lightbox/Lightbox';
 import ReactImage from '../components/Lightbox/ReactImage';
@@ -73,254 +80,7 @@ import { renderTextWithLinks } from '../utils/textHelpers';
 
 import NotFound from './NotFound';
 
-// Custom zoom control component for dive detail page
-const ZoomControl = ({ currentZoom }) => {
-  return (
-    <div className='absolute top-2 left-12 bg-white rounded px-2 py-1 text-xs font-medium z-10 shadow-sm border border-gray-200'>
-      Zoom: {currentZoom.toFixed(1)}
-    </div>
-  );
-};
-
-// Custom zoom tracking component for dive detail page
-const ZoomTracker = ({ onZoomChange }) => {
-  const map = useMap();
-
-  useEffect(() => {
-    const handleZoomEnd = () => {
-      onZoomChange(map.getZoom());
-    };
-
-    map.on('zoomend', handleZoomEnd);
-
-    // Set initial zoom
-    onZoomChange(map.getZoom());
-
-    return () => {
-      map.off('zoomend', handleZoomEnd);
-    };
-  }, [map, onZoomChange]);
-
-  return null;
-};
-
-// Custom route layer component for dive detail page
-const MapViewUpdater = ({ viewport }) => {
-  const map = useMap();
-
-  useEffect(() => {
-    if (viewport && viewport.center && viewport.zoom) {
-      map.setView(viewport.center, viewport.zoom);
-    }
-  }, [map, viewport?.center, viewport?.zoom]);
-
-  return null;
-};
-
-const DiveRouteLayer = ({ route, diveSiteId, diveSite }) => {
-  const map = useMap();
-  const routeLayerRef = useRef(null);
-  const diveSiteMarkerRef = useRef(null);
-  const bearingMarkersRef = useRef([]);
-  const hasRenderedRef = useRef(false);
-  const lastRouteIdRef = useRef(null);
-
-  // Function to update bearing markers visibility based on zoom
-  const updateBearingMarkersVisibility = useCallback(() => {
-    const currentZoom = map.getZoom();
-    const shouldShow = currentZoom >= 16 && currentZoom <= 18;
-
-    bearingMarkersRef.current.forEach(marker => {
-      if (shouldShow) {
-        if (!map.hasLayer(marker)) {
-          map.addLayer(marker);
-        }
-      } else {
-        if (map.hasLayer(marker)) {
-          map.removeLayer(marker);
-        }
-      }
-    });
-  }, [map]);
-
-  useEffect(() => {
-    if (!route?.route_data) {
-      return;
-    }
-
-    // Check if this is the same route as before
-    const isSameRoute = lastRouteIdRef.current === route?.id;
-
-    // Prevent duplicate rendering for the same route
-    if (hasRenderedRef.current && routeLayerRef.current && isSameRoute) {
-      // Still update bearing visibility on zoom even if route hasn't changed
-      updateBearingMarkersVisibility();
-      return;
-    }
-
-    // Clear existing layers and bearing markers
-    if (routeLayerRef.current) {
-      map.removeLayer(routeLayerRef.current);
-    }
-    if (diveSiteMarkerRef.current) {
-      map.removeLayer(diveSiteMarkerRef.current);
-    }
-    bearingMarkersRef.current.forEach(marker => {
-      map.removeLayer(marker);
-    });
-    bearingMarkersRef.current = [];
-
-    // Add dive site marker
-    if (diveSite && diveSite.latitude && diveSite.longitude) {
-      const diveSiteMarker = L.marker([diveSite.latitude, diveSite.longitude], {
-        icon: L.divIcon({
-          className: 'dive-site-marker',
-          html: '<div style="background-color: #dc2626; width: 20px; height: 20px; border-radius: 50%; border: 2px solid white; box-shadow: 0 2px 4px rgba(0,0,0,0.3);"></div>',
-          iconSize: [20, 20],
-          iconAnchor: [10, 10],
-        }),
-      });
-
-      diveSiteMarker.bindPopup(`
-        <div class="p-2">
-          <h3 class="font-semibold text-gray-800 mb-1">${escape(diveSite.name)}</h3>
-          <p class="text-sm text-gray-600">Dive Site</p>
-        </div>
-      `);
-
-      map.addLayer(diveSiteMarker);
-      diveSiteMarkerRef.current = diveSiteMarker;
-    }
-
-    // Add route layer
-    const routeLayer = L.geoJSON(route.route_data, {
-      style: feature => {
-        // Determine color based on route type and segment type
-        let routeColor;
-        if (feature.properties?.color) {
-          routeColor = feature.properties.color;
-        } else if (feature.properties?.segmentType) {
-          routeColor = getRouteTypeColor(feature.properties.segmentType);
-        } else {
-          routeColor = getRouteTypeColor(route.route_type);
-        }
-
-        return {
-          color: routeColor,
-          weight: 6, // Increased weight for better visibility
-          opacity: 0.9,
-          fillOpacity: 0.3,
-        };
-      },
-      pointToLayer: (feature, latlng) => {
-        let routeColor;
-        if (feature.properties?.color) {
-          routeColor = feature.properties.color;
-        } else if (feature.properties?.segmentType) {
-          routeColor = getRouteTypeColor(feature.properties.segmentType);
-        } else {
-          routeColor = getRouteTypeColor(route.route_type);
-        }
-
-        return L.circleMarker(latlng, {
-          radius: 8, // Increased radius for better visibility
-          fillColor: routeColor,
-          color: routeColor,
-          weight: 3,
-          opacity: 0.9,
-          fillOpacity: 0.7,
-        });
-      },
-    });
-
-    // Add popup to route
-    routeLayer.bindPopup(`
-      <div class="p-2">
-        <h3 class="font-semibold text-gray-800 mb-1">${escape(route.name)}</h3>
-        <p class="text-sm text-gray-600 mb-2">${escape(route.description || 'No description')}</p>
-        <div class="flex items-center gap-2 text-xs text-gray-500">
-          <span class="px-2 py-1 bg-gray-100 rounded">${escape(route.route_type)}</span>
-          <span>by ${escape(route.creator_username || 'Unknown')}</span>
-        </div>
-      </div>
-    `);
-
-    map.addLayer(routeLayer);
-    routeLayerRef.current = routeLayer;
-
-    // Calculate bearings and create markers (but don't add to map yet)
-    const bearings = calculateRouteBearings(route.route_data);
-    bearings.forEach(({ position, bearing }) => {
-      const bearingLabel = formatBearing(bearing, true);
-
-      // Create a custom icon with bearing text
-      const bearingIcon = L.divIcon({
-        className: 'bearing-label',
-        html: `
-          <div style="
-            background-color: rgba(255, 255, 255, 0.9);
-            border: 2px solid #2563eb;
-            border-radius: 4px;
-            padding: 2px 6px;
-            font-size: 11px;
-            font-weight: bold;
-            color: #1e40af;
-            white-space: nowrap;
-            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
-            text-align: center;
-          ">
-            ${bearingLabel}
-          </div>
-        `,
-        iconSize: [60, 20],
-        iconAnchor: [30, 10],
-      });
-
-      const bearingMarker = L.marker(position, {
-        icon: bearingIcon,
-        interactive: false,
-        zIndexOffset: 500,
-      });
-
-      // Store marker but don't add to map yet
-      bearingMarkersRef.current.push(bearingMarker);
-    });
-
-    // Update visibility based on initial zoom
-    updateBearingMarkersVisibility();
-
-    // Mark as rendered and track route ID
-    hasRenderedRef.current = true;
-    lastRouteIdRef.current = route?.id;
-
-    // Listen for zoom changes
-    map.on('zoomend', updateBearingMarkersVisibility);
-
-    return () => {
-      map.off('zoomend', updateBearingMarkersVisibility);
-
-      // Only cleanup if we're not about to re-render with the same route
-      const isSameRoute = lastRouteIdRef.current === route?.id;
-
-      if (routeLayerRef.current && !isSameRoute) {
-        map.removeLayer(routeLayerRef.current);
-      }
-
-      if (diveSiteMarkerRef.current && !isSameRoute) {
-        map.removeLayer(diveSiteMarkerRef.current);
-      }
-
-      if (!isSameRoute) {
-        bearingMarkersRef.current.forEach(marker => {
-          map.removeLayer(marker);
-        });
-        bearingMarkersRef.current = [];
-      }
-    };
-  }, [map, route?.id, route?.route_data, diveSite?.id, updateBearingMarkersVisibility]);
-
-  return null;
-};
+const AdvancedDiveProfileChart = lazy(() => import('../components/AdvancedDiveProfileChart'));
 
 const DiveDetail = () => {
   const { id, slug } = useParams();
@@ -1011,338 +771,13 @@ const DiveDetail = () => {
             <>
               {/* Basic Information */}
               <div className='bg-white rounded-lg shadow p-6'>
-                <div className='flex items-center gap-2 mb-4 pb-2 border-b border-gray-100'>
-                  <h2 className='text-xl font-semibold'>Dive Information</h2>
-                  {hasDeco && (
-                    <span className='text-red-500 font-medium text-sm border border-red-200 bg-red-50 px-2 py-0.5 rounded'>
-                      Deco
-                    </span>
-                  )}
-                </div>
-
-                {/* Responsive Dive Information */}
-                {isMobile ? (
-                  // Mobile View: Ant Design Mobile Grid
-                  <div className='mb-4'>
-                    <Grid columns={2} gap={16}>
-                      <Grid.Item>
-                        <div className='flex flex-col'>
-                          <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                            Difficulty
-                          </span>
-                          <div className='flex items-center mt-0.5'>
-                            {dive.difficulty_code ? (
-                              <span
-                                className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getDifficultyColorClasses(dive.difficulty_code)}`}
-                              >
-                                {dive.difficulty_label || getDifficultyLabel(dive.difficulty_code)}
-                              </span>
-                            ) : (
-                              <span className='text-sm text-gray-500'>-</span>
-                            )}
-                          </div>
-                        </div>
-                      </Grid.Item>
-
-                      <Grid.Item>
-                        <div className='flex flex-col'>
-                          <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                            Date & Time
-                          </span>
-
-                          <div className='flex items-center gap-1.5'>
-                            <Calendar className='w-4 h-4 text-gray-400' />
-
-                            <span className='text-sm font-medium text-gray-900'>
-                              {formatDate(dive.dive_date)}
-
-                              {dive.dive_time && (
-                                <span className='text-gray-500 font-normal ml-1'>
-                                  {formatTime(dive.dive_time)}
-                                </span>
-                              )}
-                            </span>
-                          </div>
-                        </div>
-                      </Grid.Item>
-
-                      <Grid.Item>
-                        <div className='flex flex-col'>
-                          <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                            Max Depth
-                          </span>
-
-                          <div className='flex items-center gap-1.5'>
-                            <TrendingUp className='w-4 h-4 text-gray-400' />
-
-                            <span className='text-sm font-bold text-gray-900'>
-                              {dive.max_depth || '-'}
-
-                              <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
-                            </span>
-                          </div>
-                        </div>
-                      </Grid.Item>
-
-                      <Grid.Item>
-                        <div className='flex flex-col'>
-                          <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                            Duration
-                          </span>
-
-                          <div className='flex items-center gap-1.5'>
-                            <Clock className='w-4 h-4 text-gray-400' />
-
-                            <span className='text-sm font-bold text-gray-900'>
-                              {dive.duration || '-'}
-
-                              <span className='text-xs font-normal text-gray-400 ml-0.5'>min</span>
-                            </span>
-                          </div>
-                        </div>
-                      </Grid.Item>
-
-                      {dive.average_depth && (
-                        <Grid.Item>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Avg Depth
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <TrendingUp size={15} className='text-gray-500' />
-                              <span className='text-sm font-medium'>{dive.average_depth}m</span>
-                            </div>
-                          </div>
-                        </Grid.Item>
-                      )}
-
-                      {dive.visibility_rating && (
-                        <Grid.Item>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Visibility
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <Eye size={15} className='text-gray-500' />
-                              <span className='text-sm font-medium'>
-                                {dive.visibility_rating}/10
-                              </span>
-                            </div>
-                          </div>
-                        </Grid.Item>
-                      )}
-
-                      {dive.user_rating && (
-                        <Grid.Item>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Rating
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <img
-                                src='/arts/divemap_shell.png'
-                                alt='Rating'
-                                className='w-4 h-4 object-contain'
-                              />
-                              <span className='text-sm font-medium'>{dive.user_rating}/10</span>
-                            </div>
-                          </div>
-                        </Grid.Item>
-                      )}
-
-                      {dive.suit_type && (
-                        <Grid.Item>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Suit
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <User size={15} className='text-gray-500' />
-                              <span className='text-sm font-medium capitalize'>
-                                {dive.suit_type.replace('_', ' ')}
-                              </span>
-                            </div>
-                          </div>
-                        </Grid.Item>
-                      )}
-
-                      {/* Tags - Full Width */}
-                      <Grid.Item span={2}>
-                        <div className='flex flex-col'>
-                          <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                            Tags
-                          </span>
-                          {dive.tags && dive.tags.length > 0 ? (
-                            <div className='flex flex-wrap gap-2 mt-0.5'>
-                              {dive.tags.map(tag => (
-                                <span
-                                  key={tag.id}
-                                  className={`px-2 py-0.5 rounded-full text-xs font-medium ${getTagColor(tag.name)}`}
-                                >
-                                  {tag.name}
-                                </span>
-                              ))}
-                            </div>
-                          ) : (
-                            <span className='text-sm text-gray-400'>-</span>
-                          )}
-                        </div>
-                      </Grid.Item>
-                    </Grid>
-                  </div>
-                ) : (
-                  // Desktop View: Ant Design Rows/Cols
-                  <>
-                    {/* Primary Metadata Row */}
-                    <div className='mb-4'>
-                      <Row gutter={[32, 16]}>
-                        <Col>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Difficulty
-                            </span>
-                            <div className='flex items-center mt-0.5'>
-                              {dive.difficulty_code ? (
-                                <span
-                                  className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getDifficultyColorClasses(dive.difficulty_code)}`}
-                                >
-                                  {dive.difficulty_label ||
-                                    getDifficultyLabel(dive.difficulty_code)}
-                                </span>
-                              ) : (
-                                <span className='text-sm text-gray-500'>-</span>
-                              )}
-                            </div>
-                          </div>
-                        </Col>
-
-                        <Col>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Max Depth
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <TrendingUp className='w-4 h-4 text-gray-400' />
-                              <span className='text-sm font-bold text-gray-900'>
-                                {dive.max_depth || '-'}
-                                <span className='text-xs font-normal text-gray-400 ml-0.5'>m</span>
-                              </span>
-                            </div>
-                          </div>
-                        </Col>
-
-                        <Col>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Duration
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <Clock className='w-4 h-4 text-gray-400' />
-                              <span className='text-sm font-bold text-gray-900'>
-                                {dive.duration || '-'}
-                                <span className='text-xs font-normal text-gray-400 ml-0.5'>
-                                  min
-                                </span>
-                              </span>
-                            </div>
-                          </div>
-                        </Col>
-
-                        <Col>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Date & Time
-                            </span>
-                            <div className='flex items-center gap-1.5'>
-                              <Calendar className='w-4 h-4 text-gray-400' />
-                              <span className='text-sm font-medium text-gray-900'>
-                                {formatDate(dive.dive_date)}
-                                {dive.dive_time && (
-                                  <span className='text-gray-500 font-normal ml-1'>
-                                    {formatTime(dive.dive_time)}
-                                  </span>
-                                )}
-                              </span>
-                            </div>
-                          </div>
-                        </Col>
-
-                        <Col flex='auto'>
-                          <div className='flex flex-col'>
-                            <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                              Tags
-                            </span>
-                            {dive.tags && dive.tags.length > 0 ? (
-                              <div className='flex flex-wrap gap-2 mt-0.5'>
-                                {dive.tags.map(tag => (
-                                  <span
-                                    key={tag.id}
-                                    className={`px-2 py-0.5 rounded-full text-xs font-medium ${getTagColor(tag.name)}`}
-                                  >
-                                    {tag.name}
-                                  </span>
-                                ))}
-                              </div>
-                            ) : (
-                              <span className='text-sm text-gray-400'>-</span>
-                            )}
-                          </div>
-                        </Col>
-                      </Row>
-                    </div>
-
-                    {/* Secondary Information Grid */}
-                    <div className='mb-4'>
-                      <Row gutter={[16, 16]}>
-                        {dive.average_depth && (
-                          <Col xs={24} sm={12} md={6}>
-                            <div className='flex items-center gap-2'>
-                              <TrendingUp size={15} className='text-gray-500' />
-                              <span className='text-sm text-gray-600'>Avg Depth:</span>
-                              <span className='font-medium'>{dive.average_depth}m</span>
-                            </div>
-                          </Col>
-                        )}
-
-                        {dive.visibility_rating && (
-                          <Col xs={24} sm={12} md={6}>
-                            <div className='flex items-center gap-2'>
-                              <Eye size={15} className='text-gray-500' />
-                              <span className='text-sm text-gray-600'>Visibility:</span>
-                              <span className='font-medium'>{dive.visibility_rating}/10</span>
-                            </div>
-                          </Col>
-                        )}
-
-                        {dive.user_rating && (
-                          <Col xs={24} sm={12} md={6}>
-                            <div className='flex items-center gap-2'>
-                              <img
-                                src='/arts/divemap_shell.png'
-                                alt='Rating'
-                                className='w-4 h-4 object-contain'
-                              />
-                              <span className='text-sm text-gray-600'>Rating:</span>
-                              <span className='font-medium'>{dive.user_rating}/10</span>
-                            </div>
-                          </Col>
-                        )}
-
-                        {dive.suit_type && (
-                          <Col xs={24} sm={12} md={6}>
-                            <div className='flex items-center gap-2'>
-                              <User size={15} className='text-gray-500' />
-                              <span className='text-sm text-gray-600'>Suit:</span>
-                              <span className='font-medium capitalize'>
-                                {dive.suit_type.replace('_', ' ')}
-                              </span>
-                            </div>
-                          </Col>
-                        )}
-                      </Row>
-                    </div>
-                  </>
-                )}
+                <DiveInfoGrid
+                  dive={dive}
+                  hasDeco={hasDeco}
+                  isMobile={isMobile}
+                  formatDate={formatDate}
+                  formatTime={formatTime}
+                />
 
                 {/* Buddies */}
                 <div className='mt-4'>
@@ -1511,23 +946,31 @@ const DiveDetail = () => {
                 {hasDeco && <span className='text-red-500 font-medium'>Deco dive</span>}
               </div>
 
-              <AdvancedDiveProfileChart
-                profileData={profileData}
-                isLoading={profileLoading}
-                error={profileError ? extractErrorMessage(profileError) : null}
-                showTemperature={true}
-                screenSize='desktop'
-                onDecoStatusChange={profileHasDeco => {
-                  // If profile data is available, use it; otherwise keep tag-based detection
-                  if (profileHasDeco !== undefined) {
-                    setProfileHasDeco(profileHasDeco);
-                  }
-                }}
-                onMaximize={handleOpenProfileModal}
-                onUpload={
-                  user && (user.id === dive.user_id || user.is_admin) ? handleUploadProfile : null
+              <Suspense
+                fallback={
+                  <div className='h-96 flex items-center justify-center bg-gray-50 rounded animate-pulse'>
+                    Loading Chart...
+                  </div>
                 }
-              />
+              >
+                <AdvancedDiveProfileChart
+                  profileData={profileData}
+                  isLoading={profileLoading}
+                  error={profileError ? extractErrorMessage(profileError) : null}
+                  showTemperature={true}
+                  screenSize='desktop'
+                  onDecoStatusChange={profileHasDeco => {
+                    // If profile data is available, use it; otherwise keep tag-based detection
+                    if (profileHasDeco !== undefined) {
+                      setProfileHasDeco(profileHasDeco);
+                    }
+                  }}
+                  onMaximize={handleOpenProfileModal}
+                  onUpload={
+                    user && (user.id === dive.user_id || user.is_admin) ? handleUploadProfile : null
+                  }
+                />
+              </Suspense>
               <input
                 type='file'
                 ref={fileInputRef}
@@ -1733,78 +1176,7 @@ const DiveDetail = () => {
         </div>
 
         {/* Sidebar */}
-        <div className='space-y-6'>
-          {/* Dive Site Information */}
-          {dive.dive_site && (
-            <div className='bg-white rounded-lg shadow p-6'>
-              <h2 className='text-xl font-semibold mb-4'>Dive Site</h2>
-              <div className='space-y-3'>
-                <div className='flex items-center gap-2'>
-                  <MapPin size={15} className='text-gray-500' />
-                  <span className='font-medium'>{dive.dive_site.name}</span>
-                </div>
-                {dive.dive_site.description && (
-                  <p className='text-sm text-gray-600'>
-                    {renderTextWithLinks(decodeHtmlEntities(dive.dive_site.description))}
-                  </p>
-                )}
-                <RouterLink
-                  to={`/dive-sites/${dive.dive_site.id}/${slugify(dive.dive_site.name)}`}
-                  state={{ from: window.location.pathname + window.location.search }}
-                  className='text-blue-600 hover:text-blue-800 text-sm'
-                >
-                  View dive site details →
-                </RouterLink>
-              </div>
-            </div>
-          )}
-
-          {/* Diving Center Information */}
-          {dive.diving_center && (
-            <div className='bg-white rounded-lg shadow p-6'>
-              <h2 className='text-xl font-semibold mb-4'>Diving Center</h2>
-              <div className='space-y-3'>
-                <div className='flex items-center gap-2'>
-                  <MapPin size={15} className='text-gray-500' />
-                  <span className='font-medium'>{dive.diving_center.name}</span>
-                </div>
-                {dive.diving_center.description && (
-                  <p className='text-sm text-gray-600'>
-                    {renderTextWithLinks(decodeHtmlEntities(dive.diving_center.description))}
-                  </p>
-                )}
-                <RouterLink
-                  to={`/diving-centers/${dive.diving_center.id}/${slugify(dive.diving_center.name)}`}
-                  state={{ from: window.location.pathname + window.location.search }}
-                  className='text-blue-600 hover:text-blue-800 text-sm'
-                >
-                  View diving center details →
-                </RouterLink>
-              </div>
-            </div>
-          )}
-
-          {/* Statistics */}
-          <div className='bg-white rounded-lg shadow p-6'>
-            <h2 className='text-xl font-semibold mb-4'>Statistics</h2>
-            <div className='space-y-3'>
-              <div className='flex justify-between'>
-                <span className='text-gray-600'>Total Dives</span>
-                <span className='font-medium'>{dive.user?.number_of_dives || 0}</span>
-              </div>
-              <div className='flex justify-between'>
-                <span className='text-gray-600'>Dive Date</span>
-                <span className='font-medium'>{formatDate(dive.dive_date)}</span>
-              </div>
-              {dive.created_at && (
-                <div className='flex justify-between'>
-                  <span className='text-gray-600'>Logged</span>
-                  <span className='font-medium'>{formatDate(dive.created_at)}</span>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
+        <DiveSidebar dive={dive} formatDate={formatDate} />
       </div>
 
       {/* Media Modal */}
diff --git a/frontend/src/pages/DiveRouteDrawing.js b/frontend/src/pages/DiveRouteDrawing.jsx
similarity index 100%
rename from frontend/src/pages/DiveRouteDrawing.js
rename to frontend/src/pages/DiveRouteDrawing.jsx
diff --git a/frontend/src/pages/DiveRoutes.js b/frontend/src/pages/DiveRoutes.jsx
similarity index 100%
rename from frontend/src/pages/DiveRoutes.js
rename to frontend/src/pages/DiveRoutes.jsx
diff --git a/frontend/src/pages/DiveSiteDetail.js b/frontend/src/pages/DiveSiteDetail.jsx
similarity index 87%
rename from frontend/src/pages/DiveSiteDetail.js
rename to frontend/src/pages/DiveSiteDetail.jsx
index 1beb631..e58e4c0 100644
--- a/frontend/src/pages/DiveSiteDetail.js
+++ b/frontend/src/pages/DiveSiteDetail.jsx
@@ -16,7 +16,7 @@ import {
   Globe,
   TrendingUp,
 } from 'lucide-react';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { toast } from 'react-hot-toast';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import {
@@ -37,11 +37,11 @@ import api from '../api';
 import Breadcrumbs from '../components/Breadcrumbs';
 import CommunityVerdict from '../components/CommunityVerdict';
 import DiveSiteRoutes from '../components/DiveSiteRoutes';
+import DiveSiteSidebar from '../components/DiveSiteSidebar';
 import Lightbox from '../components/Lightbox/Lightbox';
 import ReactImage from '../components/Lightbox/ReactImage';
 import WeatherConditionsCard from '../components/MarineConditionsCard';
 import MaskedEmail from '../components/MaskedEmail';
-import MiniMap from '../components/MiniMap';
 import RateLimitError from '../components/RateLimitError';
 import SEO from '../components/SEO';
 import ShareButton from '../components/ShareButton';
@@ -65,6 +65,8 @@ import NotFound from './NotFound';
 // Use extractErrorMessage from api.js
 const getErrorMessage = error => extractErrorMessage(error, 'An error occurred');
 
+const MiniMap = lazy(() => import('../components/MiniMap'));
+
 const DiveSiteDetail = () => {
   const { id, slug } = useParams();
   const navigate = useNavigate();
@@ -922,15 +924,23 @@ const DiveSiteDetail = () => {
                     </Button>
                   </div>
 
-                  <MiniMap
-                    latitude={diveSite.latitude}
-                    longitude={diveSite.longitude}
-                    name={diveSite.name}
-                    onMaximize={() => setIsMapMaximized(true)}
-                    showMaximizeButton={false}
-                    isMaximized={isMapMaximized}
-                    onClose={() => setIsMapMaximized(false)}
-                  />
+                  <Suspense
+                    fallback={
+                      <div className='h-48 sm:h-64 bg-gray-50 flex items-center justify-center rounded border border-gray-200'>
+                        Loading Map...
+                      </div>
+                    }
+                  >
+                    <MiniMap
+                      latitude={diveSite.latitude}
+                      longitude={diveSite.longitude}
+                      name={diveSite.name}
+                      onMaximize={() => setIsMapMaximized(true)}
+                      showMaximizeButton={false}
+                      isMaximized={isMapMaximized}
+                      onClose={() => setIsMapMaximized(false)}
+                    />
+                  </Suspense>
                 </>
               )}
             </div>
@@ -1239,154 +1249,16 @@ const DiveSiteDetail = () => {
         </div>
 
         {/* Sidebar */}
-        <div className='space-y-6'>
-          {/* Weather Conditions - Collapsible */}
-          <div className='bg-white rounded-lg shadow-md overflow-hidden'>
-            <Collapse
-              ghost
-              onChange={keys => setIsMarineExpanded(keys.includes('weather'))}
-              items={[
-                {
-                  key: 'weather',
-                  label: (
-                    <span className='text-lg font-semibold text-gray-900'>
-                      Current Weather Conditions
-                    </span>
-                  ),
-                  children: (
-                    <div className='-m-4'>
-                      {/* Negative margin to counteract Collapse padding */}
-                      <WeatherConditionsCard windData={windData} loading={isWindLoading} />
-                    </div>
-                  ),
-                },
-              ]}
-            />
-          </div>
-
-          {/* Site Info - Desktop View Only - REMOVED (Consolidated to Header) */}
-
-          {/* Access Instructions - Desktop View Only */}
-          {diveSite.access_instructions && (
-            <div className='hidden lg:block bg-white p-4 sm:p-6 rounded-lg shadow-md'>
-              <h3 className='text-lg font-semibold text-gray-900 mb-4'>Access Instructions</h3>
-              <p className='text-gray-700 text-sm'>
-                {decodeHtmlEntities(diveSite.access_instructions)}
-              </p>
-            </div>
-          )}
-
-          {/* Associated Diving Centers - Moved to Sidebar */}
-          {divingCenters && divingCenters.length > 0 && (
-            <div className='bg-white p-4 sm:p-6 rounded-lg shadow-md'>
-              <h3 className='text-lg font-semibold text-gray-900 mb-4'>Diving Centers</h3>
-              <div className='space-y-4'>
-                {divingCenters.map(center => (
-                  <div key={center.id} className='border rounded-lg p-3'>
-                    <div className='flex flex-col gap-1 mb-2'>
-                      <h4 className='font-medium text-gray-900 text-sm'>{center.name}</h4>
-                      {center.dive_cost && (
-                        <span className='text-green-600 font-medium text-xs'>
-                          {formatCost(center.dive_cost, center.currency || DEFAULT_CURRENCY)}
-                        </span>
-                      )}
-                    </div>
-                    {center.description && (
-                      <p className='text-gray-600 text-xs mb-2 line-clamp-2'>
-                        {decodeHtmlEntities(center.description)}
-                      </p>
-                    )}
-                    <div className='flex flex-wrap gap-2 text-xs'>
-                      {center.email && (
-                        <a
-                          href={`mailto:${center.email}`}
-                          className='flex items-center text-blue-600 hover:text-blue-700'
-                          title='Email'
-                        >
-                          <Link className='h-3 w-3 mr-1' />
-                          Email
-                        </a>
-                      )}
-                      {center.phone && (
-                        <a
-                          href={`tel:${center.phone}`}
-                          className='flex items-center text-blue-600 hover:text-blue-700'
-                          title='Phone'
-                        >
-                          <Link className='h-3 w-3 mr-1' />
-                          Phone
-                        </a>
-                      )}
-                      {center.website && (
-                        <a
-                          href={center.website}
-                          target='_blank'
-                          rel='noopener noreferrer'
-                          className='flex items-center text-blue-600 hover:text-blue-700'
-                          title='Website'
-                        >
-                          <Link className='h-3 w-3 mr-1' />
-                          Web
-                        </a>
-                      )}
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-
-          {/* Nearby Dive Sites - Desktop View Only */}
-          {diveSite.latitude && diveSite.longitude && (
-            <div className='hidden lg:block bg-white rounded-lg shadow-md overflow-hidden'>
-              <Collapse
-                ghost
-                onChange={keys => setIsNearbyExpanded(keys.includes('nearby-desktop'))}
-                items={[
-                  {
-                    key: 'nearby-desktop',
-                    label: (
-                      <span className='text-lg font-semibold text-gray-900'>Nearby Dive Sites</span>
-                    ),
-                    children: (
-                      <div className='space-y-2'>
-                        {isNearbyLoading ? (
-                          <div className='text-center py-4 text-gray-500'>
-                            Loading nearby sites...
-                          </div>
-                        ) : nearbyDiveSites && nearbyDiveSites.length > 0 ? (
-                          nearbyDiveSites.slice(0, 6).map(site => (
-                            <button
-                              key={site.id}
-                              onClick={() =>
-                                navigate(`/dive-sites/${site.id}/${slugify(site.name)}`)
-                              }
-                              className='flex items-center p-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors text-left w-full'
-                            >
-                              <MapPin className='w-4 h-4 mr-2 flex-shrink-0 text-blue-600' />
-                              <div className='min-w-0 flex-1'>
-                                <div className='font-medium text-gray-900 text-sm truncate'>
-                                  {site.name}
-                                </div>
-                                <div className='text-xs text-gray-500'>
-                                  {site.distance_km} km away
-                                </div>
-                              </div>
-                            </button>
-                          ))
-                        ) : (
-                          <div className='text-center py-4 text-gray-500'>
-                            No nearby dive sites found.
-                          </div>
-                        )}
-                      </div>
-                    ),
-                  },
-                ]}
-              />
-            </div>
-          )}
-        </div>
+        <DiveSiteSidebar
+          diveSite={diveSite}
+          windData={windData}
+          isWindLoading={isWindLoading}
+          setIsMarineExpanded={setIsMarineExpanded}
+          divingCenters={divingCenters}
+          nearbyDiveSites={nearbyDiveSites}
+          isNearbyLoading={isNearbyLoading}
+          setIsNearbyExpanded={setIsNearbyExpanded}
+        />
       </div>
     </div>
   );
diff --git a/frontend/src/pages/DiveSiteMap.js b/frontend/src/pages/DiveSiteMap.jsx
similarity index 100%
rename from frontend/src/pages/DiveSiteMap.js
rename to frontend/src/pages/DiveSiteMap.jsx
diff --git a/frontend/src/pages/DiveSites.js b/frontend/src/pages/DiveSites.js
deleted file mode 100644
index 7af505b..0000000
--- a/frontend/src/pages/DiveSites.js
+++ /dev/null
@@ -1,1329 +0,0 @@
-import debounce from 'lodash/debounce';
-import {
-  Plus,
-  Eye,
-  Map,
-  ChevronLeft,
-  ChevronRight,
-  Star,
-  MapPin,
-  TrendingUp,
-  Compass,
-  Globe,
-  List,
-  Grid,
-  MessageSquare,
-  User,
-  Fish,
-  Shield,
-  Navigation,
-  Award,
-  MessageCircle,
-  Route,
-} from 'lucide-react';
-import { useState, useEffect, useCallback, useMemo } from 'react';
-import { toast } from 'react-hot-toast';
-import { useQuery, useMutation, useQueryClient } from 'react-query';
-import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
-
-import api from '../api';
-import Breadcrumbs from '../components/Breadcrumbs';
-import DesktopSearchBar from '../components/DesktopSearchBar';
-import DiveSitesMap from '../components/DiveSitesMap';
-import EmptyState from '../components/EmptyState';
-import ErrorPage from '../components/ErrorPage';
-import HeroSection from '../components/HeroSection';
-import LoadingSkeleton from '../components/LoadingSkeleton';
-import MatchTypeBadge from '../components/MatchTypeBadge';
-import PageHeader from '../components/PageHeader';
-import RateLimitError from '../components/RateLimitError';
-import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
-import { useAuth } from '../contexts/AuthContext';
-import { useCompactLayout } from '../hooks/useCompactLayout';
-import useFlickrImages from '../hooks/useFlickrImages';
-import usePageTitle from '../hooks/usePageTitle';
-import { useResponsive, useResponsiveScroll } from '../hooks/useResponsive';
-import useSorting from '../hooks/useSorting';
-import { getDifficultyLabel, getDifficultyColorClasses } from '../utils/difficultyHelpers';
-import { decodeHtmlEntities } from '../utils/htmlDecode';
-import { handleRateLimitError } from '../utils/rateLimitHandler';
-import { slugify } from '../utils/slugify';
-import { getSortOptions } from '../utils/sortOptions';
-import { getTagColor } from '../utils/tagHelpers';
-import { renderTextWithLinks } from '../utils/textHelpers';
-
-const DiveSites = () => {
-  const { user, isAdmin } = useAuth();
-  const navigate = useNavigate();
-  const location = useLocation();
-  const [searchParams, setSearchParams] = useSearchParams();
-  const queryClient = useQueryClient();
-
-  // Set page title
-  usePageTitle('Divemap - Dive Sites');
-
-  // Enhanced state for mobile UX
-  const [viewMode, setViewMode] = useState(() => {
-    // Use React Router's searchParams consistently
-    return searchParams.get('view') || 'list';
-  });
-  const [showFilters, setShowFilters] = useState(false);
-  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
-  const [quickFilters, setQuickFilters] = useState([]);
-
-  // Compact layout state management
-  const { compactLayout, handleDisplayOptionChange } = useCompactLayout();
-
-  // Mobile optimization styles
-  const mobileStyles = {
-    touchTarget: 'min-h-[44px] sm:min-h-0 touch-manipulation',
-    mobilePadding: 'p-3 sm:p-4 lg:p-6',
-    mobileMargin: 'mb-4 sm:mb-6 lg:mb-8',
-    mobileText: 'text-xs sm:text-sm lg:text-base',
-    mobileFlex: 'flex-col sm:flex-row',
-    mobileCenter: 'justify-center sm:justify-start',
-    mobileFullWidth: 'w-full sm:w-auto',
-  };
-
-  // Get initial values from URL parameters
-  const getInitialViewMode = () => {
-    const mode = searchParams.get('view') || 'list';
-    return ['list', 'grid', 'map'].includes(mode) ? mode : 'list';
-  };
-
-  const getInitialFilters = () => {
-    return {
-      search_query: searchParams.get('search') || '',
-      country: searchParams.get('country') || '',
-      region: searchParams.get('region') || '',
-      difficulty_code: searchParams.get('difficulty_code') || '',
-      exclude_unspecified_difficulty: searchParams.get('exclude_unspecified_difficulty') === 'true',
-      min_rating: searchParams.get('min_rating') || '',
-      tag_ids: searchParams
-        .getAll('tag_ids')
-        .map(id => parseInt(id))
-        .filter(id => !isNaN(id)),
-    };
-  };
-
-  const getInitialPagination = () => {
-    return {
-      page: parseInt(searchParams.get('page')) || 1,
-      page_size: parseInt(searchParams.get('page_size')) || 25,
-    };
-  };
-
-  const [filters, setFilters] = useState(getInitialFilters);
-  const [pagination, setPagination] = useState(getInitialPagination);
-  const [viewport, setViewport] = useState({
-    longitude: 0,
-    latitude: 0,
-    zoom: 2,
-  });
-
-  // Responsive detection using custom hook
-  const { isMobile } = useResponsive();
-  const { searchBarVisible } = useResponsiveScroll();
-  // Calculate effective page size for pagination display
-  const effectivePageSize = pagination.page_size || 25;
-  const [debouncedSearchTerms, setDebouncedSearchTerms] = useState({
-    search_query: getInitialFilters().search_query,
-    country: getInitialFilters().country,
-    region: getInitialFilters().region,
-    location: getInitialFilters().location,
-  });
-
-  // Initialize sorting
-  const { sortBy, sortOrder, handleSortChange, resetSorting, getSortParams } =
-    useSorting('dive-sites');
-
-  // Update viewMode when searchParams change
-  useEffect(() => {
-    const newViewMode = searchParams.get('view') || 'list';
-    setViewMode(newViewMode);
-  }, [searchParams]);
-
-  // Debounced URL update for search inputs
-  const debouncedUpdateURL = useCallback(
-    debounce((newFilters, newPagination, newViewMode) => {
-      const currentParams = new URLSearchParams(window.location.search);
-      const newSearchParams = new URLSearchParams();
-
-      // Preserve compact_layout parameter
-      const compactLayoutParam = currentParams.get('compact_layout');
-      if (compactLayoutParam === 'true') {
-        newSearchParams.set('compact_layout', 'true');
-      }
-
-      // Preserve current view mode if not explicitly changing it
-      if (newViewMode) {
-        if (newViewMode === 'map') {
-          newSearchParams.set('view', 'map');
-        } else if (newViewMode === 'grid' && !isMobile) {
-          newSearchParams.set('view', 'grid');
-        }
-        // List view is default, so no need to set it
-      } else {
-        // Preserve existing view mode if not changing
-        const currentView = currentParams.get('view');
-        if (currentView === 'map') {
-          newSearchParams.set('view', 'map');
-        } else if (currentView === 'grid' && !isMobile) {
-          newSearchParams.set('view', 'grid');
-        }
-      }
-
-      if (newFilters.search_query && newFilters.search_query.trim()) {
-        newSearchParams.set('search', newFilters.search_query.trim());
-      }
-
-      if (newFilters.country && newFilters.country.trim()) {
-        newSearchParams.set('country', newFilters.country.trim());
-      }
-
-      if (newFilters.region && newFilters.region.trim()) {
-        newSearchParams.set('region', newFilters.region.trim());
-      }
-
-      if (newFilters.difficulty_code && newFilters.difficulty_code.trim()) {
-        newSearchParams.set('difficulty_code', newFilters.difficulty_code.trim());
-      }
-      if (newFilters.exclude_unspecified_difficulty) {
-        newSearchParams.set('exclude_unspecified_difficulty', 'true');
-      }
-
-      if (newFilters.min_rating && newFilters.min_rating.trim()) {
-        newSearchParams.set('min_rating', newFilters.min_rating.trim());
-      }
-
-      if (newFilters.tag_ids && Array.isArray(newFilters.tag_ids)) {
-        newFilters.tag_ids.forEach(tagId => {
-          if (tagId && tagId.toString && tagId.toString().trim()) {
-            newSearchParams.append('tag_ids', tagId.toString());
-          }
-        });
-      }
-
-      if (
-        newPagination.page &&
-        newPagination.page.toString &&
-        newPagination.page.toString().trim()
-      ) {
-        newSearchParams.set('page', newPagination.page.toString());
-      }
-      if (
-        newPagination.page_size &&
-        newPagination.page_size.toString &&
-        newPagination.page_size.toString().trim()
-      ) {
-        newSearchParams.set('page_size', newPagination.page_size.toString());
-      }
-
-      navigate(`?${newSearchParams.toString()}`, { replace: true });
-    }, 500),
-    [navigate]
-  );
-
-  // Immediate URL update for non-search filters (difficulty, ratings, tags, pagination)
-  const immediateUpdateURL = useCallback(
-    (newFilters, newPagination, newViewMode) => {
-      const currentParams = new URLSearchParams(window.location.search);
-      const newSearchParams = new URLSearchParams();
-
-      // Preserve compact_layout parameter
-      const compactLayoutParam = currentParams.get('compact_layout');
-      if (compactLayoutParam === 'true') {
-        newSearchParams.set('compact_layout', 'true');
-      }
-
-      // Preserve current view mode if not explicitly changing it
-      if (newViewMode) {
-        if (newViewMode === 'map') {
-          newSearchParams.set('view', 'map');
-        } else if (newViewMode === 'grid' && !isMobile) {
-          newSearchParams.set('view', 'grid');
-        }
-        // List view is default, so no need to set it
-      } else {
-        // Preserve existing view mode if not changing
-        const currentView = currentParams.get('view');
-        if (currentView === 'map') {
-          newSearchParams.set('view', 'map');
-        } else if (currentView === 'grid' && !isMobile) {
-          newSearchParams.set('view', 'grid');
-        }
-      }
-
-      if (newFilters.search_query && newFilters.search_query.trim()) {
-        newSearchParams.set('search', newFilters.search_query.trim());
-      }
-
-      if (newFilters.location && newFilters.location.trim()) {
-        newSearchParams.set('location', newFilters.location.trim());
-      }
-
-      if (newFilters.country && newFilters.country.trim()) {
-        newSearchParams.set('country', newFilters.country.trim());
-      }
-
-      if (newFilters.region && newFilters.region.trim()) {
-        newSearchParams.set('region', newFilters.region.trim());
-      }
-
-      if (newFilters.difficulty_code && newFilters.difficulty_code.trim()) {
-        newSearchParams.set('difficulty_code', newFilters.difficulty_code.trim());
-      }
-      if (newFilters.exclude_unspecified_difficulty) {
-        newSearchParams.set('exclude_unspecified_difficulty', 'true');
-      }
-
-      if (newFilters.min_rating && newFilters.min_rating.trim()) {
-        newSearchParams.set('min_rating', newFilters.min_rating.trim());
-      }
-
-      if (newFilters.tag_ids && Array.isArray(newFilters.tag_ids)) {
-        newFilters.tag_ids.forEach(tagId => {
-          if (tagId && tagId.toString && tagId.toString().trim()) {
-            newSearchParams.append('tag_ids', tagId.toString());
-          }
-        });
-      }
-
-      if (
-        newPagination.page &&
-        newPagination.page.toString &&
-        newPagination.page.toString().trim()
-      ) {
-        newSearchParams.set('page', newPagination.page.toString());
-      }
-      if (
-        newPagination.page_size &&
-        newPagination.page_size.toString &&
-        newPagination.page_size.toString().trim()
-      ) {
-        newSearchParams.set('page_size', newPagination.page_size.toString());
-      }
-
-      navigate(`?${newSearchParams.toString()}`, { replace: true });
-    },
-    [navigate]
-  );
-
-  // Update URL when pagination changes (immediate)
-  useEffect(() => {
-    immediateUpdateURL(filters, pagination, viewMode);
-  }, [pagination, immediateUpdateURL, filters, viewMode]);
-
-  // Debounced URL update for search inputs
-  useEffect(() => {
-    debouncedUpdateURL(filters, pagination, viewMode);
-  }, [
-    filters.name,
-    filters.search_query,
-    filters.country,
-    filters.region,
-    filters.location,
-    debouncedUpdateURL,
-  ]);
-
-  // Debounced search terms for query key
-  useEffect(() => {
-    const timeoutId = setTimeout(() => {
-      setDebouncedSearchTerms({
-        name: filters.name,
-        search_query: filters.search_query,
-        country: filters.country,
-        region: filters.region,
-        location: filters.location,
-      });
-    }, 1500);
-    return () => clearTimeout(timeoutId);
-  }, [filters.name, filters.search_query, filters.country, filters.region, filters.location]);
-
-  // Immediate URL update for non-search filters
-  useEffect(() => {
-    immediateUpdateURL(filters, pagination, viewMode);
-  }, [
-    filters.difficulty_code,
-    filters.exclude_unspecified_difficulty,
-    filters.min_rating,
-    filters.tag_ids,
-    filters.my_dive_sites,
-    immediateUpdateURL,
-  ]);
-
-  // Invalidate query when sorting changes to ensure fresh data
-  useEffect(() => {
-    queryClient.invalidateQueries(['dive-sites']);
-  }, [sortBy, sortOrder, queryClient]);
-
-  // Fetch available tags for filtering
-  const { data: availableTags } = useQuery(
-    ['available-tags'],
-    () => api.get('/api/v1/tags/').then(res => res.data),
-    {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-    }
-  );
-
-  // Fetch dive sites
-  const {
-    data: diveSitesResponse,
-    isLoading,
-    error,
-  } = useQuery(
-    [
-      'dive-sites',
-      debouncedSearchTerms.search_query,
-      debouncedSearchTerms.country,
-      debouncedSearchTerms.region,
-      filters.difficulty_code,
-      filters.exclude_unspecified_difficulty,
-      filters.min_rating,
-      filters.tag_ids,
-      filters.my_dive_sites,
-      pagination.page,
-      pagination.page_size,
-      sortBy,
-      sortOrder,
-    ],
-    async () => {
-      const params = new URLSearchParams();
-
-      if (debouncedSearchTerms.search_query)
-        params.append('search', debouncedSearchTerms.search_query);
-      if (filters.difficulty_code) params.append('difficulty_code', filters.difficulty_code);
-      if (filters.exclude_unspecified_difficulty) {
-        params.append('exclude_unspecified_difficulty', 'true');
-      }
-      if (filters.min_rating) params.append('min_rating', filters.min_rating);
-      if (debouncedSearchTerms.country) params.append('country', debouncedSearchTerms.country);
-      if (debouncedSearchTerms.region) params.append('region', debouncedSearchTerms.region);
-
-      // Add sorting parameters directly from state (not from getSortParams)
-      if (sortBy) params.append('sort_by', sortBy);
-      if (sortOrder) params.append('sort_order', sortOrder);
-
-      if (filters.tag_ids && Array.isArray(filters.tag_ids)) {
-        filters.tag_ids.forEach(tagId => {
-          if (tagId && tagId.toString && tagId.toString().trim()) {
-            params.append('tag_ids', tagId.toString());
-          }
-        });
-      }
-      if (filters.my_dive_sites) params.append('my_dive_sites', 'true');
-
-      if (pagination.page && pagination.page.toString && pagination.page.toString().trim()) {
-        params.append('page', pagination.page.toString());
-      }
-      if (
-        pagination.page_size &&
-        pagination.page_size.toString &&
-        pagination.page_size.toString().trim()
-      ) {
-        params.append('page_size', pagination.page_size.toString());
-      }
-
-      const response = await api.get(`/api/v1/dive-sites/?${params.toString()}`);
-
-      // Extract pagination info from response headers
-      const paginationInfo = {
-        totalCount: parseInt(response.headers['x-total-count'] || '0'),
-        totalPages: parseInt(response.headers['x-total-pages'] || '0'),
-        currentPage: parseInt(response.headers['x-current-page'] || '1'),
-        pageSize: parseInt(response.headers['x-page-size'] || '25'),
-        hasNextPage: response.headers['x-has-next-page'] === 'true',
-        hasPrevPage: response.headers['x-has-prev-page'] === 'true',
-      };
-
-      // Extract match type information from response headers
-      const matchTypesHeader = response.headers['x-match-types'];
-      let matchTypes = {};
-
-      if (matchTypesHeader) {
-        try {
-          matchTypes = JSON.parse(matchTypesHeader);
-        } catch (e) {
-          console.warn('Failed to parse match types header:', e);
-        }
-      }
-
-      return {
-        data: response.data,
-        matchTypes: matchTypes,
-        paginationInfo: paginationInfo,
-      };
-    },
-    {
-      staleTime: 5 * 60 * 1000, // 5 minutes
-    }
-  );
-
-  // Handle the backend response structure - it returns a list directly, not an object with results
-  const diveSites = diveSitesResponse
-    ? { results: diveSitesResponse.data || diveSitesResponse }
-    : null;
-  const matchTypes = diveSitesResponse?.matchTypes || {};
-
-  // Extract total count from the main API response headers (filtered results)
-  const totalCount = diveSitesResponse?.paginationInfo?.totalCount || 0;
-  const totalPages = diveSitesResponse?.paginationInfo?.totalPages || 0;
-  const hasNextPage = diveSitesResponse?.paginationInfo?.hasNextPage || false;
-  const hasPrevPage = diveSitesResponse?.paginationInfo?.hasPrevPage || false;
-
-  // Extract all thumbnail URLs from the results to pass to the hook
-  const thumbnailUrls = useMemo(() => {
-    if (!diveSites?.results) return [];
-    return diveSites.results
-      .filter(site => site.thumbnail)
-      .map(site => ({
-        id: site.id, // We need an ID for the hook
-        url: site.thumbnail,
-        media_type: 'photo', // Assume photo for thumbnail
-      }));
-  }, [diveSites?.results]);
-
-  // Use hook to convert Flickr URLs
-  const { data: convertedFlickrUrls = new Map() } = useFlickrImages(thumbnailUrls);
-
-  // Helper to get the image URL
-  const getThumbnailUrl = site => {
-    if (!site.thumbnail) return null;
-    return convertedFlickrUrls.get(site.thumbnail) || site.thumbnail;
-  };
-
-  // Show toast notifications for rate limiting errors
-  useEffect(() => {
-    handleRateLimitError(error, 'dive sites', () => window.location.reload());
-  }, [error]);
-
-  useEffect(() => {
-    handleRateLimitError(availableTags?.error, 'available tags', () => window.location.reload());
-  }, [availableTags?.error]);
-
-  // handleTagChange function removed as it's now handled inline in the button onClick
-
-  const clearFilters = () => {
-    const clearedFilters = {
-      search_query: '',
-      difficulty_code: '',
-      exclude_unspecified_difficulty: false,
-      min_rating: '',
-      country: '',
-      region: '',
-      tag_ids: [],
-      my_dive_sites: false,
-    };
-    setFilters(clearedFilters);
-    setPagination(prev => ({ ...prev, page: 1 }));
-    resetSorting();
-    immediateUpdateURL(clearedFilters, { ...pagination, page: 1 }, viewMode);
-  };
-
-  const handlePageChange = newPage => {
-    setPagination(prev => ({ ...prev, page: newPage }));
-  };
-
-  const handlePageSizeChange = newPageSize => {
-    setPagination(prev => ({ ...prev, page: 1, page_size: newPageSize }));
-  };
-
-  const handleViewModeChange = newViewMode => {
-    // Prevent switching to grid view on mobile
-    if (isMobile && newViewMode === 'grid') {
-      return;
-    }
-
-    setViewMode(newViewMode);
-
-    // Update URL with new view mode
-    const urlParams = new URLSearchParams(window.location.search);
-    if (newViewMode === 'map') {
-      urlParams.set('view', 'map');
-    } else if (newViewMode === 'grid' && !isMobile) {
-      urlParams.set('view', 'grid');
-    } else {
-      urlParams.delete('view'); // Default to list view
-    }
-
-    // Update URL without triggering a page reload
-    navigate(`?${urlParams.toString()}`, { replace: true });
-  };
-
-  const handleQuickFilter = filterType => {
-    // Toggle the filter in the quickFilters array
-    setQuickFilters(prev => {
-      if (prev.includes(filterType)) {
-        // Remove filter if already selected
-        return prev.filter(f => f !== filterType);
-      } else {
-        // Add filter if not selected
-        return [...prev, filterType];
-      }
-    });
-
-    // Apply the quick filter changes
-    if (filterType === 'clear') {
-      setQuickFilters([]);
-      setFilters(prev => ({
-        ...prev,
-        difficulty_code: '',
-        search_query: '',
-        tag_ids: [],
-      }));
-    } else {
-      // Handle additive tag filters
-      const tagIdMap = {
-        wrecks: 8,
-        reefs: 14,
-        boat_dive: 4,
-        shore_dive: 13,
-      };
-
-      // Handle difficulty filters (these are mutually exclusive)
-      const difficultyFilters = ['beginner', 'intermediate', 'advanced'];
-
-      setFilters(prev => {
-        const newFilters = { ...prev };
-
-        if (difficultyFilters.includes(filterType)) {
-          // For difficulty, replace any existing difficulty
-          newFilters.difficulty_code = filterType;
-          newFilters.search_query = '';
-        } else if (tagIdMap[filterType]) {
-          // For tag filters, add/remove from existing tags
-          const currentTagIds = prev.tag_ids || [];
-          const tagId = tagIdMap[filterType];
-
-          if (currentTagIds.includes(tagId)) {
-            // Remove tag if already selected
-            newFilters.tag_ids = currentTagIds.filter(id => id !== tagId);
-          } else {
-            // Add tag if not selected
-            newFilters.tag_ids = [...currentTagIds, tagId];
-          }
-          newFilters.search_query = '';
-        }
-
-        return newFilters;
-      });
-    }
-
-    // Reset to first page
-    setPagination(prev => ({ ...prev, page: 1 }));
-  };
-
-  const getActiveFiltersCount = () => {
-    let count = 0;
-    if (filters.search_query) count++;
-    if (filters.country) count++;
-    if (filters.region) count++;
-    if (filters.difficulty_code) count++;
-    if (filters.exclude_unspecified_difficulty) count++;
-    if (filters.min_rating) count++;
-    if (filters.tag_ids && filters.tag_ids.length > 0) count++;
-    return count;
-  };
-
-  const handleFilterChange = (key, value) => {
-    setFilters(prev => ({ ...prev, [key]: value }));
-    setPagination(prev => ({ ...prev, page: 1 }));
-  };
-
-  const getMediaLink = site => {
-    let link = `/dive-sites/${site.id}?tab=media`;
-    if (site.thumbnail_id) {
-      link += `&mediaId=${site.thumbnail_id}`;
-      if (site.thumbnail_source) {
-        link += `&source=${site.thumbnail_source}`;
-      }
-      if (site.thumbnail_type) {
-        link += `&type=${site.thumbnail_type}`;
-      }
-    }
-    return link;
-  };
-
-  // Error handling is now done within the content area to preserve hero section
-
-  return (
-    <div className='min-h-screen bg-gray-50'>
-      {/* Mobile-First Responsive Container */}
-      <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
-        <PageHeader
-          title='Dive Sites'
-          breadcrumbItems={[{ label: 'Dive Sites' }]}
-          actions={[
-            {
-              label: 'Explore on Map',
-              icon: Compass,
-              onClick: () => navigate('/map?type=dive-sites'),
-              variant: 'primary',
-            },
-            {
-              label: 'Suggest a New Site',
-              icon: Plus,
-              onClick: () => {
-                if (!user) {
-                  window.alert('You need an account for this action.\nPlease Login or Register.');
-                  return;
-                }
-                navigate('/dive-sites/create');
-              },
-              variant: 'secondary',
-            },
-          ]}
-        />
-
-        {/* Desktop Search Bar - Only visible on desktop/tablet */}
-        {!isMobile && (
-          <DesktopSearchBar
-            searchValue={filters.search_query}
-            onSearchChange={value => handleFilterChange('search_query', value)}
-            onSearchSelect={selectedItem => {
-              handleFilterChange('search_query', selectedItem.name);
-            }}
-            data={diveSites?.results || []}
-            configType='diveSites'
-            placeholder='Search dive sites by name, country, region, or description...'
-          />
-        )}
-
-        {/* Responsive Filter Bar */}
-        {/* Always visible to support sticky behavior */}
-        <>
-          {isLoading ? (
-            <LoadingSkeleton type='filter' />
-          ) : (
-            <ResponsiveFilterBar
-              showFilters={showAdvancedFilters}
-              onToggleFilters={() => setShowAdvancedFilters(!showAdvancedFilters)}
-              onClearFilters={clearFilters}
-              activeFiltersCount={getActiveFiltersCount()}
-              filters={{ ...filters, availableTags, user }}
-              onFilterChange={handleFilterChange}
-              onQuickFilter={handleQuickFilter}
-              quickFilters={quickFilters}
-              variant='sticky'
-              showQuickFilters={true}
-              showAdvancedToggle={true}
-              searchQuery={filters.search_query}
-              onSearchChange={value => handleFilterChange('search_query', value)}
-              onSearchSubmit={() => {}}
-              // Add sorting props
-              sortBy={sortBy}
-              sortOrder={sortOrder}
-              sortOptions={getSortOptions('dive-sites')}
-              onSortChange={handleSortChange}
-              onReset={resetSorting}
-              viewMode={viewMode}
-              onViewModeChange={handleViewModeChange}
-              compactLayout={compactLayout}
-              onDisplayOptionChange={handleDisplayOptionChange}
-            />
-          )}
-        </>
-
-        {/* Map Section - Show immediately when in map view */}
-        {viewMode === 'map' && (
-          <div className='mb-8'>
-            {isLoading ? (
-              <LoadingSkeleton type='map' />
-            ) : (
-              <div className='bg-white rounded-lg shadow-md p-4 mb-6'>
-                <h2 className='text-xl font-semibold text-gray-900 mb-4'>
-                  Map view of filtered Dive Sites
-                </h2>
-                <div className='h-96 sm:h-[500px] lg:h-[600px] rounded-lg overflow-hidden border border-gray-200'>
-                  <DiveSitesMap data-testid='dive-sites-map' diveSites={diveSites?.results || []} />
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-        {/* Content Section */}
-        <div className={`content-section ${mobileStyles.mobileMargin}`}>
-          {/* Pagination Controls - Mobile-first responsive design */}
-          {isLoading ? (
-            <LoadingSkeleton type='pagination' className='mb-2 sm:mb-6 lg:mb-8' />
-          ) : (
-            <div className='mb-2 sm:mb-6 lg:mb-8'>
-              <div className='bg-white rounded-lg shadow-md p-2 sm:p-4 lg:p-6'>
-                <div className='flex flex-col lg:flex-row justify-between items-center gap-2 sm:gap-4'>
-                  {/* Pagination Controls */}
-                  <div className='flex flex-col sm:flex-row items-center gap-2 sm:gap-4 w-full sm:w-auto'>
-                    {/* Page Size Selection */}
-                    <div className='flex items-center gap-1 sm:gap-2 w-full sm:w-auto justify-center sm:justify-start'>
-                      <label
-                        htmlFor='page-size-select-top'
-                        className='text-xs sm:text-sm font-medium text-gray-700'
-                      >
-                        Show:
-                      </label>
-                      <select
-                        id='page-size-select-top'
-                        value={pagination.page_size}
-                        onChange={e => handlePageSizeChange(parseInt(e.target.value))}
-                        className='px-1 sm:px-3 py-1 sm:py-1 border border-gray-300 rounded-md text-xs sm:text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 min-h-[36px] sm:min-h-0 touch-manipulation'
-                      >
-                        <option value={25}>25</option>
-                        <option value={50}>50</option>
-                        <option value={100}>100</option>
-                      </select>
-                      <span className='text-xs sm:text-sm text-gray-600'>per page</span>
-                    </div>
-
-                    {/* Pagination Info */}
-                    {totalCount !== undefined && totalCount !== null && (
-                      <div className='text-xs sm:text-sm text-gray-600 text-center sm:text-left'>
-                        Showing {Math.max(1, (pagination.page - 1) * effectivePageSize + 1)} to{' '}
-                        {Math.min(pagination.page * effectivePageSize, totalCount)} of {totalCount}{' '}
-                        dive sites
-                      </div>
-                    )}
-
-                    {/* Pagination Navigation */}
-                    {totalCount !== undefined && totalCount !== null && totalCount > 0 && (
-                      <div className='flex items-center gap-1 sm:gap-2'>
-                        <button
-                          onClick={() => handlePageChange(pagination.page - 1)}
-                          disabled={!hasPrevPage}
-                          className='px-2 sm:px-3 py-1 sm:py-1 border border-gray-300 rounded-md text-xs sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 active:bg-gray-100 min-h-[36px] sm:min-h-0 touch-manipulation transition-colors'
-                        >
-                          <ChevronLeft className='h-4 w-4' />
-                        </button>
-
-                        <span className='text-xs sm:text-sm text-gray-700 px-1 sm:px-2'>
-                          Page {pagination.page} of{' '}
-                          {totalPages || Math.max(1, Math.ceil(totalCount / effectivePageSize))}
-                        </span>
-
-                        <button
-                          onClick={() => handlePageChange(pagination.page + 1)}
-                          disabled={!hasNextPage}
-                          className='px-2 sm:px-3 py-1 sm:py-1 border border-gray-300 rounded-md text-xs sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 active:bg-gray-100 min-h-[36px] sm:min-h-0 touch-manipulation transition-colors'
-                        >
-                          <ChevronRight className='h-4 w-4' />
-                        </button>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-
-          {/* Results Section - Mobile-first responsive design */}
-          {error ? (
-            <ErrorPage error={error} onRetry={() => window.location.reload()} />
-          ) : isLoading ? (
-            <LoadingSkeleton
-              type='card'
-              count={pagination.page_size || 25}
-              className={`space-y-2 sm:space-y-3 ${compactLayout ? 'view-mode-compact' : ''}`}
-            />
-          ) : (
-            <>
-              {/* Dive Sites List - Show when data is available and viewMode is list */}
-              {viewMode === 'list' && diveSites?.results && (
-                <div
-                  data-testid='dive-sites-list'
-                  className={`space-y-3 sm:space-y-4 ${compactLayout ? 'view-mode-compact' : ''}`}
-                >
-                  {diveSites.results.map(site => (
-                    <div
-                      key={site.id}
-                      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 relative ${compactLayout ? 'p-4' : 'p-6'}`}
-                    >
-                      <div className='flex gap-4 sm:gap-6'>
-                        {site.thumbnail && (
-                          <Link
-                            to={getMediaLink(site)}
-                            className='shrink-0 w-24 h-24 sm:w-40 sm:h-32 rounded-lg overflow-hidden bg-gray-100 hidden sm:block'
-                          >
-                            <img
-                              src={getThumbnailUrl(site)}
-                              alt={site.name}
-                              className='w-full h-full object-cover hover:scale-105 transition-transform duration-300'
-                              loading='lazy'
-                            />
-                          </Link>
-                        )}
-                        <div className='flex flex-col space-y-3 sm:space-y-4 flex-1 min-w-0'>
-                          {/* HEADER ROW */}
-                          <div className='flex items-start justify-between gap-4'>
-                            <div className='flex-1 min-w-0'>
-                              {/* Kicker: Location */}
-                              {(site.country || site.region) && (
-                                <div className='flex items-center gap-1 text-[10px] font-bold uppercase tracking-widest text-blue-600 mb-1.5'>
-                                  <Globe className='w-3 h-3' />
-                                  {site.country && (
-                                    <button
-                                      onClick={e => {
-                                        e.preventDefault();
-                                        handleFilterChange('country', site.country);
-                                      }}
-                                      className='hover:underline hover:text-blue-800 transition-colors'
-                                    >
-                                      {site.country}
-                                    </button>
-                                  )}
-                                  {site.country && site.region && (
-                                    <span className='mx-1'>&rsaquo;</span>
-                                  )}
-                                  {site.region && (
-                                    <button
-                                      onClick={e => {
-                                        e.preventDefault();
-                                        handleFilterChange('region', site.region);
-                                      }}
-                                      className='hover:underline hover:text-blue-800 transition-colors'
-                                    >
-                                      {site.region}
-                                    </button>
-                                  )}
-                                </div>
-                              )}
-
-                              {/* Title: Site Name */}
-                              <h3
-                                className={`font-semibold text-gray-900 leading-snug flex items-center gap-2 flex-wrap ${compactLayout ? 'text-lg' : 'text-xl'}`}
-                              >
-                                <Link
-                                  to={`/dive-sites/${site.id}/${slugify(site.name)}`}
-                                  state={{
-                                    from: window.location.pathname + window.location.search,
-                                  }}
-                                  className='hover:text-blue-600 transition-colors'
-                                >
-                                  {site.name}
-                                </Link>
-                                {site.route_count > 0 && (
-                                  <span className='inline-flex items-center gap-1 px-2 py-0.5 bg-blue-50 text-blue-700 rounded-full text-[10px] font-bold uppercase tracking-wider'>
-                                    <Route className='w-2.5 h-2.5' />
-                                    {site.route_count} Route{site.route_count > 1 ? 's' : ''}
-                                  </span>
-                                )}
-                              </h3>
-                            </div>
-
-                            {/* Top Right: Rating */}
-                            {site.average_rating !== undefined && site.average_rating !== null && (
-                              <div className='flex flex-col items-end gap-1'>
-                                <div className='flex items-center gap-1.5 text-yellow-500'>
-                                  <img
-                                    src='/arts/divemap_shell.png'
-                                    alt='Rating'
-                                    className='w-5 h-5 object-contain'
-                                  />
-                                  <span className='text-lg font-bold text-gray-900'>
-                                    {Number(site.average_rating).toFixed(1)}
-                                    <span className='text-xs font-normal text-gray-400 ml-0.5'>
-                                      /10
-                                    </span>
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-
-                          {/* Content Row: Byline, Description, and Mobile Thumbnail */}
-                          <div className='flex gap-4 items-start'>
-                            <div className='flex-1 min-w-0'>
-                              {/* Meta Byline (Creator) */}
-                              {site.created_by_username && (
-                                <div className='text-xs text-gray-500 flex items-center gap-1.5 mb-2'>
-                                  <div className='flex items-center gap-1'>
-                                    <User className='w-3.5 h-3.5' />
-                                    <span>{site.created_by_username}</span>
-                                  </div>
-                                </div>
-                              )}
-
-                              {/* BODY: Description */}
-                              {site.description && (
-                                <div
-                                  className={`text-gray-600 leading-relaxed line-clamp-3 ${compactLayout ? 'text-xs' : 'text-sm'}`}
-                                >
-                                  {renderTextWithLinks(decodeHtmlEntities(site.description), {
-                                    shorten: false,
-                                    isUGC: true,
-                                  })}
-                                </div>
-                              )}
-                            </div>
-
-                            {/* Mobile Thumbnail */}
-                            {site.thumbnail && (
-                              <Link
-                                to={getMediaLink(site)}
-                                className='sm:hidden shrink-0 w-20 h-20 rounded-lg overflow-hidden bg-gray-100'
-                              >
-                                <img
-                                  src={getThumbnailUrl(site)}
-                                  alt={site.name}
-                                  className='w-full h-full object-cover'
-                                  loading='lazy'
-                                />
-                              </Link>
-                            )}
-                          </div>
-
-                          {/* STATS STRIP (De-boxed) */}
-                          <div className='flex flex-wrap gap-x-8 gap-y-3 py-3 border-y border-gray-50'>
-                            {site.max_depth !== undefined && site.max_depth !== null && (
-                              <div className='flex flex-col'>
-                                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                                  Max Depth
-                                </span>
-                                <div className='flex items-center gap-1.5'>
-                                  <TrendingUp className='w-4 h-4 text-gray-400' />
-                                  <span className='text-sm font-bold text-gray-900'>
-                                    {site.max_depth}
-                                    <span className='text-xs font-normal text-gray-400 ml-0.5'>
-                                      m
-                                    </span>
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                            {site.difficulty_code && site.difficulty_code !== 'unspecified' && (
-                              <div className='flex flex-col'>
-                                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                                  Level
-                                </span>
-                                <div className='flex items-center mt-0.5'>
-                                  <span
-                                    className={`inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium ${getDifficultyColorClasses(site.difficulty_code)}`}
-                                  >
-                                    {site.difficulty_label ||
-                                      getDifficultyLabel(site.difficulty_code)}
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                            {site.marine_life && (
-                              <div className='flex flex-col flex-1 min-w-[150px]'>
-                                <span className='text-[10px] font-medium text-gray-400 uppercase tracking-wider mb-0.5'>
-                                  Marine Life
-                                </span>
-                                <div className='flex items-center gap-1.5'>
-                                  <Fish className='w-4 h-4 text-blue-400' />
-                                  <span
-                                    className='text-sm text-gray-700 truncate max-w-[200px]'
-                                    title={site.marine_life}
-                                  >
-                                    {site.marine_life}
-                                  </span>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-
-                          {/* FOOTER: Tags & Actions */}
-                          <div className='flex items-center justify-between gap-4 mt-auto'>
-                            <div className='flex flex-wrap items-center gap-3'>
-                              {/* Tags */}
-                              {site.tags && site.tags.length > 0 && (
-                                <div className='flex flex-wrap gap-1.5'>
-                                  {site.tags.slice(0, 3).map((tag, index) => {
-                                    const tagName = tag.name || tag;
-                                    return (
-                                      <span
-                                        key={index}
-                                        className={`px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors ${getTagColor(tagName)}`}
-                                      >
-                                        {tagName}
-                                      </span>
-                                    );
-                                  })}
-                                  {site.tags.length > 3 && (
-                                    <span className='text-xs font-medium text-gray-400'>
-                                      +{site.tags.length - 3}
-                                    </span>
-                                  )}
-                                </div>
-                              )}
-                            </div>
-
-                            <Link
-                              to={`/dive-sites/${site.id}/${slugify(site.name)}`}
-                              className='inline-flex items-center gap-1 text-sm font-semibold text-blue-600 hover:text-blue-800 transition-colors group'
-                            >
-                              View Details
-                              <ChevronRight className='w-4 h-4 transition-transform group-hover:translate-x-0.5' />
-                            </Link>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Dive Sites Grid */}
-              {viewMode === 'grid' && !isMobile && diveSites?.results && (
-                <div
-                  className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 ${compactLayout ? 'view-mode-compact' : ''}`}
-                >
-                  {diveSites.results.map(site => (
-                    <div
-                      key={site.id}
-                      className='dive-item bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden'
-                    >
-                      {site.thumbnail && (
-                        <Link
-                          to={getMediaLink(site)}
-                          className='block w-full aspect-video overflow-hidden bg-gray-100'
-                        >
-                          <img
-                            src={getThumbnailUrl(site)}
-                            alt={site.name}
-                            className='w-full h-full object-cover transition-transform duration-300 hover:scale-105'
-                            loading='lazy'
-                          />
-                        </Link>
-                      )}
-                      <div className={`flex flex-col h-full ${compactLayout ? 'p-4' : 'p-6'}`}>
-                        {/* Header: Kicker & Title */}
-                        <div className='mb-3'>
-                          {(site.country || site.region) && (
-                            <div className='text-[10px] font-bold uppercase tracking-widest text-blue-600 mb-1 flex items-center gap-1'>
-                              <Globe className='w-2.5 h-2.5' />
-                              {site.country && (
-                                <button
-                                  onClick={e => {
-                                    e.preventDefault();
-                                    handleFilterChange('country', site.country);
-                                  }}
-                                  className='hover:underline hover:text-blue-800 transition-colors'
-                                >
-                                  {site.country}
-                                </button>
-                              )}
-                              {site.country && site.region && (
-                                <span className='mx-1'>&rsaquo;</span>
-                              )}
-                              {site.region && (
-                                <button
-                                  onClick={e => {
-                                    e.preventDefault();
-                                    handleFilterChange('region', site.region);
-                                  }}
-                                  className='hover:underline hover:text-blue-800 transition-colors'
-                                >
-                                  {site.region}
-                                </button>
-                              )}
-                            </div>
-                          )}
-                          <div className='flex items-start justify-between gap-2'>
-                            <h3 className='font-semibold text-gray-900 leading-snug line-clamp-1 flex-1'>
-                              <Link
-                                to={`/dive-sites/${site.id}/${slugify(site.name)}`}
-                                className='hover:text-blue-600 transition-colors'
-                              >
-                                {site.name}
-                              </Link>
-                            </h3>
-                          </div>
-                        </div>
-
-                        {/* Meta Byline (Creator) */}
-                        {site.created_by_username && (
-                          <div className='text-xs text-gray-500 flex items-center gap-1.5 mb-2'>
-                            <div className='flex items-center gap-1'>
-                              <User className='w-3.5 h-3.5' />
-                              <span>{site.created_by_username}</span>
-                            </div>
-                          </div>
-                        )}
-
-                        {/* Body: Description */}
-                        {site.description && (
-                          <div className='text-xs text-gray-500 leading-relaxed line-clamp-2 mb-4'>
-                            {renderTextWithLinks(decodeHtmlEntities(site.description), {
-                              shorten: false,
-                              isUGC: true,
-                            })}
-                          </div>
-                        )}
-
-                        {/* Stats Strip (Simplified for Grid) */}
-                        {((site.average_rating !== undefined && site.average_rating !== null) ||
-                          (site.max_depth !== undefined && site.max_depth !== null)) && (
-                          <div className='grid grid-cols-2 gap-4 py-3 border-y border-gray-50 mb-4'>
-                            {site.average_rating !== undefined && site.average_rating !== null && (
-                              <div className='flex items-center gap-2'>
-                                <img
-                                  src='/arts/divemap_shell.png'
-                                  alt='Rating'
-                                  className='w-4 h-4 object-contain'
-                                />
-                                <div>
-                                  <p className='text-[10px] text-gray-400 uppercase font-medium leading-none mb-0.5'>
-                                    Rating
-                                  </p>
-                                  <p className='text-sm font-semibold text-gray-700'>
-                                    {Number(site.average_rating).toFixed(1)}
-                                  </p>
-                                </div>
-                              </div>
-                            )}
-                            {site.max_depth !== undefined && site.max_depth !== null && (
-                              <div className='flex items-center gap-2'>
-                                <TrendingUp className='w-4 h-4 text-gray-400' />
-                                <div>
-                                  <p className='text-[10px] text-gray-400 uppercase font-medium leading-none mb-0.5'>
-                                    Depth
-                                  </p>
-                                  <p className='text-sm font-semibold text-gray-700'>
-                                    {site.max_depth}m
-                                  </p>
-                                </div>
-                              </div>
-                            )}
-                          </div>
-                        )}
-
-                        {/* Footer: Tags & Badges */}
-                        <div className='mt-auto flex items-center justify-between'>
-                          <div className='flex gap-1.5'>
-                            {site.tags?.slice(0, 2).map((tag, i) => {
-                              const tagName = tag.name || tag;
-                              return (
-                                <span
-                                  key={i}
-                                  className={`text-[10px] font-medium px-1.5 py-0.5 rounded border border-transparent ${getTagColor(tagName)}`}
-                                >
-                                  {tagName}
-                                </span>
-                              );
-                            })}
-                          </div>
-                          <div className='flex gap-1.5'>
-                            {site.difficulty_code && site.difficulty_code !== 'unspecified' && (
-                              <span
-                                className={`text-[10px] font-medium px-2 py-0.5 rounded-full ${getDifficultyColorClasses(site.difficulty_code)}`}
-                              >
-                                {site.difficulty_label || getDifficultyLabel(site.difficulty_code)}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-              {/* Close content-section */}
-            </>
-          )}
-
-          {/* No Results Messages - Show when no dive sites found */}
-          {!isLoading &&
-            diveSites?.results &&
-            diveSites.results.length === 0 &&
-            viewMode !== 'map' && (
-              <EmptyState
-                onClearFilters={clearFilters}
-                actionLink='/dive-sites/create'
-                actionText='Add Dive Site'
-                message={
-                  filters.search_query.trim()
-                    ? `No dive sites found matching "${filters.search_query}". Try different terms or add this site to our database.`
-                    : 'No dive sites found matching your criteria. Try adjusting your filters.'
-                }
-              />
-            )}
-
-          {/* Bottom Pagination Controls */}
-          {!isLoading && diveSites?.results && diveSites.results.length > 0 && (
-            <div className='mt-6 sm:mt-8'>
-              <div className='bg-white rounded-lg shadow-md p-4 sm:p-6'>
-                <div className='flex flex-col lg:flex-row justify-between items-center gap-4'>
-                  <div className='flex flex-col sm:flex-row items-center gap-3 sm:gap-4'>
-                    {/* Page Size Selection */}
-                    <div className='flex items-center gap-2'>
-                      <label
-                        htmlFor='page-size-select-bottom'
-                        className='text-xs sm:text-sm font-medium text-gray-700'
-                      >
-                        Show:
-                      </label>
-                      <select
-                        id='page-size-select-bottom'
-                        value={effectivePageSize}
-                        onChange={e => handlePageSizeChange(parseInt(e.target.value))}
-                        className='px-2 sm:px-3 py-1 border border-gray-300 rounded-md text-xs sm:text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-                      >
-                        <option value={25}>25</option>
-                        <option value={50}>50</option>
-                        <option value={100}>100</option>
-                      </select>
-                      <span className='text-xs sm:text-sm text-gray-600'>per page</span>
-                    </div>
-
-                    {/* Pagination Info */}
-                    {totalCount !== undefined && totalCount !== null && (
-                      <div className='text-xs sm:text-sm text-gray-600 text-center sm:text-left'>
-                        Showing {Math.max(1, (pagination.page - 1) * effectivePageSize + 1)} to{' '}
-                        {Math.min(pagination.page * effectivePageSize, totalCount)} of {totalCount}{' '}
-                        dive sites
-                      </div>
-                    )}
-
-                    {/* Pagination Navigation */}
-                    {totalCount !== undefined &&
-                      totalCount !== null &&
-                      totalCount > 0 &&
-                      (hasPrevPage || hasNextPage) && (
-                        <div className='flex items-center gap-1 sm:gap-2'>
-                          <button
-                            onClick={() => handlePageChange(pagination.page - 1)}
-                            disabled={!hasPrevPage}
-                            className='px-2 sm:px-3 py-1 sm:py-1 border border-gray-300 rounded-md text-xs sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 active:bg-gray-100 min-h-[36px] sm:min-h-0 touch-manipulation transition-colors'
-                          >
-                            <ChevronLeft className='h-4 w-4' />
-                          </button>
-
-                          <span className='text-xs sm:text-sm text-gray-700 px-1 sm:px-2'>
-                            Page {pagination.page} of{' '}
-                            {totalPages || Math.max(1, Math.ceil(totalCount / effectivePageSize))}
-                          </span>
-
-                          <button
-                            onClick={() => handlePageChange(pagination.page + 1)}
-                            disabled={!hasNextPage}
-                            className='px-2 sm:px-3 py-1 sm:py-1 border border-gray-300 rounded-md text-xs sm:text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50 active:bg-gray-100 min-h-[36px] sm:min-h-0 touch-manipulation transition-colors'
-                          >
-                            <ChevronRight className='h-4 w-4' />
-                          </button>
-                        </div>
-                      )}
-                  </div>
-                </div>
-              </div>
-            </div>
-          )}
-        </div>
-        {/* Close content-section */}
-      </div>
-      {/* Close mobile-first responsive container */}
-      {/* Phase 5 Mobile Optimization Summary */}
-      {/*
-        ✅ Mobile-First Responsive Design Implemented:
-        - Touch-friendly controls with 44px minimum height
-        - Responsive padding and margins (p-3 sm:p-4 lg:p-6)
-        - Mobile-optimized text sizes (text-xs sm:text-sm lg:text-base)
-        - Flexible layouts (flex-col sm:flex-row)
-        - Mobile-centered content with desktop justification
-        - Full-width mobile elements with auto desktop sizing
-        - Touch manipulation and active states for better UX
-        - Progressive disclosure for mobile information density
-      */}
-    </div>
-  );
-};
-
-export default DiveSites;
diff --git a/frontend/src/pages/DiveSites.jsx b/frontend/src/pages/DiveSites.jsx
new file mode 100644
index 0000000..112994d
--- /dev/null
+++ b/frontend/src/pages/DiveSites.jsx
@@ -0,0 +1,876 @@
+import debounce from 'lodash/debounce';
+import {
+  Plus,
+  Eye,
+  Map,
+  ChevronLeft,
+  ChevronRight,
+  Star,
+  MapPin,
+  TrendingUp,
+  Compass,
+  Globe,
+  List,
+  Grid,
+  MessageSquare,
+  User,
+  Fish,
+  Shield,
+  Navigation,
+  Award,
+  MessageCircle,
+  Route,
+} from 'lucide-react';
+import { useState, useEffect, useCallback, useMemo, lazy, Suspense } from 'react';
+import { toast } from 'react-hot-toast';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
+import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
+
+import api from '../api';
+import Breadcrumbs from '../components/Breadcrumbs';
+import DesktopSearchBar from '../components/DesktopSearchBar';
+import { DiveSiteListCard, DiveSiteGridCard } from '../components/DiveSiteCard';
+import EmptyState from '../components/EmptyState';
+import ErrorPage from '../components/ErrorPage';
+import HeroSection from '../components/HeroSection';
+import LoadingSkeleton from '../components/LoadingSkeleton';
+import MatchTypeBadge from '../components/MatchTypeBadge';
+import PageHeader from '../components/PageHeader';
+import RateLimitError from '../components/RateLimitError';
+import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
+import Pagination from '../components/ui/Pagination';
+import { useAuth } from '../contexts/AuthContext';
+import { useCompactLayout } from '../hooks/useCompactLayout';
+import useFlickrImages from '../hooks/useFlickrImages';
+import usePageTitle from '../hooks/usePageTitle';
+import { useResponsive, useResponsiveScroll } from '../hooks/useResponsive';
+import useSorting from '../hooks/useSorting';
+import { getDifficultyLabel, getDifficultyColorClasses } from '../utils/difficultyHelpers';
+import { decodeHtmlEntities } from '../utils/htmlDecode';
+import { handleRateLimitError } from '../utils/rateLimitHandler';
+import { slugify } from '../utils/slugify';
+import { getSortOptions } from '../utils/sortOptions';
+import { getTagColor } from '../utils/tagHelpers';
+import { renderTextWithLinks } from '../utils/textHelpers';
+
+const DiveSitesMap = lazy(() => import('../components/DiveSitesMap'));
+
+const DiveSites = () => {
+  const { user, isAdmin } = useAuth();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const queryClient = useQueryClient();
+
+  // Set page title
+  usePageTitle('Divemap - Dive Sites');
+
+  // Enhanced state for mobile UX
+  const [viewMode, setViewMode] = useState(() => {
+    // Use React Router's searchParams consistently
+    return searchParams.get('view') || 'list';
+  });
+  const [showFilters, setShowFilters] = useState(false);
+  const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
+  const [quickFilters, setQuickFilters] = useState([]);
+
+  // Compact layout state management
+  const { compactLayout, handleDisplayOptionChange } = useCompactLayout();
+
+  // Mobile optimization styles
+  const mobileStyles = {
+    touchTarget: 'min-h-[44px] sm:min-h-0 touch-manipulation',
+    mobilePadding: 'p-3 sm:p-4 lg:p-6',
+    mobileMargin: 'mb-4 sm:mb-6 lg:mb-8',
+    mobileText: 'text-xs sm:text-sm lg:text-base',
+    mobileFlex: 'flex-col sm:flex-row',
+    mobileCenter: 'justify-center sm:justify-start',
+    mobileFullWidth: 'w-full sm:w-auto',
+  };
+
+  // Get initial values from URL parameters
+  const getInitialViewMode = () => {
+    const mode = searchParams.get('view') || 'list';
+    return ['list', 'grid', 'map'].includes(mode) ? mode : 'list';
+  };
+
+  const getInitialFilters = () => {
+    return {
+      search_query: searchParams.get('search') || '',
+      country: searchParams.get('country') || '',
+      region: searchParams.get('region') || '',
+      difficulty_code: searchParams.get('difficulty_code') || '',
+      exclude_unspecified_difficulty: searchParams.get('exclude_unspecified_difficulty') === 'true',
+      min_rating: searchParams.get('min_rating') || '',
+      tag_ids: searchParams
+        .getAll('tag_ids')
+        .map(id => parseInt(id))
+        .filter(id => !isNaN(id)),
+    };
+  };
+
+  const getInitialPagination = () => {
+    return {
+      page: parseInt(searchParams.get('page')) || 1,
+      page_size: parseInt(searchParams.get('page_size')) || 25,
+    };
+  };
+
+  const [filters, setFilters] = useState(getInitialFilters);
+  const [pagination, setPagination] = useState(getInitialPagination);
+  const [viewport, setViewport] = useState({
+    longitude: 0,
+    latitude: 0,
+    zoom: 2,
+  });
+
+  // Responsive detection using custom hook
+  const { isMobile } = useResponsive();
+  const { searchBarVisible } = useResponsiveScroll();
+  // Calculate effective page size for pagination display
+  const effectivePageSize = pagination.page_size || 25;
+  const [debouncedSearchTerms, setDebouncedSearchTerms] = useState({
+    search_query: getInitialFilters().search_query,
+    country: getInitialFilters().country,
+    region: getInitialFilters().region,
+    location: getInitialFilters().location,
+  });
+
+  // Initialize sorting
+  const { sortBy, sortOrder, handleSortChange, resetSorting, getSortParams } =
+    useSorting('dive-sites');
+
+  // Update viewMode when searchParams change
+  useEffect(() => {
+    const newViewMode = searchParams.get('view') || 'list';
+    setViewMode(newViewMode);
+  }, [searchParams]);
+
+  // Debounced URL update for search inputs
+  const debouncedUpdateURL = useCallback(
+    debounce((newFilters, newPagination, newViewMode) => {
+      const currentParams = new URLSearchParams(window.location.search);
+      const newSearchParams = new URLSearchParams();
+
+      // Preserve compact_layout parameter
+      const compactLayoutParam = currentParams.get('compact_layout');
+      if (compactLayoutParam === 'true') {
+        newSearchParams.set('compact_layout', 'true');
+      }
+
+      // Preserve current view mode if not explicitly changing it
+      if (newViewMode) {
+        if (newViewMode === 'map') {
+          newSearchParams.set('view', 'map');
+        } else if (newViewMode === 'grid' && !isMobile) {
+          newSearchParams.set('view', 'grid');
+        }
+        // List view is default, so no need to set it
+      } else {
+        // Preserve existing view mode if not changing
+        const currentView = currentParams.get('view');
+        if (currentView === 'map') {
+          newSearchParams.set('view', 'map');
+        } else if (currentView === 'grid' && !isMobile) {
+          newSearchParams.set('view', 'grid');
+        }
+      }
+
+      if (newFilters.search_query && newFilters.search_query.trim()) {
+        newSearchParams.set('search', newFilters.search_query.trim());
+      }
+
+      if (newFilters.country && newFilters.country.trim()) {
+        newSearchParams.set('country', newFilters.country.trim());
+      }
+
+      if (newFilters.region && newFilters.region.trim()) {
+        newSearchParams.set('region', newFilters.region.trim());
+      }
+
+      if (newFilters.difficulty_code && newFilters.difficulty_code.trim()) {
+        newSearchParams.set('difficulty_code', newFilters.difficulty_code.trim());
+      }
+      if (newFilters.exclude_unspecified_difficulty) {
+        newSearchParams.set('exclude_unspecified_difficulty', 'true');
+      }
+
+      if (newFilters.min_rating && newFilters.min_rating.trim()) {
+        newSearchParams.set('min_rating', newFilters.min_rating.trim());
+      }
+
+      if (newFilters.tag_ids && Array.isArray(newFilters.tag_ids)) {
+        newFilters.tag_ids.forEach(tagId => {
+          if (tagId && tagId.toString && tagId.toString().trim()) {
+            newSearchParams.append('tag_ids', tagId.toString());
+          }
+        });
+      }
+
+      if (
+        newPagination.page &&
+        newPagination.page.toString &&
+        newPagination.page.toString().trim()
+      ) {
+        newSearchParams.set('page', newPagination.page.toString());
+      }
+      if (
+        newPagination.page_size &&
+        newPagination.page_size.toString &&
+        newPagination.page_size.toString().trim()
+      ) {
+        newSearchParams.set('page_size', newPagination.page_size.toString());
+      }
+
+      navigate(`?${newSearchParams.toString()}`, { replace: true });
+    }, 500),
+    [navigate]
+  );
+
+  // Immediate URL update for non-search filters (difficulty, ratings, tags, pagination)
+  const immediateUpdateURL = useCallback(
+    (newFilters, newPagination, newViewMode) => {
+      const currentParams = new URLSearchParams(window.location.search);
+      const newSearchParams = new URLSearchParams();
+
+      // Preserve compact_layout parameter
+      const compactLayoutParam = currentParams.get('compact_layout');
+      if (compactLayoutParam === 'true') {
+        newSearchParams.set('compact_layout', 'true');
+      }
+
+      // Preserve current view mode if not explicitly changing it
+      if (newViewMode) {
+        if (newViewMode === 'map') {
+          newSearchParams.set('view', 'map');
+        } else if (newViewMode === 'grid' && !isMobile) {
+          newSearchParams.set('view', 'grid');
+        }
+        // List view is default, so no need to set it
+      } else {
+        // Preserve existing view mode if not changing
+        const currentView = currentParams.get('view');
+        if (currentView === 'map') {
+          newSearchParams.set('view', 'map');
+        } else if (currentView === 'grid' && !isMobile) {
+          newSearchParams.set('view', 'grid');
+        }
+      }
+
+      if (newFilters.search_query && newFilters.search_query.trim()) {
+        newSearchParams.set('search', newFilters.search_query.trim());
+      }
+
+      if (newFilters.location && newFilters.location.trim()) {
+        newSearchParams.set('location', newFilters.location.trim());
+      }
+
+      if (newFilters.country && newFilters.country.trim()) {
+        newSearchParams.set('country', newFilters.country.trim());
+      }
+
+      if (newFilters.region && newFilters.region.trim()) {
+        newSearchParams.set('region', newFilters.region.trim());
+      }
+
+      if (newFilters.difficulty_code && newFilters.difficulty_code.trim()) {
+        newSearchParams.set('difficulty_code', newFilters.difficulty_code.trim());
+      }
+      if (newFilters.exclude_unspecified_difficulty) {
+        newSearchParams.set('exclude_unspecified_difficulty', 'true');
+      }
+
+      if (newFilters.min_rating && newFilters.min_rating.trim()) {
+        newSearchParams.set('min_rating', newFilters.min_rating.trim());
+      }
+
+      if (newFilters.tag_ids && Array.isArray(newFilters.tag_ids)) {
+        newFilters.tag_ids.forEach(tagId => {
+          if (tagId && tagId.toString && tagId.toString().trim()) {
+            newSearchParams.append('tag_ids', tagId.toString());
+          }
+        });
+      }
+
+      if (
+        newPagination.page &&
+        newPagination.page.toString &&
+        newPagination.page.toString().trim()
+      ) {
+        newSearchParams.set('page', newPagination.page.toString());
+      }
+      if (
+        newPagination.page_size &&
+        newPagination.page_size.toString &&
+        newPagination.page_size.toString().trim()
+      ) {
+        newSearchParams.set('page_size', newPagination.page_size.toString());
+      }
+
+      navigate(`?${newSearchParams.toString()}`, { replace: true });
+    },
+    [navigate]
+  );
+
+  // Update URL when pagination changes (immediate)
+  useEffect(() => {
+    immediateUpdateURL(filters, pagination, viewMode);
+  }, [pagination, immediateUpdateURL, filters, viewMode]);
+
+  // Debounced URL update for search inputs
+  useEffect(() => {
+    debouncedUpdateURL(filters, pagination, viewMode);
+  }, [
+    filters.name,
+    filters.search_query,
+    filters.country,
+    filters.region,
+    filters.location,
+    debouncedUpdateURL,
+  ]);
+
+  // Debounced search terms for query key
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      setDebouncedSearchTerms({
+        name: filters.name,
+        search_query: filters.search_query,
+        country: filters.country,
+        region: filters.region,
+        location: filters.location,
+      });
+    }, 1500);
+    return () => clearTimeout(timeoutId);
+  }, [filters.name, filters.search_query, filters.country, filters.region, filters.location]);
+
+  // Immediate URL update for non-search filters
+  useEffect(() => {
+    immediateUpdateURL(filters, pagination, viewMode);
+  }, [
+    filters.difficulty_code,
+    filters.exclude_unspecified_difficulty,
+    filters.min_rating,
+    filters.tag_ids,
+    filters.my_dive_sites,
+    immediateUpdateURL,
+  ]);
+
+  // Invalidate query when sorting changes to ensure fresh data
+  useEffect(() => {
+    queryClient.invalidateQueries(['dive-sites']);
+  }, [sortBy, sortOrder, queryClient]);
+
+  // Fetch available tags for filtering
+  const { data: availableTags } = useQuery(
+    ['available-tags'],
+    () => api.get('/api/v1/tags/').then(res => res.data),
+    {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    }
+  );
+
+  // Fetch dive sites
+  const {
+    data: diveSitesResponse,
+    isLoading,
+    error,
+  } = useQuery(
+    [
+      'dive-sites',
+      debouncedSearchTerms.search_query,
+      debouncedSearchTerms.country,
+      debouncedSearchTerms.region,
+      filters.difficulty_code,
+      filters.exclude_unspecified_difficulty,
+      filters.min_rating,
+      filters.tag_ids,
+      filters.my_dive_sites,
+      pagination.page,
+      pagination.page_size,
+      sortBy,
+      sortOrder,
+    ],
+    async () => {
+      const params = new URLSearchParams();
+
+      if (debouncedSearchTerms.search_query)
+        params.append('search', debouncedSearchTerms.search_query);
+      if (filters.difficulty_code) params.append('difficulty_code', filters.difficulty_code);
+      if (filters.exclude_unspecified_difficulty) {
+        params.append('exclude_unspecified_difficulty', 'true');
+      }
+      if (filters.min_rating) params.append('min_rating', filters.min_rating);
+      if (debouncedSearchTerms.country) params.append('country', debouncedSearchTerms.country);
+      if (debouncedSearchTerms.region) params.append('region', debouncedSearchTerms.region);
+
+      // Add sorting parameters directly from state (not from getSortParams)
+      if (sortBy) params.append('sort_by', sortBy);
+      if (sortOrder) params.append('sort_order', sortOrder);
+
+      if (filters.tag_ids && Array.isArray(filters.tag_ids)) {
+        filters.tag_ids.forEach(tagId => {
+          if (tagId && tagId.toString && tagId.toString().trim()) {
+            params.append('tag_ids', tagId.toString());
+          }
+        });
+      }
+      if (filters.my_dive_sites) params.append('my_dive_sites', 'true');
+
+      if (pagination.page && pagination.page.toString && pagination.page.toString().trim()) {
+        params.append('page', pagination.page.toString());
+      }
+      if (
+        pagination.page_size &&
+        pagination.page_size.toString &&
+        pagination.page_size.toString().trim()
+      ) {
+        params.append('page_size', pagination.page_size.toString());
+      }
+
+      const response = await api.get(`/api/v1/dive-sites/?${params.toString()}`);
+
+      // Extract pagination info from response headers
+      const paginationInfo = {
+        totalCount: parseInt(response.headers['x-total-count'] || '0'),
+        totalPages: parseInt(response.headers['x-total-pages'] || '0'),
+        currentPage: parseInt(response.headers['x-current-page'] || '1'),
+        pageSize: parseInt(response.headers['x-page-size'] || '25'),
+        hasNextPage: response.headers['x-has-next-page'] === 'true',
+        hasPrevPage: response.headers['x-has-prev-page'] === 'true',
+      };
+
+      // Extract match type information from response headers
+      const matchTypesHeader = response.headers['x-match-types'];
+      let matchTypes = {};
+
+      if (matchTypesHeader) {
+        try {
+          matchTypes = JSON.parse(matchTypesHeader);
+        } catch (e) {
+          console.warn('Failed to parse match types header:', e);
+        }
+      }
+
+      return {
+        data: response.data,
+        matchTypes: matchTypes,
+        paginationInfo: paginationInfo,
+      };
+    },
+    {
+      staleTime: 5 * 60 * 1000, // 5 minutes
+    }
+  );
+
+  // Handle the backend response structure - it returns a list directly, not an object with results
+  const diveSites = diveSitesResponse
+    ? { results: diveSitesResponse.data || diveSitesResponse }
+    : null;
+  const matchTypes = diveSitesResponse?.matchTypes || {};
+
+  // Extract total count from the main API response headers (filtered results)
+  const totalCount = diveSitesResponse?.paginationInfo?.totalCount || 0;
+  const totalPages = diveSitesResponse?.paginationInfo?.totalPages || 0;
+  const hasNextPage = diveSitesResponse?.paginationInfo?.hasNextPage || false;
+  const hasPrevPage = diveSitesResponse?.paginationInfo?.hasPrevPage || false;
+
+  // Extract all thumbnail URLs from the results to pass to the hook
+  const thumbnailUrls = useMemo(() => {
+    if (!diveSites?.results) return [];
+    return diveSites.results
+      .filter(site => site.thumbnail)
+      .map(site => ({
+        id: site.id, // We need an ID for the hook
+        url: site.thumbnail,
+        media_type: 'photo', // Assume photo for thumbnail
+      }));
+  }, [diveSites?.results]);
+
+  // Use hook to convert Flickr URLs
+  const { data: convertedFlickrUrls = new Map() } = useFlickrImages(thumbnailUrls);
+
+  // Helper to get the image URL
+  const getThumbnailUrl = site => {
+    if (!site.thumbnail) return null;
+    return convertedFlickrUrls.get(site.thumbnail) || site.thumbnail;
+  };
+
+  // Show toast notifications for rate limiting errors
+  useEffect(() => {
+    handleRateLimitError(error, 'dive sites', () => window.location.reload());
+  }, [error]);
+
+  useEffect(() => {
+    handleRateLimitError(availableTags?.error, 'available tags', () => window.location.reload());
+  }, [availableTags?.error]);
+
+  // handleTagChange function removed as it's now handled inline in the button onClick
+
+  const clearFilters = () => {
+    const clearedFilters = {
+      search_query: '',
+      difficulty_code: '',
+      exclude_unspecified_difficulty: false,
+      min_rating: '',
+      country: '',
+      region: '',
+      tag_ids: [],
+      my_dive_sites: false,
+    };
+    setFilters(clearedFilters);
+    setPagination(prev => ({ ...prev, page: 1 }));
+    resetSorting();
+    immediateUpdateURL(clearedFilters, { ...pagination, page: 1 }, viewMode);
+  };
+
+  const handlePageChange = newPage => {
+    setPagination(prev => ({ ...prev, page: newPage }));
+  };
+
+  const handlePageSizeChange = newPageSize => {
+    setPagination(prev => ({ ...prev, page: 1, page_size: newPageSize }));
+  };
+
+  const handleViewModeChange = newViewMode => {
+    // Prevent switching to grid view on mobile
+    if (isMobile && newViewMode === 'grid') {
+      return;
+    }
+
+    setViewMode(newViewMode);
+
+    // Update URL with new view mode
+    const urlParams = new URLSearchParams(window.location.search);
+    if (newViewMode === 'map') {
+      urlParams.set('view', 'map');
+    } else if (newViewMode === 'grid' && !isMobile) {
+      urlParams.set('view', 'grid');
+    } else {
+      urlParams.delete('view'); // Default to list view
+    }
+
+    // Update URL without triggering a page reload
+    navigate(`?${urlParams.toString()}`, { replace: true });
+  };
+
+  const handleQuickFilter = filterType => {
+    // Toggle the filter in the quickFilters array
+    setQuickFilters(prev => {
+      if (prev.includes(filterType)) {
+        // Remove filter if already selected
+        return prev.filter(f => f !== filterType);
+      } else {
+        // Add filter if not selected
+        return [...prev, filterType];
+      }
+    });
+
+    // Apply the quick filter changes
+    if (filterType === 'clear') {
+      setQuickFilters([]);
+      setFilters(prev => ({
+        ...prev,
+        difficulty_code: '',
+        search_query: '',
+        tag_ids: [],
+      }));
+    } else {
+      // Handle additive tag filters
+      const tagIdMap = {
+        wrecks: 8,
+        reefs: 14,
+        boat_dive: 4,
+        shore_dive: 13,
+      };
+
+      // Handle difficulty filters (these are mutually exclusive)
+      const difficultyFilters = ['beginner', 'intermediate', 'advanced'];
+
+      setFilters(prev => {
+        const newFilters = { ...prev };
+
+        if (difficultyFilters.includes(filterType)) {
+          // For difficulty, replace any existing difficulty
+          newFilters.difficulty_code = filterType;
+          newFilters.search_query = '';
+        } else if (tagIdMap[filterType]) {
+          // For tag filters, add/remove from existing tags
+          const currentTagIds = prev.tag_ids || [];
+          const tagId = tagIdMap[filterType];
+
+          if (currentTagIds.includes(tagId)) {
+            // Remove tag if already selected
+            newFilters.tag_ids = currentTagIds.filter(id => id !== tagId);
+          } else {
+            // Add tag if not selected
+            newFilters.tag_ids = [...currentTagIds, tagId];
+          }
+          newFilters.search_query = '';
+        }
+
+        return newFilters;
+      });
+    }
+
+    // Reset to first page
+    setPagination(prev => ({ ...prev, page: 1 }));
+  };
+
+  const getActiveFiltersCount = () => {
+    let count = 0;
+    if (filters.search_query) count++;
+    if (filters.country) count++;
+    if (filters.region) count++;
+    if (filters.difficulty_code) count++;
+    if (filters.exclude_unspecified_difficulty) count++;
+    if (filters.min_rating) count++;
+    if (filters.tag_ids && filters.tag_ids.length > 0) count++;
+    return count;
+  };
+
+  const handleFilterChange = (key, value) => {
+    setFilters(prev => ({ ...prev, [key]: value }));
+    setPagination(prev => ({ ...prev, page: 1 }));
+  };
+
+  const getMediaLink = site => {
+    let link = `/dive-sites/${site.id}?tab=media`;
+    if (site.thumbnail_id) {
+      link += `&mediaId=${site.thumbnail_id}`;
+      if (site.thumbnail_source) {
+        link += `&source=${site.thumbnail_source}`;
+      }
+      if (site.thumbnail_type) {
+        link += `&type=${site.thumbnail_type}`;
+      }
+    }
+    return link;
+  };
+
+  // Error handling is now done within the content area to preserve hero section
+
+  return (
+    <div className='min-h-screen bg-gray-50'>
+      {/* Mobile-First Responsive Container */}
+      <div className='max-w-[95vw] xl:max-w-[1600px] mx-auto px-3 sm:px-4 lg:px-6 xl:px-8 py-4 sm:py-6 lg:py-8'>
+        <PageHeader
+          title='Dive Sites'
+          breadcrumbItems={[{ label: 'Dive Sites' }]}
+          actions={[
+            {
+              label: 'Explore on Map',
+              icon: Compass,
+              onClick: () => navigate('/map?type=dive-sites'),
+              variant: 'primary',
+            },
+            {
+              label: 'Suggest a New Site',
+              icon: Plus,
+              onClick: () => {
+                if (!user) {
+                  window.alert('You need an account for this action.\nPlease Login or Register.');
+                  return;
+                }
+                navigate('/dive-sites/create');
+              },
+              variant: 'secondary',
+            },
+          ]}
+        />
+
+        {/* Desktop Search Bar - Only visible on desktop/tablet */}
+        {!isMobile && (
+          <DesktopSearchBar
+            searchValue={filters.search_query}
+            onSearchChange={value => handleFilterChange('search_query', value)}
+            onSearchSelect={selectedItem => {
+              handleFilterChange('search_query', selectedItem.name);
+            }}
+            data={diveSites?.results || []}
+            configType='diveSites'
+            placeholder='Search dive sites by name, country, region, or description...'
+          />
+        )}
+
+        {/* Responsive Filter Bar */}
+        {/* Always visible to support sticky behavior */}
+        <>
+          {isLoading ? (
+            <LoadingSkeleton type='filter' />
+          ) : (
+            <ResponsiveFilterBar
+              showFilters={showAdvancedFilters}
+              onToggleFilters={() => setShowAdvancedFilters(!showAdvancedFilters)}
+              onClearFilters={clearFilters}
+              activeFiltersCount={getActiveFiltersCount()}
+              filters={{ ...filters, availableTags, user }}
+              onFilterChange={handleFilterChange}
+              onQuickFilter={handleQuickFilter}
+              quickFilters={quickFilters}
+              variant='sticky'
+              showQuickFilters={true}
+              showAdvancedToggle={true}
+              searchQuery={filters.search_query}
+              onSearchChange={value => handleFilterChange('search_query', value)}
+              onSearchSubmit={() => {}}
+              // Add sorting props
+              sortBy={sortBy}
+              sortOrder={sortOrder}
+              sortOptions={getSortOptions('dive-sites')}
+              onSortChange={handleSortChange}
+              onReset={resetSorting}
+              viewMode={viewMode}
+              onViewModeChange={handleViewModeChange}
+              compactLayout={compactLayout}
+              onDisplayOptionChange={handleDisplayOptionChange}
+            />
+          )}
+        </>
+
+        {/* Map Section - Show immediately when in map view */}
+        {viewMode === 'map' && (
+          <div className='mb-8'>
+            {isLoading ? (
+              <LoadingSkeleton type='map' />
+            ) : (
+              <div className='bg-white rounded-lg shadow-md p-4 mb-6'>
+                <h2 className='text-xl font-semibold text-gray-900 mb-4'>
+                  Map view of filtered Dive Sites
+                </h2>
+                <div className='h-96 sm:h-[500px] lg:h-[600px] rounded-lg overflow-hidden border border-gray-200 bg-gray-50 flex items-center justify-center'>
+                  <Suspense
+                    fallback={
+                      <div className='flex flex-col items-center gap-2'>
+                        <div className='w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin'></div>
+                        <span>Loading Map...</span>
+                      </div>
+                    }
+                  >
+                    <DiveSitesMap
+                      data-testid='dive-sites-map'
+                      diveSites={diveSites?.results || []}
+                    />
+                  </Suspense>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+        {/* Content Section */}
+        <div className={`content-section ${mobileStyles.mobileMargin}`}>
+          {/* Pagination Controls */}
+          {isLoading ? (
+            <LoadingSkeleton type='pagination' className='mb-2 sm:mb-6 lg:mb-8' />
+          ) : (
+            <Pagination
+              currentPage={pagination.page}
+              pageSize={pagination.page_size}
+              totalCount={totalCount}
+              itemName='dive sites'
+              onPageChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+              className='mb-2 sm:mb-6 lg:mb-8'
+            />
+          )}
+
+          {/* Results Section - Mobile-first responsive design */}
+          {error ? (
+            <ErrorPage error={error} onRetry={() => window.location.reload()} />
+          ) : isLoading ? (
+            <LoadingSkeleton
+              type='card'
+              count={pagination.page_size || 25}
+              className={`space-y-2 sm:space-y-3 ${compactLayout ? 'view-mode-compact' : ''}`}
+            />
+          ) : (
+            <>
+              {/* Dive Sites List - Show when data is available and viewMode is list */}
+              {viewMode === 'list' && diveSites?.results && (
+                <div
+                  data-testid='dive-sites-list'
+                  className={`space-y-3 sm:space-y-4 ${compactLayout ? 'view-mode-compact' : ''}`}
+                >
+                  {diveSites.results.map(site => (
+                    <DiveSiteListCard
+                      key={site.id}
+                      site={site}
+                      compactLayout={compactLayout}
+                      getMediaLink={getMediaLink}
+                      getThumbnailUrl={getThumbnailUrl}
+                      handleFilterChange={handleFilterChange}
+                    />
+                  ))}
+                </div>
+              )}
+
+              {/* Dive Sites Grid */}
+              {viewMode === 'grid' && !isMobile && diveSites?.results && (
+                <div
+                  className={`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 ${compactLayout ? 'view-mode-compact' : ''}`}
+                >
+                  {diveSites.results.map(site => (
+                    <DiveSiteGridCard
+                      key={site.id}
+                      site={site}
+                      compactLayout={compactLayout}
+                      getMediaLink={getMediaLink}
+                      getThumbnailUrl={getThumbnailUrl}
+                      handleFilterChange={handleFilterChange}
+                    />
+                  ))}
+                </div>
+              )}
+              {/* Close content-section */}
+            </>
+          )}
+
+          {/* No Results Messages - Show when no dive sites found */}
+          {!isLoading &&
+            diveSites?.results &&
+            diveSites.results.length === 0 &&
+            viewMode !== 'map' && (
+              <EmptyState
+                onClearFilters={clearFilters}
+                actionLink='/dive-sites/create'
+                actionText='Add Dive Site'
+                message={
+                  filters.search_query.trim()
+                    ? `No dive sites found matching "${filters.search_query}". Try different terms or add this site to our database.`
+                    : 'No dive sites found matching your criteria. Try adjusting your filters.'
+                }
+              />
+            )}
+
+          {/* Bottom Pagination Controls */}
+          {!isLoading && diveSites?.results && diveSites.results.length > 0 && (
+            <Pagination
+              currentPage={pagination.page}
+              pageSize={pagination.page_size}
+              totalCount={totalCount}
+              itemName='dive sites'
+              onPageChange={handlePageChange}
+              onPageSizeChange={handlePageSizeChange}
+              className='mt-6 sm:mt-8'
+            />
+          )}
+        </div>
+        {/* Close content-section */}
+      </div>
+      {/* Close mobile-first responsive container */}
+      {/* Phase 5 Mobile Optimization Summary */}
+      {/*
+        ✅ Mobile-First Responsive Design Implemented:
+        - Touch-friendly controls with 44px minimum height
+        - Responsive padding and margins (p-3 sm:p-4 lg:p-6)
+        - Mobile-optimized text sizes (text-xs sm:text-sm lg:text-base)
+        - Flexible layouts (flex-col sm:flex-row)
+        - Mobile-centered content with desktop justification
+        - Full-width mobile elements with auto desktop sizing
+        - Touch manipulation and active states for better UX
+        - Progressive disclosure for mobile information density
+      */}
+    </div>
+  );
+};
+
+export default DiveSites;
diff --git a/frontend/src/pages/DiveTrips.js b/frontend/src/pages/DiveTrips.jsx
similarity index 100%
rename from frontend/src/pages/DiveTrips.js
rename to frontend/src/pages/DiveTrips.jsx
diff --git a/frontend/src/pages/Dives.js b/frontend/src/pages/Dives.jsx
similarity index 89%
rename from frontend/src/pages/Dives.js
rename to frontend/src/pages/Dives.jsx
index 33d8d4e..da9817d 100644
--- a/frontend/src/pages/Dives.js
+++ b/frontend/src/pages/Dives.jsx
@@ -24,7 +24,7 @@ import {
   Globe,
   MapPin,
 } from 'lucide-react';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { toast } from 'react-hot-toast';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
@@ -32,7 +32,6 @@ import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-do
 import api from '../api';
 import Breadcrumbs from '../components/Breadcrumbs';
 import DesktopSearchBar from '../components/DesktopSearchBar';
-import DivesMap from '../components/DivesMap';
 import EmptyState from '../components/EmptyState';
 import ErrorPage from '../components/ErrorPage';
 import FuzzySearchInput from '../components/FuzzySearchInput';
@@ -43,6 +42,7 @@ import MatchTypeBadge from '../components/MatchTypeBadge';
 import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
+import Pagination from '../components/ui/Pagination';
 import { useAuth } from '../contexts/AuthContext';
 import { useCompactLayout } from '../hooks/useCompactLayout';
 import usePageTitle from '../hooks/usePageTitle';
@@ -62,6 +62,8 @@ const getDiveSlug = dive => {
   return slugify(`${slugText}-${datePart}-dive-${dive.id}`);
 };
 
+const DivesMap = lazy(() => import('../components/DivesMap'));
+
 const Dives = () => {
   const { user, isAdmin } = useAuth();
   const navigate = useNavigate();
@@ -1005,64 +1007,15 @@ const Dives = () => {
       )}
 
       {/* Pagination Controls */}
-      <div className='mb-6 sm:mb-8'>
-        <div className='bg-white rounded-lg shadow-md p-4 sm:p-6'>
-          <div className='flex flex-col lg:flex-row justify-between items-center gap-4'>
-            {/* Pagination Controls */}
-            <div className='flex flex-col sm:flex-row items-center gap-3 sm:gap-4'>
-              {/* Page Size Selection */}
-              <div className='flex items-center gap-2'>
-                <label className='text-sm font-medium text-gray-700'>Show:</label>
-                <select
-                  value={pagination.per_page}
-                  onChange={e => handlePageSizeChange(parseInt(e.target.value))}
-                  className='px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-                >
-                  <option value={25}>25</option>
-                  <option value={50}>50</option>
-                  <option value={100}>100</option>
-                </select>
-                <span className='text-sm text-gray-600'>per page</span>
-              </div>
-
-              {/* Pagination Info */}
-              {totalCount !== undefined && totalCount !== null && (
-                <div className='text-xs sm:text-sm text-gray-600 text-center sm:text-left'>
-                  Showing {Math.max(1, (pagination.page - 1) * pagination.per_page + 1)} to{' '}
-                  {Math.min(pagination.page * pagination.per_page, totalCount)} of {totalCount}{' '}
-                  dives
-                </div>
-              )}
-
-              {/* Pagination Navigation */}
-              {totalCount !== undefined && totalCount !== null && totalCount > 0 && (
-                <div className='flex items-center gap-2'>
-                  <button
-                    onClick={() => handlePageChange(pagination.page - 1)}
-                    disabled={pagination.page <= 1}
-                    className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-                  >
-                    <ChevronLeft className='h-4 w-4' />
-                  </button>
-
-                  <span className='text-xs sm:text-sm text-gray-700'>
-                    Page {pagination.page} of{' '}
-                    {Math.max(1, Math.ceil(totalCount / pagination.per_page))}
-                  </span>
-
-                  <button
-                    onClick={() => handlePageChange(pagination.page + 1)}
-                    disabled={pagination.page >= Math.ceil(totalCount / pagination.per_page)}
-                    className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-                  >
-                    <ChevronRight className='h-4 w-4' />
-                  </button>
-                </div>
-              )}
-            </div>
-          </div>
-        </div>
-      </div>
+      <Pagination
+        currentPage={pagination.page}
+        pageSize={pagination.per_page}
+        totalCount={totalCount}
+        itemName='dives'
+        onPageChange={handlePageChange}
+        onPageSizeChange={handlePageSizeChange}
+        className='mb-6 sm:mb-8'
+      />
 
       {/* Import Modal */}
       <ImportDivesModal
@@ -1082,13 +1035,22 @@ const Dives = () => {
           <div className='animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600'></div>
         </div>
       ) : viewMode === 'map' ? (
-        <div className='mb-6 sm:mb-8'>
-          <DivesMap
-            key={`dives-${dives?.length || 0}-${JSON.stringify(filters)}`}
-            dives={dives || []}
-            viewport={viewport}
-            onViewportChange={setViewport}
-          />
+        <div className='mb-6 sm:mb-8 bg-gray-50 flex items-center justify-center min-h-[400px] rounded-lg border border-gray-200'>
+          <Suspense
+            fallback={
+              <div className='flex flex-col items-center gap-2'>
+                <div className='w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin'></div>
+                <span>Loading Map...</span>
+              </div>
+            }
+          >
+            <DivesMap
+              key={`dives-${dives?.length || 0}-${JSON.stringify(filters)}`}
+              dives={dives || []}
+              viewport={viewport}
+              onViewportChange={setViewport}
+            />
+          </Suspense>
         </div>
       ) : (
         <>
@@ -1444,13 +1406,22 @@ const Dives = () => {
 
           {/* Dives Map */}
           {viewMode === 'map' && (
-            <div className='h-96 rounded-lg overflow-hidden border border-gray-200'>
-              <DivesMap
-                key={`dives-${dives?.length || 0}-${JSON.stringify(filters)}`}
-                dives={dives || []}
-                viewport={viewport}
-                onViewportChange={setViewport}
-              />
+            <div className='h-96 rounded-lg overflow-hidden border border-gray-200 bg-gray-50 flex items-center justify-center'>
+              <Suspense
+                fallback={
+                  <div className='flex flex-col items-center gap-2'>
+                    <div className='w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin'></div>
+                    <span>Loading Map...</span>
+                  </div>
+                }
+              >
+                <DivesMap
+                  key={`dives-${dives?.length || 0}-${JSON.stringify(filters)}`}
+                  dives={dives || []}
+                  viewport={viewport}
+                  onViewportChange={setViewport}
+                />
+              </Suspense>
             </div>
           )}
         </>
@@ -1467,64 +1438,15 @@ const Dives = () => {
 
       {/* Bottom Pagination Controls */}
       {dives && dives.length > 0 && (
-        <div className='mt-6 sm:mt-8'>
-          <div className='bg-white rounded-lg shadow-md p-4 sm:p-6'>
-            <div className='flex flex-col lg:flex-row justify-between items-center gap-4'>
-              {/* Pagination Controls */}
-              <div className='flex flex-col sm:flex-row items-center gap-3 sm:gap-4'>
-                {/* Page Size Selection */}
-                <div className='flex items-center gap-2'>
-                  <label className='text-sm font-medium text-gray-700'>Show:</label>
-                  <select
-                    value={pagination.per_page}
-                    onChange={e => handlePageSizeChange(parseInt(e.target.value))}
-                    className='px-3 py-1 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500'
-                  >
-                    <option value={25}>25</option>
-                    <option value={50}>50</option>
-                    <option value={100}>100</option>
-                  </select>
-                  <span className='text-sm text-gray-600'>per page</span>
-                </div>
-
-                {/* Pagination Info */}
-                {totalCount !== undefined && totalCount !== null && (
-                  <div className='text-xs sm:text-sm text-gray-600 text-center sm:text-left'>
-                    Showing {Math.max(1, (pagination.page - 1) * pagination.per_page + 1)} to{' '}
-                    {Math.min(pagination.page * pagination.per_page, totalCount)} of {totalCount}{' '}
-                    dives
-                  </div>
-                )}
-
-                {/* Pagination Navigation */}
-                {totalCount !== undefined && totalCount !== null && totalCount > 0 && (
-                  <div className='flex items-center gap-2'>
-                    <button
-                      onClick={() => handlePageChange(pagination.page - 1)}
-                      disabled={pagination.page <= 1}
-                      className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-                    >
-                      <ChevronLeft className='h-4 w-4' />
-                    </button>
-
-                    <span className='text-xs sm:text-sm text-gray-700'>
-                      Page {pagination.page} of{' '}
-                      {Math.max(1, Math.ceil(totalCount / pagination.per_page))}
-                    </span>
-
-                    <button
-                      onClick={() => handlePageChange(pagination.page + 1)}
-                      disabled={pagination.page >= Math.ceil(totalCount / pagination.per_page)}
-                      className='px-3 py-1 border border-gray-300 rounded-md text-sm disabled:opacity-50 disabled:cursor-not-allowed hover:bg-gray-50'
-                    >
-                      <ChevronRight className='h-4 w-4' />
-                    </button>
-                  </div>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
+        <Pagination
+          currentPage={pagination.page}
+          pageSize={pagination.per_page}
+          totalCount={totalCount}
+          itemName='dives'
+          onPageChange={handlePageChange}
+          onPageSizeChange={handlePageSizeChange}
+          className='mt-6 sm:mt-8'
+        />
       )}
     </div>
   );
diff --git a/frontend/src/pages/DivingCenterDetail.js b/frontend/src/pages/DivingCenterDetail.jsx
similarity index 100%
rename from frontend/src/pages/DivingCenterDetail.js
rename to frontend/src/pages/DivingCenterDetail.jsx
diff --git a/frontend/src/pages/DivingCenters.js b/frontend/src/pages/DivingCenters.jsx
similarity index 98%
rename from frontend/src/pages/DivingCenters.js
rename to frontend/src/pages/DivingCenters.jsx
index d8a1c01..014dcc8 100644
--- a/frontend/src/pages/DivingCenters.js
+++ b/frontend/src/pages/DivingCenters.jsx
@@ -13,14 +13,13 @@ import {
   Grid,
   Compass,
 } from 'lucide-react';
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { toast } from 'react-hot-toast';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 
 import api from '../api';
 import DivingCentersDesktopSearchBar from '../components/DivingCentersDesktopSearchBar';
-import DivingCentersMap from '../components/DivingCentersMap';
 import DivingCentersResponsiveFilterBar from '../components/DivingCentersResponsiveFilterBar';
 import ErrorPage from '../components/ErrorPage';
 import HeroSection from '../components/HeroSection';
@@ -28,6 +27,7 @@ import LoadingSkeleton from '../components/LoadingSkeleton';
 import MaskedEmail from '../components/MaskedEmail';
 import MatchTypeBadge from '../components/MatchTypeBadge';
 import RateLimitError from '../components/RateLimitError';
+import Pagination from '../components/ui/Pagination';
 import { useAuth } from '../contexts/AuthContext';
 import { useCompactLayout } from '../hooks/useCompactLayout';
 import usePageTitle from '../hooks/usePageTitle';
@@ -44,6 +44,8 @@ import { getSortOptions } from '../utils/sortOptions';
 // Use extractErrorMessage from api.js
 const getErrorMessage = error => extractErrorMessage(error, 'An error occurred');
 
+const DivingCentersMap = lazy(() => import('../components/DivingCentersMap'));
+
 const DivingCenters = () => {
   const { user } = useAuth();
   const navigate = useNavigate();
@@ -596,13 +598,22 @@ const DivingCenters = () => {
                 <h2 className='text-xl font-semibold text-gray-900 mb-4'>
                   Map view of filtered Diving Centers
                 </h2>
-                <div className='h-96 sm:h-[500px] lg:h-[600px] rounded-lg overflow-hidden border border-gray-200'>
-                  <DivingCentersMap
-                    divingCenters={(divingCenters || []).map(center => ({
-                      ...center,
-                      id: center.id.toString(),
-                    }))}
-                  />
+                <div className='h-96 sm:h-[500px] lg:h-[600px] rounded-lg overflow-hidden border border-gray-200 bg-gray-50 flex items-center justify-center'>
+                  <Suspense
+                    fallback={
+                      <div className='flex flex-col items-center gap-2'>
+                        <div className='w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin'></div>
+                        <span>Loading Map...</span>
+                      </div>
+                    }
+                  >
+                    <DivingCentersMap
+                      divingCenters={(divingCenters || []).map(center => ({
+                        ...center,
+                        id: center.id.toString(),
+                      }))}
+                    />
+                  </Suspense>
                 </div>
               </div>
             )}
diff --git a/frontend/src/pages/DivingOrganizationsPage.js b/frontend/src/pages/DivingOrganizationsPage.jsx
similarity index 100%
rename from frontend/src/pages/DivingOrganizationsPage.js
rename to frontend/src/pages/DivingOrganizationsPage.jsx
diff --git a/frontend/src/pages/DivingTagsPage.js b/frontend/src/pages/DivingTagsPage.jsx
similarity index 100%
rename from frontend/src/pages/DivingTagsPage.js
rename to frontend/src/pages/DivingTagsPage.jsx
diff --git a/frontend/src/pages/EditDive.js b/frontend/src/pages/EditDive.jsx
similarity index 100%
rename from frontend/src/pages/EditDive.js
rename to frontend/src/pages/EditDive.jsx
diff --git a/frontend/src/pages/EditDiveSite.js b/frontend/src/pages/EditDiveSite.jsx
similarity index 100%
rename from frontend/src/pages/EditDiveSite.js
rename to frontend/src/pages/EditDiveSite.jsx
diff --git a/frontend/src/pages/EditDivingCenter.js b/frontend/src/pages/EditDivingCenter.jsx
similarity index 100%
rename from frontend/src/pages/EditDivingCenter.js
rename to frontend/src/pages/EditDivingCenter.jsx
diff --git a/frontend/src/pages/ForgotPassword.js b/frontend/src/pages/ForgotPassword.jsx
similarity index 100%
rename from frontend/src/pages/ForgotPassword.js
rename to frontend/src/pages/ForgotPassword.jsx
diff --git a/frontend/src/pages/Help.js b/frontend/src/pages/Help.jsx
similarity index 100%
rename from frontend/src/pages/Help.js
rename to frontend/src/pages/Help.jsx
diff --git a/frontend/src/pages/Home.js b/frontend/src/pages/Home.jsx
similarity index 100%
rename from frontend/src/pages/Home.js
rename to frontend/src/pages/Home.jsx
diff --git a/frontend/src/pages/IndependentMapView.js b/frontend/src/pages/IndependentMapView.jsx
similarity index 96%
rename from frontend/src/pages/IndependentMapView.js
rename to frontend/src/pages/IndependentMapView.jsx
index dd0fd88..8653035 100644
--- a/frontend/src/pages/IndependentMapView.js
+++ b/frontend/src/pages/IndependentMapView.jsx
@@ -17,7 +17,7 @@ import {
   Info,
   Waves,
 } from 'lucide-react';
-import { useState, useEffect, useCallback, useMemo } from 'react';
+import { useState, useEffect, useCallback, useMemo, lazy, Suspense } from 'react';
 import { useGeolocated } from 'react-geolocated';
 import toast from 'react-hot-toast';
 import { useQueryClient } from 'react-query';
@@ -25,7 +25,6 @@ import { useSearchParams, useNavigate } from 'react-router-dom';
 
 import api from '../api';
 import ErrorPage from '../components/ErrorPage';
-import LeafletMapView from '../components/LeafletMapView';
 import MapLayersPanel from '../components/MapLayersPanel';
 import Modal from '../components/ui/Modal';
 import UnifiedMapFilters from '../components/UnifiedMapFilters';
@@ -35,6 +34,8 @@ import usePageTitle from '../hooks/usePageTitle';
 import { useResponsive, useResponsiveScroll } from '../hooks/useResponsive';
 import { useViewportData } from '../hooks/useViewportData';
 
+const LeafletMapView = lazy(() => import('../components/LeafletMapView'));
+
 const IndependentMapView = () => {
   // Set page title
   usePageTitle('Divemap - Map View');
@@ -1232,33 +1233,42 @@ const IndependentMapView = () => {
 
           {/* Map area */}
           <div
-            className={`${isMobile ? 'w-full h-full' : 'flex-1 min-h-0'} relative overflow-hidden map-container`}
+            className={`${isMobile ? 'w-full h-full' : 'flex-1 min-h-0'} relative overflow-hidden map-container bg-gray-50 flex items-center justify-center`}
           >
-            <LeafletMapView
-              data={mapData}
-              selectedEntityType={selectedEntityType}
-              viewport={viewport}
-              onViewportChange={handleViewportChange}
-              popupInfo={popupInfo}
-              setPopupInfo={setPopupInfo}
-              popupPosition={popupPosition}
-              setPopupPosition={setPopupPosition}
-              isLoading={isLoading}
-              error={error}
-              selectedLayer={selectedLayer}
-              onLayerChange={handleLayerChange}
-              onMapInstance={setMapInstance}
-              resetTrigger={resetTrigger}
-              windOverlayEnabled={windOverlayEnabled}
-              setWindOverlayEnabled={setWindOverlayEnabled}
-              windAnimationEnabled={windAnimationEnabled}
-              setWindAnimationEnabled={setWindAnimationEnabled}
-              windDateTime={windDateTime}
-              setWindDateTime={setWindDateTime}
-              onWindFetchingChange={setIsWindFetching}
-              showWindLegend={showWindLegend}
-              setShowWindLegend={setShowWindLegend}
-            />
+            <Suspense
+              fallback={
+                <div className='flex flex-col items-center gap-4 text-blue-600'>
+                  <div className='w-12 h-12 border-4 border-current border-t-transparent rounded-full animate-spin'></div>
+                  <span className='font-medium'>Loading Map Application...</span>
+                </div>
+              }
+            >
+              <LeafletMapView
+                data={mapData}
+                selectedEntityType={selectedEntityType}
+                viewport={viewport}
+                onViewportChange={handleViewportChange}
+                popupInfo={popupInfo}
+                setPopupInfo={setPopupInfo}
+                popupPosition={popupPosition}
+                setPopupPosition={setPopupPosition}
+                isLoading={isLoading}
+                error={error}
+                selectedLayer={selectedLayer}
+                onLayerChange={handleLayerChange}
+                onMapInstance={setMapInstance}
+                resetTrigger={resetTrigger}
+                windOverlayEnabled={windOverlayEnabled}
+                setWindOverlayEnabled={setWindOverlayEnabled}
+                windAnimationEnabled={windAnimationEnabled}
+                setWindAnimationEnabled={setWindAnimationEnabled}
+                windDateTime={windDateTime}
+                setWindDateTime={setWindDateTime}
+                onWindFetchingChange={setIsWindFetching}
+                showWindLegend={showWindLegend}
+                setShowWindLegend={setShowWindLegend}
+              />
+            </Suspense>
 
             {/* Layers panel */}
             <MapLayersPanel
diff --git a/frontend/src/pages/Login.js b/frontend/src/pages/Login.jsx
similarity index 100%
rename from frontend/src/pages/Login.js
rename to frontend/src/pages/Login.jsx
diff --git a/frontend/src/pages/Messages.js b/frontend/src/pages/Messages.jsx
similarity index 100%
rename from frontend/src/pages/Messages.js
rename to frontend/src/pages/Messages.jsx
diff --git a/frontend/src/pages/NotFound.js b/frontend/src/pages/NotFound.jsx
similarity index 100%
rename from frontend/src/pages/NotFound.js
rename to frontend/src/pages/NotFound.jsx
diff --git a/frontend/src/pages/NotificationPreferences.js b/frontend/src/pages/NotificationPreferences.jsx
similarity index 100%
rename from frontend/src/pages/NotificationPreferences.js
rename to frontend/src/pages/NotificationPreferences.jsx
diff --git a/frontend/src/pages/Notifications.js b/frontend/src/pages/Notifications.jsx
similarity index 100%
rename from frontend/src/pages/Notifications.js
rename to frontend/src/pages/Notifications.jsx
diff --git a/frontend/src/pages/Privacy.js b/frontend/src/pages/Privacy.jsx
similarity index 100%
rename from frontend/src/pages/Privacy.js
rename to frontend/src/pages/Privacy.jsx
diff --git a/frontend/src/pages/Profile.js b/frontend/src/pages/Profile.jsx
similarity index 100%
rename from frontend/src/pages/Profile.js
rename to frontend/src/pages/Profile.jsx
diff --git a/frontend/src/pages/Register.js b/frontend/src/pages/Register.jsx
similarity index 100%
rename from frontend/src/pages/Register.js
rename to frontend/src/pages/Register.jsx
diff --git a/frontend/src/pages/ResetPassword.js b/frontend/src/pages/ResetPassword.jsx
similarity index 100%
rename from frontend/src/pages/ResetPassword.js
rename to frontend/src/pages/ResetPassword.jsx
diff --git a/frontend/src/pages/Resubscribe.js b/frontend/src/pages/Resubscribe.jsx
similarity index 100%
rename from frontend/src/pages/Resubscribe.js
rename to frontend/src/pages/Resubscribe.jsx
diff --git a/frontend/src/pages/RouteDetail.js b/frontend/src/pages/RouteDetail.jsx
similarity index 100%
rename from frontend/src/pages/RouteDetail.js
rename to frontend/src/pages/RouteDetail.jsx
diff --git a/frontend/src/pages/Tools.js b/frontend/src/pages/Tools.jsx
similarity index 100%
rename from frontend/src/pages/Tools.js
rename to frontend/src/pages/Tools.jsx
diff --git a/frontend/src/pages/TripDetail.js b/frontend/src/pages/TripDetail.jsx
similarity index 100%
rename from frontend/src/pages/TripDetail.js
rename to frontend/src/pages/TripDetail.jsx
diff --git a/frontend/src/pages/Unsubscribe.js b/frontend/src/pages/Unsubscribe.jsx
similarity index 100%
rename from frontend/src/pages/Unsubscribe.js
rename to frontend/src/pages/Unsubscribe.jsx
diff --git a/frontend/src/pages/UserProfile.js b/frontend/src/pages/UserProfile.jsx
similarity index 100%
rename from frontend/src/pages/UserProfile.js
rename to frontend/src/pages/UserProfile.jsx
diff --git a/frontend/src/pages/VerifyEmail.js b/frontend/src/pages/VerifyEmail.jsx
similarity index 100%
rename from frontend/src/pages/VerifyEmail.js
rename to frontend/src/pages/VerifyEmail.jsx
diff --git a/frontend/src/services/auth.js b/frontend/src/services/auth.jsx
similarity index 100%
rename from frontend/src/services/auth.js
rename to frontend/src/services/auth.jsx
diff --git a/frontend/src/utils/TankBuoyancy.js b/frontend/src/utils/TankBuoyancy.jsx
similarity index 100%
rename from frontend/src/utils/TankBuoyancy.js
rename to frontend/src/utils/TankBuoyancy.jsx
diff --git a/frontend/src/utils/flickrHelpers.js b/frontend/src/utils/flickrHelpers.jsx
similarity index 100%
rename from frontend/src/utils/flickrHelpers.js
rename to frontend/src/utils/flickrHelpers.jsx
diff --git a/frontend/src/utils/fuzzySearch.js b/frontend/src/utils/fuzzySearch.jsx
similarity index 100%
rename from frontend/src/utils/fuzzySearch.js
rename to frontend/src/utils/fuzzySearch.jsx
diff --git a/frontend/src/utils/textHelpers.js b/frontend/src/utils/textHelpers.jsx
similarity index 100%
rename from frontend/src/utils/textHelpers.js
rename to frontend/src/utils/textHelpers.jsx
diff --git a/frontend/vite.config.js b/frontend/vite.config.mjs
similarity index 87%
rename from frontend/vite.config.js
rename to frontend/vite.config.mjs
index 808d6de..ed15362 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.mjs
@@ -3,6 +3,7 @@ import react from '@vitejs/plugin-react';
 import svgr from 'vite-plugin-svgr';
 import { VitePWA } from 'vite-plugin-pwa';
 import path from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 export default defineConfig({
   plugins: [
@@ -16,6 +17,12 @@ export default defineConfig({
       },
       include: '**/*.svg',
     }),
+    visualizer({
+      open: false,
+      filename: 'bundle-stats.html',
+      gzipSize: true,
+      brotliSize: true,
+    }),
     VitePWA({
       registerType: 'prompt',
       devOptions: {
@@ -112,7 +119,7 @@ export default defineConfig({
         ]
       },
       workbox: {
-        maximumFileSizeToCacheInBytes: 4 * 1024 * 1024, // 4MB to match the large vendor chunk
+        maximumFileSizeToCacheInBytes: 3 * 1024 * 1024, // Reduced from 4MB to 3MB as chunks are now split
         // Exclude non-SPA routes from navigation fallback
         navigateFallbackDenylist: [
           /^\/robots\.txt$/,
@@ -193,18 +200,27 @@ export default defineConfig({
   },
   build: {
     outDir: 'dist',
+    // Increase chunk size limit slightly to avoid unnecessary warnings
+    chunkSizeWarningLimit: 1000,
     rollupOptions: {
       output: {
+        // Group small icon and utility files into a single stable chunk
+        // to reduce the number of network requests (the "micro-chunk" problem).
         manualChunks(id) {
           if (id.includes('node_modules')) {
-            // Put ALL node_modules into a single vendor chunk
-            // This is the safest strategy to prevent circular dependencies and
-            // initialization order issues (e.g. "Cannot read properties of undefined (reading 'forwardRef')")
-            return 'vendor';
+            // Group all icons and small common utilities together
+            if (
+              id.includes('lucide-react') || 
+              id.includes('@ant-design/icons') || 
+              id.includes('lodash') ||
+              id.includes('date-fns')
+            ) {
+              return 'assets-vendor';
+            }
           }
-        },
-      },
-    },
+        }
+      }
+    }
   },
   resolve: {
     alias: {
@@ -212,19 +228,7 @@ export default defineConfig({
     },
     dedupe: ['react', 'react-dom'],
   },
-  // Ensure .js files with JSX are handled (until renamed)
-  esbuild: {
-    loader: 'jsx',
-    include: /src\/.*\.jsx?$/,
-    exclude: [],
-  },
-  optimizeDeps: {
-    esbuildOptions: {
-      loader: {
-        '.js': 'jsx',
-      },
-    },
-  },
+
   test: {
     globals: true,
     environment: 'jsdom',