diff --git a/src/pages/journal/index.astro b/src/pages/journal/index.astro
index 04bdeab..64d2799 100644
--- a/src/pages/journal/index.astro
+++ b/src/pages/journal/index.astro
@@ -38,28 +38,15 @@ const ramblings = await getSortedPosts("Ramblings")
 	<body>
 		<main>
 			<Header title="journal →" description="Words I wanted to say." />
-			
-			<h2>writings</h2>
+			<p class="warning">
+				<strong>Tread lightly—</strong>much of my poetry deals in themes such as love, loss, and other brave
+				forms of darkness. Check in with yourself before going on, and touch faith—
+			</p>
 			<ul class="post-list">
 				{writings.map((post: any) => (
 					<li>
-						<div class="post-meta">
-							<span class="published-date">{post.data.published_date}</span>
-							<span class="description">{post.data.description}</span>
-						</div>
-						<a href={`/journal/${post.id}`}>{post.data.title}</a>
-					</li>
-				))}
-			</ul>
-			<h2>ramblings</h2>
-			<ul class="post-list">
-				{ramblings.map((post: any) => (
-					<li>
-						<div class="post-meta">
-							<span class="published-date">{post.data.published_date}</span>
-							<span class="description">{post.data.description}</span>
-						</div>
-						<a href={`/journal/${post.id}`}>{post.data.title}</a>
+						<span class="post-title"><a href={`/journal/${post.id}`}>{post.data.title}</a></span>
+						<span class="published-date">{post.data.published_date.toLocaleString("en-CA", {year: "numeric", month: "long", day: "numeric"})}</span>
 					</li>
 				))}
 			</ul>
diff --git a/src/styles/journal.scss b/src/styles/journal.scss
index a0c3a37..5275b61 100644
--- a/src/styles/journal.scss
+++ b/src/styles/journal.scss
@@ -10,92 +10,94 @@ main {
     margin: 20px;
 }
 
+p.warning {
+    
+    strong {
+        font-weight: 600;
+    }
+    margin-bottom: 5vh;
+    line-height: 1.5;
+    font-size: 1.125rem;
+    border-left: 5px solid color-mix(in srgb, var(--text-color), transparent 90%);
+    padding-left: 20px;
+}
 
-h2 {
-    font-family: var(--font-heading);
-    font-size: 3rem;
-    font-weight: 350;
-    line-height: 0.9;
-    letter-spacing: -0.04em;
-    margin: 0.5em 0;
+header {
+    margin-bottom: 1rem;
 }
 
 ul.post-list {
     display: grid;
-    grid-template-columns: 15rem 1fr;
+    grid-template-columns: 1fr 15rem;
     row-gap: 0.8rem;
-    column-gap: 4rem;
+    column-gap: 1rem;
     align-items: last baseline;
 
     li {
         display: contents;
+        font-size: 1.5rem;
+        font-weight: 400;
+        // font-family: var(--font-heading);
 
-        div.post-meta {
-            span {
-                text-wrap-mode: nowrap;
-                text-transform: uppercase;
-                display: block
-            }
+        span.published-date {
+            text-wrap-mode: nowrap;
+            display: block;
+        }
+        
+        span.post-title {
+            display: flex;
+            align-items: baseline;
+            gap: 1rem;
 
-            span.published-date {
-                font-family: var(--font-code);
-                font-variant-numeric: tabular-nums;
+            a {
+                color: var(--text-color);
             }
 
-            span.description {
-                font-family: var(--font-code);
+            &::after {
+                flex: 1;
+                content: "";
+                border-bottom: 1px solid var(--text-color);
+                transform: translateY(0.12em);
             }
-
         }
 
-        a {
-            display: block;
-            font-family: var(--font-heading);
-            color: var(--text-color);
-            font-size: 1.5rem;
-        }
     }
 }
 
 @media (max-width: 600px) {
-    header {
-        grid-template-columns: 1fr;
-        grid-template-rows: auto;
 
-        div.title h1 {
-            font-size: 4rem;
-        }
-    }
 
     h2 {
         font-size: 2rem;
     }
 
     ul.post-list {
+        grid-template-columns: 1fr;
+        grid-template-rows: auto;
+        gap: 1.5rem;
+
         li {
-            display: block;
+            display: flex;
+            flex-direction: column-reverse;
+
+            // overflow: hidden;
+            // text-overflow: ellipsis;
 
-            div.post-meta {
+            span.published-date {
                 opacity: 65%;
-                overflow: hidden;
-                text-overflow: ellipsis;
+                display: inline;
+                font-size: 1rem;
+            }
 
-                span {
-                    display: inline;
-                    font-size: 0.8rem;
-                }
+            span.post-title {
+                display: block;
+                font-size: 1.25rem;
 
-                span.published-date::after {
-                    content: ' · '
+                &::after {
+                    display: none;
                 }
             }
-            
-            a {
-                font-size: 1.25rem;
-            }
         }
-        
-        grid-template-columns: 1fr;
-        grid-template-rows: auto;
+
     }
 }
\ No newline at end of file