diff --git a/docs/get_started.md b/docs/get_started.md
index c127f1de7..5d8c5644b 100644
--- a/docs/get_started.md
+++ b/docs/get_started.md
@@ -89,7 +89,7 @@ pip install outlines
       "weapon": "mace",
       "strength": 4171
     }
-    `````
+    ```
 
 ## Acknowledgements
 
diff --git a/docs/index.md b/docs/index.md
index 6fb100a46..c70f11e72 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,4 +1,51 @@
 ---
 title: Outlines
-template: home.html
+hide:
+  - navigation
+  - toc
+  - feedback
 ---
+
+#
+
+<figure markdown>
+  ![Image title](assets/images/logo.png){ width="300" }
+</figure>
+
+<center>
+    <h1 class="title">Generate text with LLMs</h1>
+    <h2 class="subtitle">Robust prompting & (guided) text generation</h2>
+    [:fontawesome-solid-bolt: Get started](get_started.md){ .md-button .md-button--primary }
+    [:fontawesome-solid-code-pull-request: Contribute](https://github.com/outlines-dev/outlines){ .md-button }
+
+<div class="index-pre-code">
+```python
+from enum import Enum
+from pydantic import BaseModel, constr
+
+import outlines.models as models
+import outlines.text.generate as generate
+
+
+class Armor(str, Enum):
+    leather = "leather"
+    chainmail = "chainmail"
+    plate = "plate"
+
+
+class Character(BaseModel):
+    name: constr(max_length=10)
+    age: int
+    armor: Armor
+    strength: int
+
+
+model = models.transformers("mistralai/Mistral-7B-v0.1", device="cuda")
+generator = generate.json(model, Character, max_tokens=100)
+sequence = generator("Give me a character description")
+```
+</div>
+
+<a class="github-button" href="https://github.com/outlines-dev/outlines" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star outlines-dev/outlines on GitHub">Star</a>
+<script async defer src="https://buttons.github.io/buttons.js"></script>
+</center>
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
deleted file mode 100644
index 4e32efee6..000000000
--- a/docs/overrides/home.html
+++ /dev/null
@@ -1,202 +0,0 @@
-{% extends "main.html" %}
-{% block tabs %}
-{{ super() }}
-<style>
-
-    .md-main {
-        flex-grow: 0
-    }
-
-    .md-main__inner {
-        display: flex;
-        height: 100%;
-        position: relative;
-    }
-
-    .tx-container {
-        padding-top: .0rem;
-        background: var(--md-default-bg-color);
-        margin: 0;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        -ms-transform: translate(-50%, -50%);
-        transform: translate(-50%, -50%);
-    }
-
-    .tx-hero {
-        margin: 32px 2.8rem;
-        color: var(--md-primary-bg-color);
-        justify-content: center;
-    }
-
-    .tx-hero h1 {
-        margin-bottom: 1rem;
-        color: currentColor;
-        font-weight: 700
-    }
-
-    .tx-hero__content {
-        padding-bottom: 1rem;
-        margin: 0 auto;
-    }
-
-    .tx-hero__image{
-        width:17rem;
-        height:17rem;
-        order:1;
-        padding-right: 2.5rem;
-        margin: 70px 0 0 0;
-    }
-
-    .tx-hero .md-button {
-        margin-top: .5rem;
-        margin-right: .5rem;
-        color: var(--md-primary-bg-color)
-    }
-
-    .tx-hero .md-button--primary {
-        background-color: var(--md-primary-bg-color);
-        color: hsla(280deg, 37%, 48%, 1);
-        border-color: var(--md-primary-bg-color)
-    }
-
-    .tx-hero .md-button:focus,
-    .tx-hero .md-button:hover {
-        background-color: var(--md-accent-fg-color);
-        color: var(--md-default-bg-color);
-        border-color: var(--md-accent-fg-color)
-    }
-
-    .top-hr {
-        margin-top: 42px;
-    }
-
-    @media screen and (max-width:30em) {
-        .tx-hero h1 {
-            font-size: 1.4rem
-        }
-    }
-
-    @media screen and (min-width:60em) {
-        .md-sidebar--secondary {
-            display: none
-        }
-
-        .tx-hero {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .tx-hero__content {
-            max-width: 22rem;
-            margin-top: 3.5rem;
-            margin-bottom: 3.5rem;
-            margin-left: 1.0rem;
-            margin-right: 4.0rem;
-            align-items: center;
-        }
-    }
-
-    @media screen and (min-width:76.25em) {
-        .md-sidebar--primary {
-            display: none
-        }
-
-        .top-hr {
-            width: 100%;
-            display: flex;
-            max-width: 61rem;
-            margin-right: auto;
-            margin-left: auto;
-            padding: 0 .2rem;
-        }
-
-        .bottom-hr {
-            margin-top: 10px;
-            width: 100%;
-            display: flex;
-            max-width: 61rem;
-            margin-right: auto;
-            margin-left: auto;
-            padding: 0 .2rem;
-        }
-
-    }
-
-    .hr {
-        border-bottom: 1px solid #eee;
-        width: 100%;
-        margin: 20px 0;
-    }
-
-    .text-center {
-        text-align: center;
-        padding-right: 15px;
-        padding-left: 15px;
-        margin-right: auto;
-        margin-left: auto;
-        margin-top: 15px;
-        font-family: 'Lato', sans-serif;
-        font-size: 23px;
-        font-weight: 300;
-        padding-bottom: 10px;
-    }
-
-    .logos {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-flow: row wrap;
-        margin: 0 auto;
-    }
-
-    .logos img {
-        flex: 1 1 auto;
-        padding: 25px;
-        max-height: 130px;
-        vertical-align: middle;
-    }
-
-    .hr-logos {
-        margin-top: 0;
-        margin-bottom: 30px;
-    }
-
-    .md-footer-meta__inner {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        margin-top: 1.0rem;
-    }
-
-    .md-footer-social {
-        padding-top: 20px;
-    }
-</style>
-
-<!-- Main site Entry button descriptions -->
-<section class="tx-container">
-    <div class="md-grid md-typeset">
-      <div class="tx-hero">
-        <div class="tx-hero__image">
-          <img src="assets/images/logo.png" draggable="false">
-        </div>
-        <div class="tx-hero__content">
-          <h1>Outlines</h1>
-          <p>Use Large Language Models and Symbolic methods to generate text machines understand.</p>
-          <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
-            Get started
-          </a>
-          <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button">
-            Go to GitHub
-          </a>
-        </div>
-      </div>
-    </div>
-</section>
-
-{% endblock %}
-{% block content %}{% endblock %}
-{% block footer %}{% endblock %}
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 380cc358e..d98248e9b 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -11,3 +11,35 @@
 code > * {
     border-radius: 1rem;
 }
+
+.index-pre-code {
+  margin: 50px;
+  width: 60%;
+  left: 50%;
+}
+
+.index-pre-code pre>code {
+  text-align: left;
+}
+
+h1.title {
+  color: #FFFFFF;
+  margin: 0px 0px 5px;
+}
+
+h2.subtitle {
+  margin: 5px 0px 25px;
+}
+
+.md-typeset {
+  line-height: 21px;
+  font-weight: 400;
+}
+
+.md-typeset h1 {
+  font-weight: bold;
+}
+
+.md-typeset h2 {
+  font-weight: bold;
+}