diff --git a/_layouts/adventures.html b/_layouts/adventures.html
new file mode 100644
index 0000000..cac4024
--- /dev/null
+++ b/_layouts/adventures.html
@@ -0,0 +1,8 @@
+<a href="/{{ page.source }}/{{ page.slug }}/">
+<div class="card" id="adventure">
+  <h1>{{ page.title }}</h1>
+  <h3>An Adventure For {{ page.system }}</h3>
+  <hr>
+  <p>{{ content }}</p>
+</div>
+</a>
diff --git a/_layouts/cards.html b/_layouts/cards.html
new file mode 100644
index 0000000..d50997f
--- /dev/null
+++ b/_layouts/cards.html
@@ -0,0 +1,15 @@
+<a href="/{{ page.source }}/{{ page.slug }}/">
+<div class="card">
+  <h1>{{ page.title }}</h1>
+  <hr>
+  <figure>
+    <img src="/assets/{{ page.slug }}.png" alt="{{ page.title }} Logo">
+    <hr>
+    <figcaption>{{ content }}</figcaption>
+    <hr>
+  </figure>
+{% if page.system %}
+  <h3>An Adventure For {{ page.system }}</h3>
+{% endif %}
+</div>
+</a>
diff --git a/_layouts/journals.html b/_layouts/journals.html
new file mode 100644
index 0000000..e2431b1
--- /dev/null
+++ b/_layouts/journals.html
@@ -0,0 +1,12 @@
+<a href="/{{ page.source }}/{{ page.slug }}/">
+<div class="card" id="journal">
+  <h1>{{ page.title }}</h1>
+  <hr>
+  <figure>
+    <img src="/assets/{{ page.slug }}.png" alt="{{ page.title }} Logo">
+    <hr>
+    <figcaption>{{ content }}</figcaption>
+    <hr>
+  </figure>
+</div>
+</a>
diff --git a/assets/home.css b/assets/home.css
new file mode 100644
index 0000000..3999091
--- /dev/null
+++ b/assets/home.css
@@ -0,0 +1,148 @@
+html {
+  background-color: black;
+}
+
+/* Layout */
+body {
+  display: flex;
+	margin: 0 auto; max-width: 1620px;
+  background-color: antiquewhite;
+}
+main {
+  position:relative;
+	height:100vh; width: 100%;
+  overflow-y: scroll;
+}
+main article {
+  margin: 3vh auto; padding: 0; max-width: 90%;
+}
+.main-filter {
+  display: none;
+}
+/* Typography */
+html {
+  font-family: sans-serif;
+}
+a,a:visited,a:link,a:focus {
+  text-decoration: none;
+  color: purple;
+  transition: color 0.5s;
+}
+a:hover {
+  color: darkorchid;
+  transition: color 0.5s;
+  text-decoration: underline;
+}
+article {
+  display: flex;
+  flex-flow: column;
+
+  h2 {
+    background-color: black;
+    color: white;
+    box-shadow: 0 10px 10px grey;
+    padding: 0.2em 0.6em;
+  }
+
+  .cards {
+    display: flex; flex-flow: row wrap;
+
+    &#adventure {
+      justify-content: space-evenly;
+
+      a {
+        width: 30%;
+        max-width: 30%;
+      }
+
+    }
+
+    &#journal {
+      justify-content: left;
+
+      a {
+        width: 20vw; max-width: 20vw; min-width: 200px;
+      }
+
+    }
+
+    a,a:visited,a:link,a:focus {
+      text-decoration: none;
+      color: black;
+      transition: color 0.5s;
+    }
+    a:hover {
+      color: #222;
+      transition: color 0.5s;
+    }
+  }
+
+  .card {
+    border: 2px solid black; border-radius: 10px;
+    padding: 0 2em; margin: 1vh 2vw;
+    transition: 
+      background-color 0.3s ease-out,
+      box-shadow 0.5s ease-in;
+
+    &#adventure {
+      background-color: grey;
+
+      &:hover {
+        background-color: lightgrey;
+        box-shadow: 10px 5px 5px black;
+        transition: 
+          background-color 0.3s ease-in,
+          box-shadow 0.5s ease-out;
+
+      }
+    }
+
+    &#journal {
+      background-color: darkgoldenrod;
+
+      &:hover {
+        background-color: goldenrod;
+        box-shadow: 10px 5px 5px black;
+        transition: 
+          background-color 0.3s ease-in,
+          box-shadow 0.5s ease-out;
+
+      }
+    }
+
+    figure {
+      width: 100%; max-width: 100%;
+      margin: 0 auto;
+    }
+
+    figcaption {
+      font-size: 1.5rem;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    h2 {
+      text-align: center;
+      background-color: unset;
+    }
+
+    img {
+      max-width: 75%;
+      margin: 0 auto;
+    }
+  }
+}
+
+/* Responsive */
+@media only screen and (max-width: 900px) {
+  body {
+    overflow-y: hidden;
+  }
+
+  article {
+    .cards {
+      justify-content: space-around;
+    }
+}
diff --git a/index.markdown b/index.markdown
index b225e7d..2fdee34 100644
--- a/index.markdown
+++ b/index.markdown
@@ -1,9 +1,26 @@
 ---
 layout: home
 ---
+# {{ site.title }}
+{{ site.description }}
 
-<h2>Journals</h2>
-<ul>
-    <li><a href="/journals/nataliah">Nataliah Kas Zhukoff</a></li>
-    <li><a href="/journals/bask">Bask Temlin</a></li>
-</ul>
+## Adventures
+<div class="cards" id="adventure">
+{% for adv in site.adventures %}
+{{ adv }}
+{% endfor %}
+</div>
+
+## Journals
+<div class="cards" id="journal">
+{% for journal in site.journals %}
+{{ journal }}
+{% endfor %}
+</div>
+
+## Tools
+<div class="cards" id="tool">
+{% for tool in site.tools %}
+{{ tool }}
+{% endfor %}
+</div>