diff --git a/astro/public/hero-poster-light.jpg b/astro/public/hero-poster-light.jpg
deleted file mode 100644
index 135b4be964..0000000000
Binary files a/astro/public/hero-poster-light.jpg and /dev/null differ
diff --git a/astro/public/hero-poster-light.webp b/astro/public/hero-poster-light.webp
new file mode 100644
index 0000000000..87fba410ec
Binary files /dev/null and b/astro/public/hero-poster-light.webp differ
diff --git a/astro/public/hero-poster.jpg b/astro/public/hero-poster.jpg
deleted file mode 100644
index b6709c7605..0000000000
Binary files a/astro/public/hero-poster.jpg and /dev/null differ
diff --git a/astro/public/hero-poster.webp b/astro/public/hero-poster.webp
new file mode 100644
index 0000000000..a83205db68
Binary files /dev/null and b/astro/public/hero-poster.webp differ
diff --git a/astro/public/images/express-mw.png b/astro/public/images/express-mw.png
index d3c5e8fbfb..d7e78f3157 100644
Binary files a/astro/public/images/express-mw.png and b/astro/public/images/express-mw.png differ
diff --git a/astro/public/videos/hero-background-light.mp4 b/astro/public/videos/hero-background-light.mp4
deleted file mode 100644
index e20340f1ea..0000000000
Binary files a/astro/public/videos/hero-background-light.mp4 and /dev/null differ
diff --git a/astro/public/videos/hero-background-light.webm b/astro/public/videos/hero-background-light.webm
new file mode 100644
index 0000000000..ff8e6e6b5b
Binary files /dev/null and b/astro/public/videos/hero-background-light.webm differ
diff --git a/astro/public/videos/hero-background.mp4 b/astro/public/videos/hero-background.mp4
deleted file mode 100644
index fcf4b00df0..0000000000
Binary files a/astro/public/videos/hero-background.mp4 and /dev/null differ
diff --git a/astro/public/videos/hero-background.webm b/astro/public/videos/hero-background.webm
new file mode 100644
index 0000000000..6cf492dbcc
Binary files /dev/null and b/astro/public/videos/hero-background.webm differ
diff --git a/astro/src/components/patterns/Footer/Footer.astro b/astro/src/components/patterns/Footer/Footer.astro
index 3084634a42..d7f6c833c2 100644
--- a/astro/src/components/patterns/Footer/Footer.astro
+++ b/astro/src/components/patterns/Footer/Footer.astro
@@ -40,15 +40,19 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
     <Container>
       <Grid gap="2" align="center">
         <Col xs={12} md={6} lg={6}>
-          <ul class="footer__logo">
+          <ul class="footer__logo" aria-label="Partner logos">
             <li>
-              <a href="https://openjsf.org" aria-label="OpenJS Foundation" target="_blank">
+              <a
+                href="https://openjsf.org"
+                aria-label="Hosted by OpenJS Foundation"
+                target="_blank"
+              >
                 <img
                   class="footer-logo-light"
                   src="/openjs-logo-black.svg"
                   alt="OpenJS Foundation Logo"
                   width="80"
-                  height="auto"
+                  height="24"
                   loading="lazy"
                 />
                 <img
@@ -56,7 +60,7 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
                   src="/openjs-logo-white.svg"
                   alt="OpenJS Foundation Logo"
                   width="80"
-                  height="auto"
+                  height="24"
                   loading="lazy"
                 />
               </a>
@@ -64,14 +68,14 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
             <li>
               <a
                 href="https://www.netlify.com"
-                aria-label="Preview Deploys by Netlify"
+                aria-label="Preview deployed by netlify"
                 target="_blank"
               >
                 <img
                   src="/netlify-logo.svg"
                   alt="Netlify Logo"
                   width="80"
-                  height="auto"
+                  height="24"
                   loading="lazy"
                 />
               </a>
@@ -79,11 +83,12 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
           </ul>
         </Col>
         <Col xs={12} md={6} lg={6}>
-          <ul class="footer__socials">
+          <ul class="footer__socials" aria-label="Social links">
             <li>
               <a
                 href="https://github.com/expressjs/express"
-                aria-label="Go to the repository on GitHub"
+                aria-label="expressjs on GitHub"
+                target="_blank"
               >
                 <Icon name="github" />
               </a>
