diff --git a/Cargo.lock b/Cargo.lock
index f0db6b0..49ad2fa 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -5275,6 +5275,7 @@ name = "web"
 version = "0.0.0"
 dependencies = [
  "anyhow",
+ "chrono",
  "client",
  "leptos",
  "leptos-use",
diff --git a/Cargo.toml b/Cargo.toml
index e969872..46b34d0 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -8,7 +8,7 @@ members = [
     "crates/server",
     "crates/test",
     "crates/types",
-    "crates/web"
+    "crates/web",
 ]
 default-members = ["crates/cli"]
 resolver = "2"
@@ -16,13 +16,17 @@ resolver = "2"
 [workspace.dependencies]
 anyhow = "1.0.86"
 http-auth-basic = "0.3.3"
-async-graphql = { version = "7.0.5", features = ["chrono", "decimal", "tracing"] }
+async-graphql = { version = "7.0.5", features = [
+    "chrono",
+    "decimal",
+    "tracing",
+] }
 async-graphql-axum = "7.0.5"
 async-trait = "0.1.80"
 axum = "0.7.5"
 axum-extra = "0.9.3"
 base64 = "0.22.1"
-chrono = { version = "0.4.38", default-features = false }
+chrono = { version = "0.4.38", default-features = false, features = ["clock"] }
 cookie = "0.18.1"
 dotenv = "0.15.0"
 fake = "2.9.2"
@@ -38,7 +42,10 @@ rand = "0.8.5"
 regex = "1.9.3"
 reqwest = "0.11"
 rust-argon2 = "2.1.0"
-rust-s3 = { version = "0.34.0", features = ["tokio-rustls-tls", "fail-on-err"], default-features = false }
+rust-s3 = { version = "0.34.0", features = [
+    "tokio-rustls-tls",
+    "fail-on-err",
+], default-features = false }
 sea-orm = "0.12"
 sea-orm-cli = { version = "0.12", default-features = false }
 sea-orm-migration = "0.12"
diff --git a/crates/web/Cargo.toml b/crates/web/Cargo.toml
index a7ac08e..2aa38ea 100644
--- a/crates/web/Cargo.toml
+++ b/crates/web/Cargo.toml
@@ -16,8 +16,9 @@ name = "townhall-web"
 path = "src/bin/main.rs"
 
 [dependencies]
+chrono = { workspace = true }
 anyhow = { workspace = true }
-leptos =  { workspace = true, features = ["csr"] }
+leptos = { workspace = true, features = ["csr"] }
 leptos_meta = { workspace = true, features = ["csr"] }
 leptos_router = { workspace = true, features = ["csr"] }
 leptos-use = { workspace = true }
diff --git a/crates/web/src/components/feed/post.rs b/crates/web/src/components/feed/post.rs
index a2d81bd..d2a3b76 100644
--- a/crates/web/src/components/feed/post.rs
+++ b/crates/web/src/components/feed/post.rs
@@ -1,9 +1,37 @@
+use chrono::{TimeZone, Utc};
 use leptos::{component, view, IntoView};
 
 use townhall_client::post::posts::posts::PostsPostsEdgesNode;
 
+const LONG_TO_SHORT_CUTOFF_DAYS: i64 = 3;
+
 #[component]
 pub fn Post(post: PostsPostsEdgesNode) -> impl IntoView {
+    let post_created_at_date_time = Utc::from_utc_datetime(&Utc, &post.created_at.naive_utc());
+    let now_date = Utc::now();
+
+    let diff_in_seconds = now_date
+        .signed_duration_since(post_created_at_date_time)
+        .num_seconds();
+
+    let format_string = match diff_in_seconds {
+        // More than 3 days
+        _ if diff_in_seconds > 86400 * LONG_TO_SHORT_CUTOFF_DAYS => "%m/%d/%y".to_string(), // More than 3 days
+        diff_in_seconds if diff_in_seconds > 86400 => {
+            format!("{} Days ago", diff_in_seconds / 86400)
+        }
+        // Within 3 days
+        diff_in_seconds if diff_in_seconds > 3600 => {
+            format!("{} hours ago", diff_in_seconds / 3600)
+        } // Within 1 hour
+        diff_in_seconds if diff_in_seconds > 60 => {
+            format!("{} minutes ago", diff_in_seconds / 60)
+        } // Within 1 minute
+        _ => format!("{} seconds ago", diff_in_seconds),
+    };
+
+    let formatted_date = post_created_at_date_time.format(&format_string).to_string();
+
     view! {
                 <li class="feed-post bg-white rounded-md p-4">
                     <div>
@@ -13,7 +41,7 @@ pub fn Post(post: PostsPostsEdgesNode) -> impl IntoView {
                             </figure>
                             <div class="flex flex-col ml-2">
                                 <strong>{post.author.username}</strong>
-                                <time class="text-sm text-gray-400">2 hours ago</time>
+                                <time class="text-sm text-gray-400">{formatted_date}</time>
                             </div>
                         </article>
                     </div>