diff --git a/themes/next/components/CategoryGroup.js b/themes/next/components/CategoryGroup.js
index 872c4a28..c00b5d1c 100644
--- a/themes/next/components/CategoryGroup.js
+++ b/themes/next/components/CategoryGroup.js
@@ -1,10 +1,13 @@
+import { siteConfig } from '@/lib/config'
 import Link from 'next/link'
 
 const CategoryGroup = ({ currentCategory, categories }) => {
-  if (!categories) return <></>
+  if (!categories || categories.length === 0) return <></>
+  const categoryCount = siteConfig('PREVIEW_CATEGORY_COUNT')
+  const categoryOptions = categories.slice(0, categoryCount)
   return <>
     <div id='category-list' className='dark:border-gray-600 flex flex-wrap'>
-      {categories.map(category => {
+      {categoryOptions.map(category => {
         const selected = currentCategory === category.name
         return (
           <Link
diff --git a/themes/next/components/TagGroups.js b/themes/next/components/TagGroups.js
index 1a406ed3..42efafab 100644
--- a/themes/next/components/TagGroups.js
+++ b/themes/next/components/TagGroups.js
@@ -1,3 +1,4 @@
+import { siteConfig } from '@/lib/config'
 import TagItemMini from './TagItemMini'
 
 /**
@@ -8,11 +9,14 @@ import TagItemMini from './TagItemMini'
  * @constructor
  */
 const TagGroups = ({ tags, currentTag }) => {
-  if (!tags) return <></>
+  if (!tags || tags.length === 0) return <></>
+
+  const tagsCount = siteConfig('PREVIEW_TAG_COUNT')
+  const tagOptions = tags.slice(0, tagsCount)
   return (
     <div id='tags-group' className='dark:border-gray-600 w-66 space-y-2'>
       {
-        tags.map(tag => {
+        tagOptions.map(tag => {
           const selected = tag.name === currentTag
           return <TagItemMini key={tag.name} tag={tag} selected={selected} />
         })