diff --git a/src/pages/journal/easier-to-love-you.mdx b/src/pages/journal/easier-to-love-you.mdx
new file mode 100644
index 0000000..0f49ff9
--- /dev/null
+++ b/src/pages/journal/easier-to-love-you.mdx
@@ -0,0 +1,29 @@
+---
+layout: ../../layouts/post.astro
+title: "easier to love you"
+written_date: "2026-05-07"
+updated_date: "2026-07-22"
+description: "wait,"
+type: "Writings"
+---
+
+```
+&&&&&&&&&&&&&&&&&&&&&&&&&&                 (hello?)
+&&&&&&       wait,
+&&&              don't hang up yet—
+I'm still writing these broken melodies     &&&&&&&&&&
+&&&&&&&&                 dedicated to you, like
+&&&&&     fractured seaglass bent the rays of the sun—
+&&                and I know it's stupid, but
+don't apologize, I've heard enough                  &&
+&&&&&&&&&     can't we stay like this a little longer?
+ I wanted to show you that the sunrises are beautiful,
+&&&   even though I know you prefer the midnight moon—
+&  we'll still be best friends no matter what happens.
+&&&&&&&   don't leave me for some fickle darkness, and
+&& &&&&& &&&&& as long as I can hold your hand  &&&&&&
+&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&            I will—
+```
+
+\
+<small>Originally written for a dear friend's birthday.</small>
diff --git a/src/pages/journal/index.astro b/src/pages/journal/index.astro
index 4b17072..b94534b 100644
--- a/src/pages/journal/index.astro
+++ b/src/pages/journal/index.astro
@@ -1,7 +1,27 @@
 ---
 import "../../styles/journal.scss"
+import { Temporal } from "temporal-polyfill"
+
+type PostType = "Ramblings" | "Writings"
+
 
 const posts = Object.values(import.meta.glob('./*.mdx', { eager: true }));
+
+
+// TODO: do this better but I'm too lazy to
+const writings = posts.filter((post: any) => post.frontmatter.type === "Writings").sort((a: any, b: any) => {
+	const date1 = Temporal.PlainDate.from(a.frontmatter.written_date)
+	const date2 = Temporal.PlainDate.from(b.frontmatter.written_date)
+
+	return Temporal.PlainDate.compare(date2, date1)
+})
+
+const ramblings = posts.filter((post: any) => post.frontmatter.type === "Ramblings").sort((a: any, b: any) => {
+	const date1 = Temporal.PlainDate.from(a.frontmatter.written_date)
+	const date2 = Temporal.PlainDate.from(b.frontmatter.written_date)
+
+	return Temporal.PlainDate.compare(date2, date1)
+})
 ---
 
 <!doctype html>
@@ -21,7 +41,14 @@ const posts = Object.values(import.meta.glob('./*.mdx', { eager: true }));
 	<body>
         <main>
             <h1>journal →</h1>
-            {posts.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+			<h2>writings</h2>
+			<ul>
+				{writings.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+			</ul>
+			<h2>ramblings</h2>
+			<ul>
+				{ramblings.map((post: any) => <li><a href={post.url}>{post.frontmatter.title}</a></li>)}
+			</ul>
         </main>
 	</body>
 </html>
\ No newline at end of file
diff --git a/src/styles/journal.scss b/src/styles/journal.scss
index be1bf7e..48a0efe 100644
--- a/src/styles/journal.scss
+++ b/src/styles/journal.scss
@@ -7,9 +7,28 @@ body {
 
 h1 {
     font-family: var(--font-heading);
+    font-weight: 300;
     font-size: 2rem;
+    margin-bottom: 0.5em;
+}
+
+h2 {
+    font-size: 1.5rem;
+    margin: 0.5em 0;
+}
+
+ul {
+    list-style: dash;
+    margin: 0.5rem;
+}
+
+@counter-style dash {
+  system: cyclic;
+  symbols: "\2043";
+  suffix: " ";
 }
 
 main {
     margin: 20px;
-}
\ No newline at end of file
+}
+
diff --git a/src/styles/lib/_var.scss b/src/styles/lib/_var.scss
index c6a6fc4..e875ff8 100644
--- a/src/styles/lib/_var.scss
+++ b/src/styles/lib/_var.scss
@@ -10,6 +10,7 @@
     --font-scale: 1em;
 
 	--background-color: light-dark(#faf4ed, #212720);
+	--foreground-color: light-dark(#f2e9e1, #2a3029);
 	--title-color: light-dark(#242424, #faf4ed);
 	--heading-color: light-dark(#242424, #faf4ed);
 	--text-color: light-dark(#212720, #faf4ed);
diff --git a/src/styles/post.scss b/src/styles/post.scss
index 5595335..8ddd8b6 100644
--- a/src/styles/post.scss
+++ b/src/styles/post.scss
@@ -70,7 +70,8 @@ header {
                 font-family: var(--font-heading);
                 font-weight: 300;
                 font-size: 4.5rem;
-                letter-spacing: -0.06em;
+                line-height: 0.9;
+                letter-spacing: -0.08em;
             }
 
             p.description {
@@ -157,6 +158,14 @@ article {
         color: color-mix(in srgb, var(--text-color), transparent 30%);
         font-size: 0.8em;
     }
+
+    pre:has(code) {
+        border-radius: 5px;
+        font-family: var(--font-code);
+        padding: 2rem;
+        background-color: var(--foreground-color) !important;
+        color: var(--text-color) !important;
+    }
 }
 
 
@@ -179,8 +188,8 @@ article {
     }
 
     article {
-        margin-left: calc(5vw + 3rem);
-        margin-right: 5vw;
+        margin-left: 0;
+        margin-right: 0;
     }
 }
 
@@ -195,6 +204,8 @@ article {
                 "name";
 
             span.back {
+                font-family: var(--font-code);
+                text-transform: uppercase;
                 font-size: 1rem;
                 opacity: 65%;
             }