hearchco · aleksasiriski · Mar 28, 2024 · Feb 9, 2024 · Feb 9, 2024 · Feb 20, 2024
diff --git a/.dockerignore b/.dockerignore
@@ -1,4 +1,5 @@
 **
 !docker/
 !build/
-!package.json
+!package.json
+!pnpm-lock.yaml
diff --git a/.env.example b/.env.example
@@ -1 +1,5 @@
-API_URL=http://localhost:3030 # server reachable
+API_URI=http://localhost:3030 # server reachable
+PUBLIC_API_URI=http://localhost:3030 # client reachable
+# use local frontend with official backend (CORS is enabled for http://localhost:5173)
+# API_URI=https://api.hearch.co
+# PUBLIC_API_URI=https://api.hearch.co
diff --git a/src/app.css b/src/app.css
@@ -1,23 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-.hearchco-bg-primary,
-.hover\:hearchco-bg-primary:hover {
-	background-color: #ffb280;
-}
-
-.hearchco-bg-secondary,
-.hover\:hearchco-bg-secondary:hover {
-	background-color: #2b1100;
-}
-
-.hearchco-text-primary,
-.hover\:hearchco-text-primary:hover {
-	color: #ffb280;
-}
-
-.hearchco-text-secondary,
-.hover\:hearchco-text-secondary:hover {
-	color: #2b1100;
-}
+@tailwind utilities;
diff --git a/src/app.html b/src/app.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />

