diff --git a/src/components/ArticleCard/src/Article.vue b/src/components/ArticleCard/src/Article.vue
index e3aef591..ee047133 100644
--- a/src/components/ArticleCard/src/Article.vue
+++ b/src/components/ArticleCard/src/Article.vue
@@ -32,7 +32,10 @@
               <span>{{ t('settings.featured') }}</span>
             </span>
           </b>
-          <b v-if="post.categories && post.categories.length > 0">
+          <b
+            v-if="post.categories && post.categories.length > 0"
+            @click="navigateToCategory(post.categories[0].slug)"
+          >
             {{ post.categories[0].name }}
           </b>
           <b v-else-if="post.categories && post.categories.length <= 0">
@@ -43,7 +46,11 @@
 
         <span class="flex flex-wrap">
           <ul v-if="post.tags && post.tags.length > 0">
-            <li v-for="tag in post.min_tags" :key="tag.slug">
+            <li
+              v-for="tag in post.min_tags"
+              :key="tag.slug"
+              @click="navigateToTag(tag.slug)"
+            >
               <em># </em><span>{{ tag.name }}</span>
             </li>
           </ul>
@@ -118,6 +125,7 @@ import { useAppStore } from '@/stores/app'
 import { computed, defineComponent } from 'vue'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'ObFeatureList',
@@ -129,6 +137,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     const appStore = useAppStore()
     const { t } = useI18n()
 
