diff --git a/web/_includes/about.html b/web/_includes/about.html
index 103342e..e680a44 100644
--- a/web/_includes/about.html
+++ b/web/_includes/about.html
@@ -1,6 +1,5 @@
 <div class="section">
-    <span id="about"></span>
-    <h1>About Tiny Life</h1>
+    <h1 id="about">About Tiny Life</h1>
     <p>Tiny Life is a fun simulation game that aims to capture the essence of games like The Sims, but in an isometric pixelart style.</p>
     <p>In the game, you control a set of people that live together in a household. You take care of their daily needs, build their skills, forge new relationships... or just mess up their entire life in whatever way you can think of!</p>
 
diff --git a/web/_includes/devlogs.html b/web/_includes/devlogs.html
index 1944be7..d66358e 100644
--- a/web/_includes/devlogs.html
+++ b/web/_includes/devlogs.html
@@ -1,6 +1,5 @@
 <div class="section">
-    <span id="devlogs"></span>
-    <h1>Devlogs</h1>
+    <h1 id="devlogs">Devlogs</h1>
     <p>Along with every major update, we publish a devlog that features additional information as well as some screenshots. You can read them on itch or on Steam. You can also read <a href="https://docs.tinylifegame.com/Changelog">the full changelog</a>.</p>
 
     <div class="devlogs">
diff --git a/web/_includes/indexnav.html b/web/_includes/indexnav.html
new file mode 100644
index 0000000..f734429
--- /dev/null
+++ b/web/_includes/indexnav.html
@@ -0,0 +1,3 @@
+<a class="nav-item nav-link" href="#about">About</a>
+<a class="nav-item nav-link" href="#devlogs">Devlogs</a>
+<a class="nav-item nav-link" href="#roadmap">Roadmap</a>
\ No newline at end of file
diff --git a/web/_includes/navbar.html b/web/_includes/navbar.html
new file mode 100644
index 0000000..0f6c04f
--- /dev/null
+++ b/web/_includes/navbar.html
@@ -0,0 +1,19 @@
+<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
+    <div class="container navbar-container">
+        <a class="navbar-brand" href="#">
+            <img src="/media/icon.png" width="40" height="40" alt="The Tiny Life logo">
+        </a>
+
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-content" aria-label="Navbar toggler">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+
+        <div class="collapse navbar-collapse" id="navbar-content">
+            <div class="navbar-nav mr-auto" id="nav-items">
+                {% if page.nav %}
+                {% include {{page.nav}} %}
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</nav>
\ No newline at end of file
diff --git a/web/_includes/roadmap.html b/web/_includes/roadmap.html
index 98532f4..058e660 100644
--- a/web/_includes/roadmap.html
+++ b/web/_includes/roadmap.html
@@ -1,6 +1,5 @@
 <div class="section">
-    <span id="roadmap"></span>
-    <h1>Roadmap</h1>
+    <h1 id="roadmap">Roadmap</h1>
     <p>
         There's a lot of stuff planned for the game! Everything on this list will be part of free updates in the future, provided that you buy the game once it's purchasable. Right now, the game is still in public beta, so everything is free!<br>
         <span class="text-muted">This list is not exhaustive! There are a lot of planned and work-in-progress features that we want to keep secret for now.</span>
diff --git a/web/_includes/top.html b/web/_includes/top.html
index 6e4e1f5..a2ae295 100644
--- a/web/_includes/top.html
+++ b/web/_includes/top.html
@@ -3,7 +3,7 @@
         <image src="media/logo.png" width="100%" height="auto" alt="Tiny Life"></image>
         <h4>A fun simulation game where you mess with people's lives</h4>
 
-        <div class="container">
+        <div class="container top-container">
             <div class="row">
                 <div class="col site">
                     <h3>Play the free beta</h3>
@@ -24,9 +24,6 @@
             <a class="link" href="https://press.ellpeck.de/tinylife/">Get Press Kit</a>
         </div>
     </div>
-    <div class="top-footer">
-        <p>▼ Scroll down for more ▼</p>
-    </div>
 </div>
 
 <script>
diff --git a/web/_layouts/default.html b/web/_layouts/default.html
index 698de18..44c391b 100644
--- a/web/_layouts/default.html
+++ b/web/_layouts/default.html
@@ -11,7 +11,7 @@
     <meta name="keywords" content="Ellpeck, Tiny Life, Steam, itch, itch.io, Sandbox, Life Simulator, Simulator, Sim, Isometric, Pixelart, Pixel Art, Retro">
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato&display=swap">
     <link rel="stylesheet" href="style.css">
     <link rel="icon" href="favicon.ico">
 
@@ -38,10 +38,14 @@
     </script>
 </head>
 
-<body>
+<body data-spy="scroll" data-target="#navbar" data-offset="80">
+    {% include navbar.html %}
+
     {{ content }}
 
-    <p class="footer"><a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2022 Ellpeck</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a></p>
+    <div class="footer bg-light">
+        <a href="https://github.com/Ellpeck/TinyLifeWeb">&copy; 2021-2022 Ellpeck</a> &ndash; <a href="https://ellpeck.de/impressum">Impressum</a> &ndash; <a href="https://ellpeck.de/privacy">Privacy</a> &ndash; <a href="https://status.ellpeck.de">Status</a>
+    </div>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index defbc1c..e276bfa 100644
--- a/web/index.html
+++ b/web/index.html
@@ -1,5 +1,6 @@
 ---
 layout: default
+nav: indexnav.html
 title: Tiny Life
 summary: A fun simulation game where you mess with people's lives
 ---
diff --git a/web/media/icon.png b/web/media/icon.png
index 90c5135..287affd 100644
Binary files a/web/media/icon.png and b/web/media/icon.png differ
diff --git a/web/style.css b/web/style.css
index bc6a0cf..f3dbfb7 100644
--- a/web/style.css
+++ b/web/style.css
@@ -1,3 +1,16 @@
+html {
+    scroll-padding-top: 70px;
+}
+
+body {
+    position: relative;
+    font-family: Lato, sans-serif;
+}
+
+.navbar-container {
+    max-width: 950px;
+}
+
 .top {
     background-image: url("media/large_background.png");
     background-size: 400%;
@@ -11,15 +24,7 @@
 
 .top-content {
     text-align: center;
-    padding-top: 20px;
-    padding-bottom: 60px;
-}
-
-.top-footer {
-    position: absolute;
-    bottom: 30px;
-    left: auto;
-    right: auto;
+    padding-top: 50px;
 }
 
 .section {
@@ -35,7 +40,7 @@
     padding-bottom: 20px;
 }
 
-.container {
+.top-container {
     background-color: rgba(0, 0, 0, 0.4);
     border-radius: 5px;
     margin-bottom: 30px;
@@ -80,10 +85,8 @@
 }
 
 .footer {
-    margin-top: 15px;
-    margin-bottom: 15px;
-    width: 100%;
     text-align: center;
+    padding: 15px;
 }
 
 .devlog {