diff --git a/embedded/rspress/src/components/NumberedListItem.tsx b/embedded/rspress/src/components/NumberedListItem.tsx
new file mode 100644
index 0000000..d6aec65
--- /dev/null
+++ b/embedded/rspress/src/components/NumberedListItem.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import { getColorClass } from '../utils/style';
+
+interface TextSegment {
+  type: 'text' | 'link';
+  text?: string;
+  href?: string;
+  content?: TextSegment[];
+  styles?: {
+    bold?: boolean;
+    textColor?: string;
+    strike?: boolean;
+    backgroundColor?: string;
+  };
+}
+
+interface NumberedListItemData {
+  id: string;
+  type: 'numberedListItem';
+  props: {
+    textColor?: string;
+    backgroundColor?: string;
+    textAlignment?: 'left' | 'center' | 'right';
+  };
+  content: TextSegment[];
+  children: any[];
+}
+
+interface NumberedListItemProps {
+  rawJson: NumberedListItemData;
+}
+
+export const NumberedListItem: React.FC<NumberedListItemProps> = ({ rawJson }) => {
+  const { props, content, children } = rawJson;
+
+  const containerClasses = [
+    getColorClass(props.textColor),
+    getColorClass(props.backgroundColor, true),
+    props.textAlignment === 'left' ? 'kal-text-left' :
+    props.textAlignment === 'center' ? 'kal-text-center' :
+    props.textAlignment === 'right' ? 'kal-text-right' : '',
+    'kal-mb-2',
+  ].filter(Boolean).join(' ');
+
+  const renderTextSegment = (segment: TextSegment, index: number): React.ReactNode => {
+    const segmentClasses = [
+      segment.styles?.bold ? 'kal-font-bold' : '',
+      getColorClass(segment.styles?.textColor),
+      getColorClass(segment.styles?.backgroundColor, true),
+      segment.styles?.strike ? 'kal-line-through' : ''
+    ].filter(Boolean).join(' ');
+
+    if (segment.type === 'link') {
+      return (
+        <a key={index} href={segment.href} className={`${segmentClasses} kal-underline kal-text-blue-500`}>
+          {segment.content?.map((subSegment, subIndex) =>
+            renderTextSegment(subSegment, subIndex)
+          ) || segment.text}
+        </a>
+      );
+    }
+
+    return (
+      <span key={index} className={segmentClasses}>
+        {segment.text}
+      </span>
+    );
+  };
+
+  return (
+    <li className={containerClasses}>
+      {content.map((segment, index) => renderTextSegment(segment, index))}
+      {children}
+    </li>
+  );
+};
+
+export default NumberedListItem;
diff --git a/services/docs_rspress.go b/services/docs_rspress.go
index 537f588..2f19641 100644
--- a/services/docs_rspress.go
+++ b/services/docs_rspress.go
@@ -138,7 +138,7 @@ func (service *DocService) GenerateHead(docID uint, pageId uint, pageType string
 
 		buffer.WriteString("import { Meta } from '@components/Meta';\n")
 
-		componentTypes := []string{"paragraph", "table", "image", "video", "audio", "file", "alert"}
+		componentTypes := []string{"paragraph", "table", "image", "video", "audio", "file", "alert", "numberedListItem", "bulletListItem"}
 		caser := cases.Title(language.English)
 		addedComponents := make(map[string]bool)
 		var contentObjects []map[string]interface{}
@@ -152,6 +152,9 @@ func (service *DocService) GenerateHead(docID uint, pageId uint, pageType string
 				for _, componentType := range componentTypes {
 					if objType == componentType && !addedComponents[componentType] {
 						componentName := caser.String(componentType)
+						if componentName == "Numberedlistitem" {
+							componentName = "NumberedListItem"
+						}
 						buffer.WriteString(fmt.Sprintf(`import { %s } from "@components/%s";%s`, componentName, componentName, "\n"))
 						addedComponents[componentType] = true
 					}
diff --git a/utils/json_markdown.go b/utils/json_markdown.go
index de70644..a32221e 100644
--- a/utils/json_markdown.go
+++ b/utils/json_markdown.go
@@ -109,15 +109,11 @@ func BlockToMarkdown(block Block, depth int, numbering *[]int) string {
 	switch block.Type {
 	case "heading":
 		return HeadingToMarkdown(block)
-	case "numberedListItem":
-		return numberedListItemToMarkdown(block, depth, numbering, styledContent)
-	case "bulletListItem":
-		return bulletListItemToMarkdown(block, depth, styledContent)
 	case "checkListItem":
 		return checkListItemToMarkdown(block, depth, styledContent)
 	case "procode":
 		return ProcodeToMarkdown(block.Props)
-	case "paragraph", "table", "image", "video", "audio", "file", "alert":
+	case "paragraph", "table", "image", "video", "audio", "file", "alert", "numberedListItem", "bulletListItem":
 		return BlockToMDX(block)
 	default:
 		return ""