diff --git a/frontend/src/components/AdvancedDiveProfileChart.jsx b/frontend/src/components/AdvancedDiveProfileChart.jsx
index f3c118d..8bc62a0 100644
--- a/frontend/src/components/AdvancedDiveProfileChart.jsx
+++ b/frontend/src/components/AdvancedDiveProfileChart.jsx
@@ -11,7 +11,6 @@ import {
   X,
   Contrast,
   Upload,
-  TrendingUp,
   Loader2,
   Wind,
 } from 'lucide-react';
@@ -34,6 +33,8 @@ import api from '../api';
 import { useResponsive } from '../hooks/useResponsive';
 import { formatGases } from '../utils/textHelpers';
 
+import DepthIcon from './ui/DepthIcon';
+
 /**
  * Custom Tooltip component for the chart
  */
@@ -713,9 +714,7 @@ const AdvancedDiveProfileChart = ({
               </span>
             </div>
             <div className='flex items-center gap-2'>
-              <TrendingUp
-                className={`${isMobileLandscape ? 'h-3 w-3' : 'h-5 w-5'} text-blue-500`}
-              />
+              <DepthIcon className='text-divemap-blue' size={isMobileLandscape ? 14 : 22} />
               <span
                 className={`${isMobileLandscape ? 'text-xs' : 'text-sm'} font-medium text-gray-700`}
               >
@@ -723,7 +722,7 @@ const AdvancedDiveProfileChart = ({
               </span>
             </div>
             <div className='flex items-center gap-2'>
-              <TrendingUp className={`${isMobileLandscape ? 'h-3 w-3' : 'h-5 w-5'} text-red-500`} />
+              <DepthIcon className='text-red-500' size={isMobileLandscape ? 14 : 22} />
               <span
                 className={`${isMobileLandscape ? 'text-xs' : 'text-sm'} font-medium text-gray-700`}
               >
diff --git a/frontend/src/components/DiveInfoGrid.jsx b/frontend/src/components/DiveInfoGrid.jsx
index 04e743e..4f1a8d0 100644
--- a/frontend/src/components/DiveInfoGrid.jsx
+++ b/frontend/src/components/DiveInfoGrid.jsx
@@ -1,11 +1,12 @@
 import { Row, Col } from 'antd';
 import { Grid } from 'antd-mobile';
-import { Calendar, Clock, Eye, TrendingUp, User, Notebook, Wind, Droplets } from 'lucide-react';
+import { Calendar, Clock, Eye, User, Notebook, Wind, Droplets } from 'lucide-react';
 import React from 'react';
 
 import { getTagColor } from '../utils/tagHelpers';
 import { formatGases } from '../utils/textHelpers';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
@@ -122,7 +123,7 @@ const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
                   Max Depth
                 </span>
                 <div className='flex items-center gap-1.5'>
-                  <TrendingUp className='w-4 h-4 text-blue-500' />
+                  <DepthIcon className='text-divemap-blue' size={18} />
                   <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>
@@ -257,7 +258,7 @@ const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
                     Max Depth
                   </span>
                   <div className='flex items-center gap-1.5'>
-                    <TrendingUp className='w-4 h-4 text-blue-500' />
+                    <DepthIcon className='text-divemap-blue' size={18} />
                     <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>
@@ -349,7 +350,7 @@ const DiveInfoGrid = ({ dive, hasDeco, isMobile, formatDate, formatTime }) => {
               {dive.average_depth && (
                 <Col xs={24} sm={12} md={6}>
                   <div className='flex items-center gap-2'>
-                    <TrendingUp size={15} className='text-blue-500' />
+                    <DepthIcon size={18} className='text-divemap-blue' />
                     <span className='text-sm text-gray-600'>Avg Depth:</span>
                     <span className='font-medium'>{dive.average_depth}m</span>
                   </div>
diff --git a/frontend/src/components/DiveSiteCard.jsx b/frontend/src/components/DiveSiteCard.jsx
index 3d460bb..499f6fb 100644
--- a/frontend/src/components/DiveSiteCard.jsx
+++ b/frontend/src/components/DiveSiteCard.jsx
@@ -1,4 +1,4 @@
-import { Globe, User, TrendingUp, Fish, ChevronRight, Route } from 'lucide-react';
+import { Globe, User, Fish, ChevronRight, Route } from 'lucide-react';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -8,6 +8,7 @@ import { slugify, getDiveSiteSlug } from '../utils/slugify';
 import { getTagColor } from '../utils/tagHelpers';
 import { renderTextWithLinks } from '../utils/textHelpers';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 export const DiveSiteListCard = ({
@@ -79,8 +80,8 @@ export const DiveSiteListCard = ({
           {/* Content Row: Description, Stats and Mobile Thumbnail */}
           <div className='flex gap-3 items-start'>
             <div className='flex-1 min-w-0 flex flex-col'>
-              {/* BODY: Description - More aggressive clamp on mobile */}
-              {site.description && (
+              {/* BODY: Description - Completely removed on mobile view */}
+              {!isMobile && site.description && (
                 <div
                   className={`text-gray-600 leading-snug line-clamp-2 mb-1.5 ${compactLayout ? 'text-xs sm:text-sm' : 'text-xs sm:text-sm'}`}
                 >
@@ -95,7 +96,7 @@ export const DiveSiteListCard = ({
               <div className='flex flex-wrap items-center gap-x-3 gap-y-1 py-1 sm:py-1.5 border-t border-gray-50'>
                 {site.max_depth && (
                   <div className='flex items-center gap-1'>
-                    <TrendingUp className='w-3 h-3 text-gray-400' />
+                    <DepthIcon className='text-divemap-blue font-bold' size={15} />
                     <span className='text-xs sm:text-sm font-bold text-gray-900'>
                       {site.max_depth}m
                     </span>
@@ -167,6 +168,8 @@ export const DiveSiteGridCard = ({
   getThumbnailUrl,
   handleFilterChange,
 }) => {
+  const { isMobile } = useResponsive();
+
   return (
     <div
       className={`dive-item rounded-xl shadow-sm border border-gray-100 border-l-4 border-l-[rgb(0,114,178)] flex flex-col hover:shadow-md hover:-translate-y-1 transition-all duration-200 bg-white ${compactLayout ? 'h-full' : ''}`}
@@ -227,7 +230,7 @@ export const DiveSiteGridCard = ({
         <div className='flex items-center gap-4 mb-3 pb-3 border-b border-gray-50'>
           {site.max_depth && (
             <div className='flex items-center gap-1'>
-              <TrendingUp className='w-3.5 h-3.5 text-gray-400' />
+              <DepthIcon className='text-divemap-blue font-bold' size={16} />
               <span className='text-xs font-bold text-gray-700'>{site.max_depth}m</span>
             </div>
           )}
@@ -240,7 +243,7 @@ export const DiveSiteGridCard = ({
         </div>
 
         {/* Description */}
-        {site.description && (
+        {!isMobile && site.description && (
           <p className='text-xs text-gray-500 line-clamp-2 mb-4 leading-relaxed'>
             {decodeHtmlEntities(site.description)}
           </p>
diff --git a/frontend/src/components/DivesMap.jsx b/frontend/src/components/DivesMap.jsx
index e3e947c..6eb54cd 100644
--- a/frontend/src/components/DivesMap.jsx
+++ b/frontend/src/components/DivesMap.jsx
@@ -1,7 +1,7 @@
 import DOMPurify from 'dompurify';
 import L, { Icon } from 'leaflet';
 import escape from 'lodash/escape';
-import { Calendar, Clock, TrendingUp, Star } from 'lucide-react';
+import { Calendar, Clock, Star } from 'lucide-react';
 import 'leaflet/dist/leaflet.css';
 import 'leaflet.markercluster/dist/MarkerCluster.css';
 import 'leaflet.markercluster';
@@ -14,6 +14,7 @@ import { formatDate, formatTime } from '../utils/dateHelpers';
 import { getDifficultyLabel, getDifficultyColorClasses } from '../utils/difficultyHelpers';
 import { slugify } from '../utils/slugify';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 // Fix default marker icons
@@ -373,7 +374,7 @@ const DivesMap = ({ dives = [], onViewportChange }) => {
                     <div className='flex items-center gap-4 text-sm text-gray-600'>
                       {dive.max_depth && (
                         <div className='flex items-center gap-1'>
-                          <TrendingUp size={14} />
+                          <DepthIcon className='text-divemap-blue' size={16} />
                           <span>{dive.max_depth}m max</span>
                         </div>
                       )}
diff --git a/frontend/src/components/LeafletMapView.jsx b/frontend/src/components/LeafletMapView.jsx
index 2981af1..d358542 100644
--- a/frontend/src/components/LeafletMapView.jsx
+++ b/frontend/src/components/LeafletMapView.jsx
@@ -1,7 +1,7 @@
 import DOMPurify from 'dompurify';
 import L, { Icon } from 'leaflet';
 import escape from 'lodash/escape';
-import { Info, Phone, Mail, Globe, TrendingUp, TrendingDown, Clock } from 'lucide-react';
+import { Info, Phone, Mail, Globe, Clock } from 'lucide-react';
 import React, { useMemo, useCallback, useEffect, useRef, useState } from 'react';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { MapContainer, TileLayer, Marker, Popup, useMap } from 'react-leaflet';
@@ -21,6 +21,7 @@ import {
   formatWindDirection,
 } from '../utils/windSuitabilityHelpers';
 
+import DepthIcon from './ui/DepthIcon';
 import WindDataError from './WindDataError';
 import WindOverlay from './WindOverlay';
 import WindOverlayLegend from './WindOverlayLegend';
@@ -31,8 +32,8 @@ const ICONS = {
   Phone: renderToStaticMarkup(<Phone size={16} className='text-gray-600 hover:text-gray-800' />),
   Mail: renderToStaticMarkup(<Mail size={16} className='text-gray-600 hover:text-gray-800' />),
   Globe: renderToStaticMarkup(<Globe size={16} className='text-gray-600 hover:text-gray-800' />),
-  AverageDepth: renderToStaticMarkup(<TrendingDown size={16} className='text-gray-400' />),
-  MaxDepth: renderToStaticMarkup(<TrendingUp size={16} className='text-gray-400' />),
+  AverageDepth: renderToStaticMarkup(<DepthIcon size={18} className='text-divemap-blue' />),
+  MaxDepth: renderToStaticMarkup(<DepthIcon size={18} className='text-divemap-blue' />),
   Duration: renderToStaticMarkup(<Clock size={16} className='text-gray-400' />),
 };
 
diff --git a/frontend/src/components/TripCard.jsx b/frontend/src/components/TripCard.jsx
index d3b81c9..f34e03a 100644
--- a/frontend/src/components/TripCard.jsx
+++ b/frontend/src/components/TripCard.jsx
@@ -3,7 +3,6 @@ import {
   Clock,
   Euro,
   Users,
-  TrendingUp,
   MapPin,
   Building,
   Edit,
@@ -21,6 +20,7 @@ import { slugify, getDiveSiteSlug, getDivingCenterSlug } from '../utils/slugify'
 import { getStatusColorClasses, getDisplayStatus } from '../utils/tripHelpers';
 import { generateTripName } from '../utils/tripNameGenerator';
 
+import DepthIcon from './ui/DepthIcon';
 import DifficultyBadge from './ui/DifficultyBadge';
 
 /**
@@ -323,7 +323,7 @@ const TripCard = ({
               )}
               {trip.max_depth ? (
                 <div className='flex items-center text-gray-600 p-1.5 sm:p-2 lg:p-1.5 bg-gray-50/50 rounded-lg border border-gray-100'>
-                  <TrendingUp className='h-3.5 w-3.5 mr-2 text-blue-400 flex-shrink-0' />
+                  <DepthIcon className='mr-2 text-divemap-blue flex-shrink-0' size={16} />
                   <div className='min-w-0'>
                     <div className='text-xs text-gray-500 uppercase tracking-wide leading-tight'>
                       Max Depth
diff --git a/frontend/src/components/UserChat/MessageBubble.jsx b/frontend/src/components/UserChat/MessageBubble.jsx
index b062eae..649e114 100644
--- a/frontend/src/components/UserChat/MessageBubble.jsx
+++ b/frontend/src/components/UserChat/MessageBubble.jsx
@@ -1,5 +1,5 @@
 import { format } from 'date-fns';
-import { Edit2, Check, CheckCheck, Clock, MapPin, TrendingUp } from 'lucide-react';
+import { Edit2, Check, CheckCheck, Clock, MapPin } from 'lucide-react';
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
@@ -11,6 +11,7 @@ import { slugify, getDiveSiteSlug } from '../../utils/slugify';
 import Avatar from '../Avatar';
 import ChatbotIcon from '../Chat/ChatbotIcon.jsx';
 import CurrencyIcon from '../ui/CurrencyIcon';
+import DepthIcon from '../ui/DepthIcon';
 
 import LinkPreview from './LinkPreview';
 
@@ -239,7 +240,7 @@ const MessageBubble = ({
                         )}
                         {tripData.max_depth && (
                           <div className='flex items-center space-x-1'>
-                            <TrendingUp className='w-2.5 h-2.5 sm:w-3.5 sm:h-3.5 text-blue-500 shrink-0' />
+                            <DepthIcon className='text-divemap-blue shrink-0' size={16} />
                             <span className='font-medium text-gray-900 dark:text-gray-100 truncate'>
                               {tripData.max_depth}m
                             </span>
diff --git a/frontend/src/components/ui/DepthIcon.jsx b/frontend/src/components/ui/DepthIcon.jsx
new file mode 100644
index 0000000..ce88047
--- /dev/null
+++ b/frontend/src/components/ui/DepthIcon.jsx
@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const DepthIcon = ({ className = '', size = 16, strokeWidth = 2.5, ...props }) => {
+  return (
+    <svg
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      strokeWidth={strokeWidth}
+      strokeLinecap='round'
+      strokeLinejoin='round'
+      width={size}
+      height={size}
+      className={className}
+      {...props}
+    >
+      {/* Ocean waves at the top */}
+      <path d='M2 6c.6.5 1.2 1 2.5 1s1.9-.5 2.5-1c.6-.5 1.2-1 2.5-1s1.9.5 2.5 1c.6.5 1.2 1 2.5 1s1.9-.5 2.5-1c.6-.5 1.2-1 2.5-1s1.9.5 2.5 1c.6.5 1.2 1 2.5 1' />
+      {/* Vertical descending line */}
+      <path d='M12 10v10' />
+      {/* Downward pointing arrowhead */}
+      <polyline points='8 16 12 20 16 16' />
+    </svg>
+  );
+};
+
+DepthIcon.propTypes = {
+  className: PropTypes.string,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  strokeWidth: PropTypes.number,
+};
+
+export default DepthIcon;
diff --git a/frontend/src/pages/DiveSiteDetail.jsx b/frontend/src/pages/DiveSiteDetail.jsx
index 82cf07b..77d0fb9 100644
--- a/frontend/src/pages/DiveSiteDetail.jsx
+++ b/frontend/src/pages/DiveSiteDetail.jsx
@@ -54,6 +54,7 @@ import SEO from '../components/SEO';
 import ShareButton from '../components/ShareButton';
 import StickyRateBar from '../components/StickyRateBar';
 import Button from '../components/ui/Button';
+import DepthIcon from '../components/ui/DepthIcon';
 import DifficultyBadge from '../components/ui/DifficultyBadge';
 import RichText from '../components/ui/RichText';
 import StarfishRating from '../components/ui/StarfishRating';
@@ -582,7 +583,7 @@ const DiveSiteDetail = () => {
               <div className='flex flex-wrap items-center gap-x-4 gap-y-1.5'>
                 {dive.max_depth && (
                   <div className='flex items-center gap-1'>
-                    <TrendingUp className='w-3 h-3 text-gray-300' />
+                    <DepthIcon className='text-divemap-blue font-bold' size={14} />
                     <span className='text-gray-700 font-medium'>{dive.max_depth}m</span>
                   </div>
                 )}
@@ -874,7 +875,7 @@ const DiveSiteDetail = () => {
                     Max Depth
                   </span>
                   <div className='flex items-center gap-1'>
-                    <TrendingUp className='w-3.5 h-3.5 text-gray-400' />
+                    <DepthIcon className='text-divemap-blue font-bold' size={16} />
                     <span className='text-xs sm:text-sm font-bold text-gray-900'>
                       {diveSite.max_depth}
                       <span className='text-[10px] font-normal text-gray-400 ml-0.5'>m</span>
diff --git a/frontend/src/pages/DiveSites.jsx b/frontend/src/pages/DiveSites.jsx
index ab9790f..e1ca2c1 100644
--- a/frontend/src/pages/DiveSites.jsx
+++ b/frontend/src/pages/DiveSites.jsx
@@ -7,7 +7,6 @@ import {
   ChevronRight,
   Star,
   MapPin,
-  TrendingUp,
   Compass,
   Globe,
   List,
diff --git a/frontend/src/pages/DiveTrips.jsx b/frontend/src/pages/DiveTrips.jsx
index 0f62c01..0fe6808 100644
--- a/frontend/src/pages/DiveTrips.jsx
+++ b/frontend/src/pages/DiveTrips.jsx
@@ -14,7 +14,6 @@ import {
   Tag,
   List,
   Grid,
-  TrendingUp,
   DollarSign,
   Star,
   ChevronDown,
diff --git a/frontend/src/pages/Dives.jsx b/frontend/src/pages/Dives.jsx
index 7d4eee4..f8dcdfd 100644
--- a/frontend/src/pages/Dives.jsx
+++ b/frontend/src/pages/Dives.jsx
@@ -15,7 +15,6 @@ import {
   Filter,
   Upload,
   Calendar,
-  TrendingUp,
   Grid,
   Route,
   User,
@@ -44,6 +43,7 @@ import PageHeader from '../components/PageHeader';
 import RateLimitError from '../components/RateLimitError';
 import ResponsiveFilterBar from '../components/ResponsiveFilterBar';
 import SEO from '../components/SEO';
+import DepthIcon from '../components/ui/DepthIcon';
 import DifficultyBadge from '../components/ui/DifficultyBadge';
 import InfiniteScrollTrigger from '../components/ui/InfiniteScrollTrigger';
 import { useAuth } from '../contexts/AuthContext';
@@ -946,7 +946,7 @@ const Dives = () => {
                       <div className='flex flex-wrap items-center gap-x-3 sm:gap-x-8 gap-y-1 py-1 sm:py-3 border-y border-gray-50'>
                         {dive.max_depth && (
                           <div className='flex items-center gap-1'>
-                            <TrendingUp className='w-3 h-3 text-gray-400' />
+                            <DepthIcon className='text-divemap-blue font-bold' size={15} />
                             <span className='text-xs sm:text-sm font-semibold text-gray-700'>
                               {dive.max_depth}m
                             </span>
@@ -1075,7 +1075,7 @@ const Dives = () => {
                       {/* Stats Grid (Simplified for Grid layout) */}
                       <div className='grid grid-cols-2 gap-4 py-3 border-y border-gray-50 mb-4'>
                         <div className='flex items-center gap-2'>
-                          <TrendingUp className='w-4 h-4 text-gray-400' />
+                          <DepthIcon className='text-divemap-blue font-bold' size={18} />
                           <div>
                             <p className='text-xs text-gray-400 uppercase font-medium leading-none mb-0.5'>
                               Depth
diff --git a/frontend/src/pages/DivingCenters.jsx b/frontend/src/pages/DivingCenters.jsx
index 97099e2..811f486 100644
--- a/frontend/src/pages/DivingCenters.jsx
+++ b/frontend/src/pages/DivingCenters.jsx
@@ -488,9 +488,9 @@ const DivingCenters = () => {
                                 )}
                               </div>
 
-                              {/* Description - expanded to fill space */}
-                              {center.description && (
-                                <p className='text-[10px] sm:text-sm text-gray-600 line-clamp-3 sm:line-clamp-4 leading-tight mt-1.5'>
+                              {/* Description - completely removed on mobile view */}
+                              {!isMobile && center.description && (
+                                <p className='text-xs sm:text-sm text-gray-600 line-clamp-3 sm:line-clamp-4 leading-tight mt-1.5'>
                                   {decodeHtmlEntities(center.description)}
                                 </p>
                               )}
@@ -507,37 +507,37 @@ const DivingCenters = () => {
                                   }
                                   target='_blank'
                                   rel='noopener noreferrer'
-                                  className='w-8 h-8 inline-flex items-center justify-center bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 active:scale-95 transition-all'
+                                  className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                   title='Website'
                                 >
-                                  <Globe className='w-4 h-4 text-blue-700 flex-shrink-0' />
+                                  <Globe className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                 </a>
                               )}
                               {center.email &&
                                 (isMobile ? (
                                   <a
                                     href={`mailto:${center.email}`}
-                                    className='w-8 h-8 inline-flex items-center justify-center bg-green-100 text-green-700 rounded-lg hover:bg-green-200 active:scale-95 transition-all'
+                                    className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                     title='Email'
                                   >
-                                    <Mail className='w-4 h-4 text-green-700 flex-shrink-0' />
+                                    <Mail className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                   </a>
                                 ) : (
                                   <MaskedEmail
                                     email={center.email}
                                     label=''
-                                    className='w-8 h-8 inline-flex items-center justify-center bg-green-100 text-green-700 rounded-lg hover:bg-green-200 active:scale-95 transition-all cursor-pointer'
+                                    className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all cursor-pointer'
                                   >
-                                    <Mail className='w-4 h-4 text-green-700 flex-shrink-0' />
+                                    <Mail className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                   </MaskedEmail>
                                 ))}
                               {center.phone && (
                                 <a
                                   href={`tel:${center.phone}`}
-                                  className='w-8 h-8 inline-flex items-center justify-center bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 active:scale-95 transition-all'
+                                  className='w-8 h-8 inline-flex items-center justify-center bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                   title='Call'
                                 >
-                                  <Phone className='w-4 h-4 text-indigo-700 flex-shrink-0' />
+                                  <Phone className='w-4 h-4 text-divemap-blue flex-shrink-0' />
                                 </a>
                               )}
                               <Link
@@ -612,8 +612,8 @@ const DivingCenters = () => {
                               )}
                             </div>
 
-                            {/* Description */}
-                            {center.description && (
+                            {/* Description - completely removed on mobile view */}
+                            {!isMobile && center.description && (
                               <p className='text-gray-600 text-sm line-clamp-3 mb-4 leading-relaxed'>
                                 {decodeHtmlEntities(center.description)}
                               </p>
@@ -625,7 +625,7 @@ const DivingCenters = () => {
                                 {center.phone && (
                                   <a
                                     href={`tel:${center.phone}`}
-                                    className='p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors'
+                                    className='p-2 bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                     title='Call'
                                   >
                                     <Phone className='w-4 h-4' />
@@ -640,7 +640,7 @@ const DivingCenters = () => {
                                     }
                                     target='_blank'
                                     rel='noopener noreferrer'
-                                    className='p-2 bg-gray-50 text-gray-600 rounded-lg hover:bg-gray-100 transition-colors'
+                                    className='p-2 bg-blue-50 text-divemap-blue rounded-lg hover:bg-blue-100/70 active:scale-95 transition-all'
                                     title='Website'
                                   >
                                     <Globe className='w-4 h-4' />
diff --git a/frontend/src/pages/Profile.jsx b/frontend/src/pages/Profile.jsx
index 2c3746e..6c94937 100644
--- a/frontend/src/pages/Profile.jsx
+++ b/frontend/src/pages/Profile.jsx
@@ -45,6 +45,7 @@ import OrganizationLogo from '../components/OrganizationLogo';
 import SEO from '../components/SEO';
 import { getSocialMediaIcon } from '../components/SocialMediaIcons';
 import Button from '../components/ui/Button';
+import DepthIcon from '../components/ui/DepthIcon';
 import { useAuth } from '../contexts/AuthContext';
 import { getDivingCenters } from '../services/divingCenters';
 import { getFullAvatarUrl } from '../utils/avatarHelpers';
@@ -423,10 +424,10 @@ const Profile = () => {
       }
 
       features.push({
-        icon: <TrendingUp className='h-3 w-3' />,
+        icon: <DepthIcon className='text-divemap-blue font-bold' size={14} />,
         label: shortDepth,
         title: `Max Depth: ${max_depth}`,
-        color: 'bg-blue-50 text-blue-700 border-blue-100',
+        color: 'bg-blue-50 text-divemap-blue border-blue-100',
       });
     }
 
diff --git a/frontend/src/pages/TripDetail.jsx b/frontend/src/pages/TripDetail.jsx
index ad3eb33..437d6a4 100644
--- a/frontend/src/pages/TripDetail.jsx
+++ b/frontend/src/pages/TripDetail.jsx
@@ -9,7 +9,6 @@ import {
   Building,
   Ticket,
   LogIn,
-  TrendingUp,
   Edit,
   X,
   Upload,
@@ -27,6 +26,7 @@ import SEO from '../components/SEO';
 import TripFormModal from '../components/TripFormModal';
 import TripHeader from '../components/TripHeader';
 import Button from '../components/ui/Button';
+import DepthIcon from '../components/ui/DepthIcon';
 import RichText from '../components/ui/RichText';
 import { useAuth } from '../contexts/AuthContext';
 import { useSetting } from '../hooks/useSettings';
@@ -115,7 +115,7 @@ const DiveSiteInfo = ({ dive, index }) => {
           )}
         </h4>
         <div className='text-sm text-gray-500 font-medium flex items-center gap-1.5'>
-          <TrendingUp className='w-4 h-4 text-gray-400' />
+          <DepthIcon className='text-divemap-blue font-bold' size={16} />
           {diveSite?.max_depth ? `${diveSite.max_depth}m max` : 'Depth TBD'}
         </div>
       </div>
diff --git a/frontend/src/pages/UserProfile.jsx b/frontend/src/pages/UserProfile.jsx
index 272a28c..e126697 100644
--- a/frontend/src/pages/UserProfile.jsx
+++ b/frontend/src/pages/UserProfile.jsx
@@ -55,6 +55,7 @@ import Avatar from '../components/Avatar';
 import OrganizationLogo from '../components/OrganizationLogo';
 import SEO from '../components/SEO';
 import { getSocialMediaIcon } from '../components/SocialMediaIcons';
+import DepthIcon from '../components/ui/DepthIcon';
 import { useAuth } from '../contexts/AuthContext';
 import { formatDate } from '../utils/dateHelpers';
 import { formatGases } from '../utils/textHelpers';
@@ -303,10 +304,10 @@ const UserProfile = () => {
       }
 
       features.push({
-        icon: <TrendingUp className='h-3 w-3' />,
+        icon: <DepthIcon className='text-divemap-blue font-bold' size={14} />,
         label: shortDepth,
         title: `Max Depth: ${max_depth}`,
-        color: 'bg-blue-50 text-blue-700 border-blue-100',
+        color: 'bg-blue-50 text-divemap-blue border-blue-100',
       });
     }
 
@@ -470,9 +471,7 @@ const UserProfile = () => {
         >
           {stats.max_depth_str && (
             <StatCard
-              icon={
-                <TrendingUp className={`${isEmbedded ? 'h-4 w-4' : 'h-6 w-6'} text-blue-600`} />
-              }
+              icon={<DepthIcon className='text-divemap-blue' size={isEmbedded ? 16 : 24} />}
               value={stats.max_depth_str}
               label='Max Depth'
               color='blue'
@@ -885,7 +884,7 @@ const UserProfile = () => {
                         value={profile.diving_stats.max_depth || 0}
                         suffix={<span className='text-xs font-normal opacity-50'>m</span>}
                         precision={1}
-                        prefix={<TrendingUp className='h-3.5 w-3.5 inline mr-1 text-blue-500' />}
+                        prefix={<DepthIcon className='inline mr-1 text-divemap-blue' size={16} />}
                         styles={{ content: { fontSize: '18px', fontWeight: 'bold' } }}
                       />
                     </Card>