diff --git a/frontend/src/components/DisplayIcon.tsx b/frontend/src/components/DisplayIcon.tsx
index baa980c628..7c1db8fd7a 100644
--- a/frontend/src/components/DisplayIcon.tsx
+++ b/frontend/src/components/DisplayIcon.tsx
@@ -5,7 +5,6 @@ import { IconKeys, Icons } from 'utils/data'
 import FontAwesomeIconWrapper from 'wrappers/FontAwesomeIconWrapper'
 
 export default function DisplayIcon({ item, icons }: { item: string; icons: IconType }) {
-  // className for the container
   const containerClassName = [
     'flex flex-row-reverse items-center justify-center gap-1 px-4 pb-1 -ml-2',
     item === 'stars_count' || item === 'starsCount' ? 'rotate-container' : '',
@@ -19,9 +18,10 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .filter(Boolean)
     .join(' ')
 
-  // className for the FontAwesome icon
   const iconClassName = [
-    'text-gray-600 dark:text-gray-300',
+    'transition-transform duration-200',
+    'hover:scale-110',
+    getBrandColorClass(item),
     item === 'stars_count' || item === 'starsCount' ? 'icon-rotate' : '',
     item === 'forks_count' ||
     item === 'contributors_count' ||
@@ -34,27 +34,37 @@ export default function DisplayIcon({ item, icons }: { item: string; icons: Icon
     .join(' ')
 
   return icons[item] ? (
-    <Tooltip
-      content={`${Icons[item as keyof typeof Icons]?.label}`}
-      delay={150}
-      closeDelay={100}
-      showArrow
-      placement="top"
-    >
-      <div className={containerClassName}>
-        {/* Display formatted number if the value is a number */}
-        <span className="text-gray-600 dark:text-gray-300">
-          {typeof icons[item] === 'number'
-            ? millify(icons[item], { precision: 1 }) // Format large numbers using 'millify' library
-            : icons[item]}
-        </span>
+    <div className={containerClassName}>
+      <span className="text-gray-600 dark:text-gray-300">
+        {typeof icons[item] === 'number'
+          ? millify(icons[item], { precision: 1 })
+          : icons[item]}
+      </span>
+      <Tooltip
+        content={`${Icons[item as keyof typeof Icons]?.label}`}
+        delay={150}
+        closeDelay={100}
+        showArrow
+        placement="bottom"
+      >
         <span>
           <FontAwesomeIconWrapper
             className={iconClassName}
-            icon={Icons[item as IconKeys]?.icon} // Display corresponding icon
+            icon={Icons[item as IconKeys]?.icon}
           />
         </span>
-      </div>
-    </Tooltip>
+      </Tooltip>
+    </div>
   ) : null
 }
+
+function getBrandColorClass(item: string): string {
+  const brandColors: Record<string, string> = {
+    discord: 'hover:text-[#5865F2]',
+    instagram: 'hover:text-[#E4405F]',
+    linkedin: 'hover:text-[#0077B5]',
+    youtube: 'hover:text-[#FF0000]',
+  }
+
+  return brandColors[item.toLowerCase()] || 'text-gray-600 dark:text-gray-300'
+}