diff --git a/src/components/BlogHeader.astro b/src/components/BlogHeader.astro
index 28d076d..505f2d3 100644
--- a/src/components/BlogHeader.astro
+++ b/src/components/BlogHeader.astro
@@ -1,5 +1,6 @@
 ---
-import { format } from "date-fns-tz";
+import { format, add } from "date-fns";
+import FormattedDate from "@components/FormattedDate.astro";
 
 interface Props {
   title: String;
@@ -12,6 +13,6 @@ const { title, date } = Astro.props;
 <div class="blog-header">
   <h2>{title}</h2>
   <h3 style={{ fontSize: "1.1rem" }}>
-    {`🗓️ ${format(new Date(date), "MMM do, y")}`}
+    🗓️ <FormattedDate date={date} />
   </h3>
 </div>
diff --git a/src/components/FormattedDate.astro b/src/components/FormattedDate.astro
new file mode 100644
index 0000000..4634c49
--- /dev/null
+++ b/src/components/FormattedDate.astro
@@ -0,0 +1,11 @@
+---
+import { format, add } from "date-fns";
+
+interface Props {
+  date: String;
+}
+
+const { date } = Astro.props;
+---
+
+<span>{format(add(new Date(date), { hours: 6 }), "MMM do, y")}</span>
diff --git a/src/pages/archive.astro b/src/pages/archive.astro
index 40e230c..e017e15 100644
--- a/src/pages/archive.astro
+++ b/src/pages/archive.astro
@@ -1,8 +1,13 @@
 ---
 import { formatInTimeZone } from "date-fns-tz";
 import Layout from "@layouts/Layout.astro";
+import FormattedDate from "@components/FormattedDate.astro";
 
 const posts = await Astro.glob("./posts/*.md");
+posts.sort(
+  (a, b) =>
+    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
+);
 ---
 
 <Layout title="Blog Archive">
@@ -10,11 +15,7 @@ const posts = await Astro.glob("./posts/*.md");
     posts.map((post) => (
       <div>
         <a href={post.url}>{post.frontmatter.title}</a> -{" "}
-        {formatInTimeZone(
-          new Date(post.frontmatter.pubDate),
-          "America/New_York",
-          "MMM do, y"
-        )}
+        <FormattedDate date={post.frontmatter.pubDate} />
       </div>
     ))
   }
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a76d28e..6cbc23a 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -5,11 +5,15 @@ import Layout from "@layouts/Layout.astro";
 import BlogHeader from "@components/BlogHeader.astro";
 
 const posts = await Astro.glob("./posts/*.md");
+posts.sort(
+  (a, b) =>
+    Date.parse(b.frontmatter.pubDate) - Date.parse(a.frontmatter.pubDate)
+);
 ---
 
 <Layout title="Home">
   {
-    posts.map((post) => (
+    posts.slice(0, 5).map((post) => (
       <article class="post-preview">
         <div>
           <BlogHeader
diff --git a/src/pages/posts/getting-out-of-your-comfort-zone.md b/src/pages/posts/getting-out-of-your-comfort-zone.md
index d720e59..6bbb5cd 100644
--- a/src/pages/posts/getting-out-of-your-comfort-zone.md
+++ b/src/pages/posts/getting-out-of-your-comfort-zone.md
@@ -1,7 +1,7 @@
 ---
 layout: ../../layouts/BlogPost.astro
-title: "My Favorite Little Apps"
-pubDate: 2022-11-28
+title: "Getting Out of Your Comfort Zone"
+pubDate: 2022-12-10
 ---
 
 When it comes to frameworks, I’ve been firmly stuck in the React–and React-adjacent–world. Basically, my “coding comfort zone” has been vanilla JavaScript, React, and Next.js. The world of web development is much broader than that, but I’m going to be honest, I was a little scared to branch out.