diff --git a/frontend/rabbi_gerzi/src/components/SiteHeader.vue b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
new file mode 100644
index 0000000..65497a5
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/components/SiteHeader.vue
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { RouterLink } from 'vue-router'
+import { useAuthStore } from '@/stores/auth'
+
+const authStore = useAuthStore()
+
+const signatureImage = {
+  src: '/assets/signature.png',
+  alt: "R' Yehoshua Gerzi",
+}
+
+onMounted(() => {
+  void authStore.fetchUser()
+})
+
+async function handleLogout(): Promise<void> {
+  await authStore.logout()
+}
+
+const navItems = [
+  { label: 'Torah Media', href: '/media', icon: '▶' },
+  { label: 'About', href: '/about', icon: 'ⓘ' },
+  { label: 'Contact', href: '/contact', icon: '➤' },
+  { label: 'Donate', href: '/donate', icon: '♡' },
+]
+</script>
+
+<template>
+  <header class="site-header">
+    <RouterLink class="site-header__brand" to="/">
+      <img v-bind="signatureImage" class="site-header__signature" />
+    </RouterLink>
+    <nav class="site-header__nav">
+      <RouterLink
+        v-for="item in navItems"
+        :key="item.href"
+        :to="item.href"
+        class="site-header__nav-link"
+      >
+        <span class="site-header__nav-icon" aria-hidden="true">
+          {{ item.icon }}
+        </span>
+        <span>{{ item.label }}</span>
+      </RouterLink>
+      <button
+        v-if="authStore.isAuthenticated"
+        data-cy="navbar-logout"
+        type="button"
+        class="site-header__nav-link"
+        @click="handleLogout"
+      >
+        Logout
+      </button>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.site-header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 2rem;
+  background: rgba(244, 239, 225, 0.85);
+  backdrop-filter: blur(8px);
+  border-bottom: 1px solid var(--color-border);
+}
+
+.site-header__brand {
+  display: inline-flex;
+  align-items: center;
+}
+
+.site-header__signature {
+  height: 36px;
+  width: auto;
+}
+
+.site-header__nav {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.site-header__nav-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  padding: 0.5rem 1rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 9999px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: var(--color-text);
+  transition: background 0.15s ease;
+}
+
+.site-header__nav-link:hover {
+  background: var(--color-cream);
+}
+
+.site-header__nav-icon {
+  display: inline-block;
+  font-size: 0.85rem;
+  color: var(--color-slate);
+}
+
+@media (max-width: 768px) {
+  .site-header {
+    padding: 0.75rem 1rem;
+  }
+
+  .site-header__nav-link {
+    padding: 0.4rem 0.75rem;
+    font-size: 0.85rem;
+  }
+}
+</style>
diff --git a/frontend/rabbi_gerzi/src/router/index.ts b/frontend/rabbi_gerzi/src/router/index.ts
index 32a0e58..6c71efd 100644
--- a/frontend/rabbi_gerzi/src/router/index.ts
+++ b/frontend/rabbi_gerzi/src/router/index.ts
@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import HomePage from '@/views/HomePage.vue'
 import LoginPage from '@/views/LoginPage.vue'
+import MediaPage from '@/views/MediaPage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -15,6 +16,11 @@ const router = createRouter({
       name: 'login',
       component: LoginPage,
     },
+    {
+      path: '/media',
+      name: 'media',
+      component: MediaPage,
+    },
   ],
 })
 
diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
index 9bed3c2..d202d11 100644
--- a/frontend/rabbi_gerzi/src/views/HomePage.vue
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -1,30 +1,14 @@
 <script setup lang="ts">
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/stores/auth'
+import SiteHeader from '@/components/SiteHeader.vue'
 
 const router = useRouter()
-const authStore = useAuthStore()
-
-onMounted(() => {
-  void authStore.fetchUser()
-})
 
 function goToAbout(): void {
   router.push('/about')
 }
 
