diff --git a/src/components/EolasListing.jsx b/src/components/EolasListing.jsx
index 5b76ac4..db59768 100644
--- a/src/components/EolasListing.jsx
+++ b/src/components/EolasListing.jsx
@@ -3,57 +3,57 @@ import eolasApi from "@/api/eolas-api"
 import { convertDate } from "@/utils/convertDate"
 
 const EolasEntries = ({ entries }) => {
-	return (
-		entries &&
-		entries.map((entry, i) => (
-			<ul>
-				<li className="mb-4">
-					<div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
-						<span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
-							{convertDate(entry.last_modified)}
-						</span>
-						<a
-							href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
-							key={i}
-							className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
-						>
-							{entry.title.replace(/_/g, " ")}
-						</a>
-					</div>
-				</li>
-			</ul>
-		))
-	)
+  return (
+    entries &&
+    entries.map((entry, i) => (
+      <ul>
+        <li className="mb-4">
+          <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
+            <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
+              {convertDate(entry.last_modified)}
+            </span>
+            <a
+              href={`https://eolas.systemsobscure.net/entries/${entry.title}`}
+              key={i}
+              className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1 "
+            >
+              {entry.title.replace(/_/g, " ")}
+            </a>
+          </div>
+        </li>
+      </ul>
+    ))
+  )
 }
 
 const EolasListing = () => {
-	const { data, isLoading, error } = useQuery({
-		queryKey: [`eolas_listing`],
-		queryFn: () =>
-			eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
-	})
+  const { data, isLoading, error } = useQuery({
+    queryKey: [`eolas_listing`],
+    queryFn: () =>
+      eolasApi.get(`entries?limit=5&sort=date`).then((res) => res.data),
+  })
 
-	return (
-		<div className="container mx-auto p-4 grow">
-			<div className="space-my-8">
-				<section className="container">
-					<h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! inline-block  h2-home">
-						{`zettelkasten recent`}
-					</h2>
+  return (
+    <div className="container mx-auto py-4 px-1 md:p-4 grow">
+      <div className="space-my-8">
+        <section className="container">
+          <h2 className="text-2xl font-semibold mb-4 text-[#d65d0e]! h2-home scanlined px-2">
+            {`eolas recent`}
+          </h2>
 
-					{isLoading && <div>Loading...</div>}
+          {isLoading && <div>Loading...</div>}
 
-					{error ? (
-						<div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
-							Error fetching recent learning
-						</div>
-					) : (
-						<EolasEntries entries={data?.data} />
-					)}
-				</section>
-			</div>
-		</div>
-	)
+          {error ? (
+            <div className="border-l-2 border-[#cc241d] px-3 bg-[#cc241d]/20">
+              Error fetching recent learning
+            </div>
+          ) : (
+            <EolasEntries entries={data?.data} />
+          )}
+        </section>
+      </div>
+    </div>
+  )
 }
 
 export default EolasListing
