diff --git a/services/frontend/src/components/messages/message-detail-view.tsx b/services/frontend/src/components/messages/message-detail-view.tsx
new file mode 100644
index 0000000..e1c7333
--- /dev/null
+++ b/services/frontend/src/components/messages/message-detail-view.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { ArrowLeft, MessageSquare } from "lucide-react";
+import { GlassCard } from "@/components/glass/card";
+import { AttachmentsGrid } from "./attachments-grid";
+import { AiAnalysisPanel } from "./ai-analysis-panel";
+import type { AttachmentRecord, MessageRecord } from "@/lib/types";
+
+interface MessageDetailViewProps {
+  message: MessageRecord;
+  attachments?: AttachmentRecord[];
+  onBack?: () => void;
+}
+
+export function MessageDetailView({ message, attachments, onBack }: MessageDetailViewProps) {
+  return (
+    <GlassCard variant="base" className="h-full">
+      {onBack && (
+        <button type="button" onClick={onBack} className="flex items-center gap-1 text-xs text-text-secondary/60 hover:text-text-primary mb-3 transition-colors">
+          <ArrowLeft className="size-3" /> Back
+        </button>
+      )}
+
+      {/* Message header */}
+      <div className="flex items-center gap-2 mb-3">
+        <MessageSquare className="size-4 text-primary" />
+        <span className="font-semibold text-sm text-text-primary">{message.username}</span>
+        <span className="text-[10px] text-text-secondary/40 font-mono">{message.channel_id?.slice(0, 8)}</span>
+      </div>
+
+      {/* Content */}
+      <div className="text-sm text-text-primary/90 leading-relaxed mb-4 whitespace-pre-wrap">
+        {message.content || "(no text content)"}
+      </div>
+
+      {/* Attachments */}
+      {attachments && attachments.length > 0 && (
+        <div className="mb-4">
+          <AttachmentsGrid attachments={attachments} />
+        </div>
+      )}
+
+      {/* AI Analysis */}
+      <AiAnalysisPanel
+        status={message.ai_status}
+        severity={message.ai_severity}
+        confidence={message.ai_confidence}
+        flags={message.ai_moderation_flags}
+        categories={message.ai_categories}
+        action={message.ai_recommended_action}
+        score={message.ai_moderation_score}
+      />
+    </GlassCard>
+  );
+}
diff --git a/services/frontend/src/components/shared/index.ts b/services/frontend/src/components/shared/index.ts
index fd1a6c0..3703758 100644
--- a/services/frontend/src/components/shared/index.ts
+++ b/services/frontend/src/components/shared/index.ts
@@ -1,6 +1,4 @@
-export { DetailStat } from "./detail-stat";
 export { EmptyState } from "./empty-state";
 export { ErrorBoundary } from "./error-boundary";
 export { ErrorState } from "./error-state";
 export { LoadingSkeleton } from "./loading-skeleton";
-export { StatCard } from "./stat-card";