diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index c796860..9e4e861 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -59,4 +59,32 @@ const { title, description, image = "/blog-placeholder-1.jpg" } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
+<!-- Theme Script -->
+<script is:inline>
+  const getTheme = () => {
+    if (typeof localStorage !== "undefined" && localStorage.getItem("theme"))
+      return localStorage.getItem("theme");
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches)
+      return "dark";
+    return "light";
+  };
+
+  const applyTheme = (theme) => {
+    if (theme === "dark") document.documentElement.classList.add("dark");
+    else document.documentElement.classList.remove("dark");
+    localStorage.setItem("theme", theme);
+  };
+
+  // Expose globally for use by ThemeToggleButton
+  window.applyTheme = applyTheme;
+
+  // Initial load
+  applyTheme(getTheme());
+
+  // View Transitions hook
+  document.addEventListener("astro:after-swap", () => {
+    applyTheme(getTheme());
+  });
+</script>
+
 <ClientRouter />
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 5e4bf38..0cb6dad 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -59,7 +59,6 @@ const today = new Date();
 <style>
   footer {
     padding: 2em 1em 6em 1em;
-    background: linear-gradient(var(--gray-gradient)) no-repeat;
     color: rgb(var(--gray));
     text-align: center;
   }
@@ -72,7 +71,7 @@ const today = new Date();
   }
 
   .social-links .tech-icon svg {
-    width: 20px;
+    width: 1.25rem;
     color: rgb(var(--gray));
   }
 
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 233847a..da8347b 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -1,5 +1,6 @@
 ---
 import HeaderLink from "./HeaderLink.astro";
+import ThemeToggleButton from "./ThemeToggleButton.astro";
 ---
 
 <header>
@@ -44,6 +45,7 @@ import HeaderLink from "./HeaderLink.astro";
           ></path></svg
         >
       </a>
+      <ThemeToggleButton />
     </div>
   </nav>
 </header>
@@ -51,8 +53,8 @@ import HeaderLink from "./HeaderLink.astro";
   header {
     margin: 0;
     padding: 0 1em;
-    background: white;
-    box-shadow: 0 2px 8px rgba(var(--black), 5%);
+    background: var(--surface-background);
+    box-shadow: 0 0.125rem 0.5rem rgba(var(--black), 5%);
   }
 
   h2 {
@@ -66,7 +68,7 @@ import HeaderLink from "./HeaderLink.astro";
   }
   nav {
     display: grid;
-    grid-template-columns: auto auto auto;
+    grid-template-columns: 1fr auto 1fr;
   }
 
   nav div {
@@ -75,7 +77,7 @@ import HeaderLink from "./HeaderLink.astro";
   }
 
   #IconAndTitle {
-    justify-content: left;
+    justify-content: flex-start;
   }
 
   #InternalLinks {
@@ -83,13 +85,13 @@ import HeaderLink from "./HeaderLink.astro";
   }
 
   #SocialLinks {
-    justify-content: right;
+    justify-content: flex-end;
   }
 
   nav a {
     padding: 1em 0.5em;
     color: var(--black);
-    border-bottom: 4px solid transparent;
+    border-bottom: 0.25rem solid transparent;
     text-decoration: none;
   }
 
@@ -102,10 +104,58 @@ import HeaderLink from "./HeaderLink.astro";
   .social-links a {
     display: flex;
   }
+  .social-links a,
+  #theme-toggle {
+    padding: 1em 0.5em;
+    color: var(--black);
+    border-bottom: 0.25rem solid transparent;
+    text-decoration: none;
+  }
+
+  @media (max-width: 45rem) {
+    nav {
+      grid-template-areas:
+        "logo"
+        "social"
+        "links";
+      grid-template-columns: 1fr;
+      grid-template-rows: auto auto auto;
+      gap: 0.2em;
+      padding: 1.5em 0;
+      justify-items: center;
+    }
+
+    #IconAndTitle {
+      grid-area: logo;
+      justify-content: center;
+      margin-right: 0;
+    }
 
-  @media (max-width: 720px) {
-    .social-links {
+    /* Make profile icon larger on mobile */
+    #IconAndTitle img {
+      width: 5rem;
+      height: 5rem;
+    }
+
+    #SocialLinks {
+      grid-area: social;
+      display: flex;
+      justify-content: center;
+    }
+
+    #InternalLinks {
+      grid-area: links;
+      width: 100%;
+      justify-content: center;
+      gap: 1.5em;
+    }
+
+    :global(#theme-toggle) {
       display: none;
     }
   }
