diff --git a/public/assets/css/font.css b/public/assets/css/font.css
new file mode 100644
index 0000000..f77e408
--- /dev/null
+++ b/public/assets/css/font.css
@@ -0,0 +1,4 @@
+@font-face {
+    font-family: 'Karla';
+    src: url('/assets/fonts/Karla-VariableFont_wght.ttf') format('truetype');
+}
\ No newline at end of file
diff --git a/public/assets/css/tw-pre.css b/public/assets/css/tw-pre.css
index a461c50..b959843 100644
--- a/public/assets/css/tw-pre.css
+++ b/public/assets/css/tw-pre.css
@@ -1 +1,5 @@
-@import "tailwindcss";
\ No newline at end of file
+@import "tailwindcss";
+
+body {
+    font-family: 'Karla', sans-serif;
+}
\ No newline at end of file
diff --git a/public/assets/fonts/Karla-VariableFont_wght.ttf b/public/assets/fonts/Karla-VariableFont_wght.ttf
new file mode 100644
index 0000000..8dc0439
Binary files /dev/null and b/public/assets/fonts/Karla-VariableFont_wght.ttf differ
diff --git a/templates/home.php b/templates/home.php
index 8c7dde8..96b268f 100644
--- a/templates/home.php
+++ b/templates/home.php
@@ -6,9 +6,62 @@
 
   <title>TinyTalk</title>
   
+  <!-- Font -->
+  <link rel="stylesheet" href="/assets/css/font.css">
+
+  <!-- Tailwind CSS -->
   <link rel="stylesheet" href="/assets/css/tw.css">
 </head>
-<body>
-  <h1 class="text-3xl font-bold">TinyTalk</h1>
+  <div class="w-full border-b border-black bg-gray-100 p-4">
+    <h1 class="text-3xl font-bold mb-1">blog</h1>
+    <div class="flex gap-2">
+      <a href="/login" class="text-blue-500 underline text-sm">posts</a>
+      <a href="/register" class="text-blue-500 underline text-sm">categories</a>
+      <a href="/register" class="text-blue-500 underline text-sm">webmaster</a>
+    </div>
+  </div>
+  <div class="w-full flex">
+    <div class="w-1/5 border-r border-b border-black bg-gray-100">
+      <div id="recent-posts">
+        <div class="w-full border-b border-black py-0.5 px-4">
+          <h1 class="font-bold">recent posts</h1>
+        </div>
+        <div class="w-full px-4 mt-1 mb-4 flex flex-col gap-0.5">
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+          <a href="/post/1" class="text-blue-500 underline text-sm">Example Post</a>
+        </div>
+      </div>
+      <div id="categories">
+        <div class="w-full border-b border-t border-black py-0.5 px-4">
+          <h1 class="font-bold">categories</h1>
+        </div>
+        <div class="w-full px-4 mt-1 mb-2 flex flex-col gap-0.5">
+          <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+          <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+          <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+          <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+          <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+          <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+        </div>
+      </div>
+    </div>
+    <div class="w-4/5 border-b border-black p-4">
+      <div class="mb-3">
+        <h1 class="text-3xl font-bold">this is an example post</h1>
+        <a href="/category/1" class="text-blue-500 underline text-sm">Example Category</a>
+      </div>
+      <div class="flex flex-col mt-2 gap-4">
+        <p>Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder</p>
+        <p>Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder</p>
+        <p>Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder Placeholder</p>
+      </div>
+    </div>
+  </div>
 </body>
 </html>
\ No newline at end of file
