diff --git a/src/pages/story/StoryPage.tsx b/src/pages/story/StoryPage.tsx
index ed24428..048bcf4 100644
--- a/src/pages/story/StoryPage.tsx
+++ b/src/pages/story/StoryPage.tsx
@@ -1,14 +1,39 @@
 import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { supabase } from '../../lib/supabase';
-import { Story } from '../../types/database';
+import { Story, StoryRecording } from '../../types/database';
 import { AudioRecorder } from '../../components/story/AudioRecorder';
 import { Loader2 } from 'lucide-react';
+import type { MetricsData } from '../../components/story/StoryMetrics';
 
 interface StoryPageProps {
   demo?: boolean;
 }
 
+const demoRecording: StoryRecording = {
+  id: 'demo-recording',
+  fluency_score: 85,
+  pronunciation_score: 92,
+  accuracy_score: 88,
+  comprehension_score: 90,
+  words_per_minute: 120,
+  pause_count: 3,
+  error_count: 2,
+  self_corrections: 1,
+  strengths: [
+    'Leitura fluente e natural',
+    'Boa pronúncia das palavras',
+    'Respeito à pontuação'
+  ],
+  improvements: [
+    'Pode melhorar o ritmo em algumas partes',
+    'Atenção a algumas palavras específicas'
+  ],
+  suggestions: 'Tente manter um ritmo mais constante durante toda a leitura',
+  created_at: new Date().toISOString(),
+  processed_at: new Date().toISOString()
+};
+
 export function StoryPage({ demo = false }: StoryPageProps): JSX.Element {
   const { storyId } = useParams();
   const [story, setStory] = useState<Story | null>(null);