diff --git a/src/lib/components/heroPost.svelte b/src/lib/components/heroPost.svelte
index 55c3146..d537dd3 100644
--- a/src/lib/components/heroPost.svelte
+++ b/src/lib/components/heroPost.svelte
@@ -1,12 +1,17 @@
 <script>
+    import { DateTime } from "luxon";
+
     export var bigThumbnail;
     // export var categories = [];
-    export var author;
-    export var relDate;
+    // export var author;
+    export var date;
     export var title;
-    export var authorIcon;
+    // export var authorIcon;
     export var description;
     export var path;
+
+    let dt = DateTime.fromISO(date);
+    $: dt = DateTime.fromISO(date);
 </script>
 
 <a href={path} class="post">
@@ -26,7 +31,7 @@
             <span class="spacer">—</span>
             <span class="author">{author}</span>
             <span class="spacer">—</span> -->
-            <span class="date">{relDate}</span>
+            <span class="date">{dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
         </div>
     </div>
 </a>
@@ -43,9 +48,9 @@
         border-radius: 5px;
         width: 100%;
     }
-    .categories {
+    /* .categories {
         color: #0054E2;
-    }
+    } */
     .author {
         display: flex;
         align-items: center;
@@ -67,9 +72,9 @@
     .author > * {
         padding: 0 5px;
     }
-    .author img {
+    /* .author img {
         height: 100%;
         border-radius: 50%;
         padding-right: 5px;
-    }
+    } */
 </style>
\ No newline at end of file
diff --git a/src/lib/components/post.svelte b/src/lib/components/post.svelte
index 05b59b1..2acfe9b 100644
--- a/src/lib/components/post.svelte
+++ b/src/lib/components/post.svelte
@@ -1,10 +1,11 @@
 <script>
     import darkmode from "$lib/stores/darkmode";
+    import { DateTime } from "luxon";
 
     export var thumbnail;
     // export var categories = [];
     // export var author;
-    export var relDate;
+    export var date;
     export var title;
     // export var authorIcon;
     export var currentHover;
@@ -20,6 +21,9 @@
     function mouseleave() {
         if(currentHover == title) currentHover = null;
     }
+
+    let dt = DateTime.fromISO(date);
+    $: dt = DateTime.fromISO(date);
 </script>
 
 <a href={path} class:dark={$darkmode} class="post" class:grayscale on:mouseenter={mouseenter} on:mouseleave={mouseleave}>
@@ -41,7 +45,7 @@
             <span class="spacer">—</span>
             <span class="author">{author}</span>
             <span class="spacer">—</span> -->
-            <span class="date">{relDate}</span>
+            <span class="date">{dt.toRelativeCalendar()} ({dt.toLocaleString(DateTime.DATE_FULL)})</span>
         </div>
     </div>
 </a>