diff --git a/.prettierrc.json b/.prettierrc.json
index 44a39bc..12fe906 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1,5 +1,5 @@
 {
-  "plugins": ["prettier-plugin-svelte"],
+  "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
   "singleQuote": false,
   "tabWidth": 2,
   "useTabs": false,
diff --git a/package.json b/package.json
index 367013a..7d9fe81 100644
--- a/package.json
+++ b/package.json
@@ -15,15 +15,20 @@
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/postcss": "^4.1.11",
+    "autoprefixer": "^10.4.21",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.13",
     "sass": "^1.83.4",
     "svelte": "^5.0.0",
     "svelte-check": "^4.0.0",
+    "tailwindcss": "^4.1.11",
     "typescript": "^5.0.0",
     "vite": "^6.0.0"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.1.11",
     "bootstrap-icons": "^1.11.3"
   }
 }
diff --git a/src/component/bg.svelte b/src/blocks/bg.svelte
similarity index 99%
rename from src/component/bg.svelte
rename to src/blocks/bg.svelte
index 50effaa..4da95ce 100644
--- a/src/component/bg.svelte
+++ b/src/blocks/bg.svelte
@@ -13,7 +13,7 @@
     darkTheme;
 
     for (let i = 0; i < gradients.length; i++) {
-      // This re-renders each gradient so their new color will be correct
+      // This recolors each gradient so their new color will be correct
       let gradient = gradients[i];
       gradient.color = getRandomColor();
       gradient.prepareBuffer();
diff --git a/src/blocks/footer.svelte b/src/blocks/footer.svelte
new file mode 100644
index 0000000..0a478e9
--- /dev/null
+++ b/src/blocks/footer.svelte
@@ -0,0 +1,17 @@
+<span
+  class="mx-auto flex w-[95%] flex-col border-t
+  border-t-[var(--text-color)] p-1 text-center lg:flex-row lg:justify-between"
+>
+  <p class="py-4 lg:px-[10%]">
+    © 2025 Colormatic Studios, All Rights Reserved.
+  </p>
+  <p class="py-4 lg:px-[10%]">
+    <a href="mailto:support@colormatic.org" class="underline">
+      support@colormatic.org
+    </a>
+    <span class="hidden lg:inline">|</span>
+    <a href="mailto:contact@colormatic.org" class="underline">
+      contact@colormatic.org
+    </a>
+  </p>
+</span>
diff --git a/src/blocks/navbar.svelte b/src/blocks/navbar.svelte
new file mode 100644
index 0000000..56d365a
--- /dev/null
+++ b/src/blocks/navbar.svelte
@@ -0,0 +1,206 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  let modal = $state() as HTMLElement;
+  let modalOpenState = $state(false);
+
+  function toggleModalMenu() {
+    modalOpenState = !modalOpenState;
+  }
+
+  function modalHandleClickOutside(e: MouseEvent) {
+    if (e.target == modal) {
+      toggleModalMenu();
+    }
+  }
+
+  let darkTheme: CallableFunction = getContext("darkTheme");
+</script>
+
+<nav
+  class="mx-auto box-border grid w-[95%] grid-cols-[1fr_min-content_1fr]
+  items-center border-b border-b-[var(--text-color)] p-2 wrap-anywhere lg:p-3"
+>
+  <a href="/" class="justify-self-start text-[140%] font-bold">Colormatic</a>
+  <img
+    src="/img/colormatic_logo.svg"
+    alt="Colormatic Logo"
+    class="h-[40px] max-w-[unset]"
+  />
+  <div class="flex justify-self-end">
+    <ul
+      class="responsive-hidden hidden
+      flex-row lg:flex"
+    >
+      <!-- prettier-ignore -->
+      {#each [
+        {
+          label: "Zakarya",
+          link: "/zakarya"
+        },
+        {
+          label: "Colormatic Studios",
+          link: "/studios"
+        },
+        {
+          label: "About",
+          link: "/about"
+        }
+      ] as item}
+        <li><a href={item.link}>{item.label}</a></li>
+      {/each}
+    </ul>
+    <a
+      href="https://git.colormatic.org"
+      class="git-icon"
+      target="_blank"
+      rel="noopener noreferrer"
+      aria-label="Colormatic Git"
+    >
+      <i class="bi bi-git text-[160%]"></i>
+    </a>
+    <button onclick={toggleModalMenu} class="menu-button" aria-label="menu">
+      <i class="bi bi-list"></i>
+    </button>
+  </div>
+</nav>
+
+<!--
+The following Svelte ignore statements aren't ideal, but it seems to be
+the only way to achieve a proper modal. They even do this in the
+Svelte modal example, https://svelte.dev/playground/modal
+-->
+
+<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+<span
+  onclick={modalHandleClickOutside}
+  bind:this={modal}
+  class="fixed top-0 left-0 z-1 m-auto h-full w-full bg-[#00000066]
+  {modalOpenState ? '' : 'hidden'}"
+>
+  <div
+    class="modal-animate mx-auto mt-[100px] w-[30ch] rounded-lg p-4
+    shadow-[1px_1px_8px_#00000033] backdrop-blur-[5px] lg:w-[50ch]
+    {darkTheme() ? 'bg-[#000000bb]' : 'bg-[#ffffff88]'}"
+  >
+    <button
+      onclick={toggleModalMenu}
+      class="float-right w-min cursor-pointer text-[200%] text-[var(--text-color)]
+      duration-[0.2s] hover:text-[#21afff]"
+      aria-label="Close"
+    >
+      <i class="bi bi-x"></i>
+    </button>
+    <ul>
+      <!-- prettier-ignore -->
+      {#each [
+        {
+          label: "Home",
+          link: "/",
+          newTab: false
+        },
+        {
+          label: "Zakarya",
+          link: "/zakarya",
+          newTab: false
+        },
+        {
+          label: "Colormatic Studios",
+          link: "/studios",
+          newTab: false
+        },
+        {
+          label: "Colormatic Git",
+          link: "https://git.colormatic.org",
+          newTab: true
+        },
+        {
+          label: "Colormatic ID",
+          link: "https://auth.colormatic.org",
+          newTab: true
+        },
+        {
+          label: "About",
+          link: "/about",
+          newTab: false
+        }
+      ] as item}
+
+      <li class="mx-[12px] my-[18px]">
+        {#if item.newTab}
+          <a
+            href="{item.link}"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="text-color p-2 text-[120%]"
+          >
+            {item.label}
+          </a>
+        {:else}
+          <a
+            href="{item.link}"
+            class="text-color p-2 text-[120%]"
+          >
+            {item.label}
+          </a>
+        {/if}
+      </li>
+      {/each}
+    </ul>
+  </div>
+</span>
+
+<style lang="scss">
+  nav a,
+  nav button {
+    padding: 0 8px;
+    color: var(--text-color);
+
+    display: flex;
+    cursor: pointer;
+    align-items: center;
+  }
+
+  nav ul li {
+    display: grid;
+    align-items: center;
+  }
+
+  nav button.menu-button {
+    transition-duration: 0.2s;
+  }
+
+  nav button.menu-button:hover {
+    color: #21afff;
+  }
+
+  nav .menu-button i {
+    font-size: 230%;
+
+    /*/
+     * Ugly hack to account for the fact that the menu icon is off-center
+     * (Bootstrap please fix)
+    /*/
+    transform: translateY(-1px);
+  }
+
+  /*/
+   * Navigation modal section
+  /*/
+
+  div.modal-animate {
+    animation-name: modal-animate-in;
+    animation-duration: 0.4s;
+  }
+
+  @keyframes modal-animate-in {
+    from {
+      transform: translate(0px, -300px);
+      opacity: 0;
+    }
+    to {
+      transform: translate(0px, 0px);
+      opacity: 1;
+    }
+  }
+</style>
diff --git a/src/component/settings.svelte b/src/blocks/settings.svelte
similarity index 50%
rename from src/component/settings.svelte
rename to src/blocks/settings.svelte
index 500dfbe..e34f562 100644
--- a/src/component/settings.svelte
+++ b/src/blocks/settings.svelte
@@ -2,6 +2,7 @@
   import { getContext, onMount } from "svelte";
   import { themes } from "../script/theme.ts";
   import { setCookie, getCookie } from "../script/cookie.ts";
+  import Panel from "components/panel.svelte";
 
   let panelRef = $state() as HTMLElement;
 
@@ -64,95 +65,61 @@
   }
 </script>
 
-<div
-  bind:this={panelRef}
-  class="theme-toggle panel {darkTheme() ? 'dark-theme' : ''}"
->
-  <button
-    class="toggle-button"
-    onclick={togglePanel}
-    aria-label="Toggle Theme Selector"
-  >
-    <i class={`bi ${currentIcon}`}></i>
-  </button>
+<div bind:this={panelRef} class="fixed right-5 bottom-5 flex">
+  <Panel className="flex flex-col-reverse p-1">
+    <button
+      class="flex cursor-pointer items-center px-[5px] text-[1.3rem]"
+      onclick={togglePanel}
+      aria-label="Toggle Theme Selector"
+    >
+      <i class={`bi ${currentIcon}`}></i>
+    </button>
 
-  <!-- Unfortunately, we have to hard-code the pixel count because CSS won't animate `auto` or `min-content` -->
-  <div class="button-group" style:height={expanded ? "68px" : "0px"}>
-    <!-- Don't show the button if it is currently selected (it will be shown as the dropdown icon) -->
-    {#if themeOption !== themes.DARK}
-      <button
-        aria-label="Dark Theme"
-        bind:this={darkButton}
-        onclick={() => setThemeOption(themes.DARK)}
-      >
-        <i bind:this={darkButtonIcon} class="bi bi-moon"></i>
-      </button>
-    {/if}
+    <!-- Unfortunately, we have to hard-code the pixel count because CSS won't animate `auto` or `min-content` -->
+    <div
+      class="button-group flex flex-col overflow-hidden"
+      style:height={expanded ? "68px" : "0px"}
+    >
+      <!-- Don't show the button if it is currently selected (it will be shown as the dropdown icon) -->
+      {#if themeOption !== themes.DARK}
+        <button
+          aria-label="Dark Theme"
+          bind:this={darkButton}
+          onclick={() => setThemeOption(themes.DARK)}
+          class="cursor-pointer text-[1.3rem]"
+        >
+          <i bind:this={darkButtonIcon} class="bi bi-moon"></i>
+        </button>
+      {/if}
 
-    {#if themeOption !== themes.LIGHT}
-      <button
-        aria-label="Light Theme"
-        bind:this={lightButton}
-        onclick={() => setThemeOption(themes.LIGHT)}
-      >
-        <i bind:this={lightButtonIcon} class="bi bi-sun"></i>
-      </button>
-    {/if}
+      {#if themeOption !== themes.LIGHT}
+        <button
+          aria-label="Light Theme"
+          bind:this={lightButton}
+          class="cursor-pointer text-[1.3rem]"
+          onclick={() => setThemeOption(themes.LIGHT)}
+        >
+          <i bind:this={lightButtonIcon} class="bi bi-sun"></i>
+        </button>
+      {/if}
 
-    {#if themeOption !== themes.AUTO}
-      <button
-        aria-label="Auto Theme"
-        bind:this={autoButton}
-        onclick={() => setThemeOption(themes.AUTO)}
-      >
-        <i bind:this={autoButtonIcon} class="bi bi-circle-half"></i>
-      </button>
-    {/if}
-  </div>
+      {#if themeOption !== themes.AUTO}
+        <button
+          aria-label="Auto Theme"
+          bind:this={autoButton}
+          class="cursor-pointer text-[1.3rem]"
+          onclick={() => setThemeOption(themes.AUTO)}
+        >
+          <i bind:this={autoButtonIcon} class="bi bi-circle-half"></i>
+        </button>
+      {/if}
+    </div>
+  </Panel>
 </div>
 
 <style lang="scss">
-  @use "../style/global.scss";
-
-  div.theme-toggle {
-    padding: 4px;
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    display: flex;
-    flex-direction: column-reverse;
-    align-items: flex-end;
-  }
-
-  button.toggle-button {
-    font-size: 1.3rem;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    color: global.$text-color;
-    aspect-ratio: 1 / 1;
-  }
-
   div.button-group {
-    overflow: hidden;
     transition: height 0.3s ease;
-    display: flex;
-    flex-direction: column;
-  }
-
-  div.button-group button {
-    margin: 2px 0;
-    font-size: 1.3rem;
-    background: transparent;
-    border: none;
-    color: global.$text-color;
-    cursor: pointer;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    div.button-group button {
-      margin: 4px 0;
-    }
   }
 
   // Click target color animation
diff --git a/src/component/footer.svelte b/src/component/footer.svelte
deleted file mode 100644
index 2b2af94..0000000
--- a/src/component/footer.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<footer>
-  <p>© 2025 Colormatic Studios, All Rights Reserved.</p>
-  <p>
-    <a href="mailto:support@colormatic.org">support@colormatic.org</a>
-    <span class="responsive-hidden">|</span>
-    <a href="mailto:contact@colormatic.org">contact@colormatic.org</a>
-  </p>
-</footer>
-
-<style lang="scss">
-  @use "../style/global.scss";
-
-  footer {
-    display: flex;
-    justify-content: space-between;
-    border-top: solid 1px global.$text-color;
-    width: 95%;
-    padding: 4px;
-    margin: 0 auto;
-  }
-
-  footer p {
-    color: global.$text-color;
-    padding: 4px 10%;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    footer {
-      flex-direction: column;
-    }
-
-    footer p {
-      text-align: center;
-      padding: 4px;
-      margin: 4px;
-    }
-
-    .responsive-hidden {
-      display: none;
-    }
-  }
-</style>
diff --git a/src/component/navbar.svelte b/src/component/navbar.svelte
deleted file mode 100644
index 2cadf9c..0000000
--- a/src/component/navbar.svelte
+++ /dev/null
@@ -1,287 +0,0 @@
-<script lang="ts">
-  import { getContext } from "svelte";
-
-  let pages = $state() as HTMLElement;
-
-  function toggleModalMenu() {
-    pages.classList.toggle("hidden");
-  }
-  function modalMenuProcessClick(e: MouseEvent) {
-    if (e.target == pages) {
-      pages.classList.toggle("hidden");
-    }
-  }
-
-  let darkTheme: CallableFunction = getContext("darkTheme");
-</script>
-
-<nav>
-  <a href="/" class="title nav-left">Colormatic</a>
-  <img
-    src="/img/colormatic_logo.svg"
-    alt="Colormatic Logo"
-    class="nav-center colormatic-logo"
-  />
-  <div class="nav-right inline">
-    <ul class="responsive-hidden">
-      <li><a href="/zakarya">Zakarya</a></li>
-      <li><a href="/studios">Colormatic Studios</a></li>
-      <li><a href="/about">About</a></li>
-    </ul>
-    <a
-      href="https://git.colormatic.org"
-      class="git-icon"
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label="Colormatic Git"
-    >
-      <i class="bi bi-git"></i>
-    </a>
-    <button onclick={toggleModalMenu} class="menu-button" aria-label="menu">
-      <i class="bi bi-list"></i>
-    </button>
-  </div>
-</nav>
-
-<!--
-The following Svelte ignore statements aren't ideal, but it seems to be
-the only way to achieve a proper modal. They even do this in the
-Svelte modal example, https://svelte.dev/playground/modal
--->
-
-<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-<span onclick={modalMenuProcessClick} bind:this={pages} class="modalbg hidden">
-  <div class={darkTheme() ? "dark-theme" : ""}>
-    <button onclick={toggleModalMenu} class="close" aria-label="Close">
-      <i class="bi bi-x"></i>
-    </button>
-    <ul>
-      <li><a href="/">Home</a></li>
-      <li><a href="/zakarya">Zakarya</a></li>
-      <li><a href="/studios">Colormatic Studios</a></li>
-      <li>
-        <a
-          href="https://git.colormatic.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Colormatic Git
-        </a>
-      </li>
-      <li>
-        <a
-          href="https://auth.colormatic.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Colormatic ID
-        </a>
-      </li>
-      <li><a href="/about">About</a></li>
-    </ul>
-  </div>
-</span>
-
-<style lang="scss">
-  @use "../style/global.scss";
-
-  nav {
-    display: grid;
-    grid-template-columns: 1fr min-content 1fr;
-    align-items: center;
-    padding: 12px;
-    border-bottom: solid 1px global.$text-color;
-    z-index: 1;
-
-    margin: 0 auto;
-    width: 95%;
-    box-sizing: border-box;
-    overflow-wrap: anywhere;
-  }
-
-  nav .nav-left {
-    justify-self: left;
-    grid-column: 1;
-  }
-
-  nav .nav-center {
-    justify-self: center;
-    grid-column: 2;
-  }
-
-  nav .nav-right {
-    justify-self: right;
-    grid-column: 3;
-  }
-
-  nav ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    flex-direction: row;
-  }
-
-  nav ul li {
-    display: grid;
-    justify-items: center;
-  }
-
-  nav a,
-  nav button {
-    padding: 0 8px;
-    color: global.$text-color;
-    text-decoration: none;
-
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-  }
-
-  nav a.title {
-    font-size: 140%;
-    font-weight: bold;
-  }
-
-  nav img.colormatic-logo {
-    width: auto;
-    height: 40px;
-    padding: 4px;
-  }
-
-  nav button.menu-button {
-    background: none;
-    border: none;
-
-    transition-duration: 0.2s;
-  }
-
-  nav button.menu-button:hover {
-    color: #21afff;
-  }
-
-  nav .menu-button i {
-    font-size: 230%;
-
-    /*/
-     * Ugly hack to account for the fact that the menu icon is off-center
-     * (Bootstrap please fix)
-    /*/
-    transform: translateY(-1px);
-  }
-
-  nav .git-icon i {
-    font-size: 140%;
-  }
-
-  nav div.inline {
-    display: flex;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    nav {
-      padding: 6px 0;
-    }
-    nav .git-icon i {
-      font-size: 150%;
-    }
-    nav ul.responsive-hidden {
-      display: none;
-    }
-  }
-
-  /*/
-   * Navigation modal section
-  /*/
-
-  span.modalbg.hidden {
-    display: none;
-  }
-
-  span.modalbg {
-    position: fixed;
-    z-index: 1;
-    padding: 0;
-    margin: auto;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.4);
-  }
-
-  span.modalbg div {
-    width: 50ch;
-    margin: 100px auto;
-    padding: 16px;
-
-    color: global.$text-color;
-    border-radius: 8px;
-    box-shadow: 1px 1px 8px #00000033;
-    background-color: #ffffffbb;
-    backdrop-filter: blur(5px);
-
-    animation-name: modal-animate-in;
-    animation-duration: 0.4s;
-  }
-
-  @keyframes modal-animate-in {
-    from {
-      transform: translate(0px, -300px);
-      opacity: 0;
-    }
-    to {
-      transform: translate(0px, 0px);
-      opacity: 1;
-    }
-  }
-
-  span.modalbg div button.close {
-    float: right;
-    width: min-content;
-    background: none;
-    border: none;
-    outline: none;
-    cursor: pointer;
-
-    font-size: 200%;
-    color: global.$text-color;
-
-    transition-duration: 0.2s;
-  }
-
-  span.modalbg div button.close:hover {
-    color: #21afff;
-  }
-
-  span.modalbg div ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  span.modalbg div ul li {
-    margin: 18px 12px;
-  }
-
-  span.modalbg div ul li a {
-    color: global.$text-color;
-    padding: 8px;
-    text-decoration: none;
-    font-size: 120%;
-  }
-
-  span.modalbg div ul li a:hover {
-    color: #21afff;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    span.modalbg div {
-      width: 30ch;
-    }
-  }
-
-  span.modalbg div.dark-theme {
-    background-color: #000000bb;
-  }
-</style>
diff --git a/src/components/divider.svelte b/src/components/divider.svelte
new file mode 100644
index 0000000..8303a20
--- /dev/null
+++ b/src/components/divider.svelte
@@ -0,0 +1 @@
+<div class="m-[24px] border-t border-t-[var(--text-color)]"></div>
diff --git a/src/components/hero.svelte b/src/components/hero.svelte
new file mode 100644
index 0000000..af89643
--- /dev/null
+++ b/src/components/hero.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import Panel from "components/panel.svelte";
+
+  interface Props {
+    className?: string;
+    children?: import("svelte").Snippet;
+  }
+  let { className, children }: Props = $props();
+</script>
+
+<Panel
+  className="mx-auto my-4 w-[90%] lg:w-[60%] p-6 text-center
+  {className}"
+>
+  {@render children?.()}
+</Panel>
diff --git a/src/components/linktree.svelte b/src/components/linktree.svelte
new file mode 100644
index 0000000..439f1cb
--- /dev/null
+++ b/src/components/linktree.svelte
@@ -0,0 +1,40 @@
+<script lang="ts">
+  interface Props {
+    className?: string;
+    links: {
+      label: string;
+      url: string;
+    }[];
+  }
+  let { className, links }: Props = $props();
+</script>
+
+<ul
+  class="{className}"
+>
+  {#each links as link}
+    <li class="my-3 text-center">
+      <a
+        class="box-border inline-block w-full rounded-full
+        bg-[#4c5053] px-4 py-2 no-underline
+        shadow-[2px_2px_4px_#00000066] transition duration-500 hover:bg-[#383c3f]"
+        href={link.url}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {link.label}
+      </a>
+    </li>
+  {/each}
+</ul>
+
+<style lang="scss">
+  /*/
+   * This may look out of place, but the background color of the links
+   * in the link tree don't change based on light/dark theme. The text
+   * color of the links should always be white.
+  /*/
+  ul li a {
+    color: white;
+  }
+</style>
diff --git a/src/components/panel.svelte b/src/components/panel.svelte
new file mode 100644
index 0000000..cbdb371
--- /dev/null
+++ b/src/components/panel.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { getContext } from "svelte";
+
+  let darkTheme: CallableFunction = getContext("darkTheme");
+
+  interface Props {
+    className?: string;
+    children?: import("svelte").Snippet;
+  }
+  let { className, children }: Props = $props();
+</script>
+
+<div
+  class="rounded-[8px] border bg-[#ffffff22]
+  shadow-[1px_1px_8px_#00000033] backdrop-blur-[5px]
+  {className}
+  {darkTheme() ? 'border-[#ffffff33]' : 'border-[#00000033]'}"
+>
+  {@render children?.()}
+</div>
diff --git a/src/components/spacer.svelte b/src/components/spacer.svelte
new file mode 100644
index 0000000..53ee183
--- /dev/null
+++ b/src/components/spacer.svelte
@@ -0,0 +1,12 @@
+<span class="spacer"></span>
+
+<style lang="scss">
+  span.spacer {
+    display: block;
+    margin-top: 24%;
+
+    @media (width >= 64rem) {
+      margin-top: 8%;
+    }
+  }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index a1dd8fc..824ba06 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
-  import "../style/main.scss";
+  import "style/main.scss";
+  import "style/tailwind.css";
   import "bootstrap-icons/font/bootstrap-icons.css";
-  import Navbar from "../component/navbar.svelte";
-  import Footer from "../component/footer.svelte";
-  import Bg from "../component/bg.svelte";
-  import Settings from "../component/settings.svelte";
-  import { themes } from "../script/theme.ts";
+  import Navbar from "blocks/navbar.svelte";
+  import Footer from "blocks/footer.svelte";
+  import Bg from "blocks/bg.svelte";
+  import Settings from "blocks/settings.svelte";
+  import { themes } from "script/theme.ts";
   import { onMount, setContext } from "svelte";
 
   interface Props {
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 7dd4f54..008dcab 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,5 +1,8 @@
 <script lang="ts">
   import { getContext, onMount } from "svelte";
+  import Spacer from "components/spacer.svelte";
+  import Hero from "components/hero.svelte";
+  import Divider from "components/divider.svelte";
 
   let atTop = $state(true);
 
@@ -44,9 +47,12 @@
   <meta property="og:type" content="website" />
 </svelte:head>
 
-<main class={darkTheme() ? "dark-theme" : ""}>
-  <div class="brand-heading">
-    <h1>Colormatic: A non-profit project for creation.</h1>
+<main>
+  <div
+    class="px-[12px] py-[38%] text-center text-[300%] font-bold
+    lg:w-[70%] lg:p-[12%] lg:text-left lg:text-[350%]"
+  >
+    Colormatic: A non-profit project for creation.
   </div>
 
   <div class="scroll-arrow {atTop ? '' : 'hide'}">
@@ -55,84 +61,80 @@
 
   <div style="margin-top:calc(100vh - 500px);"></div>
 
-  <div class="heading">Featured Colormatic Studios Projects:</div>
-  <div class="hero panel">
-    <h1>
-      <a
-        href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        Quality First Person Controller
-      </a>
-    </h1>
-    <p>An actually good first person controller for the Godot Engine.</p>
-
-    <div class="divider"></div>
-
-    <h1>
-      <a
-        href="https://git.colormatic.org/ColormaticStudios/godot-bson"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        BSON for Godot
-      </a>
-    </h1>
-    <p>A BSON serializer/deserializer for the Godot Engine</p>
+  <div class="p-3 text-center text-[250%]">
+    Featured Colormatic Studios Projects:
   </div>
+  <Hero>
+    <!--
+    Prettier wants to pack all of this data into one line, probably a bug.
+    This must be formatted manually.
 
-  <spacer></spacer>
+    This issue happens in various places around the codebase, whenever we
+    stuff data directly into an #each statement. This is the most prominent
+    place though, so I'll stick this comment here.
 
-  <div class="hero panel">
-    <h1>
-      <i class="bi bi-tools" style="padding-right: 12px;"></i>
+    Notice that Prettier also won't format the code inside the #each statement,
+    which means that the Tailwind classes won't get sorted. I'll miss that
+    feature.
+    -->
+    <!-- prettier-ignore -->
+    {#each [
+      {
+        title: "Quality First Person Controller",
+        link: "https://git.colormatic.org/ColormaticStudios/quality-godot-first-person",
+        description: "An actually good first person controller for the Godot Engine."
+      },
+      {
+        title: "BSON for Godot",
+        link: "https://git.colormatic.org/ColormaticStudios/godot-bson",
+        description: "A BSON serializer/deserializer for the Godot Engine"
+      }
+    ] as item, index}
+
+      {#if index !== 0}
+        <Divider />
+      {/if}
+
+      <a
+        href={item.link}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="text-color text-[200%] font-bold underline"
+      >
+        {item.title}
+      </a>
+      <p class="pt-3">{item.description}</p>
+    {/each}
+  </Hero>
+
+  <Spacer />
+
+  <Hero>
+    <span class="text-[200%] font-bold">
+      <i class="bi bi-tools pr-3"></i>
       This website is under construction.
-    </h1>
-    <p>
+    </span>
+    <p class="p-3">
       Check up on progress and changes at <a
         href="https://git.colormatic.org/ColormaticStudios/Colormatic-Website"
         target="_blank"
         rel="noopener noreferrer"
+        class="underline"
       >
         ColormaticStudios/Colormatic-Website
       </a>
     </p>
-  </div>
+  </Hero>
 </main>
 
-<spacer></spacer>
+<Spacer />
 
 <style lang="scss">
-  @use "../style/global.scss";
-
-  main div.brand-heading {
-    padding: 12%;
-    width: 60%;
-  }
-
-  main div.brand-heading h1 {
-    font-size: 300%;
-  }
-
-  main div.heading {
-    font-size: 250%;
-    text-align: center;
-    padding: 12px;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    main div.brand-heading {
-      padding: 38% 12px;
-      text-align: center;
-      width: initial;
-    }
-
-    main div.heading {
-      font-size: 200%;
-    }
-  }
-
+  /*/
+   * Yes, this isn't in Tailwind, but I really don't want to translate this
+   * animation because Tailwind animations are stupidly verbose. With that,
+   * I also didn't translate the CSS around it because I just don't want to.
+  /*/
   main div.scroll-arrow {
     text-align: center;
     font-size: 200%;
diff --git a/src/routes/about/+page.svelte b/src/routes/about/+page.svelte
index 95d98b1..9220dca 100644
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import Hero from "components/hero.svelte";
+  import Spacer from "components/spacer.svelte";
   import { getContext } from "svelte";
 
   let darkTheme: CallableFunction = getContext("darkTheme");
@@ -26,27 +28,29 @@
   <meta property="og:type" content="website" />
 </svelte:head>
 
-<spacer></spacer>
+<Spacer />
 
-<main class={darkTheme() ? "dark-theme" : ""}>
-  <div class="hero panel">
-    <h1>Colormatic: A non-profit project for creation.</h1>
-    <p class="justify">
+<main>
+  <Hero>
+    <span class="text-[200%] font-bold">
+      Colormatic: A non-profit project for creation.
+    </span>
+    <p class="justify pt-3">
       Colormatic is a non-profit project from Zakarya for creating a curated
       collection of sub-projects that match a high-quality, high attention to
       detail standard.
     </p>
-    <p class="justify">
+    <p class="justify pt-3">
       Colormatic is still in the early stages, so expect many things to change
       in the near future.
     </p>
-    <p class="justify">
+    <p class="justify pt-3">
       Colormatic Studios is a creative studio dedicated to giving life to
       Colormatic's projects. We are currently just a small group of passionate
       volunteers working to build inspiring, intuitive and innovative creative
       works.
     </p>
-  </div>
+  </Hero>
 </main>
 
-<spacer></spacer>
+<Spacer />
diff --git a/src/routes/studios/+page.svelte b/src/routes/studios/+page.svelte
index ebb2e61..2c0e549 100644
--- a/src/routes/studios/+page.svelte
+++ b/src/routes/studios/+page.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+  import Panel from "components/panel.svelte";
+  import Hero from "components/hero.svelte";
+  import Spacer from "components/spacer.svelte";
+  import Linktree from "components/linktree.svelte";
   import { getContext } from "svelte";
 
   let darkTheme: CallableFunction = getContext("darkTheme");
@@ -35,244 +39,142 @@
   <meta property="og:type" content="website" />
 </svelte:head>
 
-<main class={darkTheme() ? "dark-theme" : ""}>
-  <div class="cs-title"><h1>Colormatic Studios</h1></div>
-
-  <div class="project-grid-container">
-    <div class="project-grid-box panel">
-      <h1>
-        <a
-          href="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Quality First Person Controller
-        </a>
-      </h1>
-      <div class="project-grid-box-contents">
-        <img
-          src="https://git.colormatic.org/ColormaticStudios/quality-godot-first-person/raw/branch/main/icon.svg"
-          alt="First Person Logo"
-        />
-        <p>An actually good first person controller for the Godot Engine.</p>
-      </div>
-    </div>
-    <div class="project-grid-box panel">
-      <h1>
-        <a
-          href="https://git.colormatic.org/ColormaticStudios/godot-bson"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          BSON for Godot
-        </a>
-      </h1>
-      <div class="project-grid-box-contents">
-        <img
-          src="https://git.colormatic.org/ColormaticStudios/godot-bson/raw/branch/main/icon.svg"
-          alt="Godot BSON Logo"
-        />
-        <p>A BSON serializer/deserializer for the Godot Engine.</p>
-      </div>
-    </div>
-    <div class="project-grid-box panel">
-      <h1>A Silly Game</h1>
-      <div class="project-grid-box-contents">
-        <img src="/img/studios/hatcat.webp" alt="HatCat" />
-        <p>
-          This is a silly little game project to get us started.
-          <br />
-          Currently in closed pre-alpha.
-        </p>
-      </div>
-    </div>
-    <div class="project-grid-box panel">
-      <h1>ColorQuest</h1>
-      <div class="project-grid-box-contents">
-        <img
-          src="/img/studios/colorquest.png"
-          class="pixelart"
-          alt="ColorQuest"
-        />
-        <p>
-          A simple browser MMORPG focused on social features.
-          <br />
-          Currently in closed pre-alpha.
-        </p>
-      </div>
-    </div>
+<main>
+  <div
+    class="cs-title flex h-[200px] items-center justify-center bg-cover lg:h-[300px]"
+  >
+    <span
+      class="rounded-2xl bg-[#00000088] px-[38px] py-[28px] text-[200%] font-bold
+      text-white shadow-[1px_1px_8px_#00000033] backdrop-blur-[5px] lg:text-[300%]"
+    >
+      Colormatic Studios
+    </span>
   </div>
 
-  <div class="hero panel">
-    <h1>About Us</h1>
-    <p class="justify">
+  <div class="mx-auto flex w-[90%] flex-col flex-wrap lg:w-[80%] lg:flex-row">
+    <!-- prettier-ignore -->
+    {#each [
+      {
+        title: "Quality First Person Controller",
+        link: "https://git.colormatic.org/ColormaticStudios/quality-godot-first-person",
+        description: "An actually good first person controller for the Godot Engine.",
+        image: "https://git.colormatic.org/ColormaticStudios/quality-godot-first-person/raw/branch/main/icon.svg",
+        pixelArt: false
+      },
+      {
+        title: "BSON for Godot",
+        link: "https://git.colormatic.org/ColormaticStudios/godot-bson",
+        description: "A BSON serializer/deserializer for the Godot Engine.",
+        image: "https://git.colormatic.org/ColormaticStudios/godot-bson/raw/branch/main/icon.svg",
+        pixelArt: false
+      },
+      {
+        title: "A Silly Game",
+        link: "",
+        description: "This is a silly little game project to get us started. Currently in closed pre-alpha.",
+        image: "/img/studios/hatcat.webp",
+        pixelArt: false
+      },
+      {
+        title: "ColorQuest",
+        link: "",
+        description: "A simple browser MMORPG focused on social features. Currently in closed pre-alpha.",
+        image: "/img/studios/colorquest.png",
+        pixelArt: true
+      }
+    ] as item}
+
+      <Panel className="flex-1 my-2 lg:m-4 lg:min-w-[40%] lg:max-w-[50%] p-4">
+        <div class="p-4">
+          {#if item.link}
+            <a
+              href="{item.link}"
+              target="_blank"
+              rel="noopener noreferrer"
+              class="text-color underline text-center text-[200%] font-bold block"
+            >
+              {item.title}
+            </a>
+          {:else}
+            <span class="text-center text-[200%] font-bold block">{item.title}</span>
+          {/if}
+        </div>
+        <div class="flex">
+          <img
+            src="{item.image}"
+            alt="First Person Logo"
+            class="max-w-[120px] max-h-[150px] m-3 rounded-lg
+            {item.pixelArt ? 'pixelart' : ''}"
+          />
+          <p class="pt-4">{item.description}</p>
+        </div>
+      </Panel>
+    {/each}
+  </div>
+
+  <Hero>
+    <span class="text-[200%] font-bold">About Us</span>
+    <p class="justify pt-3">
       Colormatic Studios is a creative studio dedicated to giving life to
       Colormatic's ambitious future.
     </p>
-    <p class="justify">
+    <p class="justify pt-3">
       We are currently just a passionate team of volunteers working to build
-      inspiring, intuitive and innovative creative works. We don't have many
-      projects right now, but we're working hard behind the scenes on ventures
-      we'll be introducing later.
+      inspiring, intuitive and innovative creative works. We don't have much to
+      show right now, but we're working hard behind the scenes on projects we'll
+      be introducing later.
     </p>
-  </div>
+  </Hero>
 
-  <div class="hero panel">
-    <h1>Links:</h1>
-    <div class="double-linktree">
-      <ul class="linktree">
-        <li>
-          <a
-            href="https://mastodon.social/@colormaticstudios"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Mastodon
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.instagram.com/colormaticstudios/"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Instagram
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.youtube.com/@colormaticstudios"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Youtube
-          </a>
-        </li>
-      </ul>
-      <ul class="linktree">
-        <li>
-          <a
-            href="https://git.colormatic.org/ColormaticStudios"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Colormatic Git
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://github.com/ColormaticStudios"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://bsky.app/profile/colormaticstudios.bsky.social"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Bluesky
-          </a>
-        </li>
-      </ul>
+  <Hero>
+    <span class="text-[200%] font-bold">Links:</span>
+    <div class="mx-auto flex lg:w-[60%]">
+      <Linktree
+        className="flex-1 mx-2"
+        links={[
+          {
+            label: "Mastodon",
+            url: "https://mastodon.social/@colormaticstudios",
+          },
+          {
+            label: "Instagram",
+            url: "https://www.instagram.com/colormaticstudios",
+          },
+          {
+            label: "Youtube",
+            url: "https://www.youtube.com/@colormaticstudios",
+          },
+        ]}
+      />
+      <Linktree
+        className="flex-1 mx-2"
+        links={[
+          {
+            label: "Colormatic Git",
+            url: "https://git.colormatic.org/ColormaticStudios",
+          },
+          {
+            label: "GitHub",
+            url: "https://github.com/ColormaticStudios",
+          },
+          {
+            label: "Bluesky",
+            url: "https://bsky.app/profile/colormaticstudios.bsky.social",
+          },
+        ]}
+      />
     </div>
-  </div>
+  </Hero>
 </main>
 
-<spacer></spacer>
+<Spacer />
 
 <style lang="scss">
-  @use "../../style/global.scss";
-
   div.cs-title {
     background-image: url("/img/colormatic_banner.svg");
-    background-size: cover;
-    background-repeat: no-repeat;
-    height: 300px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
   }
 
-  div.cs-title h1 {
-    color: white;
-    background-color: #00000088;
-    padding: 28px 38px;
-    border-radius: 16px;
-    font-size: 300%;
-    box-shadow: 1px 1px 8px #00000033;
-    backdrop-filter: blur(5px);
-  }
-
-  div.project-grid-container {
-    display: flex;
-    width: 80%;
-    margin-left: auto;
-    margin-right: auto;
-    flex-wrap: wrap;
-    justify-content: center;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    div.project-grid-container {
-      width: 90%;
-    }
-
-    div.cs-title {
-      height: 200px;
-    }
-
-    div.cs-title h1 {
-      font-size: 200%;
-    }
-  }
-
-  div.project-grid-container div.project-grid-box {
-    flex: 1;
-    margin: 16px;
-    padding: 16px;
-    min-width: 40%;
-    max-width: 50%;
-  }
-
-  div.project-grid-container div.project-grid-box h1 {
-    text-align: center;
-  }
-
-  div.project-grid-container div.project-grid-box h1 a {
-    color: global.$text-color;
-  }
-
-  // Bad code
-  div.project-grid-container div.project-grid-box h1 a:hover {
-    color: #21afff;
-  }
-
-  div.project-grid-container
-    div.project-grid-box
-    div.project-grid-box-contents {
-    /* Yes, this absurdly long element selector is a joke */
-    display: flex;
-  }
-
-  div.project-grid-container div.project-grid-box img {
-    max-width: 120px;
-    max-height: 150px;
-    margin: 12px;
-    border-radius: 8px;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    div.project-grid-container div.project-grid-box {
-      min-width: 90%;
-      max-width: 90%;
-    }
-
-    div.project-grid-container div.project-grid-box img {
-      max-width: 100px;
-    }
+  img.pixelart {
+    image-rendering: pixelated;
   }
 </style>
diff --git a/src/routes/zakarya/+page.svelte b/src/routes/zakarya/+page.svelte
index 73ce2e2..e491478 100644
--- a/src/routes/zakarya/+page.svelte
+++ b/src/routes/zakarya/+page.svelte
@@ -1,4 +1,7 @@
 <script lang="ts">
+  import Hero from "components/hero.svelte";
+  import Linktree from "components/linktree.svelte";
+  import Spacer from "components/spacer.svelte";
   import { getContext } from "svelte";
 
   let darkTheme: CallableFunction = getContext("darkTheme");
@@ -29,26 +32,30 @@
   <meta property="og:type" content="website" />
 </svelte:head>
 
-<main class={darkTheme() ? "dark-theme" : ""}>
+<main>
   <img
-    class="banner"
+    class="mx-auto mt-8 mb-8 block w-[95%] rounded-2xl border border-[#00000033]
+    shadow-[1px_1px_8px_#00000033] lg:w-[70%]"
     src="/img/zakarya-banner.webp"
     alt="Zakarya Banner"
     srcset="/img/zakarya-banner.webp 960w, /img/zakarya-banner@2x.webp 1920w"
   />
-  <div class="hero panel profile">
-    <div class="nameplate">
+  <Hero className="flex flex-wrap items-center flex-col lg:flex-row">
+    <div class="flex grow lg:flex-col">
       <img
         src="/img/zakarya-icon.webp"
-        class="zakarya-icon"
+        class="mx-4 my-2 block h-[38px] rounded-xl lg:mx-auto lg:h-auto lg:w-[100px] lg:rounded-2xl"
         alt="Zakarya Icon"
         srcset="/img/zakarya-icon.webp 540w, /img/zakarya-icon@2x.webp 1080w"
       />
-      <span class="name-title">Zakarya</span>
+      <span class="text-[200%]">Zakarya</span>
     </div>
 
-    <div class="bio">
-      <p>
+    <div
+      class="m-3 h-fit rounded-2xl border p-4 text-left text-[120%] lg:max-w-1/2
+      {darkTheme() ? 'border-[#ffffff33]' : 'border-[#00000033]'}"
+    >
+      <p class="mb-4">
         I am a software and game developer, I run Colormatic and Colormatic
         Studios, and I primarily study computer science, psychology, and
         linguistics.
@@ -60,213 +67,67 @@
       </p>
     </div>
 
-    <div class="linktree-container">
-      <ul class="linktree">
-        <li>
-          <a
-            href="https://git.colormatic.org/zakarya"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Colormatic Git
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://mstdn.party/@zakarya"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Mastodon
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://ko-fi.com/zakarya"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Ko-fi
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://www.youtube.com/@czakarya"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Youtube
-          </a>
-        </li>
-        <li>
-          <a
-            href="https://github.com/CZakarya"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            GitHub
-          </a>
-        </li>
-        <!--<li><a href="https://www.reddit.com/user/CZakarya/" target="_blank" rel="noopener noreferrer">Reddit</a></li>-->
-      </ul>
+    <div class="w-[60%] grow lg:w-[unset]">
+      <Linktree
+        links={[
+          {
+            url: "https://git.colormatic.org/zakarya",
+            label: "Colormatic Git",
+          },
+          {
+            url: "https://mstdn.party/@zakarya",
+            label: "Mastodon",
+          },
+          {
+            url: "https://ko-fi.com/zakarya",
+            label: "Ko-fi",
+          },
+          {
+            url: "https://www.youtube.com/@czakarya",
+            label: "Youtube",
+          },
+          {
+            url: "https://github.com/CZakarya",
+            label: "GitHub",
+          },
+        ]}
+      />
     </div>
-  </div>
+  </Hero>
 
-  <div class="hero panel">
-    <h1>Featured Videos:</h1>
-    <ul class="videolist">
-      <li>
+  <Hero>
+    <span class="text-[200%] font-bold">Featured Videos:</span>
+    <ul class="flex list-none flex-wrap justify-center pl-0">
+      <li class="p-2">
         <a
           href="https://www.youtube.com/watch?v=FWGCPIEM_-o"
           target="_blank"
           rel="noopener noreferrer"
         >
           <img
+            class="h-auto w-[250px] rounded-lg"
             src="https://files.colormatic.org/zakarya/videos/thumbnail/wayforward.png"
             alt="Video Thumbnail"
           />
-          <span class="title">The Way Forward</span>
+          <span class="block p-2 text-[120%]">The Way Forward</span>
         </a>
       </li>
-      <li>
+      <li class="p-2">
         <a
           href="https://www.youtube.com/watch?v=OPD8NqNu0nE"
           target="_blank"
           rel="noopener noreferrer"
         >
           <img
+            class="h-auto w-[250px] rounded-lg"
             src="https://files.colormatic.org/zakarya/videos/thumbnail/helloworld.png"
             alt="Video Thumbnail"
           />
-          <span class="title">Hello World</span>
+          <span class="block p-2 text-[120%]">Hello World</span>
         </a>
       </li>
     </ul>
-  </div>
+  </Hero>
 </main>
 
-<spacer></spacer>
-
-<style lang="scss">
-  @use "../../style/global.scss";
-
-  main img.banner {
-    display: block;
-    width: 70%;
-    margin: 32px auto 32px auto;
-    border: solid 1px #00000033;
-    border-radius: 16px;
-    box-shadow: 1px 1px 8px #00000033;
-  }
-
-  main div.profile {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-  }
-
-  main div.profile div.nameplate {
-    flex-grow: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  main div.profile div.nameplate img.zakarya-icon {
-    width: 100px;
-    border-radius: 16px;
-    margin: 8px auto;
-    display: block;
-  }
-
-  main div.profile div.nameplate span.name-title {
-    font-size: 200%;
-  }
-
-  main div.profile div.bio {
-    font-size: 120%;
-    max-width: 50%;
-    padding: 16px;
-    margin: 12px;
-    height: fit-content;
-    text-align: left;
-    /* text-align: justify;
-    text-justify: auto; */
-    border-radius: 16px;
-    border: solid 1px;
-    border-color: #383c3f33; // Same as text color but with alpha
-  }
-
-  main div.profile div.linktree-container {
-    flex-grow: 1;
-  }
-
-  main div.profile div.linktree-container ul.linktree {
-    width: 100%;
-  }
-
-  @media screen and (max-width: global.$mobile-width) {
-    main img.banner {
-      width: 95%;
-      border-radius: 12px;
-      margin: 24px auto;
-    }
-
-    main div.profile div.bio {
-      max-width: unset;
-    }
-
-    main div.profile div.linktree-container ul.linktree {
-      width: 60%;
-    }
-
-    main div.profile div.nameplate {
-      flex-direction: row;
-      align-items: end;
-      justify-content: center;
-    }
-
-    main div.profile div.nameplate img.zakarya-icon {
-      height: 1.25em;
-      width: auto;
-      font-size: 170%;
-      margin: 0px 12px;
-      border-radius: 10px;
-    }
-
-    main div.profile div.nameplate span.name-title {
-      font-size: 170%;
-    }
-  }
-
-  main.dark-theme div.profile div.bio {
-    border-color: #ffffff55;
-  }
-
-  ul.videolist {
-    list-style-type: none;
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    padding-left: 0;
-  }
-
-  ul.videolist li {
-    padding: 8px;
-  }
-
-  ul.videolist li a {
-    text-decoration: none;
-  }
-
-  ul.videolist li a img {
-    width: 250px;
-    height: auto;
-    border-radius: 8px;
-  }
-
-  ul.videolist li a span {
-    display: block;
-    color: global.$text-color;
-    font-size: 120%;
-  }
-</style>
+<Spacer />
diff --git a/src/style/global.scss b/src/style/global.scss
deleted file mode 100644
index 7544687..0000000
--- a/src/style/global.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-$text-color: var(--text-color);
-$mobile-width: 900px;
diff --git a/src/style/main.scss b/src/style/main.scss
index 2a42bd5..434ef5f 100644
--- a/src/style/main.scss
+++ b/src/style/main.scss
@@ -1,5 +1,3 @@
-@use "global.scss";
-
 :root {
   --text-color: #383c3f;
 }
@@ -7,21 +5,17 @@
 body {
   font-family: "Noto Sans", sans-serif;
   margin: 0;
-  color: global.$text-color;
+  color: var(--text-color);
 }
 
 @media (prefers-color-scheme: dark) {
   body {
-    background-color: black; // Don't flashbang dark theme users
+    background-color: black; // Don't flashbang dark theme users (CSS loads faster than JS)
   }
-  :root {
-    --text-color: white;
-  }
-}
-
-spacer {
-  display: block;
-  margin-top: 8%;
+  // Javascript does this
+  // :root {
+  //   --text-color: white;
+  // }
 }
 
 a {
@@ -44,144 +38,22 @@ a:visited:hover {
   color: #21afff;
 }
 
-a.btn,
-button.btn {
-  padding: 8px 18px;
-  border-radius: 6px;
-  font-size: 100px;
-  text-decoration: none;
-  margin: 8px;
+a.text-color {
+  color: var(--text-color);
 }
 
-a.btn.lg,
-button.btn.lg {
-  font-size: 120%;
-}
-
-a.btn.blue,
-button.btn.blue {
-  background-color: #2194ff;
-  border: 1px solid #21afff;
-  color: white;
-}
-
-div.divider {
-  margin: 38px;
-  border-top: 1px solid global.$text-color;
-}
-
-div.panel {
-  color: global.$text-color;
-  border: solid 1px;
-  border-color: #00000033;
-  border-radius: 8px;
-  box-shadow: 1px 1px 8px #00000033;
-  background-color: #ffffff22;
-  backdrop-filter: blur(5px);
-}
-
-main.dark-theme div.panel {
-  border-color: #ffffff33;
-}
-
-div.panel.dark-theme {
-  border-color: #ffffff33;
-}
-
-main div.hero {
-  width: 60%;
-  margin: 16px auto;
-  padding: 16px;
-  text-align: center;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  spacer {
-    margin-top: 24%;
-  }
-  main div.hero {
-    width: 80%;
-  }
-}
-
-main div.hero h1 a {
-  color: global.$text-color;
+a.text-color:hover {
+  color: #21afff;
 }
 
 p.justify {
   text-align: justify;
   text-justify: auto;
-}
-
-main div.hero p.justify {
-  width: 60%;
+  width: 100%;
   margin-left: auto;
   margin-right: auto;
-}
 
-main div.hero ul {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  main div.hero p.justify {
-    width: 100%;
-  }
-}
-
-ul.linktree {
-  list-style-type: none;
-  margin: 0;
-  padding: 8px;
-  padding-left: 8px;
-  width: 30%;
-}
-
-ul.linktree li {
-  margin: 12px;
-  text-align: center;
-}
-
-@media screen and (max-width: global.$mobile-width) {
-  ul.linktree {
+  @media (width >= 64rem) {
     width: 60%;
   }
-  ul.linktree li {
-    margin: 12px 0;
-  }
-}
-
-ul.linktree li a {
-  /* Pill button shape */
-  text-decoration: none;
-  color: white;
-
-  background-color: #4c5053;
-  padding: 8px;
-  border-radius: 50px;
-  box-shadow: 2px 2px 4px #00000066;
-  transition-duration: 0.5s;
-
-  display: inline-block;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-ul.linktree li a:hover {
-  cursor: pointer;
-  background-color: #383c3f;
-}
-
-div.double-linktree {
-  display: flex;
-  justify-content: center;
-}
-
-div.double-linktree ul.linktree {
-  margin: 0;
-}
-
-img.pixelart {
-  image-rendering: pixelated;
 }
diff --git a/src/style/tailwind.css b/src/style/tailwind.css
new file mode 100644
index 0000000..4bfd3bf
--- /dev/null
+++ b/src/style/tailwind.css
@@ -0,0 +1,7 @@
+/*/
+ * I have no idea why Tailwind wants a file like this; why can't I just
+ * have an import statement in the +layout.svelte? Web devs seriously
+ * confuse me.
+/*/
+
+@import "tailwindcss";
diff --git a/svelte.config.js b/svelte.config.js
index f84d5ac..23ccab3 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -6,6 +6,12 @@ const config = {
 	preprocess: vitePreprocess(),
 	kit: {
 		adapter: adapter(),
+		alias: {
+			blocks: "src/blocks",
+			components: "src/components",
+			script: "src/script",
+			style: "src/style",
+		},
 	},
 	compilerOptions: {
 		runes: true,
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
new file mode 100644
index 0000000..532e4b1
--- /dev/null
+++ b/tailwind.config.cjs
@@ -0,0 +1,8 @@
+/** @type {import("tailwindcss").Config} */
+module.exports = {
+  content: ["./src/**/*.{html,js,svelte,ts}"],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};
diff --git a/vite.config.ts b/vite.config.ts
index 6b9eb5d..9a8bd82 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,6 +1,7 @@
 import { sveltekit } from "@sveltejs/kit/vite";
+import tailwindcss from "@tailwindcss/vite";
 import { defineConfig } from "vite";
 
 export default defineConfig({
-	plugins: [sveltekit()],
+	plugins: [sveltekit(), tailwindcss()],
 });