@@ -91,31 +96,37 @@ import { BodyMd, Col, Container, Grid } from '@/components/primitives';
             <li>
               <a
                 href="https://www.youtube.com/channel/UCYjxjAeH6TRik9Iwy5nXw7g"
-                aria-label="Go to the channel on Youtube"
+                aria-label="expressjs channel on Youtube"
                 target="_blank"
               >
                 <Icon name="youtube" />
               </a>
             </li>
             <li>
-              <a href="https://x.com/UseExpressJS" aria-label="Go to the X account">
+              <a href="https://x.com/UseExpressJS" aria-label="follow expressjs on X account">
                 <Icon name="x" />
               </a>
             </li>
             <li>
-              <a href="https://slack-invite.openjsf.org" aria-label="Join Slack group">
+              <a
+                href="https://slack-invite.openjsf.org"
+                aria-label="Join openjs foundation slack group"
+              >
                 <Icon name="slack" />
               </a>
             </li>
             <li>
-              <a href="https://opencollective.com/express" aria-label="Go to Open Collective">
+              <a
+                href="https://opencollective.com/express"
+                aria-label="support expressjs on Open Collective"
+              >
                 <Icon name="open-collective" />
               </a>
             </li>
             <li>
               <a
                 href="https://bsky.app/profile/expressjs.bsky.social"
-                aria-label="Go to the Bluesky"
+                aria-label="follow expressjs on bluesky"
               >
                 <Icon name="bsky" />
               </a>
