diff --git a/app/[slug]/page.tsx b/app/[slug]/page.tsx
index 917db97d..7c4faacd 100644
--- a/app/[slug]/page.tsx
+++ b/app/[slug]/page.tsx
@@ -1,6 +1,7 @@
 import fs from "fs/promises";
 import path from "path";
 import matter from "gray-matter";
+import { Clock3 } from "lucide-react";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { TableOfContents } from "@/components/table-of-contents";
 import DisqusComments from "@/components/disqus-comment";
@@ -9,104 +10,103 @@ import AuthorCard from "@/components/AuthorCard";
 const POSTS_DIR = path.join(process.cwd(), "contents", "post");
 
 async function getPost(slug: string) {
-    const decodedSlug = decodeURIComponent(slug);
-    const filePath = path.join(POSTS_DIR, `${decodedSlug}.md`);
-    const raw = await fs.readFile(filePath, "utf8");
-    const { data, content } = matter(raw);
-    return {
-        frontmatter: data as Record<string, unknown>,
-        content: content ?? "",
-    };
+  const decodedSlug = decodeURIComponent(slug);
+  const filePath = path.join(POSTS_DIR, `${decodedSlug}.md`);
+  const raw = await fs.readFile(filePath, "utf8");
+  const { data, content } = matter(raw);
+  return {
+    frontmatter: data as Record<string, unknown>,
+    content: content ?? "",
+  };
 }
 
 export async function generateStaticParams() {
-    const entries = await fs.readdir(POSTS_DIR);
-    return entries
-        .filter((name) => name.endsWith(".md"))
-        .map((name) => ({
-            slug: name.replace(/\.md$/, ""),
-        }));
+  const entries = await fs.readdir(POSTS_DIR);
+  return entries
+    .filter((name) => name.endsWith(".md"))
+    .map((name) => ({
+      slug: name.replace(/\.md$/, ""),
+    }));
 }
 
 export default async function PostPage({
-    params,
+  params,
 }: {
-    params: Promise<{ slug: string }>;
+  params: Promise<{ slug: string }>;
 }) {
-    const { slug } = await params;
+  const { slug } = await params;
 
-    const { frontmatter, content: markdownContent } = await getPost(slug);
+  const { frontmatter, content: markdownContent } = await getPost(slug);
 
-    const rawAuthor =
-        typeof frontmatter.author === "string" ? frontmatter.author.trim() : "";
-    const authorKey = rawAuthor !== "" ? rawAuthor : undefined;
+  const rawAuthor =
+    typeof frontmatter.author === "string" ? frontmatter.author.trim() : "";
+  const authorKey = rawAuthor !== "" ? rawAuthor : undefined;
 
-    const title =
-        typeof frontmatter.title === "string" && frontmatter.title.trim() !== ""
-            ? frontmatter.title.trim()
-            : "Untitled Article";
+  const title =
+    typeof frontmatter.title === "string" && frontmatter.title.trim() !== ""
+      ? frontmatter.title.trim()
+      : "Untitled Article";
 
-    const readTime =
-        typeof frontmatter.readTime === "string" &&
-            frontmatter.readTime.trim() !== ""
-            ? frontmatter.readTime.trim()
-            : "";
+  const readTime =
+    typeof frontmatter.readTime === "string" &&
+    frontmatter.readTime.trim() !== ""
+      ? frontmatter.readTime.trim()
+      : "";
 
-    const showToc =
-        !!frontmatter &&
-        (frontmatter.toc === true || String(frontmatter.toc) === "true");
+  const showToc =
+    !!frontmatter &&
+    (frontmatter.toc === true || String(frontmatter.toc) === "true");
 
-    return (
-        <main className="w-full min-h-screen py-10">
-            <div className="max-w-[1400px] mx-auto px-4 lg:pl-6 lg:pr-1 py-10 w-full">
-                <div className="flex flex-col lg:flex-row gap-8 items-start">
-                    {authorKey && (
-                        <aside className="w-full lg:w-[260px] flex-shrink-0 lg:sticky lg:top-20 lg:self-start">
-                            <AuthorCard authorKey={authorKey} />
-                        </aside>
-                    )}
+  return (
+    <main className="section-shell pt-28 md:pt-32">
+      <div className="container relative z-10">
+        <header className="modern-card mb-8">
+          <p className="section-kicker">OpenPrinting Article</p>
+          <h1 className="mt-5 max-w-4xl text-3xl font-semibold leading-tight text-gray-900 dark:text-slate-100 md:text-5xl">
+            {title}
+          </h1>
+          {readTime && (
+            <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50/70 px-3 py-1 text-sm text-gray-600 dark:border-slate-600/80 dark:bg-slate-900/70 dark:text-slate-300">
+              <Clock3 className="h-4 w-4" />
+              <span>{readTime}</span>
+            </div>
+          )}
+        </header>
 
-                    <section className="w-full lg:flex-1 lg:min-w-0 lg:max-w-[720px]">
-                        <div className="mb-6 px-4">
-                            <h1 className="text-3xl xl:text-4xl font-bold text-white leading-tight mb-3">
-                                {title}
-                            </h1>
-                            {readTime && (
-                                <div className="flex items-center gap-2 text-gray-400 text-sm">
-                                    <svg
-                                        className="w-4 h-4"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                    >
-                                        <circle cx="12" cy="12" r="10" strokeWidth="2" />
-                                        <path strokeWidth="2" d="M12 6v6l4 2" />
-                                    </svg>
-                                    <span>{readTime}</span>
-                                </div>
-                            )}
-                        </div>
+        <div className="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)_300px]">
+          {authorKey ? (
+            <aside className="xl:sticky xl:top-24 xl:self-start">
+              <AuthorCard authorKey={authorKey} />
+            </aside>
+          ) : (
+            <div className="hidden xl:block" />
+          )}
 
-                        {showToc && (<div className="pb-6 px-4 lg:hidden">
-                            <TableOfContents content={markdownContent} />
-                        </div>)}
+          <section className="min-w-0">
+            {showToc && (
+              <div className="mb-6 xl:hidden">
+                <TableOfContents content={markdownContent} />
+              </div>
+            )}
 
-                        <div className="w-full px-4 lg:px-0">
-                            <div className="prose prose-invert max-w-none prose-headings:text-white prose-p:text-gray-300 prose-a:text-blue-400">
-                                <MarkdownRenderer content={markdownContent} />
-                            </div>
+            <article className="modern-card prose-headings:scroll-mt-28 prose-a:text-cyan-600 hover:prose-a:text-cyan-500 dark:prose-a:text-cyan-300 dark:hover:prose-a:text-cyan-200">
+              <MarkdownRenderer content={markdownContent} />
+            </article>
 
-                            <div className="mt-10">
-                                <DisqusComments post={{ id: slug, title }} />
-                            </div>
-                        </div>
-                    </section>
+            <section className="modern-card mt-8">
+              <DisqusComments post={{ id: slug, title }} />
+            </section>
+          </section>
 
-                    {showToc && (<aside className="hidden lg:block w-[320px] flex-shrink-0 sticky top-10 self-start">
-                        <TableOfContents content={markdownContent} />
-                    </aside>)}
-                </div>
-            </div>
-        </main>
-    );
+          {showToc ? (
+            <aside className="hidden xl:block">
+              <TableOfContents content={markdownContent} isSticky />
+            </aside>
+          ) : (
+            <div className="hidden xl:block" />
+          )}
+        </div>
+      </div>
+    </main>
+  );
 }
diff --git a/app/globals.css b/app/globals.css
index 52349bb7..ef911de9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -2,84 +2,154 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-  font-family: Arial, Helvetica, sans-serif;
-}
-
 @layer base {
+  /* ── Light palette (default) ── */
   :root {
     --background: 0 0% 100%;
-    --foreground: 240 10% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 240 10% 3.9%;
+    --foreground: 222 47% 11%;
+    --card: 210 40% 98%;
+    --card-foreground: 222 47% 11%;
     --popover: 0 0% 100%;
-    --popover-foreground: 240 10% 3.9%;
-    --primary: 240 5.9% 10%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 240 4.8% 95.9%;
-    --secondary-foreground: 240 5.9% 10%;
-    --muted: 240 4.8% 95.9%;
-    --muted-foreground: 240 3.8% 46.1%;
-    --accent: 240 4.8% 95.9%;
-    --accent-foreground: 240 5.9% 10%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 5.9% 90%;
-    --input: 240 5.9% 90%;
-    --ring: 240 10% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
+    --popover-foreground: 222 47% 11%;
+    --primary: 196 80% 36%;
+    --primary-foreground: 0 0% 100%;
+    --secondary: 210 40% 96%;
+    --secondary-foreground: 222 47% 11%;
+    --muted: 210 40% 96%;
+    --muted-foreground: 215 16% 47%;
+    --accent: 196 80% 36%;
+    --accent-foreground: 0 0% 100%;
+    --destructive: 0 72% 50%;
+    --destructive-foreground: 0 0% 100%;
+    --border: 214 32% 91%;
+    --input: 214 32% 91%;
+    --ring: 196 80% 36%;
+    --chart-1: 196 80% 36%;
+    --chart-2: 156 65% 35%;
+    --chart-3: 45 93% 42%;
+    --chart-4: 15 86% 50%;
+    --chart-5: 269 76% 52%;
+    --radius: 0.9rem;
   }
+
+  /* ── Dark palette ── */
   .dark {
-    --background: 240 10% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 240 10% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 240 10% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 240 5.9% 10%;
-    --secondary: 240 3.7% 15.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
-    --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 4.9% 83.9%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
+    --background: 220 29% 8%;
+    --foreground: 210 20% 96%;
+    --card: 222 24% 12%;
+    --card-foreground: 210 20% 96%;
+    --popover: 222 24% 12%;
+    --popover-foreground: 210 20% 96%;
+    --primary: 196 100% 46%;
+    --primary-foreground: 222 47% 11%;
+    --secondary: 220 17% 20%;
+    --secondary-foreground: 210 20% 96%;
+    --muted: 220 18% 16%;
+    --muted-foreground: 218 12% 70%;
+    --accent: 197 79% 55%;
+    --accent-foreground: 222 47% 11%;
+    --destructive: 0 72% 50%;
+    --destructive-foreground: 210 20% 98%;
+    --border: 217 19% 24%;
+    --input: 217 19% 24%;
+    --ring: 196 100% 46%;
+    --chart-1: 196 100% 46%;
+    --chart-2: 156 65% 45%;
+    --chart-3: 45 93% 58%;
+    --chart-4: 15 86% 60%;
+    --chart-5: 269 76% 62%;
   }
-}
 
