diff --git a/app/components/avatar-motion.tsx b/app/components/avatar-motion.tsx
new file mode 100644
index 0000000..942687a
--- /dev/null
+++ b/app/components/avatar-motion.tsx
@@ -0,0 +1,44 @@
+"use client";
+
+import Image from "next/image";
+import { motion } from "motion/react";
+import { cn } from "@/lib/utils";
+
+type AvatarMotionProps = {
+  src: string;
+  alt: string;
+  size?: number; // px
+  className?: string;
+};
+
+export function AvatarMotion({
+  src,
+  alt,
+  size = 160,
+  className,
+}: AvatarMotionProps) {
+  // tailwind classes for typical 160px size
+  const baseSizeClasses = size === 160 ? "h-40 w-40" : "";
+
+  return (
+    <motion.div
+      whileHover={{ scale: 1.03, y: -2 }}
+      whileTap={{ scale: 0.98 }}
+      transition={{ type: "spring", stiffness: 360, damping: 22, mass: 0.6 }}
+      className="inline-block group"
+    >
+      <Image
+        src={src}
+        alt={alt}
+        width={size}
+        height={size}
+        className={cn(
+          baseSizeClasses,
+          "rounded-full object-cover ring-2 ring-neutral-200 shadow-lg transition-shadow duration-300 group-hover:shadow-xl dark:shadow-none dark:ring-neutral-800",
+          className,
+        )}
+        priority
+      />
+    </motion.div>
+  );
+}
diff --git a/app/components/dotbackground.tsx b/app/components/dotbackground.tsx
index 2f70476..3b91c12 100644
--- a/app/components/dotbackground.tsx
+++ b/app/components/dotbackground.tsx
@@ -9,13 +9,13 @@ export function DotBackground({ className }: { className?: string }) {
       <div
         className={cn(
           "absolute inset-0",
-          "[background-size:20px_20px]",
-          "[background-image:radial-gradient(#d4d4d4_1px,transparent_1px)]",
+          "[background-size:28px_28px]",
+          "[background-image:radial-gradient(var(--dot-color)_1px,transparent_1px)]",
           "dark:[background-image:radial-gradient(#404040_1px,transparent_1px)]",
         )}
       />
       {/* Radial gradient for the container to give a faded look */}
-      <div className="pointer-events-none absolute inset-0 flex items-center justify-center bg-white [mask-image:radial-gradient(ellipse_at_center,transparent_20%,black)] dark:bg-black"></div>
+      <div className="pointer-events-none absolute inset-0 [mask-image:radial-gradient(ellipse_at_center,transparent_30%,black)]"></div>
     </div>
   )
-}
\ No newline at end of file
+}
diff --git a/app/globals.css b/app/globals.css
index 7ccf2df..dbbaab2 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,14 +1,21 @@
 @import "tailwindcss";
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  /* Light mode tokens */
+  --background: #fbfbfb; /* off-white to reduce glare */
+  --surface: #ffffff33;     /* card/background surface */
+  --foreground: #0f1720;  /* readable body text */
+  --muted: rgba(15, 23, 32, 0.55);
+  --accent: #0f1720;      /* link/accent (monochrome) */
+  --dot-color: rgba(120, 120, 120, 0.576);
+  --card-shadow: 0 6px 20px rgba(16, 24, 40, 0.06);
+  --radius: 10px;
 }
 
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-cabin);
+  --font-sans: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   --font-mono: var(--font-geist-mono);
 }
 
