diff --git a/app/components/ColorScheme/Img.vue b/app/components/ColorScheme/Img.vue
new file mode 100644
index 0000000000..e0d662800a
--- /dev/null
+++ b/app/components/ColorScheme/Img.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+  lightSrc: string
+  darkSrc: string
+}>()
+</script>
+
+<template>
+  <img
+    :src="props.darkSrc"
+    class="color-mode-img"
+    :style="`--light-src: url('${props.lightSrc}')`"
+  />
+</template>
+
+<style>
+.light .color-mode-img {
+  content: var(--light-src);
+}
+</style>
diff --git a/app/components/Landing/IntroHeader.vue b/app/components/Landing/IntroHeader.vue
new file mode 100644
index 0000000000..1af2f03386
--- /dev/null
+++ b/app/components/Landing/IntroHeader.vue
@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ACTIVE_NOODLES, PERMANENT_NOODLES, type Noodle } from '../Noodle'
+
+const { env } = useAppConfig().buildInfo
+
+const activeNoodlesData = ACTIVE_NOODLES.map(noodle => ({
+  key: noodle.key,
+  date: noodle.date,
+  timezone: noodle.timezone,
+  tagline: noodle.tagline,
+}))
+
+const permanentNoodlesData = PERMANENT_NOODLES.map(noodle => ({
+  key: noodle.key,
+  tagline: noodle.tagline,
+}))
+
+onPrehydrate(el => {
+  const tagline = el.querySelector<HTMLElement>('#intro-header-tagline')
+  const defaultLogo = el.querySelector<HTMLElement>('#intro-header-noodle-default')
+
+  if (!tagline || !defaultLogo) return
+
+  let permanentNoodles
+  try {
+    permanentNoodles = JSON.parse(el.dataset.permanentNoodles as string) as Noodle[]
+  } catch {
+    return
+  }
+  const activePermanentNoodle = permanentNoodles?.find(noodle =>
+    new URLSearchParams(window.location.search).has(noodle.key),
+  )
+
+  if (activePermanentNoodle) {
+    const permanentNoodleLogo = el.querySelector<HTMLElement>(
+      `#intro-header-noodle-${activePermanentNoodle.key}`,
+    )
+
+    if (!permanentNoodleLogo) return
+
+    permanentNoodleLogo.style.display = 'block'
+    defaultLogo.style.display = 'none'
+    if (activePermanentNoodle.tagline === false) {
+      tagline.style.display = 'none'
+    }
+    return
+  }
+
+  let activeNoodles
+  try {
+    activeNoodles = JSON.parse(el.dataset.activeNoodles as string) as Noodle[]
+  } catch {
+    return
+  }
+
+  const currentActiveNoodles = activeNoodles.filter(noodle => {
+    const todayDate = new Intl.DateTimeFormat('en-US', {
+      timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+    }).format(new Date())
+
+    const noodleDate =
+      noodle.date &&
+      new Intl.DateTimeFormat('en-US', {
+        timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
+        month: '2-digit',
+        day: '2-digit',
+        year: 'numeric',
+      }).format(new Date(noodle.date))
+    return todayDate === noodleDate
+  })
+
+  if (!currentActiveNoodles.length) return
+
+  const roll = Math.floor(Math.random() * currentActiveNoodles.length)
+  const selectedNoodle = currentActiveNoodles[roll]
+
+  if (!selectedNoodle) return
+
+  const noodleLogo = el.querySelector<HTMLElement>(`#intro-header-noodle-${selectedNoodle.key}`)
+
+  if (!defaultLogo || !noodleLogo || !tagline) return
+
+  defaultLogo.style.display = 'none'
+  noodleLogo.style.display = 'block'
+  if (selectedNoodle.tagline === false) {
+    tagline.style.display = 'none'
+  }
+})
+</script>
+
+<template>
+  <div
+    :data-active-noodles="JSON.stringify(activeNoodlesData)"
+    :data-permanent-noodles="JSON.stringify(permanentNoodlesData)"
+  >
+    <h1 class="sr-only">
+      {{ $t('alt_logo') }}
+    </h1>
+    <div
+      id="intro-header-noodle-default"
+      class="relative mb-6 w-fit mx-auto motion-safe:animate-fade-in motion-safe:animate-fill-both"
+      aria-hidden="true"
+    >
+      <AppLogo id="npmx-index-h1-logo-normal" class="w-42 h-auto sm:w-58 md:w-70" />
+      <span
+        id="npmx-index-h1-logo-env"
+        class="text-sm sm:text-base md:text-lg transform-origin-br font-mono tracking-widest text-accent absolute -bottom-4 -inset-ie-1.5"
+      >
+        {{ env === 'release' ? 'alpha' : env }}
+      </span>
+    </div>
+    <component
+      v-for="noodle in PERMANENT_NOODLES"
+      :key="noodle.key"
+      :id="`intro-header-noodle-${noodle.key}`"
+      class="hidden"
+      aria-hidden="true"
+      :is="noodle.logo"
+    />
+    <component
+      v-for="noodle in ACTIVE_NOODLES"
+      :key="noodle.key"
+      :id="`intro-header-noodle-${noodle.key}`"
+      class="hidden"
+      aria-hidden="true"
+      :is="noodle.logo"
+    />
+    <p
+      id="intro-header-tagline"
+      class="text-fg-muted text-lg sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
+    >
+      {{ $t('tagline') }}
+    </p>
+  </div>
+</template>
diff --git a/app/components/LandingLogo.vue b/app/components/LandingLogo.vue
deleted file mode 100644
index 6fa385c2c6..0000000000
--- a/app/components/LandingLogo.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  class?: string
-}>()
-
-const { env } = useAppConfig().buildInfo
-
-onPrehydrate(el => {
-  const isKawaii = new URLSearchParams(window.location.search).has('kawaii')
-  const date = new Intl.DateTimeFormat('en-US', {
-    timeZone: 'America/Los_Angeles',
-    month: '2-digit',
-    day: '2-digit',
-  }).format(new Date())
-  const isTKawaii = date === '03/31'
-
-  if (!isKawaii && !isTKawaii) return
-
-  const normalLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-normal')
-  const kawaiiLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-kawaii')
-  const tkawaiiLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-tkawaii')
-  const logoEnv = el.querySelector<HTMLElement>('#npmx-index-h1-logo-env')
-  const logoTagline = el.querySelector<HTMLElement>('#npmx-index-tagline')
-
-  if (!normalLogo || !kawaiiLogo || !tkawaiiLogo || !logoEnv || !logoTagline) return
-
-  if (isTKawaii) {
-    tkawaiiLogo.style.display = 'block'
-  } else {
-    kawaiiLogo.style.display = 'block'
-  }
-  normalLogo.style.display = 'none'
-  logoEnv.style.display = 'none'
-  logoTagline.style.display = 'none'
-})
-</script>
-
-<template>
-  <div class="flex flex-col items-center justify-center">
-    <h1
-      dir="ltr"
-      class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-6 motion-safe:animate-fade-in motion-safe:animate-fill-both"
-    >
-      <img
-        id="npmx-index-h1-logo-kawaii"
-        width="400"
-        class="hidden mb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in motion-safe:hover:scale-105 motion-safe:transition w-80 sm:w-100"
-        src="/extra/npmx-cute.svg"
-        :alt="$t('alt_logo_kawaii')"
-        :class="class"
-      />
-      <img
-        id="npmx-index-h1-logo-tkawaii"
-        width="400"
-        class="hidden mb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in motion-safe:hover:scale-105 motion-safe:transition w-80 sm:w-100"
-        src="/extra/npmx-cute-transgender.svg"
-        :alt="$t('alt_logo_kawaii')"
-        :class="class"
-      />
-      <AppLogo id="npmx-index-h1-logo-normal" :class="class" />
-      <span
-        id="npmx-index-h1-logo-env"
-        aria-hidden="true"
-        class="text-sm sm:text-base md:text-lg transform-origin-br font-mono tracking-widest text-accent absolute -bottom-4 -inset-ie-1.5"
-      >
-        {{ env === 'release' ? 'alpha' : env }}
-      </span>
-    </h1>
-    <p
-      id="npmx-index-tagline"
-      class="text-fg-muted text-lg sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
-    >
-      {{ $t('tagline') }}
-    </p>
-  </div>
-</template>
diff --git a/app/components/Noodle/Artemis/Logo.vue b/app/components/Noodle/Artemis/Logo.vue
new file mode 100644
index 0000000000..3c20aa1ad0
--- /dev/null
+++ b/app/components/Noodle/Artemis/Logo.vue
@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ColorSchemeImg
+      width="400"
+      class="mb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-100"
+      dark-src="/extra/npmx-dark-artemis.svg"
+      light-src="/extra/npmx-light-artemis.svg"
+      alt=""
+    />
+    <ColorSchemeImg
+      width="1440"
+      height="455"
+      class="absolute bottom-0 inset-is-0 w-full h-auto mix-blend-lighten light:mix-blend-darken motion-safe:animate-fade-in"
+      dark-src="/extra/moon-dark.png"
+      light-src="/extra/moon-light.png"
+      alt=""
+    />
+  </div>
+</template>
diff --git a/app/components/Noodle/Kawaii/Logo.vue b/app/components/Noodle/Kawaii/Logo.vue
new file mode 100644
index 0000000000..861ba291cb
--- /dev/null
+++ b/app/components/Noodle/Kawaii/Logo.vue
@@ -0,0 +1,8 @@
+<template>
+  <img
+    width="400"
+    class="mb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in motion-safe:hover:scale-105 motion-safe:transition w-80 sm:w-100"
+    src="/extra/npmx-cute.svg"
+    :alt="$t('alt_logo_kawaii')"
+  />
+</template>
diff --git a/app/components/Noodle/index.ts b/app/components/Noodle/index.ts
new file mode 100644
index 0000000000..3ec094b406
--- /dev/null
+++ b/app/components/Noodle/index.ts
@@ -0,0 +1,47 @@
+import NoodleKawaiiLogo from './Kawaii/Logo.vue'
+import NoodleArtemisLogo from './Artemis/Logo.vue'
+// import NoodleTkawaiiLogo from './Tkawaii/Logo.vue'
+
+export type Noodle = {
+  // Unique identifier for the noodle
+  key: string
+  // Timezone for the noodle (default is auto, i.e. user's timezone)
+  timezone?: string
+  // Date for the noodle
+  date?: string
+  // Logo for the noodle - could be any component. Relative parent - intro section
+  logo: Component
+  // Show npmx tagline or not (default is true)
+  tagline?: boolean
+}
+
+// Archive noodles - might be shown on special page
+// export const ARCHIVE_NOODLES: Noodle[] = [
+//   {
+//     key: 'tkawaii',
+//     date: '2026-04-08T12:00:00UTC',
+//     timezone: 'auto',
+//     logo: NoodleTkawaiiLogo,
+//     tagline: false,
+//   },
+// ]
+
+// Permanent noodles - always shown on specific query param (e.g. ?kawaii)
+export const PERMANENT_NOODLES: Noodle[] = [
+  {
+    key: 'kawaii',
+    logo: NoodleKawaiiLogo,
+    tagline: false,
+  },
+]
+
+// Active noodles - shown based on date and timezone
+export const ACTIVE_NOODLES: Noodle[] = [
+  {
+    key: 'artemis',
+    logo: NoodleArtemisLogo,
+    date: '2026-04-08T12:00:00Z',
+    timezone: 'America/Los_Angeles',
+    tagline: true,
+  },
+]
diff --git a/app/pages/index.vue b/app/pages/index.vue
index 48c5575b00..c73c261d83 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -26,11 +26,11 @@ defineOgImageComponent('Default', {
 
 <template>
   <main>
-    <section class="container min-h-screen flex flex-col">
+    <section class="relative container min-h-screen flex flex-col overflow-hidden">
       <header
         class="flex-1 flex flex-col items-center justify-center text-center pt-20 pb-4 md:pb-8 lg:pb-20"
       >
-        <LandingLogo class="w-42 h-auto sm:w-58 md:w-70" />
+        <LandingIntroHeader />
         <search
           class="w-full max-w-2xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"
diff --git a/public/extra/moon-dark.png b/public/extra/moon-dark.png
new file mode 100644
index 0000000000..e039051bfa
Binary files /dev/null and b/public/extra/moon-dark.png differ
diff --git a/public/extra/moon-light.png b/public/extra/moon-light.png
new file mode 100644
index 0000000000..262d74e5d4
Binary files /dev/null and b/public/extra/moon-light.png differ
diff --git a/public/extra/npmx-dark-artemis.svg b/public/extra/npmx-dark-artemis.svg
new file mode 100644
index 0000000000..867d22cdbf
--- /dev/null
+++ b/public/extra/npmx-dark-artemis.svg
@@ -0,0 +1,20 @@
+<svg width="352" height="89" viewBox="0 0 352 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M282.738 85.1934H280.874L285.062 73.557H287.09L291.278 85.1934H289.414L286.124 75.6706H286.033L282.738 85.1934ZM283.05 80.6365H289.096V82.1138H283.05V80.6365ZM296.638 85.1934V73.557H298.394V83.682H303.667V85.1934H296.638ZM309.349 85.1934V73.557H313.497C314.402 73.557 315.152 73.7218 315.747 74.0513C316.342 74.3809 316.787 74.8316 317.082 75.4036C317.378 75.9718 317.525 76.6119 317.525 77.324C317.525 78.0399 317.376 78.6839 317.077 79.2559C316.781 79.824 316.334 80.2748 315.736 80.6081C315.141 80.9377 314.393 81.1025 313.491 81.1025H310.639V79.6138H313.332C313.904 79.6138 314.368 79.5153 314.724 79.3184C315.08 79.1176 315.342 78.8449 315.508 78.5002C315.675 78.1555 315.758 77.7634 315.758 77.324C315.758 76.8846 315.675 76.4945 315.508 76.1536C315.342 75.8127 315.079 75.5456 314.719 75.3525C314.363 75.1593 313.893 75.0627 313.31 75.0627H311.105V85.1934H309.349ZM323.264 85.1934V73.557H325.019V78.6138H330.821V73.557H332.582V85.1934H330.821V80.1195H325.019V85.1934H323.264ZM339.802 85.1934H337.938L342.126 73.557H344.154L348.341 85.1934H346.478L343.188 75.6706H343.097L339.802 85.1934ZM340.114 80.6365H346.16V82.1138H340.114V80.6365Z" fill="#4EBBEA"/>
+<mask id="mask0_2719_24894" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="2" width="357" height="73">
+<path d="M0 2H357V71H267.75L178.5 75H0V2Z" fill="url(#paint0_linear_2719_24894)"/>
+</mask>
+<g mask="url(#mask0_2719_24894)">
+<path d="M4.82934 57.7695C4.82842 61.4434 4.82714 68.791 4.82934 68.791H15.8468V57.7695H4.82934Z" fill="white"/>
+<path d="M50.5205 74.5195H50.1211L45.4609 66.5127L67.4121 4H75.2842L50.5205 74.5195Z" fill="#51C9FC"/>
+<path d="M133.868 12.043H141.995V66.3525H134.493L106.908 26.4995H106.361V66.3525L98.2344 52.1304V12.043H105.736L133.399 51.896H133.868V12.043Z" fill="white"/>
+<path d="M189.051 12.043C201.711 12.043 207.884 19.6229 207.884 29.6252C207.884 39.6275 201.632 47.2074 189.051 47.2074H177.877V66.3525L169.75 52.1304V12.043H189.051ZM188.27 40.3308C196.319 40.3308 199.601 35.7985 199.601 29.6252C199.601 23.4519 196.319 19.0759 188.192 19.0759H177.877V40.3308H188.27Z" fill="white"/>
+<path d="M274.721 12.043H284.646V66.3525H276.909V27.0465H276.362L260.343 66.2743H253.935L237.916 27.0465H237.369V66.3525H237.291L229.633 52.99V12.043H239.557L256.827 54.2403H257.452L274.721 12.043Z" fill="white"/>
+<path d="M328.843 39.3149L345.8 66.4306H336.266L323.294 45.5664H322.826L309.776 66.4306H309.697L305.165 58.6944L317.59 39.3149L300.398 12.1992H309.854L322.826 33.4542H323.294L336.266 12.1992H345.721L328.843 39.3149Z" fill="white"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_2719_24894" x1="178.5" y1="75" x2="178.5" y2="36" gradientUnits="userSpaceOnUse">
+<stop stop-color="#0F0F0F" stop-opacity="0"/>
+<stop offset="1" stop-color="#0F0F0F"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/public/extra/npmx-light-artemis.svg b/public/extra/npmx-light-artemis.svg
new file mode 100644
index 0000000000..72cb09b6c0
--- /dev/null
+++ b/public/extra/npmx-light-artemis.svg
@@ -0,0 +1,9 @@
+<svg width="352" height="89" viewBox="0 0 352 89" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M282.91 85.1934H281.046L285.234 73.557H287.262L291.45 85.1934H289.586L286.296 75.6706H286.205L282.91 85.1934ZM283.222 80.6365H289.268V82.1138H283.222V80.6365ZM296.81 85.1934V73.557H298.566V83.682H303.838V85.1934H296.81ZM309.521 85.1934V73.557H313.669C314.574 73.557 315.324 73.7218 315.919 74.0513C316.514 74.3809 316.959 74.8316 317.254 75.4036C317.55 75.9718 317.697 76.6119 317.697 77.324C317.697 78.0399 317.548 78.6839 317.248 79.2559C316.953 79.824 316.506 80.2748 315.908 80.6081C315.313 80.9377 314.565 81.1025 313.663 81.1025H310.811V79.6138H313.504C314.076 79.6138 314.54 79.5153 314.896 79.3184C315.252 79.1176 315.514 78.8449 315.68 78.5002C315.847 78.1555 315.93 77.7634 315.93 77.324C315.93 76.8846 315.847 76.4945 315.68 76.1536C315.514 75.8127 315.25 75.5456 314.891 75.3525C314.534 75.1593 314.065 75.0627 313.481 75.0627H311.277V85.1934H309.521ZM323.436 85.1934V73.557H325.191V78.6138H330.992V73.557H332.754V85.1934H330.992V80.1195H325.191V85.1934H323.436ZM339.974 85.1934H338.11L342.297 73.557H344.326L348.513 85.1934H346.65L343.36 75.6706H343.269L339.974 85.1934ZM340.286 80.6365H346.332V82.1138H340.286V80.6365Z" fill="#006FC2"/>
+<path d="M5.00121 57.7695C5.0003 61.4434 4.99902 68.791 5.00121 68.791H16.0187V57.7695H5.00121Z" fill="#0A0A0A"/>
+<path d="M50.6924 74.5195H50.293L45.6328 66.5127L67.584 4H75.4561L50.6924 74.5195Z" fill="#006FC2"/>
+<path d="M134.04 12.043H142.166V66.3525H134.665L107.08 26.4995H106.533V66.3525L98.4062 52.1304V12.043H105.908L133.571 51.896H134.04V12.043Z" fill="#0A0A0A"/>
+<path d="M189.223 12.043C201.882 12.043 208.056 19.6229 208.056 29.6252C208.056 39.6275 201.804 47.2074 189.223 47.2074H178.049V66.3525L169.922 52.1304V12.043H189.223ZM188.442 40.3308C196.491 40.3308 199.773 35.7985 199.773 29.6252C199.773 23.4519 196.491 19.0759 188.364 19.0759H178.049V40.3308H188.442Z" fill="#0A0A0A"/>
+<path d="M274.893 12.043H284.818V66.3525H277.081V27.0465H276.534L260.515 66.2743H254.107L238.088 27.0465H237.541V66.3525H237.463L229.805 52.99V12.043H239.729L256.999 54.2403H257.624L274.893 12.043Z" fill="#0A0A0A"/>
+<path d="M329.014 39.3149L345.972 66.4306H336.438L323.466 45.5664H322.997L309.947 66.4306H309.869L305.337 58.6944L317.762 39.3149L300.57 12.1992H310.026L322.997 33.4542H323.466L336.438 12.1992H345.893L329.014 39.3149Z" fill="#0A0A0A"/>
+</svg>
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 64092a6d8c..b028e55564 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -160,7 +160,9 @@ import {
   BlueskyPostEmbed,
   BuildEnvironment,
   ButtonBase,
-  LandingLogo,
+  LandingIntroHeader,
+  NoodleKawaiiLogo,
+  NoodleArtemisLogo,
   LinkBase,
   CallToAction,
   CodeDirectoryListing,
@@ -354,9 +356,23 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('LandingLogo', () => {
+  describe('LandingIntroHeader', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(LandingLogo)
+      const component = await mountSuspended(LandingIntroHeader)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Noodles', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleKawaiiLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleArtemisLogo)
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })
diff --git a/test/unit/a11y-component-coverage.spec.ts b/test/unit/a11y-component-coverage.spec.ts
index 1029590fd1..f196dcd379 100644
--- a/test/unit/a11y-component-coverage.spec.ts
+++ b/test/unit/a11y-component-coverage.spec.ts
@@ -52,6 +52,7 @@ const SKIPPED_COMPONENTS: Record<string, string> = {
   'SkeletonInline.vue': 'Already covered indirectly via other component tests',
   'Button/Group.vue': "Wrapper component, tests wouldn't make much sense here",
   'Translation/StatusByFile.unused.vue': 'Unused component, might be needed in the future',
+  'ColorScheme/Img.vue': 'Image component, basic ui',
 }
 
 function normalizeComponentPath(filePath: string): string {