-@layer base {
   * {
     @apply border-border;
   }
+
+  html,
   body {
     @apply bg-background text-foreground;
   }
-}
 
-.hero-gradient {
-  background: linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4));
-}
+  body {
+    font-family: var(--font-geist-sans), "Segoe UI", sans-serif;
+    min-height: 100vh;
+  }
+
+  /* Light-mode body has a very subtle warm gradient */
+  body {
+    background-image:
+      radial-gradient(circle at 15% 20%, rgba(14, 116, 144, 0.06), transparent 40%),
+      radial-gradient(circle at 85% 10%, rgba(20, 184, 166, 0.04), transparent 35%),
+      linear-gradient(to bottom, hsl(210 40% 98%), hsl(0 0% 100%) 50%);
+  }
 
-.card-hover {
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  /* Dark-mode body keeps the original rich gradient */
+  .dark body {
+    background-image:
+      radial-gradient(circle at 15% 20%, rgba(30, 182, 255, 0.18), transparent 35%),
+      radial-gradient(circle at 85% 10%, rgba(38, 255, 175, 0.1), transparent 30%),
+      linear-gradient(to bottom, #080d15, #0b111b 40%, #0f1623 100%);
+  }
 }
 
-.card-hover:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+@layer components {
+  .section-shell {
+    @apply relative py-16 md:py-24;
+  }
+
+  .section-shell::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background-size: 52px 52px;
+    opacity: 0.15;
+  }
+
+  /* Light grid overlay */
+  .section-shell::before {
+    background-image: linear-gradient(to right, rgba(100, 116, 139, 0.07) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(100, 116, 139, 0.07) 1px, transparent 1px);
+    mask-image: radial-gradient(circle at center, black 25%, transparent 82%);
+    opacity: 0.12;
+  }
+
+  .dark .section-shell::before {
+    background-image: linear-gradient(to right, rgba(148, 163, 184, 0.08) 1px, transparent 1px),
+      linear-gradient(to bottom, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
+    opacity: 0.15;
+  }
+
+  .section-heading {
+    @apply text-center text-3xl md:text-4xl font-semibold tracking-tight text-gray-900 dark:text-white;
+  }
+
+  .section-kicker {
+    @apply inline-flex items-center rounded-full border px-3 py-1 text-xs font-semibold uppercase tracking-[0.18em];
+    @apply border-cyan-600/30 bg-cyan-50 text-cyan-700;
+  }
+  .dark .section-kicker {
+    @apply border-cyan-300/35 bg-cyan-400/10 text-cyan-200;
+  }
+
+  .modern-card {
+    @apply relative rounded-2xl border p-6 backdrop-blur-sm transition-all duration-300;
+    @apply border-gray-200 bg-white/80;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
+  }
+  .dark .modern-card {
+    @apply border-slate-700/80 bg-slate-900/65;
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
+  }
+
+  .modern-card:hover {
+    transform: translateY(-4px);
+  }
+  .modern-card:hover {
+    border-color: rgba(14, 116, 144, 0.4);
+    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
+  }
+  .dark .modern-card:hover {
+    border-color: rgba(34, 211, 238, 0.55);
+    box-shadow: 0 18px 50px rgba(3, 12, 20, 0.45);
+  }
 }
diff --git a/app/layout.tsx b/app/layout.tsx
index 714e0176..6654d747 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono, Inter } from "next/font/google";
 import "./globals.css";
 import Navbar from "@/components/navbar";
+import { ThemeProvider } from "@/components/theme-provider";
 
 const inter = Inter({ subsets: ["latin"] })
 