diff --git a/src/lib/assets/logo.svg b/src/lib/assets/logo.svg
diff --git a/src/lib/components/DarkModeToggle.svelte b/src/lib/components/DarkModeToggle.svelte
@@ -0,0 +1,77 @@
+<script lang="ts">
+	// functions
+	import { onMount } from 'svelte';
+
+	// variables
+	let darkMode: boolean;
+
+	onMount(() => {
+		const prefersDarkMode: boolean = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		const theme: string | null = localStorage.getItem('theme');
+
+		if (theme === 'dark') {
+			darkMode = true;
+		} else if (theme === 'light') {
+			darkMode = false;
+		} else {
+			darkMode = prefersDarkMode;
+		}
+	});
+
+	function toggleDarkMode() {
+		darkMode = !darkMode;
+		localStorage.setItem('theme', darkMode ? 'dark' : 'light');
+
+		if (darkMode) {
+			document.documentElement.classList.add('dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+		}
+	}
+</script>
+
+<button class="absolute top-0 right-0 md:px-4 md:py-4" on:click={toggleDarkMode}>
+	{#if darkMode}
+		<div class="h-12 w-12 object-cover hover:scale-110 duration-300 ease-in-out">
+			<svg
+				class="fill-hearchco-primary dark:fill-hearchco-secondary stroke-hearchco-primary dark:stroke-hearchco-secondary"
+				viewBox="0 0 80 80"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M27.9645 23.4053L24.7176 18.9656L27.9368 23.4255C27.946 23.4187 27.9552 23.412 27.9645 23.4053ZM20.5092 33.649L15.2726 31.9656L20.4986 33.6816C20.502 33.6707 20.5056 33.6598 20.5092 33.649ZM20.4986 46.3184L15.2726 48.0344L20.5092 46.351C20.5056 46.3402 20.502 46.3293 20.4986 46.3184ZM27.9368 56.5745L24.7176 61.0344L27.9645 56.5947C27.9552 56.588 27.946 56.5813 27.9368 56.5745ZM39.9829 60.4999L40.0001 66L40.0172 60.4999C40.0058 60.5 39.9943 60.5 39.9829 60.4999ZM52.0359 56.5951L55.2825 61.0344L52.0637 56.5749C52.0545 56.5817 52.0452 56.5885 52.0359 56.5951ZM59.4918 46.3513L64.7275 48.0344L59.5024 46.3187C59.4989 46.3296 59.4954 46.3404 59.4918 46.3513ZM59.5024 33.6813L64.7275 31.9656L59.4918 33.6487C59.4954 33.6596 59.4989 33.6704 59.5024 33.6813ZM52.0637 23.4251L55.2825 18.9656L52.0359 23.4049C52.0452 23.4115 52.0545 23.4183 52.0637 23.4251ZM40.0172 19.5001L40.0001 14L39.9829 19.5001C39.9943 19.5 40.0058 19.5 40.0172 19.5001Z"
+				/>
+				<path
+					d="M27.9645 23.4053L29.4204 25.4377C29.9629 25.0491 30.3275 24.4597 30.4331 23.8008C30.5386 23.142 30.3764 22.4682 29.9825 21.9296L27.9645 23.4053ZM24.7176 18.9656L26.7356 17.4898C25.9223 16.3778 24.3627 16.1332 23.2482 16.943C22.1336 17.7528 21.8842 19.3116 22.6905 20.4287L24.7176 18.9656ZM27.9368 23.4255L25.9097 24.8887C26.3003 25.4299 26.8911 25.7924 27.5505 25.8955C28.2099 25.9986 28.8832 25.8338 29.4204 25.4377L27.9368 23.4255ZM20.5092 33.649L22.8815 34.4377C23.0921 33.8044 23.0407 33.1133 22.7388 32.5181C22.4369 31.923 21.9096 31.4732 21.2743 31.269L20.5092 33.649ZM15.2726 31.9656L16.0377 29.5855C14.7261 29.1639 13.3207 29.8828 12.8949 31.193C12.4692 32.5033 13.1837 33.911 14.4926 34.3408L15.2726 31.9656ZM20.4986 33.6816L19.7186 36.0569C20.3527 36.2651 21.0437 36.2111 21.6378 35.907C22.2319 35.6029 22.6797 35.0739 22.8815 34.4377L20.4986 33.6816ZM20.4986 46.3184L22.8815 45.5624C22.6797 44.9262 22.2319 44.3972 21.6378 44.093C21.0438 43.7889 20.3527 43.7349 19.7186 43.9431L20.4986 46.3184ZM15.2726 48.0344L14.4926 45.6592C13.1837 46.089 12.4692 47.4967 12.8949 48.807C13.3207 50.1172 14.7261 50.8361 16.0377 50.4145L15.2726 48.0344ZM20.5092 46.351L21.2743 48.731C21.9096 48.5268 22.4369 48.0771 22.7388 47.4819C23.0407 46.8867 23.0921 46.1956 22.8815 45.5623L20.5092 46.351ZM27.9368 56.5745L29.4206 54.5624C28.8834 54.1663 28.2101 54.0014 27.5506 54.1045C26.8911 54.2076 26.3003 54.5701 25.9097 55.1113L27.9368 56.5745ZM24.7176 61.0344L22.6905 59.5713C21.8842 60.6884 22.1336 62.2472 23.2482 63.057C24.3627 63.8668 25.9223 63.6222 26.7356 62.5102L24.7176 61.0344ZM27.9645 56.5947L29.9825 58.0704C30.3764 57.5318 30.5386 56.8579 30.433 56.199C30.3274 55.5401 29.9627 54.9507 29.4202 54.5621L27.9645 56.5947ZM39.9829 60.4999L40.0004 58C39.333 57.9953 38.6914 58.2577 38.2186 58.7287C37.7457 59.1998 37.4808 59.8403 37.4829 60.5077L39.9829 60.4999ZM40.0001 66L37.5001 66.0078C37.5044 67.3855 38.6224 68.5 40.0001 68.5C41.3777 68.5 42.4957 67.3855 42.5 66.0078L40.0001 66ZM40.0172 60.4999L42.5172 60.5077C42.5193 59.8405 42.2545 59.2 41.7818 58.729C41.3092 58.258 40.6678 57.9955 40.0005 58L40.0172 60.4999ZM52.0359 56.5951L50.5803 54.5626C50.0377 54.9511 49.673 55.5405 49.5674 56.1995C49.4618 56.8584 49.624 57.5322 50.018 58.0709L52.0359 56.5951ZM55.2825 61.0344L53.2645 62.5102C54.0778 63.6222 55.6374 63.8668 56.7519 63.057C57.8665 62.2472 58.1159 60.6884 57.3096 59.5713L55.2825 61.0344ZM52.0637 56.5749L54.0908 55.1118C53.7002 54.5707 53.1095 54.2082 52.4502 54.105C51.7909 54.0018 51.1177 54.1665 50.5805 54.5624L52.0637 56.5749ZM59.4918 46.3513L57.1195 45.5625C56.9089 46.1957 56.9603 46.8869 57.2622 47.4821C57.564 48.0773 58.0913 48.5271 58.7267 48.7313L59.4918 46.3513ZM64.7275 48.0344L63.9624 50.4145C65.274 50.8361 66.6794 50.1172 67.1052 48.807C67.5309 47.4967 66.8164 46.089 65.5075 45.6592L64.7275 48.0344ZM59.5024 46.3187L60.2824 43.9434C59.6483 43.7352 58.9573 43.7892 58.3633 44.0933C57.7692 44.3974 57.3214 44.9263 57.1195 45.5624L59.5024 46.3187ZM59.5024 33.6813L57.1195 34.4376C57.3214 35.0737 57.7692 35.6026 58.3633 35.9067C58.9573 36.2108 59.6483 36.2648 60.2824 36.0566L59.5024 33.6813ZM64.7275 31.9656L65.5075 34.3408C66.8164 33.911 67.5309 32.5033 67.1052 31.193C66.6794 29.8828 65.274 29.1639 63.9624 29.5855L64.7275 31.9656ZM59.4918 33.6487L58.7267 31.2687C58.0914 31.4729 57.5641 31.9227 57.2622 32.5178C56.9603 33.113 56.9089 33.8041 57.1195 34.4374L59.4918 33.6487ZM52.0637 23.4251L50.5807 25.4377C51.1179 25.8335 51.791 25.9982 52.4503 25.895C53.1096 25.7918 53.7002 25.4293 54.0908 24.8882L52.0637 23.4251ZM55.2825 18.9656L57.3096 20.4287C58.1159 19.3116 57.8665 17.7528 56.7519 16.943C55.6374 16.1332 54.0778 16.3778 53.2645 17.4898L55.2825 18.9656ZM52.0359 23.4049L50.018 21.9291C49.624 22.4678 49.4618 23.1417 49.5674 23.8007C49.6731 24.4597 50.0379 25.0491 50.5806 25.4376L52.0359 23.4049ZM40.0172 19.5001L40.0005 22C40.6678 22.0044 41.3092 21.742 41.7818 21.271C42.2545 20.8 42.5193 20.1595 42.5172 19.4923L40.0172 19.5001ZM40.0001 14L42.5 13.9922C42.4957 12.6145 41.3777 11.5 40.0001 11.5C38.6224 11.5 37.5044 12.6145 37.5001 13.9922L40.0001 14ZM39.9829 19.5001L37.4829 19.4923C37.4808 20.1597 37.7457 20.8003 38.2186 21.2713C38.6915 21.7423 39.3331 22.0047 40.0005 22L39.9829 19.5001ZM29.9825 21.9296L26.7356 17.4898L22.6997 20.4413L25.9466 24.8811L29.9825 21.9296ZM22.6905 20.4287L25.9097 24.8887L29.9639 21.9624L26.7448 17.5024L22.6905 20.4287ZM29.4204 25.4377L29.4204 25.4377L26.5086 21.373C26.49 21.3863 26.4715 21.3998 26.4531 21.4134L29.4204 25.4377ZM21.2743 31.269L16.0377 29.5855L14.5075 34.3456L19.7441 36.029L21.2743 31.269ZM14.4926 34.3408L19.7186 36.0569L21.2785 31.3064L16.0525 29.5903L14.4926 34.3408ZM22.8815 34.4377C22.8815 34.4377 22.8815 34.4377 22.8815 34.4377L18.1369 32.8603C18.1296 32.882 18.1226 32.9038 18.1157 32.9255L22.8815 34.4377ZM19.7186 43.9431L14.4926 45.6592L16.0525 50.4097L21.2785 48.6936L19.7186 43.9431ZM16.0377 50.4145L21.2743 48.731L19.7441 43.971L14.5075 45.6544L16.0377 50.4145ZM22.8815 45.5623L22.8815 45.5624L18.1156 47.0743C18.1226 47.0963 18.1297 47.1181 18.1369 47.1397L22.8815 45.5623ZM25.9097 55.1113L22.6905 59.5713L26.7448 62.4976L29.9639 58.0376L25.9097 55.1113ZM26.7356 62.5102L29.9825 58.0704L25.9466 55.1189L22.6997 59.5587L26.7356 62.5102ZM29.4202 54.5621L29.4206 54.5624L26.453 58.5865C26.4713 58.6 26.4899 58.6136 26.5089 58.6272L29.4202 54.5621ZM37.4829 60.5077L37.5001 66.0078L42.5 65.9922L42.4829 60.4921L37.4829 60.5077ZM42.5 66.0078L42.5172 60.5077L37.5172 60.4921L37.5001 65.9922L42.5 66.0078ZM40.0005 58H40.0004L39.9654 62.9999C39.9885 63 40.0113 63 40.0339 62.9999L40.0005 58ZM50.018 58.0709L53.2645 62.5102L57.3004 59.5587L54.0539 55.1194L50.018 58.0709ZM57.3096 59.5713L54.0908 55.1118L50.0366 58.0381L53.2554 62.4976L57.3096 59.5713ZM50.5805 54.5624L50.5803 54.5626L53.4915 58.6276C53.5096 58.6147 53.528 58.6013 53.5468 58.5875L50.5805 54.5624ZM58.7267 48.7313L63.9624 50.4145L65.4926 45.6544L60.2569 43.9713L58.7267 48.7313ZM65.5075 45.6592L60.2824 43.9434L58.7224 48.6939L63.9476 50.4097L65.5075 45.6592ZM57.1195 45.5624L57.1195 45.5625L61.8641 47.1401C61.8711 47.1191 61.8782 47.0973 61.8853 47.0749L57.1195 45.5624ZM60.2824 36.0566L65.5075 34.3408L63.9476 29.5903L58.7224 31.3061L60.2824 36.0566ZM63.9624 29.5855L58.7267 31.2687L60.2569 36.0287L65.4926 34.3456L63.9624 29.5855ZM57.1195 34.4374L57.1195 34.4376L61.8853 32.9251C61.8783 32.9031 61.8712 32.8814 61.8641 32.86L57.1195 34.4374ZM54.0908 24.8882L57.3096 20.4287L53.2554 17.5024L50.0365 21.9619L54.0908 24.8882ZM53.2645 17.4898L50.018 21.9291L54.0539 24.8807L57.3004 20.4413L53.2645 17.4898ZM50.5806 25.4376L50.5807 25.4377L53.5467 21.4124C53.5283 21.3989 53.5099 21.3855 53.4912 21.3722L50.5806 25.4376ZM42.5172 19.4923L42.5 13.9922L37.5001 14.0078L37.5172 19.5079L42.5172 19.4923ZM37.5001 13.9922L37.4829 19.4923L42.4829 19.5079L42.5 14.0078L37.5001 13.9922ZM40.0005 22H40.0005L40.0339 17.0001C40.011 17 39.9881 17 39.9653 17.0001L40.0005 22Z"
+				/>
+				<path
+					d="M36.4733 29.1459C38.7655 28.4011 41.2345 28.4011 43.5267 29.1459C45.8189 29.8907 47.8164 31.342 49.2331 33.2918C50.6497 35.2416 51.4127 37.5899 51.4127 40C51.4127 42.4101 50.6497 44.7584 49.2331 46.7082C47.8164 48.658 45.8189 50.1093 43.5267 50.8541C41.2345 51.5989 38.7655 51.5989 36.4733 50.8541C34.1811 50.1093 32.1836 48.658 30.7669 46.7082C29.3503 44.7584 28.5873 42.4101 28.5873 40C28.5873 37.5899 29.3503 35.2416 30.7669 33.2918C32.1836 31.342 34.1811 29.8907 36.4733 29.1459Z"
+					stroke-width="4"
+					stroke-linecap="square"
+					stroke-linejoin="round"
+				/>
+			</svg>
+		</div>
+	{:else}
+		<div class="h-12 w-12 object-cover hover:scale-110 duration-300 ease-in-out">
+			<svg
+				class="fill-hearchco-primary dark:fill-hearchco-secondary"
+				viewBox="0 0 80 80"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path
+					fill-rule="evenodd"
+					clip-rule="evenodd"
+					d="M49.6333 16.0645C43.4734 13.4658 36.525 13.4658 30.3651 16.0645C24.3093 18.6194 19.5163 23.475 17.0403 29.5634L16.9172 29.866C14.4051 36.0431 14.4051 42.9571 16.9172 49.1342L17.0403 49.4367C19.5163 55.5252 24.3093 60.3808 30.3651 62.9356C36.525 65.5343 43.4734 65.5343 49.6333 62.9356C49.8399 62.8485 50.045 62.7586 50.2485 62.6662C52.018 61.8626 51.2483 59.276 49.3725 58.7678C48.533 58.5404 47.705 58.2557 46.8944 57.9137C42.1362 55.9063 38.3703 52.0912 36.4248 47.3075L36.3282 47.0697C34.3543 42.2163 34.3543 36.7839 36.3281 31.9304L36.4248 31.6927C38.3703 26.9089 42.1362 23.0938 46.8944 21.0865C47.705 20.7445 48.533 20.4598 49.3726 20.2323C51.2484 19.7242 52.0181 17.1376 50.2486 16.334C50.045 16.2415 49.8399 16.1517 49.6333 16.0645Z"
+				/>
+				<path
+					d="M30.3651 16.0645L29.5877 14.2218L30.3651 16.0645ZM49.6333 16.0645L50.4107 14.2218V14.2218L49.6333 16.0645ZM17.0403 29.5634L15.1876 28.81L15.1876 28.81L17.0403 29.5634ZM16.9172 29.866L18.7699 30.6194H18.7699L16.9172 29.866ZM16.9172 49.1342L18.7699 48.3807H18.7699L16.9172 49.1342ZM17.0403 49.4367L15.1876 50.1902H15.1876L17.0403 49.4367ZM30.3651 62.9356L29.5877 64.7783V64.7783L30.3651 62.9356ZM49.6333 62.9356L50.4107 64.7783L49.6333 62.9356ZM46.8944 57.9137L46.1169 59.7564L46.8944 57.9137ZM36.4248 47.3075L34.5722 48.0609L34.5722 48.0609L36.4248 47.3075ZM36.3282 47.0697L38.1808 46.3163L38.1808 46.3163L36.3282 47.0697ZM36.3281 31.9304L34.4755 31.177L34.4755 31.177L36.3281 31.9304ZM36.4248 31.6927L38.2775 32.4462L38.2775 32.4461L36.4248 31.6927ZM46.8944 21.0865L47.6718 22.9292L46.8944 21.0865ZM50.2486 16.334L49.4216 18.155L50.2486 16.334ZM50.2485 62.6662L49.4215 60.8452L50.2485 62.6662ZM49.3725 58.7678L49.8955 56.8374L49.3725 58.7678ZM31.1425 17.9073C36.8053 15.5182 43.1931 15.5182 48.8559 17.9073L50.4107 14.2218C43.7538 11.4134 36.2446 11.4134 29.5877 14.2218L31.1425 17.9073ZM18.8929 30.3168C21.1692 24.7197 25.5754 20.2559 31.1425 17.9073L29.5877 14.2218C23.0433 16.9828 17.8635 22.2302 15.1876 28.81L18.8929 30.3168ZM18.7699 30.6194L18.8929 30.3168L15.1876 28.81L15.0646 29.1125L18.7699 30.6194ZM18.7699 48.3807C16.4542 42.6867 16.4542 36.3134 18.7699 30.6194L15.0646 29.1125C12.356 35.7727 12.356 43.2274 15.0646 49.8876L18.7699 48.3807ZM18.8929 48.6833L18.7699 48.3807L15.0646 49.8876L15.1876 50.1902L18.8929 48.6833ZM31.1425 61.0929C25.5754 58.7442 21.1692 54.2804 18.8929 48.6833L15.1876 50.1902C17.8635 56.7699 23.0433 62.0173 29.5877 64.7783L31.1425 61.0929ZM48.8559 61.0929C43.1931 63.4819 36.8053 63.4819 31.1425 61.0929L29.5877 64.7783C36.2446 67.5868 43.7538 67.5868 50.4107 64.7783L48.8559 61.0929ZM49.4215 60.8452C49.2344 60.9302 49.0458 61.0128 48.8559 61.0929L50.4107 64.7783C50.6339 64.6842 50.8556 64.5871 51.0756 64.4872L49.4215 60.8452ZM49.8955 56.8374C49.1422 56.6334 48.3992 56.3779 47.6718 56.071L46.1169 59.7564C47.0107 60.1335 47.9237 60.4475 48.8496 60.6983L49.8955 56.8374ZM47.6718 56.071C43.4023 54.2698 40.0232 50.8465 38.2775 46.554L34.5722 48.0609C36.7175 53.336 40.8702 57.5429 46.1169 59.7564L47.6718 56.071ZM38.2775 46.554L38.1808 46.3163L34.4755 47.8232L34.5722 48.0609L38.2775 46.554ZM38.1808 46.3163C36.4035 41.946 36.4035 37.0542 38.1808 32.6839L34.4755 31.177C32.3052 36.5135 32.3052 42.4867 34.4755 47.8232L38.1808 46.3163ZM38.1808 32.6839L38.2775 32.4462L34.5722 30.9393L34.4755 31.177L38.1808 32.6839ZM38.2775 32.4461C40.0232 28.1537 43.4023 24.7304 47.6718 22.9292L46.1169 19.2437C40.8702 21.4573 36.7175 25.6642 34.5722 30.9393L38.2775 32.4461ZM47.6718 22.9292C48.3993 22.6223 49.1422 22.3668 49.8955 22.1627L48.8497 18.3019C47.9238 18.5527 47.0107 18.8667 46.1169 19.2437L47.6718 22.9292ZM48.8559 17.9073C49.0458 17.9874 49.2344 18.07 49.4216 18.155L51.0756 14.513C50.8556 14.4131 50.6339 14.316 50.4107 14.2218L48.8559 17.9073ZM49.8955 22.1627C51.5909 21.7035 52.7488 20.3334 53.1161 18.8859C53.3046 18.1431 53.3099 17.284 52.9754 16.4592C52.6281 15.6026 51.9662 14.9175 51.0756 14.513L49.4216 18.155C49.4311 18.1593 49.4031 18.1478 49.3626 18.1062C49.3219 18.0644 49.2893 18.0133 49.2686 17.9622C49.2288 17.8642 49.2562 17.8342 49.239 17.902C49.2223 17.9679 49.1765 18.0629 49.0954 18.1488C49.019 18.2298 48.934 18.2791 48.8497 18.3019L49.8955 22.1627ZM51.0756 64.4872C51.9662 64.0827 52.6281 63.3975 52.9754 62.541C53.3098 61.7162 53.3046 60.857 53.1161 60.1143C52.7487 58.6668 51.5909 57.2967 49.8955 56.8374L48.8496 60.6983C48.9339 60.7211 49.0189 60.7704 49.0954 60.8514C49.1765 60.9373 49.2222 61.0323 49.239 61.0982C49.2562 61.166 49.2288 61.1359 49.2685 61.038C49.2892 60.9869 49.3218 60.9358 49.3625 60.894C49.403 60.8524 49.4311 60.8408 49.4215 60.8452L51.0756 64.4872Z"
+				/>
+			</svg>
+		</div>
+	{/if}
+</button>
diff --git a/src/lib/components/Error.svelte b/src/lib/components/Error.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import logo from '$lib/assets/logo.svg';
+	// components
+	import Logo from '$lib/components/Logo.svelte';
+
+	// parameters
 	export let statusCode: string;
 	export let message: string;
-	export let error: any = undefined;
-	if (error) {
-		console.log(error);
-	}
+	export let err: Error | undefined = undefined;
 </script>
 
 <!-- this is hard fixed top space -->
@@ -20,13 +20,17 @@
 		<p
 			class="mb-4 text-2xl sm:text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-white"
 		>
-			{message}
+			{err !== undefined ? err.message : message}
 		</p>
 
 		<a href="/" class="mx-auto w-fit flex items-center">
-			<img class="mr-2 h-20 w-20 rotate-180" src={logo} alt="logo" />
-			<p class="hover:hearchco-text-primary italic dark:text-white">Go back to homepage</p>
-			<img class="ml-2 h-20 w-20" src={logo} alt="logo" />
+			<Logo classes="mr-2 h-20 w-20 rotate-180" />
+			<p
+				class="hover:text-hearchco-primary hover:dark:text-hearchco-secondary italic dark:text-white"
+			>
+				Go back to homepage
+			</p>
+			<Logo classes="ml-2 h-20 w-20" />
 		</a>
 	</div>
 </div>
diff --git a/src/lib/components/Footer.svelte b/src/lib/components/Footer.svelte
@@ -2,8 +2,11 @@
 	class="mt-auto flex h-20 w-full place-content-center items-center border-t-2 border-gray-100 dark:border-zinc-700"
 >
 	<div>
-		<a class="hearchco-text-primary hover:underline" href="https://github.com/hearchco"
-			><b>Source code</b></a
+		<a
+			class="text-hearchco-primary dark:text-hearchco-secondary font-bold hover:underline"
+			href="https://github.com/hearchco"
 		>
+			Source code
+		</a>
 	</div>
 </footer>
diff --git a/src/lib/components/Header.svelte b/src/lib/components/Header.svelte
@@ -1,25 +1,17 @@
 <script lang="ts">
-	import logo from '$lib/assets/logo.svg';
+	// components
 	import Searchbox from '$lib/components/Searchbox.svelte';
+
+	// parameters
 	export let query: string;
 </script>
 
 <header
-	class="flex h-36 items-center border-b-2 border-gray-100 dark:border-zinc-700"
+	class="flex flex-col justify-end h-36 items-center border-b-2 border-gray-100 dark:border-zinc-700"
 >
-	<div class="mx-4 w-full min-w-fit">
+	<div class="px-4 w-full min-w-fit">
 		<div class="md:mx-auto flex max-w-screen-md items-center">
-			<div class="grid">
-				<a class="col-start-1 row-start-1" draggable="false" href="/">
-					<img
-						class="col-start-1 row-start-1 h-16 w-16 mr-6 md:mr-8 pointer-events-none"
-						src={logo}
-						alt="logo"
-					/>
-				</a>
-			</div>
-			<Searchbox bind:query />
-			<div class="w-0 md:w-16 md:ml-8" />
+			<Searchbox categories={true} bind:query />
 		</div>
 	</div>
 </header>
diff --git a/src/lib/components/Load.svelte b/src/lib/components/Load.svelte