diff --git a/frontend/rabbi_gerzi/index.html b/frontend/rabbi_gerzi/index.html
index 9e5fc8f..bad0188 100644
--- a/frontend/rabbi_gerzi/index.html
+++ b/frontend/rabbi_gerzi/index.html
@@ -1,10 +1,20 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <meta
+      name="description"
+      content="The official site of Rabbi Yehoshua Gerzi"
+    >
+    <title>Rabbi Gerzi</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,700&family=Inter:wght@400;500;600;700&display=swap"
+      rel="stylesheet"
+    >
   </head>
   <body>
     <div id="app"></div>
diff --git a/frontend/rabbi_gerzi/src/App.vue b/frontend/rabbi_gerzi/src/App.vue
index abfd315..3ed4b37 100644
--- a/frontend/rabbi_gerzi/src/App.vue
+++ b/frontend/rabbi_gerzi/src/App.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts"></script>
 
 <template>
-  <h1>You did it!</h1>
-  <p>
-    Visit <a href="https://vuejs.org/" target="_blank" rel="noopener">vuejs.org</a> to read the
-    documentation
-  </p>
+  <RouterView />
 </template>
 
 <style scoped></style>
diff --git a/frontend/rabbi_gerzi/src/assets/global.css b/frontend/rabbi_gerzi/src/assets/global.css
new file mode 100644
index 0000000..759e690
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/assets/global.css
@@ -0,0 +1,37 @@
+:root {
+  --color-cream: #f4efe1;
+  --color-slate: #2b3f4e;
+  --color-slate-dark: #213240;
+  --color-olive: #5e6b4c;
+  --color-text: #1f1f1f;
+  --color-text-muted: #5a5a5a;
+  --color-white: #ffffff;
+  --color-border: #e6e1d2;
+  --font-serif: 'Merriweather', Georgia, serif;
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family: var(--font-sans);
+  color: var(--color-text);
+  background: var(--color-white);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+button {
+  font-family: inherit;
+  cursor: pointer;
+}
diff --git a/frontend/rabbi_gerzi/src/main.ts b/frontend/rabbi_gerzi/src/main.ts
index fda1e6e..e460778 100644
--- a/frontend/rabbi_gerzi/src/main.ts
+++ b/frontend/rabbi_gerzi/src/main.ts
@@ -3,6 +3,7 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import './assets/global.css'
 
 const app = createApp(App)
 
diff --git a/frontend/rabbi_gerzi/src/router/index.ts b/frontend/rabbi_gerzi/src/router/index.ts
index e1eab52..9a5c8a6 100644
--- a/frontend/rabbi_gerzi/src/router/index.ts
+++ b/frontend/rabbi_gerzi/src/router/index.ts
@@ -1,8 +1,15 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from '@/views/HomePage.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomePage,
+    },
+  ],
 })
 
 export default router
diff --git a/frontend/rabbi_gerzi/src/views/HomePage.vue b/frontend/rabbi_gerzi/src/views/HomePage.vue
new file mode 100644
index 0000000..e2e27d0
--- /dev/null
+++ b/frontend/rabbi_gerzi/src/views/HomePage.vue
@@ -0,0 +1,237 @@
+<script setup lang="ts">
+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>
+  <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>
+      </nav>
+    </header>
+
+    <section class="hero" data-cy="hero">
+      <div class="hero__backdrop">
+        <img src="/assets/sky.png" alt="" class="hero__sky" />
+        <img src="/assets/mountain.png" alt="" class="hero__mountain" />
+        <img src="/assets/man_on_rock.png" alt="" class="hero__hiker" />
+      </div>
+      <div class="hero__content">
+        <div class="hero__text">
+          <h1 class="hero__headline">
+            Let&rsquo;s upgrade our lives to a
+            <em>healthy</em>, <em>integrated</em>, and <em>balanced</em> Torah existence.
+          </h1>
+          <p class="hero__attribution">Rabbi Yehoshua Gerzi</p>
+        </div>
+        <div class="hero__portrait-frame">
+          <img
+            src="/assets/portrait.png"
+            alt="Rabbi Yehoshua Gerzi"
+            class="hero__portrait"
+            data-cy="hero-portrait"
+          />
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<style scoped>
+.page {
+  background: var(--color-white);
+  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;
+  min-height: 80vh;
+  display: flex;
+  align-items: center;
+}
+
+.hero__backdrop {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.hero__sky,
+.hero__mountain,
+.hero__hiker {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+.hero__sky {
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.hero__mountain {
+  bottom: -2rem;
+  width: 120%;
+  max-width: none;
+}
+
+.hero__hiker {
+  bottom: 10%;
+  width: 35%;
+  max-width: 480px;
+}
+
+.hero__content {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: center;
+  gap: 3rem;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 6rem 2rem;
+}
+
+.hero__text {
+  max-width: 36rem;
+}
+
+.hero__headline {
+  font-family: var(--font-serif);
+  font-weight: 400;
+  font-size: clamp(1.75rem, 3.2vw, 2.8rem);
+  line-height: 1.25;
+  color: var(--color-white);
+  margin: 0;
+}
+
+.hero__headline em {
+  font-style: italic;
+}
+
+.hero__attribution {
+  margin: 1.5rem 0 0 0;
+  font-size: 0.95rem;
+  color: var(--color-white);
+  opacity: 0.85;
+}
+
+.hero__portrait-frame {
+  width: clamp(180px, 22vw, 320px);
+  aspect-ratio: 1;
+  border-radius: 50%;
+  background: var(--color-slate);
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+
+.hero__portrait {
+  width: 110%;
+  height: auto;
+  display: block;
+}
+
+@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;
+    padding: 4rem 1.5rem;
+  }
+
+  .hero__text {
+    margin: 0 auto;
+  }
+
+  .hero__hiker {
+    width: 60%;
+  }
+}
+</style>
