diff --git a/frontend/routes/posts/index.tsx b/frontend/routes/posts/index.tsx
index a9a3e83..ee2d345 100644
--- a/frontend/routes/posts/index.tsx
+++ b/frontend/routes/posts/index.tsx
@@ -2,6 +2,7 @@ import { PostCarousel } from "../../components/PostCarousel.tsx";
 
 import { Handlers, PageProps } from "$fresh/server.ts";
 import { Post } from "../../components/PostCard.tsx";
+import * as hi from "jsr:@preact-icons/hi2";
 
 interface PageData {
   featuredPosts: Post[];
@@ -45,37 +46,49 @@ export default function PostPage({ data }: PageProps<PageData>) {
     <div class="space-y-12 px-10 py-8 bg-[#313244]">
       <h1 class="text-3xl text-white font-bold uppercase text-center">Blog</h1>
       <section>
-        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
-          Featured Posts
-        </h2>
-        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineSparkles />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Featured Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic text-white text-center flex">
           Ignite the impossible
         </div>
         <PostCarousel posts={featuredPosts} />
       </section>
       <section>
-        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
-          Recent Posts
-        </h2>
-        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineClock />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Recent Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
           Now with 100% fresh perspective
         </div>
         <PostCarousel posts={recentPosts} />
       </section>
       <section>
-        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
-          Hot Posts
-        </h2>
-        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineFire />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Hot Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
           Making chaos look cool since forever
         </div>
         <PostCarousel posts={hotPosts} />
       </section>
       <section>
-        <h2 class="text-2xl font-bold mb-2 text-white text-center lg:text-left">
-          Popular Posts
-        </h2>
-        <div className="text-lg font-thin italic mb-4 text-white text-center lg:text-left">
+        <div class="flex items-center gap-2 text-2xl text-white md:justify-start">
+          <hi.HiOutlineBolt />
+          <h2 class="text-2xl font-bold text-white text-center lg:text-left">
+            Popular Posts
+          </h2>
+        </div>
+        <div className="text-lg font-thin italic mb-4 text-white text-center flex">
           Content may cause uncontrollable reading
         </div>
         <PostCarousel posts={popularPosts} />