diff --git a/modules/web/src/components/CatalogItem.vue b/modules/web/src/components/CatalogItem.vue
new file mode 100644
index 000000000..881be249f
--- /dev/null
+++ b/modules/web/src/components/CatalogItem.vue
@@ -0,0 +1,35 @@
+<template>
+  <div
+    class="cata-text"
+    :class="{ selected: isSelected(source.index) }"
+    @click="gotoChapter(source)"
+  >
+    {{ source.title }}
+  </div>
+</template>
+<script setup>
+defineProps(["index", "source", "gotoChapter"]);
+
+const store = useBookStore();
+
+const { catalog } = storeToRefs(store);
+
+const index = computed(() => store.readingBook.index);
+
+const isSelected = (idx) => {
+  return idx == index.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.selected {
+  color: #eb4259;
+}
+
+.cata-text {
+  margin-right: 26px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+</style>