diff --git a/index.html b/index.html
index 470901a..d8aae14 100644
--- a/index.html
+++ b/index.html
@@ -1,39 +1,62 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
     <head>
+        <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="description" content="Information and links on the OpenDream project">
-        <title>OpenDream Info & Links</title>
+        <title>OpenDream Game Engine</title>
         <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="stylesheet" href="style.css" />
     </head>
     <body>
-        <picture>
-            <source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
-            <source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
-            <source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
-            <img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
-        </picture>
-        <br>
-        <p style="text-align: center">OpenDream is an open source recreation of the <a href="https://www.byond.com/">BYOND</a> game engine. Current major goals include running <a href="https://spacestation13.com/">Space Station 13</a> and improving the DM development experience.</p>
-        <div id="links">
-            <a href="https://github.com/OpenDreamProject/OpenDream/">
-                <picture>
-                    <source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg" width="64px">
-                    <source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg" width="64px">
-                    <img alt="OpenDream GitHub">
-                </picture>
-            </a>
-            <a href="https://discord.opendre.am">
-                <picture>
-                    <source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg" width="64px">
-                    <source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg" width="64px">
-                    <img alt="OpenDream Discord Server">
-                </picture>
-            </a>
-            <a href="https://ref.opendre.am/">
-                <img id="link-ODRef" src="/assets/odref.svg" width="64px" alt="OpenDream DM Reference">
-            </a>
+        <div id="hero">
+            <picture>
+                <source media="(min-width: 1080px)" srcset="/assets/logo-big.svg" width="580px">
+                <source media="(min-width: 400px)" srcset="/assets/logo-big.svg" width="54%">
+                <source media="(max-width: 400px)" srcset="/assets/logo-small.svg" height="100px">
+                <img src="/assets/logo-big.svg" id="logo" alt="OpenDream logo">
+            </picture>
+            <br>
+            <div id="hero-links">
+                <div>
+                    <a href="https://github.com/OpenDreamProject/OpenDream/">
+                        <picture>
+                            <source media="(prefers-color-scheme: light)" srcset="/assets/GitHub_Invertocat_Dark.svg">
+                            <source media="(prefers-color-scheme: dark)" srcset="/assets/GitHub_Invertocat_Light.svg">
+                            <img alt="OpenDream GitHub">
+                        </picture>
+                        <p>GitHub</p>
+                    </a>
+                </div>
+                <div>
+                    <a href="https://discord.opendre.am">
+                        <picture>
+                            <source media="(prefers-color-scheme: light)" srcset="/assets/discord-mark-black.svg">
+                            <source media="(prefers-color-scheme: dark)" srcset="/assets/discord-mark-white.svg">
+                            <img alt="OpenDream Discord Server">
+                        </picture>
+                        <p>Discord</p>
+                    </a>
+                </div>
+                <div>
+                    <a href="https://ref.opendre.am/">
+                        <img id="link-ODRef" src="/assets/odref.svg" alt="OpenDream DM Reference">
+                        <p>DM Reference</p>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div id="contents">
+            <h1>OpenDream Game Engine</h1>
+            <p>OpenDream is an open source recreation of the <a href="https://www.byond.com/">BYOND</a> game engine. Current major goals include running <a href="https://spacestation13.com/">Space Station 13</a> and improving the DM development experience.</p>
+            <div id="screenshots">
+                <img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot.png?raw=true" alt="OpenDream running tg station"/>
+                <p>OpenDream running <a href="https://github.com/tgstation/tgstation">/tg/station</a></p>
+                <img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot2.png?raw=true" alt="OpenDream running Paradise"/>
+                <p>OpenDream running <a href="https://github.com/ike709/Paradise/tree/rustg_64">Paradise</a></p>
+                <img src="https://github.com/OpenDreamProject/OpenDream/raw/master/.github/assets/screenshot3.png?raw=true" alt="OpenDream running Goonstation"/>
+                <p>OpenDream running <a href="https://github.com/goonstation/goonstation">Goonstation</a></p>
+            </div>
         </div>
     </body>
 </html>
\ No newline at end of file
diff --git a/style.css b/style.css
index 555ff04..924c7c6 100644
--- a/style.css
+++ b/style.css
@@ -3,40 +3,132 @@
 }
 
 @media (prefers-color-scheme: light) {
-    body {
-        background-color: #fafafa;
+    :root {
+        --background-color: #fafafa;
+        --contents-box-shadow: grey;
+        --hero-button-box-shadow: black;
+        --hero-button-background: #fffb;
     }
 }
 
 @media (prefers-color-scheme: dark) {
-    body {
-        background-color: #1b1b1b;
+    :root {
+        --background-color: #1b1b1b;
+        --contents-box-shadow: black;
+        --hero-button-box-shadow: white;
+        --hero-button-background: #000b;
     }
 }
 
+body {
+    margin: 0px;
+    background-color: var(--background-color);
+}
+
+body:before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0px;
+    z-index: -1;
+
+    background-size: 60px 60px;
+    background-position: -10px -10px;
+    background-image:
+        linear-gradient(to right, grey 1px, transparent 1px),
+        linear-gradient(to bottom, grey 1px, transparent 1px);
+    filter:
+        drop-shadow( 5px 5px 5px grey );
+}
+
+a:link,a:visited {
+    text-decoration: none;
+}
+
+a:visited {
+    color: LinkText;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
 #logo {
     display: block;
     margin-left: auto;
     margin-right: auto;
-    margin-top: 100px;
+    margin-top: 80px;
 }
 
-#links {
+@media (min-width: 520px) {
+    #hero-links {
+        flex-direction: row;
+    }
+}
+
+@media (max-width: 520px) {
+    #hero-links {
+        flex-direction: column;
+    }
+}
+
+#hero-links {
     display: flex;
-    flex-direction: row;
     justify-content: center;
     align-items: center;
     gap: 20px;
 }
 
-a:link,a:visited {
-    text-decoration: none;
+#hero-links > div {
+    background-color: var(--hero-button-background);
+    border: 2px white solid;
+    border-radius: 8px;
+    box-shadow: 0px 0px 4px var(--hero-button-box-shadow);
+    padding: 4px 4px 0px 4px;
+    height: 100%;
+    transition-duration: 0.2s;
+    transition-property: box-shadow;
 }
 
-a:visited {
-    color: LinkText;
+#hero-links div:hover {
+    box-shadow: 0px 0px 16px var(--hero-button-box-shadow);
 }
 
-a:hover {
-    text-decoration: underline;
+#hero-links p {
+    float: right;
+    color: CanvasText;
+    margin: 0px 0px 0px 4px;
+    font-size: 24px;
+}
+
+#hero-links img {
+    height: 32px;
+}
+
+#contents {
+    background-color: var(--background-color);
+    box-shadow: 0px -5px 5px var(--contents-box-shadow);
+}
+
+#contents {
+    text-align: center;
+    min-height: 100vh;
+}
+
+#screenshots {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 10px;
+}
+
+#screenshots img {
+    width: 100%;
+    max-width: 1080px;
+    margin: 20px 10px 0px 10px;
+}
+
+#screenshots p {
+    margin-top: 0px;
 }
\ No newline at end of file
