diff --git a/app/(core)/components/Chapter.jsx b/app/(core)/components/Chapter.jsx
index 1e28af2f..153e24f4 100644
--- a/app/(core)/components/Chapter.jsx
+++ b/app/(core)/components/Chapter.jsx
@@ -1,29 +1,59 @@
 // app/components/Chapter.jsx
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faAtom } from "@fortawesome/free-solid-svg-icons";
 import Tag from "./Tag.jsx";
 import Link from "next/link.js";
-import Image from "next/image";
 import useTranslation from "../hooks/useTranslation.ts";
+import { COLORS } from "../data/tags.js";
 
 function Chapter(props) {
   const { t, meta } = useTranslation();
   const isCompleted = meta?.completed || false;
-  console.log("Chapter props:", props); // Debug log to check props
+  const primaryTag = props.tags?.[0];
+  const secondaryTag = props.tags?.[1];
+  const primaryColor = COLORS[primaryTag?.color]?.primary || "#00e6e6";
+  const secondaryColor = COLORS[secondaryTag?.color]?.secondary || "#7dd3fc";
+
   return (
     <section
       id={props.id}
       className={`chapter-card ${isCompleted ? "notranslate" : ""}`}
     >
       {/* Hero thumbnail */}
-      <div className="chapter-card-hero">
+      <div
+        className="chapter-card-hero"
+        style={{
+          "--chapter-accent": primaryColor,
+          "--chapter-accent-2": secondaryColor,
+        }}
+      >
+        <div className="chapter-card-hero-fallback">
+          <div className="chapter-card-generated-orbit chapter-card-generated-orbit--outer" />
+          <div className="chapter-card-generated-orbit chapter-card-generated-orbit--inner" />
+          <FontAwesomeIcon
+            icon={faAtom}
+            className="chapter-card-generated-icon"
+          />
+          <div className="chapter-card-generated-topic">
+            {t(primaryTag?.name || "Physics")}
+          </div>
+        </div>
         <div className="chapter-card-hero-glow" />
 
-        <Image
-          src={props.thumbnail}
-          alt={`${t(props.name)} thumbnail`}
-          fill={true}
-        />
+        {props.thumbnail ? (
+          // Cards can use local or arbitrary external article images.
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={props.thumbnail}
+            alt={`${t(props.name)} thumbnail`}
+            className="chapter-card-hero-img"
+            loading="lazy"
+            decoding="async"
+            onError={(event) => {
+              event.currentTarget.style.display = "none";
+            }}
+          />
+        ) : null}
       </div>
 
       <div className="chapter-card-overlay">
diff --git a/app/(core)/components/Hero.jsx b/app/(core)/components/Hero.jsx
index 2283539a..80cdb2d8 100644
--- a/app/(core)/components/Hero.jsx
+++ b/app/(core)/components/Hero.jsx
@@ -1,7 +1,13 @@
 import React from "react";
 import Link from "next/link";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import {
+  faArrowRight,
+  faAtom,
+  faBolt,
+  faPlay,
+  faWaveSquare,
+} from "@fortawesome/free-solid-svg-icons";
 import { faGithub } from "@fortawesome/free-brands-svg-icons";
 import chaptersData from "../data/chapters.js";
 import { motion, useReducedMotion } from "framer-motion";
@@ -105,58 +111,124 @@ export function Hero() {
 
   return (
     <motion.div
-      className={`ph-hero__container ${isCompleted ? "notranslate" : ""}`}
+      className={`ph-hero__container ph-hero__container--landing ${
+        isCompleted ? "notranslate" : ""
+      }`}
       variants={containerVariants(reduceMotion)}
       initial="hidden"
       animate="show"
       style={{ position: "relative", overflow: "hidden" }}
     >
-      {/* Animated H1 with per-word glow on PhysicsHub */}
-      <motion.h1
-        className="ph-hero__title"
-        variants={textContainer(reduceMotion)}
-      >
-        {titleWords.map((word, idx) => {
-          const isHighlight = word.includes("PhysicsHub");
-          return (
-            <motion.span
-              key={idx}
-              variants={isHighlight ? glowVariant : wordVariant}
-              style={{ display: "inline-block", marginRight: "0.25ch" }}
+      <div className="ph-hero__copy">
+        <motion.p className="ph-hero__eyebrow" variants={fadeUp(reduceMotion)}>
+          <FontAwesomeIcon icon={faAtom} />
+          {t("Interactive physics learning")}
+        </motion.p>
+
+        {/* Animated H1 with per-word glow on PhysicsHub */}
+        <motion.h1
+          className="ph-hero__title"
+          variants={textContainer(reduceMotion)}
+        >
+          {titleWords.map((word, idx) => {
+            const isHighlight = word.includes("PhysicsHub");
+            return (
+              <motion.span
+                key={idx}
+                variants={isHighlight ? glowVariant : wordVariant}
+                style={{ display: "inline-block", marginRight: "0.25ch" }}
+              >
+                {word}
+              </motion.span>
+            );
+          })}
+        </motion.h1>
+
+        {/* Subtitle */}
+        <motion.p className="ph-hero__subtitle" variants={fadeUp(reduceMotion)}>
+          {t(
+            "Experience physics in real time, uncover the concepts behind the formulas, and instantly see how they apply to the real world."
+          )}
+        </motion.p>
+
+        {/* CTA buttons */}
+        <motion.div className="ph-hero__ctas" variants={fadeUp(reduceMotion)}>
+          <motion.div
+            variants={buttonVariant}
+            whileHover="hover"
+            whileTap="tap"
+          >
+            <Link
+              className="ph-btn ph-btn--primary main-btn"
+              href="/simulations"
             >
-              {word}
-            </motion.span>
-          );
-        })}
-      </motion.h1>
-
-      {/* Subtitle */}
-      <motion.p className="ph-hero__subtitle" variants={fadeUp(reduceMotion)}>
-        {t(
-          "Experience physics in real time, uncover the concepts behind the formulas, and instantly see how they apply to the real world."
-        )}
-      </motion.p>
-
-      {/* CTA buttons */}
-      <motion.div className="ph-hero__ctas" variants={fadeUp(reduceMotion)}>
-        <motion.div variants={buttonVariant} whileHover="hover" whileTap="tap">
-          <Link className="ph-btn ph-btn--primary main-btn" href="/simulations">
-            {t("Go to Simulations")}
-            <FontAwesomeIcon icon={faArrowRight} style={{ marginLeft: 8 }} />
-          </Link>
-        </motion.div>
-        <motion.div variants={buttonVariant} whileHover="hover" whileTap="tap">
-          <Link className="ph-btn ph-btn--ghost main-btn" href="/contribute">
-            {t("Contribute")}
-            <FontAwesomeIcon icon={faGithub} style={{ marginLeft: 8 }} />
-          </Link>
+              {t("Go to Simulations")}
+              <FontAwesomeIcon icon={faArrowRight} style={{ marginLeft: 8 }} />
+            </Link>
+          </motion.div>
+          <motion.div
+            variants={buttonVariant}
+            whileHover="hover"
+            whileTap="tap"
+          >
+            <Link className="ph-btn ph-btn--ghost main-btn" href="/contribute">
+              {t("Contribute")}
+              <FontAwesomeIcon icon={faGithub} style={{ marginLeft: 8 }} />
+            </Link>
+          </motion.div>
         </motion.div>
-      </motion.div>
 
-      {/* Info text */}
-      <motion.p className="ph-hero__info" variants={fadeUp(reduceMotion)}>
-        {t("Currently")} {chaptersCount} {t("chapters available.")}
-      </motion.p>
+        {/* Info text */}
+        <motion.p className="ph-hero__info" variants={fadeUp(reduceMotion)}>
+          {t("Currently")} {chaptersCount} {t("chapters available.")}
+        </motion.p>
+      </div>
+
+      <motion.aside
+        className="ph-hero-preview"
+        aria-label={t("Physics simulation preview")}
+        variants={fadeUp(reduceMotion)}
+      >
+        <div className="ph-hero-preview__toolbar">
+          <span />
+          <span />
+          <span />
+          <strong>{t("Live Simulation")}</strong>
+        </div>
+        <div className="ph-hero-preview__stage" aria-hidden="true">
+          <div className="ph-hero-preview__scan" />
+          <div className="ph-hero-preview__pulse ph-hero-preview__pulse--one" />
+          <div className="ph-hero-preview__pulse ph-hero-preview__pulse--two" />
+          <div className="ph-hero-preview__orbit ph-hero-preview__orbit--outer" />
+          <div className="ph-hero-preview__orbit ph-hero-preview__orbit--inner" />
+          <div className="ph-hero-preview__orbit ph-hero-preview__orbit--tilt" />
+          <div className="ph-hero-preview__mass ph-hero-preview__mass--primary" />
+          <div className="ph-hero-preview__mass ph-hero-preview__mass--secondary" />
+          <div className="ph-hero-preview__mass ph-hero-preview__mass--tertiary" />
+          <div className="ph-hero-preview__vector" />
+          <FontAwesomeIcon className="ph-hero-preview__atom" icon={faAtom} />
+        </div>
+        <div
+          className="ph-hero-preview__topics"
+          aria-label={t("Related topics")}
+        >
+          <Link href="/simulations/BallGravity">{t("Gravity")}</Link>
+          <Link href="/simulations/VectorsOperations">{t("Vectors")}</Link>
+          <Link href="/simulations/SimplePendulum">{t("Oscillations")}</Link>
+        </div>
+        <div className="ph-hero-preview__metrics">
+          <Link href="/simulations/CircularMotion">
+            <FontAwesomeIcon icon={faWaveSquare} />v = 8.2 m/s
+          </Link>
+          <Link href="/simulations/SpringConnection">
+            <FontAwesomeIcon icon={faBolt} />E = 42 J
+          </Link>
+          <Link className="ph-hero-preview__try" href="/simulations">
+            <FontAwesomeIcon icon={faPlay} />
+            {t("Try it live")}
+          </Link>
+        </div>
+      </motion.aside>
     </motion.div>
   );
 }
diff --git a/app/(core)/components/TopSim.tsx b/app/(core)/components/TopSim.tsx
index 55665acd..d481879d 100644
--- a/app/(core)/components/TopSim.tsx
+++ b/app/(core)/components/TopSim.tsx
@@ -32,7 +32,7 @@ export default function TopSim() {
     <div className={`top-nav-sim ${isCompleted ? "notranslate" : ""}`}>
       {!isMobile && (
         <div className="top-nav-sim-back-to-home-wrapper">
-          <Back link="/simulations" />
+          <Back link="/" />
         </div>
       )}
       <div
diff --git a/app/(core)/components/theory/elements/TheoryImage.tsx b/app/(core)/components/theory/elements/TheoryImage.tsx
index dda2ceab..19f8761b 100644
--- a/app/(core)/components/theory/elements/TheoryImage.tsx
+++ b/app/(core)/components/theory/elements/TheoryImage.tsx
@@ -3,7 +3,6 @@ import useTranslation from "../../../../../app/(core)/hooks/useTranslation.ts";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopyright, faUpload } from "@fortawesome/free-solid-svg-icons";
 import { EditableProps } from "../types";
-import Image from "next/image";
 
 type ImageSize = "xsmall" | "small" | "medium" | "large" | "full";
 
@@ -44,6 +43,18 @@ export const TheoryImage: React.FC<TheoryImageProps> = ({
     }
   };
 
+  const fallbackSrc = "https://via.placeholder.com/800x400?text=Image";
+  const imageSrc = currentSrc || fallbackSrc;
+
+  const sourceHostname = (() => {
+    if (!href) return "";
+    try {
+      return new URL(href).hostname;
+    } catch {
+      return href;
+    }
+  })();
+
   return (
     <figure
       className={`theory-image-container size-${size} ${isCompleted ? "notranslate" : ""}`}
@@ -82,21 +93,22 @@ export const TheoryImage: React.FC<TheoryImageProps> = ({
         className={`image-wrapper ${!isEditing && href ? "is-link" : ""}`}
         onClick={handleImageClick}
       >
-        <Image
-          src={
-            currentSrc || "https://via.placeholder.com/800x400?text=No+Image"
-          }
+        {/* Blog articles use arbitrary external/redirecting sources, so render
+            them directly instead of routing through next/image validation. */}
+        {/* eslint-disable-next-line @next/next/no-img-element */}
+        <img
+          src={imageSrc}
           alt={t(alt ?? "")}
           className={isEditing ? "editing-border" : ""}
-          width={800}
-          height={450}
-          style={{ width: "100%", height: "auto" }}
+          loading="lazy"
+          decoding="async"
+          onError={() => setCurrentSrc(fallbackSrc)}
         />
 
         {href && (
           <div className="copyright-badge">
             <FontAwesomeIcon icon={faCopyright} className="badge-icon" />
-            <span className="badge-text">{new URL(href).hostname}</span>
+            <span className="badge-text">{sourceHostname}</span>
           </div>
         )}
       </div>
diff --git a/app/(core)/components/theory/types.ts b/app/(core)/components/theory/types.ts
index 0554f5b9..6c3b7318 100644
--- a/app/(core)/components/theory/types.ts
+++ b/app/(core)/components/theory/types.ts
@@ -54,6 +54,7 @@ export interface SectionData {
 export interface BlogContent {
   title: string;
   desc: string;
+  thumbnail?: string;
   tags: string[];
   sections: SectionData[];
 }
diff --git a/app/(core)/data/initialContent.js b/app/(core)/data/initialContent.js
index def4eab4..37847190 100644
--- a/app/(core)/data/initialContent.js
+++ b/app/(core)/data/initialContent.js
@@ -6,6 +6,7 @@
 export const initialContentData = {
   title: "Visual Editor Guide",
   desc: "",
+  thumbnail: "",
   tags: [],
   sections: [
     {
diff --git a/app/(core)/styles/index.css b/app/(core)/styles/index.css
index 63b8052e..b102e9a9 100644
--- a/app/(core)/styles/index.css
+++ b/app/(core)/styles/index.css
@@ -880,13 +880,18 @@ main.simulations-page {
     transparent 50%,
     var(--card-bg) e6 100%
   );
-  z-index: 1;
+  z-index: 2;
   pointer-events: none;
 }
 
 .chapter-card-hero-img {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  width: 100%;
+  height: 100%;
   object-fit: cover;
-  object-position: center top;
+  object-position: center;
   transition:
     transform 0.35s ease,
     opacity 0.25s ease;
@@ -925,7 +930,120 @@ main.simulations-page {
 .chapter-card-hero-fallback {
   position: absolute;
   inset: 0;
-  background: var(--bg-color);
+  display: grid;
+  place-items: center;
+  background:
+    radial-gradient(
+      circle at 50% 42%,
+      color-mix(
+        in oklab,
+        var(--chapter-accent, var(--accent-color)),
+        transparent 42%
+      ),
+      transparent 44%
+    ),
+    linear-gradient(
+      135deg,
+      color-mix(
+        in oklab,
+        var(--chapter-accent, var(--accent-color)),
+        black 70%
+      ),
+      #080d19 58%,
+      color-mix(in oklab, var(--chapter-accent-2, #7dd3fc), black 78%)
+    );
+  overflow: hidden;
+}
+
+.chapter-card-hero-fallback::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: radial-gradient(circle at center, black, transparent 78%);
+}
+
+.chapter-card-hero-fallback::after {
+  content: "";
+  position: absolute;
+  width: 160%;
+  height: 1px;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in oklab, var(--chapter-accent, var(--accent-color)), white 20%),
+    transparent
+  );
+  transform: rotate(-24deg);
+  opacity: 0.5;
+}
+
+.chapter-card-generated-orbit {
+  position: absolute;
+  border: 1px solid
+    color-mix(
+      in oklab,
+      var(--chapter-accent, var(--accent-color)),
+      transparent 34%
+    );
+  border-radius: 999px;
+  box-shadow: 0 0 22px
+    color-mix(
+      in oklab,
+      var(--chapter-accent, var(--accent-color)),
+      transparent 78%
+    );
+}
+
+.chapter-card-generated-orbit--outer {
+  width: 56%;
+  height: 36%;
+  transform: rotate(-18deg);
+}
+
+.chapter-card-generated-orbit--inner {
+  width: 42%;
+  height: 42%;
+  transform: rotate(58deg);
+  opacity: 0.7;
+}
+
+.chapter-card-generated-icon {
+  position: relative;
+  z-index: 1;
+  color: color-mix(
+    in oklab,
+    var(--chapter-accent, var(--accent-color)),
+    white 30%
+  );
+  font-size: clamp(2.3rem, 6vw, 4rem);
+  filter: drop-shadow(
+    0 0 18px
+      color-mix(in oklab, var(--chapter-accent, var(--accent-color)), white 12%)
+  );
+}
+
+.chapter-card-generated-topic {
+  position: absolute;
+  left: 0.85rem;
+  bottom: 0.85rem;
+  z-index: 2;
+  max-width: calc(100% - 1.7rem);
+  padding: 0.32rem 0.65rem;
+  border-radius: 999px;
+  color: #061018;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--chapter-accent, var(--accent-color)), white 34%),
+    var(--chapter-accent, var(--accent-color))
+  );
+  font-size: 0.68rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 /* ─── Body ──────────────────────────────────────────────────── */
@@ -3028,6 +3146,73 @@ footer {
   margin-bottom: 2rem;
 }
 
+.thumbnail-upload-card {
+  display: grid;
+  grid-template-columns: minmax(220px, 320px) 1fr;
+  gap: 1rem;
+  align-items: center;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  background: color-mix(in oklab, var(--accent-color), transparent 94%);
+}
+
+.thumbnail-upload-preview,
+.thumbnail-upload-placeholder {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--border-radius);
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 70%);
+  background: var(--bg-color);
+}
+
+.thumbnail-upload-preview {
+  object-fit: cover;
+  display: block;
+}
+
+.thumbnail-upload-placeholder {
+  display: grid;
+  place-items: center;
+  gap: 0.5rem;
+  color: var(--subtitle-color);
+  text-align: center;
+  padding: 1rem;
+}
+
+.thumbnail-upload-placeholder svg {
+  color: var(--accent-color);
+  font-size: 1.5rem;
+}
+
+.thumbnail-upload-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.thumbnail-upload-button,
+.thumbnail-remove-button {
+  min-height: 2.75rem;
+}
+
+.thumbnail-upload-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (max-width: 720px) {
+  .thumbnail-upload-card {
+    grid-template-columns: 1fr;
+  }
+}
+
 .blog-editor-area label {
   display: block;
   font-size: 0.9rem;
diff --git a/app/(core)/styles/landing.css b/app/(core)/styles/landing.css
index 55e9824b..157ba143 100644
--- a/app/(core)/styles/landing.css
+++ b/app/(core)/styles/landing.css
@@ -26,17 +26,27 @@
 }
 
 .ph-hero {
-  display: flex;
   justify-content: center;
   position: relative;
   isolation: isolate;
   border-radius: var(--ph-radius);
   overflow: clip;
-  padding: clamp(2rem, 5vw, 3.5rem);
-  min-height: 62vh;
+  min-height: 100vh;
   display: grid;
   align-items: center;
-  padding: 8rem 0;
+  padding: clamp(5rem, 9vw, 7rem) 0 clamp(4rem, 7vw, 6rem);
+  background:
+    radial-gradient(
+      circle at 72% 27%,
+      color-mix(in oklab, var(--accent-color), transparent 72%),
+      transparent 34rem
+    ),
+    linear-gradient(
+      135deg,
+      rgba(4, 8, 17, 0.92),
+      rgba(10, 17, 31, 0.72) 46%,
+      rgba(0, 230, 230, 0.1)
+    );
 }
 
 .ph-hero > div {
@@ -92,19 +102,52 @@
 
 .ph-hero__container {
   position: relative;
-  max-width: 1100px;
-  padding: 5rem 3rem;
-  margin: 8rem 0rem;
+  width: min(1180px, calc(100% - 2rem));
+  max-width: 1180px;
+  padding: clamp(2rem, 4vw, 3rem);
+  margin: clamp(3rem, 7vw, 5.5rem) auto;
   text-align: left;
   color: var(--ph-fg);
   pointer-events: none;
 }
 
+.ph-hero__container--landing {
+  display: grid;
+  grid-template-columns: minmax(0, 1.02fr) minmax(330px, 0.78fr);
+  gap: clamp(2rem, 5vw, 4rem);
+  align-items: center;
+  margin: clamp(1.5rem, 4vw, 3rem) auto;
+  padding-block: clamp(2rem, 4vw, 3.75rem);
+}
+
+.ph-hero__container--landing::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 72%);
+  border-radius: 28px;
+  background:
+    linear-gradient(
+      135deg,
+      rgba(255, 255, 255, 0.08),
+      rgba(255, 255, 255, 0.02)
+    ),
+    color-mix(in oklab, var(--ph-surface), transparent 12%);
+  box-shadow:
+    0 30px 80px rgba(0, 0, 0, 0.38),
+    inset 0 1px 0 rgba(255, 255, 255, 0.08);
+}
+
+.ph-hero__copy {
+  max-width: 680px;
+}
+
 @media (max-width: 768px) {
   .ph-hero__container {
     margin: 0;
-    padding-top: 0;
-    padding-bottom: 15rem;
+    padding-top: 2rem;
+    padding-bottom: 8rem;
   }
 }
 
@@ -115,43 +158,45 @@
   font-size: 0.85rem;
   letter-spacing: 0.08em;
   text-transform: uppercase;
-  color: var(--ph-fg-muted);
-  background: color-mix(in oklab, var(--accent-color), transparent 86%);
-  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 70%);
-  padding: 0.35rem 0.55rem;
+  color: color-mix(in oklab, var(--accent-color), white 36%);
+  background: color-mix(in oklab, var(--accent-color), transparent 82%);
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 54%);
+  padding: 0.45rem 0.75rem;
   border-radius: 999px;
+  box-shadow: 0 0 30px color-mix(in oklab, var(--accent-color), transparent 86%);
 }
 
 .ph-hero__title {
-  margin: 1.5rem 0;
-  font-size: clamp(2rem, 4vw, 3.2rem);
-  line-height: 1.1;
-  letter-spacing: -0.01em;
+  margin: 1.25rem 0;
+  font-size: clamp(2.4rem, 5.7vw, 5.35rem);
+  line-height: 0.98;
+  letter-spacing: -0.05em;
+  max-width: 11ch;
 }
 
 .ph-hero__subtitle {
-  margin: 1.5rem 0;
-  color: var(--ph-fg-muted);
-  font-size: clamp(1rem, 1.4vw, 1.125rem);
-  max-width: 62ch;
+  margin: 1.25rem 0;
+  color: color-mix(in oklab, var(--ph-fg), transparent 24%);
+  font-size: clamp(1.02rem, 1.45vw, 1.2rem);
+  max-width: 58ch;
 }
 
 .ph-hero__ctas {
   display: flex;
-  gap: 0.75rem;
+  gap: 0.85rem;
   flex-wrap: wrap;
-  margin: 2rem 0;
+  margin: 2rem 0 1.25rem;
   pointer-events: auto;
 }
 
 .ph-btn {
-  --pad-x: 1rem;
-  --pad-y: 0.7rem;
+  --pad-x: 1.1rem;
+  --pad-y: 0.78rem;
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
   padding: var(--pad-y) var(--pad-x);
-  border-radius: 10px;
+  border-radius: 14px;
   text-decoration: none;
   font-weight: 600;
   border: 1px solid transparent;
@@ -165,14 +210,15 @@
 }
 
 .ph-btn--primary {
-  color: white;
+  color: #001919;
   background: linear-gradient(
     180deg,
-    var(--accent-color),
-    color-mix(in oklab, var(--accent-color), black 12%)
+    color-mix(in oklab, var(--accent-color), white 20%),
+    var(--accent-color)
   );
-  box-shadow: 0 8px 24px
-    color-mix(in oklab, var(--accent-color), transparent 75%);
+  box-shadow:
+    0 18px 38px color-mix(in oklab, var(--accent-color), transparent 68%),
+    inset 0 1px 0 rgba(255, 255, 255, 0.42);
 }
 
 .ph-btn--primary:hover {
@@ -202,9 +248,9 @@
 }
 
 .main-btn {
-  font-size: 1.1rem;
-  --pad-x: 1.25rem;
-  --pad-y: 0.85rem;
+  font-size: 1.05rem;
+  --pad-x: 1.35rem;
+  --pad-y: 0.9rem;
 }
 
 .ph-hero__stats {
@@ -254,5 +300,445 @@
 }
 
 .ph-hero__info {
-  color: var(--ph-fg-muted);
+  color: color-mix(in oklab, var(--ph-fg), transparent 34%);
+}
+
+.ph-hero-preview {
+  position: relative;
+  pointer-events: auto;
+  min-height: 470px;
+  border-radius: 26px;
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 62%);
+  background:
+    radial-gradient(
+      circle at 50% 42%,
+      color-mix(in oklab, var(--accent-color), transparent 62%),
+      transparent 18rem
+    ),
+    linear-gradient(160deg, rgba(10, 18, 33, 0.96), rgba(4, 10, 21, 0.88));
+  box-shadow:
+    0 26px 70px rgba(0, 0, 0, 0.42),
+    0 0 70px color-mix(in oklab, var(--accent-color), transparent 84%);
+  overflow: hidden;
+}
+
+.ph-hero-preview::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--ph-grid) 1px, transparent 1px),
+    linear-gradient(90deg, var(--ph-grid) 1px, transparent 1px);
+  background-size: 34px 34px;
+  mask-image: radial-gradient(circle at center, black, transparent 78%);
+  opacity: 0.8;
+}
+
+.ph-hero-preview::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  background: linear-gradient(
+    120deg,
+    transparent 0%,
+    rgba(255, 255, 255, 0.1) 42%,
+    transparent 54%
+  );
+  transform: translateX(-130%);
+  animation: ph-preview-shine 5.5s ease-in-out infinite;
+  pointer-events: none;
+}
+
+.ph-hero-preview__toolbar,
+.ph-hero-preview__topics,
+.ph-hero-preview__metrics {
+  position: relative;
+  z-index: 2;
+}
+
+.ph-hero-preview__toolbar {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 1rem 1.15rem;
+  border-bottom: 1px solid
+    color-mix(in oklab, var(--accent-color), transparent 78%);
+  background: rgba(255, 255, 255, 0.04);
+}
+
+.ph-hero-preview__toolbar span {
+  width: 0.65rem;
+  height: 0.65rem;
+  border-radius: 999px;
+  background: color-mix(in oklab, var(--accent-color), white 28%);
+  opacity: 0.82;
+}
+
+.ph-hero-preview__toolbar strong {
+  margin-left: 0.4rem;
+  color: color-mix(in oklab, var(--ph-fg), transparent 8%);
+  font-size: 0.82rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.ph-hero-preview__stage {
+  position: relative;
+  min-height: 300px;
+}
+
+.ph-hero-preview__scan {
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    color-mix(in oklab, var(--accent-color), transparent 72%),
+    transparent
+  );
+  height: 34%;
+  opacity: 0.48;
+  animation: ph-scan 4.8s ease-in-out infinite;
+}
+
+.ph-hero-preview__pulse {
+  position: absolute;
+  inset: 50%;
+  width: 5rem;
+  height: 5rem;
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 38%);
+  border-radius: 999px;
+  transform: translate(-50%, -50%);
+  animation: ph-pulse-ring 3s ease-out infinite;
+}
+
+.ph-hero-preview__pulse--two {
+  animation-delay: 1.2s;
+}
+
+.ph-hero-preview__orbit {
+  position: absolute;
+  inset: 50%;
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 48%);
+  border-radius: 999px;
+  transform: translate(-50%, -50%) rotate(-18deg);
+}
+
+.ph-hero-preview__orbit--outer {
+  width: 270px;
+  height: 160px;
+  box-shadow: 0 0 28px color-mix(in oklab, var(--accent-color), transparent 86%);
+  animation: ph-orbit-outer 8s linear infinite;
+}
+
+.ph-hero-preview__orbit--inner {
+  width: 190px;
+  height: 190px;
+  transform: translate(-50%, -50%) rotate(58deg);
+  opacity: 0.65;
+  animation: ph-orbit-inner 6.5s linear infinite reverse;
+}
+
+.ph-hero-preview__orbit--tilt {
+  width: 235px;
+  height: 118px;
+  opacity: 0.55;
+  transform: translate(-50%, -50%) rotate(118deg);
+  animation: ph-orbit-tilt 7.5s linear infinite;
+}
+
+.ph-hero-preview__mass {
+  position: absolute;
+  border-radius: 999px;
+  background: var(--accent-color);
+  box-shadow:
+    0 0 22px var(--accent-color),
+    0 0 54px color-mix(in oklab, var(--accent-color), transparent 45%);
+}
+
+.ph-hero-preview__mass--primary {
+  width: 1.2rem;
+  height: 1.2rem;
+  top: 36%;
+  right: 24%;
+  animation: ph-float-primary 3.6s ease-in-out infinite;
+}
+
+.ph-hero-preview__mass--secondary {
+  width: 0.8rem;
+  height: 0.8rem;
+  left: 27%;
+  bottom: 29%;
+  background: #ffffff;
+  animation: ph-float-secondary 4.2s ease-in-out infinite;
+}
+
+.ph-hero-preview__mass--tertiary {
+  width: 0.55rem;
+  height: 0.55rem;
+  top: 26%;
+  left: 31%;
+  background: color-mix(in oklab, var(--accent-color), white 38%);
+  animation: ph-float-tertiary 3.2s ease-in-out infinite;
+}
+
+.ph-hero-preview__vector {
+  position: absolute;
+  left: 33%;
+  bottom: 31%;
+  width: 140px;
+  height: 2px;
+  background: linear-gradient(90deg, var(--accent-color), transparent);
+  transform: rotate(-32deg);
+  transform-origin: left center;
+  animation: ph-vector 2.8s ease-in-out infinite;
+}
+
+.ph-hero-preview__vector::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  top: 50%;
+  width: 0.55rem;
+  height: 0.55rem;
+  border-top: 2px solid var(--accent-color);
+  border-right: 2px solid var(--accent-color);
+  transform: translateY(-50%) rotate(45deg);
+}
+
+.ph-hero-preview__atom {
+  position: absolute;
+  inset: 50%;
+  transform: translate(-50%, -50%);
+  color: color-mix(in oklab, var(--accent-color), white 16%);
+  font-size: 4.5rem;
+  filter: drop-shadow(0 0 20px var(--accent-color));
+  animation: ph-atom-hover 4s ease-in-out infinite;
+}
+
+.ph-hero-preview__topics {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.55rem;
+  padding: 0 1rem 0.8rem;
+}
+
+.ph-hero-preview__topics a {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2rem;
+  padding: 0.35rem 0.7rem;
+  border-radius: 999px;
+  color: color-mix(in oklab, var(--accent-color), white 26%);
+  background: color-mix(in oklab, var(--accent-color), transparent 88%);
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 64%);
+  font-size: 0.78rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.ph-hero-preview__topics a:hover,
+.ph-hero-preview__topics a:focus-visible {
+  transform: translateY(-2px);
+  background: color-mix(in oklab, var(--accent-color), transparent 80%);
+  box-shadow: 0 10px 24px
+    color-mix(in oklab, var(--accent-color), transparent 78%);
+  text-shadow: none;
+}
+
+.ph-hero-preview__metrics {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.65rem;
+  padding: 0 1rem 1rem;
+}
+
+.ph-hero-preview__metrics a {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.45rem;
+  min-height: 3rem;
+  border-radius: 14px;
+  color: color-mix(in oklab, var(--ph-fg), transparent 10%);
+  background: rgba(255, 255, 255, 0.06);
+  border: 1px solid color-mix(in oklab, var(--accent-color), transparent 76%);
+  font-size: 0.83rem;
+  font-weight: 700;
+  transition:
+    transform 0.25s ease,
+    background 0.25s ease,
+    border-color 0.25s ease,
+    box-shadow 0.25s ease;
+}
+
+.ph-hero-preview__metrics a:hover,
+.ph-hero-preview__metrics a:focus-visible {
+  transform: translateY(-2px);
+  background: color-mix(in oklab, var(--accent-color), transparent 84%);
+  border-color: color-mix(in oklab, var(--accent-color), transparent 44%);
+  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.24);
+  text-shadow: none;
+}
+
+.ph-hero-preview__try {
+  color: #001919 !important;
+  background: linear-gradient(
+    180deg,
+    color-mix(in oklab, var(--accent-color), white 24%),
+    var(--accent-color)
+  ) !important;
+  box-shadow: 0 12px 28px
+    color-mix(in oklab, var(--accent-color), transparent 68%);
+}
+
+@keyframes ph-preview-shine {
+  0%,
+  42% {
+    transform: translateX(-130%);
+  }
+  58%,
+  100% {
+    transform: translateX(130%);
+  }
+}
+
+@keyframes ph-scan {
+  0%,
+  100% {
+    transform: translateY(-40%);
+  }
+  50% {
+    transform: translateY(210%);
+  }
+}
+
+@keyframes ph-pulse-ring {
+  0% {
+    opacity: 0.7;
+    transform: translate(-50%, -50%) scale(0.45);
+  }
+  100% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(3.4);
+  }
+}
+
+@keyframes ph-orbit-outer {
+  to {
+    transform: translate(-50%, -50%) rotate(342deg);
+  }
+}
+
+@keyframes ph-orbit-inner {
+  to {
+    transform: translate(-50%, -50%) rotate(418deg);
+  }
+}
+
+@keyframes ph-orbit-tilt {
+  to {
+    transform: translate(-50%, -50%) rotate(478deg);
+  }
+}
+
+@keyframes ph-float-primary {
+  50% {
+    transform: translate(-18px, 12px) scale(1.12);
+  }
+}
+
+@keyframes ph-float-secondary {
+  50% {
+    transform: translate(20px, -16px) scale(1.1);
+  }
+}
+
+@keyframes ph-float-tertiary {
+  50% {
+    transform: translate(14px, 18px) scale(1.25);
+  }
+}
+
+@keyframes ph-vector {
+  50% {
+    opacity: 0.55;
+    transform: rotate(-24deg) scaleX(0.8);
+  }
+}
+
+@keyframes ph-atom-hover {
+  50% {
+    transform: translate(-50%, -54%) scale(1.06);
+    filter: drop-shadow(0 0 32px var(--accent-color));
+  }
+}
+
+@media (max-width: 960px) {
+  .ph-hero__container--landing {
+    grid-template-columns: 1fr;
+  }
+
+  .ph-hero__title {
+    max-width: 13ch;
+  }
+
+  .ph-hero-preview {
+    min-height: 360px;
+  }
+}
+
+@media (max-width: 640px) {
+  .ph-hero {
+    min-height: auto;
+    padding-top: 5.5rem;
+  }
+
+  .ph-hero__container--landing {
+    width: min(100% - 1rem, 1180px);
+    padding: 1.35rem;
+  }
+
+  .ph-hero__container--landing::before {
+    border-radius: 22px;
+  }
+
+  .ph-hero__title {
+    font-size: clamp(2.25rem, 12vw, 3.2rem);
+  }
+
+  .ph-btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .ph-hero__ctas > * {
+    flex: 1 1 100%;
+  }
+
+  .ph-hero-preview {
+    min-height: 300px;
+  }
+
+  .ph-hero-preview__metrics {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ph-hero-preview::after,
+  .ph-hero-preview__scan,
+  .ph-hero-preview__pulse,
+  .ph-hero-preview__orbit,
+  .ph-hero-preview__mass,
+  .ph-hero-preview__vector,
+  .ph-hero-preview__atom {
+    animation: none;
+  }
 }
diff --git a/app/(pages)/blog/create/page.tsx b/app/(pages)/blog/create/page.tsx
index 307ba76a..8d0ff030 100644
--- a/app/(pages)/blog/create/page.tsx
+++ b/app/(pages)/blog/create/page.tsx
@@ -18,12 +18,12 @@ import {
   faImage,
   faChevronCircleDown,
   faEye,
+  faUpload,
 } from "@fortawesome/free-solid-svg-icons";
 import { useRouter } from "next/navigation";
 import TheoryRenderer from "../../../(core)/components/theory/TheoryRenderer";
 import useTranslation from "../../../(core)/hooks/useTranslation.ts";
 import TAGS from "@/app/(core)/data/tags.js";
-import { COLORS } from "@/app/(core)/data/tags.js";
 import Tag from "@/app/(core)/components/Tag.jsx";
 import dynamic from "next/dynamic";
 import { initialContentData } from "../../../(core)/data/initialContent";
@@ -83,6 +83,43 @@ const jsStringToObject = (str: string, t: (k: string) => string): unknown => {
   }
 };
 
