diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
index 344f14f..e8183a8 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@@ -1,7 +1,4 @@
 <script>
-	import IconMatrix from "~icons/simple-icons/matrix";
-	import IconGitHub from "~icons/simple-icons/github";
-	import IconSignal from "~icons/fa6-solid/signal";
 	import { page } from "$app/stores";
 </script>
 
@@ -10,7 +7,7 @@
 		<a
 			href="https://www.abuseipdb.com/user/82331"
 			title="AbuseIPDB is an IP address blacklist for webmasters and sysadmins to report IP addresses engaging in abusive behavior on their networks"
-			style="width: fit-content;"
+			style="width: fit-content; padding: 1rem;"
 		>
 			<img
 				src="https://www.abuseipdb.com/contributor/82331.svg"
@@ -18,68 +15,34 @@
 			/>
 		</a>
 	{/if}
-	<hr />
 	<div class="content">
-		<span>© 2021 - present, Project Segfault</span>
-
-		<div class="links">
-			<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
-				<IconMatrix />
-			</a>
-			<a href="https://github.com/ProjectSegfault/">
-				<IconGitHub />
-			</a>
-			<a href="https://status.projectsegfau.lt/">
-				<IconSignal />
-			</a>
-		</div>
+		<span>© 2021 - present, Project Segfault team</span>
+		<span>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and released under the <a href="https://opensource.org/licenses/MIT/">MIT license</a>.</span>
 	</div>
 </footer>
 
 <style>
 	footer {
-		padding: 1rem;
 		display: flex;
 		flex-direction: column;
 		font-size: 20px;
 		position: sticky;
 		top: 100vh;
-		width: calc(100vw - 2rem);
-	}
-
-	hr {
-		color: var(--accent-primary);
-		width: 100%;
-		margin-left: 0;
 	}
 
 	div.content {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	div.links {
-		display: flex;
-		gap: 12px;
-		margin-left: 8px;
-	}
-
-	.links a {
-		text-decoration: none;
 		display: flex;
 		align-items: center;
+		flex-direction: column;
+		border-top: 1px solid var(--grey);
+		padding: .5rem;
 	}
 
-	@media only screen and (max-width: 500px) {
-		.content {
-			display: flex;
-			flex-direction: column;
-			gap: 8px;
-		}
-
-		div.links {
-			margin-left: 0;
-		}
+	div.content > * {
+		color: var(--text);
+		font-size: 13px;
+		font-weight: 500;
+		text-align: center;
 	}
 
 	img {
diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index a80a3a9..18b2e9f 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -1,5 +1,7 @@
 <script>
 	import IconBars from "~icons/fa6-solid/bars";
+	import IconMatrix from "~icons/simple-icons/matrix";
+	import IconGitHub from "~icons/simple-icons/github";
 </script>
 
 <nav>
@@ -16,15 +18,22 @@
 	</label>
 
 	<div class="links">
-		<a href="https://instances.projectsegfau.lt/">Hosted services</a
+		<a href="https://instances.projectsegfau.lt/">Instances</a
 		>
 		<a href="/minecraft">Minecraft</a>
 		<a href="/donate">Donate</a>
 		<a href="/faq">FAQ</a>
 		<a href="/contact">Contact us</a>
-		<a href="/members">Our team</a>
+		<a href="/team">Our team</a>
 		<a href="https://blog.projectsegfau.lt/">Blog</a>
 		<a href="/legal">Legal</a>
+		<a href="https://status.projectsegfau.lt/">Status</a>
+		<a href="https://matrix.to/#/#project-segfault:projectsegfau.lt/">
+			<IconMatrix />
+		</a>
+		<a href="https://github.com/ProjectSegfault/">
+			<IconGitHub />
+		</a>
 	</div>
 </nav>
 
@@ -54,6 +63,7 @@
 	.links {
 		display: flex;
 		gap: 0.5rem;
+		
 	}
 
 	.links > * {
@@ -64,6 +74,8 @@
 		transition: color .25s;
 		font-size: 13px;
 		font-weight: 500;
+		display: flex;
+		align-items: center;
 	}
 
 	.links > *:hover {
@@ -85,7 +97,7 @@
 		display: none;
 	}
 
-	@media screen and (max-width: 1150px) {
+	@media screen and (max-width: 870px) {
 		.links {
 			display: none;
 			width: 100%;
@@ -109,7 +121,7 @@
 			z-index: 1;
 			position: absolute;
 			right: 1rem;
-			top: .35rem;
+			top: .5rem;
 			border: none;
 			border-radius: 10px;
 			height: 30px;
diff --git a/src/lib/Projects.json b/src/lib/Projects.json
new file mode 100644
index 0000000..c8ac703
--- /dev/null
+++ b/src/lib/Projects.json
@@ -0,0 +1,14 @@
+[
+	{
+		"name": "Website",
+		"description": "Our website written in SvelteKit.",
+		"github": "https://github.com/ProjectSegfault/website/",
+		"website": "https://projectsegfau.lt/"
+	},
+	{
+		"name": "Segfautils",
+		"description": "Web utilities (APIs) for Project Segfault, but you could probably use them too.",
+		"github": "https://github.com/ProjectSegfault/Segfautils/",
+		"website": "https://segfautils.projectsegfau.lt/"
+	}
+]
diff --git a/src/lib/app.css b/src/lib/app.css
index 7e59e93..1b97007 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -10,17 +10,23 @@
 	font-display: swap;
 }
 
+@font-face {
+	font-family: Raleway;
+	src: url("/Raleway.ttf");
+	font-display: swap;
+}
+
 html {
 	--primary: #151515;
 	--secondary: #252525;
 	--tertiary: #353535;
-	--accent-primary: #00d4aa;
-	--accent-secondary: #00d4aa;
-	--accent-tertiary: #00d4aa;
+	--accent-primary: #B59BD8;
+	--accent-secondary: #B59BD8;
+	--accent-tertiary: #B59BD8;
 	--text: #ffffffde;
 	--grey: #5454547a;
-	--font-primary: Comfortaa;
-	--font-header: Inter
+	--font-primary: Raleway;
+	--font-header: Raleway;
 
 }
 
@@ -44,4 +50,9 @@ a {
 	text-decoration: underline;
 	color: var(--accent-primary);
 	text-underline-offset: 5px;
+	transition: filter .25s;
 }
+
+a:hover {
+	filter: brightness(125%);
+}
\ No newline at end of file
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7b95817..49c509e 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -12,33 +12,18 @@
 <div class="hero">
     <h1><span>Project</span> <span>Segfault</span></h1>
     
-    <p>Open source development <br /> and hosted services</p>
+    <p>Open source development and hosted services</p>
+    
+    <div class="buttons">
+        <a href="https://instances.projectsegfau.lt/">Explore our services</a>
+        <a href="/projects">Explore our projects</a>
+    </div>
 </div>
 
-<h2>What is this?</h2>
-
-<p>
-    We are 7 humans who have a decently powerful server. What do we do with this server? Host game servers and random assortment of privacy respecting tools like Invidious, Nextcloud, Matrix etc.... and maybe some original works. You'll see eventually!
-</p>
-
-<h2>Tell me more! What do you guys host? Where can I contact you? Can you fix my daughter's iPad?</h2>
-
-<p>
-    We can't fix your daughter's iPad, but there is a navigation bar at the top of the page with links to websites and pages that explain things about us, or contain useful information about our services.
-</p>
-
 <style>
     h1 {
         font-size: 50px;
         font-weight: 800;
-        text-shadow: 0px 2px 2px rgba(78, 78, 78, 0.6);
-    }
-
-    h1 > *:first-child {
-        color: var(--accent-secondary);
-    }
-
-    h1 > *:last-child {
         color: var(--accent-primary);
     }
 
@@ -46,19 +31,41 @@
         display: flex;
         flex-direction: column;
         align-items: center;
-        justify-content: flex-start;
-        text-align: start;
+        justify-content: center;
+        margin-top: 7%;
         font-family: var(--font-header);
     }
 
-    .hero > p {
+    .hero > * {
         margin: 0;
         padding: 0;
+        text-align: center;
     }
 
     .hero > p {
-        font-size: 40px;
-        font-weight: 600;
+        font-size: 30px;
         color: #b6b6b6;
     }
+
+    .buttons {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        gap: 1rem;
+        margin: 1rem;
+    }
+
+    a {
+        text-decoration: none;
+        background-color: var(--accent-primary);
+        padding: 1rem;
+        color: var(--primary);
+        border-radius: 10px;
+        transition: filter .25s;
+    }
+
+    a:hover {
+        filter: brightness(125%);
+    }
 </style>
\ No newline at end of file
diff --git a/src/routes/projects.svelte b/src/routes/projects.svelte
new file mode 100644
index 0000000..5ec0218
--- /dev/null
+++ b/src/routes/projects.svelte
@@ -0,0 +1,106 @@
+<script lang="ts">
+	import projects from "$lib/Projects.json";
+	import IconGitHub from "~icons/simple-icons/github";
+
+	import IconGlobe from "~icons/fa6-solid/globe";
+	import IconEmail from "~icons/fa6-solid/envelope";
+	import IconCamera from "~icons/fa6-solid/camera";
+</script>
+
+<svelte:head>
+	<title>Our projects | Project Segfault</title>
+	<meta name="description" content="Our collection of projects." />
+</svelte:head>
+
+<div class="team">
+	<h1>Our projects</h1>
+	<div class="projects-outer">
+		{#each projects as { name, description, github, website }}
+			<div class="projects-inner">
+				<div class="main">
+					<span>{name}</span>
+
+					{#if description}
+						<p class="description">{description}</p>
+					{/if}
+				</div>
+
+				<div class="socials">
+					{#if github}
+						<a href={github} class="githubcolored"><IconGitHub /></a
+						>
+					{/if}
+
+					{#if website}
+						<a href={website} class="web"><IconGlobe /></a>
+					{/if}
+				</div>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.projects-outer {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		flex-flow: row wrap;
+	}
+
+	.projects-inner {
+		background-color: #252525;
+		border-radius: 10px;
+		padding: 1rem;
+		width: 30em;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.main {
+		flex: 1;
+	}
+
+	span {
+		font-size: 25px;
+		font-weight: bold;
+	}
+
+	a {
+		border: none;
+		border-radius: 10px;
+		padding: 0.5rem;
+		cursor: pointer;
+		font-family: var(--font-primary);
+		color: var(--secondary);
+		text-decoration: none;
+		width: fit-content;
+	}
+
+	.githubcolored {
+		background-color: #333;
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+	}
+
+	.web {
+		background-color: var(--tertiary);
+		color: #fff !important;
+		font-size: 20px;
+		height: 23px;
+		transition: all 0.5s;
+	}
+
+	.web:hover {
+		background-color: var(--accent-tertiary);
+		color: var(--secondary) !important;
+		
+	}
+
+	.socials {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5rem;
+	}
+</style>
diff --git a/src/routes/team.svelte b/src/routes/team.svelte
index adb2646..24a96fd 100644
--- a/src/routes/team.svelte
+++ b/src/routes/team.svelte
@@ -128,15 +128,14 @@
 		height: 23px;
 	}
 
-	.web:hover {
-		background-color: var(--accent-tertiary);
-		color: var(--secondary) !important;
+	.web {
 		transition: all 0.5s;
 	}
 
-	.web:active {
-		background-color: var(--accent-primary);
-		transition: all 0.5s;
+	.web:hover {
+		background-color: var(--accent-tertiary);
+		color: var(--secondary) !important;
+		
 	}
 
 	.socials {
diff --git a/static/Raleway.ttf b/static/Raleway.ttf
new file mode 100644
index 0000000..424fb0e
Binary files /dev/null and b/static/Raleway.ttf differ