diff --git a/app/src/components/diff-viewer.jsx b/app/src/components/diff-viewer.jsx
new file mode 100644
index 0000000..41c6e1c
--- /dev/null
+++ b/app/src/components/diff-viewer.jsx
@@ -0,0 +1,43 @@
+import { useMemo } from 'react';
+import * as Diff from 'diff';
+
+export function DiffViewer({ oldText, newText }) {
+  const diffs = useMemo(() => {
+    return Diff.diffWordsWithSpace(oldText || '', newText || '');
+  }, [oldText, newText]);
+
+  return (
+    <div className="diff-viewer" style={{
+      whiteSpace: 'pre-wrap',
+      direction: 'rtl',
+      textAlign: 'right',
+      fontFamily: 'monospace',
+      padding: '1rem',
+      backgroundColor: 'var(--bg-surface)',
+      border: '1px solid var(--border-color)',
+      borderRadius: '8px',
+      lineHeight: '1.6'
+    }}>
+      {diffs.map((part, index) => {
+        const color = part.added ? '#10b981' : part.removed ? '#ef4444' : 'inherit';
+        const backgroundColor = part.added ? 'rgba(16, 185, 129, 0.1)' : part.removed ? 'rgba(239, 68, 68, 0.1)' : 'transparent';
+        const textDecoration = part.removed ? 'line-through' : 'none';
+
+        return (
+          <span
+            key={index}
+            style={{
+              color,
+              backgroundColor,
+              textDecoration,
+              padding: part.added || part.removed ? '2px 4px' : '0',
+              borderRadius: '4px',
+            }}
+          >
+            {part.value}
+          </span>
+        );
+      })}
+    </div>
+  );
+}