diff --git a/frontend/src/app.css b/frontend/src/app.css
index ba874f3..7cf1f36 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -10,10 +10,10 @@
         @apply bg-base text-text outline outline-1 outline-slate-400 drop-shadow-md transition-colors duration-700
     }
     h1 {
-        @apply text-2xl font-bold py-2 mt-10 text-text
+        @apply text-2xl font-bold py-2 mt-3 mb-1 text-text
     }
     h2 {
-        @apply text-xl font-semibold py-2 mt-5 text-subtext0
+        @apply text-xl font-semibold py-2 mt-3 text-subtext0
     }
     h3 {
         @apply text-lg italic mt-5
@@ -34,7 +34,7 @@
     }
     @media (hover: hover) {
         a:hover {
-            @apply invert drop-shadow-2xl transition-all
+            @apply invert drop-shadow-2xl transition-all duration-300 ease-in
         }
     }
 }
diff --git a/frontend/src/routes/api/posts/+server.ts b/frontend/src/routes/api/posts/+server.ts
index c674488..b04fa94 100644
--- a/frontend/src/routes/api/posts/+server.ts
+++ b/frontend/src/routes/api/posts/+server.ts
@@ -15,6 +15,7 @@ async function getPosts():Promise<BlogPost[]> {
             metadata.published && posts.push(post)
         }
     }
+    posts.sort((a: BlogPost, b:BlogPost) => new Date(a.date).getTime() - new Date(b.date).getTime())
     return posts
 }
 
diff --git a/frontend/src/routes/blog/+page.svelte b/frontend/src/routes/blog/+page.svelte
index b71d4d3..cb2e82b 100644
--- a/frontend/src/routes/blog/+page.svelte
+++ b/frontend/src/routes/blog/+page.svelte
@@ -3,12 +3,16 @@
     export let data: { posts: BlogPost[] }
 </script>
 
+<header>
+    <h1>Blog Posts</h1>
+</header>
+
 <section>
     <ul class="posts" >
         {#each data.posts as post}
             <li class="post">
-                <a href="/blog/{post.slug}" class="title">{post.title}</a>
-                <p class="date">{post.date}</p>
+                <a href="/blog/{post.slug}" class="title text-lg font-bold">{post.title}</a>
+                <p class="date text-overlay1 italic">Published: {post.date}</p>
                 <p class="description">{post.description}</p>
             </li>
         {/each}
diff --git a/frontend/src/routes/header.svelte b/frontend/src/routes/header.svelte
index e763c29..b9df76f 100644
--- a/frontend/src/routes/header.svelte
+++ b/frontend/src/routes/header.svelte
@@ -29,7 +29,7 @@ import { darkMode } from '../stores'
             <label for="dark-mode-toggle" />
             <button
                 id="dark-mode-toggle"
-                class={ "h-8 w-8 p-1 text-sapphire outline outline-1 outline-overlay0 shadow-md transition-all "
+                class={ "h-8 w-8 p-1 text-sapphire outline outline-1 outline-overlay0 shadow-md transition-all ease-in duration-300 "
                     + "font-bold rounded-md [@media(hover:hover)]:hover:bg-sapphire [@media(hover:hover)]:hover:text-base" }
                 on:click={ () => {darkMode.set(!$darkMode)} }
             >