diff --git a/app/globals.css b/app/globals.css
index 554cbb4..81f050f 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,38 +1,131 @@
 @import 'tailwindcss';
 
 :root {
-  --background: #171717;
+  --background: #0b0b0d;
+  --foreground: #eceae0;
 }
 
 @theme inline {
+  --color-bg: #0b0b0d;
+  --color-surface: #111115;
+  --color-surface2: #18181e;
+  --color-bdr: #26262e;
+  --color-accent: #f4a229;
+  --color-accent2: #ff6b35;
+  --color-ink: #eceae0;
+  --color-muted: #72706a;
+  --color-danger: #e84040;
   --color-background: var(--background);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
-  --color-coffee-50: #f8f8f8;
-  --color-coffee-100: #f1eff0;
-  --color-coffee-200: #e6e2e4;
-  --color-coffee-300: #d8d2d5;
-  --color-coffee-400: #baafb5;
-  --color-coffee-500: #a0939a;
-  --color-coffee-600: #887a81;
-  --color-coffee-700: #70656b;
-  --color-coffee-800: #5f555a;
-  --color-coffee-900: #524a4e;
-  --color-coffee-950: #2a2528;
-  --transparent: #1717178d;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
+  --font-sans: var(--font-syne-family);
+  --font-mono: var(--font-jetbrains-mono);
+  --font-syne: var(--font-syne-family);
+  --animate-fade-up-1: fade-up 0.6s ease forwards 0.2s;
+  --animate-fade-up-2: fade-up 0.7s ease forwards 0.4s;
+  --animate-fade-up-3: fade-up 0.7s ease forwards 0.6s;
+  --animate-fade-up-4: fade-up 0.7s ease forwards 0.8s;
+  --animate-fade-up-5: fade-up 0.7s ease forwards 1s;
+  --animate-fade-up-6: fade-up 0.7s ease forwards 1.2s;
+}
+
+@keyframes fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
   }
 }
 
