diff --git a/web/src/components/Card.astro b/web/src/components/Card.astro
deleted file mode 100644
index a1e0ccf..0000000
--- a/web/src/components/Card.astro
+++ /dev/null
@@ -1,63 +0,0 @@
----
-interface Props {
-	title: string;
-	body: string;
-	href: string;
-}
-
-const { href, title, body } = Astro.props;
----
-
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
-</li>
-<style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 0.25rem;
-		background-color: white;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 0.6rem;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
-	}
-
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: 1rem 1.3rem;
-		border-radius: 0.35rem;
-		color: #111;
-		background-color: white;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-		color: #444;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent));
-	}
-</style>
diff --git a/web/src/components/home/hero/Header.astro b/web/src/components/home/hero/Header.astro
new file mode 100644
index 0000000..29f08eb
--- /dev/null
+++ b/web/src/components/home/hero/Header.astro
@@ -0,0 +1,28 @@
+<header>
+  <p class="author">ryuuart::</p>
+  <div class="title">
+    <h1>manawave</h1>
+    <p class="tagline">ambient::infinity</p>
+  </div>
+</header>
+
+<style>
+  header {
+    grid-area: 1 / 2 / 2 / 6;
+
+    display: grid;
+    grid-template-columns: auto auto;
+  }
+
+  header * {
+    margin: 0;
+  }
+
+  header > .author {
+    margin-right: 0.5rem;
+  }
+
+  header h1 {
+    text-transform: uppercase;
+  }
+</style>
diff --git a/web/src/components/home/hero/Hero.astro b/web/src/components/home/hero/Hero.astro
new file mode 100644
index 0000000..3528a54
--- /dev/null
+++ b/web/src/components/home/hero/Hero.astro
@@ -0,0 +1,37 @@
+---
+import Section from "../../../layouts/home/Section.astro";
+import Header from "./Header.astro";
+import Primordia from "./Primordia.astro";
+---
+
+<Section class="hero">
+  <Header />
+  <div class="cta-desc">
+    <p>
+      MANAWAVE is a controllable, configurable, and omnidirectional marquee
+      defined with only HTML & CSS. It has zero dependencies and is built on
+      vanilla JavaScript.
+    </p>
+  </div>
+  <div class="cta">
+    <div><a>Get Started</a></div>
+    <div><a>5 Realms</a></div>
+  </div>
+  <Primordia />
+</Section>
+
+<style>
+  section.hero {
+    grid-row: hero-start / hero-end;
+
+    grid-template-rows: auto 1fr auto auto;
+  }
+
+  .cta-desc {
+    grid-area: 3 / 2 / 4 / 5;
+  }
+
+  .cta {
+    grid-area: 4 / 2/ 5 / 5;
+  }
+</style>
diff --git a/web/src/components/home/hero/Primordia.astro b/web/src/components/home/hero/Primordia.astro
new file mode 100644
index 0000000..067fb26
--- /dev/null
+++ b/web/src/components/home/hero/Primordia.astro
@@ -0,0 +1,14 @@
+<div class="primordia sideways-lr">
+  <div>Primordia</div>
+  <div>08.10.23</div>
+</div>
+
+<style>
+  .primordia {
+    grid-area: 3 / 1 / 4 / 2;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+  }
+</style>
diff --git a/web/src/components/home/poem/Poem.astro b/web/src/components/home/poem/Poem.astro
new file mode 100644
index 0000000..79be1e2
--- /dev/null
+++ b/web/src/components/home/poem/Poem.astro
@@ -0,0 +1,32 @@
+---
+import Section from "../../../layouts/home/Section.astro";
+---
+
+<Section class="poem">
+  <div class="text">
+    <p>
+      Within manawave's embrace,<br />
+      A realm seer's gaze takes flight,<br />
+      Five realms unveiled, they trace,<br />
+      Seeking truths in cosmic light.
+    </p>
+  </div>
+  <div class="placeholder-img"></div>
+</Section>
+
+<style>
+  section.poem {
+    grid-row: poem-start / poem-end;
+    grid-template-rows: 1fr 2fr;
+  }
+
+  .text {
+    grid-area: 1 / 2 / 2 / 6;
+  }
+
+  .placeholder-img {
+    grid-area: 2 / 2 / 3 / 6;
+
+    background-color: blue;
+  }
+</style>
diff --git a/web/src/components/home/realms/RealmItem.astro b/web/src/components/home/realms/RealmItem.astro
new file mode 100644
index 0000000..b30443b
--- /dev/null
+++ b/web/src/components/home/realms/RealmItem.astro
@@ -0,0 +1,33 @@
+---
+const { title, tagline, url } = Astro.props;
+---
+
+<div class="container">
+  <div class="aura"></div>
+  <div class="content">
+    <div>
+      <a href={url}>{title}</a>
+    </div>
+    <p>{tagline}</p>
+  </div>
+</div>
+
+<style>
+  .container {
+    display: flex;
+    flex-flow: row nowrap;
+  }
+
+  .aura {
+    flex: 0;
+    flex-basis: 2rem;
+
+    height: 2rem;
+
+    background: white;
+  }
+
+  .content {
+    flex-grow: 1;
+  }
+</style>
diff --git a/web/src/components/home/realms/Realms.astro b/web/src/components/home/realms/Realms.astro
new file mode 100644
index 0000000..7b69d22
--- /dev/null
+++ b/web/src/components/home/realms/Realms.astro
@@ -0,0 +1,52 @@
+---
+import Section from "../../../layouts/home/Section.astro";
+import realmsData from "./realms.json";
+import RealmItem from "./RealmItem.astro";
+---
+
+<Section class="realms">
+  <div class="name">
+    <p>ryuuart::</p>
+  </div>
+  <header>
+    <h2>5 Realms</h2>
+    <p>visions&nbsp;•&nbsp;dreams&nbsp;•&nbsp;self</p>
+  </header>
+  <ul>
+    {
+      realmsData.map((i) => (
+        <li>
+          <RealmItem title={i.title} tagline={i.tagline} url={i.url} />
+        </li>
+      ))
+    }
+  </ul>
+</Section>
+
+<style>
+  section.realms {
+    grid-row: realms-start / realms-end;
+    grid-template-rows: auto auto;
+  }
+
+  .name {
+    grid-column: 1 / 1 / 2 / 2;
+
+    display: flex;
+    justify-content: end;
+  }
+
+  header {
+    grid-area: 1 / 2 / 2 / 5;
+  }
+
+  ul {
+    grid-area: 2 / 2 / 3 / 6;
+
+    padding: 0;
+  }
+
+  li {
+    list-style: none;
+  }
+</style>
diff --git a/web/src/components/home/realms/realms.json b/web/src/components/home/realms/realms.json
new file mode 100644
index 0000000..8c37c4b
--- /dev/null
+++ b/web/src/components/home/realms/realms.json
@@ -0,0 +1,27 @@
+[
+  {
+    "title": "Sebonzakura",
+    "tagline": "1000 cherry dream petals",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "hyperpink",
+    "tagline": "prima donna",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "Hero",
+    "tagline": "another self",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "#HYPERTRANCE",
+    "tagline": "infinite evolution —",
+    "url": "/sebonzakura"
+  },
+  {
+    "title": "flarewater",
+    "tagline": "elemental flavor",
+    "url": "/sebonzakura"
+  }
+]
diff --git a/web/src/layouts/Layout.astro b/web/src/layouts/Layout.astro
index 18ffe8a..1a4279c 100644
--- a/web/src/layouts/Layout.astro
+++ b/web/src/layouts/Layout.astro
@@ -10,7 +10,7 @@ const { title } = Astro.props;
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
+    <meta name="description" content="ambient infinity" />
     <meta name="viewport" content="width=device-width" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="generator" content={Astro.generator} />