@@ -16,11 +23,56 @@
   :root {
     --background: #0a0a0a;
     --foreground: #ededed;
+    --accent: #ededed; /* keep links readable in dark mode */
+    --surface: #69696900; /* dark surfaces for cards */
+  }
+
+  a {
+    border-bottom-color: rgba(237, 237, 237, 0.25);
   }
 }
 
 body {
-  background: var(--background);
+  background: linear-gradient(180deg, var(--background), color-mix(in srgb, var(--background) 85%, rgb(6, 6, 6) 15%) 60%);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: "Cabin", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  line-height: 1.48;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  margin: 0;
+  padding: 0;
+}
+
+/* Link styling */
+a {
+  color: var(--accent);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(15, 23, 32, 0.18);
+  transition: color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
+}
+a:hover {
+  color: color-mix(in srgb, var(--accent) 80%, black 20%);
+  border-bottom-color: transparent;
+  text-decoration: underline;
+}
+
+/* Visited links keep same color (no blue/purple) */
+a:visited {
+  color: var(--accent);
+}
+
+/* Spotify card wrapper */
+.spotify-card {
+  display: inline-block;
+  background: var(--surface);
+  border-radius: var(--radius);
+  box-shadow: var(--card-shadow);
+  padding: 14px;
+}
+
+/* Small, muted text */
+.footer-small {
+  color: var(--muted);
+  font-size: 12px;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index cb613e9..aa6cd86 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,5 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import { Cabin } from "next/font/google";
 import "./globals.css";
 import { DotBackground } from "@/app/components/dotbackground";
 
@@ -14,11 +13,6 @@ const geistMono = Geist_Mono({
   subsets: ["latin"],
 });
 
-const cabin = Cabin({
-  variable: "--font-cabin",
-  subsets: ["latin"],
-  display: "swap",
-});
 
 export const metadata: Metadata = {
   title: {
@@ -50,8 +44,16 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+        <link
+          href="https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} ${cabin.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <DotBackground />
         {children}
diff --git a/app/page.tsx b/app/page.tsx
index 3c57bc2..82b6fbd 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
-import Image from "next/image"
 import React from "react"
 import { FlipWords } from "@/components/ui/flip-words"
+import { AvatarMotion } from "@/app/components/avatar-motion"
 
 export const metadata = {
   title: "Nicholai",
@@ -20,16 +20,13 @@ export default function Home() {
   const year = new Date().getFullYear();
 
   return (
-    <main className="flex min-h-screen items-center justify-center text-neutral-100 antialiased">
+    <main className="flex min-h-screen items-center justify-center antialiased">
       <div className="w-full max-w-xl mx-auto flex flex-col items-center text-center gap-8 px-4 py-12">
         <section aria-label="Profile photo">
-          <Image
+          <AvatarMotion
             src="/images/profile.jpg"
             alt="Hand drawn portrait of Nicholai"
-            width={160}
-            height={160}
-            className="h-40 w-40 rounded-full object-cover ring-1 ring-neutral-800"
-            priority
+            size={160}
           />
         </section>
 
@@ -37,35 +34,35 @@ export default function Home() {
           <h1 id="intro-title" className="text-2xl font-semibold">
             Nicholai
           </h1>
-          <p className="text-xs text-neutral-400 font-normal">
+          <p className="text-xs text-neutral-600 dark:text-neutral-400 font-normal">
             I wanted to justify the $6.39 I spent on the domain.
           </p>
-          <div className="text-sm text-neutral-400">
-            <FlipWords words={["VFX Artist", "Developer", "Guitarist", "Owns a gun"]} className="text-neutral-200" /> 
+          <div className="text-sm text-neutral-700 dark:text-neutral-400">
+            <FlipWords words={["VFX Artist", "Developer", "Guitarist", "Owns a gun"]} className="text-neutral-900 dark:text-neutral-200" /> 
           </div>
         </section>
 
         <nav aria-label="Hyperlinks" className="w-full space-y-1">
-          <p className="text-xs font-medium uppercase tracking-wider text-neutral-500">
+          <p className="text-xs font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500">
             Hyperlinks
           </p>
           <ul className="space-y-1">
-            <li className="text-neutral-200">
+            <li className="text-neutral-900 dark:text-neutral-200">
               VFX Supervisor at{" "}
               <a
                 href="https://biohazardvfx.com"
-                className="underline decoration-neutral-500 hover:decoration-neutral-300"
+                className=""
                 target="_blank"
                 rel="noopener noreferrer"
               >
                 Biohazard VFX
               </a>
             </li>
-            <li className="text-neutral-200">
+            <li className="text-neutral-900 dark:text-neutral-200">
               Developer{" "}
               <a
                 href="https://fortura.cc"
-                className="underline decoration-neutral-500 hover:decoration-neutral-300"
+                className=""
                 target="_blank"
                 rel="noopener noreferrer"
               >
@@ -75,15 +72,15 @@ export default function Home() {
             <li>
               <a
                 href="mailto:nicholai@biohazardvfx.com"
-                className="text-xs underline decoration-neutral-500 hover:decoration-neutral-300"
+                className="text-xs"
               >
                 Email me
               </a>
             </li>
-            <li className="text-neutral-200">
+            <li className="text-neutral-900 dark:text-neutral-200">
               <a
                 href="https://www.instagram.com/nicholai.exe/"
-                className="underline decoration-neutral-500 hover:decoration-neutral-300"
+                className=""
                 target="_blank"
                 rel="me noopener noreferrer"
               >
@@ -94,24 +91,24 @@ export default function Home() {
           </ul>
         </nav>
 
-        <section aria-labelledby="listening-title" className="w-full space-y-2">
-          <p id="listening-title" className="mt-2 text-xs font-medium uppercase tracking-wider text-neutral-500">
-            Listening
-          </p>
-          <div className="relative w-full max-w-sm mx-auto py-2">
-            <iframe
-              title="Spotify playlist"
-              style={{ borderRadius: 12 }}
-              src="https://open.spotify.com/embed/playlist/1kV9JPnhvpfk0UtcpslRpa?utm_source=generator&theme=0"
-              width="100%"
-              height="200"
-              loading="lazy"
-              allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
-            />
-          </div>
+        <section aria-labelledby="listening-title" className="w-full space-y-4">
+            <h3 id="listening-title" className="text-sm font-medium uppercase tracking-wider text-neutral-600 dark:text-neutral-500 mb-4">
+              Listening
+            </h3>
+            <div className="flex-1 flex items-center justify-center">
+              <iframe
+                title="Spotify playlist"
+                style={{ borderRadius: 12 }}
+                src="https://open.spotify.com/embed/playlist/1kV9JPnhvpfk0UtcpslRpa?utm_source=generator&theme=0"
+                width="290"
+                height="220"
+                loading="lazy"
+                allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
+              />
+            </div>
         </section>
 
-        <footer className="pt-6 text-center text-xs text-neutral-500">
+        <footer className="pt-6 text-center text-xs text-neutral-600 dark:text-neutral-500">
           © {year} Nicholai · $6.39 well spent.
         </footer>
       </div>