diff --git a/package.json b/package.json
index 343eb91..cc6cc37 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
     "format": "prettier --write --ignore-unknown ."
   },
   "dependencies": {
-    "@fontsource/nunito": "^4.5.11",
+    "@fontsource/roboto-flex": "^4.5.2",
     "@mdx-js/react": "^2.1.5",
     "gatsby": "^5.0.0",
     "gatsby-plugin-image": "^3.2.0",
diff --git a/src/_global.scss b/src/_global.scss
index 80d9e51..1c587cf 100644
--- a/src/_global.scss
+++ b/src/_global.scss
@@ -1,4 +1,14 @@
 @mixin vars {
     --color-base: white;
     --color-splash: #234ef6;
+
+    --layout-width: 1000px;
+    --layout-padding: 20px;
+    --layout-slant: -30deg;
+}
+
+@mixin boxConstraints {
+    max-width: var(--layout-width);
+    width: 100%;
+    margin: 0 auto;
 }
diff --git a/src/index.scss b/src/index.scss
index 8523f14..23cb3b6 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,6 +1,11 @@
-@use "@fontsource/nunito/scss/mixins" as Nunito;
+@use "@fontsource/roboto-flex/scss/mixins" as RobotoFlex;
+@import "./global";
 
-@include Nunito.fontFaceVariable($type: "wghtOnly");
+@include RobotoFlex.fontFaceVariable($type: "full");
+
+:root {
+    @include vars;
+}
 
 *,
 *::after,
@@ -10,7 +15,8 @@
 
 html,
 body,
-#___gatsby {
+#___gatsby,
+#gatsby-focus-wrapper {
     width: 100%;
     min-height: 100vh;
     padding: 0;
@@ -18,5 +24,13 @@ body,
 }
 
 body {
-    font-family: "NunitoVariable", "Nunito", "Nunito Sans", sans-serif;
+    font-family: "Roboto FlexVariable", "RobotoVariable", "Roboto Flex",
+        "Roboto", sans-serif;
+    color: var(--color-splash);
+    background-color: var(--color-base);
+}
+
+a {
+    color: inherit;
+    text-decoration: underline dotted currentColor;
 }
