diff --git a/config/blog-details.php b/config/blog-details.php
new file mode 100644
index 0000000..8bd6aaa
--- /dev/null
+++ b/config/blog-details.php
@@ -0,0 +1,5 @@
+<?php
+$blog_details = [
+  'title' => 'Blog Title',
+];
+?>
\ No newline at end of file
diff --git a/templates/elements/header.php b/templates/elements/header.php
new file mode 100644
index 0000000..7897699
--- /dev/null
+++ b/templates/elements/header.php
@@ -0,0 +1,8 @@
+<div class="w-full border-b border-black bg-gray-100 p-4">
+  <h1 class="text-3xl font-bold mb-1"><?php echo $blog_details['title']; ?></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>
\ No newline at end of file
diff --git a/templates/elements/html-header.php b/templates/elements/html-header.php
new file mode 100644
index 0000000..abccece
--- /dev/null
+++ b/templates/elements/html-header.php
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <title>TinyTalk</title>
+  
+  <!-- Font -->
+  <link rel="stylesheet" href="/assets/css/font.css">
+
+  <!-- Tailwind CSS -->
+  <link rel="stylesheet" href="/assets/css/tw.css">
+</head>
+<body>
\ No newline at end of file
diff --git a/templates/elements/post.php b/templates/elements/post.php
new file mode 100644
index 0000000..9a01fee
--- /dev/null
+++ b/templates/elements/post.php
@@ -0,0 +1,9 @@
+<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>
\ No newline at end of file
diff --git a/templates/home.php b/templates/home.php
index 96b268f..9f7b83d 100644
--- a/templates/home.php
+++ b/templates/home.php
@@ -1,66 +1,19 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-  <title>TinyTalk</title>
-  
-  <!-- Font -->
-  <link rel="stylesheet" href="/assets/css/font.css">
-
-  <!-- Tailwind CSS -->
-  <link rel="stylesheet" href="/assets/css/tw.css">
-</head>
-  <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>
+<?php
+  include_once __DIR__ . '/../config/blog-details.php';
+  include_once __DIR__ . '/../templates/elements/html-header.php';
+  include_once __DIR__ . '/../templates/elements/header.php';
+?>
   <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>
+      <?php
+      include_once __DIR__ . '/../templates/sidebar/recent-posts.php';
+      include_once __DIR__ . '/../templates/sidebar/categories.php';
+      ?>
     </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>
+      <?php
+      include_once __DIR__ . '/../templates/elements/post.php';
+      ?>
     </div>
   </div>
 </body>
diff --git a/templates/sidebar/categories.php b/templates/sidebar/categories.php
new file mode 100644
index 0000000..e19eba9
--- /dev/null
+++ b/templates/sidebar/categories.php
@@ -0,0 +1,13 @@
+<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>
\ No newline at end of file
diff --git a/templates/sidebar/recent-posts.php b/templates/sidebar/recent-posts.php
new file mode 100644
index 0000000..8fa5d2c
--- /dev/null
+++ b/templates/sidebar/recent-posts.php
@@ -0,0 +1,15 @@
+<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>
\ No newline at end of file
