diff --git a/blog/posts/2023-12-30-file-watcher.md b/blog/posts/2023-12-30-file-watcher.md
index 88dd922..8ef92bd 100644
--- a/blog/posts/2023-12-30-file-watcher.md
+++ b/blog/posts/2023-12-30-file-watcher.md
@@ -5,9 +5,13 @@ labels: [cydonia]
 title: The file watcher implementation in cydonia.
 ---
 
-## hello
+# hello
 
-fffffffffffffffffff
-ffffffffffffffffff
+```rust
+// function block.
 
-ffffff
+/// main function
+fn main() {
+  println!("hello, world");
+}
+```
diff --git a/blog/templates/index.hbs b/blog/templates/index.hbs
index b5c10e4..240728b 100644
--- a/blog/templates/index.hbs
+++ b/blog/templates/index.hbs
@@ -1,10 +1,12 @@
 {{#*inline "page"}}
-<main>
+<main class="prose p-8">
     <h1>{{ title }}</h1>
 
+    <section class="posts">
     {{#each posts}}
-        <div>{{{  index  }}} {{{  title  }}}</div>
+        <div><a href="{{{ link }}}">{{{ index }}} {{{ title }}}</a></div>
     {{/each}}
+    </section>
 </main>
 {{/inline}}
 
diff --git a/blog/templates/layout.hbs b/blog/templates/layout.hbs
index bb4a93b..14b65d8 100644
--- a/blog/templates/layout.hbs
+++ b/blog/templates/layout.hbs
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="description" content="Empowering everyone to build reliable and efficient site.">
+    <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio"></script>
     {{#if index}}
       <link rel="stylesheet" href="/index.css">
     {{/if}}
@@ -19,10 +20,6 @@
            location.reload();
          }
        };
-
-       window.onbeforeunload = function() {
-         socket.close();
-       }
       </script>
     {{/if}}
   </head>
diff --git a/blog/templates/post.hbs b/blog/templates/post.hbs
index e69de29..af941b2 100644
--- a/blog/templates/post.hbs
+++ b/blog/templates/post.hbs
@@ -0,0 +1,8 @@
+{{#*inline "page"}}
+<main class="prose p-8">
+    <h1>{{ post.title }}</h1>
+    {{{ post.content }}}
+</main>
+{{/inline}}
+
+{{> layout }}
diff --git a/blog/theme.css b/blog/theme.css
index 0fd0a91..79ac9fe 100644
--- a/blog/theme.css
+++ b/blog/theme.css
@@ -1,8 +1,85 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 10% 3.9%;
+
+    --radius: 0.5rem;
+
+    --bar-height: 2rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
 html,
-body {
+body,
+main {
   min-height: 100%;
-  background-color: #000;
-  color: #fefefe;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    Liberation Mono, Courier New, monospace;
+  min-width: 100%;
 }
diff --git a/src/app.rs b/src/app.rs
index b49536d..e442a1f 100644
--- a/src/app.rs
+++ b/src/app.rs
@@ -11,12 +11,12 @@
 //!     - theme.css
 //! ```
 
-use crate::{Manifest, Post, Theme};
+use crate::{Manifest, Post};
 use anyhow::Result;
 use handlebars::Handlebars;
 use std::{
     fs::{self, File},
-    path::Path,
+    path::{Path, PathBuf},
 };
 
 /// The endpoint for livereload
@@ -33,8 +33,6 @@ pub struct App<'app> {
     pub manifest: Manifest,
     /// The posts.
     pub posts: Vec<Post>,
-    /// The theme.
-    pub theme: Theme,
 }
 
 impl<'app> TryFrom<Manifest> for App<'app> {
@@ -48,7 +46,6 @@ impl<'app> TryFrom<Manifest> for App<'app> {
             handlebars,
             livereload: None,
             posts: manifest.posts()?,
-            theme: manifest.theme()?,
             manifest,
         })
     }
@@ -78,6 +75,7 @@ impl<'app> App<'app> {
         self.render_css()?;
 
         let posts = self.manifest.posts()?;
+        self.render_posts(posts.clone())?;
         self.render_index(posts)?;
         Ok(())
     }
@@ -85,8 +83,9 @@ impl<'app> App<'app> {
     /// Write css to the output directory.
     pub fn render_css(&self) -> Result<()> {
         tracing::debug!("rendering css ...");
-        fs::write(self.manifest.out.join("index.css"), &self.theme.index)?;
-        fs::write(self.manifest.out.join("post.css"), &self.theme.post).map_err(Into::into)
+        let theme = self.manifest.theme()?;
+        fs::write(self.manifest.out.join("index.css"), &theme.index)?;
+        fs::write(self.manifest.out.join("post.css"), &theme.post).map_err(Into::into)
     }
 
     /// Render the index page.
@@ -103,6 +102,29 @@ impl<'app> App<'app> {
         )
     }
 
+    /// Render post.
+    pub fn render_post(&self, post: Post) -> Result<()> {
+        post.path.file_name().unwrap_or_default();
+        self.render_template(
+            PathBuf::from(&post.index.link),
+            "post",
+            serde_json::json!({
+                "title": self.manifest.title,
+                "livereload": self.livereload,
+                "post": post,
+            }),
+        )
+    }
+
+    /// Render the posts.
+    pub fn render_posts(&self, posts: Vec<Post>) -> Result<()> {
+        fs::create_dir_all(&self.manifest.out.join("posts"))?;
+        for post in posts {
+            self.render_post(post)?;
+        }
+        Ok(())
+    }
+
     /// Render a template.
     pub fn render_template(
         &self,
diff --git a/src/post.rs b/src/post.rs
index 3c40500..8bde77a 100644
--- a/src/post.rs
+++ b/src/post.rs
@@ -4,6 +4,7 @@ use crate::utils::Read;
 use anyhow::{anyhow, Result};
 use chrono::NaiveDate;
 use colored::Colorize;
+use pulldown_cmark::{html, Options, Parser};
 use serde::{Deserialize, Serialize};
 use std::{
     path::{Path, PathBuf},
@@ -13,18 +14,17 @@ use std::{
 /// Post layout with is markdown with yaml metadata.
 #[derive(Clone, Debug, Default, Serialize, Deserialize)]
 pub struct Post {
-    /// The path to the post.
-    #[serde(skip)]
-    pub path: PathBuf,
-    /// The metadata of the post.
-    #[serde(flatten)]
-    pub meta: Meta,
     /// The content of the post in markdown.
     pub content: String,
     /// The index of the post.
-    pub index: String,
-    /// If this is the last post of the year.
-    pub last: bool,
+    #[serde(flatten)]
+    pub index: Index,
+    /// The metadata of the post.
+    #[serde(flatten)]
+    pub meta: Meta,
+    /// The path to the post.
+    #[serde(skip)]
+    pub path: PathBuf,
 }
 
 impl Post {
@@ -75,8 +75,14 @@ impl Post {
             });
         }
 
-        self.index = self.meta.date.format("%h. %d").to_string();
-        Ok(self)
+        Ok(self.index(name))
+    }
+
+    /// Generate the index of the post.
+    pub fn index(mut self, name: String) -> Self {
+        self.index.index = self.meta.date.format("%h. %d").to_string();
+        self.index.link = format!("posts/{name}.html");
+        self
     }
 }
 
@@ -93,7 +99,8 @@ impl FromStr for Post {
         }
 
         let meta = markdown[1].parse::<Meta>()?;
-        let content = markdown[2].to_string();
+        let mut content = String::new();
+        html::push_html(&mut content, Parser::new_ext(markdown[2], Options::all()));
 
         Ok(Self {
             meta,
@@ -128,3 +135,15 @@ impl FromStr for Meta {
         serde_yaml::from_str(s).map_err(|e| anyhow::anyhow!(e))
     }
 }
+
+#[derive(Clone, Debug, Default, Deserialize, Serialize)]
+pub struct Index {
+    /// If this post is the last post of the year.
+    pub last: bool,
+
+    /// The index of the post.
+    pub index: String,
+
+    /// The link of the post.
+    pub link: String,
+}