diff --git a/src/layout/Layout.module.scss b/src/layout/Layout.module.scss
new file mode 100644
index 0000000..457bbdd
--- /dev/null
+++ b/src/layout/Layout.module.scss
@@ -0,0 +1,58 @@
+@import "../global";
+
+.layout {
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+
+    .navigation {
+        position: sticky;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 900;
+        background-color: var(--color-base);
+
+        > .navigationBorder {
+            max-width: var(--layout-width);
+            width: 100%;
+            margin: 0 auto;
+            margin-top: -10px;
+            height: 15px;
+            background-image: repeating-linear-gradient(
+                var(--layout-slant),
+                white 0px,
+                var(--color-splash) 0.5px 3px,
+                white 3.5px 12px
+            );
+        }
+
+        > nav {
+            max-width: var(--layout-width);
+            width: 100%;
+            margin: 0 auto;
+            display: flex;
+            z-index: 905;
+
+            a {
+                padding: var(--layout-padding);
+                text-decoration: none;
+                font-size: 1.3em;
+                font-weight: 700;
+
+                &.logo {
+                    margin-right: auto;
+                }
+            }
+        }
+    }
+
+    .main {
+        flex-grow: 1;
+    }
+
+    footer {
+        padding: var(--layout-padding);
+        text-align: center;
+    }
+}
diff --git a/src/layout/Layout.tsx b/src/layout/Layout.tsx
new file mode 100644
index 0000000..707ba26
--- /dev/null
+++ b/src/layout/Layout.tsx
@@ -0,0 +1,36 @@
+import { Link } from "gatsby";
+import React from "react";
+
+import "../index.scss";
+import * as styles from "./Layout.module.scss";
+
+const Layout = ({ children }: React.PropsWithChildren<{}>) => {
+    return (
+        <div className={styles.layout}>
+            <div className={styles.navigation}>
+                <nav>
+                    <Link to="/" className={styles.logo}>
+                        Unkn0wnCat.net
+                    </Link>
+                    <Link to="/videos">Videos</Link>
+                </nav>
+                <div className={styles.navigationBorder} />
+            </div>
+            <div role="main" className={styles.main}>
+                {children}
+            </div>
+            <footer>
+                &copy; CC-BY-4.0 Kevin Kandlbinder |{" "}
+                <a
+                    href="https://kevink.dev/legal/about"
+                    target="_blank"
+                    rel="noreferer"
+                >
+                    Imprint
+                </a>
+            </footer>
+        </div>
+    );
+};
+
+export default Layout;
diff --git a/src/pages/index.module.scss b/src/pages/index.module.scss
new file mode 100644
index 0000000..c573937
--- /dev/null
+++ b/src/pages/index.module.scss
@@ -0,0 +1,100 @@
+@import "../global";
+
+.container {
+    @include boxConstraints;
+    padding-top: var(--layout-padding);
+
+    .hero {
+        display: flex;
+        min-height: 80vh;
+        align-items: center;
+        justify-content: center;
+
+        > * {
+            width: 50%;
+            flex-shrink: 0;
+        }
+
+        .chibi {
+            > .imgWrapper {
+                max-height: 80vh;
+                margin: 0 auto;
+                overflow: hidden;
+
+                > div {
+                    object-fit: contain;
+                    height: 100%;
+                    max-height: 80vh;
+                    display: block;
+                }
+            }
+
+            transition: width 0.25s;
+
+            @media (max-width: 800px) {
+                width: 0px;
+                flex-grow: 0;
+            }
+        }
+
+        .info {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            transition: width 0.25s;
+            max-width: 400px;
+
+            @media (max-width: 800px) {
+                width: 90%;
+                max-width: 400px;
+            }
+
+            .infoTitle {
+                display: block;
+                font-size: 3em;
+                font-weight: 900;
+                margin-bottom: -10px;
+            }
+
+            .tagLine {
+                font-style: italic;
+                font-weight: 300;
+                font-variation-settings: "wdth" 151;
+                font-size: 1.5em;
+            }
+
+            .impactLine {
+                margin: 7px 0;
+                height: 3px;
+                background-color: var(--color-splash);
+            }
+
+            .impactBox {
+                height: 90px;
+                background-image: repeating-linear-gradient(
+                    var(--layout-slant),
+                    white 0px,
+                    var(--color-splash) 0.5px 3px,
+                    white 3.5px 12px
+                );
+            }
+
+            .links {
+                display: flex;
+                flex-direction: column;
+                gap: var(--layout-padding);
+                padding: var(--layout-padding);
+            }
+        }
+    }
+
+    .artCredit {
+        transition: opacity 0.25s;
+        padding: var(--layout-padding);
+
+        @media (max-width: 800px) {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 6d284b8..3abb558 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,11 +1,78 @@
 import * as React from "react";
 import type { HeadFC, PageProps } from "gatsby";
+import Layout from "../layout/Layout";
+
+import * as styles from "./index.module.scss";
+import { StaticImage } from "gatsby-plugin-image";
 
 const IndexPage: React.FC<PageProps> = () => {
     return (
-        <div>
-            <span>Unkn0wnCat.net</span>
-        </div>
+        <Layout>
+            <div className={styles.container}>
+                <div className={styles.hero}>
+                    <div className={styles.chibi}>
+                        <div className={styles.imgWrapper}>
+                            <StaticImage
+                                src="../images/chibi_nobg.png"
+                                placeholder="blurred"
+                                quality={80}
+                                alt="Chibi drawing of Unkn0wnCat created by @Pericote9"
+                                layout="constrained"
+                                objectFit="contain"
+                            />
+                        </div>
+                    </div>
+                    <div className={styles.info}>
+                        <span className={styles.infoTitle}>Unkn0wnCat</span>
+                        <div className={styles.impactLine} />
+                        <span className={styles.tagLine}>
+                            Gamer - Coder - Video Producer
+                        </span>
+                        <div className={styles.impactLine} />
+                        <div className={styles.links}>
+                            <a
+                                href="https://www.youtube.com/channel/UCCoZp-6_P3CVFj4clQ6uaeg"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                Unkn0wnCat
+                            </a>
+                            <a
+                                href="https://www.twitch.tv/thatunkn0wncat"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                ThatUnkn0wnCat
+                            </a>
+                            <a
+                                href="https://steamcommunity.com/id/unkn0wncat"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                Unkn0wnCat
+                            </a>
+                            <a
+                                href="https://kreig.de/de/members/75eec884-c9fc-4626-82bd-f0fdaaa1a4c0"
+                                target="_blank"
+                                rel="noreferrer"
+                            >
+                                My Clan (KREIG)
+                            </a>
+                        </div>
+                        <div className={styles.impactBox} />
+                    </div>
+                </div>
+
+                <a
+                    className={styles.artCredit}
+                    href="https://twitter.com/Pericote9"
+                    target="_blank"
+                    rel="noopener"
+                >
+                    Chibi drawn by @Pericote9
+                </a>
+            </div>
+        </Layout>
     );
 };
 
diff --git a/yarn.lock b/yarn.lock
index 25b8b7b..5437a8f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1071,10 +1071,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@fontsource/nunito@^4.5.11":
-  version "4.5.11"
-  resolved "https://registry.yarnpkg.com/@fontsource/nunito/-/nunito-4.5.11.tgz#0992075ddc3f3ed8e3e83bf5944b1b0efd4c24dd"
-  integrity sha512-j2WIvzsI+6wjbJ/gQjyHJL/SYZxyg1qomvRswMZAWj2lvv+eX4kzJOSbr9YhZLYywoMspYb0643EO4cHRy6zpQ==
+"@fontsource/roboto-flex@^4.5.2":
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/@fontsource/roboto-flex/-/roboto-flex-4.5.2.tgz#f487bd75a52c9fcb3a77d05b10766afbe5c77393"
+  integrity sha512-GYG8WbC9K8HdIYwIzgPb7dc4CrMMb0QUOP6IYPeuVvd33PyZRvVvu1CvRzXhqbI+trV37Ti3WBCfJJl9RvsVTQ==
 
 "@gatsbyjs/parcel-namer-relative-to-cwd@^2.2.0":
   version "2.2.0"