diff --git a/src/components/widgets/Header.astro b/src/components/widgets/Header.astro
index 937e105..249e680 100644
--- a/src/components/widgets/Header.astro
+++ b/src/components/widgets/Header.astro
@@ -187,11 +187,11 @@ const {
       ]}
     >
       <div class="items-center flex justify-between w-full md:w-auto">
-        <div class="flex items-center space-x-4">
+        <div class="flex items-center">
           {showToggleTheme && <ToggleTheme iconClass="w-6 h-6 md:w-5 md:h-5 md:inline-block" />}
           {/* Contact Icon */}
           {contactLink && (
-            <a href={contactLink.href} aria-label="Contact" title="Contact" class="hover:text-link dark:hover:text-white flex items-center">
+            <a href={contactLink.href} aria-label="Contact" title="Contact" class="hover:text-link dark:hover:text-white flex items-center hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2.5 transition-colors duration-200 mr-[10px]">
               <Icon name="tabler:mail" class="w-6 h-6" />
             </a>
           )}