diff --git a/web/app/(commonLayout)/remark-directive-test/page.tsx b/web/app/(commonLayout)/remark-directive-test/page.tsx
index b8bbd5a110..64fac9283f 100644
--- a/web/app/(commonLayout)/remark-directive-test/page.tsx
+++ b/web/app/(commonLayout)/remark-directive-test/page.tsx
@@ -1,5 +1,5 @@
 'use client'
-import { DirectiveMarkdownRenderer } from './directive-markdown-renderer'
+import { MarkdownWithDirective } from '@/app/components/base/markdown-with-directive'
 
 const markdown = `
 We’re speaking with technical teams to better understand:
@@ -29,8 +29,8 @@ export default function RemarkDirectiveTestPage() {
       <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 16 }}>
         remark-directive test page
       </h1>
-      <div>
-        <DirectiveMarkdownRenderer markdown={markdown} />
+      <div className="markdown-body">
+        <MarkdownWithDirective markdown={markdown} />
       </div>
     </main>
   )
diff --git a/web/app/(commonLayout)/remark-directive-test/directive-markdown-renderer.tsx b/web/app/components/base/markdown-with-directive/index.tsx
similarity index 94%
rename from web/app/(commonLayout)/remark-directive-test/directive-markdown-renderer.tsx
rename to web/app/components/base/markdown-with-directive/index.tsx
index ac75aafe77..7eb896b6a3 100644
--- a/web/app/(commonLayout)/remark-directive-test/directive-markdown-renderer.tsx
+++ b/web/app/components/base/markdown-with-directive/index.tsx
@@ -2,8 +2,8 @@ import type { Components } from 'react-markdown'
 import ReactMarkdown from 'react-markdown'
 import remarkDirective from 'remark-directive'
 import { visit } from 'unist-util-visit'
-import { WithIconItem, WithIconList } from './directive-components'
-import { directivePropsSchemas } from './directive-props-schema'
+import { WithIconItem, WithIconList } from './markdown-with-directive-components'
+import { directivePropsSchemas } from './markdown-with-directive-schema'
 
 type DirectiveNode = {
   type?: string
@@ -177,11 +177,11 @@ const directiveComponents = {
   withiconitem: WithIconItem,
 } as unknown as Components
 
-type DirectiveMarkdownRendererProps = {
+type MarkdownWithDirectiveProps = {
   markdown: string
 }
 
-export function DirectiveMarkdownRenderer({ markdown }: DirectiveMarkdownRendererProps) {
+export function MarkdownWithDirective({ markdown }: MarkdownWithDirectiveProps) {
   const normalizedMarkdown = normalizeDirectiveAttributeBlocks(markdown)
 
   return (
diff --git a/web/app/(commonLayout)/remark-directive-test/directive-components.tsx b/web/app/components/base/markdown-with-directive/markdown-with-directive-components.tsx
similarity index 95%
rename from web/app/(commonLayout)/remark-directive-test/directive-components.tsx
rename to web/app/components/base/markdown-with-directive/markdown-with-directive-components.tsx
index f2f8ae60c6..3b8ee21aeb 100644
--- a/web/app/(commonLayout)/remark-directive-test/directive-components.tsx
+++ b/web/app/components/base/markdown-with-directive/markdown-with-directive-components.tsx
@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react'
-import type { WithIconItemDirectiveProps, WithIconListDirectiveProps } from './directive-props-schema'
+import type { WithIconItemDirectiveProps, WithIconListDirectiveProps } from './markdown-with-directive-schema'
 
 type WithIconListProps = WithIconListDirectiveProps & {
   children?: ReactNode
diff --git a/web/app/(commonLayout)/remark-directive-test/directive-props-schema.ts b/web/app/components/base/markdown-with-directive/markdown-with-directive-schema.ts
similarity index 100%
rename from web/app/(commonLayout)/remark-directive-test/directive-props-schema.ts
rename to web/app/components/base/markdown-with-directive/markdown-with-directive-schema.ts