diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..222861c
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "tabWidth": 2,
+  "useTabs": false
+}
diff --git a/src/lib/assets/pictures/pic0.png b/src/lib/assets/pictures/pic0.png
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 278bda4..e693985 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,16 @@
 <script>
-	import demoImage from '$lib/assets/pictures/pic10.png';
+  	import { onMount } from 'svelte';
+	import demoImage from '$lib/assets/pictures/pic0.png'
+	
+	function rand(min, max) {
+    	return Math.floor(Math.random() * (max - min + 1) + min)
+	}
+	
+	onMount(() => {
+		document.getElementById('banner').src = document.getElementById('banner').src.replace("pic0", `pic${rand(1,14)}`);
+		console.log(document.getElementById('banner').src);
+	})
+
 </script>
 
 <svelte:head>
@@ -20,15 +31,14 @@
 	<a href="/modlist" role="button" class="secondary outline">Modlist</a>
 </div>
 <!-- svelte-ignore a11y-img-redundant-alt -->
-<a href="/gallery" data-tooltip="See more..."><img class="banner" src="{demoImage}" alt="Random picture from the gallery."></a>
+<a href="/gallery" data-tooltip="See more..."><img src="{demoImage}" class="banner" id="banner" alt="Random picture from the gallery."></a>
 
 <style>
 	img.banner {
 		margin: 1em;
-	  	border-radius: 1em;
 	  	transform: scale(1);
-	  	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
-	  	transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
+		border-radius: 1em;
+	  	transition: all 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
 	  	align-self: center;
 	}
 	img.banner:hover {
diff --git a/src/routes/Header.svelte b/src/routes/Header.svelte
index adf658a..df4d537 100644
--- a/src/routes/Header.svelte
+++ b/src/routes/Header.svelte
@@ -1,27 +1,26 @@
 <script>
 	import { page } from '$app/stores';
 	import logo from '$lib/assets/logo/explorecraft.svg';
-	import github from '$lib/images/github.svg';
 	import Switcher from './Switcher.svelte';
 </script>
 
 <div class="header-container">
     <a class="link contrast" href="/">
         <div class="header">
-        <img class="logo" src="{logo}" alt="ExploreCraft Logo" />
-        <div>ExploreCraft</div>
+          <img class="logo" src="{logo}" alt="ExploreCraft Logo" />
+          <div>ExploreCraft</div>
         </div>
     </a>
-	<nav id="navigation-bar">
+	<nav class="navigation-bar">
 		<ul>
-			<li aria-current={$page.url.pathname === '/' ? 'page' : undefined}>
-				<a href="/" class="contrast">Home</a>
+			<li>
+				<a href="/" class="contrast {$page.url.pathname === '/' ? 'current-page' : undefined}">Home</a>
 			</li>
-			<li aria-current={$page.url.pathname === '/download' ? 'page' : undefined}>
-				<a href="/downloadsgit push ori" class="contrast">Download</a>
+			<li>
+				<a href="/downloads" class="contrast {$page.url.pathname === '/downloads' ? 'current-page' : undefined}">Download</a>
 			</li>
-			<li aria-current={$page.url.pathname.startsWith('/gallery') ? 'page' : undefined}>
-				<a href="/gallery" class="contrast">Gallery</a>
+			<li>
+				<a href="/gallery" class="contrast {$page.url.pathname === '/gallery' ? 'current-page' : undefined}">Gallery</a>
 			</li>
 			<li>
 				<Switcher/>
@@ -63,29 +62,30 @@
 .header {
   display: flex;
   align-items: center;
-  justify-content: space-between; /* Add this to align the logo and navigation on opposite sides */
-  padding: 0.5em;
-  padding-right: 1.5em; /* Change padding-left to padding-right */
+  justify-content: space-between;
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+  padding-right: 0.5em;
   font-weight: 500;
   font-size: 1.5em;
 }
 
-#navigation-bar {
+.navigation-bar {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   list-style: none;
   margin: 0;
   margin-left: auto;
-  margin-right: 2em;
+  margin-right: 2.5%;
   padding: 0;
 }
 
-#navigation-bar li {
+.navigation-bar li {
   margin-left: 1em;
 }
 
-#navigation-bar a {
+.navigation-bar a {
   font-family: 'IBM Plex Mono', monospace;
   font-style: normal;
   font-weight: 500;
@@ -95,18 +95,18 @@
   transition: font-style;
 }
 
-#navigation-bar a:hover {
+.navigation-bar a:hover {
   font-style: italic;
 }
 
-#navigation-bar a.current-page {
-  font-style: italic;
+.navigation-bar a.current-page {
+  font-weight: 600;
 }
 
 .link {
-  /* color: #000000; */
   text-decoration: none;
   transition: font-style;
+  margin-left: 2.5%;
 }
 
 .link:hover {
diff --git a/src/routes/downloads/+page.js b/src/routes/downloads/+page.js
deleted file mode 100644
index e739ef4..0000000
--- a/src/routes/downloads/+page.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { dev } from '$app/environment';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement
-export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
-export const prerender = true;
diff --git a/src/routes/downloads/+page.svelte b/src/routes/downloads/+page.svelte
index f463090..dda44c2 100644
--- a/src/routes/downloads/+page.svelte
+++ b/src/routes/downloads/+page.svelte
@@ -1,14 +1,61 @@
-<svelte:head>
-	<title>Downloads</title>
-	<meta name="description" content="About this app" />
-</svelte:head>
-
 <script>
-	import MsgBox from "$lib/modules/MsgBox.svelte";
+  import MsgBox from "$lib/modules/MsgBox.svelte";
 </script>
 
+<svelte:head>
+  <title>Downloads</title>
+  <meta name="description" content="About this app" />
+</svelte:head>
+
 <div class="text-column">
-	<h1>Downloads</h1>
-	<p>Here you'll find all downloads.</p>
+  <h1>Downloads</h1>
+  <p>Here you'll find all downloads.</p>
 </div>
-<MsgBox type="warning" message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly." prefix="ℹ️ Note ℹ️" />
+<MsgBox
+  type="warning"
+  message="<br>Currently WIP. You'll find downloads on this page,<br>but they may not work properly."
+  prefix="ℹ️ Note ℹ️"
+/>
+
+<div class="grid">
+  <article>
+    <div>
+      <h4>ExploreCraft: Legacy</h4>
+      <p>
+        If you'd like to keep playing the legacy version of ExploreCraft, you
+        can download it here. Not recommended as it is not maintained anymore.
+      </p>
+      <button>Download</button>
+    </div>
+  </article>
+  <article>
+    <div>
+      <h4>ExploreCraft: Marbled</h4>
+      <p>
+        The main way to play ExploreCraft. This is also the most stable version,
+        so you're better off playing with this rather than the other ones.
+      </p>
+      <button>Download</button>
+    </div>
+  </article>
+  <article>
+    <h4>ExploreCraft: Dev</h4>
+    <p>
+      ExploreCraft's Beta instance. Here be dragons! This is the in-dev version
+      of ExploreCraft which may have game-breaking bugs, unfinished features and
+      world corruptions.
+    </p>
+    <button>Download</button>
+  </article>
+</div>
+
+<style>
+	/* button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		top: auto;
+		bottom: 1em;
+		position: static;
+	} */
+</style>
\ No newline at end of file
diff --git a/src/routes/gallery/+page.js b/src/routes/gallery/+page.js
deleted file mode 100644
index e739ef4..0000000
--- a/src/routes/gallery/+page.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { dev } from '$app/environment';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement
-export const csr = dev;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in production
-export const prerender = true;