diff --git a/11ty/_includes/layouts/base.njk b/11ty/_includes/layouts/base.njk
new file mode 100644
index 00000000..13cec135
--- /dev/null
+++ b/11ty/_includes/layouts/base.njk
@@ -0,0 +1,54 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ renderData.title or title or metadata.title }}</title>
+    <meta name="Description" content="{{ renderData.description or description or metadata.description }}">
+    <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
+  <body>
+    <main>
+      {{ content | safe }}
+      <section class="auto-grid">
+        <h2>Table of Content</h2>
+        <ul>
+          {% for definition in collections.definitions %}
+            {% set renderedName %}
+              {{ definition.data.title}}
+              {%- if definition.data.flag and (definition.data.flag_type == 'avoid') -%}
+                <span class="flag__red">{{ definition.data.flag}}</span>
+              {% endif %}
+            {% endset %}
+            <li>
+              {%- if definition.data.alt_words -%}
+                {% set linkTarget %}
+                  #{{ definition.data.slug }}
+                {% endset %}
+                <a href={{ linkTarget }}>{{ renderedName | safe }}</a>
+              {%- else -%}
+                {{ renderedName }}
+              {% endif %}
+            </li>
+          {% endfor %}
+        </ul>
+      </section>
+      <section class="auto-grid">
+        <h2>Words</h2>
+        {% for definition in collections.definitions %}
+          <article id={{ definition.data.slug }}>
+            <h3>{{ definition.data.title}}</h3>
+            <p>{{ definition.data.flag }}</p>
+            {# <p>{{ definition.data.alt_words }}</p> #}
+            {%- if definition.data.alt_words -%}
+              <h4>Alt words</h4>
+              <ul class="list-semicolon">
+                {% for word in definition.data.alt_words %}
+                  <li>{{ word }}</li>
+                {% endfor %}
+              </ul>
+            {% endif %}
+          </article>
+        {% endfor %}
+      </section>
+    </main>
+  </body>
\ No newline at end of file
diff --git a/11ty/index.njk b/11ty/index.njk
new file mode 100644
index 00000000..772f0102
--- /dev/null
+++ b/11ty/index.njk
@@ -0,0 +1,26 @@
+---
+layout: layouts/base.njk
+---
+
+<section id="introduction" class="auto-grid">
+      <div id="title">
+        <h1 class="title__thicc">Self-Defined</h1>
+        <p>A modern dictionary about us.<br>We define our words, but they don't define us.</p>
+      </div>
+      <div>
+        <p class="summary">
+          Self-Defined seeks to provide more inclusive, holistic, and fluid definitions to reflect the diverse perspectives of the modern world.
+        </p>
+        <p>
+          With the foundation of vocabulary, we can begin to understand lived experiences of people different than us. Words can provide us with a sense of identify and allow us to find kinship through common experiences.
+        </p>
+      </div>
+      <div class="box">
+        <p class="subtitle">Ways to help</p>
+        <ol class="help">
+          <li> Submit words and definitions through <a href="https://github.com/tatianamac/selfdefined/pulls" rel="noreferral">pull requests</a>.</li>
+          <li>Sponsor this work through <a href="https://github.com/sponsors/tatianamac">GitHub Sponsors</a>.</li>
+          <li>Volunteer writing, design, dev help by <a href="http://www.twitter.com/tatianatmac">DMing me @tatianatmac on Twitter</a>.</li>
+        </ol>
+      </div>
+      </section>
\ No newline at end of file
