diff --git a/frontend/src/components/DiveSiteCard.jsx b/frontend/src/components/DiveSiteCard.jsx
index c00fbe4..8f49d8e 100644
--- a/frontend/src/components/DiveSiteCard.jsx
+++ b/frontend/src/components/DiveSiteCard.jsx
@@ -17,7 +17,7 @@ export const DiveSiteListCard = ({
 }) => {
   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'}`}
+      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] 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 && (
@@ -245,7 +245,7 @@ export const DiveSiteGridCard = ({
   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'>
+    <div className='dive-item bg-white rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 overflow-hidden'>
       {site.thumbnail && (
         <Link
           to={getMediaLink(site)}
diff --git a/frontend/src/components/DivingCentersDesktopSearchBar.jsx b/frontend/src/components/DivingCentersDesktopSearchBar.jsx
index d7d063e..c6e884a 100644
--- a/frontend/src/components/DivingCentersDesktopSearchBar.jsx
+++ b/frontend/src/components/DivingCentersDesktopSearchBar.jsx
@@ -15,7 +15,7 @@ const DivingCentersDesktopSearchBar = ({
   return (
     <div
       data-testid='diving-centers-desktop-search-bar'
-      className={`p-4 border-b border-gray-200 ${className}`}
+      className={`px-3 sm:px-4 mb-3 sm:mb-4 ${className}`}
     >
       <div className='max-w-2xl mx-auto'>
         <FuzzySearchInput
diff --git a/frontend/src/components/DivingCentersResponsiveFilterBar.jsx b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
index 614cb29..2fedc9c 100644
--- a/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
+++ b/frontend/src/components/DivingCentersResponsiveFilterBar.jsx
@@ -168,30 +168,30 @@ const DivingCentersResponsiveFilterBar = ({
         <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 overflow-x-auto'>
+            <div className='flex items-center gap-2 sm:ml-2 w-full sm:w-auto justify-center sm:justify-end overflow-x-auto'>
               {reviewsEnabled && (
                 <button
                   onClick={() => onQuickFilter('min_rating')}
-                  className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors ${
+                  className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
                     quickFilter === 'min_rating'
-                      ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                      : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                      ? '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'
                   }`}
                 >
-                  <Star className='h-4 w-4 inline mr-1' />
-                  4+ Stars
+                  <Star className='h-4 w-4' />
+                  <span>4+ Stars</span>
                 </button>
               )}
               <button
                 onClick={() => onQuickFilter('country')}
-                className={`flex-shrink-0 px-3 py-2 text-sm rounded-lg transition-colors ${
+                className={`flex items-center gap-1 px-3 py-2 text-sm rounded-md transition-colors ${
                   quickFilter === 'country'
-                    ? 'bg-blue-100 text-blue-700 border border-blue-300'
-                    : 'bg-gray-100 text-gray-600 border border-gray-200 hover:bg-gray-200'
+                    ? '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'
                 }`}
               >
-                <MapPin className='h-4 w-4 inline mr-1' />
-                Greece
+                <MapPin className='h-4 w-4' />
+                <span>Greece</span>
               </button>
             </div>
           )}
diff --git a/frontend/src/components/PageHeader.jsx b/frontend/src/components/PageHeader.jsx
index 845e4c7..fad1c7d 100644
--- a/frontend/src/components/PageHeader.jsx
+++ b/frontend/src/components/PageHeader.jsx
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
 import Breadcrumbs from './Breadcrumbs';
 
@@ -9,16 +8,29 @@ import Breadcrumbs from './Breadcrumbs';
  * A functional header for internal utility pages (Dives, Dive Sites, etc.)
  * that replaces marketing-heavy heroes.
  */
-const PageHeader = ({ title, breadcrumbItems = [], actions = [], className = '' }) => {
+const PageHeader = ({
+  title,
+  titleIcon: TitleIcon,
+  breadcrumbItems = [],
+  actions = [],
+  className = '',
+}) => {
   return (
     <div className={`mb-8 ${className}`}>
       {/* Navigation Context */}
-      {breadcrumbItems.length > 0 && <Breadcrumbs items={breadcrumbItems} />}
+      {breadcrumbItems.length > 0 && (
+        <div className='mb-3 sm:mb-4'>
+          <Breadcrumbs items={breadcrumbItems} />
+        </div>
+      )}
 
       <div className='flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6'>
         {/* Title Group */}
         <div className='flex-1 min-w-0'>
-          <h1 className='text-3xl font-bold text-gray-900 tracking-tight'>{title}</h1>
+          <h1 className='text-3xl font-bold text-gray-900 tracking-tight flex items-center gap-3'>
+            {TitleIcon && <TitleIcon className='w-7 h-7 text-gray-700' aria-hidden='true' />}
+            <span>{title}</span>
+          </h1>
         </div>
 
         {/* Action Toolbar */}
@@ -71,6 +83,7 @@ const PageHeader = ({ title, breadcrumbItems = [], actions = [], className = ''
 
 PageHeader.propTypes = {
   title: PropTypes.string.isRequired,
+  titleIcon: PropTypes.elementType,
   breadcrumbItems: PropTypes.array,
   actions: PropTypes.arrayOf(
     PropTypes.shape({
diff --git a/frontend/src/components/ResponsiveFilterBar.jsx b/frontend/src/components/ResponsiveFilterBar.jsx
index 044c852..58ba6a4 100644
--- a/frontend/src/components/ResponsiveFilterBar.jsx
+++ b/frontend/src/components/ResponsiveFilterBar.jsx
@@ -427,7 +427,7 @@ const ResponsiveFilterBar = ({
                 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'
+                    : 'bg-blue-100 text-blue-700 hover:bg-blue-200 active:bg-blue-300'
                 }`}
               >
                 <Filter className='h-4 w-4' />
diff --git a/frontend/src/pages/DiveRoutes.jsx b/frontend/src/pages/DiveRoutes.jsx
index 2c2b44b..2a4c2bd 100644
--- a/frontend/src/pages/DiveRoutes.jsx
+++ b/frontend/src/pages/DiveRoutes.jsx
@@ -17,7 +17,6 @@ import { useState, useEffect, useCallback } from 'react';
 import { useQuery } from 'react-query';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 
-import Breadcrumbs from '../components/Breadcrumbs';
 import DesktopSearchBar from '../components/DesktopSearchBar';
 import EmptyState from '../components/EmptyState';
 import ErrorPage from '../components/ErrorPage';
@@ -146,11 +145,11 @@ const DiveRoutes = () => {
   return (
     <div className='min-h-screen bg-gray-50'>
       <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'>
-        {/* Breadcrumbs */}
-        <Breadcrumbs items={[{ label: 'Dive Routes' }]} />
-
-        {/* Page Header */}
-        <PageHeader title='Dive Routes' actions={[]} />
+        <PageHeader
+          title='Dive Routes'
+          titleIcon={Route}
+          breadcrumbItems={[{ label: 'Dive Routes' }]}
+        />
 
         {/* Responsive Filter Bar */}
         <div className='mb-8'>
@@ -344,7 +343,7 @@ const DiveRoutes = () => {
               return (
                 <div
                   key={route.id}
-                  className={`bg-white rounded-xl shadow-sm border border-gray-100 hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col ${compactLayout ? 'p-4' : 'p-6'}`}
+                  className={`bg-white rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] hover:shadow-md hover:-translate-y-1 transition-all duration-200 flex flex-col ${compactLayout ? 'p-4' : 'p-6'}`}
                 >
                   {/* Header: Title & Type */}
                   <div className='mb-2'>
diff --git a/frontend/src/pages/DiveSites.jsx b/frontend/src/pages/DiveSites.jsx
index 112994d..19c77b7 100644
--- a/frontend/src/pages/DiveSites.jsx
+++ b/frontend/src/pages/DiveSites.jsx
@@ -655,6 +655,7 @@ const DiveSites = () => {
       <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'
+          titleIcon={Map}
           breadcrumbItems={[{ label: 'Dive Sites' }]}
           actions={[
             {
diff --git a/frontend/src/pages/DiveTrips.jsx b/frontend/src/pages/DiveTrips.jsx
index 692ac34..1d8290d 100644
--- a/frontend/src/pages/DiveTrips.jsx
+++ b/frontend/src/pages/DiveTrips.jsx
@@ -30,7 +30,7 @@ import { Link, useNavigate, useSearchParams, useLocation } from 'react-router-do
 
 import DesktopSearchBar from '../components/DesktopSearchBar';
 import FuzzySearchInput from '../components/FuzzySearchInput';
-import HeroSection from '../components/HeroSection';
+import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
 import { useAuth } from '../contexts/AuthContext';
@@ -673,37 +673,29 @@ const DiveTrips = () => {
     <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'>
-        {/* Hero Section */}
-        <HeroSection
+        <PageHeader
           title='Dive Trips'
-          subtitle='Discover upcoming dive trips from local diving centers'
-          background='ocean'
-          size='large'
-          showLogo={false}
-          logoBackground={true}
-          threeColumnLayout={true}
-        >
-          <div className='flex flex-col justify-center gap-3 sm:flex-row sm:gap-36'>
-            <button
-              onClick={() => {
-                navigate('/map?type=dive-trips');
-              }}
-              className='bg-blue-600 hover:bg-blue-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-            >
-              <Compass className='w-5 h-5' />
-              Explore Map
-            </button>
-            {user && (
-              <button
-                onClick={() => navigate('/dive-trips/create')}
-                className='bg-green-600 hover:bg-green-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-              >
-                <Plus size={20} />
-                Create Trip
-              </button>
-            )}
-          </div>
-        </HeroSection>
+          titleIcon={Calendar}
+          breadcrumbItems={[{ label: 'Dive Trips' }]}
+          actions={[
+            {
+              label: 'Explore Map',
+              icon: Compass,
+              onClick: () => navigate('/map?type=dive-trips'),
+              variant: 'primary',
+            },
+            ...(user
+              ? [
+                  {
+                    label: 'Create Trip',
+                    icon: Plus,
+                    onClick: () => navigate('/dive-trips/create'),
+                    variant: 'secondary',
+                  },
+                ]
+              : []),
+          ]}
+        />
 
         {/* Desktop Search Bar - Only visible on desktop/tablet and for authenticated users */}
         {!isMobile && user && (
@@ -986,7 +978,7 @@ const DiveTrips = () => {
                 return (
                   <div
                     key={trip.id}
-                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 p-6 transition-shadow ${
+                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] p-6 transition-shadow ${
                       compactLayout ? 'p-4' : 'p-6'
                     } ${
                       isBlurred ? 'pointer-events-none relative overflow-hidden' : 'hover:shadow-md'
@@ -1357,7 +1349,7 @@ const DiveTrips = () => {
                 return (
                   <div
                     key={trip.id}
-                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden transition-shadow ${
+                    className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] overflow-hidden transition-shadow ${
                       compactLayout ? 'p-4' : 'p-6'
                     } ${isBlurred ? 'pointer-events-none relative' : 'hover:shadow-md'}`}
                     style={
diff --git a/frontend/src/pages/Dives.jsx b/frontend/src/pages/Dives.jsx
index 44895e5..f86fff3 100644
--- a/frontend/src/pages/Dives.jsx
+++ b/frontend/src/pages/Dives.jsx
@@ -23,6 +23,7 @@ import {
   MessageCircle,
   Globe,
   MapPin,
+  Anchor,
 } from 'lucide-react';
 import { useState, useEffect, useCallback, lazy, Suspense } from 'react';
 import { toast } from 'react-hot-toast';
@@ -30,7 +31,6 @@ 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 EmptyState from '../components/EmptyState';
 import ErrorPage from '../components/ErrorPage';
@@ -909,6 +909,7 @@ const Dives = () => {
     <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 Log'
+        titleIcon={Anchor}
         breadcrumbItems={[{ label: 'Dive Log' }]}
         actions={[
           {
@@ -1060,7 +1061,7 @@ const Dives = () => {
               {dives?.map(dive => (
                 <div
                   key={dive.id}
-                  className={`dive-item rounded-xl shadow-sm border border-gray-100 p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
+                  className={`dive-item rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] p-6 hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
                     dive.is_private ? 'bg-purple-50/30' : 'bg-white'
                   } ${compactLayout ? 'p-4' : 'p-6'}`}
                 >
@@ -1308,7 +1309,7 @@ const Dives = () => {
               {dives?.map(dive => (
                 <div
                   key={dive.id}
-                  className={`dive-item rounded-xl shadow-sm border border-gray-100 flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
+                  className={`dive-item rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(45,107,138)] flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 ${
                     dive.is_private ? 'bg-purple-50/30' : 'bg-white'
                   }`}
                 >
diff --git a/frontend/src/pages/DivingCenters.jsx b/frontend/src/pages/DivingCenters.jsx
index 482e60e..a80c0dc 100644
--- a/frontend/src/pages/DivingCenters.jsx
+++ b/frontend/src/pages/DivingCenters.jsx
@@ -22,10 +22,10 @@ import api from '../api';
 import DivingCentersDesktopSearchBar from '../components/DivingCentersDesktopSearchBar';
 import DivingCentersResponsiveFilterBar from '../components/DivingCentersResponsiveFilterBar';
 import ErrorPage from '../components/ErrorPage';
-import HeroSection from '../components/HeroSection';
 import LoadingSkeleton from '../components/LoadingSkeleton';
 import MaskedEmail from '../components/MaskedEmail';
 import MatchTypeBadge from '../components/MatchTypeBadge';
+import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import Pagination from '../components/ui/Pagination';
 import { useAuth } from '../contexts/AuthContext';
@@ -504,41 +504,31 @@ const DivingCenters = () => {
     <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'>
-        {/* Hero Section */}
-        <HeroSection
+        <PageHeader
           title='Diving Centers'
-          subtitle='Discover and connect with professional diving centers worldwide'
-          background='ocean'
-          size='large'
-          showLogo={false}
-          logoBackground={true}
-          threeColumnLayout={true}
-        >
-          <div className='flex flex-col justify-center gap-3 sm:flex-row sm:gap-36'>
-            <button
-              onClick={() => {
-                navigate('/map?type=diving-centers');
-              }}
-              className='bg-blue-600 hover:bg-blue-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-            >
-              <Compass className='w-5 h-5' />
-              Explore Map
-            </button>
-            <button
-              onClick={() => {
+          titleIcon={Building}
+          breadcrumbItems={[{ label: 'Diving Centers' }]}
+          actions={[
+            {
+              label: 'Explore Map',
+              icon: Compass,
+              onClick: () => navigate('/map?type=diving-centers'),
+              variant: 'primary',
+            },
+            {
+              label: 'Add Center',
+              icon: Plus,
+              onClick: () => {
                 if (!user) {
                   window.alert('You need an account for this action.\nPlease Login or Register.');
                   return;
                 }
                 navigate('/diving-centers/create');
-              }}
-              className='bg-green-600 hover:bg-green-700 text-white px-12 py-2 text-sm sm:text-base font-semibold min-w-[200px] whitespace-nowrap rounded-lg flex items-center gap-2 transition-all duration-200 hover:scale-105'
-            >
-              <Plus size={20} />
-              Add Center
-            </button>
-          </div>
-        </HeroSection>
+              },
+              variant: 'secondary',
+            },
+          ]}
+        />
 
         {/* Desktop Search Bar - Only visible on desktop/tablet */}
         {!isMobile && (
@@ -626,7 +616,7 @@ const DivingCenters = () => {
         ) : (
           divingCenters &&
           divingCenters.length > 0 && (
-            <div className='mb-4 sm:mb-6 lg:mb-8 mx-3 sm:mx-4 lg:mx-6 xl:mx-8'>
+            <div className='mb-4 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 */}
@@ -713,7 +703,7 @@ const DivingCenters = () => {
         )}
 
         {/* Content Container */}
-        <div className='px-3 sm:px-4 lg:px-6 xl:px-8'>
+        <div>
           {error ? (
             <ErrorPage error={error} onRetry={() => window.location.reload()} />
           ) : isLoading ? (
@@ -726,12 +716,12 @@ const DivingCenters = () => {
             <>
               {/* Diving Centers List */}
               {viewMode === 'list' && (
-                <div className={`space-y-2 ${compactLayout ? 'view-mode-compact' : ''}`}>
+                <div className={`space-y-4 ${compactLayout ? 'view-mode-compact' : ''}`}>
                   {divingCenters?.map(center => (
                     <div
                       key={center.id}
-                      className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 hover:shadow-md transition-all duration-200 hover:border-blue-300 ${
-                        compactLayout ? 'p-3' : 'p-4'
+                      className={`dive-item bg-white rounded-lg shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] hover:shadow-md transition-all duration-200 hover:border-blue-300 ${
+                        compactLayout ? 'p-4' : 'p-6'
                       }`}
                     >
                       {/* Main content row */}
@@ -893,7 +883,7 @@ const DivingCenters = () => {
                   {divingCenters?.map(center => (
                     <div
                       key={center.id}
-                      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden hover:shadow-lg transition-all duration-300 hover:scale-[1.02] ${
+                      className={`dive-item bg-white rounded-xl shadow-sm border border-gray-200 border-l-4 border-l-[rgb(45,107,138)] overflow-hidden hover:shadow-lg transition-all duration-300 hover:scale-[1.02] ${
                         compactLayout ? 'p-4' : 'p-6'
                       }`}
                     >