diff --git a/src/components/SeriesPanel.astro b/src/components/SeriesPanel.astro
new file mode 100644
index 0000000..1dee837
--- /dev/null
+++ b/src/components/SeriesPanel.astro
@@ -0,0 +1,109 @@
+---
+import { UNCATEGORIZED } from '@constants/constants'
+import I18nKey from '../i18n/i18nKey'
+import { i18n } from '../i18n/translation'
+import { getSortedPosts } from '../utils/content-utils'
+import { getPostUrlBySlug } from '../utils/url-utils'
+import { getCategoryUrl } from '../utils/url-utils'
+
+interface Props {
+ keyword?: string
+ tags?: string[]
+ categories?: string[]
+}
+
+let posts = await getSortedPosts()
+
+interface Series {
+ count: number
+ name: string
+ posts: typeof posts
+}
+
+const groups: { category: string; series: Series[] }[] = (() => {
+ const groupedSeries = posts.reduce(
+ (grouped: { [category: string]: {[seriesName: string]: Series} }, post) => {
+ const category = post.data.category || UNCATEGORIZED
+ const series = post.data.series || UNCATEGORIZED
+ if (category == UNCATEGORIZED || series === UNCATEGORIZED) {
+ return grouped
+ }
+ if (!grouped[category]) {
+ grouped[category] = {}
+ }
+ if (!grouped[category][series]) {
+ grouped[category][series] = {
+ count: 0,
+ name: series,
+ posts: [],
+ }
+ }
+ grouped[category][series].count++
+ grouped[category][series].posts.push(post)
+ return grouped
+ },
+ {},
+ )
+
+ // convert the object to an array
+ const groupedSeriesArray = Object.keys(groupedSeries).map(key => ({
+ category: key,
+ series: Object.values(groupedSeries[key]),
+ }))
+
+ return groupedSeriesArray
+})()
+---
+
+
+ {
+ groups.map(group => (
+
+ ))
+ }
+