diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index ba6aef1..ed20477 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -6,103 +6,103 @@ import { Link } from "react-router"
 import headerImage from "../images/radigue_gruvbox.png"
 import controlPanel from "../images/control-panel.png"
 import {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-  NavigationMenuViewport,
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuItem,
+	NavigationMenuLink,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+	navigationMenuTriggerStyle,
+	NavigationMenuViewport,
 } from "@/components/ui/navigation-menu"
 
 import { Toggle } from "@/components/ui/toggle"
 const Menu = () => {
-  return (
-    <NavigationMenu>
-      <NavigationMenuList>
-        {/* Desktop menu - hidden on mobile, visible on md+ */}
-        <div className="hidden md:flex md:space-x-3">
-          <NavigationMenuItem className="">
-            <NavigationMenuLink
-              asChild
-              className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`}
-            >
-              <Link to="/posts/page/1">Posts</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-          <NavigationMenuItem className="">
-            <NavigationMenuLink
-              asChild
-              className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`}
-            >
-              <Link to="/about">About</Link>
-            </NavigationMenuLink>
-          </NavigationMenuItem>
-        </div>
+	return (
+		<NavigationMenu>
+			<NavigationMenuList>
+				{/* Desktop menu - hidden on mobile, visible on md+ */}
+				<div className="hidden md:flex md:space-x-3">
+					<NavigationMenuItem className="">
+						<NavigationMenuLink
+							asChild
+							className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`}
+						>
+							<Link to="/posts/page/1">Posts</Link>
+						</NavigationMenuLink>
+					</NavigationMenuItem>
+					<NavigationMenuItem className="">
+						<NavigationMenuLink
+							asChild
+							className={`${navigationMenuTriggerStyle()} border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold transition-colors`}
+						>
+							<Link to="/about">About</Link>
+						</NavigationMenuLink>
+					</NavigationMenuItem>
+				</div>
 
-        {/* Mobile dropdown - visible only on small screens */}
-        <NavigationMenuItem className="md:hidden px-4">
-          <NavigationMenuTrigger className="border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold border-none">
-            <MenuIcon />
-          </NavigationMenuTrigger>
+				{/* Mobile dropdown - visible only on small screens */}
+				<NavigationMenuItem className="md:hidden px-4">
+					<NavigationMenuTrigger className="border-0 rounded bg-accent/20 backdrop-blur-md hover:bg-accent/40 active:bg-accent/40 focus-visible:outline-none font-semibold border-none">
+						<MenuIcon />
+					</NavigationMenuTrigger>
 
-          <NavigationMenuContent className="bg-accent/20 border-none active:border-none">
-            <NavigationMenuLink asChild>
-              <Link to="/posts/page/1" className="block">
-                Posts
-              </Link>
-            </NavigationMenuLink>
-            <NavigationMenuLink asChild>
-              <Link to="/about" className="block">
-                About
-              </Link>
-            </NavigationMenuLink>
-          </NavigationMenuContent>
-        </NavigationMenuItem>
-      </NavigationMenuList>
-      <NavigationMenuViewport />
-    </NavigationMenu>
-  )
+					<NavigationMenuContent className="bg-accent/20 border-none active:border-none">
+						<NavigationMenuLink asChild>
+							<Link to="/posts/page/1" className="block">
+								Posts
+							</Link>
+						</NavigationMenuLink>
+						<NavigationMenuLink asChild>
+							<Link to="/about" className="block">
+								About
+							</Link>
+						</NavigationMenuLink>
+					</NavigationMenuContent>
+				</NavigationMenuItem>
+			</NavigationMenuList>
+			<NavigationMenuViewport />
+		</NavigationMenu>
+	)
 }
 
 const Header = () => {
-  const { theme, setTheme } = useTheme()
-  return (
-    <header className="w-full h-15 flex items-center justify-center border-b border-border border-b-1 fixed top-0 z-20 bg-sidebar">
-      <div
-        className="absolute inset-0 opacity-70 dark:opacity-40"
-        style={{
-          backgroundImage: `url(${headerImage})`,
-          backgroundSize: "cover",
-          backgroundPosition: "center 30%",
-          backgroundRepeat: "no-repeat",
-          filter: "blur(0px) grayscale(10%)",
-        }}
-      />
+	const { theme, setTheme } = useTheme()
+	return (
+		<header className="w-full h-15 flex items-center justify-center border-b border-border border-b-1 fixed top-0 z-20 bg-sidebar">
+			<div
+				className="absolute inset-0 opacity-70 dark:opacity-40"
+				style={{
+					backgroundImage: `url(${headerImage})`,
+					backgroundSize: "cover",
+					backgroundPosition: "center 30%",
+					backgroundRepeat: "no-repeat",
+					filter: "blur(0px) grayscale(10%)",
+				}}
+			/>
 
-      <div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/30 to-background/40 dark:from-background/60 dark:via-background/50 dark:to-background/60" />
+			<div className="absolute inset-0 bg-gradient-to-b from-background/40 via-background/30 to-background/40 dark:from-background/60 dark:via-background/50 dark:to-background/60" />
 
-      <div className="w-full px-0 md:px-4 flex items-center justify-between">
-        <div className="flex items-center md:px-0 px-4">
-          <Button
-            variant="ghost"
-            asChild
-            className="border-0 rounded bg-accent/40 backdrop-blur-sm hover:bg-background/40 active:bg-background/40 focus-visible:outline-none transition-colors"
-            //            className="border-0 rounded-none bg-background/20 backdrop-blur-sm hover:bg-background/40 transition-colors"
-            //						className="border-0 rounded-none bg-background/40 backdrop-blur-md hover:bg-background transition-colors"
-            //
-            //className="border md:border-none rounded-none z-500"
-          >
-            <Link to="/">
-              <span className="text-xl tracking-normal font-semibold">
-                Systems Obscure
-              </span>
-            </Link>
-          </Button>
-        </div>
-        <div className="flex itemr justify-between md:gap-4 z-500">
-          {/*
+			<div className="w-full px-0 md:px-4 flex items-center justify-between">
+				<div className="flex items-center md:px-0 px-4">
+					<Button
+						variant="ghost"
+						asChild
+						className="border-0 rounded bg-accent/40 backdrop-blur-sm hover:bg-background/40 active:bg-background/40 focus-visible:outline-none transition-colors"
+					//            className="border-0 rounded-none bg-background/20 backdrop-blur-sm hover:bg-background/40 transition-colors"
+					//						className="border-0 rounded-none bg-background/40 backdrop-blur-md hover:bg-background transition-colors"
+					//
+					//className="border md:border-none rounded-none z-500"
+					>
+						<Link to="/">
+							<span className="text-xl tracking-normal font-semibold">
+								Systems Obscure
+							</span>
+						</Link>
+					</Button>
+				</div>
+				<div className="flex itemr justify-between md:gap-4 z-500">
+					{/*
 <Toggle
 						className="border bg-background rounded-none"
 						pressed={theme === "dark"}
@@ -115,9 +115,9 @@ const Header = () => {
 
 			*/}
 
-          <Menu />
+					<Menu />
 
-          {/*
+					{/*
           <div className="hidden md:block">
             <Button variant="ghost">
               <GitMerge /> Forgejo
@@ -126,10 +126,10 @@ const Header = () => {
           </div>
 
 					*/}
-        </div>
-      </div>
-    </header>
-  )
+				</div>
+			</div>
+		</header>
+	)
 }
 
 export { Header }
diff --git a/src/pages/about.tsx b/src/pages/about.tsx
index e2ec9d5..421ce8e 100644
--- a/src/pages/about.tsx
+++ b/src/pages/about.tsx
@@ -21,7 +21,7 @@ const AboutPage = () => {
           <a
             href="https://www.tnmoc.org/"
             target="_blank"
-            className="text-[#83a598] hover:text-accent/90"
+            className="text-primary hover:text-primary/80"
           >
             National Museum of Computing
           </a>
@@ -43,7 +43,7 @@ const AboutPage = () => {
         <a
           href="https://en.wikipedia.org/wiki/ITV_(TV_network)"
           target="_blank"
-          className="underline decoration-1 text-[#83a598] hover:text-accent/90 underline-offset-4"
+          className="underline decoration-1 hover:text-primary/80 underline-offset-4"
         >
           ITV
         </a>{" "}
@@ -53,7 +53,7 @@ const AboutPage = () => {
         <a
           href="https://en.wikipedia.org/wiki/BBC"
           target="_blank"
-          className="underline decoration-1 text-[#83a598] hover:text-accent/90underline-offset-4"
+          className="underline decoration-1 hover:text-primary/80 underline-offset-4"
         >
           BBC
         </a>{" "}
@@ -61,7 +61,7 @@ const AboutPage = () => {
         <a
           href="https://www.arria.com/"
           target="_blank"
-          className="underline decoration-1 text-[#83a598] hover:text-accent/90 underline-offset-4"
+          className="underline decoration-1 hover:text-primary/80 underline-offset-4"
         >
           Arria NLG
         </a>{" "}
@@ -96,7 +96,7 @@ const AboutPage = () => {
         I self-host my own Git forge at{" "}
         <a
           href="https://forgejo.systemsobscure.net/thomasabishop"
-          className="underline decoration-1 text-[#83a598] hover:text-accent/90 underline-offset-2"
+          className="underline decoration-1 hover:text-primary/80 underline-offset-4"
         >
           forgejo.systemsobscure.net
         </a>{" "}
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 16caaeb..81a52f6 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -1,38 +1,38 @@
 :root {
-  --radius: 0.3rem;
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.556 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: oklch(0.205 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
-  --font-monospaced: "Jetbrains Mono", monospace;
-  --font-sansserif: "Inter", sans-serif;
+	--radius: 0.3rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+	--font-monospaced: "Jetbrains Mono", monospace;
+	--font-sansserif: "Inter", sans-serif;
 }
 
 /* .dark { */
@@ -70,45 +70,45 @@
 /* } */
 
 .dark {
-  --background: oklch(0.2 0 0);
-  /* Softer dark gray instead of 0.145 */
-  --foreground: oklch(0.9 0 0);
-  /* Softer off-white instead of 0.985 */
-  --card: oklch(0.22 0 0);
-  /* Slightly lighter card */
-  --card-foreground: oklch(0.9 0 0);
-  /* Match foreground */
-  --popover: oklch(0.22 0 0);
-  --popover-foreground: oklch(0.9 0 0);
-  --primary: oklch(0.85 0 0);
-  /* Less harsh white */
-  --primary-foreground: oklch(0.22 0 0);
-  --secondary: oklch(0.3 0 0);
-  /* Lighter secondary */
-  --secondary-foreground: oklch(0.9 0 0);
-  --muted: oklch(0.3 0 0);
-  --muted-foreground: oklch(0.65 0 0);
-  /* Slightly softer */
-  --accent: #458588;
+	--background: oklch(0.2 0 0);
+	/* Softer dark gray instead of 0.145 */
+	--foreground: oklch(0.9 0 0);
+	/* Softer off-white instead of 0.985 */
+	--card: oklch(0.22 0 0);
+	/* Slightly lighter card */
+	--card-foreground: oklch(0.9 0 0);
+	/* Match foreground */
+	--popover: oklch(0.22 0 0);
+	--popover-foreground: oklch(0.9 0 0);
+	--primary: oklch(0.85 0 0);
+	/* Less harsh white */
+	--primary-foreground: oklch(0.22 0 0);
+	--secondary: oklch(0.3 0 0);
+	/* Lighter secondary */
+	--secondary-foreground: oklch(0.9 0 0);
+	--muted: oklch(0.3 0 0);
+	--muted-foreground: oklch(0.65 0 0);
+	/* Slightly softer */
+	--accent: #a89984;
 
-  --accent-foreground: oklch(0.9 0 0);
-  --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 15%);
-  /* Slightly more visible borders */
-  --input: oklch(1 0 0 / 18%);
-  --ring: oklch(0.556 0 0);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.22 0 0);
-  /* Match card */
-  --sidebar-foreground: oklch(0.9 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.9 0 0);
-  --sidebar-accent: oklch(0.3 0 0);
-  --sidebar-accent-foreground: oklch(0.9 0 0);
-  --sidebar-border: oklch(1 0 0 / 15%);
-  --sidebar-ring: oklch(0.556 0 0);
+	--accent-foreground: oklch(0.9 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 15%);
+	/* Slightly more visible borders */
+	--input: oklch(1 0 0 / 18%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.22 0 0);
+	/* Match card */
+	--sidebar-foreground: oklch(0.9 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.9 0 0);
+	--sidebar-accent: oklch(0.3 0 0);
+	--sidebar-accent-foreground: oklch(0.9 0 0);
+	--sidebar-border: oklch(1 0 0 / 15%);
+	--sidebar-ring: oklch(0.556 0 0);
 }
diff --git a/src/templates/BlogTemplate.tsx b/src/templates/BlogTemplate.tsx
index a6b54cc..031dc39 100644
--- a/src/templates/BlogTemplate.tsx
+++ b/src/templates/BlogTemplate.tsx
@@ -10,31 +10,31 @@ const BlogTemplate = () => {
   const { posts } = usePosts()
   const post = posts?.find((x) => x.slug === slug)
 
-  return (
-    <MainTemplate>
-      {!post ? (
-        <div>Loading...</div>
-      ) : (
-        <>
-          <div className="mb-5">
-            <h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2>
-          </div>
-          <div className="flex md:flex-row md:justify-between flex-col mb-8">
-            <span className="text-muted-foreground">
-              {convertDate(post?.date)}
-            </span>
-            <div className="flex gap-1 mt-3 md:mt-0">
-              {post?.tags?.map((tag, i) => (
-                <Badge asChild variant="secondary" className="">
-                  <Link key={i} to={`/tags/${tag}`}>
-                    {tag}
-                  </Link>
-                </Badge>
-              ))}
-            </div>
-          </div>
-          <div
-            className="
+	return (
+		<MainTemplate>
+			{!post ? (
+				<div>Loading...</div>
+			) : (
+				<>
+					<div className="mb-5">
+						<h2 className="text-3xl font-bold lg:text-3xl">{post?.title}</h2>
+					</div>
+					<div className="flex md:flex-row md:justify-between flex-col mb-8">
+						<span className="text-muted-foreground">
+							{convertDate(post?.date)}
+						</span>
+						<div className="flex gap-1 mt-3 md:mt-0">
+							{post?.tags?.map((tag, i) => (
+								<Badge asChild variant="secondary" className="">
+									<Link key={i} to={`/tags/${tag}`}>
+										{tag}
+									</Link>
+								</Badge>
+							))}
+						</div>
+					</div>
+					<div
+						className="
 							[&>h2]:text-xl [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
 							[&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5
 							[&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold  [&>h4:not(:first-child)]:mt-4
@@ -58,7 +58,7 @@ const BlogTemplate = () => {
 							[&>li]:leading-[1.6] 
 							[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal		
 							[&>p]:mt-6 [&>p]:leading-[1.6]
-							[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-accent/80 [&_a]:text-[#83a598]
+							[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground		
 							[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
 							[&>figure>img]:w-full
 							[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center