diff --git a/.github/workflows/ruff_formatter.yml b/.github/workflows/ruff_formatter.yml
index be6e505..7961ad0 100644
--- a/.github/workflows/ruff_formatter.yml
+++ b/.github/workflows/ruff_formatter.yml
@@ -18,7 +18,7 @@ jobs:
       - name: Set up Python
         uses: actions/setup-python@v4
         with:
-          python-version: '3.x'
+          python-version: "3.x"
 
       - name: Install Ruff
         run: pip install ruff
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 110c63d..6ad3671 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,8 +1,8 @@
 {
-    "recommendations": [
-        "ms-python.python",
-        "ms-python.vscode-pylance",
-        "charliermarsh.ruff",
-        "esbenp.prettier-vscode"
-    ]
-}
\ No newline at end of file
+  "recommendations": [
+    "ms-python.python",
+    "ms-python.vscode-pylance",
+    "charliermarsh.ruff",
+    "esbenp.prettier-vscode"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1ad743a..4828083 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,36 +1,34 @@
 {
-    "python.analysis.inlayHints.functionReturnTypes": true,
-    "python.analysis.inlayHints.variableTypes": true,
-    "python.analysis.inlayHints.callArgumentNames": "partial",
-    "python.analysis.autoImportCompletions": true,
-    "python.analysis.fixAll": [
-        "source.unusedImports"
-    ],
-    "[python]": {
-        "editor.formatOnSave": true,
-        "editor.codeActionsOnSave": {
-            "source.fixAll": "explicit",
-            "source.organizeImports": "always",
-            "source.unusedImports": "explicit"
-        },
-        "editor.defaultFormatter": "charliermarsh.ruff"
+  "python.analysis.inlayHints.functionReturnTypes": true,
+  "python.analysis.inlayHints.variableTypes": true,
+  "python.analysis.inlayHints.callArgumentNames": "partial",
+  "python.analysis.autoImportCompletions": true,
+  "python.analysis.fixAll": ["source.unusedImports"],
+  "[python]": {
+    "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+      "source.fixAll": "explicit",
+      "source.organizeImports": "always",
+      "source.unusedImports": "explicit"
     },
-    "python.terminal.activateEnvInCurrentTerminal": true,
-    "python.terminal.focusAfterLaunch": true,
-    "python.createEnvironment.contentButton": "show",
-    "diffEditor.wordWrap": "on",
-    "editor.wordWrap": "on",
-    "explorer.autoRevealExclude": {
-        "/env": true,
-        "/venv": true,
-        "/.venv": true
-    },
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "ruff.organizeImports": true,
-    "[javascript]": {
-        "editor.defaultFormatter": "esbenp.prettier-vscode"
-    },
-    "editor.fontLigatures": true,
-    "editor.formatOnType": true,
-    "editor.guides.bracketPairs": "active"
-}
\ No newline at end of file
+    "editor.defaultFormatter": "charliermarsh.ruff"
+  },
+  "python.terminal.activateEnvInCurrentTerminal": true,
+  "python.terminal.focusAfterLaunch": true,
+  "python.createEnvironment.contentButton": "show",
+  "diffEditor.wordWrap": "on",
+  "editor.wordWrap": "on",
+  "explorer.autoRevealExclude": {
+    "/env": true,
+    "/venv": true,
+    "/.venv": true
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "ruff.organizeImports": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.fontLigatures": true,
+  "editor.formatOnType": true,
+  "editor.guides.bracketPairs": "active"
+}
diff --git a/nano/static/css/home/home.css b/nano/static/css/home/home.css
index 5197146..d9f8c3c 100644
--- a/nano/static/css/home/home.css
+++ b/nano/static/css/home/home.css
@@ -3,210 +3,282 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: Arial, sans-serif;
 }
 
+/* Light Mode */
 body {
-  font-family: Arial, sans-serif;
-  background-color: #f4f4f4;
+  background-color: #f9f9f9;
   color: #333;
-  padding: 20px;
-  text-align: center;
+  transition: background 0.3s, color 0.3s;
 }
 