+/* Grid noise background */
+body::before {
+  content: '';
+  position: fixed;
+  inset: 0;
+  background-image:
+    linear-gradient(#26262e 1px, transparent 1px),
+    linear-gradient(90deg, #26262e 1px, transparent 1px);
+  background-size: 40px 40px;
+  opacity: 0.25;
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* Scroll-triggered fade-in */
+.fade-in {
+  opacity: 0;
+  transform: translateY(16px);
+  transition:
+    opacity 0.6s ease,
+    transform 0.6s ease;
+}
+.fade-in.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* Photo frame — offset accent border */
+.photo-frame::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border: 1px solid #f4a229;
+  border-radius: 4px;
+  transform: translate(8px, 8px);
+  pointer-events: none;
+}
+
+/* Project card — top accent line on hover */
+.project-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: #26262e;
+  transition: background 0.2s;
+}
+.project-card:hover::before {
+  background: #f4a229;
+}
+
+/* Hero scroll — vertical trailing line */
+.hero-scroll::after {
+  content: '';
+  display: block;
+  width: 1px;
+  height: 60px;
+  background: linear-gradient(to bottom, #72706a, transparent);
+  margin: 0.5rem auto 0;
+}
+
+.stats-note code {
+  color: #f4a229;
+  background: rgba(244, 162, 41, 0.08);
+  padding: 0.1rem 0.3rem;
+  border-radius: 2px;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #0b0b0d;
+}
+::-webkit-scrollbar-thumb {
+  background: #26262e;
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #72706a;
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  overflow-x: hidden;
 }
 
 p {
diff --git a/app/layout.tsx b/app/layout.tsx
index 2682dc6..1296f3a 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,16 +1,18 @@
 import type { Metadata } from 'next';
-import { Geist, Geist_Mono } from 'next/font/google';
+import { JetBrains_Mono, Syne } from 'next/font/google';
 import './globals.css';
 import { Analytics } from '@vercel/analytics/next';
 
-const geistSans = Geist({
-  variable: '--font-geist-sans',
+const syne = Syne({
+  variable: '--font-syne-family',
   subsets: ['latin'],
+  weight: ['400', '500', '600', '700', '800'],
 });
 
-const geistMono = Geist_Mono({
-  variable: '--font-geist-mono',
+const jetbrainsMono = JetBrains_Mono({
+  variable: '--font-jetbrains-mono',
   subsets: ['latin'],
+  weight: ['300', '400', '500'],
 });
 
 export const metadata: Metadata = {
@@ -27,7 +29,7 @@ export default function RootLayout({
   return (
     <html lang='en' data-nighteye='disabled' suppressHydrationWarning>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${syne.variable} ${jetbrainsMono.variable} bg-bg text-ink font-mono text-sm leading-relaxed antialiased`}
       >
         {children}
         <Analytics />
diff --git a/app/page.tsx b/app/page.tsx
index 408365d..15828be 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,17 +1,23 @@
+import Nav from '../components/nav';
 import Header from '../components/header';
-import Projects from '../components/projects';
 import About from '../components/about';
+import Stats from '../components/stats';
+import Projects from '../components/projects';
+import Stack from '../components/stack';
+import Contact from '../components/contact';
+import Footer from '../components/footer';
 
 export default function Home() {
   return (
-    <div className='bg-[url(/background.png)] bg-no-repeat bg-cover'>
-      <div className='bg-linear-to-t from-(--color-background) from-60% to-(--transparent) h-screen flex items-center justify-center'>
-        <div className='h-screen overflow-scroll p-8'>
-          <Header />
-          <Projects />
-          <About id='about' />
-        </div>
-      </div>
+    <div className='relative'>
+      <Nav />
+      <Header />
+      <About id='about' />
+      <Stats />
+      <Projects />
+      <Stack />
+      <Contact />
+      <Footer />
     </div>
   );
 }
diff --git a/components/about.tsx b/components/about.tsx
index 1d106cb..f6e83f2 100644
--- a/components/about.tsx
+++ b/components/about.tsx
@@ -1,63 +1,91 @@
 import Image from 'next/image';
+import FadeIn from './fade-in';
+
+const skills = [
+  'JavaScript',
+  'Next.js',
+  'React',
+  'React Native',
+  'Playwright',
+  'ISTQB',
+  'MySQL',
+  'REST APIs',
+  'Git',
+];
 
 interface AboutProps {
   id: string;
 }
 
-export default function about({ id }: AboutProps) {
+export default function About({ id }: AboutProps) {
   return (
-    <section id={id} className='py-12 md:py-16 lg:py-24'>
-      <div className='max-w-7xl mx-auto px-4 md:px-6 lg:px-8'>
-        <div className='flex flex-col md:flex-row md:items-center gap-12 md:gap-16'>
-          {/* Image */}
-          <div className='relative w-full aspect-9/6 basis-1/5 md:basis-2/5 md:aspect-3/5 lg:basis-2/7 lg:aspect-4/5'>
+    <section id={id} className='relative z-10 border-t border-bdr px-6 py-20 md:px-10'>
+      <FadeIn>
+        <div className='mb-12 flex items-baseline gap-4'>
+          <span className='text-[11px] tracking-[0.1em] text-accent'>01</span>
+          <h2 className='font-syne text-[clamp(1.8rem,4vw,2.8rem)] leading-none font-bold tracking-tight text-ink'>
+            About Me
+          </h2>
+          <div className='mb-1.5 h-px flex-1 bg-bdr'></div>
+        </div>
+      </FadeIn>
+
+      <div className='grid grid-cols-1 items-start gap-16 md:grid-cols-[1fr_2fr]'>
+        <div>
+          <div className='photo-frame relative aspect-[3/4] max-w-[280px] overflow-hidden rounded-[4px] border border-bdr bg-surface'>
             <Image
               src='/aboutme.jpg'
               alt='Portrait of Torun Alenius Wikström'
-              fill={true}
-              className='object-cover rounded-2xl'
-              sizes='(min-width: 768px) 40vw, 100vw'
+              fill
+              className='object-cover'
+              sizes='280px'
+              priority
             />
           </div>
+        </div>
 
-          {/* Text */}
-          <div className='basis-4/5 md:basis-3/5 lg:basis-5/7 flex flex-col gap-6 md:gap-8'>
-            <h2 className='text-4xl font-bold'>About Me</h2>
-
-            <div className='flex flex-col gap-4 md:gap-5 lg:gap-6 text-base leading-7 md:leading-8 lg:leading-9'>
-              <p>
-                I’m an ISTQB Certified QA professional with a background in full
-                stack development. I work mainly with JavaScript and Next.js,
-                and I’ve built and deployed both web and mobile applications,
-                including projects with database integrations, API connections,
-                and payment systems.
-              </p>
-
-              <p>
-                I started learning web development through documentation, online
-                resources, and mentorship from a senior developer. After
-                building several projects and releasing a mobile app, I became
-                increasingly interested in quality, edge cases, and system
-                behavior. That curiosity led me to study software testing more
-                seriously and earn my ISTQB Foundation Level certification.
-              </p>
-
-              <p>
-                Having written production code myself, I understand how features
-                are structured, where complexity hides, and how small changes
-                can affect the whole system. I now want to work in QA, combining
-                structured testing knowledge with hands on development
-                experience.
-              </p>
+        <FadeIn>
+          <h3 className='font-syne mb-5 text-[1.4rem] font-semibold text-ink'>
+            Hey, I&apos;m Torun Alenius Wikström —
+          </h3>
+          <p className='mb-4 text-[13px] leading-[1.9] text-muted'>
+            I&apos;m an ISTQB Certified QA professional with a background in
+            full stack development. I work mainly with JavaScript and Next.js,
+            and I&apos;ve built and deployed both web and mobile applications,
+            including projects with database integrations, API connections, and
+            payment systems.
+          </p>
+          <p className='mb-4 text-[13px] leading-[1.9] text-muted'>
+            I started learning web development through documentation, online
+            resources, and mentorship from a senior developer. After building
+            several projects and releasing a mobile app, I became increasingly
+            interested in quality, edge cases, and system behavior. That
+            curiosity led me to study software testing more seriously and earn
+            my ISTQB Foundation Level certification.
+          </p>
+          <p className='mb-4 text-[13px] leading-[1.9] text-muted'>
+            Having written production code myself, I understand how features are
+            structured, where complexity hides, and how small changes can affect
+            the whole system. I now want to work in QA, combining structured
+            testing knowledge with hands on development experience.
+          </p>
+          <p className='text-[13px] leading-[1.9] text-muted'>
+            Outside of tech, I design knitting patterns, which, much like
+            writing test cases, requires translating complex structures into
+            clear, logical, and reproducible instructions.
+          </p>
 
-              <p>
-                Outside of tech, I design knitting patterns, which, much like
-                writing test cases, requires translating complex structures into
-                clear, logical, and reproducible instructions.
-              </p>
-            </div>
+          <div className='mt-8 flex flex-wrap gap-2'>
+            {skills.map((skill) => (
+              <span
+                key={skill}
+                className='cursor-default rounded-[2px] border border-bdr px-3 py-1 text-[11px] tracking-[0.06em] text-muted transition hover:border-accent hover:text-accent'
+              >
+                {skill}
+              </span>
+            ))}
           </div>
-        </div>
+        </FadeIn>
       </div>
     </section>
   );
diff --git a/components/contact.tsx b/components/contact.tsx
new file mode 100644
index 0000000..ed1a0d5
--- /dev/null
+++ b/components/contact.tsx
@@ -0,0 +1,100 @@
+import Link from 'next/link';
+import FadeIn from './fade-in';
+
+const contacts = [
+  {
+    href: 'https://github.com/TorunW',
+    label: 'github.com/TorunW',
+    icon: '⎇',
+    external: true,
+  },
+  {
+    href: 'https://linkedin.com/in/torun-wikström-a77011220',
+    label: 'linkedin.com/in/torun-wikström',
+    icon: 'in',
+    external: true,
+    boldIcon: true,
+  },
+  {
+    href: '/cv',
+    label: 'Download Resume',
+    icon: '↓',
+    external: false,
+  },
+];
+
+export default function Contact() {
+  return (
+    <section
+      id='contact'
+      className='relative z-10 border-t border-bdr px-6 py-20 md:px-10'
+    >
+      <FadeIn>
+        <div className='mb-12 flex items-baseline gap-4'>
+          <span className='text-[11px] tracking-[0.1em] text-accent'>05</span>
+          <h2 className='font-syne text-[clamp(1.8rem,4vw,2.8rem)] leading-none font-bold tracking-tight text-ink'>
+            Contact
+          </h2>
+          <div className='mb-1.5 h-px flex-1 bg-bdr'></div>
+        </div>
+      </FadeIn>
+
+      <div className='grid grid-cols-1 items-start gap-16 md:grid-cols-2'>
+        <FadeIn>
+          <p className='font-syne mb-6 text-[clamp(2rem,5vw,3.5rem)] leading-none font-extrabold tracking-tight text-ink'>
+            Let&apos;s build
+            <br />
+            something
+            <br />
+            <span className='text-accent'>worth shipping.</span>
+          </p>
+          <p className='max-w-xs text-[12px] leading-[1.9] text-muted'>
+            Open to QA roles, full-time opportunities, and collaborations where
+            testing and development meet.
+          </p>
+        </FadeIn>
+
+        <FadeIn>
+          <div className='flex flex-col gap-4'>
+            {contacts.map((item) => {
+              const className =
+                'flex justify-between items-center px-5 py-4 border border-bdr rounded-[6px] no-underline text-muted text-[12px] transition hover:border-accent hover:text-accent hover:bg-accent/[0.04]';
+
+              const inner = (
+                <>
+                  <div className='flex items-center gap-3'>
+                    <span className={item.boldIcon ? 'text-xs font-bold' : ''}>
+                      {item.icon}
+                    </span>
+                    <span>{item.label}</span>
+                  </div>
+                  <span>→</span>
+                </>
+              );
+
+              if (item.external) {
+                return (
+                  <a
+                    key={item.href}
+                    href={item.href}
+                    target='_blank'
+                    rel='noopener noreferrer'
+                    className={className}
+                  >
+                    {inner}
+                  </a>
+                );
+              }
+
+              return (
+                <Link key={item.href} href={item.href} className={className}>
+                  {inner}
+                </Link>
+              );
+            })}
+          </div>
+        </FadeIn>
+      </div>
+    </section>
+  );
+}
diff --git a/components/fade-in.tsx b/components/fade-in.tsx
new file mode 100644
index 0000000..a2d3062
--- /dev/null
+++ b/components/fade-in.tsx
@@ -0,0 +1,38 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+
+export default function FadeIn({
+  children,
+  className = '',
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            entry.target.classList.add('visible');
+          }
+        });
+      },
+      { threshold: 0.1 },
+    );
+
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <div ref={ref} className={`fade-in ${className}`}>
+      {children}
+    </div>
+  );
+}
diff --git a/components/footer.tsx b/components/footer.tsx
new file mode 100644
index 0000000..3927b69
--- /dev/null
+++ b/components/footer.tsx
@@ -0,0 +1,9 @@
+export default function Footer() {
+  return (
+    <footer className='relative z-10 flex flex-col items-center justify-between gap-3 border-t border-bdr px-6 py-8 text-[11px] tracking-[0.05em] text-muted md:flex-row md:px-10'>
+      <span>© {new Date().getFullYear()} Torun Wikström</span>
+      <span className='text-bdr'>{'///'}</span>
+      <span>Designed &amp; built by hand</span>
+    </footer>
+  );
+}
diff --git a/components/header.tsx b/components/header.tsx
index 18b6928..854e91e 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -1,61 +1,64 @@
-import { Github, Linkedin, NotepadText, User } from 'lucide-react';
-import Link from 'next/link';
-
-export default function header() {
+export default function Header() {
   return (
-    <section className='py-12 md:py-16 lg:py-24'>
-      <div className='max-w-7xl mx-auto px-4 md:px-6 lg:px-8'>
-        <div className='flex flex-col gap-8 md:gap-10 lg:gap-12'>
-          <h1 className='text-5xl md:text-6xl font-bold text-(--color-coffee-50)'>
-            Torun Alenius Wikström
-          </h1>
+    <section className='relative z-10 flex min-h-screen flex-col justify-end px-6 pt-24 pb-20 md:px-10'>
+      <div className='mb-6 animate-fade-up-1 text-[11px] tracking-[0.2em] text-accent uppercase opacity-0'>
+        {'//'} junior QA engineer · ISTQB certified
+      </div>
+
+      <h1 className='font-syne mb-6 animate-fade-up-2 text-[clamp(3.5rem,10vw,9rem)] leading-[0.9] font-extrabold tracking-tight text-ink opacity-0'>
+        Torun
+        <br />
+        <span className='text-accent'>Wikström</span>
+      </h1>
 
-          <div className='flex flex-col gap-3 md:gap-4'>
-            <h2 className='text-2xl md:text-3xl text-(--color-coffee-200)'>
-              Web Developer & Software Tester
-            </h2>
+      <p className='mb-10 max-w-[550px] animate-fade-up-3 text-[13px] leading-[1.8] text-muted opacity-0'>
+        Web developer &amp; software tester. Junior QA Engineer (ISTQB
+        Certified) with a development background, focused on building and
+        validating reliable, well structured software systems.
+      </p>
 
-            <p className='max-w-2xl text-base leading-7 md:leading-8 lg:leading-9'>
-              Junior QA Engineer (ISTQB Certified) with a development
-              background, focused on building and validating reliable, well
-              structured software systems.
-            </p>
-          </div>
-          <div className='grid lg:grid-row-1 grid-cols-2 gap-4 w-fit'>
-            <a
-              href={'https://linkedin.com/in/torun-wikström-a77011220'}
-              target='_blank'
-              rel='noopener noreferrer'
-              className='bg-(--color-coffee-900) text-sm md:text-base hover:bg-(--color-coffee-950) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-            >
-              <Linkedin className='w-4 h-4 mr-2' />
-              LinkedIn
-            </a>
+      <div className='mb-16 flex flex-wrap gap-4 animate-fade-up-4 opacity-0'>
+        <a
+          href='#projects'
+          className='inline-flex items-center gap-1.5 rounded border border-accent bg-accent px-4 py-2 font-mono text-xs font-medium text-bg no-underline transition hover:border-accent2 hover:bg-accent2'
+        >
+          View Projects
+        </a>
+        <a
+          href='#contact'
+          className='inline-flex items-center gap-1.5 rounded border border-bdr bg-transparent px-4 py-2 font-mono text-xs text-ink no-underline transition hover:border-accent hover:text-accent'
+        >
+          Get In Touch
+        </a>
+      </div>
+
+      <div className='flex animate-fade-up-5 items-center gap-6 opacity-0'>
+        <a
+          href='https://github.com/TorunW'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='flex items-center gap-1.5 text-xs tracking-[0.06em] text-muted no-underline transition hover:text-accent'
+        >
+          <span className='text-[10px]'>↗</span>GitHub
+        </a>
+        <a
+          href='https://linkedin.com/in/torun-wikström-a77011220'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='flex items-center gap-1.5 text-xs tracking-[0.06em] text-muted no-underline transition hover:text-accent'
+        >
+          <span className='text-[10px]'>↗</span>LinkedIn
+        </a>
+        <a
+          href='/cv'
+          className='flex items-center gap-1.5 text-xs tracking-[0.06em] text-muted no-underline transition hover:text-accent'
+        >
+          <span className='text-[10px]'>↗</span>CV
+        </a>
+      </div>
 
-            <a
-              href={'https://github.com/TorunW'}
-              target='_blank'
-              rel='noopener noreferrer'
-              className='bg-(--color-coffee-900) text-sm md:text-base hover:bg-(--color-coffee-950) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-            >
-              <Github className='w-4 h-4 mr-2' />
-              GitHub
-            </a>
-            <Link
-              href={'/cv'}
-              className='bg-(--color-coffee-900) text-sm md:text-base hover:bg-(--color-coffee-950) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-            >
-              <NotepadText className='w-4 h-4 mr-2' /> Read my CV
-            </Link>
-            <Link
-              href={'/#about'}
-              className='bg-(--color-coffee-900) text-sm md:text-base hover:bg-(--color-coffee-950) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-            >
-              <User className='w-4 h-4 mr-2' />
-              About me
-            </Link>
-          </div>
-        </div>
+      <div className='hero-scroll absolute right-6 bottom-8 animate-fade-up-6 text-[11px] tracking-[0.15em] text-muted uppercase opacity-0 [writing-mode:vertical-rl] md:right-10'>
+        Scroll
       </div>
     </section>
   );
diff --git a/components/nav.tsx b/components/nav.tsx
new file mode 100644
index 0000000..88eb1ad
--- /dev/null
+++ b/components/nav.tsx
@@ -0,0 +1,52 @@
+import Link from 'next/link';
+
+const navLinks = [
+  { href: '#about', label: 'About' },
+  { href: '#stats', label: 'Open Source' },
+  { href: '#projects', label: 'Projects' },
+  { href: '#stack', label: 'Stack' },
+  { href: '#contact', label: 'Contact' },
+];
+
+export default function Nav() {
+  return (
+    <nav className='fixed top-0 right-0 left-0 z-50 flex items-center justify-between border-b border-bdr bg-bg/85 px-6 py-5 backdrop-blur-md md:px-10'>
+      <Link
+        href='/'
+        className='font-syne text-lg font-extrabold tracking-tight text-accent no-underline'
+      >
+        TW<span className='text-ink'>.</span>
+      </Link>
+
+      <ul className='hidden list-none gap-8 md:flex'>
+        {navLinks.map((link) => (
+          <li key={link.href}>
+            <a
+              href={link.href}
+              className='text-xs tracking-widest text-muted uppercase no-underline transition-colors hover:text-ink'
+            >
+              {link.label}
+            </a>
+          </li>
+        ))}
+      </ul>
+
+      <div className='flex items-center gap-3'>
+        <a
+          href='https://github.com/TorunW'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='inline-flex items-center gap-1.5 rounded border border-bdr bg-transparent px-4 py-2 font-mono text-xs text-ink no-underline transition hover:border-accent hover:text-accent'
+        >
+          GitHub
+        </a>
+        <Link
+          href='/cv'
+          className='inline-flex items-center gap-1.5 rounded border border-accent bg-accent px-4 py-2 font-mono text-xs font-medium text-bg no-underline transition hover:border-accent2 hover:bg-accent2'
+        >
+          ↓ Resume
+        </Link>
+      </div>
+    </nav>
+  );
+}
diff --git a/components/projects.tsx b/components/projects.tsx
index f8c096f..bfde981 100644
--- a/components/projects.tsx
+++ b/components/projects.tsx
@@ -1,205 +1,169 @@
-import Image from 'next/image';
 import Link from 'next/link';
+import FadeIn from './fade-in';
+
+type Project = {
+  title: string;
+  category: string;
+  categoryTone: 'accent' | 'danger';
+  description: string;
+  tags: string[];
+  meta: string[];
+  href: string;
+  secondaryHref?: string;
+  secondaryLabel?: string;
+};
+
+const projects: Project[] = [
+  {
+    title: 'TicTacToe – Testing Playground',
+    category: 'QA / Testing',
+    categoryTone: 'danger',
+    description:
+      'Built a TicTacToe web app with Next.js to practice structured software testing — requirements, test cases, white/black box techniques, and Playwright automation in progress.',
+    tags: ['Next.js', 'Playwright', 'Manual Testing', 'ISTQB'],
+    meta: ['✅ Test lifecycle', '⚡ Automation in progress'],
+    href: '/tictactoe-testing',
+    secondaryHref: 'https://github.com/TorunW/TicTacToe',
+    secondaryLabel: 'GitHub',
+  },
+  {
+    title: 'Tempesta Bookmark Manager',
+    category: 'Open Source',
+    categoryTone: 'accent',
+    description:
+      'Contributed testing to an open-source Rust bookmark manager — happy-path coverage for core features, and ongoing work to realign tests after a major refactor.',
+    tags: ['Rust', 'Testing', 'Open Source'],
+    meta: ['⎇ Fork with tests'],
+    href: 'https://github.com/TorunW/tempesta',
+  },
+  {
+    title: 'NGO Organisation Website',
+    category: 'Web Dev',
+    categoryTone: 'accent',
+    description:
+      'Migrated a full-stack NGO site from WordPress to Next.js and MySQL. Added Stripe donations, membership flows, an admin dashboard, and post-deploy workflow testing.',
+    tags: ['Next.js', 'MySQL', 'Stripe', 'Testing'],
+    meta: ['🌐 Live site'],
+    href: 'https://www.juedische-stimme.de/',
+  },
+  {
+    title: 'Pixense Mobile Application',
+    category: 'Mobile',
+    categoryTone: 'accent',
+    description:
+      'React Native Expo app with AI image generation (DALL·E 3) and Imagga tagging. Shipped to Google Play; demo available on Appetize.',
+    tags: ['React Native', 'Expo', 'OpenAI', 'Imagga'],
+    meta: ['📱 Mobile', '↗ Appetize demo'],
+    href: 'https://github.com/TorunW/pixense/',
+    secondaryHref: 'https://appetize.io/app/b_pszrvccbsdwxq4cxq6n2x5477e',
+    secondaryLabel: 'Appetize',
+  },
+];
+
+function CategoryBadge({
+  label,
+  tone,
+}: {
+  label: string;
+  tone: 'accent' | 'danger';
+}) {
+  const classes =
+    tone === 'danger'
+      ? 'bg-danger/10 text-danger border-danger/20'
+      : 'bg-accent/10 text-accent border-accent/20';
 
-export default function projects() {
   return (
-    <div className='flex flex-col justify-center items-center max-w-7xl px-4 md:px-6 lg:px-8'>
-      <h2 className='text-4xl font-bold text-center mt-4 md:mt-6 lg:mt-0 mb-8 md:mb-12'>
-        Projects
-      </h2>
-      <div className='flex flex-col gap-12 md:gap-16 lg:gap-20'>
-        <div className='pb-12 md:pb-20 lg:pb-24'>
-          <div className='flex flex-col md:flex-row justify-center'>
-            <div className='order-1 md:order-0 relative w-full md:basis-2/5 aspect-video'>
-              <Image
-                src={'/Tictactoe-still.png'}
-                alt='image of tictactoe app'
-                fill={true}
-                className='object-cover rounded'
-              />
-            </div>
-            <div className='order-2 md:order-0 bg-(--color-coffee-950) rounded p-6 md:p-8 relative md:top-12 lg:top-16 md:basis-3/5 z-10 md:-ml-16 lg:-ml-20'>
-              <h3 className='text-3xl text-(--color-coffee-200) mt-2 md:mt-3 lg:mt-4 mb-3 md:mb-4'>
-                TicTacToe – Testing Playground
-              </h3>
-              <p className='text-base mb-4 md:mb-5 lg:mb-6 leading-7 md:leading-8 lg:leading-9'>
-                Built a TicTacToe web application using Next.js to apply
-                structured software testing practices in a controlled
-                environment.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                Defined functional requirements, created test cases and a test
-                plan, and applied both white box and black box static testing
-                techniques. The project focuses primarily on manual testing
-                methodology, with end to end test automation using Playwright
-                currently being implemented.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                Demonstrates the full manual testing lifecycle from requirement
-                analysis to execution, while progressively expanding into
-                automation practices.
-              </p>
-              <div className='flex flex-row gap-4'>
-                <Link
-                  href={'/tictactoe-testing'}
-                  scroll={true}
-                  className='bg-(--color-coffee-800) text-sm md:text-base hover:bg-(--color-coffee-900) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-                >
-                  Testing showcase
-                </Link>
-                <a
-                  href={'https://github.com/TorunW/TicTacToe'}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  className='bg-(--color-coffee-800) text-sm md:text-base hover:bg-(--color-coffee-900) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-                >
-                  Github
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
+    <span
+      className={`rounded-[2px] border px-2.5 py-0.5 text-[10px] tracking-[0.15em] uppercase ${classes}`}
+    >
+      {label}
+    </span>
+  );
+}
 
-        <div className='pb-12 md:pb-20 lg:pb-24'>
-          <div className='flex flex-col md:flex-row  justify-center'>
-            <div className='order-2 md:order-0 bg-(--color-coffee-950) rounded p-6 md:p-8 relative md:top-12 lg:top-16 md:basis-3/5 z-10 md:-mr-16 lg:-mr-20'>
-              <h3 className='text-3xl text-(--color-coffee-200) mt-2 md:mt-3 lg:mt-4 mb-3 md:mb-4'>
-                Tempesta Bookmark Manager
-              </h3>
-              <p className='text-base mb-4 md:mb-5 lg:mb-6 leading-7 md:leading-8 lg:leading-9'>
-                Contributed testing work to an open source Rust based bookmark
-                management project.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                Performed early happy path testing of core features such as
-                bookmark creation and editing, and collaborated with developers
-                to verify expected behaviour. <br />
-                The project has undergone a major refactoring. As a result, the
-                existing tests require updates to match the new code structure.
-                I am currently reviewing the refactored architecture and
-                preparing updates to realign the automated tests. The repository
-                currently linked is my fork of the project, which showcases the
-                original testing implementation.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                This project provided experience working within an existing
-                codebase, validating functionality during development changes,
-                and understanding how refactoring impacts test suites.
-              </p>
-              <a
-                href={'https://github.com/TorunW/tempesta'}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='bg-(--color-coffee-800) text-sm md:text-base hover:bg-(--color-coffee-900) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-              >
-                Github
-              </a>
-            </div>
-            <div className='order-1 md:order-0 relative w-full md:basis-2/5 aspect-video'>
-              <Image
-                src={'/tempesta-still.png'}
-                alt='image'
-                fill
-                className='object-cover rounded'
-              />
-            </div>
-          </div>
+export default function Projects() {
+  return (
+    <section
+      id='projects'
+      className='relative z-10 border-t border-bdr px-6 py-20 md:px-10'
+    >
+      <FadeIn>
+        <div className='mb-12 flex items-baseline gap-4'>
+          <span className='text-[11px] tracking-[0.1em] text-accent'>03</span>
+          <h2 className='font-syne text-[clamp(1.8rem,4vw,2.8rem)] leading-none font-bold tracking-tight text-ink'>
+            Projects
+          </h2>
+          <div className='mb-1.5 h-px flex-1 bg-bdr'></div>
         </div>
+      </FadeIn>
 
-        <div className='pb-12 md:pb-20 lg:pb-24'>
-          <div className='flex flex-col md:flex-row justify-center'>
-            <div className='order-1 md:order-0 relative w-full md:basis-2/5 aspect-video'>
-              <Image
-                src={'/NGO-still.png'}
-                alt='image'
-                fill
-                className='object-cover rounded'
-              />
-            </div>
-            <div className='order-2 md:order-0 bg-(--color-coffee-950) rounded p-6 md:p-8 relative md:top-12 lg:top-16 md:basis-3/5 z-10 md:-ml-16 lg:-ml-20'>
-              <h3 className='text-3xl text-(--color-coffee-200) mt-2 md:mt-3 lg:mt-4 mb-3 md:mb-4'>
-                NGO Organisation Website
-              </h3>
-              <p className='text-base mb-4 md:mb-5 lg:mb-6 leading-7 md:leading-8 lg:leading-9'>
-                Developed and migrated a full stack website from WordPress to a
-                custom Next.js and MySQL solution based on stakeholder
-                requirements gathered through planning meetings. Collaborated
-                with a senior developer who primarily focused on backend
-                architecture and acted as a technical mentor, while also
-                contributing to backend implementation.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                Implemented secure online donation functionality using Stripe,
-                improved membership and newsletter sign up workflows, and
-                introduced an administrative dashboard for managing content and
-                user data. Performed workflow based testing of payment
-                processes, authentication, and form validation following
-                deployment.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                Live site may experience occasional downtime due to external
-                factors. Public repository not available due to client
-                confidentiality and data protection requirements. Source code
-                available upon request.
-              </p>
-              <a
-                href={'https://www.juedische-stimme.de/'}
-                target='_blank'
-                rel='noopener noreferrer'
-                className='bg-(--color-coffee-800) text-sm md:text-base hover:bg-(--color-coffee-900) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-              >
-                Website
-              </a>
-            </div>
-          </div>
-        </div>
+      <FadeIn>
+        <div className='grid grid-cols-1 gap-px overflow-hidden rounded-[6px] border border-bdr bg-bdr md:grid-cols-2'>
+          {projects.map((project) => {
+            const isInternal = project.href.startsWith('/');
+            const CardTag = isInternal ? Link : 'a';
+            const cardProps = isInternal
+              ? { href: project.href }
+              : {
+                  href: project.href,
+                  target: '_blank' as const,
+                  rel: 'noopener noreferrer',
+                };
 
-        <div className='pb-12 md:pb-20 lg:pb-24'>
-          <div className='flex flex-col md:flex-row justify-center'>
-            <div className='order-2 md:order-0 bg-(--color-coffee-950) rounded p-6 md:p-8 relative md:top-12 lg:top-16 md:basis-3/5 z-10 md:-mr-16 lg:-mr-20'>
-              <h3 className='text-3xl text-(--color-coffee-200) mt-2 md:mt-3 lg:mt-4 mb-3 md:mb-4'>
-                Pixense Mobile Application
-              </h3>
-              <p className='text-base mb-4 md:mb-5 lg:mb-6 leading-7 md:leading-8 lg:leading-9'>
-                Developed a mobile application using React Native Expo featuring
-                AI powered image generation and image recognition workflows.
-                Integrated OpenAI DALL E 3 for prompt based image generation and
-                the Imagga API for automated image tagging.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                Successfully managed the full release process to the Google Play
-                Store, including configuration, deployment, and compliance
-                requirements. The application was later removed due to ongoing
-                platform verification and maintenance demands that were not
-                feasible for a learning focused project.
-                <span className='block h-2 md:h-3 lg:h-4'></span>
-                The project provided hands on experience with mobile
-                architecture, third party API integration, and production level
-                deployment workflows. A live demo is available via Appetize.
-              </p>
-              <div className='flex flex-row gap-4'>
-                <a
-                  href={'https://github.com/TorunW/pixense/'}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  className='bg-(--color-coffee-800) text-sm md:text-base hover:bg-(--color-coffee-900) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
-                >
-                  Github
-                </a>
-                <a
-                  href={'https://appetize.io/app/b_pszrvccbsdwxq4cxq6n2x5477e'}
-                  target='_blank'
-                  rel='noopener noreferrer'
-                  className='bg-(--color-coffee-800) text-sm md:text-base hover:bg-(--color-coffee-900) hover:cursor-pointer text-(--color-coffee-200) font-bold py-2 px-4 rounded inline-flex items-center '
+            return (
+              <div
+                key={project.title}
+                className='project-card relative flex flex-col gap-4 bg-surface p-8 transition-colors hover:bg-surface2'
+              >
+                <CardTag
+                  {...cardProps}
+                  className='flex flex-col gap-4 text-inherit no-underline'
                 >
-                  Play around with the App on Appetize
-                </a>
+                  <div className='flex items-start justify-between'>
+                    <CategoryBadge
+                      label={project.category}
+                      tone={project.categoryTone}
+                    />
+                    <span className='text-xl text-muted'>↗</span>
+                  </div>
+                  <div className='font-syne text-xl leading-tight font-bold tracking-tight text-ink'>
+                    {project.title}
+                  </div>
+                  <p className='flex-1 text-[12px] leading-[1.8] text-muted'>
+                    {project.description}
+                  </p>
+                  <div className='flex flex-wrap gap-1.5'>
+                    {project.tags.map((tag) => (
+                      <span
+                        key={tag}
+                        className='rounded-[2px] border border-bdr px-2 py-0.5 text-[10px] text-muted'
+                      >
+                        {tag}
+                      </span>
+                    ))}
+                  </div>
+                </CardTag>
+
+                <div className='flex flex-wrap items-center gap-4 border-t border-bdr pt-4 text-[11px] text-muted'>
+                  {project.meta.map((item) => (
+                    <span key={item}>{item}</span>
+                  ))}
+                  {project.secondaryHref && (
+                    <a
+                      href={project.secondaryHref}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      className='text-accent no-underline transition hover:text-accent2'
+                    >
+                      {project.secondaryLabel} ↗
+                    </a>
+                  )}
+                </div>
               </div>
-            </div>
-            <div className='order-1 md:order-0 relative w-full md:basis-2/5 aspect-video'>
-              <Image
-                src={'/Pixense-still.png'}
-                alt='image'
-                fill
-                className='object-cover rounded'
-              />
-            </div>
-          </div>
+            );
+          })}
         </div>
-      </div>
-    </div>
+      </FadeIn>
+    </section>
   );
 }
diff --git a/components/stack.tsx b/components/stack.tsx
new file mode 100644
index 0000000..6ecea30
--- /dev/null
+++ b/components/stack.tsx
@@ -0,0 +1,79 @@
+import FadeIn from './fade-in';
+
+const stack = [
+  {
+    title: 'Frontend',
+    items: [
+      'React / Next.js',
+      'TypeScript / JavaScript',
+      'React Native / Expo',
+      'CSS / Tailwind',
+    ],
+  },
+  {
+    title: 'Backend',
+    items: [
+      'Node.js',
+      'MySQL',
+      'REST APIs',
+      'Stripe',
+    ],
+  },
+  {
+    title: 'Testing & QA',
+    items: [
+      'ISTQB Foundation',
+      'Playwright',
+      'Manual test design',
+      'White / black box',
+    ],
+  },
+  {
+    title: 'DevOps & Tools',
+    items: [
+      'Git / GitHub',
+      'Google Play release',
+      'Vercel',
+      'Linux / Bash',
+    ],
+  },
+];
+
+export default function Stack() {
+  return (
+    <section id='stack' className='relative z-10 border-t border-bdr px-6 py-20 md:px-10'>
+      <FadeIn>
+        <div className='mb-12 flex items-baseline gap-4'>
+          <span className='text-[11px] tracking-[0.1em] text-accent'>04</span>
+          <h2 className='font-syne text-[clamp(1.8rem,4vw,2.8rem)] leading-none font-bold tracking-tight text-ink'>
+            Tech Stack
+          </h2>
+          <div className='mb-1.5 h-px flex-1 bg-bdr'></div>
+        </div>
+      </FadeIn>
+
+      <FadeIn>
+        <div className='grid grid-cols-2 gap-8 md:grid-cols-4'>
+          {stack.map((column) => (
+            <div key={column.title}>
+              <h4 className='mb-4 border-b border-bdr pb-2 text-[10px] tracking-[0.15em] text-accent uppercase'>
+                {column.title}
+              </h4>
+              <div className='flex flex-col gap-2.5'>
+                {column.items.map((item) => (
+                  <div
+                    key={item}
+                    className='flex items-center gap-3 text-[12px] text-muted'
+                  >
+                    <span className='h-1 w-1 shrink-0 rounded-full bg-accent'></span>
+                    {item}
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </FadeIn>
+    </section>
+  );
+}
diff --git a/components/stats.tsx b/components/stats.tsx
new file mode 100644
index 0000000..0c9a476
--- /dev/null
+++ b/components/stats.tsx
@@ -0,0 +1,36 @@
+import FadeIn from './fade-in';
+
+export default function Stats() {
+  return (
+    <section id='stats' className='relative z-10 border-t border-bdr px-6 py-20 md:px-10'>
+      <FadeIn>
+        <div className='mb-12 flex items-baseline gap-4'>
+          <span className='text-[11px] tracking-[0.1em] text-accent'>02</span>
+          <h2 className='font-syne text-[clamp(1.8rem,4vw,2.8rem)] leading-none font-bold tracking-tight text-ink'>
+            Open Source
+          </h2>
+          <div className='mb-1.5 h-px flex-1 bg-bdr'></div>
+        </div>
+      </FadeIn>
+
+      <FadeIn>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-2'>
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src='https://github-readme-stats.vercel.app/api?username=TorunW&show_icons=true&theme=dark&hide_border=true&bg_color=111115&title_color=F4A229&icon_color=F4A229&text_color=ECEAE0&count_private=true'
+            alt='GitHub Stats for TorunW'
+            loading='lazy'
+            className='w-full rounded-[6px] border border-bdr brightness-90 saturate-[0.85] transition-all hover:brightness-100 hover:saturate-100'
+          />
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src='https://github-readme-stats.vercel.app/api/top-langs/?username=TorunW&layout=compact&theme=dark&hide_border=true&bg_color=111115&title_color=F4A229&text_color=ECEAE0'
+            alt='Top languages for TorunW'
+            loading='lazy'
+            className='w-full rounded-[6px] border border-bdr brightness-90 saturate-[0.85] transition-all hover:brightness-100 hover:saturate-100'
+          />
+        </div>
+      </FadeIn>
+    </section>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index ceea636..4b06653 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3311,6 +3311,20 @@
         "@svta/cml-utils": "1.0.1"
       }
     },
+    "node_modules/@svta/cml-cta": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-cta/-/cml-cta-1.0.1.tgz",
+      "integrity": "sha512-jcXqNIPv26bmFxIOFh8/c3+6WLH4qBjKpq9qTQcggDPoHuV1YBydMsJLOnYPDeK8rNMKcAkFLbnDRvyJthu5yw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-structured-field-values": "1.0.1",
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
     "node_modules/@svta/cml-dash": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@svta/cml-dash/-/cml-dash-1.0.1.tgz",
@@ -3345,6 +3359,29 @@
         "@svta/cml-xml": "1.0.1"
       }
     },
+    "node_modules/@svta/cml-structured-field-values": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-structured-field-values/-/cml-structured-field-values-1.0.1.tgz",
+      "integrity": "sha512-Kibciki59Pon3Pn/sl5uyrbJcSpZQDKqdCfDrokBvOdLoqqcd0oFrkEPsZBiuuIODX1CB80612xe8hopeFDyBA==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      },
+      "peerDependencies": {
+        "@svta/cml-utils": "1.0.1"
+      }
+    },
+    "node_modules/@svta/cml-utils": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@svta/cml-utils/-/cml-utils-1.0.1.tgz",
+      "integrity": "sha512-kso3curTJfp00I1mKFoBliBApjn4aPE+wF8cPucf7TrSDVWZDeLLuF14ASmUE9m7rnrqTTK4878VvmXaXcCCfQ==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/@svta/cml-xml": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@svta/cml-xml/-/cml-xml-1.0.1.tgz",
@@ -3669,7 +3706,7 @@
       "version": "19.2.7",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz",
       "integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -4561,7 +4598,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-react-compiler/-/babel-plugin-react-compiler-1.0.0.tgz",
       "integrity": "sha512-Ixm8tFfoKKIPYdCCKYTsqv+Fd4IJ0DQqMyEimo+pxUOMUR9cVPlwTrFt9Avu+3cb6Zp3mAzl+t1MrG2fxxKsxw==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/types": "^7.26.0"
       }
@@ -4927,7 +4964,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/custom-media-element": {
       "version": "1.4.5",
@@ -7394,6 +7431,19 @@
         "node": ">=8.6"
       }
     },
+    "node_modules/micromatch/node_modules/picomatch": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz",
+      "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/mime-db": {
       "version": "1.52.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
@@ -7930,12 +7980,13 @@
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="
     },
     "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.5.tgz",
+      "integrity": "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A==",
       "dev": true,
+      "license": "MIT",
       "engines": {
-        "node": ">=8.6"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/jonschlinkert"
@@ -8010,6 +8061,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.9.5.tgz",
+      "integrity": "sha512-/FVl766LpUfB5vXgCYOYa0MeV/441Ia99AeICQIQFTY/Nw0roZwULcXpku5i1/m5kt/baz+s4Zogspd839HSMg==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.7.2",
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.7.2.tgz",
@@ -8919,18 +8986,6 @@
         "url": "https://github.com/sponsors/SuperchupuDev"
       }
     },
-    "node_modules/tinyglobby/node_modules/picomatch": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
-      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",