diff --git a/frontend/public/divemap_logo_domain_top5_extend.png b/frontend/public/divemap_logo_domain_top5_extend.png
new file mode 100644
index 00000000..e9fcfba8
Binary files /dev/null and b/frontend/public/divemap_logo_domain_top5_extend.png differ
diff --git a/frontend/src/components/HeroSection.jsx b/frontend/src/components/HeroSection.jsx
index cae0c53f..dab2f8e3 100644
--- a/frontend/src/components/HeroSection.jsx
+++ b/frontend/src/components/HeroSection.jsx
@@ -60,24 +60,36 @@ const HeroSection = ({
         </section>
 
         {/* Desktop Layout */}
-        <section className='hidden md:flex'>
+        <section className='hidden md:flex w-full mb-10'>
           <div
-            className={`${logoBackground ? 'relative overflow-hidden' : backgroundClasses[background]} py-4 px-8 ${
-              centered ? 'text-center' : ''
-            } flex items-center justify-center min-h-[220px] w-full`}
+            className={`${
+              logoBackground
+                ? 'isolate relative overflow-hidden bg-[#cee5f4] rounded-2xl border border-[#c2d9ea] shadow-sm'
+                : `${backgroundClasses[background]} relative overflow-hidden`
+            } py-4 px-8 ${centered ? 'text-center' : ''} flex items-center justify-center min-h-[220px] w-full`}
           >
             {logoBackground && (
-              <div className='absolute inset-0 flex items-center justify-center opacity-8 bg-white'>
-                <img
-                  src='/divemap_logo_domain_top5_extend.jpg'
-                  alt=''
-                  className='h-full w-full object-contain'
-                  fetchpriority='high'
-                />
-              </div>
+              <>
+                <div
+                  className='pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[clamp(3.25rem,12vmin,6rem)] overflow-hidden'
+                  aria-hidden
+                >
+                  <div className='absolute inset-0 bg-gradient-to-t from-[#64939e] from-0% via-[#7baab5]/80 via-45% to-transparent to-100%' />
+                  <div className='absolute -bottom-[46%] left-1/2 h-[89%] w-[min(185%,78rem)] max-w-none -translate-x-1/2 rounded-[100%] bg-[#4d828c]/90' />
+                  <div className='absolute -bottom-[47%] left-1/2 z-[1] h-[58%] w-[min(200%,88rem)] max-w-none -translate-x-1/2 rounded-[100%] bg-[#7bb0b9]' />
+                </div>
+                <div className='pointer-events-none absolute inset-0 z-[1] flex items-center justify-center'>
+                  <img
+                    src='/divemap_logo_domain_top5_extend.png'
+                    alt=''
+                    className='max-h-[min(280px,55vh)] w-full object-contain object-center'
+                    fetchpriority='high'
+                  />
+                </div>
+              </>
             )}
 
-            <div className='max-w-7xl mx-auto relative z-10 flex items-center justify-between w-full px-4'>
+            <div className='max-w-7xl mx-auto relative z-[2] flex items-center justify-between w-full px-4'>
               {/* Left Column - Title (Vertical) */}
               <div className='flex flex-col items-center text-center max-w-[200px]'>
                 <h1 className='sr-only'>{title}</h1>
@@ -93,7 +105,7 @@ const HeroSection = ({
               </div>
 
               {/* Center Column - Logo Background */}
-              <div className='flex-shrink-0 mx-4'>
+              <div className='mx-4 flex-shrink-0'>
                 {/* Logo is already in the background, this creates space */}
               </div>
 
@@ -117,8 +129,8 @@ const HeroSection = ({
 
             {/* Bottom Section - Buttons */}
             {children && (
-              <div className='absolute bottom-0 left-1/2 transform -translate-x-1/2 w-full max-w-5xl px-4 pb-4'>
-                <div className='flex flex-col sm:flex-row flex-wrap gap-3 justify-center'>
+              <div className='absolute bottom-0 left-1/2 z-[3] w-full max-w-5xl -translate-x-1/2 transform px-4 pb-4'>
+                <div className='flex flex-col flex-wrap justify-center gap-3 sm:flex-row'>
                   {children}
                 </div>
               </div>
diff --git a/frontend/src/pages/DiveTrips.jsx b/frontend/src/pages/DiveTrips.jsx
index 3dbb710c..692ac341 100644
--- a/frontend/src/pages/DiveTrips.jsx
+++ b/frontend/src/pages/DiveTrips.jsx
@@ -683,7 +683,7 @@ const DiveTrips = () => {
           logoBackground={true}
           threeColumnLayout={true}
         >
-          <div className='flex flex-col sm:flex-row gap-3 justify-center'>
+          <div className='flex flex-col justify-center gap-3 sm:flex-row sm:gap-36'>
             <button
               onClick={() => {
                 navigate('/map?type=dive-trips');
diff --git a/frontend/src/pages/DivingCenters.jsx b/frontend/src/pages/DivingCenters.jsx
index 014dcc8e..482e60ef 100644
--- a/frontend/src/pages/DivingCenters.jsx
+++ b/frontend/src/pages/DivingCenters.jsx
@@ -514,7 +514,7 @@ const DivingCenters = () => {
           logoBackground={true}
           threeColumnLayout={true}
         >
-          <div className='flex flex-col sm:flex-row gap-3 justify-center'>
+          <div className='flex flex-col justify-center gap-3 sm:flex-row sm:gap-36'>
             <button
               onClick={() => {
                 navigate('/map?type=diving-centers');
diff --git a/frontend/src/pages/Home.jsx b/frontend/src/pages/Home.jsx
index 02e69a33..da049561 100644
--- a/frontend/src/pages/Home.jsx
+++ b/frontend/src/pages/Home.jsx
@@ -122,16 +122,24 @@ const Home = () => {
 
       {/* Visual Banner - Contained and Compact with Overlaid Headline - Visible only on Desktop */}
 
-      <div className='hidden md:block w-full mb-10 shadow-sm bg-white rounded-2xl overflow-hidden border border-gray-100 relative'>
+      <div className='hidden md:block isolate w-full mb-10 shadow-sm bg-[#cee5f4] rounded-2xl overflow-hidden border border-[#c2d9ea] relative'>
+        <div
+          className='pointer-events-none absolute inset-x-0 bottom-0 z-0 h-[clamp(3.25rem,12vmin,6rem)] overflow-hidden'
+          aria-hidden
+        >
+          <div className='absolute inset-0 bg-gradient-to-t from-[#64939e] from-0% via-[#7baab5]/80 via-45% to-transparent to-100%' />
+          <div className='absolute -bottom-[46%] left-1/2 h-[89%] w-[min(185%,78rem)] max-w-none -translate-x-1/2 rounded-[100%] bg-[#4d828c]/90' />
+          <div className='absolute -bottom-[47%] left-1/2 z-[1] h-[58%] w-[min(200%,88rem)] max-w-none -translate-x-1/2 rounded-[100%] bg-[#7bb0b9]' />
+        </div>
         <img
-          src='/divemap_logo_domain_top5_extend.jpg'
+          src='/divemap_logo_domain_top5_extend.png'
           alt='Divemap Banner'
-          className='w-full h-auto object-contain max-h-[400px] mx-auto'
+          className='relative z-[1] w-full h-auto object-contain max-h-[400px] mx-auto'
         />
 
         {/* Overlaid Headline on top part - Hidden on Mobile */}
 
-        <div className='hidden md:block absolute top-0 left-0 right-0 pt-6 md:pt-10 px-4 text-center pointer-events-none'>
+        <div className='hidden md:block absolute top-0 left-0 right-0 z-[2] pt-6 md:pt-10 px-4 text-center pointer-events-none'>
           <h1 className='text-3xl md:text-5xl lg:text-6xl font-extrabold tracking-tight text-gray-900 drop-shadow-sm'>
             Discover Amazing <span className='text-blue-600'>Dive Sites</span>
           </h1>
diff --git a/frontend/src/pages/UserProfile.jsx b/frontend/src/pages/UserProfile.jsx
index ac71fe8c..e8d55b8e 100644
--- a/frontend/src/pages/UserProfile.jsx
+++ b/frontend/src/pages/UserProfile.jsx
@@ -103,11 +103,11 @@ const ActivityHeatmap = ({ data }) => {
   }, [data]);
 
   const getColor = count => {
-    if (count === 0) return 'bg-gray-100 dark:bg-gray-800';
-    if (count === 1) return 'bg-blue-200 dark:bg-blue-900';
-    if (count === 2) return 'bg-blue-400 dark:bg-blue-700';
-    if (count >= 3) return 'bg-blue-600 dark:bg-blue-500';
-    return 'bg-gray-100 dark:bg-gray-800';
+    if (count === 0) return 'bg-gray-100';
+    if (count === 1) return 'bg-blue-200';
+    if (count === 2) return 'bg-blue-400';
+    if (count >= 3) return 'bg-blue-600';
+    return 'bg-gray-100';
   };
 
   return (