diff --git a/utumishi/README.md b/utumishi/README.md
new file mode 100644
index 0000000..0c2e8e5
--- /dev/null
+++ b/utumishi/README.md
@@ -0,0 +1,44 @@
+# Utumishi Archive Website
+
+Recommended setup details for the responsive journal, book, and materials archive webpage:
+
+- **Website name:** Utumishi Archive
+- **Required GitHub repository:** https://github.com/t-mwau/DecodeLabs-Internship
+- **Repository folder after cloning:** DecodeLabs-Internship
+- **Project folder inside the repo:** utumishi
+- **Main HTML file:** utumishi/index.html
+- **CSS folder:** utumishi/css
+- **Stylesheet file:** utumishi/css/styles.css
+
+## Terminal commands to create the project in the required repository
+
+Run these commands from the directory where you keep your GitHub projects:
+
+```bash
+git clone https://github.com/t-mwau/DecodeLabs-Internship.git
+cd DecodeLabs-Internship
+mkdir -p utumishi/css
+touch utumishi/index.html utumishi/css/styles.css
+```
+
+After adding your webpage code, save the files and commit them:
+
+```bash
+git add utumishi/index.html utumishi/css/styles.css utumishi/README.md
+git commit -m "Create Utumishi archive website"
+git push origin main
+```
+
+## How to open the webpage locally
+
+From inside the `DecodeLabs-Internship` repository folder, run:
+
+```bash
+python3 -m http.server 8000 --directory utumishi
+```
+
+Then open this address in your browser:
+
+```text
+http://localhost:8000
+```
diff --git a/utumishi/css/styles.css b/utumishi/css/styles.css
new file mode 100644
index 0000000..2f74ec4
--- /dev/null
+++ b/utumishi/css/styles.css
@@ -0,0 +1,358 @@
+:root {
+  --bg: #f5efe6;
+  --surface: #fffaf3;
+  --primary: #174b3f;
+  --primary-light: #236c5c;
+  --accent: #d89b36;
+  --text: #1f2926;
+  --muted: #66716c;
+  --shadow: 0 20px 45px rgba(23, 75, 63, 0.16);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: Arial, Helvetica, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.6;
+}
+
+a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.site-header {
+  min-height: 100vh;
+  padding: 1.5rem 5vw 4rem;
+  background: linear-gradient(135deg, rgba(23, 75, 63, 0.95), rgba(35, 108, 92, 0.82)), url("https://images.unsplash.com/photo-1524995997946-a1c2e315a42f?auto=format&fit=crop&w=1400&q=80") center/cover;
+  color: #fff;
+}
+
+.navbar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 2rem;
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 1rem 0;
+}
+
+.logo {
+  font-size: 1.6rem;
+  font-weight: 800;
+  letter-spacing: 0.04em;
+}
+
+.nav-links {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.nav-links a {
+  font-weight: 700;
+  opacity: 0.9;
+}
+
+.nav-links a:hover {
+  color: var(--accent);
+}
+
+.nav-toggle,
+.nav-toggle-label {
+  display: none;
+}
+
+.hero {
+  display: grid;
+  grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
+  align-items: center;
+  gap: 3rem;
+  max-width: 1180px;
+  margin: 6rem auto 0;
+}
+
+.eyebrow {
+  margin: 0 0 0.8rem;
+  color: var(--accent);
+  font-size: 0.85rem;
+  font-weight: 800;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+h1 {
+  max-width: 780px;
+  font-size: clamp(2.4rem, 6vw, 5.5rem);
+  line-height: 1.02;
+  margin-bottom: 1rem;
+}
+
+h2 {
+  font-size: clamp(1.8rem, 3vw, 3rem);
+  line-height: 1.15;
+}
+
+.hero-text {
+  max-width: 640px;
+  color: rgba(255, 255, 255, 0.84);
+  font-size: 1.1rem;
+}
+
+.hero-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
+.button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 48px;
+  padding: 0.75rem 1.3rem;
+  border-radius: 999px;
+  font-weight: 800;
+}
+
+.button.primary {
+  background: var(--accent);
+  color: #2b1c05;
+}
+
+.button.secondary {
+  border: 2px solid rgba(255, 255, 255, 0.65);
+  color: #fff;
+}
+
+.hero-card {
+  display: grid;
+  gap: 0.5rem;
+  padding: 2rem;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: 28px;
+  background: rgba(255, 255, 255, 0.12);
+  box-shadow: var(--shadow);
+  backdrop-filter: blur(12px);
+}
+
+.hero-card strong {
+  font-size: 3rem;
+  line-height: 1;
+}
+
+.hero-card span {
+  margin-bottom: 1.2rem;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.section,
+.archive-panel,
+.site-footer {
+  max-width: 1180px;
+  margin: 0 auto;
+  padding: 5rem 5vw;
+}
+
+.section-heading {
+  max-width: 680px;
+  margin-bottom: 2rem;
+}
+
+.card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.25rem;
+}
+
+.info-card,
+.service-card {
+  padding: 1.8rem;
+  border-radius: 24px;
+  background: var(--surface);
+  box-shadow: 0 14px 35px rgba(31, 41, 38, 0.08);
+}
+
+.info-card h3,
+.service-card h3 {
+  color: var(--primary);
+}
+
+.archive-panel {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 2rem;
+  margin-top: 1rem;
+  border-radius: 32px;
+  background: var(--primary);
+  color: #fff;
+}
+
+.archive-panel p {
+  color: rgba(255, 255, 255, 0.78);
+}
+
+.workflow-list {
+  display: grid;
+  gap: 1rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.workflow-list li {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border-radius: 18px;
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.workflow-list span {
+  display: inline-grid;
+  place-items: center;
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: var(--accent);
+  color: #2b1c05;
+  font-weight: 800;
+}
+
+.service-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.25rem;
+}
+
+.service-card.accent {
+  background: #f0d8af;
+}
+
+.site-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+  margin-bottom: 2rem;
+  border-radius: 32px;
+  background: var(--surface);
+}
+
+.site-footer .button.primary {
+  flex: 0 0 auto;
+}
+
+@media (max-width: 820px) {
+  .nav-toggle-label {
+    display: flex;
+    width: 44px;
+    height: 44px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(255, 255, 255, 0.5);
+    border-radius: 12px;
+    cursor: pointer;
+  }
+
+  .nav-toggle-label span,
+  .nav-toggle-label span::before,
+  .nav-toggle-label span::after {
+    display: block;
+    width: 22px;
+    height: 2px;
+    background: #fff;
+    content: "";
+    transition: transform 0.2s ease;
+  }
+
+  .nav-toggle-label span::before {
+    transform: translateY(-7px);
+  }
+
+  .nav-toggle-label span::after {
+    transform: translateY(5px);
+  }
+
+  .nav-links {
+    position: absolute;
+    top: 76px;
+    right: 0;
+    left: 0;
+    display: none;
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    padding: 0.75rem;
+    border-radius: 20px;
+    background: rgba(23, 75, 63, 0.98);
+  }
+
+  .nav-links a {
+    display: block;
+    padding: 0.9rem 1rem;
+  }
+
+  .nav-toggle:checked ~ .nav-links {
+    display: flex;
+  }
+
+  .hero,
+  .archive-panel,
+  .service-layout,
+  .site-footer {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    margin-top: 3rem;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .site-footer {
+    display: grid;
+  }
+}
+
+@media (max-width: 560px) {
+  .site-header {
+    padding-inline: 1rem;
+  }
+
+  .hero-actions,
+  .button {
+    width: 100%;
+  }
+
+  .card-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .section,
+  .archive-panel,
+  .site-footer {
+    padding: 3rem 1rem;
+  }
+}
diff --git a/utumishi/index.html b/utumishi/index.html
new file mode 100644
index 0000000..6e43479
--- /dev/null
+++ b/utumishi/index.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Utumishi Archive | Journals & Book Materials</title>
+  <link rel="stylesheet" href="css/styles.css">
+</head>
+<body>
+  <header class="site-header">
+    <nav class="navbar" aria-label="Primary navigation">
+      <a class="logo" href="#">Utumishi</a>
+      <input class="nav-toggle" type="checkbox" id="nav-toggle" aria-label="Toggle navigation">
+      <label class="nav-toggle-label" for="nav-toggle">
+        <span></span>
+      </label>
+      <ul class="nav-links">
+        <li><a href="#collections">Collections</a></li>
+        <li><a href="#archive">Archive</a></li>
+        <li><a href="#services">Services</a></li>
+        <li><a href="#contact">Contact</a></li>
+      </ul>
+    </nav>
+
+    <section class="hero">
+      <div class="hero-content">
+        <p class="eyebrow">Digital and physical resource storage</p>
+        <h1>Organize journals, books, and learning materials in one trusted archive.</h1>
+        <p class="hero-text">Utumishi helps schools, offices, and research teams preserve academic resources with clear cataloging, fast discovery, and safe storage workflows.</p>
+        <div class="hero-actions">
+          <a class="button primary" href="#archive">Explore Archive</a>
+          <a class="button secondary" href="#contact">Request Storage</a>
+        </div>
+      </div>
+      <div class="hero-card" aria-label="Archive statistics">
+        <strong>12k+</strong>
+        <span>Materials indexed</span>
+        <strong>98%</strong>
+        <span>Catalog accuracy</span>
+      </div>
+    </section>
+  </header>
+
+  <main>
+    <section class="section" id="collections">
+      <div class="section-heading">
+        <p class="eyebrow">Collections</p>
+        <h2>Store every resource with purpose.</h2>
+      </div>
+      <div class="card-grid">
+        <article class="info-card">
+          <h3>Journals</h3>
+          <p>Arrange periodicals by subject, publication date, author, and department for quick research access.</p>
+        </article>
+        <article class="info-card">
+          <h3>Books</h3>
+          <p>Keep textbooks, reference books, and manuals easy to track with shelf-ready catalog details.</p>
+        </article>
+        <article class="info-card">
+          <h3>Materials</h3>
+          <p>Archive handouts, reports, magazines, and institutional documents without losing context.</p>
+        </article>
+      </div>
+    </section>
+
+    <section class="archive-panel" id="archive">
+      <div>
+        <p class="eyebrow">Archive workflow</p>
+        <h2>Simple intake, clean records, reliable retrieval.</h2>
+        <p>Use consistent records to track title, contributor, category, storage location, and availability status.</p>
+      </div>
+      <ul class="workflow-list">
+        <li><span>01</span>Receive and inspect materials</li>
+        <li><span>02</span>Catalog metadata and storage code</li>
+        <li><span>03</span>Store safely and monitor access</li>
+      </ul>
+    </section>
+
+    <section class="section" id="services">
+      <div class="section-heading">
+        <p class="eyebrow">Services</p>
+        <h2>Built for organized knowledge centers.</h2>
+      </div>
+      <div class="service-layout">
+        <div class="service-card">
+          <h3>Responsive catalog pages</h3>
+          <p>Visitors can browse comfortably on phones, tablets, laptops, and desktop displays.</p>
+        </div>
+        <div class="service-card accent">
+          <h3>Storage planning</h3>
+          <p>Plan shelves, boxes, and digital folders with naming rules that scale with your collection.</p>
+        </div>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer" id="contact">
+    <div>
+      <h2>Utumishi Archive</h2>
+      <p>Repository: <strong>DecodeLabs-Internship</strong></p>
+      <p>Recommended folder: <strong>utumishi/</strong></p>
+      <p>Recommended files: <strong>index.html</strong> and <strong>css/styles.css</strong></p>
+    </div>
+    <a class="button primary" href="mailto:archive@example.com">Start Archiving</a>
+  </footer>
+</body>
+</html>