diff --git a/themes/example/components/BlogListPage.js b/themes/example/components/BlogListPage.js
index 390bf90a..ce643eb8 100644
--- a/themes/example/components/BlogListPage.js
+++ b/themes/example/components/BlogListPage.js
@@ -15,6 +15,7 @@ export const BlogListPage = props => {
   const showNext = page < totalPage
   const pagePrefix = router.asPath.replace(/\/page\/[1-9]\d*/, '').replace(/\/$/, '')
 
+  console.log('p', posts)
   return (
       <div className="w-full md:pr-12 mb-12">
 
@@ -32,7 +33,7 @@ export const BlogListPage = props => {
                         <div className="mb-4 text-sm text-gray-700 dark:text-gray-300">
                             by <a href="#" className="text-gray-700 dark:text-gray-300">{BLOG.AUTHOR}</a> on {p.date?.start_date || p.createdTime}
                             <span className="font-bold mx-1"> | </span>
-                            <a href="#" className="text-gray-700 dark:text-gray-300">{p.category}</a>
+                            <a href={`/category${p.category}`} className="text-gray-700 dark:text-gray-300 hover:underline">{p.category}</a>
                             {/* <span className="font-bold mx-1"> | </span> */}
                             {/* <a href="#" className="text-gray-700">2 Comments</a> */}
                         </div>
@@ -65,5 +66,5 @@ export const BlogListPage = props => {
                 </Link>
             </div>
         </div>
-  );
+  )
 }
diff --git a/themes/example/components/SideBar.js b/themes/example/components/SideBar.js
index 742e661d..574bf230 100644
--- a/themes/example/components/SideBar.js
+++ b/themes/example/components/SideBar.js
@@ -23,7 +23,7 @@ export const SideBar = (props) => {
                                   href={`/category/${category.name}`}
                                   passHref
                                   legacyBehavior>
-                                    <li>  <a href="#" className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
+                                    <li>  <a href={`/category/${category.name}`} className="text-gray-darkest text-sm">{category.name}({category.count})</a></li>
                                 </Link>
                           )
                         })}
@@ -40,7 +40,7 @@ export const SideBar = (props) => {
                         {latestPosts?.map(p => {
                           return (
                               <Link key={p.id} href={`/${p.slug}`} passHref legacyBehavior>
-                                    <li>  <a href="#" className="text-gray-darkest text-sm">{p.title}</a></li>
+                                    <li>  <a href={`/${p.slug}`} className="text-gray-darkest text-sm">{p.title}</a></li>
                                 </Link>
                           )
                         })}