diff --git a/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx b/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx
new file mode 100644
index 00000000..f8f900c6
--- /dev/null
+++ b/auto-claude-ui/src/renderer/components/CompetitorAnalysisViewer.tsx
@@ -0,0 +1,154 @@
+import { TrendingUp, ExternalLink, AlertCircle } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from './ui/dialog';
+import { Badge } from './ui/badge';
+import { ScrollArea } from './ui/scroll-area';
+import type { CompetitorAnalysis } from '../../shared/types';
+
+interface CompetitorAnalysisViewerProps {
+  analysis: CompetitorAnalysis | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function CompetitorAnalysisViewer({
+  analysis,
+  open,
+  onOpenChange,
+}: CompetitorAnalysisViewerProps) {
+  if (!analysis) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-4xl max-h-[85vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <TrendingUp className="h-5 w-5 text-primary" />
+            Competitor Analysis Results
+          </DialogTitle>
+          <DialogDescription>
+            Analyzed {analysis.competitors.length} competitors to identify market gaps and opportunities
+          </DialogDescription>
+        </DialogHeader>
+
+        <ScrollArea className="flex-1 overflow-auto pr-4" style={{ maxHeight: 'calc(85vh - 120px)' }}>
+          <div className="space-y-6 pb-4">
+            {analysis.competitors.map((competitor) => (
+              <div
+                key={competitor.id}
+                className="rounded-lg border border-border p-4 space-y-3"
+              >
+                {/* Competitor Header */}
+                <div className="flex items-start justify-between">
+                  <div className="flex-1">
+                    <div className="flex items-center gap-2 mb-1">
+                      <h3 className="text-lg font-semibold">{competitor.name}</h3>
+                      {competitor.marketPosition && (
+                        <Badge variant="secondary" className="text-xs">
+                          {competitor.marketPosition}
+                        </Badge>
+                      )}
+                    </div>
+                    {competitor.description && (
+                      <p className="text-sm text-muted-foreground">
+                        {competitor.description}
+                      </p>
+                    )}
+                  </div>
+                  {competitor.url && (
+                    <a
+                      href={competitor.url}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-primary hover:underline flex items-center gap-1 text-sm ml-4"
+                    >
+                      <ExternalLink className="h-3 w-3" />
+                      Visit
+                    </a>
+                  )}
+                </div>
+
+                {/* Pain Points */}
+                <div>
+                  <h4 className="text-sm font-medium mb-2 flex items-center gap-2">
+                    <AlertCircle className="h-4 w-4 text-warning" />
+                    Identified Pain Points ({competitor.painPoints.length})
+                  </h4>
+                  <div className="space-y-2">
+                    {competitor.painPoints.length === 0 ? (
+                      <p className="text-sm text-muted-foreground italic">
+                        No pain points identified
+                      </p>
+                    ) : (
+                      competitor.painPoints.map((painPoint) => (
+                        <div
+                          key={painPoint.id}
+                          className="rounded bg-muted/50 p-3 space-y-2"
+                        >
+                          <div className="flex items-start gap-2">
+                            <Badge
+                              variant={
+                                painPoint.severity === 'high'
+                                  ? 'destructive'
+                                  : painPoint.severity === 'medium'
+                                  ? 'default'
+                                  : 'secondary'
+                              }
+                              className="mt-0.5"
+                            >
+                              {painPoint.severity}
+                            </Badge>
+                            <div className="flex-1">
+                              <p className="text-sm font-medium">
+                                {painPoint.description}
+                              </p>
+                              {painPoint.userQuotes && painPoint.userQuotes.length > 0 && (
+                                <div className="mt-2 space-y-1">
+                                  {painPoint.userQuotes.map((quote, idx) => (
+                                    <p
+                                      key={idx}
+                                      className="text-xs text-muted-foreground italic border-l-2 border-muted pl-2"
+                                    >
+                                      "{quote}"
+                                    </p>
+                                  ))}
+                                </div>
+                              )}
+                              {painPoint.opportunityScore !== undefined && (
+                                <div className="mt-2">
+                                  <span className="text-xs text-muted-foreground">
+                                    Opportunity Score:{' '}
+                                    <span className="font-medium text-foreground">
+                                      {painPoint.opportunityScore}/10
+                                    </span>
+                                  </span>
+                                </div>
+                              )}
+                            </div>
+                          </div>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                </div>
+              </div>
+            ))}
+
+            {/* Summary */}
+            {analysis.summary && (
+              <div className="rounded-lg bg-primary/5 border border-primary/20 p-4">
+                <h4 className="text-sm font-semibold mb-2">Market Summary</h4>
+                <p className="text-sm text-muted-foreground">{analysis.summary}</p>
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/auto-claude-ui/src/renderer/components/Roadmap.tsx b/auto-claude-ui/src/renderer/components/Roadmap.tsx
index 0fd91928..e4f65d61 100644
--- a/auto-claude-ui/src/renderer/components/Roadmap.tsx
+++ b/auto-claude-ui/src/renderer/components/Roadmap.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { RoadmapGenerationProgress } from './RoadmapGenerationProgress';
 import { CompetitorAnalysisDialog } from './CompetitorAnalysisDialog';
+import { CompetitorAnalysisViewer } from './CompetitorAnalysisViewer';
 import { AddFeatureDialog } from './AddFeatureDialog';
 import { RoadmapHeader } from './roadmap/RoadmapHeader';
 import { RoadmapEmptyState } from './roadmap/RoadmapEmptyState';
@@ -16,6 +17,7 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
   const [selectedFeature, setSelectedFeature] = useState<RoadmapFeature | null>(null);
   const [activeTab, setActiveTab] = useState('phases');
   const [showAddFeatureDialog, setShowAddFeatureDialog] = useState(false);
+  const [showCompetitorViewer, setShowCompetitorViewer] = useState(false);
 
   // Custom hooks
   const { roadmap, competitorAnalysis, generationStatus } = useRoadmapData(projectId);
@@ -78,6 +80,7 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
         competitorAnalysis={competitorAnalysis}
         onAddFeature={() => setShowAddFeatureDialog(true)}
         onRefresh={handleRefresh}
+        onViewCompetitorAnalysis={() => setShowCompetitorViewer(true)}
       />
 
       {/* Content */}
@@ -111,6 +114,13 @@ export function Roadmap({ projectId, onGoToTask }: RoadmapProps) {
         onDecline={handleCompetitorDialogDecline}
       />
 
+      {/* Competitor Analysis Viewer */}
+      <CompetitorAnalysisViewer
+        analysis={competitorAnalysis}
+        open={showCompetitorViewer}
+        onOpenChange={setShowCompetitorViewer}
+      />
+
       {/* Add Feature Dialog */}
       <AddFeatureDialog
         phases={roadmap.phases}
diff --git a/auto-claude-ui/src/renderer/components/roadmap/RoadmapHeader.tsx b/auto-claude-ui/src/renderer/components/roadmap/RoadmapHeader.tsx
index b821035d..e5e2fca4 100644
--- a/auto-claude-ui/src/renderer/components/roadmap/RoadmapHeader.tsx
+++ b/auto-claude-ui/src/renderer/components/roadmap/RoadmapHeader.tsx
@@ -6,7 +6,7 @@ import { getFeatureStats } from '../../stores/roadmap-store';
 import { ROADMAP_PRIORITY_COLORS } from '../../../shared/constants';
 import type { RoadmapHeaderProps } from './types';
 
-export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRefresh }: RoadmapHeaderProps) {
+export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRefresh, onViewCompetitorAnalysis }: RoadmapHeaderProps) {
   const stats = getFeatureStats(roadmap);
 
   return (
@@ -20,20 +20,22 @@ export function RoadmapHeader({ roadmap, competitorAnalysis, onAddFeature, onRef
             {competitorAnalysis && (
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <Badge variant="secondary" className="gap-1">
+                  <Badge
+                    variant="secondary"
+                    className="gap-1 cursor-pointer hover:bg-secondary/80 transition-colors"
+                    onClick={onViewCompetitorAnalysis}
+                  >
                     <TrendingUp className="h-3 w-3" />
                     Competitor Analysis
                   </Badge>
                 </TooltipTrigger>
                 <TooltipContent className="max-w-md">
                   <div className="space-y-2">
-                    <div className="font-semibold">Analyzed {competitorAnalysis.competitors.length} competitors:</div>
-                    {competitorAnalysis.competitors.map((comp) => (
-                      <div key={comp.id} className="text-sm">
-                        <div className="font-medium">• {comp.name}</div>
-                        <div className="text-muted-foreground ml-3">{comp.painPoints.length} pain points identified</div>
-                      </div>
-                    ))}
+                    <div className="font-semibold">Click to view detailed analysis</div>
+                    <div className="text-sm text-muted-foreground">
+                      Analyzed {competitorAnalysis.competitors.length} competitors with {' '}
+                      {competitorAnalysis.competitors.reduce((sum, c) => sum + c.painPoints.length, 0)} pain points identified
+                    </div>
                   </div>
                 </TooltipContent>
               </Tooltip>
diff --git a/auto-claude-ui/src/renderer/components/roadmap/types.ts b/auto-claude-ui/src/renderer/components/roadmap/types.ts
index db1d85c7..40db7c0b 100644
--- a/auto-claude-ui/src/renderer/components/roadmap/types.ts
+++ b/auto-claude-ui/src/renderer/components/roadmap/types.ts
@@ -35,6 +35,7 @@ export interface RoadmapHeaderProps {
   competitorAnalysis: CompetitorAnalysis | null;
   onAddFeature: () => void;
   onRefresh: () => void;
+  onViewCompetitorAnalysis?: () => void;
 }
 
 export interface RoadmapEmptyStateProps {