diff --git a/components/markdown-renderer/index.js b/components/markdown-renderer/index.js
new file mode 100644
index 0000000..7d6f63c
--- /dev/null
+++ b/components/markdown-renderer/index.js
@@ -0,0 +1,61 @@
+'use client'
+
+import PropTypes from 'prop-types'
+import dynamic from 'next/dynamic'
+import Typography from '@mui/material/Typography'
+import {useTheme} from '@mui/material/styles'
+
+const MarkdownPreview = dynamic(
+  () => import('@uiw/react-markdown-preview').then(mod => mod.default),
+  {ssr: false}
+)
+
+export default function MarkdownRenderer({content, color, fallbackComponent: FallbackComponent = Typography}) {
+  const theme = useTheme()
+
+  // Check if content contains markdown syntax
+  const hasMarkdown = content && (
+    content.includes('**')
+    || content.includes('*')
+    || content.includes('#')
+    || content.includes('[')
+    || content.includes('`')
+    || content.includes('> ')
+    || content.includes('- ')
+    || content.includes('1. ')
+  )
+
+  if (!hasMarkdown) {
+    // Fallback to original rendering for plain text
+    const formattedContent = content.replaceAll('\n', '<br />')
+    return <FallbackComponent dangerouslySetInnerHTML={{__html: formattedContent}} />
+  }
+
+  const textColor = color || theme.palette.text.primary
+
+  return (
+    <div
+      style={{
+        backgroundColor: 'transparent',
+        color: textColor
+      }}
+      data-color-mode={theme.palette.mode}
+    >
+      <MarkdownPreview
+        source={content}
+        style={{
+          backgroundColor: 'transparent',
+          color: textColor,
+          fontSize: 'inherit',
+          fontFamily: 'inherit'
+        }}
+      />
+    </div>
+  )
+}
+
+MarkdownRenderer.propTypes = {
+  content: PropTypes.string.isRequired,
+  color: PropTypes.string,
+  fallbackComponent: PropTypes.elementType
+}