+
+  :global(#theme-toggle) {
+    margin-left: 1em;
+  }
 </style>
diff --git a/src/components/ThemeToggleButton.astro b/src/components/ThemeToggleButton.astro
new file mode 100644
index 0000000..1a320ab
--- /dev/null
+++ b/src/components/ThemeToggleButton.astro
@@ -0,0 +1,91 @@
+<button id="theme-toggle" aria-label="Toggle theme">
+  <svg
+    class="sun-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <circle cx="12" cy="12" r="5"></circle>
+    <line x1="12" y1="1" x2="12" y2="3"></line>
+    <line x1="12" y1="21" x2="12" y2="23"></line>
+    <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
+    <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
+    <line x1="1" y1="12" x2="3" y2="12"></line>
+    <line x1="21" y1="12" x2="23" y2="12"></line>
+    <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
+    <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
+  </svg>
+  <svg
+    class="moon-icon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
+  </svg>
+</button>
+
+<style>
+  #theme-toggle {
+    border: none;
+    background: none;
+    cursor: pointer;
+    padding: 0.5rem;
+    color: rgb(var(--black));
+    border-radius: 50%;
+    transition:
+      background-color 0.2s ease,
+      transform 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  #theme-toggle:hover {
+    background-color: rgb(var(--gray-light));
+    transform: scale(1.1);
+  }
+
+  /* Default: Light mode -> Show Moon, Hide Sun */
+  #theme-toggle .sun-icon {
+    display: none;
+  }
+  #theme-toggle .moon-icon {
+    display: block;
+  }
+
+  /* Dark mode: -> Show Sun, Hide Moon */
+  :global(html.dark) #theme-toggle .sun-icon {
+    display: block;
+  }
+  :global(html.dark) #theme-toggle .moon-icon {
+    display: none;
+  }
+</style>
+
+<script>
+  const handleToggleClick = () => {
+    const isDark = document.documentElement.classList.contains("dark");
+    // Call the global applyTheme function exposed from BaseHead.astro
+    window.applyTheme?.(isDark ? "light" : "dark");
+  };
+
+  const setupThemeToggle = () => {
+    const themeToggle = document.getElementById("theme-toggle");
+    themeToggle?.addEventListener("click", handleToggleClick);
+  };
+
+  document.addEventListener("astro:page-load", setupThemeToggle);
+</script>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 20dbd7e..48ca537 100644
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -33,11 +33,11 @@ const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
       .hero-image img {
         display: block;
         margin: 0 auto;
-        border-radius: 12px;
+        border-radius: 0.75rem;
         box-shadow: var(--box-shadow);
       }
       .prose {
-        width: 720px;
+        width: 45rem;
         max-width: calc(100% - 2em);
         margin: auto;
         padding: 1em;
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index 8fbcada..b7ac28f 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -9,7 +9,7 @@ import Header from "../../components/Header.astro";
 import { getImageFromLibrary } from "../../utils";
 
 const posts = (await getCollection("blog")).sort(
-  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf()
+  (a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),
 );
 ---
 
@@ -20,7 +20,7 @@ const posts = (await getCollection("blog")).sort(
     <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
     <style>
       main {
-        width: 960px;
+        width: 60rem;
       }
       ul {
         display: flex;
@@ -50,7 +50,7 @@ const posts = (await getCollection("blog")).sort(
       }
       ul li img {
         margin-bottom: 0.5rem;
-        border-radius: 12px;
+        border-radius: 0.75rem;
       }
       ul li a {
         display: block;
@@ -71,7 +71,7 @@ const posts = (await getCollection("blog")).sort(
       ul a:hover img {
         box-shadow: var(--box-shadow);
       }
-      @media (max-width: 720px) {
+      @media (max-width: 45rem) {
         ul {
           gap: 0.5em;
         }
diff --git a/src/styles/global.css b/src/styles/global.css
index fe9ecf0..b4e5c75 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -11,10 +11,25 @@
 	--gray: 96, 115, 159;
 	--gray-light: 229, 233, 240;
 	--gray-dark: 34, 41, 57;
-	--gray-gradient: rgba(var(--gray-light), 50%), #fff;
-	--box-shadow: 0 2px 6px rgba(var(--gray), 25%), 0 8px 24px rgba(var(--gray), 33%),
-		0 16px 32px rgba(var(--gray), 33%);
+	--gray-gradient: rgba(var(--gray-light), 50%), transparent;
+	--box-shadow: 0 0.125rem 0.375rem rgba(var(--gray), 25%), 0 0.5rem 1.5rem rgba(var(--gray), 33%),
+		0 1rem 2rem rgba(var(--gray), 33%);
+	--surface-background: white;
+	--body-background: #fff;
+}
+html.dark {
+	--accent: #38bdf8;
+	--accent-dark: #0ea5e9;
+	--black: 248, 250, 252;
+	--gray: 148, 163, 184;
+	--gray-light: 30, 41, 59;
+	--gray-dark: 203, 213, 225;
+	--gray-gradient: #0f172a, transparent;
+	--box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.5);
+	--surface-background: rgb(var(--gray-light));
+	--body-background: #020617;
 }
+
 @font-face {
 	font-family: 'Atkinson';
 	src: url('/fonts/atkinson-regular.woff') format('woff');
@@ -34,19 +49,25 @@ body {
 	margin: 0;
 	padding: 0;
 	text-align: left;
-	background: linear-gradient(var(--gray-gradient)) no-repeat;
-	background-size: 100% 600px;
+	background-color: var(--body-background);
+	background-image: linear-gradient(var(--gray-gradient));
+	background-repeat: no-repeat;
+	background-size: 100% 37.5rem;
 	word-wrap: break-word;
 	overflow-wrap: break-word;
 	color: rgb(var(--gray-dark));
-	font-size: 20px;
+	font-size: 1.25rem;
 	line-height: 1.7;
+	display: flex;
+	flex-direction: column;
+	min-height: 100vh;
 }
 main {
-	width: 720px;
+	width: 45rem;
 	max-width: calc(100% - 2em);
 	margin: auto;
 	padding: 3em 1em;
+	flex-grow: 1;
 }
 h1,
 h2,
@@ -91,10 +112,10 @@ p {
 }
 textarea {
 	width: 100%;
-	font-size: 16px;
+	font-size: 1rem;
 }
 input {
-	font-size: 16px;
+	font-size: 1rem;
 }
 table {
 	width: 100%;
@@ -102,33 +123,33 @@ table {
 img {
 	max-width: 100%;
 	height: auto;
-	border-radius: 8px;
+	border-radius: 0.5rem;
 }
 code {
-	padding: 2px 5px;
+	padding: 0.125rem 0.3125rem;
 	background-color: rgb(var(--gray-light));
-	border-radius: 2px;
+	border-radius: 0.125rem;
 }
 pre {
 	padding: 1.5em;
-	border-radius: 8px;
+	border-radius: 0.5rem;
 }
 pre > code {
 	all: unset;
 }
 blockquote {
-	border-left: 4px solid var(--accent);
-	padding: 0 0 0 20px;
-	margin: 0px;
+	border-left: 0.25rem solid var(--accent);
+	padding: 0 0 0 1.25rem;
+	margin: 0;
 	font-size: 1.333em;
 }
 hr {
 	border: none;
-	border-top: 1px solid rgb(var(--gray-light));
+	border-top: 0.0625rem solid rgb(var(--gray-light));
 }
-@media (max-width: 720px) {
+@media (max-width: 45rem) {
 	body {
-		font-size: 18px;
+		font-size: 1.125rem;
 	}
 	main {
 		padding: 1em;
@@ -140,13 +161,13 @@ hr {
 	padding: 0;
 	margin: 0;
 	position: absolute !important;
-	height: 1px;
-	width: 1px;
+	height: 0.0625rem;
+	width: 0.0625rem;
 	overflow: hidden;
 	/* IE6, IE7 - a 0 height clip, off to the bottom right of the visible 1px box */
-	clip: rect(1px 1px 1px 1px);
+	clip: rect(0.0625rem 0.0625rem 0.0625rem 0.0625rem);
 	/* maybe deprecated but we need to support legacy browsers */
-	clip: rect(1px, 1px, 1px, 1px);
+	clip: rect(0.0625rem, 0.0625rem, 0.0625rem, 0.0625rem);
 	/* modern browsers, clip-path works inwards from each corner */
 	clip-path: inset(50%);
 	/* added line to stop words getting smushed together (as they go onto seperate lines and some screen readers do not understand line feeds as a space */
diff --git a/src/utils.ts b/src/utils.ts
index 0587213..786e7bc 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -5,11 +5,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
 );
 
 export const getImageFromLibrary = (filePath: string) => {
-  if (filePath && !images[filePath]) {
-    throw new Error(
-      `"${filePath}" does not exist in glob: "/src/images/*.{jpeg,jpg,png,gif}"`
-    );
-  }
+  if (filePath && !images[filePath]) throw new Error(`"${filePath}" does not exist in glob: "/src/images/*.{jpeg,jpg,png,gif}"`);
 
   return images[filePath]();
 };