diff --git a/src/index.11tydata.js b/src/index.11tydata.js
new file mode 100644
index 0000000..5340c1d
--- /dev/null
+++ b/src/index.11tydata.js
@@ -0,0 +1,6 @@
+export default {
+  eleventyNavigation: {
+    key: "Home"
+  },
+  layout: 'base.webc'
+};
diff --git a/src/index.webc b/src/index.webc
new file mode 100644
index 0000000..33b63f5
--- /dev/null
+++ b/src/index.webc
@@ -0,0 +1,41 @@
+<script webc:setup>
+  const characters = Object.keys($data.collections).filter((coll) => coll !== 'all');
+
+  const getCharacterName = (name) => $data.collections[name][0].data.getFullName();
+  const getDescription = (name) => $data.collections[name][0].data.description;
+  const getAvatar = (name) => `src/img/${name}/avatar.png`;
+  const getAltText = (name) => name.charAt(0).toUpperCase() + name.slice(1) + ' Avatar';
+</script>
+
+<main>
+  <h1>Welcome!</h1>
+
+  <p>Select your character:</p>
+
+  <div class="characters">
+    <card webc:for="char of characters" :href="`/${char}/`" webc:nokeep>
+      <eleventy-image
+        slot="image"
+        :src="getAvatar(char)"
+        :alt="getAltText(char)"
+        :width="[500,1000]"
+      ></eleventy-image>
+      <h2 slot="title" @text="getCharacterName(char)"></h2>
+      <p @text="getDescription(char)"></p>
+    </card>
+  </div>
+</main>
+
+<style>
+  main {
+    max-width: 130ch;
+    margin: auto;
+    padding: 1em;
+  }
+
+  .characters {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
+    gap: 1.5em;
+  }
+</style>