diff --git a/src/pages/404.astro b/src/pages/404.astro
index 5fe8822..1bbb565 100644
--- a/src/pages/404.astro
+++ b/src/pages/404.astro
@@ -1,10 +1,10 @@
 ---
 import { readSingleton } from '@directus/sdk';
 
-import directus from '@lib/directus';
-import BaseLayout from '@layouts/BaseLayout.astro';
 import GoBackButton from '@/components/buttons/GoBackButton.astro';
 import GoHomeButton from '@/components/buttons/GoHomeButton.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
 
 const global = await directus.request(readSingleton('site_global'));
 ---
@@ -29,39 +29,36 @@ const global = await directus.request(readSingleton('site_global'));
   }}
 >
 
-  <section class="mt-20 grid place-content-center">
-    <div class="mx-auto max-w-7xl px-4 py-8 lg:px-6 lg:py-16">
-      <div class="mx-auto max-w-screen-sm text-center">
+  <section class="grid place-content-center mt-20">
+    <div class="max-w-7xl px-4 lg:px-6 py-8 lg:py-16 mx-auto">
+      <div class="text-center max-w-screen-sm mx-auto">
         <div class="glitch-wrapper smooth-reveal">
           <h1
-            class="glitch text-9xl leading-none font-bold text-neutral-900 sm:text-[12rem] dark:text-neutral-100"
+            class="glitch text-header text-9xl font-bold leading-none sm:text-[12rem]"
             data-text="404"
           >
             Not Found
           </h1>
         </div>
-
-        <h1
-          class="text-dark smooth-reveal mb-4 text-7xl font-extrabold text-yellow-500 lg:text-9xl dark:text-yellow-400"
-        >
-          {`Page Not Found - ${global.name}`}
+        <h1 class="smooth-reveal text-yellow-500 dark:text-yellow-400 text-4xl md:text-5xl font-bold leading-tight tracking-tight text-balance mt-30">
+          Page Not Found:
         </h1>
-        <div
-          class="smooth-reveal mx-auto mt-16 max-w-md rounded-xl bg-neutral-100 p-6 shadow-xs dark:border-neutral-700/50 dark:bg-stone-800"
-        >
-          <h3
-            class="text-sm font-medium tracking-wider text-neutral-500 uppercase dark:text-neutral-400"
-          >
+        <h1 class="smooth-reveal card-text-header mt-8 mb-30">
+          {Astro.url.pathname.replace('/', '')}
+        </h1>
+        <div class="smooth-reveal card-base max-w-md p-6 mx-auto mt-16">
+          <h3 class="card-text-title text-sm tracking-wider uppercase">
             Did you know?
           </h3>
-          <p class="mt-2 text-sm text-neutral-600 dark:text-neutral-300" id="fun-fact">
+          <p
+            id="fun-fact"
+            class="text-secondary text-sm mt-4 mb-2"
+          >
             The 404 error code originated when CERN's web server displayed room 404 (their server
             room) as the error message when a file wasn't found.
           </p>
         </div>
-        <div
-          class="smooth-reveal mt-10 flex flex-col items-center justify-center gap-4 sm:flex-row"
-        >
+        <div class="smooth-reveal flex flex-col sm:flex-row items-center justify-center gap-4 mt-10">
           <GoBackButton/>
           <GoHomeButton url={global.site_url} />
         </div>
diff --git a/src/pages/about.astro b/src/pages/about.astro
index 1923d87..4eeff6d 100644
--- a/src/pages/about.astro
+++ b/src/pages/about.astro
@@ -1,13 +1,13 @@
 ---
 import { readSingleton } from '@directus/sdk';
 
-import directus from '@lib/directus';
-import BaseLayout from '@layouts/BaseLayout.astro';
 import HeroSection from '@components/sections/HeroSection.astro';
 import ExperienceSection from '@components/sections/ExperienceSection.astro';
 import EducationSection from '@components/sections/EducationSection.astro';
 import ProjectSection from '@components/sections/ProjectSection.astro';
 import SkillsSliderSection from '@components/sections/SkillsSliderSection.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
 
 import portraitImg from '@images/portrait.avif';
 
@@ -42,7 +42,7 @@ const global = await directus.request(readSingleton('site_global'));
     rounded={true}
   />
 
-  <section class="mx-auto max-w-7xl px-4 py-10 sm:px-6 lg:px-8 lg:py-14">
+  <section class="max-w-7xl px-4 sm:px-6 lg:px-8 py-10 lg:py-14 mx-auto">
     <div class="flex flex-col gap-y-24 md:gap-y-32">
       <ExperienceSection className="smooth-reveal" />
       <EducationSection className="smooth-reveal" />
diff --git a/src/pages/apps.astro b/src/pages/apps.astro
index b4d888c..84ff45f 100644
--- a/src/pages/apps.astro
+++ b/src/pages/apps.astro
@@ -1,10 +1,10 @@
 ---
 import { readSingleton } from '@directus/sdk';
 
-import directus from '@lib/directus';
-import BaseLayout from '@layouts/BaseLayout.astro';
 import HeroSection from '@components/sections/HeroSection.astro';
 import ApplicationSection from '@components/sections/ApplicationSection.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
 
 import applicationImg from '@images/cedar_tree.png';
 
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8aae1c1..b0d653e 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -3,13 +3,13 @@ import { readSingleton, readItems } from '@directus/sdk';
 
 import type { Post } from '@lib/directusTypes';
 
-import directus from '@lib/directus';
-import BaseLayout from '@layouts/BaseLayout.astro';
 import HeroSection from '@components/sections/HeroSection.astro';
 import FeatureSection from '@components/sections/FeatureSection.astro';
 import WeatherSection from '@components/sections/WeatherSection.astro';
 import RecentPostsSection from '@components/sections/RecentPostsSection.astro';
 import GiteaSection from '@components/sections/GiteaSection.astro';
+import BaseLayout from '@layouts/BaseLayout.astro';
+import directus from '@lib/directus';
 
 import homeImg from '@images/autumn_mountain.png';