@@ -22,20 +22,19 @@ const { title } = Astro.props;
 </html>
 <style is:global>
   :root {
-    --accent: 124, 58, 237;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      #da62c4 30%,
-      white 60%
-    );
+    /* Colors */
+    --color-bg: black;
+    --color-fg: white;
   }
-  html {
-    font-family: system-ui, sans-serif;
-    background-color: #f6f6f6;
+
+  * {
+    box-sizing: border-box;
   }
-  code {
-    font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
-      DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
+
+  body {
+    background: var(--color-bg);
+    color: var(--color-fg);
+
+    margin: 0;
   }
 </style>
diff --git a/web/src/layouts/home/Section.astro b/web/src/layouts/home/Section.astro
new file mode 100644
index 0000000..bb9938c
--- /dev/null
+++ b/web/src/layouts/home/Section.astro
@@ -0,0 +1,17 @@
+---
+const { class: className } = Astro.props;
+---
+
+<section class={className}>
+  <slot />
+</section>
+
+<style>
+  section {
+    grid-column: 1 / 6;
+
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat(5, 1fr);
+  }
+</style>
diff --git a/web/src/pages/index.astro b/web/src/pages/index.astro
index fd73d19..d97c2aa 100644
--- a/web/src/pages/index.astro
+++ b/web/src/pages/index.astro
@@ -1,83 +1,63 @@
 ---
 import Layout from "../layouts/Layout.astro";
-import Card from "../components/Card.astro";
+import HeroSection from "../components/home/hero/Hero.astro";
+import PoemSection from "../components/home/poem/Poem.astro";
+import RealmsSection from "../components/home/realms/Realms.astro";
 ---
 
-<Layout title="Welcome to Astro.">
-  <main>
-    <h1>Welcome to <span class="text-gradient">Astro</span></h1>
-    <p class="instructions">
-      To get started, open the directory <code>src/pages</code> in your project.<br
-      />
-      <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
-    </p>
-    <ul role="list" class="link-card-grid">
-      <Card
-        href="https://docs.astro.build/"
-        title="Documentation"
-        body="Learn how Astro works and explore the official API docs."
-      />
-      <Card
-        href="https://astro.build/integrations/"
-        title="Integrations"
-        body="Supercharge your project with new frameworks and libraries."
-      />
-      <Card
-        href="https://astro.build/themes/"
-        title="Themes"
-        body="Explore a galaxy of community-built starter themes."
-      />
-      <Card
-        href="https://astro.build/chat/"
-        title="Community"
-        body="Come say hi to our amazing Discord community. ❤️"
-      />
-      <Card href="./sebonzakura" title="【千本桜】" body="1000 flower petals" />
-    </ul>
+<Layout title="manawave">
+  <main class="box-line-left">
+    <div class="separator--rinf_c2 vr front"></div>
+    <HeroSection />
+    <PoemSection />
+    <RealmsSection />
+    <footer>
+      <p>Copyright &copy; 2023 Long Nguyen. All rights reserved.</p>
+    </footer>
   </main>
 </Layout>
 
 <style>
   main {
-    margin: auto;
-    padding: 1.5rem;
-    max-width: 60ch;
+    margin: 0 1.5rem;
+
+    display: grid;
+    gap: 0.5rem;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows:
+      [hero-start]
+      auto [hero-end poem-start]
+      auto [poem-end realms-start]
+      auto [realms-end]
+      auto;
   }
-  h1 {
-    font-size: 3rem;
-    font-weight: 800;
-    margin: 0;
+
+  footer {
+    grid-area: realms-end / 2 / span 1 / 6;
+    display: grid;
   }
-  .text-gradient {
-    background-image: var(--accent-gradient);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-size: 400%;
-    background-position: 0%;
+</style>
+
+<style is:global>
+  .sideways-lr {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
   }
-  .instructions {
-    line-height: 1.6;
-    margin: 1rem 0;
-    border: 1px solid rgba(var(--accent), 25%);
-    background-color: white;
-    padding: 1rem;
-    border-radius: 0.4rem;
+
+  .separator--rinf_c2 {
+    grid-row: hero-start / span realms-end 2;
+    grid-column: 2 / span 1;
   }
-  .instructions code {
-    font-size: 0.875em;
-    font-weight: bold;
-    background: rgba(var(--accent), 12%);
-    color: rgb(var(--accent));
-    border-radius: 4px;
-    padding: 0.3em 0.45em;
+
+  .behind {
+    z-index: -1;
   }
-  .instructions strong {
-    color: rgb(var(--accent));
+
+  .front-1 {
+    z-index: 1;
   }
-  .link-card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(24ch, 1fr));
-    gap: 1rem;
-    padding: 0;
+
+  .vr {
+    border-left: 1px solid var(--color-fg);
   }
 </style>