diff --git a/astro/src/components/patterns/Hero/Hero.astro b/astro/src/components/patterns/Hero/Hero.astro
index 016561dbed..c920d54756 100644
--- a/astro/src/components/patterns/Hero/Hero.astro
+++ b/astro/src/components/patterns/Hero/Hero.astro
@@ -26,80 +26,72 @@ app.listen(port, () => {
 })`;
 
 interface Props {
-  videoSrc?: string;
-  videoSrcLight?: string;
-  posterSrc?: string;
-  posterSrcLight?: string;
+  videoSrc: string;
+  videoSrcLight: string;
+  posterSrc: string;
+  posterSrcLight: string;
 }
 
 const { videoSrc, videoSrcLight, posterSrc, posterSrcLight } = Astro.props;
 ---
 
 <section class="hero">
-  {
-    videoSrc && (
-      <div class="hero__video-container">
-        {posterSrc && (
-          <Image
-            class={`hero__video-poster${posterSrcLight ? ' hero__video-poster--dark' : ''}`}
-            src={posterSrc}
-            width={1920}
-            height={1080}
-            loading="eager"
-            alt=""
-            aria-hidden="true"
-          />
-        )}
-        {posterSrcLight && (
-          <Image
-            class="hero__video-poster hero__video-poster--light"
-            src={posterSrcLight}
-            width={1920}
-            height={1080}
-            loading="eager"
-            alt=""
-            aria-hidden="true"
-          />
-        )}
-        <video
-          class={`hero__video${videoSrcLight ? ' hero__video--dark' : ''}`}
-          autoplay
-          muted
-          loop
-          playsinline
-          preload="metadata"
-          data-src={videoSrc}
-        >
-          <source type="video/mp4" />
-        </video>
-        {videoSrcLight && (
-          <video
-            class="hero__video hero__video--light"
-            autoplay
-            muted
-            loop
-            playsinline
-            preload="metadata"
-            data-src={videoSrcLight}
-          >
-            <source type="video/mp4" />
-          </video>
-        )}
-        <div class="hero__video-overlay" />
-        <button
-          class="hero__video-control"
-          type="button"
-          aria-label={t('hero.videoPause')}
-          data-label-pause={t('hero.videoPause')}
-          data-label-play={t('hero.videoPlay')}
-          data-state="paused"
-        >
-          <Icon name="fluent:pause-16-filled" class="hero__video-control-pause" />
-          <Icon name="fluent:play-16-filled" class="hero__video-control-play" />
-        </button>
-      </div>
-    )
-  }
+  <div class="hero__video-container">
+    <Image
+      class="hero__video-poster hero__video-poster--dark"
+      src={posterSrc}
+      width={1920}
+      height={1080}
+      loading="eager"
+      priority={true}
+      alt=""
+      aria-hidden="true"
+    />
+
+    <Image
+      class="hero__video-poster hero__video-poster--light"
+      src={posterSrcLight}
+      width={1920}
+      height={1080}
+      loading="eager"
+      priority={true}
+      alt=""
+      aria-hidden="true"
+    />
+
+    <video
+      class="hero__video hero__video--dark"
+      autoplay
+      muted
+      loop
+      playsinline
+      preload="metadata"
+      data-src={videoSrc}></video>
+
+    <video
+      class="hero__video hero__video--light"
+      autoplay
+      muted
+      loop
+      playsinline
+      preload="metadata"
+      data-src={videoSrcLight}></video>
+
+    <div class="hero__video-overlay"></div>
+
+    <button
+      class="hero__video-control"
+      type="button"
+      title={t('hero.videoPause')}
+      aria-label={t('hero.videoPause')}
+      data-label-pause={t('hero.videoPause')}
+      data-label-play={t('hero.videoPlay')}
+      data-state="paused"
+    >
+      <Icon name="fluent:pause-16-filled" class="hero__video-control-pause" />
+      <Icon name="fluent:play-16-filled" class="hero__video-control-play" />
+    </button>
+  </div>
   <Container>
     <div class="hero__content">
       <Flex align="end" gap="4">
@@ -135,137 +127,137 @@ const { videoSrc, videoSrcLight, posterSrc, posterSrcLight } = Astro.props;
 
 <script>
   function initHeroVideo() {
-    const breakpointMd = parseInt(
-      getComputedStyle(document.documentElement).getPropertyValue('--breakpoint-md')
-    );
-
-    const videoContainer = document.querySelector('.hero__video-container');
-    if (!videoContainer) return;
-
-    const videos = Array.from(videoContainer.querySelectorAll<HTMLVideoElement>('.hero__video'));
-    if (videos.length === 0) return;
+    const container = document.querySelector<HTMLDivElement>('.hero__video-container');
+    if (!container) return;
 
-    const primaryVideo = videos[0];
-
-    const controlButton = videoContainer.querySelector<HTMLButtonElement>('.hero__video-control');
+    const controlButton = container.querySelector<HTMLButtonElement>('.hero__video-control');
     if (!controlButton) return;
 
-    const labelPause = controlButton.getAttribute('data-label-pause') ?? 'Pause background video';
-    const labelPlay = controlButton.getAttribute('data-label-play') ?? 'Play background video';
-
-    const playAll = () => videos.forEach((v) => v.play().catch(() => {}));
-    const pauseAll = () => videos.forEach((v) => v.pause());
-
-    const initSources = () => {
-      videos.forEach((video) => {
-        const source = video.querySelector('source');
-        if (source && !source.getAttribute('src')) {
-          const src = video.getAttribute('data-src');
-          if (src) {
-            source.src = src;
-            video.load();
-          }
-        }
-      });
-    };
+    const darkVideo = container.querySelector<HTMLVideoElement>('.hero__video--dark');
+    const lightVideo = container.querySelector<HTMLVideoElement>('.hero__video--light');
+    const darkPoster = container.querySelector<HTMLImageElement>('.hero__video-poster--dark');
+    const lightPoster = container.querySelector<HTMLImageElement>('.hero__video-poster--light');
+
+    let currentVideo: HTMLVideoElement | null = null;
+    let currentPoster: HTMLImageElement | null = null;
 
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-    if (prefersReducedMotion) {
-      primaryVideo.pause();
-      primaryVideo.removeAttribute('autoplay');
-      controlButton.style.display = 'none';
-      return;
+
+    function getIsDark() {
+      const theme = document.documentElement.getAttribute('data-theme');
+      return (
+        theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)
+      );
     }
 
-    const isMobile = () => window.innerWidth < breakpointMd;
+    function getAssets() {
+      const isDark = getIsDark();
+      return {
+        video: isDark ? darkVideo : lightVideo,
+        poster: isDark ? darkPoster : lightPoster,
+      };
+    }
 
-    const disableVideo = () => {
-      pauseAll();
-      videos.forEach((v) => {
-        v.removeAttribute('autoplay');
-        v.removeAttribute('data-loaded');
-      });
-    };
+    function loadVideo(video: HTMLVideoElement) {
+      const src = video.getAttribute('data-src');
+      if (!src) return;
 
-    if (isMobile()) {
-      disableVideo();
-      // Don't load video sources to save bandwidth
-      return;
+      // do not load video if src is loaded (reduce network call)
+      if (!video.src) {
+        video.src = src;
+        video.load();
+      }
     }
 
-    initSources();
+    function activateVideo(video: HTMLVideoElement | null, poster: HTMLImageElement | null) {
+      if (!video || !poster) return;
 
-    videos.forEach((video) => {
-      video.addEventListener('canplay', () => video.setAttribute('data-loaded', 'true'), {
-        once: true,
-      });
-    });
+      if (currentPoster) currentPoster.classList.remove('hide_poster');
 
-    primaryVideo.addEventListener(
-      'error',
-      () => {
-        controlButton.style.display = 'none';
-      },
-      { once: true }
-    );
-
-    primaryVideo.addEventListener('play', () => {
-      controlButton.setAttribute('data-state', 'playing');
-      controlButton.setAttribute('aria-label', labelPause);
-    });
+      currentPoster = poster;
 
-    primaryVideo.addEventListener('pause', () => {
-      controlButton.setAttribute('data-state', 'paused');
-      controlButton.setAttribute('aria-label', labelPlay);
-    });
+      if (currentVideo) {
+        currentVideo.pause();
+        currentVideo.classList.remove('hero__video--active');
+      }
+
+      currentVideo = video;
+
+      if (prefersReducedMotion) {
+        currentVideo.pause();
+        currentVideo.removeAttribute('autoplay');
+        currentVideo.classList.remove('hero__video--active');
+        if (controlButton) controlButton.style.display = 'none';
+        return;
+      }
 
+      loadVideo(video);
+
+      // check if video is ready to play then just update background animation
+      // returning early to stop repeated listener on theme change
+      // ref: https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState#htmlmediaelement.have_future_data
+      if (video.readyState >= video.HAVE_FUTURE_DATA) {
+        updateStatus(video, poster);
+        return;
+      }
+
+      video.addEventListener('canplay', () => updateStatus(video, poster), { once: true });
+    }
+
+    function updateVideo() {
+      const { video: nextVideo, poster: hidePoster } = getAssets();
+
+      activateVideo(nextVideo, hidePoster);
+    }
+
+    function updateStatus(video: HTMLVideoElement | null, poster: HTMLImageElement | null) {
+      if (!video || !poster) return;
+      // if video is playable then hide poster
+      poster.classList.add('hide_poster');
+      // activate correct video animations
+      video.classList.add('hero__video--active');
+      video.play().catch(() => {});
+      // update controll btn on video load
+      controlButton?.setAttribute('data-state', 'playing');
+    }
+
+    // Control button
     controlButton.addEventListener('click', () => {
-      if (primaryVideo.paused) {
-        playAll();
+      if (!currentVideo) return;
+
+      if (currentVideo.paused) {
+        currentVideo.play().catch(() => {});
+        controlButton.setAttribute('data-state', 'playing');
       } else {
-        pauseAll();
+        currentVideo.pause();
+        controlButton.setAttribute('data-state', 'paused');
       }
     });
 
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            playAll();
-            observer.disconnect();
-          }
-        });
-      },
-      { rootMargin: '80px' }
-    );
-
-    observer.observe(primaryVideo);
-
+    // stop video on hidden tabs
     document.addEventListener('visibilitychange', () => {
+      if (!currentVideo) return;
+
       if (document.hidden) {
-        pauseAll();
-      } else {
-        playAll();
+        currentVideo.pause();
+      } else if (!prefersReducedMotion) {
+        currentVideo.play().catch(() => {});
       }
     });
 
-    let resizeTimeout: ReturnType<typeof setTimeout>;
-    window.addEventListener('resize', () => {
-      clearTimeout(resizeTimeout);
-      resizeTimeout = setTimeout(() => {
-        if (isMobile()) {
-          disableVideo();
-        } else {
-          initSources();
-          playAll();
-        }
-      }, 250);
+    // Initial run
+    updateVideo();
+
+    // React to theme changes
+    const observer = new MutationObserver(() => {
+      updateVideo();
     });
-  }
 
-  if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initHeroVideo);
-  } else {
-    initHeroVideo();
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['data-theme'],
+    });
   }
+
+  initHeroVideo();
 </script>
diff --git a/astro/src/components/patterns/Hero/Hero.css b/astro/src/components/patterns/Hero/Hero.css
index 02f9c9be0d..428c3f24eb 100644
--- a/astro/src/components/patterns/Hero/Hero.css
+++ b/astro/src/components/patterns/Hero/Hero.css
@@ -6,7 +6,7 @@
     overflow: hidden;
 
     @media (--md-up) {
-      padding: var(--space-14) 0 var(--space-20) 0;
+      padding: var(--space-14) 0 var(--space-20);
     }
 
     @media (--lg-up) {
@@ -14,110 +14,65 @@
     }
   }
 
+  /* ================= VIDEO CONTAINER ================= */
+
   .hero__video-container {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
     z-index: 0;
     overflow: hidden;
   }
 
-  .hero__video-poster,
-  .hero__video {
+  .hero__video,
+  .hero__video-poster {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     min-width: 100%;
     min-height: 100%;
-    width: auto;
-    height: auto;
     object-fit: cover;
   }
 
+  /* ================= VIDEO ================= */
+
   .hero__video {
     opacity: 0;
-    transition: opacity 0.5s ease-in;
-
-    &[data-loaded='true'] {
-      opacity: 1;
-    }
-  }
-
-  /* Default (light mode): hide dark poster, show light poster */
-  .hero__video-poster--dark {
-    display: none;
+    pointer-events: none;
   }
 
-  /* Dark theme via data-theme */
-  [data-theme='dark'] .hero__video-poster--dark {
-    display: block;
-  }
-
-  [data-theme='dark'] .hero__video-poster--light {
-    display: none;
+  /* visible video */
+  .hero__video--active {
+    opacity: 1;
   }
 
-  /* System dark mode */
-  @media (prefers-color-scheme: dark) {
-    .hero__video-poster--dark {
-      display: block;
-    }
+  /* ================= POSTERS ================= */
 
-    .hero__video-poster--light {
-      display: none;
-    }
-
-    [data-theme='light'] .hero__video-poster--dark {
-      display: none;
-    }
-
-    [data-theme='light'] .hero__video-poster--light {
-      display: block;
-    }
+  .hero__video-poster {
+    opacity: 0;
+    transition: opacity 0.3s ease;
   }
 
-  /* Default (light mode): hide dark video, show light video */
-  .hero__video--dark {
-    display: none;
+  [data-theme='dark'] .hero__video-poster--dark {
+    opacity: 1;
   }
 
-  /* Dark theme via data-theme */
-  [data-theme='dark'] .hero__video--dark {
-    display: block;
+  [data-theme='light'] .hero__video-poster--light {
+    opacity: 1;
   }
 
-  [data-theme='dark'] .hero__video--light {
-    display: none;
+  /* hide poster if video is playable */
+  .hero__video-poster.hide_poster {
+    opacity: 0;
   }
 
-  /* System dark mode */
-  @media (prefers-color-scheme: dark) {
-    .hero__video--dark {
-      display: block;
-    }
-
-    .hero__video--light {
-      display: none;
-    }
-
-    [data-theme='light'] .hero__video--dark {
-      display: none;
-    }
-
-    [data-theme='light'] .hero__video--light {
-      display: block;
-    }
-  }
+  /* ================= OVERLAY ================= */
 
   .hero__video-overlay {
     position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
+    inset: 0;
+    z-index: 1;
+    pointer-events: none;
     background: linear-gradient(
       180deg,
       rgba(255, 255, 255, 0.05) 0%,
@@ -125,65 +80,9 @@
       rgba(255, 255, 255, 0.3) 70%,
       var(--color-bg-primary) 100%
     );
-    z-index: 1;
-  }
-
-  .hero__video-control {
-    position: absolute;
-    bottom: var(--space-4);
-    right: var(--space-12);
-    z-index: 2;
-    width: var(--size-8);
-    height: var(--size-8);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid var(--color-border-secondary);
-    border-radius: var(--radius-full);
-    color: var(--color-text-tertiary);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    background-color: transparent;
-
-    &:hover {
-      border-color: var(--color-border-primary);
-      color: var(--color-text-primary);
-      transform: scale(1.05);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--color-focus);
-      color: var(--color-text-primary);
-      outline-offset: 2px;
-    }
-
-    &:active {
-      transform: scale(0.98);
-    }
-
-    svg {
-      width: var(--size-3-5);
-      height: var(--size-3-5);
-    }
-
-    &[data-state='playing'] .hero__video-control-play {
-      display: none;
-    }
-
-    &[data-state='paused'] .hero__video-control-pause {
-      display: none;
-    }
-
-    @media (--xs-only) {
-      display: none;
-    }
-
-    @media (--md-up) {
-      bottom: var(--space-6);
-      right: var(--space-6);
-    }
   }
 
+  /* Dark theme overlay */
   [data-theme='dark'] .hero__video-overlay {
     background: linear-gradient(
       180deg,
@@ -216,6 +115,71 @@
     }
   }
 
+  /* ================= CONTROLS ================= */
+
+  .hero__video-control {
+    position: absolute;
+    bottom: var(--space-0);
+    right: var(--space-12);
+    z-index: 2;
+
+    width: var(--size-8);
+    height: var(--size-8);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border: 1px solid var(--color-border-secondary);
+    border-radius: var(--radius-full);
+    background: transparent;
+
+    color: var(--color-text-tertiary);
+    cursor: pointer;
+    transition: all 0.2s ease;
+  }
+
+  .hero__video-control:hover {
+    border-color: var(--color-border-primary);
+    color: var(--color-text-primary);
+    transform: scale(1.05);
+  }
+
+  .hero__video-control:focus-visible {
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+    color: var(--color-text-primary);
+  }
+
+  .hero__video-control:active {
+    transform: scale(0.98);
+  }
+
+  .hero__video-control svg {
+    width: var(--size-3-5);
+    height: var(--size-3-5);
+  }
+
+  /* toggle icons */
+  .hero__video-control[data-state='playing'] .hero__video-control-play {
+    opacity: 0;
+    width: 0;
+  }
+
+  .hero__video-control[data-state='paused'] .hero__video-control-pause {
+    opacity: 0;
+    width: 0;
+  }
+
+  @media (--md-up) {
+    .hero__video-control {
+      bottom: var(--space-6);
+      right: var(--space-6);
+    }
+  }
+
+  /* ================= CONTENT ================= */
+
   .hero__content {
     position: relative;
     z-index: 2;
@@ -234,15 +198,19 @@
     }
   }
 
+  /* ================= LOGO ================= */
+
   .hero__logo {
     width: var(--size-36);
+  }
 
-    svg {
-      width: 100%;
-      height: auto;
-    }
+  .hero__logo svg {
+    width: 100%;
+    height: auto;
+  }
 
-    @media (--md-up) {
+  @media (--md-up) {
+    .hero__logo {
       width: var(--size-52);
     }
   }
@@ -281,12 +249,14 @@
     }
   }
 
+  /* ================= CTA ================= */
+
   .hero__cta {
     width: 100%;
     display: flex;
-    margin: var(--space-8) 0;
     flex-direction: column;
     gap: var(--space-4);
+    margin: var(--space-8) 0;
 
     @media (--md-up) {
       margin: var(--space-12) 0;
@@ -295,40 +265,34 @@
   }
 }
 
-.hero__code {
-  .expressive-code.expressive-code {
-    margin: 0;
+/* ================= CODE BLOCK ================= */
 
-    .frame pre {
-      backdrop-filter: blur(21px);
-    }
+.hero__code .expressive-code .frame pre {
+  backdrop-filter: blur(21px);
+}
 
-    figure {
-      box-shadow: none;
-    }
-  }
+.hero__code .expressive-code figure {
+  box-shadow: none;
+}
+
+[data-theme='dark'] .hero__code .expressive-code .frame pre {
+  background-color: rgba(0, 0, 0, 0.62);
+}
 
-  [data-theme='dark'] & .expressive-code .frame pre {
+[data-theme='light'] .hero__code .expressive-code .frame pre {
+  background-color: color-mix(in srgb, var(--gray-950) 85%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  .hero__code .expressive-code .frame pre {
     background-color: rgba(0, 0, 0, 0.62);
   }
 
-  [data-theme='light'] & .expressive-code .frame pre {
+  [data-theme='light'] .hero__code .expressive-code .frame pre {
     background-color: color-mix(in srgb, var(--gray-950) 85%, transparent);
   }
-
-  @media (prefers-color-scheme: dark) {
-    .expressive-code .frame pre {
-      background-color: rgba(0, 0, 0, 0.62);
-    }
-
-    [data-theme='light'] & .expressive-code .frame pre {
-      background-color: color-mix(in srgb, var(--gray-950) 85%, transparent);
-    }
-  }
 }
 
-.hero__example-code {
-  .expressive-code .frame pre {
-    padding: var(--space-3);
-  }
+.hero__example-code .expressive-code .frame pre {
+  padding: var(--space-3);
 }
diff --git a/astro/src/components/patterns/ThemeSwitcher/ThemeSwitcher.astro b/astro/src/components/patterns/ThemeSwitcher/ThemeSwitcher.astro
index e82939efc7..df5d5b81b7 100644
--- a/astro/src/components/patterns/ThemeSwitcher/ThemeSwitcher.astro
+++ b/astro/src/components/patterns/ThemeSwitcher/ThemeSwitcher.astro
@@ -18,7 +18,7 @@ const lang = getLangFromUrl(Astro.url);
 const t = useTranslations(lang);
 ---
 
-<button data-theme-toggle class="toggle" aria-label={t('theme.toggle')}>
+<button id="theme-toggle-button" class="toggle" aria-label={t('theme.toggle')}>
   <div class="toggle-icon">
     <Icon
       name="fluent:weather-moon-16-regular"
@@ -75,7 +75,5 @@ const t = useTranslations(lang);
     });
   };
 
-  document.querySelectorAll('[data-theme-toggle]').forEach((button) => {
-    button.addEventListener('click', handleToggleClick);
-  });
+  document.getElementById('theme-toggle-button')?.addEventListener('click', handleToggleClick);
 </script>
diff --git a/astro/src/components/primitives/Typography/Typography.css b/astro/src/components/primitives/Typography/Typography.css
index 4eb2bf4f45..c3f3a48206 100644
--- a/astro/src/components/primitives/Typography/Typography.css
+++ b/astro/src/components/primitives/Typography/Typography.css
@@ -70,7 +70,6 @@
        SPACING
        ============================================ */
   .text--no-v-margin {
-    margin-top: 0;
-    margin-bottom: 0;
+    margin-block: 0;
   }
 }
diff --git a/astro/src/config/redirect.js b/astro/src/config/redirect.js
index b9640e74c0..c6a4bae5d9 100644
--- a/astro/src/config/redirect.js
+++ b/astro/src/config/redirect.js
@@ -38,6 +38,8 @@ const blog = {
   '/2025/12/01/security-releases': '/en/blog/2025-12-01-security-releases',
   '/2026/02/27/security-releases.html': '/en/blog/2026-02-27-security-releases',
   '/2026/02/27/security-releases': '/en/blog/2026-02-27-security-releases',
+  '/2026/03/30/security-releases.html': '/en/blog/2026-03-30-security-releases',
+  '/2026/03/30/security-releases': '/en/blog/2026-03-30-security-releases',
 };
 
 const api_v2 = {
diff --git a/astro/src/content.config.ts b/astro/src/content.config.ts
index 175b4c3d67..9449b30173 100644
--- a/astro/src/content.config.ts
+++ b/astro/src/content.config.ts
@@ -1,4 +1,5 @@
-import { defineCollection, z } from 'astro:content';
+import { defineCollection } from 'astro:content';
+import { z } from 'astro/zod';
 import { glob } from 'astro/loaders';
 
 const docsCollection = defineCollection({
diff --git a/astro/src/content/docs/en/5x/guide/writing-middleware.mdx b/astro/src/content/docs/en/5x/guide/writing-middleware.mdx
index 22354ecbe5..507c3ac06a 100644
--- a/astro/src/content/docs/en/5x/guide/writing-middleware.mdx
+++ b/astro/src/content/docs/en/5x/guide/writing-middleware.mdx
@@ -18,35 +18,7 @@ If the current middleware function does not end the request-response cycle, it m
 
 The following figure shows the elements of a middleware function call:
 
-<div class="table-scroller">
-<table id="mw-fig">
-<tr><td id="mw-fig-imgcell">
-<img src="/images/express-mw.png" alt="Elements of a middleware function call" id="mw-fig-img" />
-</td>
-<td class="mw-fig-callouts">
-<div class="callout" id="callout1">HTTP method for which the middleware function applies.</div>
-
-<div class="callout" id="callout2">
-  Path (route) for which the middleware function applies.
-</div>
-
-<div class="callout" id="callout3">
-  The middleware function.
-</div>
-
-<div class="callout" id="callout4">
-  Callback argument to the middleware function, called "next" by convention.
-</div>
-
-<div class="callout" id="callout5">
-  HTTP <a href="/en/5x/api#res">response</a> argument to the middleware function, called "res" by
-  convention.
-</div>
-
-<div class="callout" id="callout6">HTTP <a href="/en/5x/api#req">request</a> argument to the middleware function, called "req" by convention.</div>
-</td></tr>
-</table>
-</div>
+![Elements of a middleware function call](/images/express-mw.png)
 
 Starting with Express 5, middleware functions that return a Promise will call `next(value)` when they reject or throw an error. `next` will be called with either the rejected value or the thrown Error.
 
diff --git a/astro/src/pages/[lang]/blog/[slug].astro b/astro/src/pages/[lang]/blog/[slug].astro
index 1a4eff12fb..70c4131c68 100644
--- a/astro/src/pages/[lang]/blog/[slug].astro
+++ b/astro/src/pages/[lang]/blog/[slug].astro
@@ -39,6 +39,7 @@ const authorsList = (authors ?? []).map((a) => ({
   name: a.name ?? '',
 }));
 const filename = post.id.split('/').pop() ?? post.id;
+console.log('filename', filename);
 const dateSource = filename.substring(0, 10);
 const parsedDate = new Date(dateSource);
 const date = Number.isNaN(parsedDate.getTime())
@@ -51,7 +52,7 @@ const date = Number.isNaN(parsedDate.getTime())
 const labels = tags ?? [];
 
 const allPosts = (await getCollection('blog'))
-  .filter((p) => p.id.startsWith('en/') && p.id !== post.id && p.id !== 'en/write-post')
+  .filter((p) => p.id.startsWith('en/') && p.id !== post.id && p.id !== 'write-post')
   .sort((a, b) => b.id.localeCompare(a.id));
 
 const currentTags = new Set(tags ?? []);
@@ -94,11 +95,15 @@ const relatedPosts = [...tagged, ...untagged].slice(0, 3);
       </div>
     </article>
     <RelatedContent posts={relatedPosts} lang={Astro.params.lang} title={t('post.more')} />
-    <WriteBanner
-      message={t('post.writeBanner')}
-      linkLabel={t('post.writeGuidelines')}
-      href={`/${Astro.params.lang}/blog/write-post`}
-    />
+    {
+      filename !== 'write-post' && (
+        <WriteBanner
+          message={t('post.writeBanner')}
+          linkLabel={t('post.writeGuidelines')}
+          href={`/${Astro.params.lang}/blog/write-post`}
+        />
+      )
+    }
   </Container>
 </Layout>
 
diff --git a/astro/src/pages/[lang]/index.astro b/astro/src/pages/[lang]/index.astro
index 5355d7048d..31e01fa362 100644
--- a/astro/src/pages/[lang]/index.astro
+++ b/astro/src/pages/[lang]/index.astro
@@ -29,10 +29,10 @@ const t = useTranslations(lang);
     >
   </Banner>
   <Hero
-    videoSrc="/videos/hero-background.mp4"
-    videoSrcLight="/videos/hero-background-light.mp4"
-    posterSrc="/hero-poster.jpg"
-    posterSrcLight="/hero-poster-light.jpg"
+    videoSrc="/videos/hero-background.webm"
+    videoSrcLight="/videos/hero-background-light.webm"
+    posterSrc="/hero-poster.webp"
+    posterSrcLight="/hero-poster-light.webp"
   />
   <Features title={t('features.title')}>
     <Col xs={12} md={6} lg={6} class="features__card-col">
diff --git a/astro/src/styles/base/_expressive-code.css b/astro/src/styles/base/_expressive-code.css
index 4efeca22d0..d389dbce52 100644
--- a/astro/src/styles/base/_expressive-code.css
+++ b/astro/src/styles/base/_expressive-code.css
@@ -13,6 +13,11 @@
     top: var(--space-3);
     right: var(--space-3);
     height: var(--size-5);
+
+    button {
+      width: var(--size-6);
+      height: var(--size-6);
+    }
   }
 
   figcaption:not(:empty) ~ .copy {
diff --git a/astro/src/styles/base/_global.css b/astro/src/styles/base/_global.css
index bafe08a0dd..5036414c50 100644
--- a/astro/src/styles/base/_global.css
+++ b/astro/src/styles/base/_global.css
@@ -52,7 +52,7 @@ h6,
 h1,
 .h1 {
   font-size: var(--font-size-h1);
-  margin: var(--space-h1) 0;
+  margin: 0;
 }
 
 h2 {