-header {
-  margin-bottom: 40px;
+/* Dark Mode */
+body.dark-mode {
+  background-color: #1a1a1a;
+  color: #f9f9f9;
 }
 
-header h1 {
-  font-size: 40px;
-  color: #2c3e50;
+/* Navbar */
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 15px 20px;
+  background: #fff;
+  border-bottom: 1px solid #ddd;
 }
 
-header p {
-  font-size: 18px;
-  color: #7f8c8d;
+.dark-mode .navbar {
+  background: #222;
+  border-bottom: 1px solid #444;
 }
 
-.posts {
-  margin: 0 auto;
-  max-width: 600px;
+.navbar h1 {
+  font-size: 22px;
 }
 
-.posts h2 {
-  font-size: 30px;
-  margin-bottom: 20px;
+/* Search Bar */
+#search {
+  padding: 10px 35px 10px 15px;
+  border: 1px solid #ddd;
+  border-radius: 20px;
+  width: 250px;
+  font-size: 14px;
+  background-color: #f1f1f1;
+  outline: none;
+  transition: 0.3s;
 }
 
-.post-list {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
+/* Dark Mode */
+.dark-mode #search {
+  background-color: #333;
+  border: 1px solid #555;
+  color: white;
 }
 
-article {
+/* Search Bar Focus */
+#search:focus {
+  border-color: #007bff;
   background-color: white;
-  padding: 20px;
-  border-radius: 8px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
-article h3 {
-  font-size: 22px;
-  margin-bottom: 10px;
+/* Dark Mode Focus */
+.dark-mode #search:focus {
+  background-color: #222;
+  border-color: #66b3ff;
 }
 
-article p {
-  font-size: 16px;
-  margin-bottom: 15px;
+/* Search Bar Container */
+.search-container {
+  position: relative;
+  display: flex;
+  align-items: center;
 }
 
-article a {
+/* Search Icon */
+.search-container::before {
+  content: "🔍";
+  position: absolute;
+  right: 12px;
   font-size: 16px;
-  color: #e74c3c;
-  text-decoration: none;
+  color: #666;
 }
 
-article a:hover {
-  text-decoration: underline;
+.dark-mode .search-container::before {
+  color: #bbb;
 }
 
-footer {
-  margin-top: 40px;
-  font-size: 14px;
-  color: #7f8c8d;
+#dark-mode-toggle {
+  cursor: pointer;
+  padding: 5px 10px;
+  border: none;
+  background: transparent;
+  font-size: 18px;
 }
 
-/* General Reset */
-/* * {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-} */
+/* Hero Section */
+.hero {
+  text-align: center;
+  padding: 50px 20px;
+  background: linear-gradient(135deg, #007bff, #0056b3);
+  color: white;
+}
 
-/* Body */
-/* body {
-  font-family: Arial, sans-serif;
-  line-height: 1.6;
-} */
+.hero-content {
+  max-width: 600px;
+  margin: 0 auto;
+}
 
-/* Header */
-/* header {
-  background: #2c3e50;
-  color: white;
-  padding: 20px 0;
-  text-align: center;
+.hero h2 {
+  font-size: 28px;
+  margin-bottom: 10px;
 }
 
-.navbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 20px;
+.hero p {
+  font-size: 16px;
+  margin-bottom: 20px;
 }
 
-.logo {
-  font-size: 30px;
+.btn {
+  background: white;
+  color: #007bff;
+  padding: 10px 15px;
+  border-radius: 5px;
+  text-decoration: none;
   font-weight: bold;
+  display: inline-block;
 }
 
-nav ul {
-  list-style: none;
+.dark-mode .btn {
+  background: #fcfbfb;
+  color: rgb(0, 0, 0);
 }
 
-nav ul li {
-  display: inline;
-  margin: 0 15px;
+/* Blog Layout */
+.container {
+  display: flex;
+  max-width: 1000px;
+  margin: 40px auto;
+  padding: 0 20px;
 }
 
-nav ul li a {
-  color: white;
-  text-decoration: none;
+/* Blog Content */
+.content {
+  flex: 2;
 }
 
-.hero-section {
-  margin-top: 40px;
+.blog-post {
+  padding: 20px;
+  border-radius: 10px;
+  background: white;
+  margin-bottom: 20px;
 }
 
-.hero-section h2 {
-  font-size: 50px;
-  margin-bottom: 10px;
+.dark-mode .blog-post {
+  background: #222;
 }
 
-.hero-section p {
-  font-size: 20px;
-  margin-bottom: 20px;
+.blog-post img {
+  width: 100%;
+  border-radius: 10px;
+  margin-bottom: 10px;
 }
 
-.cta-button {
-  background-color: #e74c3c;
-  padding: 12px 25px;
-  color: white;
-  font-size: 18px;
+.blog-post h2 a {
   text-decoration: none;
-  border-radius: 5px;
+  color: #2a2a2a;
 }
 
-.cta-button:hover {
-  background-color: #c0392b;
-} */
+.dark-mode .blog-post h2 a {
+  color: #ffffff;
+}
 
-/* Featured Posts Section */
-/* .featured-posts {
-  background-color: #ecf0f1;
-  padding: 40px 0;
-  text-align: center;
+.blog-post p {
+  color: #555;
 }
 
-.featured-posts h3 {
-  font-size: 36px;
-  margin-bottom: 20px;
+.dark-mode .blog-post p {
+  color: #bbb;
 }
 
-.posts-container {
+/* Sidebar */
+.sidebar {
+  flex: 1;
+  padding-left: 20px;
+}
+
+.sidebar-section {
+  background: white;
+  padding: 15px;
+  border-radius: 8px;
+  margin-bottom: 20px;
+}
+.sidebar-section ul {
   display: flex;
-  justify-content: space-around;
   flex-wrap: wrap;
+  gap: 10px;
+  padding: 0;
+}
+.sidebar-section ul li {
+  list-style: none;
+}
+.sidebar-section ul li a {
+  display: inline-block;
+  padding: 8px 15px;
+  border-radius: 20px;
+  background-color: #373737;
+  color: #333;
+  text-decoration: none;
+  font-size: 14px;
+  transition: 0.3s;
+  border: 1px solid #ddd;
+}
+/* Hover Effect */
+.sidebar-section ul li a:hover {
+  background-color: #515151;
+  color: rgb(255, 255, 255);
+  border-color: #ffffff;
 }
 
-.post {
-  background-color: white;
-  width: 300px;
-  margin: 15px;
-  padding: 20px;
-  border-radius: 10px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  text-align: center;
+.dark-mode .sidebar-section {
+  background: #222;
 }
 
-.post img {
-  width: 100%;
-  border-radius: 10px;
+.sidebar h3 {
+  margin-bottom: 10px;
+  font-size: 18px;
 }
 
-.post h4 {
-  margin-top: 15px;
-  font-size: 22px;
+.sidebar ul {
+  list-style: none;
 }
 
-.post p {
-  margin: 10px 0;
-  font-size: 16px;
+.sidebar ul li {
+  margin-bottom: 8px;
 }
 
-.post a {
-  color: #e74c3c;
+.sidebar ul li a {
   text-decoration: none;
+  color: #ffffff;
+}
+
+.dark-mode .sidebar ul li a {
+  color: #ffffff;
 }
 
-.post a:hover {
-  text-decoration: underline;
-} */
+/* Subscribe Section */
+.subscribe input {
+  width: 100%;
+  padding: 8px;
+  margin-top: 5px;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+}
 
-/* Footer */
-/* footer {
-  background-color: #34495e;
+.dark-mode .subscribe input {
+  background: #333;
   color: white;
-  text-align: center;
-  padding: 20px 0;
-  margin-top: 50px;
-} */
+  border: 1px solid #555;
+}
+
+.subscribe button {
+  margin-top: 10px;
+  width: 100%;
+  padding: 8px;
+  background: #000000;
+  color: white;
+  border: none;
+  border-radius: 5px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .container {
+    flex-direction: column;
+  }
+
+  .sidebar {
+    padding-left: 0;
+  }
+}
diff --git a/nano/static/js/home/script.js b/nano/static/js/home/script.js
new file mode 100644
index 0000000..9fb54cf
--- /dev/null
+++ b/nano/static/js/home/script.js
@@ -0,0 +1,37 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const toggleButton = document.getElementById("dark-mode-toggle");
+  const body = document.body;
+  const searchInput = document.getElementById("search");
+  const blogPosts = document.querySelectorAll(".blog-post");
+
+  // Check if dark mode was previously enabled
+  if (localStorage.getItem("dark-mode") === "enabled") {
+    body.classList.add("dark-mode");
+    toggleButton.textContent = "☀️";
+  }
+
+  toggleButton.addEventListener("click", function () {
+    body.classList.toggle("dark-mode");
+
+    if (body.classList.contains("dark-mode")) {
+      localStorage.setItem("dark-mode", "enabled");
+      toggleButton.textContent = "☀️";
+    } else {
+      localStorage.setItem("dark-mode", "disabled");
+      toggleButton.textContent = "🌙";
+    }
+  });
+
+  // Search filter
+  searchInput.addEventListener("input", function () {
+    const searchText = searchInput.value.toLowerCase();
+    blogPosts.forEach((post) => {
+      const title = post.querySelector("h2 a").textContent.toLowerCase();
+      if (title.includes(searchText)) {
+        post.style.display = "block";
+      } else {
+        post.style.display = "none";
+      }
+    });
+  });
+});
diff --git a/nano/templates/landing_page.html b/nano/templates/landing_page.html
index 7dba7ed..0ee5b5d 100644
--- a/nano/templates/landing_page.html
+++ b/nano/templates/landing_page.html
@@ -3,87 +3,86 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nano Blog</title>
+    <title>Minimal Blog</title>
     <link
       rel="stylesheet"
       href="{{ url_for('static', filename='css/home/home.css') }}"
     />
   </head>
   <body>
-    <header>
-      <h1>Nano Blog</h1>
-      <p>Your source for bite-sized knowledge.</p>
-    </header>
+    <!-- Navbar -->
+    <nav class="navbar">
+      <h1>Minimal Blog</h1>
+      <input type="text" id="search" placeholder="Search blog posts..." />
+      <button id="dark-mode-toggle">🌙</button>
+    </nav>
 
-    <section class="posts">
-      <h2>Featured Posts</h2>
-      <div class="post-list">
-        {% for post in featured_posts %}
-        <article>
-          <h3>{{ post.title }}</h3>
-          <p>{{ post.description }}</p>
-          <a href="{{ post.link }}">Read More</a>
-        </article>
-        {% endfor %}
+    <!-- Hero Section -->
+    <header class="hero">
+      <div class="hero-content">
+        <h2>Welcome to the Blog</h2>
+        <p>
+          Explore insights, tips, and guides on web development, tech, and
+          design.
+        </p>
+        <a href="#" class="btn">Start Reading</a>
       </div>
-    </section>
+    </header>
 
-    <footer>
-      <p>&copy; 2025 Nano Blog</p>
-    </footer>
-  </body>
-</html>
+    <!-- Main Content -->
+    <main class="container">
+      <section class="content">
+        <div class="blog-post">
+          <!-- <img src="https://source.unsplash.com/600x400/?tech" alt="Blog Image"> -->
+          <h2><a href="#">How to Build a Blog</a></h2>
+          <p>
+            Learn how to create a minimalist blog using HTML, CSS, and
+            JavaScript.
+          </p>
+        </div>
 
-<!-- <!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Nano Blog - Your Source for Bite-Sized Knowledge</title>
-    <link
-      rel="stylesheet"
-      href="{{ url_for('static', filename='css/home/home.css') }}"
-    />
-  </head>
-  <body>
-    <header>
-      <div class="navbar">
-        <h1 class="logo">Nano Blog</h1>
-        <nav>
+        <div class="blog-post">
+          <!-- <img src="https://source.unsplash.com/600x400/?design" alt="Blog Image"> -->
+          <h2><a href="#">The Power of Minimalism</a></h2>
+          <p>Why simple UI/UX makes your application better.</p>
+        </div>
+
+        <div class="blog-post">
+          <!-- <img src="https://source.unsplash.com/600x400/?coding" alt="Blog Image"> -->
+          <h2><a href="#">CSS Tips for Clean UI</a></h2>
+          <p>Learn how to use CSS to create modern, minimalist designs.</p>
+        </div>
+      </section>
+
+      <!-- Sidebar -->
+      <aside class="sidebar">
+        <div class="sidebar-section">
+          <h3>Recent Posts</h3>
           <ul>
-            <li><a href="#">Home</a></li>
-            <li><a href="#">About</a></li>
-            <li><a href="#">Categories</a></li>
-            <li><a href="#">Contact</a></li>
+            <li><a href="#">How to Build a Blog</a></li>
+            <li><a href="#">The Power of Minimalism</a></li>
+            <li><a href="#">CSS Tips for Clean UI</a></li>
           </ul>
-        </nav>
-      </div>
-      <div class="hero-section">
-        <h2>Welcome to Nano Blog</h2>
-        <p>
-          Your source for bite-sized knowledge on all things tech, lifestyle,
-          and more.
-        </p>
-        <a href="#" class="cta-button">Read the Latest Posts</a>
-      </div>
-    </header>
+        </div>
 
-    <section class="featured-posts">
-      <h3>Featured Posts</h3>
-      <div class="posts-container">
-        {% for post in featured_posts %}
-        <article class="post">
-          <img src="{{ post.image }}" alt="{{ post.title }}" />
-          <h4>{{ post.title }}</h4>
-          <p>{{ post.description }}</p>
-          <a href="{{ post.link }}">Read More</a>
-        </article>
-        {% endfor %}
-      </div>
-    </section>
+        <div class="sidebar-section">
+          <h3>Categories</h3>
+          <ul>
+            <li><a href="#">Web Development</a></li>
+            <li><a href="#">Design</a></li>
+            <li><a href="#">Tech</a></li>
+          </ul>
+        </div>
+
+        <div class="sidebar-section subscribe">
+          <h3>Subscribe</h3>
+          <p>Get the latest blog updates.</p>
+          <input type="email" placeholder="Enter your email" />
+          <button class="btn">Subscribe</button>
+        </div>
+      </aside>
+    </main>
 
-    <footer>
-      <p>&copy; 2025 Nano Blog. All rights reserved.</p>
-    </footer>
+    <script src="{{ url_for('static', filename='js/home/script.js') }}"></script>
   </body>
-</html> -->
+</html>