diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index e65952c..bfca980 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -26,7 +26,7 @@ export function Footer({
 }) {
   return (
     <footer className="border-t border-secondary bg-bg px-4 py-10">
-      <div className="mx-auto flex max-w-7xl flex-col items-center justify-between gap-6 md:flex-row">
+      <div className="mx-auto max-w-7xl flex flex-col gap-6 md:grid md:grid-cols-3 md:items-end">
         <div className="text-center md:text-left">
           <div className="text-xl md:text-2xl font-extrabold font-name tracking-wide text-text">
             Jody Holt
@@ -36,7 +36,7 @@ export function Footer({
           </div>
         </div>
 
-        <nav className="flex items-center gap-5">
+        <nav className="flex items-center gap-5 md:justify-center">
             <button
               className="text-text hover:text-primary anim-base"
               onClick={() => document.getElementById("home")?.scrollIntoView({ behavior: "smooth" })}
@@ -57,7 +57,7 @@ export function Footer({
             </button>
           </nav>
 
-          <div className="flex items-center gap-4 text-text">
+          <div className="flex items-center gap-4 text-text md:justify-end">
             {socials.map((s) => (
               <a
                 key={s.label}