diff --git a/src/containers/CodeStats.jsx b/src/containers/CodeStats.jsx
index 5a10d7e..f77091f 100644
--- a/src/containers/CodeStats.jsx
+++ b/src/containers/CodeStats.jsx
@@ -67,11 +67,11 @@ const CodeStats = () => {
       .slice(0, 4)
 
   return (
-    <div className="container mx-auto p-4 grow">
+    <div className="container mx-auto py-4 px-1 md:p-4 grow ">
       <div className="space-my-8">
         <section className="container">
           <div className="flex flex-col md:flex-row items-start md:items-center md:justify-between">
-            <h2 className="text-2xl font-semibold mb-4 text-[#458588]! inline-block  h2-home">
+            <h2 className="text-2xl font-semibold mb-4 text-[#458588]!  h2-home scanlined px-2">
               {`code stats`}
             </h2>
             <div className="mb-4 text-sm text-muted">
diff --git a/src/containers/PostListing.jsx b/src/containers/PostListing.jsx
index a4c0a15..4ac4f8b 100644
--- a/src/containers/PostListing.jsx
+++ b/src/containers/PostListing.jsx
@@ -5,23 +5,23 @@ import { convertDate } from "@/utils/convertDate"
 
 const PostListing = ({ posts, title, showAllButton }) => {
   return (
-    <div className="container mx-auto p-4 grow">
+    <div className="container mx-auto py-4 px-1 md:p-4 grow">
       <div className="space-my-8">
         <section className="container">
-          <h2 className="text-2xl font-semibold mb-4  block h2-home">
+          <h2 className="text-2xl font-semibold mb-4  block h2-home scanlined px-2">
             {`${title}`}
           </h2>
           {posts.map((post) => (
             <ul>
               <li className="mb-4">
-                <div className="flex justify-between items-center relative gap-3 hover:bg-[#504945]">
+                <div className="flex justify-between flex-col relative hover:bg-[#504945]">
                   <span className="overflow-hidden whitespace-nowrap text-muted-foreground shrink-0 condensed">
                     {convertDate(post.date)}
                   </span>
                   <Link
                     to={`/posts/${post.slug}`}
                     key={post.slug}
-                    className="text-right overflow-hidden text-ellipsis whitespace-nowrap min-w-0 flex-1"
+                    className="overflow-hidden text-ellipsis whitespace-nowrap min-w-0"
                   >
                     {post.title}
                   </Link>
diff --git a/src/index.css b/src/index.css
index ed4eeb7..bf3b986 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,94 +1,94 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
 @import "./styles/_variables.css";
 @import "tailwindcss";
 @import "tw-animate-css";
 
 * {
-  outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
+	outline-color: color-mix(in srgb, var(--ring) 50%, transparent);
 }
 
 html {
-  font-family: var(--font-sansserif);
+	font-family: var(--font-sansserif);
 }
 
 body {
-  background-color: var(--background);
-  color: var(--foreground);
+	background-color: var(--background);
+	color: var(--foreground);
 }
 
 .condensed {
-  font-family: "Inter";
+	font-family: "Inter";
 }
 
 figcaption {
-  font-weight: 500;
-  font-family: "Inter";
+	font-weight: 500;
+	font-family: "Inter";
 }
 
 h1 {
-  color: var(--color-orange-light);
-  font-family: "Inter";
+	color: var(--color-orange-light);
+	font-family: "Inter";
 }
 
 h2 {
-  font-family: "Inter";
-  color: var(--color-green-light);
+	font-family: "Inter";
+	color: var(--color-green-light);
 }
 
 .h2-home {
-  font-family: "Inter";
-  font-weight: 600;
+	font-family: "Inter";
+	font-weight: 600;
 }
 
 h3 {
-  font-family: "Inter";
-  font-weight: 600 !important;
+	font-family: "Inter";
+	font-weight: 600 !important;
 }
 
 .monospaced-font {
-  font-family: "iA Writer Mono";
+	font-family: "iA Writer Mono";
 }
 
 .scanlined {
-  position: relative;
-  /* Add this */
+	position: relative;
+	/* Add this */
 }
 
 .scanlined::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
-  background-size: 2px 2px;
-  background-repeat: repeat;
-  pointer-events: none;
-  z-index: 9999;
-  /* Might want to lower this too */
+	content: "";
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	background-image: linear-gradient(rgba(0, 0, 0, 0.4) 1px, transparent 1px);
+	background-size: 2px 2px;
+	background-repeat: repeat;
+	pointer-events: none;
+	z-index: 9999;
+	/* Might want to lower this too */
 }
 
 code {
-  font-family: var(--font-monospaced);
+	font-family: var(--font-monospaced);
 }
 
 p code {
-  color: var(--foreground);
-  background: #504945;
-  font-size: 14px;
-  padding: 0.2rem 0.3rem;
-  border-radius: var(--radius);
-  font-weight: 500;
+	color: var(--foreground);
+	background: #504945;
+	font-size: 14px;
+	padding: 0.2rem 0.3rem;
+	border-radius: var(--radius);
+	font-weight: 500;
 }
 
 .shiki {
-  padding: 1rem 1.2rem;
-  border-radius: 0;
-  overflow-x: auto;
-  margin: 1.5rem 0;
-  line-height: 1.3;
-  /* counter-reset: line; */
-  font-family: var(--font-monospaced) !important;
-  font-size: 14px !important;
+	padding: 1rem 1.2rem;
+	border-radius: 0;
+	overflow-x: auto;
+	margin: 1.5rem 0;
+	line-height: 1.3;
+	/* counter-reset: line; */
+	font-family: var(--font-monospaced) !important;
+	font-size: 14px !important;
 }
diff --git a/src/pages/about.jsx b/src/pages/about.jsx
index e90c689..330a70e 100644
--- a/src/pages/about.jsx
+++ b/src/pages/about.jsx
@@ -4,7 +4,7 @@ import portrait from "../images/portrait-compressed.jpg"
 const AboutPage = () => {
 	return (
 		<MainTemplate>
-			<div className="container mx-auto p-4">
+			<div className="container mx-auto py-4 px-1 md:p-4">
 				<figure className="w-full flex flex-col items-center mb-6">
 					<div className="scanlined inline-block">
 						<img
diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index 4681652..ae7c468 100644
--- a/src/pages/home.jsx
+++ b/src/pages/home.jsx
@@ -10,7 +10,7 @@ const HomePage = () => {
   const { posts } = usePosts()
   return (
     <MainTemplate>
-      <div className="container mx-auto p-4 grow">
+      <div className="container mx-auto md:p-4 py-4 px-1 grow">
         <div className="space-my-8">
           <section className="space-y-4">
             <div className="gap-6 flex flex-col items-center sm:flex-row">
@@ -23,7 +23,7 @@ const HomePage = () => {
                     systems obscure
                   </div>
                 </h1>
-                <p className="text-center sm:text-left md:text-left text-muted  font-medium text-lg">
+                <p className="text-center sm:text-left md:text-left text-muted font-medium">
                   Another software engineer with a blog. This is my technical
                   scrapbook and digital garden.
                 </p>
@@ -40,10 +40,10 @@ const HomePage = () => {
         posts={posts.filter((post) => post.tags.includes("highlight"))}
       />
 
-      <div className="container mx-auto p-4 grow">
+      <div className="container mx-auto md:p-4 py-4 px-1 grow">
         <div className="space-my-8">
           <section className="container">
-            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]!  block  h2-home">
+            <h2 className="text-2xl font-semibold mb-4 text-[#d3869b]! h2-home scanlined px-2">
               {`projects`}
             </h2>
             <ul>
diff --git a/src/styles/_variables.css b/src/styles/_variables.css
index 4b25c4a..c619c2d 100644
--- a/src/styles/_variables.css
+++ b/src/styles/_variables.css
@@ -36,7 +36,7 @@
 	--sidebar-accent-foreground: oklch(0.205 0 0);
 	--sidebar-border: oklch(0.922 0 0);
 	--sidebar-ring: oklch(0.708 0 0);
-	--font-monospaced: "IBM Plex Mono";
+	--font-monospaced: "Jetbrains Mono";
 	--font-sansserif: "Inter", sans-serif;
 }
 
diff --git a/src/templates/BlogTemplate.jsx b/src/templates/BlogTemplate.jsx
index ce6fcd9..552aa8e 100644
--- a/src/templates/BlogTemplate.jsx
+++ b/src/templates/BlogTemplate.jsx
@@ -5,41 +5,41 @@ import { convertDate } from "@/utils/convertDate"
 import { usePosts } from "@/hooks/usePosts"
 
 const BlogTemplate = () => {
-	const { slug } = useParams()
-	const { posts } = usePosts()
-	const post = posts?.find((x) => x.slug === slug)
+  const { slug } = useParams()
+  const { posts } = usePosts()
+  const post = posts?.find((x) => x.slug === slug)
 
-	return (
-		<MainTemplate>
-			<div className="container mx-auto p-4 grow">
-				{!post ? (
-					<div>Loading...</div>
-				) : (
-					<article className="prose prose-lg max-w-none">
-						<header className="mb-6 pb-4">
-							<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-2">
-								{post?.title}
-							</h1>
-							<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
-								<time datetime={convertDate(post?.date)} className="text-sm">
-									{convertDate(post?.date)}
-								</time>
-								<div className="flex flex-wrap gap-3 align-center">
-									{post?.tags?.map((tag, i) => (
-										<Link
-											className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
-											key={i}
-											to={`/tags/${tag}`}
-										>
-											{tag}
-										</Link>
-									))}
-								</div>
-							</div>
-						</header>
+  return (
+    <MainTemplate>
+      <div className="container mx-auto py-4 px-1 md:p-4 grow">
+        {!post ? (
+          <div>Loading...</div>
+        ) : (
+          <article className="prose prose-lg max-w-none">
+            <header className="mb-6 pb-4">
+              <h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-2">
+                {post?.title}
+              </h1>
+              <div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
+                <time datetime={convertDate(post?.date)} className="text-sm">
+                  {convertDate(post?.date)}
+                </time>
+                <div className="flex flex-wrap gap-3 align-center">
+                  {post?.tags?.map((tag, i) => (
+                    <Link
+                      className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
+                      key={i}
+                      to={`/tags/${tag}`}
+                    >
+                      {tag}
+                    </Link>
+                  ))}
+                </div>
+              </div>
+            </header>
 
-						<div
-							className="
+            <div
+              className="
 							[&>h2]:text-2xl [&>h2]:font-bold [&>h2]:my-4 [&>h2]:text-[#ebdbb2]!
 							[&>h3]:text-xl [&>h3]:font-bold [&>h3]:my-4 [&>h3]:text-[#ebdbb2]!
 							[&>h4]:text-lg [&>h4]:font-bold [&>h4]:my-4 [&>h4]:text-[#ebdbb2]!
@@ -65,13 +65,13 @@ const BlogTemplate = () => {
 							[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
 							[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
 								"
-							dangerouslySetInnerHTML={{ __html: post?.html }}
-						/>
-					</article>
-				)}
-			</div>
-		</MainTemplate>
-	)
+              dangerouslySetInnerHTML={{ __html: post?.html }}
+            />
+          </article>
+        )}
+      </div>
+    </MainTemplate>
+  )
 }
 
 export default BlogTemplate
diff --git a/src/templates/MainTemplate.jsx b/src/templates/MainTemplate.jsx
index cdb8e3d..a3eb6b9 100644
--- a/src/templates/MainTemplate.jsx
+++ b/src/templates/MainTemplate.jsx
@@ -3,66 +3,66 @@
 import gruvboxComputer from "../images/gruvbox-computer.svg"
 import { Link } from "react-router"
 const Header = () => {
-	return (
-		<header className="py-6">
-			<nav className="bg-sidebar container mx-auto justify-between flex gap-1">
-				<Link to="/">
-					<div className="scanlined">
-						<img src={gruvboxComputer} className="w-11" />
-					</div>
-				</Link>
-				<ul class="flex space-x-4 px-4 py-2 text-sm">
-					<li class="flex flex-col items-center justify-center">
-						<Link
-							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
-							to="/posts"
-						>
-							posts
-						</Link>
-					</li>
-					<li class="flex flex-col items-center justify-center">
-						<Link
-							class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
-							to="/about"
-						>
-							about
-						</Link>
-					</li>
-				</ul>
-			</nav>
-		</header>
-	)
+  return (
+    <header className="md:py-6">
+      <nav className="bg-sidebar container mx-auto justify-between flex gap-1">
+        <Link to="/">
+          <div className="scanlined">
+            <img src={gruvboxComputer} className="w-11" />
+          </div>
+        </Link>
+        <ul class="flex space-x-4 px-4 py-2 text-sm">
+          <li class="flex flex-col items-center justify-center">
+            <Link
+              class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
+              to="/posts"
+            >
+              posts
+            </Link>
+          </li>
+          <li class="flex flex-col items-center justify-center">
+            <Link
+              class="text-primary underline underline-offset-3 hover:text-[#689d6a] condensed font-semibold text-lg"
+              to="/about"
+            >
+              about
+            </Link>
+          </li>
+        </ul>
+      </nav>
+    </header>
+  )
 }
 
 const Footer = () => {
-	return (
-		<footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
-			<nav>
-				<ul className="flex flex-row justify-start gap-4">
-					<li className="flex flex-col items-center justify-center">
-						<a
-							className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
-							href="https://forgejo.systemsobscure.net/thomasabishop"
-							target="blank"
-						>
-							forgejo
-						</a>
-					</li>
-				</ul>
-			</nav>
-		</footer>
-	)
+  return (
+    <footer className="bg-sidebar container mx-auto px-4 mt-10 mb-8">
+      <nav>
+        <ul className="flex flex-row justify-start gap-4">
+          <li className="flex flex-col items-center justify-center">
+            <a
+              className="text-primary underline underline-offset-3 hover:text-[#689d6a] font-semibold"
+              href="https://forgejo.systemsobscure.net/thomasabishop"
+              target="blank"
+            >
+              forgejo
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </footer>
+  )
 }
 
 const MainTemplate = ({ children }) => {
-	return (
-		<div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
-			<main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
-				<Header />
-				<div>{children}</div>
-				<Footer />
-			</main>
-		</div>
-	)
+  return (
+    <div className="antialiased max-w-3xl mt-3 mx-auto bg-[#282828] no-scanlines wrapper">
+      <main className="flex-auto min-w-0 mt-0 flex flex-col px-2 md:px-0">
+        <Header />
+        <div>{children}</div>
+        <Footer />
+      </main>
+    </div>
+  )
 }
 export default MainTemplate