diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 8849f380..d43aedca 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -64,15 +64,16 @@ const {
               {footer.aboutUs}
             </h2>
             <nav aria-label="About navigation">
-              <ul class="grid gap-2 opacity-80">
+              <ul class="grid gap-2">
                 <li>
-                  <a href={getLocalePath('/about')} class="font-normal"
+                  <a href={getLocalePath('/about')} class="font-normal opacity-80 hover:opacity-100"
                     >{footer.teamAndContributors}</a
                   >
                 </li>
                 <li>
-                  <a href={getLocalePath('/privacy-policy')} class="font-normal"
-                    >{footer.privacyPolicy}</a
+                  <a
+                    href={getLocalePath('/privacy-policy')}
+                    class="font-normal opacity-80 hover:opacity-100">{footer.privacyPolicy}</a
                   >
                 </li>
               </ul>
@@ -83,19 +84,28 @@ const {
           <h2 id="get-started-heading" class="text-base !font-semibold">
             {footer.getStarted}
           </h2>
-          <ul class="grid gap-2 opacity-80">
+          <ul class="grid gap-2">
             <li>
-              <a href="https://docs.zen-browser.app/" class="font-normal">{footer.documentation}</a>
+              <a
+                href="https://docs.zen-browser.app/"
+                class="font-normal opacity-80 hover:opacity-100">{footer.documentation}</a
+              >
             </li>
             <li>
-              <a href={getLocalePath('/mods')} class="font-normal">{footer.zenMods}</a>
+              <a href={getLocalePath('/mods')} class="font-normal opacity-80 hover:opacity-100"
+                >{footer.zenMods}</a
+              >
             </li>
             <li>
-              <a href={getLocalePath('/release-notes')} class="font-normal">{footer.releaseNotes}</a
+              <a
+                href={getLocalePath('/release-notes')}
+                class="font-normal opacity-80 hover:opacity-100">{footer.releaseNotes}</a
               >
             </li>
             <li>
-              <a href={getLocalePath('/download?twilight')} class="font-normal">{footer.twilight}</a
+              <a
+                href={getLocalePath('/download?twilight')}
+                class="font-normal opacity-80 hover:opacity-100">{footer.twilight}</a
               >
             </li>
           </ul>
@@ -104,22 +114,29 @@ const {
           <h2 id="get-help-heading" class="text-base !font-semibold">
             {footer.getHelp}
           </h2>
-          <ul class="grid gap-2 opacity-80">
+          <ul class="grid gap-2">
             <li>
-              <a href="https://discord.gg/zen-browser" class="font-normal">{footer.discord}</a>
+              <a
+                href="https://discord.gg/zen-browser"
+                class="font-normal opacity-80 hover:opacity-100">{footer.discord}</a
+              >
             </li>
             <li>
-              <a href="https://uptime.zen-browser.app/" class="font-normal">{footer.uptimeStatus}</a
+              <a
+                href="https://uptime.zen-browser.app/"
+                class="font-normal opacity-80 hover:opacity-100">{footer.uptimeStatus}</a
               >
             </li>
             <li>
-              <a href="https://github.com/zen-browser/desktop/issues/new/choose" class="font-normal"
-                >{footer.reportAnIssue}</a
+              <a
+                href="https://github.com/zen-browser/desktop/issues/new/choose"
+                class="font-normal opacity-80 hover:opacity-100">{footer.reportAnIssue}</a
               >
             </li>
             <li>
-              <a href="https://github.com/zen-browser/desktop/security/policy" class="font-normal"
-                >{footer.securtiy}</a
+              <a
+                href="https://github.com/zen-browser/desktop/security/policy"
+                class="font-normal opacity-80 hover:opacity-100">{footer.securtiy}</a
               >
             </li>
           </ul>
diff --git a/src/components/SocialMediaStrip.astro b/src/components/SocialMediaStrip.astro
index cbcf0126..1e7e99f7 100644
--- a/src/components/SocialMediaStrip.astro
+++ b/src/components/SocialMediaStrip.astro
@@ -12,62 +12,50 @@ import {
 import { cn } from '~/utils/merge'
 
 library.add(faMastodon, faBluesky, faGithub, faXTwitter, faReddit)
-const Mastodon = icon({ prefix: 'fab', iconName: 'mastodon' })
-const Bluesky = icon({ prefix: 'fab', iconName: 'bluesky' })
-const Github = icon({ prefix: 'fab', iconName: 'github' })
-const XTwitter = icon({ prefix: 'fab', iconName: 'x-twitter' })
-const Reddit = icon({ prefix: 'fab', iconName: 'reddit' })
+
+const socialMediaLinks = [
+  {
+    href: 'https://github.com/zen-browser',
+    ariaLabel: 'Visit Zen Browser on GitHub',
+    icon: icon({ prefix: 'fab', iconName: 'github' }),
+  },
+
+  {
+    href: 'https://x.com/zen_browser',
+    ariaLabel: 'Visit Zen Browser on X',
+    icon: icon({ prefix: 'fab', iconName: 'x-twitter' }),
+  },
+  {
+    href: 'https://floss.social/@zenbrowser',
+    ariaLabel: 'Visit Zen Browser on Mastodon',
+    icon: icon({ prefix: 'fab', iconName: 'mastodon' }),
+  },
+  {
+    href: 'https://bsky.app/profile/zen-browser.app',
+    ariaLabel: 'Visit Zen Browser on Bluesky',
+    icon: icon({ prefix: 'fab', iconName: 'bluesky' }),
+  },
+  {
+    href: 'https://www.reddit.com/r/zen_browser',
+    ariaLabel: 'Visit Zen Browser on Reddit',
+    icon: icon({ prefix: 'fab', iconName: 'reddit' }),
+  },
+]
 ---
 
-<ul class={cn('flex items-center gap-4 opacity-80', className)} {...props}>
-  <li>
-    <a
-      href="https://github.com/zen-browser"
-      target="_blank"
-      class="font-bold"
-      aria-label="Visit Zen Browser on GitHub"
-    >
-      <Fragment set:html={Github.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://x.com/zen_browser"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on X"
-    >
-      <Fragment set:html={XTwitter.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://floss.social/@zenbrowser"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on Mastodon"
-    >
-      <Fragment set:html={Mastodon.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://bsky.app/profile/zen-browser.app"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on Bluesky"
-    >
-      <Fragment set:html={Bluesky.html} />
-    </a>
-  </li>
-  <li>
-    <a
-      href="https://www.reddit.com/r/zen_browser"
-      target="_blank"
-      class="font-normal"
-      aria-label="Visit Zen Browser on Reddit"
-    >
-      <Fragment set:html={Reddit.html} />
-    </a>
-  </li>
+<ul class={cn('flex items-center gap-4', className)} {...props}>
+  {
+    socialMediaLinks.map(({ href, ariaLabel, icon }) => (
+      <li>
+        <a
+          href={href}
+          target="_blank"
+          class="font-normal opacity-80 hover:opacity-100"
+          aria-label={ariaLabel}
+        >
+          <Fragment set:html={icon.html} />
+        </a>
+      </li>
+    ))
+  }
 </ul>