diff --git a/src/components/ui/cards/EducationCard.astro b/src/components/ui/cards/EducationCard.astro
index 443b7d8..3913f30 100644
--- a/src/components/ui/cards/EducationCard.astro
+++ b/src/components/ui/cards/EducationCard.astro
@@ -23,7 +23,7 @@ const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.pr
     <div class="p-4 md:p-10">
       <div class="flex items-center">
         {logoUrlLight ? (
-        <div class="mr-5">
+        <div class="card-hover-icon-scale mr-5">
           <Logo
             srcLight={logoUrlLight}
             srcDark={logoUrlDark}
@@ -31,11 +31,10 @@ const { topic, area, date, url, logoUrlLight, logoUrlDark, logoIcon } = Astro.pr
           />
         </div>
         ) : logoIcon ? (
-        <div class="mr-5 text-neutral-800 dark:text-neutral-200">
-          <Icon name={logoIcon} class="h-12 w-12" />
+        <div class="mr-5 text-header">
+          <Icon name={logoIcon} class="card-hover-icon-scale h-12 w-12" />
         </div>
         ) : null}
-
         <div class="grow text-left">
           <span class="card-text-title block text-lg">
             {topic}
diff --git a/src/components/ui/cards/FeaturesCard.astro b/src/components/ui/cards/FeaturesCard.astro
index 8021f88..794c50b 100644
--- a/src/components/ui/cards/FeaturesCard.astro
+++ b/src/components/ui/cards/FeaturesCard.astro
@@ -23,7 +23,7 @@ const sizeClasses = 'h-30 w-100 md:w-[300px]';
       <div class="flex items-center">
         <Icon
           name={icon}
-          class="card-hover-icon shrink-0 h-6 w-6 md:h-8 md:w-8 "
+          class="card-hover-icon-scale shrink-0 h-6 w-6 md:h-8 md:w-8 "
         />
         <div class="ms-5 grow text-left">
           <span class="card-text-title card-hover-text-title block text-lg">
diff --git a/src/components/ui/cards/HighlightsCard.astro b/src/components/ui/cards/HighlightsCard.astro
index 6a5a2b7..0a456b4 100644
--- a/src/components/ui/cards/HighlightsCard.astro
+++ b/src/components/ui/cards/HighlightsCard.astro
@@ -27,7 +27,7 @@ const visitClass = visitSource ? 'card-hover-text-gitea' : 'card-hover-text-titl
     <div class="p-4 md:p-10">
       <div class="flex items-center mb-4">
         {logoUrlLight && (
-        <div class="mr-5">
+        <div class="card-hover-icon-scale mr-5">
           <Logo
             srcLight={logoUrlLight}
             srcDark={logoUrlDark}
diff --git a/src/components/ui/cards/WeatherCard.astro b/src/components/ui/cards/WeatherCard.astro
index 46ed209..87a29f1 100644
--- a/src/components/ui/cards/WeatherCard.astro
+++ b/src/components/ui/cards/WeatherCard.astro
@@ -21,7 +21,7 @@ const sizeClasses = 'w-32 md:w-40';
         <img 
           src={`https://openweathermap.org/img/wn/${icon}@2x.png`}
           alt={label}
-          class="h-12 w-12 drop-shadow-sm group-hover:scale-110 transition-transform duration-300"
+          class="card-hover-icon-scale h-12 w-12"
         />
       </div>
       <div class="mt-2">
diff --git a/src/styles/global.css b/src/styles/global.css
index 14d8a22..ae01f68 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -105,12 +105,18 @@
          shadow-xs hover:shadow-md dark:shadow-md dark:hover:shadow-lg
 }
 
-@utility card-hover-icon {
+@utility card-hover-icon-color {
   @apply transition-all duration-300
          text-primary
          group-hover:text-main
 }
 
+@utility card-hover-icon-scale {
+  @apply transition-all duration-300
+         drop-shadow-sm
+         group-hover:scale-110
+}
+
 @utility card-text-header {
   @apply text-header
          md:text-5xl