diff --git a/src/components/dashboard/WritingMetricsChart.tsx b/src/components/dashboard/WritingMetricsChart.tsx
new file mode 100644
index 0000000..c119199
--- /dev/null
+++ b/src/components/dashboard/WritingMetricsChart.tsx
@@ -0,0 +1,237 @@
+import React from 'react';
+import { Calendar, HelpCircle } from 'lucide-react';
+import { Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer, Bar, ComposedChart } from 'recharts';
+import type { WeeklyWritingMetrics } from '@/types/metrics';
+
+interface MetricConfig {
+  key: string;
+  name: string;
+  color: string;
+}
+
+type TimeFilter = '3m' | '6m' | '12m' | 'all';
+
+interface TimeFilterOption {
+  value: TimeFilter;
+  label: string;
+  months: number | null;
+}
+
+const METRICS_CONFIG: MetricConfig[] = [
+  { key: 'score', name: 'Nota Geral', color: '#6366f1' },
+  { key: 'adequacy', name: 'Adequação', color: '#f43f5e' },
+  { key: 'coherence', name: 'Coerência', color: '#0ea5e9' },
+  { key: 'cohesion', name: 'Coesão', color: '#10b981' },
+  { key: 'vocabulary', name: 'Vocabulário', color: '#8b5cf6' },
+  { key: 'grammar', name: 'Gramática', color: '#f59e0b' }
+];
+
+const TIME_FILTERS: TimeFilterOption[] = [
+  { value: '3m', label: '3 meses', months: 3 },
+  { value: '6m', label: '6 meses', months: 6 },
+  { value: '12m', label: '12 meses', months: 12 },
+  { value: 'all', label: 'Todo período', months: null },
+];
+
+interface WritingMetricsChartProps {
+  data: WeeklyWritingMetrics[];
+  className?: string;
+}
+
+export function WritingMetricsChart({ data, className = '' }: WritingMetricsChartProps) {
+  const [visibleMetrics, setVisibleMetrics] = React.useState<Set<string>>(
+    new Set(METRICS_CONFIG.map(metric => metric.key))
+  );
+  const [timeFilter, setTimeFilter] = React.useState<TimeFilter>('12m');
+
+  const toggleMetric = (metricKey: string) => {
+    setVisibleMetrics(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(metricKey)) {
+        newSet.delete(metricKey);
+      } else {
+        newSet.add(metricKey);
+      }
+      return newSet;
+    });
+  };
+
+  const filterDataByTime = (data: WeeklyWritingMetrics[]): WeeklyWritingMetrics[] => {
+    if (timeFilter === 'all') return data;
+    
+    const months = TIME_FILTERS.find(f => f.value === timeFilter)?.months || 12;
+    const cutoffDate = new Date();
+    cutoffDate.setMonth(cutoffDate.getMonth() - months);
+    
+    return data.filter(item => {
+      const [year, week] = item.week.split('-W').map(Number);
+      const itemDate = new Date(year, 0, 1 + (week - 1) * 7);
+      return itemDate >= cutoffDate;
+    });
+  };
+
+  const filteredData = filterDataByTime(data);
+
+  return (
+    <div className={`bg-white rounded-xl shadow-sm border border-gray-200 p-8 ${className}`}>
+      <div className="flex flex-col gap-6">
+        <div className="flex items-center justify-between">
+          <div className="space-y-1">
+            <h2 className="text-xl font-semibold text-gray-900">Evolução da Escrita por Semana</h2>
+            <p className="text-sm text-gray-500">Acompanhe seu progresso na escrita ao longo do tempo</p>
+          </div>
+          <div className="flex items-center gap-4">
+            {/* Filtro de Período */}
+            <div className="flex items-center gap-2 bg-gray-50 p-1 rounded-lg">
+              <Calendar className="h-4 w-4 text-gray-500" />
+              {TIME_FILTERS.map(filter => (
+                <button
+                  key={filter.value}
+                  onClick={() => setTimeFilter(filter.value)}
+                  className={`
+                    px-3 py-1 rounded-md text-sm font-medium transition-all duration-200
+                    ${timeFilter === filter.value
+                      ? 'bg-white text-purple-600 shadow-sm'
+                      : 'text-gray-600 hover:bg-gray-100'
+                    }
+                  `}
+                >
+                  {filter.label}
+                </button>
+              ))}
+            </div>
+            <div 
+              className="text-gray-400 hover:text-gray-600 cursor-help transition-colors"
+              title="Gráfico mostrando a evolução das suas métricas de escrita ao longo das semanas"
+            >
+              <HelpCircle className="h-4 w-4" />
+            </div>
+          </div>
+        </div>
+
+        {/* Pill Buttons */}
+        <div className="flex flex-wrap gap-2 p-1">
+          {METRICS_CONFIG.map(metric => (
+            <button
+              key={metric.key}
+              onClick={() => toggleMetric(metric.key)}
+              className={`
+                px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ease-in-out
+                ${visibleMetrics.has(metric.key)
+                  ? 'shadow-md transform -translate-y-px'
+                  : 'bg-gray-50 text-gray-500 hover:bg-gray-100'
+                }
+                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-opacity-50
+              `}
+              style={{
+                backgroundColor: visibleMetrics.has(metric.key) ? metric.color : undefined,
+                color: visibleMetrics.has(metric.key) ? 'white' : undefined,
+                boxShadow: visibleMetrics.has(metric.key) ? '0 2px 4px rgba(0,0,0,0.1)' : undefined
+              }}
+            >
+              <span className="flex items-center gap-2">
+                <span className={`w-2 h-2 rounded-full ${visibleMetrics.has(metric.key) ? 'bg-white' : 'bg-gray-400'}`}></span>
+                {metric.name}
+              </span>
+            </button>
+          ))}
+        </div>
+
+        <div className="h-[400px] w-full">
+          <ResponsiveContainer width="100%" height="100%">
+            <ComposedChart data={filteredData} margin={{ top: 20, right: 30, left: 20, bottom: 20 }}>
+              <defs>
+                <linearGradient id="barGradient" x1="0" y1="0" x2="0" y2="1">
+                  <stop offset="0%" stopColor="#6366f1" stopOpacity={0.3} />
+                  <stop offset="100%" stopColor="#6366f1" stopOpacity={0.1} />
+                </linearGradient>
+              </defs>
+              <CartesianGrid 
+                strokeDasharray="3 3" 
+                vertical={false}
+                stroke="#f0f0f0"
+              />
+              <XAxis 
+                dataKey="week" 
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                dy={10}
+              />
+              <YAxis 
+                yAxisId="left"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                dx={-10}
+              />
+              <YAxis 
+                yAxisId="right"
+                orientation="right"
+                axisLine={false}
+                tickLine={false}
+                tick={{ fontSize: 12, fill: '#6b7280' }}
+                dx={10}
+              />
+              <Tooltip 
+                formatter={(value: number, name: string) => {
+                  const metricNames: { [key: string]: string } = {
+                    score: 'Nota Geral',
+                    adequacy: 'Adequação',
+                    coherence: 'Coerência',
+                    cohesion: 'Coesão',
+                    vocabulary: 'Vocabulário',
+                    grammar: 'Gramática',
+                    minutesWriting: 'Minutos Escrevendo'
+                  };
+                  return [value, metricNames[name] || name];
+                }}
+                contentStyle={{
+                  backgroundColor: 'rgba(255, 255, 255, 0.98)',
+                  border: 'none',
+                  borderRadius: '8px',
+                  boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+                  padding: '12px'
+                }}
+                isAnimationActive={false}
+              />
+              <Legend 
+                verticalAlign="top"
+                align="right"
+                iconType="circle"
+                wrapperStyle={{
+                  paddingBottom: '20px'
+                }}
+              />
+              {METRICS_CONFIG.map(metric => (
+                visibleMetrics.has(metric.key) && (
+                  <Line
+                    key={metric.key}
+                    yAxisId="left"
+                    type="monotone"
+                    dataKey={metric.key}
+                    stroke={metric.color}
+                    name={metric.name}
+                    strokeWidth={2.5}
+                    dot={{ strokeWidth: 2, r: 4, fill: 'white' }}
+                    activeDot={{ r: 6, strokeWidth: 2 }}
+                    isAnimationActive={false}
+                  />
+                )
+              ))}
+              <Bar
+                yAxisId="right"
+                dataKey="minutesWriting"
+                name="Minutos Escrevendo"
+                fill="url(#barGradient)"
+                radius={[4, 4, 0, 0]}
+                isAnimationActive={false}
+                maxBarSize={50}
+              />
+            </ComposedChart>
+          </ResponsiveContainer>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/components/dashboard/WritingMetricsSection.tsx b/src/components/dashboard/WritingMetricsSection.tsx
new file mode 100644
index 0000000..c0d8475
--- /dev/null
+++ b/src/components/dashboard/WritingMetricsSection.tsx
@@ -0,0 +1,143 @@
+import React from 'react';
+import { BookOpen, Clock, TrendingUp, Award, Target, Brain, Gauge, Sparkles, Puzzle, Pencil, HelpCircle } from 'lucide-react';
+import { MetricCard } from './MetricCard';
+import type { WritingMetrics } from '@/types/metrics';
+
+interface WritingMetricsSectionProps {
+  data: WritingMetrics;
+  className?: string;
+}
+
+const MAIN_METRICS = [
+  {
+    key: 'totalEssays',
+    title: 'Total de Redações',
+    getValue: (data: WritingMetrics) => data.totalEssays,
+    icon: BookOpen,
+    iconColor: 'text-purple-600',
+    iconBgColor: 'bg-purple-100'
+  },
+  {
+    key: 'averageScore',
+    title: 'Nota Média',
+    getValue: (data: WritingMetrics) => `${data.averageScore}%`,
+    icon: TrendingUp,
+    iconColor: 'text-green-600',
+    iconBgColor: 'bg-green-100'
+  },
+  {
+    key: 'totalEssaysTime',
+    title: 'Tempo de Escrita',
+    getValue: (data: WritingMetrics) => `${data.totalEssaysTime}min`,
+    icon: Clock,
+    iconColor: 'text-blue-600',
+    iconBgColor: 'bg-blue-100'
+  },
+  {
+    key: 'currentWritingLevel',
+    title: 'Nível de Escrita',
+    getValue: (data: WritingMetrics) => data.currentWritingLevel,
+    icon: Award,
+    iconColor: 'text-yellow-600',
+    iconBgColor: 'bg-yellow-100'
+  }
+];
+
+const DETAILED_METRICS = [
+  {
+    key: 'averageAdequacy',
+    title: 'Adequação ao Tema',
+    getValue: (data: WritingMetrics) => `${data.averageAdequacy}%`,
+    icon: Target,
+    iconColor: 'text-indigo-600',
+    iconBgColor: 'bg-indigo-100',
+    tooltip: 'Avalia o quanto sua redação está alinhada com o tema e gênero propostos'
+  },
+  {
+    key: 'averageCoherence',
+    title: 'Coerência',
+    getValue: (data: WritingMetrics) => `${data.averageCoherence}%`,
+    icon: Brain,
+    iconColor: 'text-pink-600',
+    iconBgColor: 'bg-pink-100',
+    tooltip: 'Indica a clareza e lógica no desenvolvimento das ideias do texto'
+  },
+  {
+    key: 'averageCohesion',
+    title: 'Coesão',
+    getValue: (data: WritingMetrics) => `${data.averageCohesion}%`,
+    icon: Puzzle,
+    iconColor: 'text-orange-600',
+    iconBgColor: 'bg-orange-100',
+    tooltip: 'Avalia o uso adequado de conectivos e elementos de ligação entre as partes do texto'
+  },
+  {
+    key: 'averageVocabulary',
+    title: 'Vocabulário',
+    getValue: (data: WritingMetrics) => `${data.averageVocabulary}%`,
+    icon: Sparkles,
+    iconColor: 'text-cyan-600',
+    iconBgColor: 'bg-cyan-100',
+    tooltip: 'Analisa a riqueza e adequação do vocabulário utilizado'
+  },
+  {
+    key: 'averageGrammar',
+    title: 'Gramática',
+    getValue: (data: WritingMetrics) => `${data.averageGrammar}%`,
+    icon: Pencil,
+    iconColor: 'text-amber-600',
+    iconBgColor: 'bg-amber-100',
+    tooltip: 'Avalia o uso correto das regras gramaticais e ortográficas'
+  }
+];
+
+export function WritingMetricsSection({ data, className = '' }: WritingMetricsSectionProps) {
+  return (
+    <div className={className}>
+      <div className="mb-8">
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">Métricas de Escrita</h2>
+        
+        {/* Métricas Principais */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
+          {MAIN_METRICS.map(metric => (
+            <MetricCard
+              key={metric.key}
+              title={metric.title}
+              value={metric.getValue(data)}
+              icon={metric.icon}
+              iconColor={metric.iconColor}
+              iconBgColor={metric.iconBgColor}
+            />
+          ))}
+        </div>
+
+        {/* Métricas Detalhadas */}
+        <div>
+          <div className="flex items-center gap-2 mb-4">
+            <h3 className="text-lg font-semibold text-gray-900">Métricas Detalhadas de Escrita</h3>
+            <div 
+              className="text-gray-400 hover:text-gray-600 cursor-help transition-colors" 
+              title="Estas métricas são calculadas com base em todas as suas redações, fornecendo uma visão detalhada do seu progresso na escrita"
+            >
+              <HelpCircle className="h-4 w-4" />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
+            {DETAILED_METRICS.map(metric => (
+              <MetricCard
+                key={metric.key}
+                title={metric.title}
+                value={metric.getValue(data)}
+                icon={metric.icon}
+                iconColor={metric.iconColor}
+                iconBgColor={metric.iconBgColor}
+                tooltip={metric.tooltip}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+} 
\ No newline at end of file
diff --git a/src/pages/student-dashboard/StudentDashboardPage.tsx b/src/pages/student-dashboard/StudentDashboardPage.tsx
index fd76f3c..1b3c365 100644
--- a/src/pages/student-dashboard/StudentDashboardPage.tsx
+++ b/src/pages/student-dashboard/StudentDashboardPage.tsx
@@ -5,6 +5,8 @@ import { supabase } from '../../lib/supabase';
 import type { Story, Student } from '../../types/database';
 import { MetricsChart } from '@/components/dashboard/MetricsChart';
 import { DashboardMetrics } from '@/components/dashboard/DashboardMetrics';
+import { WritingMetricsSection } from '@/components/dashboard/WritingMetricsSection';
+import { WritingMetricsChart } from '@/components/dashboard/WritingMetricsChart';
 import type { 
   DashboardMetrics as DashboardMetricsType,
   DashboardWeeklyMetrics,
@@ -342,11 +344,27 @@ export function StudentDashboardPage() {
         </div>
       </div>
 
-      {/* Métricas */}
-      <DashboardMetrics data={metrics.reading} />
+      {/* Seção de Métricas de Leitura */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">Métricas de Leitura</h2>
+        
+        {/* Métricas de Leitura */}
+        <DashboardMetrics data={metrics.reading} className="mb-8" />
 
-      {/* Gráfico de Evolução */}
-      <MetricsChart data={weeklyMetrics.reading} className="mb-8" />
+        {/* Gráfico de Evolução da Leitura */}
+        <MetricsChart data={weeklyMetrics.reading} className="mb-8" />
+      </div>
+
+      {/* Seção de Métricas de Escrita */}
+      <div className="mb-12">
+        <h2 className="text-2xl font-bold text-gray-900 mb-6">Métricas de Escrita</h2>
+        
+        {/* Métricas de Escrita */}
+        <WritingMetricsSection data={metrics.writing} className="mb-8" />
+
+        {/* Gráfico de Evolução da Escrita */}
+        <WritingMetricsChart data={weeklyMetrics.writing} className="mb-8" />
+      </div>
 
       {/* Histórias Recentes */}
       <div>