diff --git a/src/layouts/character.webc b/src/layouts/character.webc
new file mode 100644
index 0000000..24aab3a
--- /dev/null
+++ b/src/layouts/character.webc
@@ -0,0 +1,61 @@
+---
+layout: base.webc
+---
+
+<main :class="firstName.toLowerCase()">
+  <profile webc:nokeep>
+    <eleventy-image
+      slot="avatar"
+      :src="`src/img/${firstName.toLowerCase()}/avatar.png`"
+      :alt="firstName + ' Avatar'"
+      :width="[500, 1000]"
+    ></eleventy-image>
+    <template webc:nokeep slot="name" @text="getFullName()"></template>
+    <template webc:nokeep slot="species" @text="species"></template>
+    <traits :traits="getTraits()" webc:nokeep></traits>
+  </profile>
+
+  <page-content :char="firstName.toLowerCase()" webc:nokeep>
+    <h1 @text="$data.eleventyNavigation.key"></h1>
+    <article @raw="content"></article>
+  </page-content>
+
+  <footer>&copy; Sebin Nyshkim 2025</footer>
+</main>
+
+<style>
+  main {
+    --inbox-margin: 1rem;
+
+    display: flex;
+    flex-flow: column nowrap;
+    align-items: center;
+    gap: 1em;
+
+    margin-block: var(--container-spacing-top-safe) var(--container-spacing-bottom-safe);
+    margin-inline: var(--container-spacing-left-safe) var(--container-spacing-right-safe);
+
+    margin-block: var(--page-spacing);
+
+    @media (min-width: 64em) {
+      --inbox-margin: 1.5rem;
+
+      flex-flow: row nowrap;
+      justify-content: center;
+      align-items: start;
+    }
+  }
+
+  h1 {
+    margin-inline: var(--inbox-margin);
+  }
+
+  article {
+    margin-block: var(--inbox-margin);
+    margin-inline: var(--inbox-margin);
+  }
+
+  footer {
+    text-align: end;
+  }
+</style>