diff --git a/assets/scss/_404.scss b/assets/scss/_404.scss
new file mode 100644
index 0000000..731f9de
--- /dev/null
+++ b/assets/scss/_404.scss
@@ -0,0 +1,107 @@
+body.is-404 {
+  .scroll-ambient,
+  .scroll-piece-anchor {
+    display: none !important;
+  }
+}
+
+.error-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: calc(100vh - 90px);
+  padding: 60px 20px;
+  text-align: center;
+
+  .error-page-content {
+    max-width: 600px;
+    width: 100%;
+  }
+
+  .error-heading {
+    font-size: 3rem;
+    font-weight: 800;
+    letter-spacing: -0.03em;
+    background: linear-gradient(
+      135deg,
+      $white 0%,
+      rgba($white, 0.85) 50%,
+      $secondary 100%
+    );
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    margin: 0 0 1rem;
+  }
+
+  .error-subtitle {
+    font-size: 1.15rem;
+    color: $casper;
+    margin: 0 0 3rem;
+    font-weight: 400;
+    line-height: 1.6;
+  }
+
+  .error-icon {
+    margin: 0 auto 3.5rem;
+
+    img {
+      width: 220px;
+      height: auto;
+      opacity: 0.8;
+    }
+  }
+
+  .error-actions {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+  }
+
+  .error-cta {
+    display: inline-block;
+    padding: 0.85rem 2.5rem;
+    font-size: 0.9rem;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    color: $white;
+    background: transparent;
+    border: 1.5px solid rgba($white, 0.25);
+    border-radius: 25px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+
+    &:hover {
+      border-color: $primary;
+      color: $primary;
+    }
+  }
+
+  .error-report {
+    font-size: 0.82rem;
+    color: rgba($casper, 0.6);
+    text-decoration: none;
+    transition: color 0.3s ease;
+
+    &:hover {
+      color: $primary;
+    }
+  }
+
+  @media (max-width: 600px) {
+    padding: 40px 16px;
+
+    .error-heading {
+      font-size: 2rem;
+    }
+
+    .error-subtitle {
+      font-size: 1rem;
+    }
+
+    .error-icon img {
+      width: 160px;
+    }
+  }
+}
diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss
index 4f5ce35..2c0e0fc 100644
--- a/assets/scss/_styles_project.scss
+++ b/assets/scss/_styles_project.scss
@@ -16,6 +16,7 @@
 @import "browser";
 @import "cursors";
 @import "feedback";
+@import "404";
 @import "section-transitions";
 @import "scroll-cube";
 
diff --git a/layouts/404.html b/layouts/404.html
new file mode 100644
index 0000000..a893276
--- /dev/null
+++ b/layouts/404.html
@@ -0,0 +1,16 @@
+{{ define "main" }}
+<script>document.body.classList.add('is-404');</script>
+<section class="error-page">
+  <div class="error-page-content">
+    <h1 class="error-heading">Looks like this design is off the canvas.</h1>
+    <p class="error-subtitle">The page you're looking for has gone missing — perhaps it was never drawn.</p>
+    <div class="error-icon">
+      <img src="/brand/kanvas/icon-only/kanvas-icon-color.svg" alt="Kanvas" />
+    </div>
+    <div class="error-actions">
+      <a href="/" class="error-cta">Return to Kanvas</a>
+      <a href="https://github.com/meshery-extensions/kanvas-site/issues/new" class="error-report" target="_blank" rel="noreferrer">Report this missing page</a>
+    </div>
+  </div>
+</section>
+{{ end }}