@@ -26,12 +27,14 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" suppressHydrationWarning className="dark scroll-smooth">
+    <html lang="en" suppressHydrationWarning className="scroll-smooth">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased ${inter.className}`}
       >
-        <Navbar />
-        {children}
+        <ThemeProvider attribute="class" defaultTheme="dark" enableSystem disableTransitionOnChange>
+          <Navbar />
+          {children}
+        </ThemeProvider>
       </body>
     </html>
   );
diff --git a/app/news/page.tsx b/app/news/page.tsx
index b4afe437..1419f2b4 100644
--- a/app/news/page.tsx
+++ b/app/news/page.tsx
@@ -1,6 +1,7 @@
 import fs from "fs/promises";
 import path from "path";
 import matter from "gray-matter";
+import { Clock3 } from "lucide-react";
 import { MarkdownRenderer } from "@/components/markdown-renderer";
 import { TableOfContents } from "@/components/table-of-contents";
 import DisqusComments from "@/components/disqus-comment";
@@ -24,64 +25,59 @@ export default async function Home() {
 
   const title =
     typeof frontmatter.title === "string" &&
-      frontmatter.title.trim() !== ""
+    frontmatter.title.trim() !== ""
       ? frontmatter.title.trim()
       : "Untitled Article";
 
   const readTime =
     typeof frontmatter.readTime === "string" &&
-      frontmatter.readTime.trim() !== ""
+    frontmatter.readTime.trim() !== ""
       ? frontmatter.readTime.trim()
       : "";
 
   return (
-    <main className="w-full">
-      <div className="max-w-[1400px] mx-auto px-4 lg:pl-6 lg:pr-1 py-10 w-full">
-        <div className="flex flex-col lg:flex-row gap-8 items-start">
-          {authorKey && (
-            <aside className="w-full lg:w-[260px] flex-shrink-0 lg:sticky lg:top-20 lg:self-start">
+    <main className="section-shell pt-28 md:pt-32">
+      <div className="container relative z-10">
+        <header className="modern-card mb-8">
+          <p className="section-kicker">Sample News</p>
+          <h1 className="mt-5 max-w-4xl text-3xl font-semibold leading-tight text-gray-900 dark:text-slate-100 md:text-5xl">
+            {title}
+          </h1>
+          {readTime && (
+            <div className="mt-4 inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50/70 px-3 py-1 text-sm text-gray-600 dark:border-slate-600/80 dark:bg-slate-900/70 dark:text-slate-300">
+              <Clock3 className="h-4 w-4" />
+              <span>{readTime}</span>
+            </div>
+          )}
+        </header>
+
+        <div className="grid gap-6 xl:grid-cols-[280px_minmax(0,1fr)_300px]">
+          {authorKey ? (
+            <aside className="xl:sticky xl:top-24 xl:self-start">
               <AuthorCard authorKey={authorKey} />
             </aside>
+          ) : (
+            <div className="hidden xl:block" />
           )}
 
-          <section className="w-full lg:flex-1 lg:min-w-0 lg:max-w-[720px]">
-            <div className="mb-6 px-4">
-              <h1 className="text-3xl xl:text-4xl font-bold text-white leading-tight mb-3">
-                {title}
-              </h1>
-              {readTime && (
-                <div className="flex items-center gap-2 text-gray-400 text-sm">
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <circle cx="12" cy="12" r="10" strokeWidth="2" />
-                    <path strokeWidth="2" d="M12 6v6l4 2" />
-                  </svg>
-                  <span>{readTime}</span>
-                </div>
-              )}
-            </div>
-
-            <div className="pb-6 px-4 lg:hidden">
+          <section className="min-w-0">
+            <div className="mb-6 xl:hidden">
               <TableOfContents content={markdownContent} />
             </div>
 
-            <div className="w-full px-4 lg:px-0">
-              <div className="prose prose-invert max-w-none prose-headings:text-white prose-p:text-gray-300 prose-a:text-blue-400">
+            <article className="modern-card">
+              <div className="prose prose-gray dark:prose-invert max-w-none prose-headings:scroll-mt-28 prose-headings:font-semibold prose-a:text-cyan-600 prose-a:no-underline hover:prose-a:text-cyan-500 dark:prose-a:text-cyan-300 dark:hover:prose-a:text-cyan-200 prose-code:rounded prose-code:bg-gray-100 prose-code:px-1 prose-code:py-0.5 dark:prose-code:bg-slate-800">
                 <MarkdownRenderer content={markdownContent} />
               </div>
+            </article>
 
-              <div className="mt-10">
-                <DisqusComments post={{ id: "1", title }} />
-              </div>
-            </div>
+            <section className="modern-card mt-8">
+              <DisqusComments post={{ id: "sample-news", title }} />
+            </section>
           </section>
 
-          <aside className="hidden lg:block w-[320px] flex-shrink-0 sticky top-20 self-start">
-            <TableOfContents content={markdownContent} />
+          <aside className="hidden xl:block">
+            <TableOfContents content={markdownContent} isSticky />
           </aside>
         </div>
       </div>
diff --git a/app/page.tsx b/app/page.tsx
index 94ea305c..dc6e79c6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,3 @@
-"use client"
-
-import { useEffect } from "react"
 import HeroSection from "@/components/hero-section"
 import InfoSection from "@/components/info-section"
 import ProjectsSection from "@/components/projects-section"
@@ -8,34 +5,8 @@ import NewsSection from "@/components/news-section"
 import Footer from "@/components/footer"
 
 export default function Home() {
-  useEffect(() => {
-    // Add smooth scrolling behavior
-    document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-      anchor.addEventListener("click", function (e) {
-        e.preventDefault()
-        // @ts-expect-error: 'this' is expected to be an HTMLAnchorElement
-        const href = this.getAttribute("href")
-        if (!href) return
-
-        const targetElement = document.querySelector(href)
-        if (!targetElement) return
-
-        window.scrollTo({
-          top: targetElement.offsetTop - 80,
-          behavior: "smooth",
-        })
-      })
-    })
-
-    return () => {
-      document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
-        anchor.removeEventListener("click", () => {})
-      })
-    }
-  }, [])
-
   return (
-    <main className="min-h-screen bg-black text-white">
+    <main className="min-h-screen">
       <HeroSection />
       <NewsSection />
       <InfoSection />
diff --git a/components/AuthorCard.tsx b/components/AuthorCard.tsx
index 5f7ae68a..9a63e847 100644
--- a/components/AuthorCard.tsx
+++ b/components/AuthorCard.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from "react";
 import Image from "next/image";
-import { MapPin, Mail, Github } from "lucide-react";
+import { MapPin, Mail, Github, ChevronDown } from "lucide-react";
 import { cn } from "@/lib/utils";
 import authors from "@/data/authors";
 
@@ -43,125 +43,115 @@ export default function AuthorCard({ authorKey, className }: Props) {
   if (!author) return null;
 
   const placeholder = `${basePath}/authors/placeholder.jpg`;
-  const imgRaw =
-    author.image && author.image !== "NA" ? author.image : placeholder;
+  const imgRaw = author.image && author.image !== "NA" ? author.image : placeholder;
   const imgSrc = imgRaw.startsWith("/") ? `${basePath}${imgRaw}` : `${basePath}/${imgRaw}`;
 
   return (
     <>
-      <div className="lg:hidden flex items-center gap-3 px-4 py-4">
-        <div className="rounded-full overflow-hidden w-[52px] h-[52px] border border-white/20">
-          <Image
-            src={imgSrc}
-            alt={author.name}
-            width={52}
-            height={52}
-            className="object-cover w-full h-full"
-            priority
-          />
-        </div>
+      {/* Mobile card */}
+      <div className="modern-card lg:hidden">
+        <div className="flex items-center gap-3">
+          <div className="h-14 w-14 overflow-hidden rounded-full border border-gray-300 dark:border-slate-500/60">
+            <Image
+              src={imgSrc}
+              alt={author.name}
+              width={56}
+              height={56}
+              className="h-full w-full object-cover"
+              priority
+            />
+          </div>
 
-        <div className="flex-1 min-w-0">
-          <h2 className="text-base font-semibold text-white leading-tight">
-            {author.name}
-          </h2>
-          {author.role && (
-            <p className="text-[15px] text-gray-400 mt-0.5">{author.role}</p>
-          )}
-        </div>
+          <div className="min-w-0 flex-1">
+            <h2 className="truncate text-base font-semibold text-gray-900 dark:text-slate-100">{author.name}</h2>
+            {author.role && <p className="truncate text-sm text-gray-500 dark:text-slate-400">{author.role}</p>}
+          </div>
 
-        <div className="relative" ref={dropdownRef}>
-          <button
-            onClick={() => setOpen(!open)}
-            className="px-4 py-1.5 text-sm font-medium rounded bg-white text-black hover:bg-gray-100"
-          >
-            Follow
-          </button>
-
-          {open && (
-            <div className="absolute right-0 top-full mt-2 w-48 bg-white rounded shadow-xl border border-gray-200 py-1 z-50">
-              {author.location && (
-                <div className="flex items-center gap-2 px-3 py-2 text-gray-700">
-                  <MapPin size={16} className="text-gray-500" />
-                  <span className="text-sm">{author.location}</span>
-                </div>
-              )}
-
-              {author.email && (
-                <a
-                  href={author.email}
-                  className="flex items-center gap-2 px-3 py-2 text-gray-700 hover:bg-gray-50"
-                >
-                  <Mail size={16} className="text-gray-500" />
-                  <span className="text-sm">Email</span>
-                </a>
-              )}
-
-              {author.github && (
-                <a
-                  href={author.github}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="flex items-center gap-2 px-3 py-2 text-gray-700 hover:bg-gray-50"
-                >
-                  <Github size={16} className="text-gray-500" />
-                  <span className="text-sm">GitHub</span>
-                </a>
-              )}
-            </div>
-          )}
+          <div className="relative" ref={dropdownRef}>
+            <button
+              onClick={() => setOpen((prev) => !prev)}
+              className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white/70 px-3 py-1.5 text-sm text-gray-700 transition-colors hover:border-cyan-500/60 hover:text-cyan-700 dark:border-slate-600 dark:bg-slate-900/70 dark:text-slate-200 dark:hover:border-cyan-300/60 dark:hover:text-cyan-200"
+            >
+              Profile
+              <ChevronDown size={14} />
+            </button>
+
+            {open && (
+              <div className="absolute right-0 top-full z-50 mt-2 w-56 rounded-xl border border-gray-200 bg-white/95 p-2 shadow-xl dark:border-slate-700 dark:bg-slate-950/95">
+                {author.location && (
+                  <div className="flex items-center gap-2 rounded-md px-3 py-2 text-gray-600 dark:text-slate-300">
+                    <MapPin size={16} className="text-gray-400 dark:text-slate-400" />
+                    <span className="text-sm">{author.location}</span>
+                  </div>
+                )}
+
+                {author.email && (
+                  <a
+                    href={author.email}
+                    className="flex items-center gap-2 rounded-md px-3 py-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-cyan-700 dark:text-slate-300 dark:hover:bg-slate-800/80 dark:hover:text-cyan-200"
+                  >
+                    <Mail size={16} className="text-gray-400 dark:text-slate-400" />
+                    <span className="text-sm">Email</span>
+                  </a>
+                )}
+
+                {author.github && (
+                  <a
+                    href={author.github}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-2 rounded-md px-3 py-2 text-gray-600 transition-colors hover:bg-gray-50 hover:text-cyan-700 dark:text-slate-300 dark:hover:bg-slate-800/80 dark:hover:text-cyan-200"
+                  >
+                    <Github size={16} className="text-gray-400 dark:text-slate-400" />
+                    <span className="text-sm">GitHub</span>
+                  </a>
+                )}
+              </div>
+            )}
+          </div>
         </div>
       </div>
 
+      {/* Desktop card */}
       <div
         className={cn(
-          "hidden lg:block bg-inherit text-gray-300 pt-2 px-6 pb-6 w-full max-w-[260px]",
+          "modern-card hidden w-full max-w-[280px] lg:block",
           className
         )}
       >
         <div className="flex flex-col items-start">
-          <div className="flex items-center justify-center mb-6 w-[135px] h-[135px] relative">
-            <div
-              aria-hidden
-              className="absolute rounded-full w-full h-full border-[0.7px] border-[rgba(255,255,255,0.8)] [box-shadow:0_0_0_1px_rgba(255,255,255,0.3),inset_0_0_20px_rgba(0,0,0,0.4)]"
+          <div className="mb-5 flex h-[108px] w-[108px] items-center justify-center overflow-hidden rounded-full border border-gray-300 dark:border-slate-500/70">
+            <Image
+              src={imgSrc}
+              alt={author.name}
+              width={108}
+              height={108}
+              className="h-full w-full object-cover"
+              priority
             />
-            <div className="rounded-full overflow-hidden w-[120px] h-[120px] border border-white/5">
-              <Image
-                src={imgSrc}
-                alt={author.name}
-                width={120}
-                height={120}
-                className="object-cover w-full h-full"
-                priority
-              />
-            </div>
           </div>
 
-          <h2 className="text-2xl font-extrabold tracking-tight text-gray-300 mb-3 pl-2">
-            {author.name}
-          </h2>
+          <h2 className="text-2xl font-semibold tracking-tight text-gray-900 dark:text-slate-100">{author.name}</h2>
 
           {author.role && (
-            <p className="text-[15px] text-gray-300 mb-5 pl-2">
-              {author.role}
-            </p>
+            <p className="mt-1 text-sm text-gray-500 dark:text-slate-400">{author.role}</p>
           )}
 
           {author.location && (
-            <div className="flex items-center gap-3 text-gray-400 mb-4 pl-2">
-              <MapPin size={16} />
+            <div className="mt-4 flex items-center gap-2 text-gray-500 dark:text-slate-400">
+              <MapPin size={15} />
               <span className="text-sm">{author.location}</span>
             </div>
           )}
 
-          <div className="flex flex-col items-start pl-2 gap-3">
+          <div className="mt-5 flex flex-col items-start gap-2">
             {author.email && (
               <a
                 href={author.email}
-                className="inline-flex items-center gap-3 text-gray-400 hover:text-gray-200"
+                className="inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-cyan-700 dark:text-slate-300 dark:hover:text-cyan-200"
               >
-                <Mail size={18} />
-                <span className="text-sm">Email</span>
+                <Mail size={16} />
+                <span>Email</span>
               </a>
             )}
 
@@ -170,10 +160,10 @@ export default function AuthorCard({ authorKey, className }: Props) {
                 href={author.github}
                 target="_blank"
                 rel="noopener noreferrer"
-                className="inline-flex items-center gap-3 text-gray-400 hover:text-gray-200"
+                className="inline-flex items-center gap-2 text-sm text-gray-600 transition-colors hover:text-cyan-700 dark:text-slate-300 dark:hover:text-cyan-200"
               >
-                <Github size={18} />
-                <span className="text-sm">GitHub</span>
+                <Github size={16} />
+                <span>GitHub</span>
               </a>
             )}
           </div>
diff --git a/components/footer.tsx b/components/footer.tsx
index 137e7b8c..7655f5ef 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -1,65 +1,48 @@
 "use client"
 
 import { motion } from "framer-motion"
-import { Twitter, Github, Facebook, Rss } from "lucide-react"
+import { Rss } from "lucide-react"
+import { TwitterXIcon, GithubIcon, FacebookIcon, TelegramIcon } from "@/components/icons"
+
+const links = [
+  { icon: TwitterXIcon, label: "Twitter", href: "https://twitter.com" },
+  { icon: GithubIcon, label: "GitHub", href: "https://github.com/OpenPrinting" },
+  { icon: TelegramIcon, label: "Telegram", href: "https://t.me/+RizBbjXz4uU2ZWM1" },
+  { icon: FacebookIcon, label: "Facebook", href: "https://facebook.com" },
+  { icon: Rss, label: "Feed", href: "/feed" },
+]
 
 export default function Footer() {
   return (
-    <footer className="bg-gray-900 text-white">
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12">
-        <div className="flex flex-col items-center">
-          <div className="flex space-x-6 mb-8">
-            <motion.a
-              href="https://twitter.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="text-gray-400 flex gap-2 hover:text-white transition-colors"
-            >
-              <Twitter className="h-6 w-6" />
-              <span className="font-extrabold">Twitter</span>
-            </motion.a>
-            <motion.a
-              href="https://github.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="text-gray-400 flex gap-2 hover:text-white transition-colors"
-            >
-              <Github className="h-6 w-6" />
-              <span className="font-extrabold">GitHub</span>
-            </motion.a>
-            <motion.a
-              href="https://facebook.com"
-              target="_blank"
-              rel="noopener noreferrer"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="text-gray-400 flex gap-2 hover:text-white transition-colors"
-            >
-              <Facebook className="h-6 w-6" />
-              <span className="font-extrabold">Facebook</span>
-            </motion.a>
-            <motion.a
-              href="/feed"
-              target="_blank"
-              rel="noopener noreferrer"
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="text-gray-400 flex gap-2 hover:text-white transition-colors"
-            >
-              <Rss className="h-6 w-6" />
-              <span className="font-extrabold">Feed</span>
-            </motion.a>
+    <footer className="mt-16 border-t border-gray-200 bg-gray-50/80 dark:border-slate-800/80 dark:bg-slate-950/80">
+      <div className="container py-12">
+        <div className="flex flex-col items-center justify-between gap-6 md:flex-row">
+          <div>
+            <p className="text-sm font-medium text-gray-800 dark:text-slate-200">OpenPrinting</p>
+            <p className="mt-1 text-sm text-gray-500 dark:text-slate-400">Open-source printing stack for Linux and Unix ecosystems.</p>
           </div>
 
-          <div className="text-gray-500 text-sm text-center">
-            <p>© {new Date().getFullYear()} OpenPrinting. All rights reserved.</p>
-            <p className="mt-1">Powered by Next.js and Tailwind CSS.</p>
+          <div className="flex flex-wrap items-center gap-4">
+            {links.map(({ icon: Icon, label, href }) => (
+              <motion.a
+                key={label}
+                href={href}
+                target="_blank"
+                rel="noopener noreferrer"
+                whileHover={{ y: -2 }}
+                whileTap={{ scale: 0.98 }}
+                className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-white/75 px-3 py-2 text-sm text-gray-600 transition-colors hover:border-cyan-500/50 hover:text-cyan-700 dark:border-slate-700/80 dark:bg-slate-900/75 dark:text-slate-300 dark:hover:border-cyan-300/50 dark:hover:text-cyan-200"
+              >
+                <Icon className="h-4 w-4" />
+                {label}
+              </motion.a>
+            ))}
           </div>
         </div>
+
+        <div className="mt-8 border-t border-gray-200 pt-5 text-xs text-gray-400 dark:border-slate-800/70 dark:text-slate-500">
+          © {new Date().getFullYear()} OpenPrinting. Built with Next.js and Tailwind CSS.
+        </div>
       </div>
     </footer>
   )
diff --git a/components/hero-section.tsx b/components/hero-section.tsx
index 2ee853a2..14435151 100644
--- a/components/hero-section.tsx
+++ b/components/hero-section.tsx
@@ -3,74 +3,97 @@
 import { Button } from "@/components/ui/button"
 import { motion } from "framer-motion"
 import Link from "next/link"
+import Image from "next/image"
 
-const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : "";
+const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : ""
+
+const sponsors = [
+  { name: "The Linux Foundation", logo: `${basePath}/lfx.svg` },
+  { name: "Sovereign Tech Agency", logo: `${basePath}/sta.jpeg` },
+]
 
 export default function HeroSection() {
   return (
-    <>
-    <section className="relative min-h-[60vh] flex items-center hero-gradient">
-      <div className="absolute inset-0 bg-cover bg-center z-0 before:absolute before:inset-0 before:bg-black/50" style={{ backgroundImage: `url('${basePath}/rotation_pantone.jpg')` }}></div>
+    <section className="relative pt-24 pb-4 md:pt-32 md:pb-6">
+      <div className="container relative z-10">
+        <div className="grid items-center gap-8 lg:grid-cols-[1.15fr_1fr]">
+          <div>
+            <motion.span
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.45 }}
+              className="section-kicker"
+            >
+              Open Printing
+            </motion.span>
 
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
-        <div className="max-w-4xl">
-          <motion.h1
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.2 }}
-            className="text-4xl md:text-6xl lg:text-7xl font-bold text-white mb-6"
-          >
-            OpenPrinting
-          </motion.h1>
+            <motion.h1
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.12 }}
+              className="mt-4 text-4xl font-semibold text-gray-900 dark:text-slate-100 sm:text-5xl lg:text-6xl"
+            >
+              We make
+              <span className="block bg-gradient-to-r from-cyan-600 via-cyan-500 to-emerald-500 bg-clip-text pb-1 text-transparent dark:from-cyan-200 dark:via-cyan-400 dark:to-emerald-300">
+                printing just work!
+              </span>
+            </motion.h1>
 
-          <motion.p
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.4 }}
-            className="text-xl md:text-2xl text-gray-200 mb-8"
-          >
-            We make printing just work!
-          </motion.p>
+            <motion.p
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.22 }}
+              className="mt-5 max-w-2xl text-base text-gray-600 dark:text-slate-300 md:text-lg"
+            >
+              OpenPrinting develops IPP-based printing technology for Linux®/Unix® operating systems.
+            </motion.p>
 
+            <motion.div
+              initial={{ opacity: 0, y: 16 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.55, delay: 0.32 }}
+              className="mt-6 flex flex-col gap-3 sm:flex-row"
+            >
+              <Button asChild size="lg" className="bg-cyan-600 text-white hover:bg-cyan-700 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300">
+                <Link href="#about">Learn More</Link>
+              </Button>
+              <Button asChild variant="outline" size="lg" className="border-gray-300 bg-white/20 text-gray-700 hover:bg-gray-50 dark:border-slate-500 dark:bg-slate-900/20 dark:text-slate-100 dark:hover:bg-slate-800/70">
+                <Link href="#downloads">Find a Printer</Link>
+              </Button>
+            </motion.div>
+          </div>
+
+          {/* Right column — sponsors */}
           <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.8, delay: 0.6 }}
-            className="flex flex-col sm:flex-row gap-4"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.55, delay: 0.3 }}
+            className="flex flex-col items-start gap-4 lg:items-center"
           >
-            <Button asChild size="lg" className="bg-brand-blue text-white hover:bg-brand-blue/90">
-              <Link href="#about">Learn More</Link>
-            </Button>
-            <Button asChild variant="outline" size="lg" className="border-white text-white hover:bg-white/10">
-              <Link href="#downloads">Find a Printer</Link>
-            </Button>
+            <p className="text-xs font-medium uppercase tracking-[0.15em] text-gray-400 dark:text-slate-500">
+              Supported by
+            </p>
+            <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:justify-center">
+              {sponsors.map((sponsor) => (
+                <div
+                  key={sponsor.name}
+                  className="inline-flex items-center gap-3 rounded-full border border-gray-200/80 bg-white/40 px-4 py-2.5 text-sm font-medium text-gray-600 backdrop-blur-sm transition-colors hover:border-cyan-400/40 dark:border-slate-700/60 dark:bg-slate-800/30 dark:text-slate-300 dark:hover:border-cyan-400/40"
+                >
+                  <Image
+                    src={sponsor.logo}
+                    alt={sponsor.name}
+                    width={36}
+                    height={36}
+                    className="h-9 w-9 rounded-full object-cover"
+                    unoptimized
+                  />
+                  {sponsor.name}
+                </div>
+              ))}
+            </div>
           </motion.div>
         </div>
       </div>
-
-      <motion.div
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ duration: 1, delay: 1 }}
-        className="absolute bottom-10 left-1/2 transform -translate-x-1/2"
-      >
-        <motion.div
-          animate={{ y: [0, 10, 0] }}
-          transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" }}
-          className="w-6 h-10 border-2 border-white rounded-full flex justify-center p-1"
-        >
-          <motion.div
-            animate={{ height: ["0%", "30%", "0%"] }}
-            transition={{ duration: 2, repeat: Number.POSITIVE_INFINITY, repeatType: "reverse" }}
-            className="w-1 bg-white rounded-full"
-          />
-        </motion.div>
-      </motion.div>
     </section>
-    <h2 className="text-xl md:text-2xl text-center font-bold my-12 leading-relaxed">
-      OpenPrinting develops IPP-based printing technology for Linux®/Unix® operating systems.
-    </h2>
-    <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
-    </>
   )
 }
diff --git a/components/icons.tsx b/components/icons.tsx
new file mode 100644
index 00000000..e3373937
--- /dev/null
+++ b/components/icons.tsx
@@ -0,0 +1,37 @@
+import React from "react"
+
+interface IconProps {
+  className?: string
+}
+
+export function GithubIcon({ className = "h-4 w-4" }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" className={className}>
+      <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
+    </svg>
+  )
+}
+
+export function FacebookIcon({ className = "h-4 w-4" }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" className={className}>
+      <path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951" />
+    </svg>
+  )
+}
+
+export function TelegramIcon({ className = "h-4 w-4" }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" className={className}>
+      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.287 5.906q-1.168.486-4.666 2.01-.567.225-.595.442c-.03.243.275.339.69.47l.175.055c.408.133.958.288 1.243.294q.39.01.868-.32 3.269-2.206 3.374-2.23c.05-.012.12-.026.166.016s.042.12.037.141c-.03.129-1.227 1.241-1.846 1.817-.193.18-.33.307-.358.336a8 8 0 0 1-.188.186c-.38.366-.664.64.015 1.088.327.216.589.393.85.571.284.194.568.387.936.629q.14.092.27.187c.331.236.63.448.997.414.214-.02.435-.22.547-.82.265-1.417.786-4.486.906-5.751a1.4 1.4 0 0 0-.013-.315.34.34 0 0 0-.114-.217.53.53 0 0 0-.31-.093c-.3.005-.763.166-2.984 1.09" />
+    </svg>
+  )
+}
+
+export function TwitterXIcon({ className = "h-4 w-4" }: IconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 16" className={className}>
+      <path d="M12.6.75h2.454l-5.36 6.142L16 15.25h-4.937l-3.867-5.07-4.425 5.07H.316l5.733-6.57L0 .75h5.063l3.495 4.633L12.601.75Zm-.86 13.028h1.36L4.323 2.145H2.865z" />
+    </svg>
+  )
+}
diff --git a/components/info-section.tsx b/components/info-section.tsx
index 2f13dae6..98cad6ea 100644
--- a/components/info-section.tsx
+++ b/components/info-section.tsx
@@ -1,77 +1,73 @@
 "use client"
 
-import { motion } from "framer-motion"
-import { useInView } from "framer-motion"
+import { motion, useInView } from "framer-motion"
 import { useRef } from "react"
 import Image from "next/image"
+import Link from "next/link"
 import { Button } from "./ui/button"
 
-const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : "";
+const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : ""
+
+const cards = [
+  {
+    title: "About OpenPrinting",
+    description: "Learn how the project is organized, who contributes, and how major components fit together.",
+    image: `${basePath}/openprinting.png`,
+    cta: "Learn more",
+    href: "/How-did-this-all-begin",
+    delay: 0.1,
+  },
+  {
+    title: "Contribute",
+    description: "Join community development, testing, and documentation to improve printing for millions of users.",
+    image: `${basePath}/contribute-new.png`,
+    cta: "Start contributing",
+    href: "/OpenPrinting-News-Google-Summer-of-Code-2025-Contributors-selected-and-projects-started",
+    delay: 0.2,
+  },
+  {
+    title: "CUPS Stack",
+    description: "Explore the standards-based printing system that powers Linux and multiple Unix-like platforms.",
+    image: `${basePath}/cups.png`,
+    cta: "Read about CUPS",
+    href: "/cups-2.4.15",
+    delay: 0.3,
+  },
+]
 
 export default function InfoSection() {
   const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.3 })
+  const isInView = useInView(ref, { once: true, amount: 0.2 })
 
   return (
-    <section ref={ref} className="bg-black text-white" id="about">
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <motion.div
-          initial={{ opacity: 0, y: 50 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
-          transition={{ duration: 0.7 }}
-          className="text-center"
-        >
-          <div className="w-24 h-1 bg-brand-lightBlue mx-auto"></div>
-        </motion.div>
+    <section ref={ref} className="section-shell" id="about">
+      <div className="container relative z-10">
+        <div className="mx-auto mb-12 max-w-2xl text-center">
+          <span className="section-kicker">Foundation</span>
+          <h2 className="section-heading mt-4">Community, standards, and core software</h2>
+        </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {[
-            {
-              title: "About Us",
-              description:
-                "Learn more about OpenPrinting, how it works, the people involved, and the projects maintained by it",
-              icon: `${basePath}/OpenPrintingBox.png`,
-              delay: 0.1,
-            },
-            {
-              title: "Contribute",
-              description:
-                "Know how you can be part of an excellent community and help improve printing experience for millions of users",
-              icon: `${basePath}/contribute.png`,
-              delay: 0.3,
-            },
-            {
-              title: "CUPS",
-              description:
-                "CUPS is the standards-based, open source printing system that is used on Linux® and other operating systems.",
-              icon: `${basePath}/cups.png`,
-              delay: 0.5,
-            },
-          ].map((item, index) => (
-            <motion.div
-            key={index}
-            initial={{ opacity: 0, y: 30 }}
-            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-            transition={{ duration: 0.5, delay: item.delay }}
-            className="group relative bg-gray-900 rounded-lg overflow-hidden p-6 border border-gray-800 hover:border-brand-lightBlue transition-colors duration-300 hover:cursor-pointer"
-            whileHover={{
-              scale: 1.02,
-              transition: { duration: 0.2 },
-            }}
+        <div className="grid gap-6 md:grid-cols-3">
+          {cards.map((item) => (
+            <motion.article
+              key={item.title}
+              initial={{ opacity: 0, y: 22 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.4, delay: item.delay }}
+              className="modern-card flex flex-col"
             >
-              <div className="flex flex-col items-start text-left">
-                <div className="mb-4 bg-gray-700 rounded-lg flex items-center justify-center">
-                  <Image src={item.icon || `${basePath}/placeholder.svg`} alt={item.title} width={200} height={200} className="h-full w-full rounded-md" />
-                </div>
-                <h3 className="text-3xl font-extrabold mb-4">{item.title}</h3>
-                <p className="text-gray-300 mb-4">{item.description}</p>
-                <Button className="bg-blue-500 text-md text-white">Read More</Button>
+              <div className="rounded-xl border border-gray-200 bg-gray-50/70 p-2 dark:border-slate-700/80">
+                <Image src={item.image} alt={item.title} width={360} height={220} className="h-44 w-full rounded-lg object-contain" />
               </div>
-            </motion.div>
+              <h3 className="mt-5 text-2xl font-semibold text-gray-900 dark:text-slate-100">{item.title}</h3>
+              <p className="mt-3 flex-1 text-sm leading-relaxed text-gray-600 dark:text-slate-300">{item.description}</p>
+              <Button asChild className="mt-6 w-fit bg-cyan-600 text-white hover:bg-cyan-700 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300">
+                <Link href={item.href}>{item.cta}</Link>
+              </Button>
+            </motion.article>
           ))}
         </div>
       </div>
-      <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
     </section>
   )
-}
\ No newline at end of file
+}
diff --git a/components/markdown-renderer.tsx b/components/markdown-renderer.tsx
index 61219afc..b82421d2 100644
--- a/components/markdown-renderer.tsx
+++ b/components/markdown-renderer.tsx
@@ -3,74 +3,52 @@ import remarkGfm from "remark-gfm"
 import rehypeHighlight from "rehype-highlight"
 import rehypeAutolinkHeadings from "rehype-autolink-headings"
 import rehypeSlug from "rehype-slug"
-import rehypeRaw from 'rehype-raw'
+import rehypeRaw from "rehype-raw"
 import readingTime from "reading-time"
 import "highlight.js/styles/github-dark.css"
 import bash from "highlight.js/lib/languages/bash"
-import matter from "gray-matter"
-import { Clock } from 'lucide-react';
 
 interface MarkdownRendererProps {
   content: string
 }
 
-export interface Metadata {
-  title?: string
-  layout?: string
-  toc?: boolean
-  toc_sticky?: boolean
-  author?: string
-  excerpt?: string
-  [key: string]: unknown
-}
-
 export function MarkdownRenderer({ content }: MarkdownRendererProps) {
-  const { data, content: markdownContent } = matter(content)
-  const metadata: Metadata = data
-  const stats = readingTime(markdownContent)
+  const stats = readingTime(content)
 
   return (
-    <div className="p-4 md:p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
-      <div className="mb-4 md:mb-6">
-        {metadata.title && (
-          <h1 className="text-2xl md:text-5xl font-black mb-3 md:mb-4 text-white">
-            {metadata.title}
-          </h1>
-        )}
-        <div className="flex items-center gap-2 text-sm md:text-base text-gray-400">
-          <Clock size={16} />
-          <span>{Math.ceil(stats.minutes)} minute read</span>
-        </div>
+    <div>
+      <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-gray-200 bg-gray-50/70 px-3 py-1 text-xs text-gray-600 dark:border-slate-600/80 dark:bg-slate-900/70 dark:text-slate-300">
+        <span className="font-medium">Estimated read</span>
+        <span>{Math.max(1, Math.ceil(stats.minutes))} min</span>
       </div>
-      <div className="flex">
-        <div className="prose prose-invert prose-github max-w-none w-full">
-          <ReactMarkdown
-            remarkPlugins={[remarkGfm]}
-            rehypePlugins={[
-              [rehypeHighlight, { languages: { bash }, detect: true, ignoreMissing: true }],
-              rehypeSlug,
-              rehypeRaw,
-              [rehypeAutolinkHeadings, { behavior: "wrap" }],
-            ]}
-            components={{
-              // @ts-expect-error: TypeScript does not recognize the code component props
-              code({ inline, className, children, ...props }) {
-                const match = /language-(\w+)/.exec(className || "")
-                return !inline ? (
-                  <code className={`${className || ""} ${!match ? "language-bash" : ""} rounded-md`} {...props}>
-                    {children}
-                  </code>
-                ) : (
-                  <code className={className} {...props}>
-                    {children}
-                  </code>
-                )
-              },
-            }}
-          >
-            {markdownContent}
-          </ReactMarkdown>
-        </div>
+
+      <div className="prose prose-gray dark:prose-invert prose-github max-w-none">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          rehypePlugins={[
+            [rehypeHighlight, { languages: { bash }, detect: true, ignoreMissing: true }],
+            rehypeSlug,
+            rehypeRaw,
+            [rehypeAutolinkHeadings, { behavior: "wrap" }],
+          ]}
+          components={{
+            // @ts-expect-error: TypeScript does not recognize the code component props
+            code({ inline, className, children, ...props }) {
+              const match = /language-(\w+)/.exec(className || "")
+              return !inline ? (
+                <code className={`${className || ""} ${!match ? "language-bash" : ""} rounded-md`} {...props}>
+                  {children}
+                </code>
+              ) : (
+                <code className={className} {...props}>
+                  {children}
+                </code>
+              )
+            },
+          }}
+        >
+          {content}
+        </ReactMarkdown>
       </div>
     </div>
   )
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 4be5ec27..f070f8ad 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -1,97 +1,113 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import Link from "next/link"
 import Image from "next/image"
 import { Menu, X } from "lucide-react"
 import { motion, AnimatePresence } from "framer-motion"
 import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-// import Search from "./search"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { GithubIcon } from "@/components/icons"
 
-const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : "";
+const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : ""
 
 const navItems = [
-  { name: "About Us", href: "#about" },
-  { name: "News and Events", href: "#news" },
+  // { name: "About", href: "#about" },
+  { name: "News", href: "#news" },
   { name: "Projects", href: "#projects" },
   { name: "Downloads", href: "#downloads" },
-  { name: "Documentation", href: "#documentation" },
+  { name: "Docs", href: "#documentation" },
 ]
 
 export default function Navbar() {
   const [isOpen, setIsOpen] = useState(false)
   const [scrolled, setScrolled] = useState(false)
+  const [hiddenOnScrollUp, setHiddenOnScrollUp] = useState(false)
+  const lastScrollY = useRef(0)
 
   useEffect(() => {
     const handleScroll = () => {
-      setScrolled(window.scrollY > 10)
+      const currentScrollY = window.scrollY
+      const isScrollingDown = currentScrollY > lastScrollY.current
+
+      setScrolled(currentScrollY > 10)
+
+      if (isOpen || currentScrollY < 80) {
+        setHiddenOnScrollUp(false)
+      } else {
+        setHiddenOnScrollUp(isScrollingDown)
+      }
+
+      lastScrollY.current = currentScrollY
     }
+
     window.addEventListener("scroll", handleScroll)
     return () => window.removeEventListener("scroll", handleScroll)
-  }, [])
+  }, [isOpen])
 
   return (
     <header
       className={cn(
-        "fixed top-0 w-full z-50 transition-all duration-300",
-        scrolled ? "bg-black/90 backdrop-blur-sm shadow-md" : "bg-transparent",
+        "fixed inset-x-0 top-0 z-50 transition-all duration-300",
+        hiddenOnScrollUp ? "-translate-y-full opacity-0" : "translate-y-0 opacity-100",
+        scrolled ? "pt-2" : "pt-4",
       )}
     >
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <div className="flex items-center justify-between h-16">
-          <div className="flex items-center">
-            <Link href="/" className="flex items-center space-x-2">
-              <div className="relative w-10 h-10">
-                <Image
-                  src={`${basePath}/openprinting.png`}
-                  alt="OpenPrinting Logo"
-                  width={40}
-                  height={40}
-                  className="object-contain"
-                />
-              </div>
-              <motion.span
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.5 }}
-                className="text-xl font-bold text-white"
-              >
-                OpenPrinting
-              </motion.span>
-            </Link>
-          </div>
+      <div className="container">
+        <div
+          className={cn(
+            "flex h-16 items-center justify-between rounded-2xl border px-4 transition-all duration-300 md:px-6",
+            scrolled
+              ? "border-gray-200 bg-white/85 shadow-lg backdrop-blur-md dark:border-slate-700/80 dark:bg-slate-950/85 dark:shadow-[0_10px_45px_rgba(2,6,23,0.45)]"
+              : "border-gray-200/60 bg-white/55 backdrop-blur-sm dark:border-slate-600/45 dark:bg-slate-950/55",
+          )}
+        >
+          <Link href="/" className="flex items-center gap-2.5">
+            <Image src={`${basePath}/openprinting.png`} alt="OpenPrinting Logo" width={34} height={34} className="object-contain" />
+            <motion.span
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.35 }}
+              className="text-base font-semibold tracking-wide text-gray-900 dark:text-slate-100 md:text-lg"
+            >
+              OpenPrinting
+            </motion.span>
+          </Link>
 
-          <div className="hidden md:flex items-center space-x-8">
-            <nav className="flex items-center space-x-6">
-              {navItems.map((item, index) => (
-                <motion.div
-                  key={item.name}
-                  initial={{ opacity: 0, y: -10 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  transition={{ duration: 0.3, delay: index * 0.1 }}
-                >
-                  <Link href={item.href} className="text-gray-300 hover:text-white transition-colors duration-200">
-                    {item.name}
-                  </Link>
-                </motion.div>
-              ))}
-            </nav>
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              transition={{ duration: 0.3, delay: 0.5 }}
+          <nav className="hidden items-center gap-6 md:flex">
+            {navItems.map((item, index) => (
+              <motion.div
+                key={item.name}
+                initial={{ opacity: 0, y: -8 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.2, delay: index * 0.06 }}
+              >
+                <Link href={item.href} className="text-sm font-medium text-gray-600 transition-colors hover:text-cyan-700 dark:text-slate-300 dark:hover:text-cyan-200">
+                  {item.name}
+                </Link>
+              </motion.div>
+            ))}
+            <ThemeToggle />
+            <a
+              href="https://github.com/OpenPrinting"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex h-9 w-9 items-center justify-center rounded-md text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-slate-300 dark:hover:bg-slate-800/80 dark:hover:text-slate-100"
+              aria-label="GitHub"
             >
-              {/* <Search /> */}
-            </motion.div>
-          </div>
+              <GithubIcon className="h-5 w-5" />
+            </a>
+          </nav>
 
-          <div className="md:hidden">
+          <div className="flex items-center gap-2 md:hidden">
+            <ThemeToggle />
             <Button
               variant="ghost"
               size="icon"
-              onClick={() => setIsOpen(!isOpen)}
-              className="text-gray-300 hover:text-white"
+              onClick={() => setIsOpen((open) => !open)}
+              className="text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-slate-300 dark:hover:bg-slate-800/80 dark:hover:text-slate-100"
+              aria-label="Toggle navigation"
             >
               {isOpen ? <X className="h-6 w-6" /> : <Menu className="h-6 w-6" />}
             </Button>
@@ -105,36 +121,26 @@ export default function Navbar() {
             initial={{ opacity: 0, height: 0 }}
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.3 }}
-            className="md:hidden bg-black/95 backdrop-blur-sm"
+            transition={{ duration: 0.25 }}
+            className="container mt-2 overflow-hidden rounded-2xl border border-gray-200 bg-white/95 backdrop-blur dark:border-slate-700/80 dark:bg-slate-950/95"
           >
-            <div className="px-4 pt-2 pb-4 space-y-1">
+            <div className="space-y-1 px-4 py-4">
               {navItems.map((item, index) => (
                 <motion.div
                   key={item.name}
-                  initial={{ opacity: 0, x: -10 }}
+                  initial={{ opacity: 0, x: -6 }}
                   animate={{ opacity: 1, x: 0 }}
-                  transition={{ duration: 0.2, delay: index * 0.05 }}
+                  transition={{ duration: 0.16, delay: index * 0.05 }}
                 >
                   <Link
                     href={item.href}
-                    className="block py-2 text-gray-300 hover:text-white"
+                    className="block rounded-lg px-3 py-2 text-sm text-gray-600 transition-colors hover:bg-gray-50 hover:text-gray-900 dark:text-slate-300 dark:hover:bg-slate-800/85 dark:hover:text-slate-100"
                     onClick={() => setIsOpen(false)}
                   >
                     {item.name}
                   </Link>
                 </motion.div>
               ))}
-              <motion.div
-                initial={{ opacity: 0, x: -10 }}
-                animate={{ opacity: 1, x: 0 }}
-                transition={{ duration: 0.2, delay: navItems.length * 0.05 }}
-                className="pt-2"
-              >
-                <Button variant="outline" size="sm" className="w-full" onClick={() => setIsOpen(false)}>
-                  {/* <Search /> */}
-                </Button>
-              </motion.div>
             </div>
           </motion.div>
         )}
diff --git a/components/news-section.tsx b/components/news-section.tsx
index 1068b438..2edec132 100644
--- a/components/news-section.tsx
+++ b/components/news-section.tsx
@@ -1,97 +1,70 @@
 "use client"
 
-import { motion } from "framer-motion"
-import { useInView } from "framer-motion"
+import { motion, useInView } from "framer-motion"
 import { useRef } from "react"
 import Link from "next/link"
 
+const news = [
+  {
+    title: "libcups v3.0rc4",
+    author: "Mike",
+    date: "March 18, 2025",
+    excerpt:
+      "The fourth release candidate of the CUPS v3 library removes deprecated APIs and sharpens consistency across the toolchain.",
+    url: "/libcups-3.0rc4",
+    delay: 0.1,
+  },
+  {
+    title: "Framework RISC-V board support",
+    author: "Till",
+    date: "March 2, 2025",
+    excerpt: "OpenPrinting development and testing now includes RISC-V hardware from DeepComputing.",
+    url: "/OpenPrinting-News-We-got-a-Framework-RISC-V-board-from-DeepComputing",
+    delay: 0.2,
+  },
+  {
+    title: "GSoC 2025: Linux Foundation accepted",
+    author: "Till",
+    date: "March 1, 2025",
+    excerpt: "OpenPrinting mentors under The Linux Foundation again, with a new contributor cohort.",
+    url: "/OpenPrinting-News-Google-Summer-of-Code-2025-The-Linux-Foundation-is-accepted-as-mentoring-organization",
+    delay: 0.3,
+  },
+]
+
 export default function NewsSection() {
   const ref = useRef(null)
   const isInView = useInView(ref, { once: true, amount: 0.2 })
 
-  const news = [
-    {
-      title: "libcups v3.0rc4",
-      author: "Mike",
-      date: "March 18, 2025",
-      excerpt:
-        "libcups v3.0rc4 is the fourth release candidate of the CUPS v3 library and tools which remove deprecated APIs, add new APIs, and normalize existing APIs.",
-      url: "#",
-      delay: 0.1,
-    },
-    {
-      title: "OpenPrinting News - We got a Framework RISC-V board from DeepComputing",
-      author: "Till",
-      date: "March 02, 2025",
-      excerpt:
-        "RISC-V board for OpenPrinting for development and testing, getting it all to work, Ubuntu Desktop, Snap on RISC-V",
-      url: "#",
-      delay: 0.3,
-    },
-    {
-      title:
-        "OpenPrinting News - Google Summer of Code 2025 - The Linux Foundation is accepted as mentoring organization",
-      author: "Till",
-      date: "March 01, 2025",
-      excerpt: "The LF is in and so OpenPrinting as part of it will mentor again.",
-      url: "#",
-      delay: 0.5,
-    },
-  ]
-
   return (
-    <section ref={ref} className="bg-black text-white" id="news">
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-          transition={{ duration: 0.7 }}
-          className="text-center"
-        >
-          <div className="w-24 h-1 bg-brand-lightBlue mx-auto"></div>
-        </motion.div>
+    <section ref={ref} className="section-shell" id="news">
+      <div className="container relative z-10">
+        <div className="mx-auto mb-6 max-w-2xl text-center">
+          <span className="section-kicker">Recent Signals</span>
+          {/* <h2 className="section-heading mt-4">News and engineering updates</h2> */}
+          {/* <p className="mt-4 text-gray-600 dark:text-slate-300">Track releases, standards work, and program milestones from the OpenPrinting ecosystem.</p> */}
+        </div>
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {news.map((item, index) => (
-            <motion.div
-              key={index}
-              initial={{ opacity: 0, y: 30 }}
-              animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-              transition={{ duration: 0.5, delay: item.delay }}
-              className="group relative bg-gray-900 rounded-lg overflow-hidden p-6 border border-gray-800 hover:border-brand-lightBlue transition-colors duration-300 hover:cursor-pointer"
-              whileHover={{
-                scale: 1.02,
-                transition: { duration: 0.2 },
-              }}
+        <div className="grid gap-6 md:grid-cols-3">
+          {news.map((item) => (
+            <motion.article
+              key={item.title}
+              initial={{ opacity: 0, y: 24 }}
+              animate={isInView ? { opacity: 1, y: 0 } : {}}
+              transition={{ duration: 0.4, delay: item.delay }}
+              className="modern-card"
             >
-              <div className="absolute inset-0 bg-gradient-to-r from-brand-blue/0 to-brand-blue/0 group-hover:from-brand-blue/5 group-hover:to-brand-blue/10 transition-all duration-300"></div>
-
-              <Link href={item.url} className="block h-full">
-                <h3 className="text-xl font-bold mb-3 text-brand-lightBlue">{item.title}</h3>
-
-                <div className="flex items-center text-sm text-gray-400 mb-4">
-                  <span>Author: {item.author}</span>
-                  <span className="mx-2">•</span>
-                  <span>Date: {item.date}</span>
-                </div>
-
-                <p className="text-gray-300 mb-6">{item.excerpt}</p>
-
+              <p className="text-xs uppercase tracking-[0.1em] text-cyan-700 dark:text-cyan-200">{item.date}</p>
+              <h3 className="mt-3 text-xl font-semibold text-gray-900 dark:text-slate-100">{item.title}</h3>
+              <p className="mt-2 text-sm text-gray-500 dark:text-slate-400">By {item.author}</p>
+              <p className="mt-4 text-sm leading-relaxed text-gray-600 dark:text-slate-300">{item.excerpt}</p>
+              <Link href={item.url} className="mt-6 inline-flex text-sm font-medium text-cyan-700 hover:text-cyan-600 dark:text-cyan-200 dark:hover:text-cyan-100">
+                Read update {"->"}
               </Link>
-
-              {/* Animated border effect on hover */}
-              <motion.div
-                className="absolute bottom-0 left-0 h-[2px] bg-brand-lightBlue"
-                initial={{ width: 0 }}
-                whileHover={{ width: "100%" }}
-                transition={{ duration: 0.3 }}
-              />
-            </motion.div>
+            </motion.article>
           ))}
         </div>
       </div>
-      <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
     </section>
   )
 }
-
diff --git a/components/projects-section.tsx b/components/projects-section.tsx
index a0499649..6568fc7c 100644
--- a/components/projects-section.tsx
+++ b/components/projects-section.tsx
@@ -1,173 +1,129 @@
 "use client"
 
-import { motion } from "framer-motion"
-import { useInView } from "framer-motion"
+import { motion, useInView } from "framer-motion"
 import { useRef } from "react"
 import Image from "next/image"
+import Link from "next/link"
 import { Button } from "./ui/button"
 
-const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : "";
+const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : ""
 
-export default function ProjectsSection() {
-  const ref = useRef(null)
-  const isInView = useInView(ref, { once: true, amount: 0.2 })
+const softwareCards = [
+  {
+    title: "Driverless Printers",
+    description: "Browse modern devices that work out of the box with IPP and OpenPrinting software.",
+    image: `${basePath}/ipp-everywhere.png`,
+    cta: "Browse devices",
+    href: "#downloads",
+    delay: 0.1,
+  },
+  {
+    title: "Legacy Printers",
+    description: "Use community-maintained free software drivers for older devices.",
+    image: `${basePath}/printer.png`,
+    cta: "Check compatibility",
+    href: "#downloads",
+    delay: 0.2,
+  },
+  {
+    title: "Windows + WSL",
+    description: "Run modern Printer Applications and restore old hardware from a Linux userspace on Windows.",
+    image: `${basePath}/wsl.png`,
+    cta: "Read walkthrough",
+    href: "/OpenPrinting-News-Windows-Protected-Print-vs.-Scanning-under-Windows",
+    delay: 0.3,
+  },
+]
 
-  const softwares = [
-    {
-      title: "Driverless Printers",
-      description:
-        "Most modern printers work ‘out of the box’ with OpenPrinting software. Browse the thousands of driverless printers.",
-      image: `${basePath}/ipp-everywhere.png`,
-      delay: 0.1,
-    },
-    {
-      title: "Legacy Printers",
-      description:
-        "The Foomatic printer database lists all of the printers that are supported by free software printer drivers.",
-      image: `${basePath}/printer.png`,
-      delay: 0.3,
-    },
-    {
-      title: "Windows?!",
-      description:
-        "Our Printer Applications revive old printers under current Windows, any model which works under Linux.",
-      image: `${basePath}/wsl-printing-icon.png`,
-      delay: 0.5,
-    },
-  ]
-  
+const collaborationCards = [
+  {
+    title: "Printer Working Group",
+    description: "Collaborative standards work around Internet Printing Protocol and interoperability.",
+    image: `${basePath}/pwg.png`,
+    cta: "View collaboration",
+    href: "/OpenPrinting-News-A-New-Approach",
+    delay: 0.1,
+  },
+  {
+    title: "Google Summer of Code",
+    description: "Mentorship and contributor onboarding through Linux Foundation programs.",
+    image: `${basePath}/gsoc-new.png`,
+    cta: "GSoC updates",
+    href: "/OpenPrinting-News-Google-Summer-of-Code-2025-Our-most-successful-one",
+    delay: 0.2,
+  },
+  {
+    title: "Google Season of Docs",
+    description: "Documentation-focused improvements that make printing tooling easier to use and maintain.",
+    image: `${basePath}/gsod.png`,
+    cta: "GSoD updates",
+    href: "/OpenPrinting-News-The-Winter-of-Code-4.0",
+    delay: 0.3,
+  },
+]
 
-  const projects = [
-    {
-      title: "Printer Working Group",
-      description:
-        "OpenPrinting collaborates with the PWG's Internet Printing Protocol workgroup to support this ubiquitous printing standard.",
-      image: `${basePath}/pwg.png`,
-      delay: 0.1,
-    },
-    {
-      title: "GSoC - OpenPrinting",
-      description:
-        "OpenPrinting participates in the GSoC program under its umbrella organization The Linux Foundation.",
-      image: `${basePath}/gsoc.jpeg`,
-      delay: 0.3,
-    },
-    {
-      title: "GSoD - OpenPrinting",
-      description:
-        "OpenPrinting participates in the GSoD program under its umbrella organization The Linux Foundation.",
-      image: `${basePath}/gsod.jpg`,
-      delay: 0.5,
-    },
-  ]
+type CardItem = {
+  title: string
+  description: string
+  image: string
+  cta: string
+  href: string
+  delay: number
+}
 
+function CardGrid({ cards, isInView }: { cards: CardItem[]; isInView: boolean }) {
   return (
-    <section ref={ref} className="bg-black text-white" id="projects">
-      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-          transition={{ duration: 0.7 }}
-          className="text-center"
-        >
-          <div className="w-24 h-1 bg-brand-lightBlue mx-auto"></div>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-          transition={{ duration: 0.7, delay: 0.7 }}
-          className="text-center"
+    <div className="grid gap-6 md:grid-cols-3">
+      {cards.map((card) => (
+        <motion.article
+          key={card.title}
+          initial={{ opacity: 0, y: 24 }}
+          animate={isInView ? { opacity: 1, y: 0 } : {}}
+          transition={{ duration: 0.4, delay: card.delay }}
+          className="modern-card flex flex-col"
         >
-          <p className="text-xl md:text-2xl text-center font-bold mb-4 leading-relaxed">
-            Most modern printers work using OpenPrinting software without additional drivers or software.
-          </p>
-          <p className="text-lg text-gray-300">
-            OpenPrinting also hosts a printer compatibility database of legacy printers supported by free software
-            drivers.
-          </p>
-        </motion.div>
+          <div className="rounded-xl border border-gray-200 bg-gray-50/90 p-2 dark:border-slate-700/80 ">
+            <Image src={card.image} alt={card.title} width={360} height={220} className="h-44 w-full rounded-lg object-contain" />
+          </div>
+          <h3 className="mt-5 text-xl font-semibold text-gray-900 dark:text-slate-100">{card.title}</h3>
+          <p className="mt-3 flex-1 text-sm leading-relaxed text-gray-600 dark:text-slate-300">{card.description}</p>
+          <Button asChild className="mt-6 w-fit bg-cyan-600 text-white hover:bg-cyan-700 dark:bg-cyan-400 dark:text-slate-950 dark:hover:bg-cyan-300">
+            <Link href={card.href}>{card.cta}</Link>
+          </Button>
+        </motion.article>
+      ))}
+    </div>
+  )
+}
 
-        <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
+export default function ProjectsSection() {
+  const ref = useRef(null)
+  const isInView = useInView(ref, { once: true, amount: 0.15 })
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {softwares.map((software, index) => (
-            <motion.div
-            key={index}
-            initial={{ opacity: 0, y: 30 }}
-            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-            transition={{ duration: 0.5, delay: software.delay }}
-            className="group relative bg-gray-900 rounded-lg overflow-hidden p-6 border border-gray-800 hover:border-brand-lightBlue transition-colors duration-300 hover:cursor-pointer"
-            whileHover={{
-              scale: 1.02,
-              transition: { duration: 0.2 },
-            }}
-            >
-              <div className="mb-4 bg-white rounded-lg flex items-center justify-center">
-                <Image
-                  src={software.image || `${basePath}/placeholder.svg`}
-                  alt={software.title}
-                  width={300}
-                  height={200}
-                  className="h-full w-full rounded-md object-contain"
-                />
-              </div>
-              <div className="pt-6">
-                <h3 className="text-xl font-bold mb-2">{software.title}</h3>
-                <p className="text-gray-300 mb-4">{software.description}</p>
-                <Button className="bg-blue-500 text-md text-white">Browse</Button>
-              </div>
-            </motion.div>
-          ))}
+  return (
+    <section ref={ref} className="section-shell" id="projects">
+      <div className="container relative z-10">
+        <div className="mx-auto mb-12 max-w-3xl text-center">
+          <span className="section-kicker">Projects</span>
+          <h2 className="section-heading mt-4">Software support and ecosystem programs</h2>
+          <p className="mt-4 text-gray-600 dark:text-slate-300">
+            OpenPrinting covers everyday printing for modern devices while preserving access for older hardware.
+          </p>
         </div>
 
-        <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
+        <CardGrid cards={softwareCards} isInView={isInView} />
 
-        <motion.div
-          initial={{ opacity: 0, y: 30 }}
-          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-          transition={{ duration: 0.7, delay: 0.7 }}
-          className="text-center"
-        >
-          <p className="text-xl md:text-2xl text-center font-bold mb-4 leading-relaxed">
-          OpenPrinting collaborates with standards groups and participates in coding/documentation programs.
-          </p>
-        </motion.div>
-
-        <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
+        <div className="my-16 h-px w-full bg-gradient-to-r from-transparent via-gray-300 to-transparent dark:via-slate-600" />
 
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
-          {projects.map((project, index) => (
-            <motion.div
-            key={index}
-            initial={{ opacity: 0, y: 30 }}
-            animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
-            transition={{ duration: 0.5, delay: project.delay }}
-            className="group relative bg-gray-900 rounded-lg overflow-hidden p-6 border border-gray-800 hover:border-brand-lightBlue transition-colors duration-300 hover:cursor-pointer"
-            whileHover={{
-              scale: 1.02,
-              transition: { duration: 0.2 },
-            }}
-            >
-              <div className="mb-4 bg-white rounded-lg flex items-center justify-center">
-                <Image
-                  src={project.image || `${basePath}/placeholder.svg`}
-                  alt={project.title}
-                  width={300}
-                  height={200}
-                  className="h-full w-full rounded-md object-contain"
-                />
-              </div>
-              <div className="pt-6">
-                <h3 className="text-xl font-bold mb-2">{project.title}</h3>
-                <p className="text-gray-300 mb-4">{project.description}</p>
-                <Button className="bg-blue-500 text-md text-white">Read More</Button>
-              </div>
-            </motion.div>
-          ))}
+        <div className="mx-auto mb-10 max-w-3xl text-center">
+          <h3 className="text-2xl font-semibold text-gray-900 dark:text-slate-100">Standards and mentoring programs</h3>
+          <p className="mt-3 text-gray-600 dark:text-slate-300">
+            We work with standards groups and support contributors through coding and documentation initiatives.
+          </p>
         </div>
+
+        <CardGrid cards={collaborationCards} isInView={isInView} />
       </div>
-      <div className="w-full h-px bg-gradient-to-r from-transparent via-border to-transparent my-16"></div>
     </section>
   )
 }
diff --git a/components/sponsors-strip.tsx b/components/sponsors-strip.tsx
new file mode 100644
index 00000000..dadcf564
--- /dev/null
+++ b/components/sponsors-strip.tsx
@@ -0,0 +1,49 @@
+"use client"
+
+import Image from "next/image"
+import { motion } from "framer-motion"
+
+const basePath = process.env.NODE_ENV === "production" ? "/openprinting.github.io" : ""
+
+const sponsors = [
+  { name: "The Linux Foundation", logo: `${basePath}/assets/images/lfmp.png` },
+  { name: "Sovereign Tech Agency", logo: `${basePath}/sta.jpeg` },
+]
+
+export default function SponsorsStrip() {
+  return (
+    <section className="py-10 md:py-14">
+      <div className="container">
+        <motion.div
+          initial={{ opacity: 0, y: 12 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.45 }}
+          className="flex flex-col items-center gap-4"
+        >
+          <p className="text-xs font-medium uppercase tracking-[0.15em] text-gray-400 dark:text-slate-500">
+            Supported by
+          </p>
+          <div className="flex flex-wrap items-center justify-center gap-3">
+            {sponsors.map((sponsor) => (
+              <div
+                key={sponsor.name}
+                className="inline-flex items-center gap-2.5 rounded-full border border-gray-200 bg-white/60 px-4 py-2 text-sm font-medium text-gray-600 backdrop-blur-sm transition-colors hover:border-cyan-400/40 dark:border-slate-700/70 dark:bg-slate-900/50 dark:text-slate-300 dark:hover:border-cyan-400/40"
+              >
+                <Image
+                  src={sponsor.logo}
+                  alt={sponsor.name}
+                  width={28}
+                  height={28}
+                  className="h-7 w-7 rounded-full object-cover"
+                  unoptimized
+                />
+                {sponsor.name}
+              </div>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  )
+}
diff --git a/components/table-of-contents.tsx b/components/table-of-contents.tsx
index ba23fd10..ce15f578 100644
--- a/components/table-of-contents.tsx
+++ b/components/table-of-contents.tsx
@@ -7,6 +7,7 @@ import GithubSlugger from "github-slugger";
 import { unified } from "unified";
 import remarkParse from "remark-parse";
 import type { Node } from "unist";
+import { cn } from "@/lib/utils";
 
 interface TocEntry {
   value: string;
@@ -40,6 +41,8 @@ export function TableOfContents({ content, isSticky = false }: TableOfContentsPr
     return tocEntries;
   }, [content]);
 
+  if (toc.length === 0) return null;
+
   const handleClick = (event: MouseEvent<HTMLAnchorElement>, url: string) => {
     event.preventDefault();
 
@@ -56,7 +59,7 @@ export function TableOfContents({ content, isSticky = false }: TableOfContentsPr
 
     if (!target) return;
 
-    const yOffset = 80;
+    const yOffset = 96;
     const rect = target.getBoundingClientRect();
     const scrollTop = window.scrollY + rect.top - yOffset;
 
@@ -66,16 +69,24 @@ export function TableOfContents({ content, isSticky = false }: TableOfContentsPr
     });
   };
 
-  const containerClasses = `w-full bg-gray-900 p-4 rounded-lg ${isSticky ? "sticky top-4 self-start" : ""}`;
-
   return (
-    <nav className={containerClasses}>
-      <h2 className="text-lg font-semibold mb-2 text-white">Table of Contents</h2>
-      <ul className="space-y-2">
+    <nav
+      className={cn(
+        "modern-card w-full",
+        isSticky ? "sticky top-24 self-start" : ""
+      )}
+    >
+      <h2 className="text-sm font-semibold uppercase tracking-[0.14em] text-cyan-700 dark:text-cyan-200">
+        Table of Contents
+      </h2>
+      <ul className="mt-4 space-y-2.5">
         {toc.map((entry, index) => (
           <li
-            key={index}
-            className={`${entry.depth > 2 ? "ml-4" : ""} text-sm hover:text-blue-400 transition-colors`}
+            key={`${entry.url}-${index}`}
+            className={cn(
+              "text-sm leading-relaxed text-gray-600 transition-colors hover:text-cyan-700 dark:text-slate-300 dark:hover:text-cyan-200",
+              entry.depth > 2 ? "ml-4 text-gray-400 dark:text-slate-400" : ""
+            )}
           >
             <a
               href={`#${entry.url}`}
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
new file mode 100644
index 00000000..37ecdd89
--- /dev/null
+++ b/components/theme-provider.tsx
@@ -0,0 +1,8 @@
+"use client"
+
+import { ThemeProvider as NextThemesProvider } from "next-themes"
+import type { ThemeProviderProps } from "next-themes"
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
new file mode 100644
index 00000000..06f0e4d0
--- /dev/null
+++ b/components/theme-toggle.tsx
@@ -0,0 +1,38 @@
+"use client"
+
+import { useTheme } from "next-themes"
+import { useEffect, useState } from "react"
+import { Sun, Moon } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme()
+  const [mounted, setMounted] = useState(false)
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="text-slate-300">
+        <Sun className="h-5 w-5" />
+        <span className="sr-only">Toggle theme</span>
+      </Button>
+    )
+  }
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
+      className="text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-slate-300 dark:hover:bg-slate-800/80 dark:hover:text-slate-100"
+      aria-label="Toggle theme"
+    >
+      {resolvedTheme === "dark" ? (
+        <Sun className="h-5 w-5" />
+      ) : (
+        <Moon className="h-5 w-5" />
+      )}
+    </Button>
+  )
+}
diff --git a/package.json b/package.json
index a27f6614..1d86a17a 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "lucide-react": "^0.474.0",
     "mdast-util-to-string": "^3.1.0",
     "next": "15.1.6",
