diff --git a/docker-compose.yml b/compose.yml
similarity index 62%
rename from docker-compose.yml
rename to compose.yml
index 5e30726..a4edb1a 100644
--- a/docker-compose.yml
+++ b/compose.yml
@@ -1,4 +1,3 @@
-version: "3.9"
 services:
     website:
         container_name: website
@@ -6,6 +5,4 @@ services:
         restart: always
         #build: .
         ports:
-            - "80:80"
-        volumes:
-            - "./data:/usr/src/app/data"
\ No newline at end of file
+            - "80:80"
\ No newline at end of file
diff --git a/package.json b/package.json
index a6a6183..deb0224 100644
--- a/package.json
+++ b/package.json
@@ -4,12 +4,10 @@
 	"scripts": {
 		"dev": "vite",
 		"build": "vite build",
-		"build:docker": "docker build . -t website",
 		"preview": "vite preview",
-		"preview:docker": "pnpm build:docker && docker run --rm --name=website -p 80:80 website",
 		"check": "svelte-check --tsconfig ./tsconfig.json",
 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+		"format": "prettier -w --plugin-search-dir=. ."
 	},
 	"devDependencies": {
 		"@iconify-json/fa6-solid": "^1.1.9",
diff --git a/src/lib/Card/CardInner.svelte b/src/lib/Card/CardInner.svelte
index 9e0db0b..63e4909 100644
--- a/src/lib/Card/CardInner.svelte
+++ b/src/lib/Card/CardInner.svelte
@@ -3,22 +3,26 @@
 	export let position: any;
 	export let description: any;
 	export let icon: any;
-    export let positionStyles: any;
+	export let positionStyles: any;
 </script>
 
-<div class="card-inner">
-	<div class="main">
+<div class="bg-secondary rounded-2 p-4 w-[18rem] sm:w-md flex flex-col">
+	<div class="flex-1 flex flex-row gap-4">
 		{#if icon}
 			<div>
-				<img src={icon} alt="{title} icon" />
+				<img
+					src={icon}
+					class="h-20 rounded-2"
+					alt="{title} icon"
+				/>
 			</div>
 		{/if}
 		<div>
-			<span>
+			<span class="text-2xl font-bold">
 				{title}
 
 				{#if position}
-                    <span>- </span>
+					<span>- </span>
 					<span style={positionStyles}>{position}</span>
 				{/if}
 			</span>
@@ -30,37 +34,3 @@
 	</div>
 	<slot />
 </div>
-
-<style>
-	.card-inner {
-		background-color: var(--secondary);
-		border-radius: 10px;
-		padding: 1rem;
-		width: 30em;
-		display: flex;
-		flex-direction: column;
-	}
-
-	@media screen and (max-width: 555px) {
-		.card-inner {
-			width: 18em;
-		}
-	}
-
-	.main {
-		flex: 1;
-		display: flex;
-		flex-direction: row;
-		gap: 1rem;
-	}
-
-	img {
-		height: 5rem;
-		border-radius: 10px;
-	}
-
-	span {
-		font-size: 25px;
-		font-weight: bold;
-	}
-</style>
diff --git a/src/lib/Card/CardOuter.svelte b/src/lib/Card/CardOuter.svelte
index eb21ff1..36eecd9 100644
--- a/src/lib/Card/CardOuter.svelte
+++ b/src/lib/Card/CardOuter.svelte
@@ -1,12 +1,3 @@
-<div class="card-outer">
+<div class="flex gap-8 flex-row flex-wrap">
 	<slot />
 </div>
-
-<style>
-	div {
-		display: flex;
-		gap: 2rem;
-		flex-direction: row;
-		flex-wrap: wrap;
-	}
-</style>
diff --git a/src/lib/Card/Link.svelte b/src/lib/Card/Link.svelte
index 577bb9e..605aaf1 100644
--- a/src/lib/Card/Link.svelte
+++ b/src/lib/Card/Link.svelte
@@ -4,7 +4,10 @@
 	export { classes as class };
 </script>
 
-<a href={url} class={classes}>
+<a
+	href={url}
+	class="border-none rounded-2 p-2 cursor-pointer font-primary text-secondary decoration-none w-fit text-xl flex items-center {classes}"
+>
 	<slot />
 </a>
 
@@ -14,50 +17,29 @@
 	.picture,
 	.pgp,
 	.link {
-		background-color: var(--alt);
-		color: var(--alt-text);
-		transition: all 0.25s;
+		@apply bg-alt text-alt-text transition-all duration-250;
 	}
 
 	.web:hover,
 	.email:hover,
 	.picture:hover,
 	.pgp:hover {
-		background-color: var(--accent);
-		color: var(--alt);
+		@apply bg-accent text-alt;
 	}
 
 	.matrixcolored {
-		background-color: var(--alt);
-		color: var(--alt-text);
+		@apply bg-alt text-alt-text;
 	}
 
 	.discordcolored {
-		background-color: #5865f2;
-		color: #fff;
+		@apply bg-[#5865f2] text-white;
 	}
 
 	.gitcolored {
-		background-color: #f05032;
-		color: #fff;
+		@apply bg-[#f05032] text-white;
 	}
 
 	.githubcolored {
-		background-color: var(--alt);
-		color: var(--alt-text);
-	}
-
-	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;
-		font-size: 20px;
-		display: flex;
-		align-items: center;
+		@apply bg-alt text-alt-text;
 	}
 </style>
diff --git a/src/lib/Card/LinksOuter.svelte b/src/lib/Card/LinksOuter.svelte
index dcf2e95..71cc61f 100644
--- a/src/lib/Card/LinksOuter.svelte
+++ b/src/lib/Card/LinksOuter.svelte
@@ -1,11 +1,3 @@
-<div>
+<div class="flex flex-row gap-2">
 	<slot />
 </div>
-
-<style>
-	div {
-		display: flex;
-		flex-direction: row;
-		gap: 0.5rem;
-	}
-</style>
diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte
index 8d1ea41..017fed7 100644
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@@ -1,9 +1,7 @@
-<script>
-	import { page } from "$app/stores";
-</script>
-
-<footer>
-	<div class="content">
+<footer class="flex flex-col text-xl sticky top-full">
+	<div
+		class="flex items-center flex-col border-t border-grey p-2 children:(text-text text-sm font-500 text-center)"
+	>
 		<span>© 2021 - present, Project Segfault <a href="/team">team</a></span>
 		<span
 			>Made with <a href="https://kit.svelte.dev/">SvelteKit</a> and
@@ -11,30 +9,9 @@
 			<a href="https://opensource.org/licenses/MIT/">MIT license</a
 			>.</span
 		>
+		<span
+			><a href="https://github.com/ProjectSegfault/website">Source code</a
+			></span
+		>
 	</div>
 </footer>
-
-<style>
-	footer {
-		display: flex;
-		flex-direction: column;
-		font-size: 20px;
-		position: sticky;
-		top: 100vh;
-	}
-
-	div.content {
-		display: flex;
-		align-items: center;
-		flex-direction: column;
-		border-top: 1px solid var(--grey);
-		padding: 0.5rem;
-	}
-
-	div.content > * {
-		color: var(--text);
-		font-size: 13px;
-		font-weight: 500;
-		text-align: center;
-	}
-</style>
diff --git a/src/lib/Form/Captcha.svelte b/src/lib/Form/Captcha.svelte
index 5e35bb0..a17432b 100644
--- a/src/lib/Form/Captcha.svelte
+++ b/src/lib/Form/Captcha.svelte
@@ -4,7 +4,7 @@
 
 	let submit = false;
 
-	let showSubmitButton = () => {
+	const showSubmitButton = () => {
 		submit = !submit;
 	};
 </script>
@@ -18,5 +18,9 @@
 	on:success={showSubmitButton}
 />
 {#if submit}
-	<input type="submit" value="Submit" class="form-button" />
+	<input
+		type="submit"
+		value="Submit"
+		class="form-button"
+	/>
 {/if}
diff --git a/src/lib/Form/Form.svelte b/src/lib/Form/Form.svelte
index 6464af9..23336d2 100644
--- a/src/lib/Form/Form.svelte
+++ b/src/lib/Form/Form.svelte
@@ -4,43 +4,25 @@
 	export let id: string;
 </script>
 
-<form {action} {method} {id}>
+<form
+	{action}
+	{method}
+	{id}
+	class="flex flex-col gap-4 w-fit"
+>
 	<slot />
 </form>
 
 <style>
-	form {
-		display: flex;
-		flex-direction: column;
-		gap: 1rem;
-		width: fit-content;
-	}
-
 	:global(.form-button) {
-		background-color: var(--secondary);
-		border: none;
-		border-radius: 10px;
-		padding: 0.5rem;
-		cursor: pointer;
-		color: var(--text);
-		font-family: var(--font-primary);
-		text-decoration: none;
+		@apply bg-secondary border-none rounded-2 p-2 cursor-pointer text-text font-primary decoration-none;
 	}
 
 	:global(.form-button:not(select):hover) {
-		background-color: var(--accent);
-		text-decoration: none;
-		transition: all 0.5s;
-		color: var(--secondary);
+		@apply bg-accent decoration-none transition-all duration-500 text-secondary;
 	}
 
 	:global(.form-textbox) {
-		background-color: var(--secondary);
-		color: var(--text);
-		border-radius: 10px;
-		border: none;
-		padding: 0.5rem;
-		font-family: var(--font-primary);
-		outline: none;
+		@apply bg-secondary text-text rounded-2 border-none p-2 font-primary outline-none;
 	}
 </style>
diff --git a/src/lib/Form/Meta.svelte b/src/lib/Form/Meta.svelte
index 4d1cbea..43546cc 100644
--- a/src/lib/Form/Meta.svelte
+++ b/src/lib/Form/Meta.svelte
@@ -4,7 +4,9 @@
 	export let selectType: string;
 </script>
 
-<div class="meta">
+<div
+	class="flex items-center flex-row gap-4 children:w-[50%] lt-sm:(flex-col items-start justify-center children:w-[calc(100%-1rem)])"
+>
 	<input
 		type={inputType}
 		name={inputType}
@@ -12,35 +14,18 @@
 		placeholder={inputPlaceholder}
 		required
 	/>
-	<select name={selectType} required class="form-button">
+	<select
+		name={selectType}
+		required
+		class="form-button"
+	>
 		<slot />
 	</select>
 </div>
 
 <style>
-	.meta {
-		display: flex;
-		align-items: center;
-		flex-direction: row;
-		gap: 1rem;
-	}
-
-	.meta > * {
-		width: 50%;
-	}
-
-	@media screen and (max-width: 450px) {
-		.meta {
-			flex-direction: column;
-			align-items: flex-start;
-			justify-content: center;
-		}
-
-		.meta > * {
-			width: calc(100% - 1rem);
-		}
-
-		.meta > *:nth-child(2) {
+	@media screen and (max-width: 640px) {
+		div > :nth-child(2) {
 			width: 100%;
 		}
 	}
diff --git a/src/lib/Form/Note.svelte b/src/lib/Form/Note.svelte
index 2237607..31432c8 100644
--- a/src/lib/Form/Note.svelte
+++ b/src/lib/Form/Note.svelte
@@ -3,17 +3,9 @@
 	export let icon: string;
 </script>
 
-<div class="note">
+<div class="flex items-center gap-2">
 	{#if icon}
 		<div class={icon} />
 	{/if}
 	<b>{content}</b>
 </div>
-
-<style>
-	.note {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-	}
-</style>
diff --git a/src/lib/Form/TextArea.svelte b/src/lib/Form/TextArea.svelte
index 8e7b9fa..7b6de13 100644
--- a/src/lib/Form/TextArea.svelte
+++ b/src/lib/Form/TextArea.svelte
@@ -10,12 +10,6 @@
 	rows="4"
 	cols="25"
 	required
-	class="form-textbox"
+	class="form-textbox resize-y"
 	{placeholder}
 />
-
-<style>
-	textarea {
-		resize: vertical;
-	}
-</style>
diff --git a/src/lib/Hero.svelte b/src/lib/Hero.svelte
index ab885a6..e5a2341 100644
--- a/src/lib/Hero.svelte
+++ b/src/lib/Hero.svelte
@@ -6,38 +6,15 @@
 	export { styles as style };
 </script>
 
-<div class="hero" style="margin-top: {marginTop}%; {styles}">
+<div
+	class="flex flex-col items-center justify-center children:(m-4 p-0 text-center)"
+	style="margin-top: {marginTop}%; {styles}"
+>
 	{#if title}
-		<h1>{title}</h1>
+		<h1 class="text-5xl font-800 text-accent">{title}</h1>
 	{/if}
 	{#if description}
-		<p>{description}</p>
+		<p class="text-3xl text-text">{description}</p>
 	{/if}
 	<slot />
 </div>
-
-<style>
-	.hero {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.hero > * {
-		margin: 0;
-		padding: 0;
-		text-align: center;
-	}
-
-	p {
-		font-size: 30px;
-		color: var(--text);
-	}
-
-	h1 {
-		font-size: 50px;
-		font-weight: 800;
-		color: var(--accent);
-	}
-</style>
diff --git a/src/lib/LinkButton.svelte b/src/lib/LinkButton.svelte
index c1a88db..1bfc8f9 100644
--- a/src/lib/LinkButton.svelte
+++ b/src/lib/LinkButton.svelte
@@ -4,30 +4,16 @@
 	export let title: string;
 	export let bg: string;
 	export let color: string;
+	export let styles: string;
 </script>
 
-<a href={url} style="background-color: {bg}; color: {color};">
+<a
+	href={url}
+	class="decoration-none bg-accent px-3 py-2 text-primary rounded-2 transition-filter hover:brightness-125 flex items-center w-fit gap-2"
+	style="background-color: {bg}; color: {color}; {styles}"
+>
 	{#if icon}
 		<div class={icon} />
 	{/if}
 	{title}
 </a>
-
-<style>
-	a {
-		text-decoration: none;
-		background-color: var(--accent);
-		padding: 8px 1em 8px 1em;
-		color: var(--primary);
-		border-radius: 10px;
-		transition: filter 0.25s;
-		display: flex;
-		align-items: center;
-		width: fit-content;
-		gap: 4px;
-	}
-
-	a:hover {
-		filter: brightness(125%);
-	}
-</style>
diff --git a/src/lib/MDsvexLayout.svelte b/src/lib/MDsvexLayout.svelte
index 294c22b..4230469 100644
--- a/src/lib/MDsvexLayout.svelte
+++ b/src/lib/MDsvexLayout.svelte
@@ -1,4 +1,5 @@
-<script lang="ts">
+<script>
+	//@ts-ignoreS
 	export let title;
 	export let description;
 	export let separator;
diff --git a/src/lib/Nav.svelte b/src/lib/Nav.svelte
index ba3d86a..d294dfc 100644
--- a/src/lib/Nav.svelte
+++ b/src/lib/Nav.svelte
@@ -4,186 +4,150 @@
 
 	$: currentPage = $page.url.pathname;
 
+	let showMenuButton = false;
+
+	let listStyles = "";
+
+	let innerWidth: number = 0;
+
+	$: showMenuButton = innerWidth < 1030;
+
+	let menuOpen = false;
+
+	$: menuOpen = innerWidth > 1030;
+
+	let showThemeToggle: boolean = true;
+
+	const toggleMenu = () => {
+		menuOpen = !menuOpen;
+	};
+
+	const handleNavigation = () => {
+		if (showMenuButton) {
+			menuOpen = false;
+		} else {
+			menuOpen = true;
+		}
+	};
+
 	const menus = [
 		{ name: "Instances", url: "/instances" },
 		{ name: "Donate", url: "/donate" },
-		{ name: "FAQ", url: "/faq" },
 		{ name: "Contact us", url: "/contact" },
 		{ name: "Our team", url: "/team" },
 		{ name: "Timeline", url: "/timeline" },
-		{ name: "Blog", url: "https://blog.projectsegfau.lt/" },
+		{ name: "Blog", url: "/blog" },
 		{ name: "Legal", url: "/legal" },
-		{ name: "Status", url: "https://status.projectsegfau.lt/" }
+		{
+			name: "Status",
+			url: "https://status.projectsegfau.lt/",
+			external: true
+		}
 	];
+
+	$: if (typeof Window === "undefined") {
+		menuOpen = true;
+		showMenuButton = false;
+		showThemeToggle = false;
+		listStyles = "list-styles";
+	}
 </script>
 
-<nav>
-	<a class="brand" href="/">
-		<img src="/logo.png" alt="Project Segfault logo" />
-		<span>Project Segfault</span>
-	</a>
+<svelte:window bind:innerWidth />
 
-	<input type="checkbox" id="toggle-menu" />
-	<label class="menu-icon" for="toggle-menu">
-		<div id="menu-icon" class="i-fa6-solid:bars" />
-	</label>
-
-	<div class="links">
-		{#each menus as { url, name }}
-			<a
-				data-sveltekit-preload-data
-				class:active={url !== "/"
-					? currentPage.match(url)
-					: url === currentPage}
-				href={url}>{name}</a
-			>
-		{/each}
+<nav
+	class="bg-primary border-b-1 border-b-grey flex p-2 flex-col justify-between nav:(flex-row items-center)"
+>
+	<div class="flex flex-row items-center justify-between">
 		<a
-			href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
-			class="icon"
+			class="flex items-center decoration-none text-text gap-2 transition-opacity duration-250 hover:opacity-80"
+			href="/"
 		>
-			<div class="i-simple-icons:matrix" />
-			<span>Matrix</span>
+			<img
+				src="/logo.png"
+				alt="Project Segfault logo"
+				class="h-7"
+			/>
+			<span>Project Segfault</span>
 		</a>
-		<a href="https://github.com/ProjectSegfault/" class="icon">
-			<div class="i-simple-icons:github" />
-			<span>GitHub</span>
-		</a>
-		<div class="theme-toggle icon">
-			<ThemeToggle />
-		</div>
+
+		{#if showMenuButton}
+			<button
+				on:click={toggleMenu}
+				class="i-fa6-solid:bars cursor-pointer mr-2"
+			/>
+		{/if}
 	</div>
+
+	{#if menuOpen}
+		<div
+			class="{listStyles} flex flex-col pt-2 nav:(flex-row pt-0) gap-2 links"
+		>
+			{#each menus as { url, name, external }}
+				<a
+					data-sveltekit-preload-data
+					class:active={url !== "/"
+						? currentPage.match(url)
+						: url === currentPage}
+					href={url}
+					on:click={handleNavigation}
+					>{#if external}
+						<div
+							class="i-fa6-solid:arrow-up-right-from-square mr-2"
+						/>
+					{/if}
+					{name}
+				</a>
+			{/each}
+			<a
+				href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
+				class="icon"
+			>
+				<div class="i-simple-icons:matrix" />
+				<span>Matrix</span>
+			</a>
+			<a
+				href="https://github.com/ProjectSegfault/"
+				class="icon"
+			>
+				<div class="i-simple-icons:github" />
+				<span>GitHub</span>
+			</a>
+			{#if showThemeToggle}
+				<div class="icon">
+					<ThemeToggle />
+				</div>
+			{/if}
+		</div>
+	{/if}
 </nav>
 
-<noscript>
-	<style>
-		.theme-toggle {
-			display: none !important;
-		}
-	</style>
-</noscript>
-
 <style>
-	nav {
-		background-color: var(--primary);
-		border-bottom: 1px solid var(--grey);
-		display: flex;
-		padding: 0.5rem;
-		flex-direction: row;
-		align-items: center;
-		justify-content: space-between;
-	}
-	a.brand {
-		display: flex;
-		align-items: center;
-		text-decoration: none;
-		color: var(--text);
-		gap: 8px;
-		transition: opacity 0.25s;
-	}
-
 	a.active {
-		color: var(--accent);
-	}
-
-	a.brand:hover {
-		opacity: 0.6;
-	}
-
-	.links {
-		display: flex;
-		gap: 0.5rem;
+		@apply text-accent;
 	}
 
 	.links > * {
-		padding: 0.5rem;
-		cursor: pointer;
-		color: var(--text);
-		text-decoration: none;
-		transition: color 0.25s;
-		font-size: 13px;
-		font-weight: 500;
-		display: flex;
-		align-items: center;
-	}
-
-	.links > *:hover {
-		text-decoration: none;
-		color: var(--accent);
-	}
-
-	img {
-		height: 30px;
-		border-radius: 50%;
-	}
-
-	.menu-icon {
-		cursor: pointer;
-		display: none;
-	}
-
-	#toggle-menu {
-		display: none;
+		@apply p-2 cursor-pointer text-text decoration-none transition-color duration-25 text-sm font-500 flex items-center hover\:text-accent;
 	}
 
 	.icon > span {
-		display: none;
+		@apply flex nav\:hidden;
 	}
 
-	@media screen and (max-width: 900px) {
-		.links {
-			display: none;
-			width: 100%;
-			padding-top: 12px;
-		}
+	.icon {
+		@apply flex flex-row items-center gap-2;
+	}
 
-		nav {
+	:global(.list-styles) {
+		@apply grid grid-cols-2 gap-2 w-fit links;
+	}
+
+	@media screen and (min-width: 1030px) {
+		:global(.list-styles) {
 			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
-		}
-
-		.links a {
-			display: block;
-		}
-
-		.menu-icon {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			z-index: 1;
-			position: absolute;
-			right: 1rem;
-			top: 0.5rem;
-			border: none;
-			border-radius: 10px;
-			height: 30px;
-			width: 30px;
-			cursor: pointer;
-			line-height: 1;
-		}
-
-		#menu-icon {
-			display: flex;
-			align-items: center;
-			color: var(--text);
-		}
-
-		#toggle-menu:checked ~ .links {
-			display: flex;
-			flex-direction: column;
-			gap: 1rem;
-		}
-
-		.icon > span {
-			display: block;
-		}
-
-		.icon {
-			display: flex !important;
-			align-items: center;
 			flex-direction: row;
-			gap: 0.5rem;
+			padding-top: 0;
 		}
 	}
 </style>
diff --git a/src/lib/Team.json b/src/lib/Team.json
index c1717e9..fb048e2 100644
--- a/src/lib/Team.json
+++ b/src/lib/Team.json
@@ -1,9 +1,15 @@
 [
+	{
+		"name": "akisblack",
+		"description": "I am a soydev maintaining the website and api.",
+		"position": "Web dev",
+		"website": "https://akisblack.github.io/"
+	},
 	{
 		"name": "Midou",
+		"description": "A random person with an obsession to online cat pics, also happens to be the sysadmin of the project",
 		"matrix": "https://matrix.to/#/@midou:projectsegfau.lt/",
 		"position": "Sysadmin",
-		"description": "I don't need to describe myself.",
 		"git": "https://github.com/Midou36O/",
 		"website": "https://midou36o.github.io/",
 		"email": "midou@projectsegfau.lt",
@@ -22,12 +28,5 @@
 		"position": "Sysadmin",
 		"description": "\"I am openssl_rand, a system administrator of the project Segfau.lt.\" - GitHub Copilot",
 		"email": "mailto:openssl_rand@projectsegfau.lt"
-	},
-	{
-		"name": "stephenvk",
-		"matrix": "https://matrix.to/#/@stephenvk:projectsegfau.lt",
-		"position": "Backup host",
-		"description": "I am Stephenvk and I host a server that takes our backups.",
-		"website": "https://stephenvk.xyz"
 	}
 ]
diff --git a/src/lib/ThemeToggle.svelte b/src/lib/ThemeToggle.svelte
index 90c564c..3b2db91 100644
--- a/src/lib/ThemeToggle.svelte
+++ b/src/lib/ThemeToggle.svelte
@@ -17,17 +17,8 @@
 
 <button
 	on:click={toggle}
-	class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-[var(--font-primary)] color-[var(--text)]"
+	class="cursor-pointer flex items-center py-1 px-0 bg-transparent border-0 font-primary color-text"
 >
 	<div class="i-fa6-solid:{theme === 'dark' ? 'sun' : 'moon'}" />
-	<span class="ml-2">Toggle theme</span>
+	<span class="ml-2 nav:(hidden ml-1)">Toggle theme</span>
 </button>
-
-<style>
-	@media screen and (min-width: 900px) {
-		span {
-			display: none;
-			margin-left: 0.25rem;
-		}
-	}
-</style>
diff --git a/src/lib/app.css b/src/lib/app.css
index bade58c..62246ed 100644
--- a/src/lib/app.css
+++ b/src/lib/app.css
@@ -1,14 +1,13 @@
 @font-face {
-	font-family: Raleway;
-	src: url("/Raleway.ttf");
+	font-family: "JetBrains Mono";
+	src: url("/JetBrainsMono.ttf");
 	font-display: swap;
 }
 
 html {
 	--accent: #00a584;
 	--accent-translucent: #00a58498;
-	--font-primary: Raleway;
-	--font-header: Raleway;
+	--font-primary: "JetBrains Mono", monospace;
 	--primary: #151515;
 	--secondary: #252525;
 	--tertiary: #353535;
@@ -20,44 +19,32 @@ html {
 }
 
 html.light {
-	--primary: #dddddd;
-	--secondary: #f9f3f3;
+	--primary: #ffffff;
+	--secondary: #eeeeee;
 	--tertiary: #939393;
 	--text: #444444;
-	--grey: #444444;
+	--grey: #cecece;
 	--alt: #ddd;
 	--alt-text: #333;
 	color-scheme: light;
 }
 
 body {
-	font-family: var(--font-primary);
-	background-color: var(--primary);
-	color: var(--text);
-	margin: 0;
-	display: flex;
-	flex-direction: column;
-	position: relative;
-	min-height: 100vh;
-	line-height: 1.625;
-	transition: all 0.25s;
+	@apply font-primary bg-primary text-text m-0 flex flex-col relative min-h-screen leading-relaxed transition-all duration-250;
 }
 
 ::selection {
-	background-color: var(--accent-translucent);
+	@apply bg-accentTranslucent;
 }
 
 main {
-	padding: 1rem;
+	@apply p-4;
 }
 
 a {
-	text-decoration: underline;
-	color: var(--accent);
-	text-underline-offset: 5px;
-	transition: filter 0.25s;
+	@apply underline text-accent underline-offset-5 transition-filter duration-250;
 }
 
 a:hover {
-	filter: brightness(125%);
+	@apply brightness-125;
 }
diff --git a/src/routes/+error.svelte b/src/routes/+error.svelte
new file mode 100644
index 0000000..50d3919
--- /dev/null
+++ b/src/routes/+error.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+</script>
+
+<h1>{$page.status}: {$page.error?.message}</h1>
+<span class="italic">The fetch request to the API probably failed, please contact us on Matrix.</span>
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 332fb17..7dc9329 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -30,7 +30,8 @@
 	<script
 		defer
 		data-domain="projectsegfau.lt"
-		src="https://analytics.projectsegfau.lt/js/plausible.js"></script>
+		src="https://analytics.projectsegfau.lt/js/plausible.js"
+	></script>
 </svelte:head>
 
 <Nav />
diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts
index ec1236b..ede1e7e 100644
--- a/src/routes/+page.server.ts
+++ b/src/routes/+page.server.ts
@@ -3,10 +3,16 @@ import { compile } from "mdsvex";
 import { env } from "$env/dynamic/private";
 
 export const load: PageServerLoad = async () => {
-    return {
-        state: await fetch(env.VITE_API_URL + "/api/v1/state/announcements").then((res) => res.json()),
-        announcements: await fetch(env.VITE_API_URL + "/api/v1/announcements").then((res) => res.json()),
-        content: await fetch(env.VITE_API_URL + "/api/v1/announcements").then((res) => res.json()).then((res) => compile(res.title)).then((res) => res.code)
-    }
-}
-
+	return {
+		state: await fetch(
+			env.VITE_API_URL + "/api/v1/state/announcements"
+		).then((res) => res.json()).catch(() => ({})),
+		announcements: await fetch(
+			env.VITE_API_URL + "/api/v1/announcements"
+		).then((res) => res.json()).catch(() => ({})),
+		content: await fetch(env.VITE_API_URL + "/api/v1/announcements")
+			.then((res) => res.json())
+			.then((res) => compile(res.title))
+			.then((res) => res?.code).catch(() => ({})),
+	};
+};
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 927945c..ac74158 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,25 +2,27 @@
 	import SvelteSeo from "svelte-seo";
 	import Hero from "$lib/Hero.svelte";
 	import LinkButton from "$lib/LinkButton.svelte";
-    import dayjs from "dayjs";
+	import Announcements from "./Announcements.svelte";
 	import type { PageData } from "./$types";
 
-    export let data: PageData;
-
-    let announcements = data.announcements;
+	export let data: PageData;
 
 	let description: string = "Open source development and hosted services.";
-
 </script>
 
-<SvelteSeo title="Home | Project Segfault" {description} />
+<SvelteSeo
+	title="Home | Project Segfault"
+	{description}
+/>
 
 <Hero
 	title="Project Segfault"
 	{description}
-	marginTop=7
+	marginTop="4"
 >
-	<div class="buttons">
+	<div
+		class="flex flex-col sm:flex-row justify-center items-center gap-4 m-4"
+	>
 		<LinkButton
 			url="/instances"
 			title="Explore our instances"
@@ -36,117 +38,4 @@
 	</div>
 </Hero>
 
-{#if data.state.enabled}
-    {#if !announcements.error}
-        <div class="announcements">
-            <div class="announcement-container">
-                <div class="announcement">
-                    <div class="flex gap-4 flex-col sm:flex-row border-b-2 p-2 pt-0">
-                        {#if announcements.severity === "info"}
-                            <div class="flex items-center gap-2">
-                                <div class="i-fa6-solid:circle-info" />
-                                <span>Info</span>
-                            </div>
-                        {:else}
-                            <div class="flex items-center gap-2">
-                                <div class="i-fa6-solid:triangle-exclamation" />
-                                <span>Attention</span>
-                            </div>
-                        {/if}
-                        <span class="flex items-center gap-2">
-                            <div class="i-fa6-solid:user" />
-                            {announcements.author}
-                        </span>
-                        <span class="flex items-center gap-2">
-                            <div class="i-fa6-solid:calendar" />
-                            {dayjs
-                                .unix(announcements.created)
-                                .format("DD/MM/YYYY HH:mm")}
-                        </span>
-                    </div>
-
-
-                    <div class="title">
-                        <div class="text-xl font-semibold font-[var(--font-primary)]">{@html data.content}</div>
-                    </div>
-
-                    {#if announcements.link}
-                        <div class="read-more">
-                            <a href={announcements.link}>Read more...</a>
-                        </div>
-                    {/if}
-                </div>
-            </div>
-        </div>
-
-        {#if announcements.severity === "info"}
-            <style>
-                .announcement {
-                    background-color: #8caaee;
-                }
-            </style>
-        {:else if announcements.severity === "low"}
-            <style>
-                .announcement {
-                    background-color: #a6d189;
-                }
-            </style>
-        {:else if announcements.severity === "medium"}
-            <style>
-                .announcement {
-                    background-color: #e5c890;
-                }
-            </style>
-        {:else if announcements.severity === "high"}
-            <style>
-                .announcement {
-                    background-color: #e78284;
-                }
-            </style>
-        {/if}
-
-        <style>
-            .announcement-container {
-                display: flex;
-                justify-content: center;
-                margin-top: 4rem;
-            }
-
-            .announcement {
-                color: #252525 !important;
-                padding: 1.5rem;
-                border-radius: 10px;
-                width: fit-content;
-                display: flex;
-                flex-direction: column;
-                gap: 1rem;
-            }
-
-            .announcement a {
-                color: #252525;
-            }
-        </style>
-    {/if}
-{:else}
-    <div class="flex items-center gap-1 text-center justify-center mt-16">
-        <div class="i-fa6-solid:circle-info" />
-        <span>Announcements are currently disabled.</span>
-    </div>
-{/if}
-
-<style>
-	.buttons {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		gap: 1rem;
-		margin: 1rem;
-	}
-
-	@media screen and (max-width: 452px) {
-		.buttons {
-			flex-direction: column;
-		}
-	}
-</style>
+<Announcements {data} />
diff --git a/src/routes/Announcements.svelte b/src/routes/Announcements.svelte
new file mode 100644
index 0000000..3a55539
--- /dev/null
+++ b/src/routes/Announcements.svelte
@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+
+	export let data: PageData;
+
+	let announcements = data.announcements;
+	import dayjs from "dayjs";
+</script>
+
+{#if data.state.enabled}
+	{#if !announcements.error}
+		<div class="announcements">
+			<div class="flex justify-center mt-16">
+				<div
+					class="announcement !text-[#252525] p-6 rounded-2 w-fit flex flex-col gap-4"
+				>
+					<div
+						class="flex gap-4 flex-col sm:flex-row border-b-2 p-2 pt-0"
+					>
+						{#if announcements.severity === "info"}
+							<div class="flex items-center gap-2">
+								<div class="i-fa6-solid:circle-info" />
+								<span>Info</span>
+							</div>
+						{:else if announcements.severity === "low"}
+							<div class="flex items-center gap-2">
+								<div class="i-fa6-solid:check" />
+								<span>Resolved</span>
+							</div>
+						{:else if announcements.severity === "medium"}
+							<div class="flex items-center gap-2">
+								<div class="i-fa6-solid:triangle-exclamation" />
+								<span>Attention</span>
+							</div>
+						{:else if announcements.severity === "high"}
+							<div class="flex items-center gap-2">
+								<div class="i-fa6-solid:ban" />
+								<span>Attention</span>
+							</div>
+						{/if}
+						<span class="flex items-center gap-2">
+							<div class="i-fa6-solid:user" />
+							{announcements.author}
+						</span>
+						<span class="flex items-center gap-2">
+							<div class="i-fa6-solid:calendar" />
+							{dayjs
+								.unix(announcements.created)
+								.format("DD/MM/YYYY HH:mm")}
+						</span>
+					</div>
+
+					<div class="title">
+						<div class="text-xl font-semibold font-primary">
+							{@html data.content}
+						</div>
+					</div>
+
+					{#if announcements.link}
+						<div class="read-more">
+							<a
+								href={announcements.link}
+								class="!text-[#252525]">Read more...</a
+							>
+						</div>
+					{/if}
+				</div>
+			</div>
+		</div>
+
+		{#if announcements.severity === "info"}
+			<style>
+				.announcement {
+					background-color: #8caaee;
+				}
+			</style>
+		{:else if announcements.severity === "low"}
+			<style>
+				.announcement {
+					background-color: #a6d189;
+				}
+			</style>
+		{:else if announcements.severity === "medium"}
+			<style>
+				.announcement {
+					background-color: #e5c890;
+				}
+			</style>
+		{:else if announcements.severity === "high"}
+			<style>
+				.announcement {
+					background-color: #e78284;
+				}
+			</style>
+		{/if}
+	{/if}
+{:else}
+	<div class="flex items-center gap-2 text-center justify-center mt-16">
+		<div class="i-fa6-solid:circle-info" />
+		<span>Announcements are currently disabled.</span>
+	</div>
+{/if}
diff --git a/src/routes/blog/+layout.server.ts b/src/routes/blog/+layout.server.ts
new file mode 100644
index 0000000..50a49ff
--- /dev/null
+++ b/src/routes/blog/+layout.server.ts
@@ -0,0 +1,10 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+
+export const load: PageServerLoad = async () => {
+	return {
+		state: await fetch(env.VITE_API_URL + "/api/v1/state/blog").then(
+			(res) => res.json()
+		).catch(() => ({}))
+	};
+};
diff --git a/src/routes/blog/+layout.svelte b/src/routes/blog/+layout.svelte
new file mode 100644
index 0000000..d50f252
--- /dev/null
+++ b/src/routes/blog/+layout.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+
+	export let data: PageData
+</script>
+
+{#if data.state.enabled}
+	<slot />
+{:else}
+	<div class="flex items-center gap-2 text-center justify-center mt-16">
+		<div class="i-fa6-solid:circle-info" />
+		<span>The blog is currently disabled.</span>
+	</div>
+{/if}
\ No newline at end of file
diff --git a/src/routes/blog/+page.server.ts b/src/routes/blog/+page.server.ts
new file mode 100644
index 0000000..53ee701
--- /dev/null
+++ b/src/routes/blog/+page.server.ts
@@ -0,0 +1,10 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+
+export const load: PageServerLoad = async () => {
+	return {
+		posts: await fetch(env.VITE_API_URL + "/api/v1/blog").then(
+			(res) => res.json()
+		).catch(() => ({}))
+	};
+};
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
new file mode 100644
index 0000000..85efa1c
--- /dev/null
+++ b/src/routes/blog/+page.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import dayjs from "dayjs";
+	import Hero from "$lib/Hero.svelte";
+	import LinkButton from "$lib/LinkButton.svelte";
+	import type { PageData } from "./$types";
+	export let data: PageData;
+</script>
+
+<svelte:head>
+	<title>Timeline | Project Segfault</title>
+	<meta
+		name="description"
+		content="Timeline of Project Segfault's history."
+	/>
+</svelte:head>
+
+<Hero marginTop="4">
+	<h1 class="text-5xl font-800">
+		<span class="text-accent">Project Segfault</span> blog
+	</h1>
+	<div
+		class="flex flex-col sm:flex-row justify-center items-center gap-4 m-4"
+	>
+		<LinkButton
+			url="/blog/tags"
+			title="Tags"
+			icon="i-fa6-solid:tags"
+		/>
+		<LinkButton
+			url="/blog/authors"
+			title="Authors"
+			icon="i-fa6-solid:user"
+		/>
+	</div>
+</Hero>
+
+<div class="flex flex-col gap-10 mt-16">
+	{#each data.posts as post}
+		<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+			<span class="text-xl font-bold">{post.title}</span>
+			<div class="flex flex-col md:(flex-row gap-4) gap-2">
+				{#if post.tags.length > 0}
+					<div class="flex flex-row items-center gap-2">
+						<div class="i-fa6-solid:tags" />
+						{#each post.tags as tag}
+							<a href="/blog/tags/{tag}" class="no-underline">{tag}</a>
+						{/each}
+					</div>
+				{/if}
+				<a href="/blog/authors/{post.author}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{post.author}</a>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
+					.unix(post.created)
+					.format("ddd, DD MMM YYYY HH:mm")}</span>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.words} words</span>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.readingTime} minute read</span>
+			</div>
+			<span>{post.content.split(" ").slice(0, 20).join(" ") + "..."}</span>
+			<a href="/blog/{post.title}">Read more...</a>
+		</div>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/[title]/+page.server.ts b/src/routes/blog/[title]/+page.server.ts
new file mode 100644
index 0000000..79aed18
--- /dev/null
+++ b/src/routes/blog/[title]/+page.server.ts
@@ -0,0 +1,16 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+import { compile } from "mdsvex";
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		post: await fetch(env.VITE_API_URL + "/api/v1/blog/" + params.title).then(
+			(res) => res.json()
+		).catch(() => ({})),
+		content: await fetch(env.VITE_API_URL + "/api/v1/blog/" + params.title)
+			.then((res) => res.json())
+			.then((res) => compile(res.content))
+			.then((res) => res?.code)
+			.catch(() => ({})),
+	};
+};
diff --git a/src/routes/blog/[title]/+page.svelte b/src/routes/blog/[title]/+page.svelte
new file mode 100644
index 0000000..f9406e7
--- /dev/null
+++ b/src/routes/blog/[title]/+page.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import dayjs from "dayjs";
+	import type { PageData } from "./$types";
+	export let data: PageData;
+</script>
+
+<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+	<span class="text-xl font-bold flex flex-row items-center gap-2"><a href="/blog" class="flex flex-row items-center gap-2"><div class="i-fa6-solid:arrow-left" /> Back</a> - {data.post.title}</span>
+	<div class="flex flex-col md:(flex-row gap-4) gap-2">
+		{#if data.post.tags.length > 0}
+			<div class="flex flex-row items-center gap-2">
+				<div class="i-fa6-solid:tags" />
+				{#each data.post.tags as tag}
+					<a href="/blog/tags/{tag}" class="no-underline">{tag}</a>
+				{/each}
+			</div>
+		{/if}
+		<a href="/blog/authors/{data.post.author}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{data.post.author}</a>
+		<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
+			.unix(data.post.created)
+			.format("ddd, DD MMM YYYY HH:mm")}</span>
+		<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {data.post.words} words</span>
+		<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {data.post.readingTime} minute read</span>
+	</div>
+	{@html data.content}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/authors/+page.server.ts b/src/routes/blog/authors/+page.server.ts
new file mode 100644
index 0000000..b939735
--- /dev/null
+++ b/src/routes/blog/authors/+page.server.ts
@@ -0,0 +1,10 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		authors: await fetch(env.VITE_API_URL + "/api/v1/blog/authors").then(
+			(res) => res.json()
+		).catch(() => ({})),
+	};
+};
diff --git a/src/routes/blog/authors/+page.svelte b/src/routes/blog/authors/+page.svelte
new file mode 100644
index 0000000..4001b80
--- /dev/null
+++ b/src/routes/blog/authors/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	export let data: PageData;
+</script>
+
+<h1>Blog authors</h1>
+
+<div class="flex flex-col gap-4">
+	{#each data.authors as author}
+		<a href="/blog/authors/{author}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{author}</a>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/authors/[author]/+page.server.ts b/src/routes/blog/authors/[author]/+page.server.ts
new file mode 100644
index 0000000..1d105f6
--- /dev/null
+++ b/src/routes/blog/authors/[author]/+page.server.ts
@@ -0,0 +1,11 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		posts: await fetch(env.VITE_API_URL + "/api/v1/blog/authors/" + params.author).then(
+			(res) => res.json()
+		).catch(() => ({})),
+		authorName: params.author
+	};
+};
diff --git a/src/routes/blog/authors/[author]/+page.svelte b/src/routes/blog/authors/[author]/+page.svelte
new file mode 100644
index 0000000..183ee3e
--- /dev/null
+++ b/src/routes/blog/authors/[author]/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import dayjs from "dayjs";
+	import type { PageData } from "./$types";
+	export let data: PageData;
+</script>
+
+<h1>Blog author {data.authorName}</h1>
+
+<div class="flex flex-col gap-10">
+	{#each data.posts as post}
+		<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+			<span class="text-xl font-bold">{post.title}</span>
+			<div class="flex flex-col md:(flex-row gap-4) gap-2">
+				{#if post.tags.length > 0}
+					<div class="flex flex-row items-center gap-2">
+						<div class="i-fa6-solid:tags" />
+						{#each post.tags as tag}
+							<a href="/blog/tags/{tag}" class="no-underline">{tag}</a>
+						{/each}
+					</div>
+				{/if}
+				<a href="/blog/authors/{post.author}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{post.author}</a>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
+					.unix(post.created)
+					.format("ddd, DD MMM YYYY HH:mm")}</span>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.words} words</span>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.readingTime} minute read</span>
+			</div>
+			<span>{post.content.split(" ").slice(0, 20).join(" ") + "..."}</span>
+			<a href="/blog/{post.title}">Read more...</a>
+		</div>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/tags/+page.server.ts b/src/routes/blog/tags/+page.server.ts
new file mode 100644
index 0000000..717d3a6
--- /dev/null
+++ b/src/routes/blog/tags/+page.server.ts
@@ -0,0 +1,10 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		tags: await fetch(env.VITE_API_URL + "/api/v1/blog/tags").then(
+			(res) => res.json()
+		).catch(() => ({})),
+	};
+};
diff --git a/src/routes/blog/tags/+page.svelte b/src/routes/blog/tags/+page.svelte
new file mode 100644
index 0000000..022dd62
--- /dev/null
+++ b/src/routes/blog/tags/+page.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import type { PageData } from "./$types";
+	export let data: PageData;
+</script>
+
+<h1>Blog tags</h1>
+
+<div class="flex flex-col gap-4">
+	{#each data.tags as tag}
+		<a href="/blog/tags/{tag}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{tag}</a>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/blog/tags/[tag]/+page.server.ts b/src/routes/blog/tags/[tag]/+page.server.ts
new file mode 100644
index 0000000..3d183da
--- /dev/null
+++ b/src/routes/blog/tags/[tag]/+page.server.ts
@@ -0,0 +1,11 @@
+import type { PageServerLoad } from "./$types";
+import { env } from "$env/dynamic/private";
+
+export const load: PageServerLoad = async ({ params }) => {
+	return {
+		posts: await fetch(env.VITE_API_URL + "/api/v1/blog/tags/" + params.tag).then(
+			(res) => res.json()
+		).catch(() => ({})),
+		tagName: params.tag
+	};
+};
\ No newline at end of file
diff --git a/src/routes/blog/tags/[tag]/+page.svelte b/src/routes/blog/tags/[tag]/+page.svelte
new file mode 100644
index 0000000..4b970ba
--- /dev/null
+++ b/src/routes/blog/tags/[tag]/+page.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import dayjs from "dayjs";
+	import type { PageData } from "./$types";
+	export let data: PageData;
+</script>
+
+<h1>Blog tag {data.tagName}</h1>
+
+<div class="flex flex-col gap-10">
+	{#each data.posts as post}
+		<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
+			<span class="text-xl font-bold">{post.title}</span>
+			<div class="flex flex-col md:(flex-row gap-4) gap-2">
+				{#if post.tags.length > 0}
+					<div class="flex flex-row items-center gap-2">
+						<div class="i-fa6-solid:tags" />
+						{#each post.tags as tag}
+							<a href="/blog/tags/{tag}" class="no-underline">{tag}</a>
+						{/each}
+					</div>
+				{/if}
+				<a href="/blog/authors/{post.author}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{post.author}</a>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
+					.unix(post.created)
+					.format("ddd, DD MMM YYYY HH:mm")}</span>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.words} words</span>
+				<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.readingTime} minute read</span>
+			</div>
+			<span>{post.content.split(" ").slice(0, 20).join(" ") + "..."}</span>
+			<a href="/blog/{post.title}">Read more...</a>
+		</div>
+	{/each}
+</div>
\ No newline at end of file
diff --git a/src/routes/contact/+page.server.ts b/src/routes/contact/+page.server.ts
index 0b36674..d20ee47 100644
--- a/src/routes/contact/+page.server.ts
+++ b/src/routes/contact/+page.server.ts
@@ -2,8 +2,10 @@ import type { PageServerLoad } from "../$types";
 import { env } from "$env/dynamic/private";
 
 export const load: PageServerLoad = async () => {
-    return {
-        state: await fetch(env.VITE_API_URL + "/api/v1/state/form").then((res) => res.json()),
-        apiUrl: env.VITE_API_URL
-    }
-}
\ No newline at end of file
+	return {
+		state: await fetch(env.VITE_API_URL + "/api/v1/state/form").then(
+			(res) => res.json()
+		).catch(() => ({})),
+		apiUrl: env.VITE_API_URL
+	};
+};
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index a1d9d14..eb9f785 100644
--- a/src/routes/contact/+page.svelte
+++ b/src/routes/contact/+page.svelte
@@ -1,60 +1,65 @@
 <script lang="ts">
-    import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
+	import { Note, Captcha, Form, Meta, TextArea } from "$lib/Form";
 	import type { PageData } from "./$types";
 
-    export let data: PageData;
+	export let data: PageData;
 
-    let title = "Contact us | Project Segfault";
-    let description = "Do you want to contact us? (you don't)";
+	let title = "Contact us | Project Segfault";
 </script>
 
 <svelte:head>
-    <title>{title}</title>
-    <meta name="description" content={description}>
+	<title>{title}</title>
 </svelte:head>
 
 <h1>Contact us</h1>
 
-<span>{description}</span>
-
 <div class="contact-form">
-    <h2>Contact form</h2>
-    {#if data.state.enabled === true}
-        <Form
-            action="{data.apiUrl}/api/v1/form"
-            method="POST"
-            id="contact-form"
-        >
-            <Note
-                content="Your IP will be logged for anti-abuse measures."
-                icon="i-fa6-solid:lock"
-            />
-            <Meta
-                inputType="email"
-                inputPlaceholder="Your email"
-                selectType="commentType"
-            >
-                <option value="" selected disabled
-                    >Select a type of comment</option
-                >
-                <option value="Feedback">Feedback</option>
-                <option value="Suggestion">Suggestion</option>
-                <option value="Question">Question</option>
-                <option value="Bug">Bug</option>
-            </Meta>
-            <TextArea id="comment" name="message" placeholder="Your message" />
-            <Captcha />
-        </Form>
-    {:else}
-        <div class="flex items-center gap-1">
-            <div class="i-fa6-solid:circle-info" />
-            <span>The contact form is currently disabled.</span>
-        </div>
-    {/if}
+	<h2>Contact form</h2>
+	{#if data.state.enabled === true}
+		<Form
+			action="{data.apiUrl}/api/v1/form"
+			method="POST"
+			id="contact-form"
+		>
+			<Note
+				content="Your IP will be logged for anti-abuse measures."
+				icon="i-fa6-solid:lock"
+			/>
+			<Meta
+				inputType="email"
+				inputPlaceholder="Your email"
+				selectType="commentType"
+			>
+				<option
+					value=""
+					selected
+					disabled>Select a type of comment</option
+				>
+				<option value="Feedback">Feedback</option>
+				<option value="Suggestion">Suggestion</option>
+				<option value="Question">Question</option>
+				<option value="Bug">Bug</option>
+			</Meta>
+			<TextArea
+				id="comment"
+				name="message"
+				placeholder="Your message"
+			/>
+			<Captcha />
+		</Form>
+	{:else}
+		<div class="flex items-center gap-2">
+			<div class="i-fa6-solid:circle-info" />
+			<span>The contact form is currently disabled.</span>
+		</div>
+	{/if}
 </div>
 
 <noscript>
-	<Note content="The contact form does not work without JavaScript enabled." icon="i-fa6-solid:circle-info" />
+	<Note
+		content="The contact form does not work without JavaScript enabled."
+		icon="i-fa6-solid:circle-info"
+	/>
 	<style>
 		.contact-form {
 			display: none;
@@ -62,16 +67,29 @@
 	</style>
 </noscript>
 
+<h2>Matrix</h2>
+<span
+	>We have a Matrix space for general discussion, support and announcements
+	about Project Segfault over at <a
+		href="https://matrix.to/#/#project-segfault:projectsegfau.lt/"
+		>this link</a
+	>.</span
+>
+
 <h2>Our Email</h2>
 
 <a href="mailto:contact@projectsegfau.lt">contact@projectsegfau.lt</a>
 
 <span class="italic">
-    Please be aware that Microsoft often blocks non-popular emails, if you do contact us through there, make sure to check your spam and mark it as not-spam!
+	Please be aware that Microsoft often blocks non-popular emails, if you do
+	contact us through there, make sure to check your spam and mark it as
+	not-spam!
 </span>
 
 <h2>People</h2>
 
 <span>
-    You can find ways to contact individual team members <a href="/team">on our team page</a>.
+	You can find ways to contact individual team members <a href="/team"
+		>on our team page</a
+	>.
 </span>
diff --git a/src/routes/faq/+page.md b/src/routes/faq/+page.md
deleted file mode 100644
index ef00a93..0000000
--- a/src/routes/faq/+page.md
+++ /dev/null
@@ -1,26 +0,0 @@
----
-title: Frequently Asked Questions
-description: Frequently Asked Questions
----
-
-# { title }
-
-## Who is the project owner?
-
-There are two owners that operate Project Segfault, Midou and Mrlerien. A list of the people involved and their positions can be found [on our members page](/team).
-
-## What's the backstory to Project Segfault?
-
-We have a rather interesting backstory, if I do say so myself. [Click here to see a timeline of things that happened in Project Segfault's history](/timeline).
-
-## One of your services contains toxic people!
-
-You can contact us by mail or Matrix and we can figure this out with you. But we recommend that you put most of these requests in our support channel at [#support:projectsegfau.lt](https://matrix.to/#/#support:projectsegfau.lt) on Matrix. If it's something personal, just say that you have a report against someone on one of our services and you'd like to be contacted by an admin and we'll contact you as soon as possible. We generally tend to be active throughout the day.
-
-## How can I trust your services?
-
-Well, you really can't. We don't make our logs or anything else public, however, if you would like access to the data we have on you, please contact us. If you're extremely privacy/security conscious, **you are allowed to use Tor on our services**, but we don't host any `.onion` links.
-
-## Which ways do you prefer to communicate?
-
-Look at [Contact](/contact).
diff --git a/src/routes/instances/+page.server.ts b/src/routes/instances/+page.server.ts
index da85d5b..8aee2f0 100644
--- a/src/routes/instances/+page.server.ts
+++ b/src/routes/instances/+page.server.ts
@@ -3,7 +3,11 @@ import { env } from "$env/dynamic/private";
 
 export const load: PageServerLoad = async () => {
 	return {
-		state: await fetch(env.VITE_API_URL + "/api/v1/state/status").then((res) => res.json()),
-		instances: await fetch(env.VITE_API_URL + "/api/v1/status").then((res) => res.json())
-	}
-}
\ No newline at end of file
+		state: await fetch(env.VITE_API_URL + "/api/v1/state/status").then(
+			(res) => res.json()
+		).catch(() => ({})),
+		instances: await fetch(env.VITE_API_URL + "/api/v1/status").then(
+			(res) => res.json()
+		).catch(() => ({}))
+	};
+};
diff --git a/src/routes/instances/+page.svelte b/src/routes/instances/+page.svelte
index f2e1506..580b2f8 100644
--- a/src/routes/instances/+page.svelte
+++ b/src/routes/instances/+page.svelte
@@ -1,15 +1,18 @@
 <script lang="ts">
 	import { CardInner, CardOuter, LinksOuter } from "$lib/Card";
-    import InstanceLink from "./InstanceLink.svelte";
-    import dayjs from "dayjs";
+	import InstanceLink from "./InstanceLink.svelte";
+	import dayjs from "dayjs";
 	import type { PageData } from "./$types";
-	
-    export let data: PageData;
+
+	export let data: PageData;
 </script>
 
 <svelte:head>
 	<title>Our instances | Project Segfault</title>
-	<meta name="description" content="Our collection of instances." />
+	<meta
+		name="description"
+		content="Our collection of instances."
+	/>
 </svelte:head>
 
 <h1>Our instances</h1>
@@ -17,10 +20,10 @@
 {#if data.state.enabled}
 	<div class="flex flex-col gap-4">
 		<CardOuter>
-			<div class="wrapper">
+			<div class="flex flex-col">
 				{#each data.instances.status as group}
 					<h2>{group.name}</h2>
-					<div class="items">
+					<div class="flex flex-row flex-wrap gap-8">
 						{#each group.data as item}
 							<CardInner
 								title={item.name}
@@ -28,14 +31,26 @@
 								icon={item.icon}
 							>
 								<LinksOuter>
-									<InstanceLink url={item.link} item={item.status} type="main" />
+									<InstanceLink
+										url={item.link}
+										item={item.status}
+										type="main"
+									/>
 
 									{#if item.us}
-										<InstanceLink url={item.us} item={item.statusUs} type="us" />
+										<InstanceLink
+											url={item.us}
+											item={item.statusUs}
+											type="us"
+										/>
 									{/if}
 
 									{#if item.bp}
-										<InstanceLink url={item.bp} item={item.statusBp} type="backup" />
+										<InstanceLink
+											url={item.bp}
+											item={item.statusBp}
+											type="backup"
+										/>
 									{/if}
 								</LinksOuter>
 							</CardInner>
@@ -44,29 +59,16 @@
 				{/each}
 			</div>
 		</CardOuter>
-		
-		<span>Last updated: {dayjs
-			.unix(data.instances.updated)
-			.format("DD/MM/YYYY HH:mm:ss")}
+
+		<span class="bg-accent w-fit p-2 rounded-2 text-primary"
+			>Instances status last updated: {dayjs
+				.unix(data.instances.updated)
+				.format("DD/MM/YYYY HH:mm:ss")}
 		</span>
 	</div>
-
-	<style>
-		.wrapper {
-			display: flex;
-			flex-direction: column;
-		}
-
-		.items {
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			gap: 2rem;
-		}
-	</style>
-	{:else}
-		<div class="flex items-center gap-1 mt-16">
-			<div class="i-fa6-solid:circle-info" />
-			<span>Instances are currently disabled.</span>
-		</div>
+{:else}
+	<div class="flex items-center gap-2 mt-16">
+		<div class="i-fa6-solid:circle-info" />
+		<span>Instances are currently disabled.</span>
+	</div>
 {/if}
diff --git a/src/routes/instances/InstanceLink.svelte b/src/routes/instances/InstanceLink.svelte
index b03536b..9c9f1b3 100644
--- a/src/routes/instances/InstanceLink.svelte
+++ b/src/routes/instances/InstanceLink.svelte
@@ -1,31 +1,34 @@
 <script lang="ts">
-    import { Link } from "$lib/Card";
+	import { Link } from "$lib/Card";
 
-    export let url: string;
-    export let item: any;
-    export let type: "main" | "us" | "backup";
+	export let url: string;
+	export let item: any;
+	export let type: "main" | "us" | "backup";
 </script>
 
-<Link {url} class="web {item === true ? "" : "pointer-events-none cursor-default opacity-50"}">
-    <div class="withText">
-        <div class="{item === true ? "i-fa6-solid:arrow-up-right-from-square" : "i-fa6-solid:xmark"}" />
-        <span>
-            {#if type === "main"}
-                Visit
-            {:else if type === "us"}
-                US
-            {:else if type === "backup"}
-                Backup
-            {/if}
-        </span>
-    </div>
+<Link
+	{url}
+	class="web {item === 200
+		? ''
+		: 'pointer-events-none cursor-default opacity-50'}"
+>
+	<div class="flex items-center gap-2 text-base">
+		<div
+			class={item === 200
+				? "i-fa6-solid:arrow-up-right-from-square"
+				: "i-fa6-solid:xmark"}
+		/>
+		<span>
+			{#if item !== 200}
+				({item})
+			{/if}
+			{#if type === "main"}
+				Visit
+			{:else if type === "us"}
+				US
+			{:else if type === "backup"}
+				Backup
+			{/if}
+		</span>
+	</div>
 </Link>
-
-<style>
-    .withText {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		font-size: medium;
-	}
-</style>
\ No newline at end of file
diff --git a/src/routes/legal/+page.md b/src/routes/legal/+page.md
index b41f216..27d955d 100644
--- a/src/routes/legal/+page.md
+++ b/src/routes/legal/+page.md
@@ -9,3 +9,13 @@ Since we care about transparency, privacy and safety we have created some docume
 -   [Privacy Policy](/legal/privacy-policy)
 -   [Terms of Service](/legal/tos)
 -   [Transparency reports](https://git.projectsegfau.lt/ProjectSegfault/transparency/)
+
+## Legal FAQ
+
+### One of your services contains toxic people!
+
+You can contact us by mail or Matrix and we can figure this out with you. But we recommend that you put most of these requests in our support channel at [#support:projectsegfau.lt](https://matrix.to/#/#support:projectsegfau.lt) on Matrix. If it's something personal, just say that you have a report against someone on one of our services and you'd like to be contacted by an admin and we'll contact you as soon as possible. We generally tend to be active throughout the day.
+
+### How can I trust your services?
+
+Well, you really can't. We don't make our logs or anything else public, however, if you would like access to the data we have on you, please contact us. If you're extremely privacy/security conscious, **you are allowed to use Tor on our services**, but we don't host any `.onion` links.
diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte
index e0f50db..a0f70f8 100644
--- a/src/routes/team/+page.svelte
+++ b/src/routes/team/+page.svelte
@@ -5,58 +5,89 @@
 
 <svelte:head>
 	<title>Our team | Project Segfault</title>
-	<meta name="description" content="Team members of Project Segfault." />
+	<meta
+		name="description"
+		content="Team members of Project Segfault."
+	/>
 </svelte:head>
 
 <h1>Our team</h1>
 <CardOuter>
 	{#each members as { name, discord, matrix, position, description, github, git, pgp, website, email, picture }}
-		<CardInner title={name} {position} {description}>
+		<CardInner
+			title={name}
+			{position}
+			{description}
+		>
 			<LinksOuter>
 				{#if matrix}
-					<Link url={matrix} class="matrixcolored">
+					<Link
+						url={matrix}
+						class="matrixcolored"
+					>
 						<div class="i-simple-icons:matrix" />
 					</Link>
 				{/if}
 
 				{#if discord}
-					<Link url={discord} class="discordcolored">
+					<Link
+						url={discord}
+						class="discordcolored"
+					>
 						<div class="i-simple-icons:discord" />
 					</Link>
 				{/if}
 
 				{#if github}
-					<Link url={github} class="githubcolored">
+					<Link
+						url={github}
+						class="githubcolored"
+					>
 						<div class="i-simple-icons:github" />
 					</Link>
 				{/if}
 
 				{#if git}
-					<Link url={git} class="gitcolored">
+					<Link
+						url={git}
+						class="gitcolored"
+					>
 						<div class="i-simple-icons:git" />
 					</Link>
 				{/if}
 
 				{#if website}
-					<Link url={website} class="web">
+					<Link
+						url={website}
+						class="web"
+					>
 						<div class="i-fa6-solid:globe" />
 					</Link>
 				{/if}
 
 				{#if email}
-					<Link url="mailto:{email}" class="email">
+					<Link
+						url="mailto:{email}"
+						class="email"
+					>
 						<div class="i-fa6-solid:envelope" />
 					</Link>
 				{/if}
 
 				{#if pgp}
-					<Link url={pgp} class="pgp">
+					<Link
+						url={pgp}
+						class="pgp"
+					>
 						<div class="i-fa6-solid:key" />
 					</Link>
 				{/if}
 
 				{#if picture}
-					<Link url={picture} class="picture">
+					<Link
+						url={picture}
+						class="picture"
+					>
 						<div class="i-fa6-solid:camera" />
 					</Link>
 				{/if}
diff --git a/src/routes/timeline/+page.svelte b/src/routes/timeline/+page.svelte
index abfda50..6f51de7 100644
--- a/src/routes/timeline/+page.svelte
+++ b/src/routes/timeline/+page.svelte
@@ -19,8 +19,11 @@
 	/>
 </svelte:head>
 
-<Hero>
-	<h1>A timeline of <span>Project Segfault</span>'s history</h1>
+<Hero marginTop="4">
+	<h1 class="text-5xl font-800">
+		A timeline of <span class="text-accent">Project Segfault</span>'s
+		history
+	</h1>
 </Hero>
 
 <Timeline position="alternate">
@@ -245,14 +248,3 @@
 		</TimelineContent>
 	</TimelineItem>
 </Timeline>
-
-<style>
-	h1 {
-		font-size: 50px;
-		font-weight: 800;
-	}
-
-	span {
-		color: var(--accent);
-	}
-</style>
diff --git a/static/JetBrainsMono.ttf b/static/JetBrainsMono.ttf
new file mode 100644
index 0000000..430cff0
Binary files /dev/null and b/static/JetBrainsMono.ttf differ
diff --git a/static/Raleway.ttf b/static/Raleway.ttf
deleted file mode 100644
index 424fb0e..0000000
Binary files a/static/Raleway.ttf and /dev/null differ
diff --git a/uno.config.ts b/uno.config.ts
index 954df5f..fa1933b 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -20,6 +20,34 @@ export default defineConfig({
 		})
 	],
 
+	theme: {
+		fontFamily: {
+			primary: ["var(--font-primary)"]
+		},
+		margin: {
+			"0-auto": "0 auto"
+		},
+		colors: {
+			accent: "var(--accent)",
+			accentTranslucent: "var(--accent-translucent)",
+			primary: "var(--primary)",
+			secondary: "var(--secondary)",
+			tertiary: "var(--tertiary)",
+			text: "var(--text)",
+			grey: "var(--grey)",
+			alt: "var(--alt)",
+			altText: "var(--alt-text)"
+		},
+		breakpoints: {
+			sm: "640px",
+			md: "768px",
+			lg: "1024px",
+			xl: "1280px",
+			"2xl": "1536px",
+			nav: "1030px"
+		}
+	},
+
 	transformers: [transformerVariantGroup(), transformerDirectives()],
 
 	safelist: ["i-fa6-solid:moon", "i-fa6-solid:sun"]
diff --git a/vite.config.ts b/vite.config.ts
index 69f2cff..c606446 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,9 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import unoCSS from "unocss/vite";
+import { defineConfig } from "vite";
 
-/** @type {import('vite').UserConfig} */
-const config = {
+const config = defineConfig({
 	plugins: [sveltekit(), unoCSS()]
-};
+});
 
 export default config;