@@ -137,6 +146,14 @@ export default defineComponent({
       window.location.href = link
     }
 
+    const navigateToTag = (slug: string) => {
+      router.push({ name: 'post-search', query: { tag: slug } })
+    }
+
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     return {
       avatarClasses: computed(() => ({
         'hover:opacity-50 cursor-pointer': true,
@@ -146,6 +163,8 @@ export default defineComponent({
         return { background: appStore.themeConfig.theme.header_gradient_css }
       }),
       post: computed(() => props.data),
+      navigateToTag,
+      navigateToCategory,
       handleAuthorClick,
       t
     }
diff --git a/src/components/ArticleCard/src/HorizontalArticle.vue b/src/components/ArticleCard/src/HorizontalArticle.vue
index d35bb4e7..16e8cb2d 100644
--- a/src/components/ArticleCard/src/HorizontalArticle.vue
+++ b/src/components/ArticleCard/src/HorizontalArticle.vue
@@ -34,7 +34,10 @@
               </span>
             </span>
           </b>
-          <b v-if="post.categories && post.categories.length > 0">
+          <b
+            v-if="post.categories && post.categories.length > 0"
+            @click="navigateToCategory(post.categories[0].slug)"
+          >
             {{ post.categories[0].name }}
           </b>
           <b v-else-if="post.categories && post.categories.length <= 0">
@@ -49,6 +52,7 @@
               <li
                 v-for="index in numberOfTags"
                 :key="post.tags[index - 1].slug"
+                @click="navigateToTag(post.tags[index - 1].slug)"
               >
                 <em># </em><span>{{ post.tags[index - 1].name }}</span>
               </li>
@@ -124,6 +128,7 @@ import { useAppStore } from '@/stores/app'
 import { useCommonStore } from '@/stores/common'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { useRouter } from 'vue-router'
 
 enum TagLimit {
   forMobile = '2',
@@ -140,6 +145,7 @@ export default defineComponent({
     }
   },
   setup(props) {
+    const router = useRouter()
     const appStore = useAppStore()
     const commonStore = useCommonStore()
     const { t } = useI18n()
@@ -150,6 +156,14 @@ export default defineComponent({
       window.location.href = link
     }
 
+    const navigateToTag = (slug: string) => {
+      router.push({ name: 'post-search', query: { tag: slug } })
+    }
+
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     return {
       avatarClass: computed(() => ({
         'hover:opacity-50 cursor-pointer': true,
@@ -166,6 +180,8 @@ export default defineComponent({
         }
         return tagCount > TagLimit.default ? TagLimit.default : tagCount
       }),
+      navigateToTag,
+      navigateToCategory,
       post,
       handleAuthorClick,
       t
diff --git a/src/components/Sidebar/src/CategoryBox.vue b/src/components/Sidebar/src/CategoryBox.vue
index 90ab18f6..b0142636 100644
--- a/src/components/Sidebar/src/CategoryBox.vue
+++ b/src/components/Sidebar/src/CategoryBox.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="sidebar-box">
+  <div :class="sidebarBoxClasses">
     <SubTitle :title="'titles.category_list'" icon="category" />
     <ul class="flex justify-event flex-wrap gap-2 pt-2 cursor-pointer">
       <template v-if="categories.length > 0">
@@ -7,29 +7,16 @@
           class="flex flex-row items-center hover:opacity-50"
           v-for="category in categories"
           :key="category.slug"
+          @click="navigateToCategory(category.slug)"
         >
           <span
-            class="
-              bg-ob-deep-900
-              text-center
-              px-3
-              py-1
-              rounded-tl-md rounded-bl-md
-              text-sm
-            "
+            class="bg-ob-deep-900 text-center px-3 py-1 rounded-tl-md rounded-bl-md text-sm"
+            :style="gradientBackground(category.slug === activeCategory)"
           >
             {{ category.name }}
           </span>
           <b
-            class="
-              bg-ob-deep-900
-              text-ob text-center
-              px-2
-              py-1
-              rounded-tr-md rounded-br-md
-              text-sm
-              opacity-70
-            "
+            class="bg-ob-deep-900 text-ob text-center px-2 py-1 rounded-tr-md rounded-br-md text-sm opacity-70"
           >
             {{ category.count }}
           </b>
@@ -47,28 +34,54 @@ import { computed, defineComponent, onMounted, ref } from 'vue'
 import { SubTitle } from '@/components/Title'
 import { useCategoryStore } from '@/stores/category'
 import { useAppStore } from '@/stores/app'
+import { useRouter } from 'vue-router'
 
 export default defineComponent({
   name: 'ObArticleBox',
   components: { SubTitle },
-  setup() {
+  props: {
+    sidebarBox: {
+      type: Boolean,
+      default: true
+    },
+    activeCategory: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props) {
     const appStore = useAppStore()
     const categoryStore = useCategoryStore()
     const loading = ref(true)
+    const router = useRouter()
 
     const fetchData = async () => {
       await categoryStore.fetchCategories()
       loading.value = false
     }
 
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     onMounted(fetchData)
 
     return {
       loading,
+      navigateToCategory,
+      sidebarBoxClasses: computed(() => ({
+        'sidebar-box': props.sidebarBox
+      })),
       categories: computed(() => categoryStore.categories),
-      gradientBackground: computed(() => {
-        return { background: appStore.themeConfig.theme.header_gradient_css }
-      })
+      gradientBackground: (active: boolean) => {
+        return active
+          ? {
+              background: appStore.themeConfig.theme.header_gradient_css,
+              color: '#fff',
+              opacity: 1
+            }
+          : {}
+      }
     }
   }
 })
diff --git a/src/components/Sidebar/src/TagBox.vue b/src/components/Sidebar/src/TagBox.vue
index 5e05e718..eeff2ce6 100644
--- a/src/components/Sidebar/src/TagBox.vue
+++ b/src/components/Sidebar/src/TagBox.vue
@@ -1,48 +1,43 @@
 <template>
-  <Sticky
-    :stickyTop="32 + 81"
-    :endingElId="endEleId"
-    dynamicElClass="#sticky-tag-box"
-  >
-    <div id="sticky-tag-box" class="sidebar-box">
-      <SubTitle :title="'titles.tag_list'" icon="tag" />
-      <TagList :class="tagBoxClasses">
-        <template v-if="tags && tags.length > 0">
-          <TagItem
-            v-for="tag in tags"
-            :key="tag.slug"
-            :name="tag.name"
-            :slug="tag.slug"
-            :count="tag.count"
-            size="small"
-          />
-          <template v-if="!expand">
-            <div class="more-cover"></div>
-            <div class="more-btn" @click="expandBox">
-              <SvgIcon
-                class="font-bold"
-                icon-class="more"
-                fill="currentColor"
-                stroke="none"
-                height="1.5rem"
-                width="1.5rem"
-              />
-              <span>{{ t('settings.more-tags') }}</span>
-            </div>
-          </template>
-        </template>
-        <template v-else-if="tags">
-          <ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
-        </template>
-        <template v-else>
-          <div class="flex flex-row justify-center items-center">
-            <SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
-            {{ t('settings.empty-tag') }}
+  <div id="sticky-tag-box" :class="sidebarBoxClasses">
+    <SubTitle :title="'titles.tag_list'" icon="tag" />
+    <TagList :class="tagBoxClasses">
+      <template v-if="tags && tags.length > 0">
+        <TagItem
+          v-for="tag in tags"
+          :key="tag.slug"
+          :name="tag.name"
+          :slug="tag.slug"
+          :count="tag.count"
+          :active="!!activeTag && tag.slug === activeTag"
+          size="small"
+        />
+        <template v-if="!expand">
+          <div class="more-cover"></div>
+          <div class="more-btn" @click="expandBox">
+            <SvgIcon
+              class="font-bold"
+              icon-class="more"
+              fill="currentColor"
+              stroke="none"
+              height="1.5rem"
+              width="1.5rem"
+            />
+            <span>{{ t('settings.more-tags') }}</span>
           </div>
         </template>
-      </TagList>
-    </div>
-  </Sticky>
+      </template>
+      <template v-else-if="tags">
+        <ob-skeleton tag="li" :count="10" height="20px" width="3rem" />
+      </template>
+      <template v-else>
+        <div class="flex flex-row justify-center items-center">
+          <SvgIcon class="stroke-ob-bright mr-2" icon-class="warning" />
+          {{ t('settings.empty-tag') }}
+        </div>
+      </template>
+    </TagList>
+  </div>
 </template>
 
 <script lang="ts">
@@ -52,14 +47,18 @@ import { useTagStore } from '@/stores/tag'
 import { TagList, TagItem } from '@/components/Tag'
 import { useI18n } from 'vue-i18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
-import Sticky from '@/components/Sticky.vue'
-import { useAppStore } from '@/stores/app'
 
 export default defineComponent({
   name: 'ObTag',
-  components: { SubTitle, TagList, TagItem, SvgIcon, Sticky },
-  setup() {
-    const appStore = useAppStore()
+  components: { SubTitle, TagList, TagItem, SvgIcon },
+  props: {
+    sidebarBox: {
+      type: Boolean,
+      default: true
+    },
+    activeTag: String
+  },
+  setup(props) {
     const tagStore = useTagStore()
     const { t } = useI18n()
     const expand = ref<boolean>(false)
@@ -75,11 +74,6 @@ export default defineComponent({
     onMounted(fetchData)
 
     return {
-      endEleId: computed(() =>
-        appStore.themeConfig.footerLinks.data.length > 0
-          ? 'footer-link'
-          : 'footer'
-      ),
       tags: computed(() => {
         if (tagStore.isLoaded && tagStore.tags.length === 0) return null
         return tagStore.tags
@@ -89,6 +83,9 @@ export default defineComponent({
         'max-h-98': !expand.value,
         'h-full': expand.value
       })),
+      sidebarBoxClasses: computed(() => ({
+        'sidebar-box': props.sidebarBox
+      })),
       expandBox,
       expand,
       t
diff --git a/src/components/Tag/TagItem.vue b/src/components/Tag/TagItem.vue
index 8aa3d6b7..25a6ab0c 100644
--- a/src/components/Tag/TagItem.vue
+++ b/src/components/Tag/TagItem.vue
@@ -4,7 +4,8 @@
   >
     <router-link
       :class="tagClasses"
-      :to="{ name: 'tags-search', query: { slug: slug } }"
+      :to="{ name: 'post-search', query: { tag: slug } }"
+      :style="gradientBackground"
     >
       {{ name }}
       <sub :class="countClasses">
@@ -15,6 +16,7 @@
 </template>
 
 <script lang="ts">
+import { useAppStore } from '@/stores/app'
 import { PropType, computed, defineComponent, toRefs } from 'vue'
 
 export default defineComponent({
@@ -29,10 +31,15 @@ export default defineComponent({
     size: {
       type: String as PropType<'small' | 'large'>,
       default: 'small'
+    },
+    active: {
+      type: Boolean,
+      default: false
     }
   },
   setup(props) {
     const tagSize = toRefs(props).size
+    const appStore = useAppStore()
 
     return {
       tagClasses: computed(() => ({
@@ -44,7 +51,16 @@ export default defineComponent({
         'block -mt-1.5 ml-1 text-xs opacity-50': tagSize.value === 'small',
         'block -mt-1.5 ml-2 rounded-full text-xs text-ob':
           tagSize.value === 'large'
-      }))
+      })),
+      gradientBackground: computed(() => {
+        return props.active
+          ? {
+              background: appStore.themeConfig.theme.header_gradient_css,
+              color: '#fff',
+              opacity: 1
+            }
+          : {}
+      })
     }
   }
 })
diff --git a/src/icons/category.svg b/src/icons/category.svg
index 0be219bf..4945477e 100644
--- a/src/icons/category.svg
+++ b/src/icons/category.svg
@@ -1,8 +1,4 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
-<path fill="" d="M8 4V5C8 5.55 8.45 6 9 6H15C15.55 6 16 5.55 16 5V4H19C19.55 4 20 4.45 20 5V21C20 21.55 19.55 22 19 22H5C4.45 22 4 21.55 4 21V5C4 4.45 4.45 4 5 4H8Z" undefined="1"></path>
-<path stroke-linejoin="round" stroke-width="2" stroke="" d="M8 4V5C8 5.55 8.45 6 9 6H15C15.55 6 16 5.55 16 5V4"></path>
-<path fill="" d="M15 6H9C8.45 6 8 5.55 8 5V3C8 2.45 8.45 2 9 2H15C15.55 2 16 2.45 16 3V5C16 5.55 15.55 6 15 6Z" undefined="1"></path>
-<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="" d="M16 10H8"></path>
-<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="" d="M16 18H8"></path>
-<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" stroke="" d="M16 14H8"></path>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
+<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" stroke="" fill="none" d="M19 10H5L2 20V6V4H10L12 6H19V10Z" clip-rule="evenodd" fill-rule="evenodd"></path>
+<path stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="10" stroke-width="1.5" stroke="" fill="none" d="M5 10H22L19 20H2L5 10Z" clip-rule="evenodd" fill-rule="evenodd"></path>
 </svg>
diff --git a/src/router/index.ts b/src/router/index.ts
index 6b070a03..a0c5bcbd 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -40,8 +40,8 @@ const routes = [
     component: () => import('../views/Tag.vue')
   },
   {
-    path: '/tags/search',
-    name: 'tags-search',
+    path: '/post/search',
+    name: 'post-search',
     component: () => import('../views/Result.vue')
   },
   {
diff --git a/src/styles/components/article.scss b/src/styles/components/article.scss
index e6d2f62c..de17442b 100644
--- a/src/styles/components/article.scss
+++ b/src/styles/components/article.scss
@@ -42,9 +42,9 @@
     span {
       filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.1));
       b {
-        @apply text-ob text-xs uppercase;
+        @apply text-ob text-xs uppercase cursor-pointer hover:opacity-60;
         &.article-tag {
-          @apply relative py-0.5 px-1.5 text-white mr-2;
+          @apply relative py-0.5 px-1.5 text-white mr-2 hover:opacity-100 cursor-default;
           span {
             @apply relative z-10 text-xs ml-0.5;
             position: relative;
@@ -68,7 +68,7 @@
           em {
             @apply not-italic opacity-50;
           }
-          @apply mr-3;
+          @apply mr-3 cursor-pointer hover:opacity-60;
         }
       }
     }
@@ -115,9 +115,9 @@
   .feature-content {
     @apply flex flex-col relative px-6 pb-6 lg:p-12 z-40 row-span-2 lg:row-auto;
     b {
-      @apply text-ob uppercase;
+      @apply text-ob uppercase hover:opacity-60 cursor-pointer;
       &.article-tag {
-        @apply relative py-0.5 px-1.5 text-white mr-3;
+        @apply relative py-0.5 px-1.5 text-white mr-3 hover:opacity-100 cursor-default;
 
         span {
           @apply relative z-10 text-xs ml-0.5;
@@ -143,7 +143,7 @@
         em {
           @apply not-italic opacity-50;
         }
-        @apply mr-3;
+        @apply mr-3 hover:opacity-60 cursor-pointer;
       }
     }
     h1 {
@@ -657,7 +657,7 @@
   .post-labels {
     @apply relative -bottom-1.5;
     > b {
-      @apply text-white text-xs uppercase py-1 px-2 rounded-md inline-flex;
+      @apply text-white text-xs uppercase py-1 px-2 rounded-md inline-flex hover:opacity-60 cursor-pointer;
       background-color: rgba(255,255,255,0.25);
       text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
     }
@@ -667,7 +667,7 @@
         em {
           @apply not-italic;
         }
-        @apply text-white text-sm mr-3 opacity-80;
+        @apply text-white text-sm mr-3 opacity-80 hover:opacity-60 cursor-pointer;
         text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
       }
     }
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 3608b82d..b06c7c30 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -85,7 +85,13 @@
         <Sidebar>
           <Profile author="blog-author" />
           <RecentComment />
-          <TagBox />
+          <Sticky
+            :stickyTop="32 + 81"
+            :endingElId="endEleId"
+            dynamicElClass="#sticky-tag-box"
+          >
+            <TagBox />
+          </Sticky>
         </Sidebar>
       </div>
     </div>
@@ -107,6 +113,7 @@ import Paginator from '@/components/Paginator.vue'
 import { useMetaStore } from '@/stores/meta'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import usePageTitle from '@/hooks/usePageTitle'
+import Sticky from '@/components/Sticky.vue'
 
 export default defineComponent({
   name: 'Home',
@@ -121,7 +128,8 @@ export default defineComponent({
     Paginator,
     RecentComment,
     Profile,
-    SvgIcon
+    SvgIcon,
+    Sticky
   },
   setup() {
     useMetaStore().setTitle('home')
@@ -221,6 +229,11 @@ export default defineComponent({
     }
 
     return {
+      endEleId: computed(() =>
+        appStore.themeConfig.footerLinks.data.length > 0
+          ? 'footer-link'
+          : 'footer'
+      ),
       gradientText: computed(
         () => appStore.themeConfig.theme.background_gradient_style
       ),
diff --git a/src/views/Post.vue b/src/views/Post.vue
index 34ec075f..667a65cc 100644
--- a/src/views/Post.vue
+++ b/src/views/Post.vue
@@ -8,6 +8,7 @@
             v-else-if="
               !loading && post.categories && post.categories.length > 0
             "
+            @click="navigateToCategory(post.categories[0].slug)"
           >
             <span>{{ post.categories[0].name }}</span>
           </b>
@@ -22,7 +23,11 @@
               class="mr-2"
             />
             <template v-else-if="!loading && post.tags && post.tags.length > 0">
-              <li v-for="tag in post.tags" :key="tag.slug">
+              <li
+                v-for="tag in post.tags"
+                :key="tag.slug"
+                @click="navigateToTag(tag.slug)"
+              >
                 <em class="opacity-50">#</em>
                 {{ tag.name }}
               </li>
@@ -177,7 +182,7 @@ import { Sidebar, Toc, Profile } from '@/components/Sidebar'
 import { Post } from '@/models/Post.class'
 import { usePostStore } from '@/stores/post'
 import { Ref, computed, defineComponent, nextTick, ref, watch } from 'vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
 import Comment from '@/components/Comment.vue'
 import { SubTitle } from '@/components/Title'
@@ -215,6 +220,7 @@ export default defineComponent({
     const appStore = useAppStore()
     const commonStore = useCommonStore()
     const route = useRoute()
+    const router = useRouter()
     const { t } = useI18n()
     const post = ref(new Post())
     const loading = ref(true)
@@ -265,6 +271,14 @@ export default defineComponent({
       window.location.href = link
     }
 
+    const navigateToTag = (slug: string) => {
+      router.push({ name: 'post-search', query: { tag: slug } })
+    }
+
+    const navigateToCategory = (slug: string) => {
+      router.push({ name: 'post-search', query: { category: slug } })
+    }
+
     return {
       avatarClasses: computed(() => {
         return {
@@ -283,6 +297,8 @@ export default defineComponent({
       commonStore,
       fetchData,
       handleAuthorClick,
+      navigateToTag,
+      navigateToCategory,
       loading,
       post,
       t
diff --git a/src/views/Result.vue b/src/views/Result.vue
index 8be424f3..977060cb 100644
--- a/src/views/Result.vue
+++ b/src/views/Result.vue
@@ -1,20 +1,33 @@
 <template>
-  <div class="flex flex-col">
+  <div class="flex flex-col mt-10">
     <div class="post-header">
-      <Breadcrumbs :current="t(pageType)" />
-      <h1 class="post-title text-white uppercase">{{ title }}</h1>
+      <!-- <Breadcrumbs :current="t(pageType)" /> -->
+      <div class="flex flex-row gap-8">
+        <h1 v-if="categoryTitle" class="post-title text-white uppercase">
+          <span class="opacity-60">
+            <SvgIcon icon-class="category" stroke="white" />
+          </span>
+          {{ categoryTitle }}
+        </h1>
+        <h1 v-if="tagTitle" class="post-title text-white uppercase">
+          <span class="opacity-60">
+            <SvgIcon icon-class="tag" stroke="white" />
+          </span>
+          {{ tagTitle }}
+        </h1>
+      </div>
     </div>
     <div class="main-grid">
       <div class="relative">
         <transition name="fade-slide-y" mode="out-in">
           <div v-show="isEmpty" class="post-html flex flex-col items-center">
-            <h1>没有找到任何文章</h1>
+            <h1>{{ t('settings.no-search-result') }}</h1>
             <SvgIcon icon-class="empty-search" style="font-size: 35rem" />
           </div>
         </transition>
         <div class="flex flex-col relative">
-          <ul class="grid grid-cols-1 md:grid-cols-1 xl:grid-cols-1 gap-8">
-            <template v-if="posts.data.length === 0">
+          <ul class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
+            <template v-if="isLoading || posts.data.length === 0">
               <li v-for="n in 12" :key="n">
                 <Article :data="{}" />
               </li>
@@ -27,18 +40,22 @@
           </ul>
 
           <Paginator
-            :pageSize="12"
+            :pageSize="pagination.pageSize"
             :pageTotal="pagination.pageTotal"
             :page="pagination.page"
-            @pageChange="pageChangeHanlder"
+            @pageChange="pageChangeHandler"
           />
         </div>
       </div>
       <div>
         <Sidebar>
-          <CategoryBox />
-          <TagBox />
-          <RecentComment />
+          <div class="sidebar-box flex flex-col gap-8">
+            <CategoryBox
+              :sidebar-box="false"
+              :active-category="categoryTitle"
+            />
+            <TagBox :sidebar-box="false" :active-tag="tagTitle" />
+          </div>
         </Sidebar>
       </div>
     </div>
@@ -55,12 +72,7 @@ import {
   watch
 } from 'vue'
 import { useI18n } from 'vue-i18n'
-import {
-  Sidebar,
-  RecentComment,
-  TagBox,
-  CategoryBox
-} from '@/components/Sidebar'
+import { Sidebar, TagBox, CategoryBox } from '@/components/Sidebar'
 import Breadcrumbs from '@/components/Breadcrumbs.vue'
 import Paginator from '@/components/Paginator.vue'
 import { Article } from '@/components/ArticleCard'
@@ -75,7 +87,6 @@ export default defineComponent({
   components: {
     Breadcrumbs,
     Sidebar,
-    RecentComment,
     TagBox,
     Paginator,
     Article,
@@ -92,19 +103,20 @@ export default defineComponent({
     const isFetched = ref(false)
     const posts = ref(new SpecificPostsList())
     const pagination = ref({
+      pageSize: 12,
       pageTotal: 0,
       page: 1
     })
-    const queryKey = 'ob-query-key'
-    let querySlug = ref()
+    const queryTagKey = 'aurora-query-tag'
+    const queryCategoryKey = 'aurora-query-category'
+    const queryTag = ref()
+    const queryCategory = ref()
 
     const initPage = () => {
-      const path = route.path
-      if (path.indexOf('tags') !== -1) {
-        pageType.value = 'menu.tags'
+      if (queryTag.value) {
         fetchPostByTag()
-      } else {
-        pageType.value = 'menu.search'
+      } else if (queryCategory.value) {
+        fetchPostByCategory()
       }
 
       window.scrollTo({
@@ -116,19 +128,34 @@ export default defineComponent({
 
     const fetchPostByTag = () => {
       isFetched.value = false
-      postStore.fetchPostsByTag(querySlug.value).then(response => {
+      postStore.fetchPostsByTag(queryTag.value).then(response => {
         isFetched.value = true
         posts.value = response
+        pagination.value.pageTotal = response.total
       })
     }
 
-    const pageChangeHanlder = (toQuery: any = {}) => {
-      querySlug.value = toQuery.slug
-        ? String(toQuery.slug)
-        : localStorage.getItem(queryKey)
+    const fetchPostByCategory = () => {
+      isFetched.value = false
+      postStore.fetchPostsByCategory(queryCategory.value).then(response => {
+        isFetched.value = true
+        posts.value = response
+        pagination.value.pageTotal = response.total
+      })
+    }
+
+    const pageChangeHandler = () => {
+      queryCategory.value = ''
+      queryTag.value = ''
+      const { tag, category } = route.query
+
+      if (category) {
+        queryCategory.value = category
+      } else if (tag) {
+        queryTag.value = tag
+      }
 
-      if (querySlug.value && querySlug.value !== undefined) {
-        localStorage.setItem(queryKey, querySlug.value)
+      if (tag || category) {
         initPage()
       }
     }
@@ -136,29 +163,28 @@ export default defineComponent({
     watch(
       () => route.query,
       toQuery => {
-        pageChangeHanlder(toQuery)
+        pageChangeHandler()
       }
     )
 
     onBeforeMount(() => {
-      pageChangeHanlder(route.query)
+      pageChangeHandler()
     })
 
     onUnmounted(() => {
-      localStorage.removeItem(queryKey)
+      localStorage.removeItem(queryTagKey)
+      localStorage.removeItem(queryCategoryKey)
     })
 
     return {
-      isEmpty: computed(() => {
-        return posts.value.data.length === 0 && isFetched.value
-      }),
-      title: computed(() => {
-        return querySlug.value
-      }),
+      isLoading: computed(() => !isFetched.value),
+      isEmpty: computed(() => posts.value.data.length === 0 && isFetched.value),
+      categoryTitle: computed(() => queryCategory.value),
+      tagTitle: computed(() => queryTag.value),
       posts,
       pageType,
       pagination,
-      pageChangeHanlder,
+      pageChangeHandler,
       t
     }
   }