-async function handleLogout(): Promise<void> {
-  await authStore.logout()
-}
-
-const navItems = [
-  { label: 'Torah Media', href: '/media', icon: '▶' },
-  { label: 'About', href: '/about', icon: 'ⓘ' },
-  { label: 'Contact', href: '/contact', icon: '➤' },
-  { label: 'Donate', href: '/donate', icon: '♡' },
-]
-
 const coreTeachings = [
   { number: 1, title: 'Introduction', glyph: '⌂' },
   { number: 2, title: 'Foundations', glyph: '◧' },
@@ -137,33 +121,7 @@ const projects: Project[] = [
 
 <template>
   <div class="page">
-    <header class="site-header">
-      <a class="site-header__brand" href="/">
-        <img src="/assets/signature.png" alt="R' Yehoshua Gerzi" class="site-header__signature" />
-      </a>
-      <nav class="site-header__nav">
-        <a
-          v-for="item in navItems"
-          :key="item.href"
-          :href="item.href"
-          class="site-header__nav-link"
-        >
-          <span class="site-header__nav-icon" aria-hidden="true">
-            {{ item.icon }}
-          </span>
-          <span>{{ item.label }}</span>
-        </a>
-        <button
-          v-if="authStore.isAuthenticated"
-          data-cy="navbar-logout"
-          type="button"
-          class="site-header__nav-link"
-          @click="handleLogout"
-        >
-          Logout
-        </button>
-      </nav>
-    </header>
+    <SiteHeader />
 
     <section class="hero" data-cy="hero">
       <div class="hero__backdrop">
@@ -430,59 +388,6 @@ const projects: Project[] = [
   min-height: 100vh;
 }
 
-.site-header {
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem 2rem;
-  background: rgba(244, 239, 225, 0.85);
-  backdrop-filter: blur(8px);
-  border-bottom: 1px solid var(--color-border);
-}
-
-.site-header__brand {
-  display: inline-flex;
-  align-items: center;
-}
-
-.site-header__signature {
-  height: 36px;
-  width: auto;
-}
-
-.site-header__nav {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-}
-
-.site-header__nav-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  padding: 0.5rem 1rem;
-  background: var(--color-white);
-  border: 1px solid var(--color-border);
-  border-radius: 9999px;
-  font-size: 0.95rem;
-  font-weight: 500;
-  color: var(--color-text);
-  transition: background 0.15s ease;
-}
-
-.site-header__nav-link:hover {
-  background: var(--color-cream);
-}
-
-.site-header__nav-icon {
-  display: inline-block;
-  font-size: 0.85rem;
-  color: var(--color-slate);
-}
-
 .hero {
   position: relative;
   overflow: hidden;
@@ -1123,15 +1028,6 @@ const projects: Project[] = [
 }
 
 @media (max-width: 768px) {
-  .site-header {
-    padding: 0.75rem 1rem;
-  }
-
-  .site-header__nav-link {
-    padding: 0.4rem 0.75rem;
-    font-size: 0.85rem;
-  }
-
   .hero__content {
     grid-template-columns: 1fr;
     text-align: center;
diff --git a/frontend/rabbi_gerzi/src/views/MediaPage.vue b/frontend/rabbi_gerzi/src/views/MediaPage.vue
new file mode 100644
index 0000000..b405d36
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/views/MediaPage.vue
@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import SiteHeader from '@/components/SiteHeader.vue'
+</script>
+
+<template>
+  <div class="media-page">
+    <SiteHeader />
+    <main class="media-page__main" data-cy="media-page">
+      <section class="media-page__hero">
+        <p class="media-page__eyebrow">Rabbi Yehoshua Gerzi</p>
+        <h1 class="media-page__heading">Torah Media</h1>
+        <p class="media-page__intro">
+          Explore Rabbi Gerzi's Torah videos, audio teachings, and written resources.
+        </p>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.media-page {
+  min-height: 100vh;
+  background: var(--color-cream);
+}
+
+.media-page__main {
+  padding: 5rem 2rem;
+}
+
+.media-page__hero {
+  max-width: 760px;
+  margin: 0 auto;
+  padding: 4rem 3rem;
+  background: var(--color-white);
+  border: 1px solid var(--color-border);
+  border-radius: 14px;
+  text-align: center;
+}
+
+.media-page__eyebrow {
+  margin: 0 0 1rem;
+  color: var(--color-olive);
+  font-size: 0.9rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.media-page__heading {
+  margin: 0;
+  color: var(--color-slate);
+  font-family: var(--font-serif);
+  font-size: clamp(2.25rem, 5vw, 4rem);
+  font-weight: 400;
+  line-height: 1.1;
+}
+
+.media-page__intro {
+  max-width: 34rem;
+  margin: 1.5rem auto 0;
+  color: var(--color-text-muted);
+  font-family: var(--font-serif);
+  font-size: 1.1rem;
+  line-height: 1.7;
+}
+
+@media (max-width: 768px) {
+  .media-page__main {
+    padding: 3rem 1rem;
+  }
+
+  .media-page__hero {
+    padding: 3rem 1.5rem;
+  }
+}
+</style>