+    "next-themes": "^0.4.6",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^9.0.1",
diff --git a/public/contribute-new.png b/public/contribute-new.png
new file mode 100644
index 00000000..b9cd5b98
Binary files /dev/null and b/public/contribute-new.png differ
diff --git a/public/cups.png b/public/cups.png
index a290a08d..c1cc7545 100644
Binary files a/public/cups.png and b/public/cups.png differ
diff --git a/public/gsoc-new.png b/public/gsoc-new.png
new file mode 100644
index 00000000..f1048457
Binary files /dev/null and b/public/gsoc-new.png differ
diff --git a/public/gsod.jpg b/public/gsod.jpg
deleted file mode 100644
index 9e823d4b..00000000
Binary files a/public/gsod.jpg and /dev/null differ
diff --git a/public/gsod.png b/public/gsod.png
new file mode 100644
index 00000000..2f40db56
Binary files /dev/null and b/public/gsod.png differ
diff --git a/public/lfx.svg b/public/lfx.svg
new file mode 100644
index 00000000..8928d7ae
--- /dev/null
+++ b/public/lfx.svg
@@ -0,0 +1 @@
+<svg height="2500" width="2500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52"><g fill="none" fill-rule="evenodd"><g fill-rule="nonzero"><path d="M48 4v44H34.633v-8.911h4.456V12.91H12.91v4.456H4V4z" fill="#043765"/><path d="M13.095 21v17.905H31V48H4V21z" fill="#1f9bde"/></g><path d="M0 0h52v52H0z"/></g></svg>
\ No newline at end of file
diff --git a/public/lfx2.png b/public/lfx2.png
new file mode 100644
index 00000000..4d657494
Binary files /dev/null and b/public/lfx2.png differ
diff --git a/public/pwg.png b/public/pwg.png
index 8f25fa65..fd505ddd 100644
Binary files a/public/pwg.png and b/public/pwg.png differ
diff --git a/public/sta.jpeg b/public/sta.jpeg
new file mode 100644
index 00000000..39e2e9f2
Binary files /dev/null and b/public/sta.jpeg differ
diff --git a/public/wsl.png b/public/wsl.png
new file mode 100644
index 00000000..8919172e
Binary files /dev/null and b/public/wsl.png differ