diff --git a/app/layout.tsx b/app/layout.tsx
index 80d4e48..3060eac 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -14,7 +14,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <body className={`${fraunces.variable} ${publicSans.variable} flex flex-col min-h-screen`}>
+      <body className={`${fraunces.variable} ${publicSans.variable} pb-footer md:pb-footer-wide`}>
         {children}
         <Footer />
       </body>
diff --git a/src/shared/styles/theme.css b/src/shared/styles/theme.css
index b4a6007..b091140 100644
--- a/src/shared/styles/theme.css
+++ b/src/shared/styles/theme.css
@@ -84,7 +84,6 @@
   /* === GRID === */
   --grid-gap: var(--space-3);
   --section-content-width: 72rem;
-
   /* === ANIMATION === */
   --ease-default: ease;
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
@@ -121,6 +120,8 @@
   --radius-md: var(--radius);
   --radius-lg: var(--radius);
   --container-section: var(--section-content-width);
+  --spacing-footer: 5rem;
+  --spacing-footer-wide: 4rem;
   --text-section-title: var(--text-section-title);
 
   --shadow-brutal-xs: var(--shadow-brutal-xs);
@@ -226,12 +227,6 @@
   a {
     color: var(--blue);
     text-decoration: none;
-    border-bottom: 2px solid var(--blue);
-    transition: all 0.2s;
-  }
-
-  a:hover {
-    border-bottom-width: 4px;
   }
 
   blockquote {
@@ -258,19 +253,19 @@
 .brutal-shadow-lg {
   box-shadow: var(--shadow-brutal-lg);
 }
-.brutal-border {
+@utility brutal-border {
   border: var(--border-width) solid var(--blue);
 }
-.brutal-border-top {
+@utility brutal-border-top {
   border-top: var(--border-width) solid var(--blue);
 }
-.brutal-border-bottom {
+@utility brutal-border-bottom {
   border-bottom: var(--border-width) solid var(--blue);
 }
-.brutal-border-left {
+@utility brutal-border-left {
   border-left: var(--border-width) solid var(--blue);
 }
-.brutal-border-right {
+@utility brutal-border-right {
   border-right: var(--border-width) solid var(--blue);
 }
 /* Apply Fraunces variable axes to non-heading elements using the heading font */
@@ -300,6 +295,16 @@
   text-wrap: pretty;
 }
 
+.rich-text a {
+  border-bottom: var(--border-width) solid var(--blue);
+  opacity: 1;
+  transition: opacity var(--duration-normal);
+}
+
+.rich-text a:hover {
+  opacity: 0.6;
+}
+
 .rich-text p + p {
   margin-top: 1.2em;
 }
diff --git a/src/widgets/Footer/ui/Footer/Footer.tsx b/src/widgets/Footer/ui/Footer/Footer.tsx
index b89068f..54f4e06 100644
--- a/src/widgets/Footer/ui/Footer/Footer.tsx
+++ b/src/widgets/Footer/ui/Footer/Footer.tsx
@@ -1,7 +1,7 @@
 import type { SiteSettingsRecord } from '$shared/api';
 import { getFirstRecord } from '$shared/api';
 import { buildFileUrl } from '$shared/lib';
-import { Button, Link } from '$shared/ui';
+import { Button, InlineSvg, Link } from '$shared/ui';
 
 /**
  * Site-wide footer with contact email, social links, and CV download.
@@ -9,21 +9,23 @@ import { Button, Link } from '$shared/ui';
  */
 export async function Footer() {
   const settings = await getFirstRecord<SiteSettingsRecord>('site_settings', {
-    expand: 'contacts,contacts.socials',
+    expand: 'contacts,contacts.email,contacts.socials',
     tags: ['site_settings'],
   });
 
   const cvUrl = settings?.cv ? buildFileUrl(settings.collectionId, settings.id, settings.cv) : null;
   const contacts = settings?.expand?.contacts;
+  const email = contacts?.expand?.email;
   const socials = contacts?.expand?.socials ?? [];
 
   return (
-    <footer className="brutal-border-top px-8 py-6 lg:px-16 lg:py-8">
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-        <div className="flex flex-wrap items-center gap-4">
-          {contacts?.email && (
-            <Link href={`mailto:${contacts.email}`} className="text-sm opacity-60 hover:opacity-100 no-underline">
-              {contacts.email}
+    <footer className="fixed bottom-0 left-0 right-0 z-50 h-footer md:h-footer-wide brutal-border-top bg-background px-8 lg:px-16 flex items-center">
+      <div className="w-full flex flex-row justify-between gap-4">
+        <div className="flex flex-wrap items-center gap-6 sm:gap-4">
+          {email && (
+            <Link href={email.url} external variant="secondary" className="flex items-center gap-1.5 text-sm">
+              {email.icon && <InlineSvg svg={email.icon} className="inline-flex w-8 h-8 sm:hidden" />}
+              <span className="hidden sm:block">{email.label}</span>
             </Link>
           )}
           {socials.map((social) => (
@@ -31,9 +33,11 @@ export async function Footer() {
               key={social.id}
               href={social.url}
               external
-              className="text-sm opacity-60 hover:opacity-100 no-underline"
+              variant="secondary"
+              className="flex items-center gap-1.5 text-sm"
             >
-              {social.label}
+              {social.icon && <InlineSvg svg={social.icon} className="inline-flex w-8 h-8 sm:hidden" />}
+              <span className="hidden sm:block">{social.label}</span>
             </Link>
           ))}
         </div>