+const createThumbnailDataUrl = (file: File): Promise<string> =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const image = new Image();
+      image.onload = () => {
+        const maxWidth = 1200;
+        const maxHeight = 675;
+        const scale = Math.min(
+          maxWidth / image.width,
+          maxHeight / image.height,
+          1
+        );
+        const width = Math.round(image.width * scale);
+        const height = Math.round(image.height * scale);
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+
+        const context = canvas.getContext("2d");
+        if (!context) {
+          reject(new Error("Unable to prepare thumbnail"));
+          return;
+        }
+
+        context.drawImage(image, 0, 0, width, height);
+        resolve(canvas.toDataURL("image/jpeg", 0.82));
+      };
+      image.onerror = () => reject(new Error("Invalid image file"));
+      image.src = String(reader.result);
+    };
+
+    reader.onerror = () => reject(new Error("Unable to read image file"));
+    reader.readAsDataURL(file);
+  });
+
 // Block Templates
 const NEW_BLOCK_TEMPLATES = {
   paragraph: {
@@ -476,7 +513,40 @@ export default function CreateBlogPage() {
       desc: newDescription,
     });
   };
-  console.log(dataContent);
+
+  const handleThumbnailUpload = async (
+    e: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    if (!file.type.startsWith("image/")) {
+      alert(t("Please upload an image file."));
+      e.target.value = "";
+      return;
+    }
+
+    try {
+      const thumbnail = await createThumbnailDataUrl(file);
+      setDataContent((prev) => ({
+        ...prev,
+        thumbnail,
+      }));
+    } catch (error) {
+      console.error("Error preparing thumbnail:", error);
+      alert(t("Could not prepare this thumbnail. Please try another image."));
+    } finally {
+      e.target.value = "";
+    }
+  };
+
+  const handleThumbnailRemove = () => {
+    setDataContent((prev) => ({
+      ...prev,
+      thumbnail: "",
+    }));
+  };
+
   return (
     <div
       className={`create-blog-container ${isCompleted ? "notranslate" : ""}`}
@@ -528,6 +598,52 @@ export default function CreateBlogPage() {
               required
             />
           </div>
+          <div className="form-group title-group thumbnail-upload-group">
+            <label htmlFor="thumbnail-upload">{t("Blog thumbnail:")}</label>
+            <div className="thumbnail-upload-card">
+              {dataContent.thumbnail ? (
+                // Thumbnail may be a local data URL or external URL.
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={dataContent.thumbnail}
+                  alt={t("Blog thumbnail preview")}
+                  className="thumbnail-upload-preview"
+                />
+              ) : (
+                <div className="thumbnail-upload-placeholder">
+                  <FontAwesomeIcon icon={faImage} />
+                  <span>{t("No thumbnail selected")}</span>
+                </div>
+              )}
+
+              <div className="thumbnail-upload-actions">
+                <label
+                  htmlFor="thumbnail-upload"
+                  className="ph-btn ph-btn--ghost thumbnail-upload-button"
+                >
+                  <FontAwesomeIcon icon={faUpload} />
+                  {t("Upload thumbnail")}
+                </label>
+                <input
+                  id="thumbnail-upload"
+                  type="file"
+                  accept="image/*"
+                  onChange={handleThumbnailUpload}
+                  className="thumbnail-upload-input"
+                />
+                {dataContent.thumbnail && (
+                  <button
+                    type="button"
+                    className="ph-btn ph-btn--ghost thumbnail-remove-button"
+                    onClick={handleThumbnailRemove}
+                  >
+                    <FontAwesomeIcon icon={faTrash} />
+                    {t("Remove")}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
           {dataContent.tags.length > 0 && (
             <div className="mb-4">
               <label className="block mb-2">
diff --git a/app/(pages)/blog/page.jsx b/app/(pages)/blog/page.jsx
index 549572a4..c37a2232 100644
--- a/app/(pages)/blog/page.jsx
+++ b/app/(pages)/blog/page.jsx
@@ -24,6 +24,46 @@ import {
 // ─── Helpers ──────────────────────────────────────────────────────────────────
 const getChapterTagNames = (tags) => tags.map((tag) => tag.name.toLowerCase());
 
+const BLOG_THUMBNAILS = {
+  "what-is-physics":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Milky_Way_Night_Sky_Black_Rock_Desert_Nevada.jpg",
+  "class-12-physics-complete-guide":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Single_slit_and_double_slit2.jpg",
+  "physics-bouncing-ball-comprehensive-educational-guide":
+    "https://www.fisicalab.com/sites/all/files/contenidos/en/kinematic/freefall.png",
+  "comprehensive-guide-to-vector-operations":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Vector_addition.svg",
+  "ball-uniformly-accelerated-motion":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Acceleration.svg",
+  "ball-free-fall-comprehensive-guide":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Free_fall.svg",
+  "spring-connection":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Simple_harmonic_motion_animation.gif",
+  "physics-of-pendulum-explained":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Pendulum_animation.gif",
+  "projectile-parabolic-motion":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Projectile_motion.svg",
+  "physics-behind-three-body-problem":
+    "https://commons.wikimedia.org/wiki/Special:FilePath/Three-body_Problem_Animation_with_COM.gif",
+  "pi-from-block-collisions-explained":
+    "https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/Galperin_billiards.svg/600px-Galperin_billiards.svg.png",
+};
+
+const getFirstBlogImage = (blog) => {
+  if (blog.thumbnail) return blog.thumbnail;
+  if (BLOG_THUMBNAILS[blog.slug]) return BLOG_THUMBNAILS[blog.slug];
+
+  for (const section of blog.theory?.sections ?? []) {
+    const imageBlock = section.blocks?.find(
+      (block) => block.type === "image" && block.src
+    );
+
+    if (imageBlock?.src) return imageBlock.src;
+  }
+
+  return "";
+};
+
 // ─── ListRow – used only in list view ─────────────────────────────────────────
 function ListRow({ chap, t }) {
   const router = useRouter();
@@ -146,6 +186,7 @@ export default function Blog() {
         name={chap.name}
         desc={chap.desc}
         link={chap.link}
+        thumbnail={getFirstBlogImage(chap)}
         tags={chap.tags}
         isABlog={true}
         slug={chap.slug}
diff --git a/next.config.ts b/next.config.js
similarity index 75%
rename from next.config.ts
rename to next.config.js
index 384c3760..a216c29f 100644
--- a/next.config.ts
+++ b/next.config.js
@@ -1,7 +1,6 @@
-import type { NextConfig } from "next";
 import packageJson from "./package.json" with { type: "json" };
 
-const nextConfig: NextConfig = {
+const nextConfig = {
   output: "export",
   env: {
     NEXT_PUBLIC_APP_VERSION: packageJson.version,
diff --git a/package.json b/package.json
index 1aa936dd..c95fb9b7 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
     "katex": "^0.16.25",
     "koalaz": "^1.1.3",
     "motion": "^12.38.0",
-    "next": "15.5.18",
+    "next": "^15.3.6",
     "p5": "^2.2.3",
     "planck": "^1.4.2",
     "react": "^19.2.0",
diff --git a/public/sitemap.xml b/public/sitemap.xml
index 0af06061..36c913f7 100644
--- a/public/sitemap.xml
+++ b/public/sitemap.xml
@@ -80,6 +80,11 @@
     <changefreq>monthly</changefreq>
     <priority>0.8</priority>
   </url>
+  <url>
+    <loc>https://physicshub.github.io/blog/pi-from-block-collisions-explained</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.8</priority>
+  </url>
   <url>
     <loc>https://physicshub.github.io/simulations/BouncingBall</loc>
     <changefreq>weekly</changefreq>
@@ -150,4 +155,9 @@
     <changefreq>weekly</changefreq>
     <priority>0.7</priority>
   </url>
+  <url>
+    <loc>https://physicshub.github.io/simulations/PiCollisions</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.7</priority>
+  </url>
 </urlset>
\ No newline at end of file