diff --git a/package.json b/package.json
index e796274..3265c35 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "@tauri-apps/plugin-notification": "^2",
     "@tauri-apps/plugin-shell": "^2",
     "@tauri-apps/plugin-sql": "^2",
+    "lucide-react": "^1.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index dd59d5f..396016f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       '@tauri-apps/plugin-sql':
         specifier: ^2
         version: 2.4.0
+      lucide-react:
+        specifier: ^1.18.0
+        version: 1.18.0(react@18.3.1)
       react:
         specifier: ^18.3.1
         version: 18.3.1
@@ -755,6 +758,11 @@ packages:
   lru-cache@5.1.1:
     resolution: {integrity: sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==}
 
+  lucide-react@1.18.0:
+    resolution: {integrity: sha512-LZDb7H/0YfM+RJncD0hDQRCAu+vSGODqpe35TuVI8EuXaRjkczbsx7p8dY4J87F/MUSj6bpYqeI8nw8qXaAdmA==}
+    peerDependencies:
+      react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1564,6 +1572,10 @@ snapshots:
     dependencies:
       yallist: 3.1.1
 
+  lucide-react@1.18.0(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+
   merge2@1.4.1: {}
 
   micromatch@4.0.8:
diff --git a/src/App.jsx b/src/App.jsx
index 957c724..f41275a 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, useRef } from 'react'
 import { Toaster } from 'react-hot-toast'
 import { AppProvider } from './context/AppContext'
 import Navigation from './components/Navigation'
@@ -6,36 +6,76 @@ import Timer from './components/Timer'
 import Dashboard from './components/Dashboard'
 import SettingsScreen from './components/SettingsScreen'
 import TagManager from './components/TagManager'
+import KeyboardHelpModal from './components/KeyboardHelpModal'
+import useKeyboardShortcuts from './hooks/useKeyboardShortcuts'
 
-const VIEWS = { timer: Timer, dashboard: Dashboard, tasks: TagManager }
+const NON_TIMER_VIEWS = { dashboard: Dashboard, tasks: TagManager }
 
-export default function App() {
+function AppInner() {
   const [view, setView] = useState('timer')
   const [showSettings, setShowSettings] = useState(false)
+  const [showKeyboardHelp, setShowKeyboardHelp] = useState(false)
+  const timerRef = useRef(null)
+
+  useKeyboardShortcuts({
+    ' ':       () => timerRef.current?.toggleTimer(),
+    'r':       () => timerRef.current?.resetTimer(),
+    'f':       () => timerRef.current?.startFocus(),
+    'b':       () => timerRef.current?.startShortBreak(),
+    'l':       () => timerRef.current?.startLongBreak(),
+    'ctrl+d':  () => setView('dashboard'),
+    'ctrl+t':  () => setView('timer'),
+    'ctrl+s':  () => setShowSettings(true),
+    '?':       () => setShowKeyboardHelp((v) => !v),
+    'escape':  () => {
+      if (showKeyboardHelp) { setShowKeyboardHelp(false); return }
+      if (showSettings) { setShowSettings(false) }
+    },
+  })
+
+  const ActiveNonTimer = NON_TIMER_VIEWS[view]
+
+  return (
+    <div className="min-h-screen flex" style={{ background: 'var(--surface-0)' }}>
+      <Navigation
+        activeView={view}
+        onViewChange={(id) => {
+          if (id === 'settings') setShowSettings(true)
+          else setView(id)
+        }}
+        onShowKeyboardHelp={() => setShowKeyboardHelp(true)}
+      />
+
+      <main className="flex-1 pl-16 overflow-auto min-h-screen">
+        {/* Timer is always mounted to preserve state and allow keyboard shortcuts */}
+        <div className={view === 'timer' ? 'p-6' : 'hidden'}>
+          <Timer ref={timerRef} />
+        </div>
 
-  const ActiveView = VIEWS[view] || Timer
+        {view !== 'timer' && ActiveNonTimer && (
+          <div key={view} className="p-6 animate-fade-in">
+            <ActiveNonTimer />
+          </div>
+        )}
+      </main>
 
+      {showSettings && <SettingsScreen onClose={() => setShowSettings(false)} />}
+      <KeyboardHelpModal isOpen={showKeyboardHelp} onClose={() => setShowKeyboardHelp(false)} />
+
+      <Toaster
+        position="bottom-right"
+        toastOptions={{
+          style: { background: '#1f2937', color: '#fff', border: '1px solid rgba(255,255,255,0.1)' },
+        }}
+      />
+    </div>
+  )
+}
+
+export default function App() {
   return (
     <AppProvider>
-      <div className="min-h-screen bg-gradient-to-br from-gray-900 via-slate-900 to-gray-900 flex">
-        <Navigation
-          activeView={view}
-          onViewChange={(id) => {
-            if (id === 'settings') { setShowSettings(true) }
-            else { setView(id) }
-          }}
-        />
-        <main className="flex-1 pl-20 p-6 overflow-auto min-h-screen">
-          <ActiveView />
-        </main>
-        {showSettings && <SettingsScreen onClose={() => setShowSettings(false)} />}
-        <Toaster
-          position="bottom-right"
-          toastOptions={{
-            style: { background: '#1f2937', color: '#fff', border: '1px solid rgba(255,255,255,0.1)' },
-          }}
-        />
-      </div>
+      <AppInner />
     </AppProvider>
   )
 }
diff --git a/src/components/Dashboard.jsx b/src/components/Dashboard.jsx
index b4a9294..3cdda15 100644
--- a/src/components/Dashboard.jsx
+++ b/src/components/Dashboard.jsx
@@ -1,23 +1,43 @@
 import React, { useState, useEffect, useCallback } from 'react'
+import { Clock, TrendingUp, Target, Hourglass, LayoutDashboard, BarChart2, FileText, Tag, GitCommit, Brain, Coffee, Moon, RefreshCw, History, GitBranch, FileBarChart } from 'lucide-react'
 import { dbService } from '../services/dbService'
 import ProgressCharts from './ProgressCharts'
 import QuickNotes from './QuickNotes'
 import TagManager from './TagManager'
+import ReportsView from './ReportsView'
+
+const PHASE_ICONS = { focus: Brain, shortBreak: Coffee, longBreak: Moon }
+
+const StatCard = ({ label, value, sub, icon: Icon, accent }) => (
+  <div className="card card-hover p-5 flex flex-col gap-3">
+    <div className="flex items-center justify-between">
+      <span className="text-xs font-medium" style={{ color: 'var(--text-muted)' }}>{label}</span>
+      <div className="w-8 h-8 rounded-lg flex items-center justify-center" style={{ background: `${accent}18` }}>
+        <Icon size={15} style={{ color: accent }} strokeWidth={2} />
+      </div>
+    </div>
+    <div>
+      <p className="text-2xl font-semibold text-white leading-none">{value}</p>
+      {sub && <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>{sub}</p>}
+    </div>
+  </div>
+)
+
+const SkeletonCard = () => (
+  <div className="card p-5 space-y-3">
+    <div className="skeleton h-3 w-24 rounded" />
+    <div className="skeleton h-7 w-32 rounded" />
+    <div className="skeleton h-2 w-full rounded" />
+  </div>
+)
 
 const Dashboard = () => {
   const [activeTab, setActiveTab] = useState('overview')
   const [loading, setLoading] = useState(true)
   const [stats, setStats] = useState({
-    todayFocus: 0,
-    weekFocus: 0,
-    totalCycles: 0,
-    productivity: 0,
-    averageSessionLength: 0,
-    weeklyProgress: 0,
-    weeklyGoal: 40,
-    recentActivities: [],
-    recentCommits: [],
-    dailyBreakdown: [],
+    todayFocus: 0, weekFocus: 0, totalCycles: 0, productivity: 0,
+    averageSessionLength: 0, weeklyProgress: 0, weeklyGoal: 40,
+    recentActivities: [], recentCommits: [], dailyBreakdown: [],
   })
 
   const loadData = useCallback(async () => {
@@ -37,36 +57,25 @@ const Dashboard = () => {
 
       const recentActivities = cycleList.map((c) => ({
         id: c.id, name: c.name, phase: c.phase,
-        duration: (c.duration || 0) * 60, timestamp: c.created_at, tags: [],
+        duration: (c.duration || 0) * 60, timestamp: c.created_at,
       }))
 
       const recentCommits = cycleList
-        .filter((c) => {
-          try { return JSON.parse(c.git_commits || '[]').length > 0 } catch { return false }
-        })
+        .filter((c) => { try { return JSON.parse(c.git_commits || '[]').length > 0 } catch { return false } })
         .flatMap((c) => {
           try {
             return JSON.parse(c.git_commits || '[]').map((commit) => ({
-              id: `${c.id}-${commit.hash}`,
-              hash: commit.hash,
-              message: commit.message,
-              cycleName: c.name,
-              timestamp: c.created_at,
+              id: `${c.id}-${commit.hash}`, hash: commit.hash,
+              message: commit.message, cycleName: c.name, timestamp: c.created_at,
             }))
           } catch { return [] }
-        })
-        .slice(0, 15)
+        }).slice(0, 15)
 
       setStats({
-        todayFocus: daily?.total_focus_minutes ?? 0,
-        weekFocus,
-        totalCycles: overview?.total_cycles ?? 0,
-        productivity: overview?.productivity_score ?? 0,
+        todayFocus: daily?.total_focus_minutes ?? 0, weekFocus,
+        totalCycles: overview?.total_cycles ?? 0, productivity: overview?.productivity_score ?? 0,
         averageSessionLength: overview?.average_cycle_duration ?? 0,
-        weeklyProgress,
-        weeklyGoal,
-        recentActivities,
-        recentCommits,
+        weeklyProgress, weeklyGoal, recentActivities, recentCommits,
         dailyBreakdown: weekly?.daily_breakdown ?? [],
       })
     } catch (err) {
@@ -79,160 +88,195 @@ const Dashboard = () => {
   useEffect(() => { loadData() }, [loadData])
 
   const tabs = [
-    { id: 'overview', label: 'Visão Geral', icon: '📊' },
-    { id: 'charts', label: 'Gráficos', icon: '📈' },
-    { id: 'notes', label: 'Notas', icon: '📝' },
-    { id: 'tags', label: 'Tags', icon: '🏷️' },
+    { id: 'overview', label: 'Visão Geral', icon: LayoutDashboard },
+    { id: 'charts',   label: 'Gráficos',    icon: BarChart2 },
+    { id: 'notes',    label: 'Notas',        icon: FileText },
+    { id: 'tags',     label: 'Tarefas',      icon: Tag },
+    { id: 'reports',  label: 'Relatórios',   icon: FileBarChart },
   ]
 
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center">
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-white mx-auto mb-4" />
-          <p className="text-white/60">Carregando dados...</p>
-        </div>
-      </div>
-    )
-  }
-
   return (
     <div className="min-h-screen animate-fade-in">
-      <div className="mb-8">
-        <h1 className="text-4xl font-bold text-white mb-2">Dashboard de Produtividade</h1>
-        <p className="text-white/60 text-lg">Acompanhe seu progresso</p>
+      {/* Header */}
+      <div className="flex items-center justify-between mb-7">
+        <div>
+          <h1 className="text-2xl font-semibold text-white">Dashboard</h1>
+          <p className="text-sm mt-0.5" style={{ color: 'var(--text-muted)' }}>Acompanhe seu progresso</p>
+        </div>
+        <button
+          onClick={loadData}
+          className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors hover:bg-white/10"
+          style={{ color: 'var(--text-muted)', border: '1px solid var(--border-subtle)' }}
+          aria-label="Atualizar"
+        >
+          <RefreshCw size={14} strokeWidth={2} />
+        </button>
       </div>
 
-      {/* Quick Stats Cards */}
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
-        <div className="bg-gradient-to-br from-purple-600/20 to-blue-600/20 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-white/60 text-sm">Foco Hoje</span>
-            <span className="text-2xl">⏱️</span>
-          </div>
-          <p className="text-3xl font-bold text-white">{stats.todayFocus} min</p>
-        </div>
-        <div className="bg-gradient-to-br from-green-600/20 to-emerald-600/20 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-white/60 text-sm">Produtividade</span>
-            <span className="text-2xl">📈</span>
-          </div>
-          <p className="text-3xl font-bold text-white">{stats.productivity}%</p>
-          <div className="mt-2 bg-white/10 rounded-full h-2">
-            <div className="bg-gradient-to-r from-green-400 to-emerald-400 h-full rounded-full" style={{ width: `${stats.productivity}%` }} />
-          </div>
-        </div>
-        <div className="bg-gradient-to-br from-orange-600/20 to-red-600/20 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-white/60 text-sm">Ciclos Completos</span>
-            <span className="text-2xl">🎯</span>
-          </div>
-          <p className="text-3xl font-bold text-white">{stats.totalCycles}</p>
-        </div>
-        <div className="bg-gradient-to-br from-blue-600/20 to-cyan-600/20 backdrop-blur-sm rounded-2xl p-6 border border-white/10">
-          <div className="flex items-center justify-between mb-2">
-            <span className="text-white/60 text-sm">Média por Sessão</span>
-            <span className="text-2xl">⏳</span>
-          </div>
-          <p className="text-3xl font-bold text-white">{stats.averageSessionLength} min</p>
-        </div>
+      {/* Stats Cards */}
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-7">
+        {loading ? (
+          [0,1,2,3].map((i) => <SkeletonCard key={i} />)
+        ) : (
+          <>
+            <StatCard label="Foco Hoje"       value={`${stats.todayFocus} min`}            icon={Clock}       accent="#8b5cf6" />
+            <StatCard label="Produtividade"    value={`${stats.productivity}%`}             icon={TrendingUp}  accent="#10b981"
+              sub={<div className="w-full h-1 rounded-full mt-1" style={{ background: 'var(--surface-3)' }}><div className="h-full rounded-full" style={{ width: `${stats.productivity}%`, background: '#10b981' }} /></div>} />
+            <StatCard label="Ciclos Completos" value={stats.totalCycles}                    icon={Target}      accent="#f43f5e" />
+            <StatCard label="Média / Sessão"   value={`${stats.averageSessionLength} min`}  icon={Hourglass}   accent="#38bdf8" />
+          </>
+        )}
       </div>
 
       {/* Tabs */}
-      <div className="flex gap-2 mb-8 border-b border-white/10 pb-4">
-        {tabs.map((tab) => (
+      <div className="flex gap-0 mb-6" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+        {tabs.map(({ id, label, icon: Icon }) => (
           <button
-            key={tab.id}
-            onClick={() => setActiveTab(tab.id)}
-            className={`px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2 ${
-              activeTab === tab.id ? 'bg-white/20 text-white shadow-lg' : 'text-white/60 hover:text-white hover:bg-white/10'
-            }`}
+            key={id}
+            onClick={() => setActiveTab(id)}
+            className="flex items-center gap-1.5 px-4 py-3 text-sm font-medium transition-all relative"
+            style={activeTab === id
+              ? { color: 'var(--text-primary)' }
+              : { color: 'var(--text-muted)' }}
           >
-            <span>{tab.icon}</span><span>{tab.label}</span>
+            <Icon size={14} strokeWidth={activeTab === id ? 2.2 : 1.75} />
+            {label}
+            {activeTab === id && (
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-400 rounded-t-full" />
+            )}
           </button>
         ))}
       </div>
 
-      <div className="animate-fade-in">
-        {activeTab === 'overview' && (
-          <div className="space-y-8">
-            {/* Progresso semanal */}
-            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
-              <h3 className="text-2xl font-semibold text-white mb-6 flex items-center gap-2"><span>📊</span> Progresso Semanal</h3>
-              <div className="space-y-4">
-                <div className="flex justify-between items-center">
-                  <span className="text-white/60">Meta: {stats.weeklyGoal} horas</span>
-                  <span className="text-white font-medium">{Math.round(stats.weekFocus / 60)} horas</span>
-                </div>
-                <div className="bg-white/10 rounded-full h-4">
-                  <div className="bg-gradient-to-r from-blue-400 to-purple-400 h-full rounded-full transition-all duration-1000" style={{ width: `${stats.weeklyProgress}%` }} />
+      {/* Tab content */}
+      {loading && activeTab === 'overview' ? (
+        <div className="space-y-4">
+          {[0,1].map((i) => <div key={i} className="skeleton h-40 rounded-2xl" />)}
+        </div>
+      ) : (
+        <div key={activeTab} className="animate-fade-in">
+          {activeTab === 'overview' && (
+            <div className="space-y-5">
+              {/* Weekly progress */}
+              <div className="card p-6">
+                <div className="flex items-center gap-2 mb-5">
+                  <BarChart2 size={15} className="text-blue-400" strokeWidth={2} />
+                  <h3 className="text-sm font-semibold text-white">Progresso Semanal</h3>
                 </div>
-                <p className="text-white/40 text-sm">
-                  {stats.weeklyProgress >= 100 ? '🎉 Meta alcançada!' : `${100 - stats.weeklyProgress}% restante`}
-                </p>
-              </div>
-            </div>
 
-            {/* Atividades Recentes */}
-            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
-              <h3 className="text-2xl font-semibold text-white mb-6 flex items-center gap-2"><span>🕐</span> Atividades Recentes</h3>
-              <div className="space-y-3 max-h-96 overflow-y-auto scrollbar-hide">
-                {stats.recentActivities.length === 0 ? (
-                  <div className="rounded-xl border border-white/10 bg-white/5 p-6 text-center">
-                    <p className="text-white font-medium mb-2">Sem atividades ainda</p>
-                    <p className="text-white/50 text-sm">Inicie um ciclo no Timer para ver o histórico aqui.</p>
+                {/* Mini daily bars */}
+                {stats.dailyBreakdown.length > 0 ? (
+                  <div className="flex items-end gap-1.5 h-16 mb-4">
+                    {stats.dailyBreakdown.map((d, i) => {
+                      const maxMin = Math.max(...stats.dailyBreakdown.map((x) => x.total_focus_minutes || 0), 1)
+                      const pct = Math.max(((d.total_focus_minutes || 0) / maxMin) * 100, 4)
+                      const day = new Date(d.date).toLocaleDateString('pt-BR', { weekday: 'short' })
+                      return (
+                        <div key={i} className="flex-1 flex flex-col items-center gap-1">
+                          <div className="w-full rounded-t-sm transition-all duration-500"
+                               style={{ height: `${pct}%`, background: (d.total_focus_minutes || 0) > 0 ? 'rgba(99,102,241,0.7)' : 'var(--surface-3)' }} />
+                          <span className="text-2xs" style={{ color: 'var(--text-muted)' }}>{day.replace('.', '')}</span>
+                        </div>
+                      )
+                    })}
                   </div>
                 ) : (
-                  stats.recentActivities.slice(0, 10).map((a) => (
-                    <div key={a.id} className="flex items-center justify-between p-4 bg-white/5 rounded-lg hover:bg-white/10 transition-all">
-                      <div className="flex items-center gap-4">
-                        <div className={`w-3 h-3 rounded-full ${a.phase === 'focus' ? 'bg-red-400' : a.phase === 'shortBreak' ? 'bg-blue-400' : 'bg-green-400'}`} />
-                        <div>
-                          <p className="text-white font-medium">{a.name}</p>
-                          <p className="text-white/40 text-sm">
-                            {new Date(a.timestamp).toLocaleDateString('pt-BR')} às {new Date(a.timestamp).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
-                          </p>
-                        </div>
-                      </div>
-                      <p className="text-white font-medium">{Math.round(a.duration / 60)} min</p>
-                    </div>
-                  ))
+                  <div className="h-16 flex items-end gap-1.5 mb-4">
+                    {[...Array(7)].map((_, i) => (
+                      <div key={i} className="flex-1 h-1 rounded-t-sm" style={{ background: 'var(--surface-3)' }} />
+                    ))}
+                  </div>
+                )}
+
+                <div className="flex justify-between items-center mb-2">
+                  <span className="text-xs" style={{ color: 'var(--text-muted)' }}>Meta semanal: {stats.weeklyGoal}h</span>
+                  <span className="text-xs font-medium text-white">{Math.round(stats.weekFocus / 60)}h / {stats.weeklyGoal}h</span>
+                </div>
+                <div className="h-1.5 rounded-full" style={{ background: 'var(--surface-3)' }}>
+                  <div className="h-full rounded-full transition-all duration-700"
+                       style={{ width: `${stats.weeklyProgress}%`, background: 'linear-gradient(90deg,#6366f1,#8b5cf6)' }} />
+                </div>
+                {stats.weeklyProgress >= 100 && (
+                  <p className="text-xs text-emerald-400 mt-2">Meta semanal alcançada!</p>
                 )}
               </div>
-            </div>
 
-            {/* Commits */}
-            <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-8 border border-white/10">
-              <h3 className="text-2xl font-semibold text-white mb-6 flex items-center gap-2"><span>💾</span> Commits Vinculados</h3>
-              <div className="space-y-3 max-h-80 overflow-y-auto scrollbar-hide">
-                {stats.recentCommits.length === 0 ? (
-                  <div className="rounded-xl border border-white/10 bg-white/5 p-6 text-center">
-                    <p className="text-white font-medium mb-2">Nenhum commit registrado</p>
-                    <p className="text-white/50 text-sm">Configure um repositório Git nas configurações para detectar commits automaticamente.</p>
-                  </div>
-                ) : (
-                  stats.recentCommits.map((c) => (
-                    <div key={c.id} className="flex items-start gap-4 p-4 bg-white/5 rounded-lg hover:bg-white/10 transition-all">
-                      <code className="text-blue-400 text-xs font-mono mt-1 shrink-0">{c.hash}</code>
-                      <div className="flex-1 min-w-0">
-                        <p className="text-white font-medium truncate">{c.message}</p>
-                        <p className="text-white/50 text-sm mt-1">
-                          {c.cycleName && <span className="text-white/60">{c.cycleName} · </span>}
-                          {new Date(c.timestamp).toLocaleDateString('pt-BR')}
-                        </p>
-                      </div>
+              {/* Recent activities */}
+              <div className="card p-5">
+                <div className="flex items-center gap-2 mb-4">
+                  <History size={15} className="text-white/50" strokeWidth={2} />
+                  <h3 className="text-sm font-semibold text-white">Atividades Recentes</h3>
+                </div>
+                <div className="space-y-1 max-h-72 overflow-y-auto scrollbar-hide">
+                  {stats.recentActivities.length === 0 ? (
+                    <div className="py-8 text-center">
+                      <p className="text-sm font-medium text-white/40">Nenhuma atividade ainda</p>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>Inicie um ciclo no Timer para ver o histórico aqui.</p>
                     </div>
-                  ))
-                )}
+                  ) : (
+                    stats.recentActivities.slice(0, 10).map((a) => {
+                      const PhaseIcon = PHASE_ICONS[a.phase] || Brain
+                      const phaseColor = { focus: '#f43f5e', shortBreak: '#14b8a6', longBreak: '#38bdf8' }[a.phase] || '#f43f5e'
+                      return (
+                        <div key={a.id} className="flex items-center gap-3 px-3 py-2.5 rounded-lg hover:bg-white/5 transition-colors">
+                          <div className="w-6 h-6 rounded-md flex items-center justify-center shrink-0"
+                               style={{ background: `${phaseColor}18` }}>
+                            <PhaseIcon size={12} style={{ color: phaseColor }} strokeWidth={2.5} />
+                          </div>
+                          <div className="flex-1 min-w-0">
+                            <p className="text-sm text-white truncate">{a.name}</p>
+                            <p className="text-2xs" style={{ color: 'var(--text-muted)' }}>
+                              {new Date(a.timestamp).toLocaleDateString('pt-BR')} · {new Date(a.timestamp).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}
+                            </p>
+                          </div>
+                          <span className="text-xs shrink-0" style={{ color: 'var(--text-muted)' }}>{Math.round(a.duration / 60)} min</span>
+                        </div>
+                      )
+                    })
+                  )}
+                </div>
+              </div>
+
+              {/* Commits */}
+              <div className="card p-5">
+                <div className="flex items-center gap-2 mb-4">
+                  <GitBranch size={15} className="text-white/50" strokeWidth={2} />
+                  <h3 className="text-sm font-semibold text-white">Commits Vinculados</h3>
+                </div>
+                <div className="space-y-1 max-h-60 overflow-y-auto scrollbar-hide">
+                  {stats.recentCommits.length === 0 ? (
+                    <div className="py-8 text-center">
+                      <p className="text-sm font-medium text-white/40">Nenhum commit registrado</p>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>Configure um repositório Git nas configurações.</p>
+                    </div>
+                  ) : (
+                    stats.recentCommits.map((c) => (
+                      <div key={c.id} className="flex items-start gap-3 px-3 py-2.5 rounded-lg hover:bg-white/5 transition-colors">
+                        <div className="w-6 h-6 rounded-md flex items-center justify-center shrink-0 mt-0.5"
+                             style={{ background: 'rgba(99,102,241,0.15)' }}>
+                          <GitCommit size={11} className="text-indigo-400" strokeWidth={2} />
+                        </div>
+                        <div className="flex-1 min-w-0">
+                          <p className="text-sm text-white truncate">{c.message}</p>
+                          <p className="text-2xs mt-0.5" style={{ color: 'var(--text-muted)' }}>
+                            <code className="text-indigo-400/70 font-mono">{c.hash?.slice(0,7)}</code>
+                            {c.cycleName && <> · {c.cycleName}</>}
+                          </p>
+                        </div>
+                      </div>
+                    ))
+                  )}
+                </div>
               </div>
             </div>
-          </div>
-        )}
+          )}
 
-        {activeTab === 'charts' && <ProgressCharts stats={stats} />}
-        {activeTab === 'notes' && <QuickNotes />}
-        {activeTab === 'tags' && <TagManager />}
-      </div>
+          {activeTab === 'charts'  && <ProgressCharts stats={stats} />}
+          {activeTab === 'notes'   && <QuickNotes />}
+          {activeTab === 'tags'    && <TagManager />}
+          {activeTab === 'reports' && <ReportsView />}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/components/GitDetectModal.jsx b/src/components/GitDetectModal.jsx
index ef4beb5..b5a9d51 100644
--- a/src/components/GitDetectModal.jsx
+++ b/src/components/GitDetectModal.jsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { GitCommit, X } from 'lucide-react'
 import { dbService } from '../services/dbService'
 
 const GitDetectModal = ({ isOpen, onClose, onConfirm, cycleName, startTime, repoPath }) => {
@@ -34,80 +35,119 @@ const GitDetectModal = ({ isOpen, onClose, onConfirm, cycleName, startTime, repo
 
   if (!isOpen) return null
 
-  return (
-    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="bg-gray-800/95 backdrop-blur-md border border-white/20 rounded-2xl p-6 w-full max-w-lg shadow-2xl">
-        {/* Header */}
-        <div className="text-center mb-6">
-          <div className="text-4xl mb-2">💾</div>
-          <h3 className="text-xl font-bold text-white">
-            {cycleName ? `Ciclo: ${cycleName}` : 'Sessão finalizada'}
-          </h3>
-          <p className="text-white/60 text-sm mt-1">
-            {repoPath ? `Repositório: ${repoPath.split(/[\\/]/).pop()}` : 'Sem repositório configurado'}
-          </p>
-        </div>
+  const repoName = repoPath ? repoPath.split(/[\\/]/).pop() : null
 
-        {/* Commits detectados */}
-        <div className="mb-4">
-          <div className="flex items-center justify-between mb-2">
-            <label className="text-white/80 text-sm font-medium">Commits detectados durante o ciclo</label>
-            {loading && <span className="text-white/40 text-xs animate-pulse">Buscando...</span>}
-          </div>
+  return (
+    <div className="fixed inset-0 flex items-center justify-center z-50 p-4"
+         style={{ background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(8px)' }}>
+      <div className="w-full max-w-lg animate-slide-up"
+           style={{ background: '#16191f', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)' }}>
 
-          {!repoPath ? (
-            <div className="p-4 bg-white/5 rounded-xl text-center border border-white/10">
-              <p className="text-white/50 text-sm">Configure um repositório Git nas configurações para detectar commits automaticamente.</p>
+        {/* Header */}
+        <div className="flex items-center justify-between px-5 pt-5 pb-4"
+             style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+          <div className="flex items-center gap-3">
+            <div className="w-10 h-10 rounded-xl flex items-center justify-center"
+                 style={{ background: 'var(--surface-3)', border: '1px solid var(--border-default)' }}>
+              <GitCommit size={18} className="text-white/70" strokeWidth={1.75} />
             </div>
-          ) : loading ? (
-            <div className="p-4 bg-white/5 rounded-xl text-center">
-              <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-400 mx-auto" />
+            <div>
+              <h3 className="text-sm font-semibold text-white">
+                {cycleName ? cycleName : 'Sessão finalizada'}
+              </h3>
+              <p className="text-2xs" style={{ color: 'var(--text-muted)' }}>
+                {repoName ? `Repositório: ${repoName}` : 'Sem repositório configurado'}
+              </p>
             </div>
-          ) : commits.length === 0 ? (
-            <div className="p-4 bg-white/5 rounded-xl text-center border border-white/10">
-              <p className="text-white/50 text-sm">Nenhum commit encontrado durante esta sessão.</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-7 h-7 rounded-lg flex items-center justify-center hover:bg-white/10 transition-colors"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <X size={14} />
+          </button>
+        </div>
+
+        <div className="p-5 space-y-4">
+          {/* Commits section */}
+          <div>
+            <div className="flex items-center justify-between mb-2">
+              <label className="text-xs font-medium" style={{ color: 'var(--text-secondary)' }}>
+                Commits detectados durante o ciclo
+              </label>
+              {loading && (
+                <span className="flex items-center gap-1.5 text-2xs" style={{ color: 'var(--text-muted)' }}>
+                  <div className="w-3 h-3 rounded-full border animate-spin"
+                       style={{ borderColor: 'var(--border-default)', borderTopColor: '#6366f1' }} />
+                  Buscando...
+                </span>
+              )}
             </div>
-          ) : (
-            <div className="space-y-2 max-h-40 overflow-y-auto">
-              {commits.map((c) => (
-                <div key={c.hash} className="flex items-start gap-3 p-3 bg-white/5 rounded-lg border border-white/10">
-                  <code className="text-blue-400 text-xs font-mono mt-0.5 shrink-0">{c.hash}</code>
-                  <div className="flex-1 min-w-0">
-                    <p className="text-white text-sm truncate">{c.message}</p>
-                    <p className="text-white/40 text-xs">{c.author}</p>
+
+            {!repoPath ? (
+              <div className="py-5 text-center rounded-xl" style={{ background: 'var(--surface-2)', border: '1px solid var(--border-subtle)' }}>
+                <p className="text-xs" style={{ color: 'var(--text-muted)' }}>Configure um repositório Git nas configurações para detectar commits automaticamente.</p>
+              </div>
+            ) : loading ? (
+              <div className="py-6 flex justify-center rounded-xl" style={{ background: 'var(--surface-2)' }}>
+                <div className="w-5 h-5 rounded-full border-2 animate-spin"
+                     style={{ borderColor: 'var(--border-default)', borderTopColor: '#6366f1' }} />
+              </div>
+            ) : commits.length === 0 ? (
+              <div className="py-5 text-center rounded-xl" style={{ background: 'var(--surface-2)', border: '1px solid var(--border-subtle)' }}>
+                <p className="text-xs" style={{ color: 'var(--text-muted)' }}>Nenhum commit encontrado durante esta sessão.</p>
+              </div>
+            ) : (
+              <div className="space-y-1.5 max-h-36 overflow-y-auto scrollbar-hide rounded-xl"
+                   style={{ background: 'var(--surface-2)', border: '1px solid var(--border-subtle)' }}>
+                {commits.map((c) => (
+                  <div key={c.hash} className="flex items-start gap-3 px-3 py-2.5 hover:bg-white/5 transition-colors">
+                    <code className="text-indigo-400 text-2xs font-mono mt-0.5 shrink-0">{c.hash}</code>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm text-white truncate">{c.message}</p>
+                      <p className="text-2xs" style={{ color: 'var(--text-muted)' }}>{c.author}</p>
+                    </div>
                   </div>
-                </div>
-              ))}
-            </div>
-          )}
-        </div>
+                ))}
+              </div>
+            )}
+          </div>
 
-        {/* Nota manual */}
-        <div className="mb-5">
-          <label className="block text-white/80 text-sm font-medium mb-2">Nota da sessão (opcional)</label>
-          <textarea
-            value={manualNote}
-            onChange={(e) => setManualNote(e.target.value)}
-            placeholder="O que você fez nesta sessão?"
-            rows={2}
-            className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none text-sm"
-          />
-        </div>
+          {/* Manual note */}
+          <div>
+            <label className="block text-xs font-medium mb-1.5" style={{ color: 'var(--text-secondary)' }}>
+              Nota da sessão <span style={{ color: 'var(--text-muted)' }}>(opcional)</span>
+            </label>
+            <textarea
+              value={manualNote}
+              onChange={(e) => setManualNote(e.target.value)}
+              placeholder="O que você fez nesta sessão?"
+              rows={2}
+              className="w-full px-3 py-2.5 text-sm text-white placeholder-white/30 rounded-xl resize-none transition-all"
+              style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}
+            />
+          </div>
 
-        {/* Botões */}
-        <div className="flex gap-3">
-          <button
-            onClick={handleSkip}
-            className="flex-1 px-4 py-2.5 bg-white/10 hover:bg-white/20 text-white rounded-xl transition-colors text-sm"
-          >
-            Pular
-          </button>
-          <button
-            onClick={handleConfirm}
-            className="flex-1 px-4 py-2.5 bg-blue-600 hover:bg-blue-700 text-white rounded-xl transition-colors font-medium text-sm"
-          >
-            {commits.length > 0 ? `Salvar (${commits.length} commit${commits.length > 1 ? 's' : ''})` : 'Salvar nota'}
-          </button>
+          {/* Actions */}
+          <div className="flex gap-3">
+            <button
+              onClick={handleSkip}
+              className="flex-1 px-4 py-2.5 rounded-xl text-sm font-medium transition-all hover:bg-white/10"
+              style={{ border: '1px solid var(--border-default)', color: 'var(--text-secondary)' }}
+            >
+              Pular
+            </button>
+            <button
+              onClick={handleConfirm}
+              className="flex-1 px-4 py-2.5 rounded-xl text-sm font-medium text-white transition-all"
+              style={{ background: 'rgba(99,102,241,0.3)', border: '1px solid rgba(99,102,241,0.45)' }}
+            >
+              {commits.length > 0
+                ? `Salvar (${commits.length} commit${commits.length > 1 ? 's' : ''})`
+                : 'Salvar nota'}
+            </button>
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/KeyboardHelpModal.jsx b/src/components/KeyboardHelpModal.jsx
new file mode 100644
index 0000000..7c8466f
--- /dev/null
+++ b/src/components/KeyboardHelpModal.jsx
@@ -0,0 +1,76 @@
+import React from 'react'
+import { Keyboard, X } from 'lucide-react'
+
+const SHORTCUTS = [
+  { key: 'Space',   description: 'Iniciar / Pausar timer' },
+  { key: 'R',       description: 'Reiniciar timer' },
+  { key: 'F',       description: 'Iniciar sessão de foco' },
+  { key: 'B',       description: 'Iniciar pausa curta' },
+  { key: 'L',       description: 'Iniciar pausa longa' },
+  { key: 'Ctrl + T', description: 'Ir para o Timer' },
+  { key: 'Ctrl + D', description: 'Ir para o Dashboard' },
+  { key: '?',       description: 'Mostrar atalhos' },
+  { key: 'Esc',     description: 'Fechar modal' },
+]
+
+const KeyboardHelpModal = ({ isOpen, onClose }) => {
+  if (!isOpen) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center p-4"
+      style={{ background: 'rgba(0,0,0,0.65)', backdropFilter: 'blur(8px)' }}
+      onClick={onClose}
+    >
+      <div
+        className="w-full max-w-sm animate-slide-up"
+        style={{ background: '#16191f', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)' }}
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Header */}
+        <div className="flex items-center justify-between px-6 pt-5 pb-4"
+             style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+          <div className="flex items-center gap-2.5">
+            <div className="w-8 h-8 rounded-lg flex items-center justify-center"
+                 style={{ background: 'var(--surface-3)' }}>
+              <Keyboard size={15} className="text-white/70" />
+            </div>
+            <div>
+              <h2 className="text-sm font-semibold text-white">Atalhos de teclado</h2>
+              <p className="text-2xs" style={{ color: 'var(--text-muted)' }}>Navegue sem o mouse</p>
+            </div>
+          </div>
+          <button
+            onClick={onClose}
+            className="w-7 h-7 rounded-lg flex items-center justify-center transition-colors hover:bg-white/10"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <X size={14} />
+          </button>
+        </div>
+
+        {/* Shortcuts list */}
+        <div className="px-3 py-3 space-y-0.5">
+          {SHORTCUTS.map(({ key, description }) => (
+            <div key={key}
+                 className="flex items-center justify-between px-3 py-2.5 rounded-lg hover:bg-white/5 transition-colors">
+              <span className="text-sm" style={{ color: 'var(--text-secondary)' }}>{description}</span>
+              <kbd className="px-2 py-0.5 text-xs font-mono font-medium rounded-md"
+                   style={{ background: 'var(--surface-3)', color: 'var(--text-primary)', border: '1px solid var(--border-default)' }}>
+                {key}
+              </kbd>
+            </div>
+          ))}
+        </div>
+
+        <div className="px-6 pb-5 pt-2">
+          <p className="text-2xs text-center" style={{ color: 'var(--text-muted)' }}>
+            Atalhos não funcionam quando um campo de texto está ativo
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default KeyboardHelpModal
diff --git a/src/components/Navigation.jsx b/src/components/Navigation.jsx
index c398255..956e08f 100644
--- a/src/components/Navigation.jsx
+++ b/src/components/Navigation.jsx
@@ -1,55 +1,74 @@
 import React from 'react'
+import { Timer, LayoutDashboard, CheckSquare, Settings, Keyboard } from 'lucide-react'
 
-const Navigation = ({ activeView, onViewChange }) => {
-  const navItems = [
-    { id: 'timer', icon: '⏱️', tooltip: 'Timer Pomodoro' },
-    { id: 'dashboard', icon: '📊', tooltip: 'Estatísticas' },
-    { id: 'tasks', icon: '📝', tooltip: 'Tarefas e Tags' },
-    { id: 'settings', icon: '⚙️', tooltip: 'Configurações' },
-  ]
+const NAV_ITEMS = [
+  { id: 'timer',     icon: Timer,           tooltip: 'Timer Pomodoro' },
+  { id: 'dashboard', icon: LayoutDashboard, tooltip: 'Estatísticas' },
+  { id: 'tasks',     icon: CheckSquare,     tooltip: 'Tarefas e Tags' },
+  { id: 'settings',  icon: Settings,        tooltip: 'Configurações' },
+]
 
+const Navigation = ({ activeView, onViewChange, onShowKeyboardHelp }) => {
   return (
-    <nav className="fixed left-0 top-0 h-full w-20 bg-gray-900/95 backdrop-blur-sm border-r border-white/10 flex flex-col items-center py-6 z-40">
+    <nav className="fixed left-0 top-0 h-full w-16 flex flex-col items-center py-5 z-40"
+         style={{ background: 'var(--surface-1)', borderRight: '1px solid var(--border-subtle)' }}>
+
       {/* Logo */}
-      <div className="mb-8">
-        <div className="w-12 h-12 bg-gradient-to-br from-purple-600 via-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
-          <span className="text-2xl">🎯</span>
+      <div className="mb-7">
+        <div className="w-9 h-9 bg-gradient-to-br from-violet-500 to-blue-500 rounded-xl flex items-center justify-center shadow-lg shadow-violet-500/20">
+          <svg viewBox="0 0 24 24" fill="none" className="w-5 h-5 text-white" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round">
+            <circle cx="12" cy="12" r="9" strokeOpacity="0.35" />
+            <path d="M12 7v5l3 3" />
+          </svg>
         </div>
       </div>
 
       {/* Nav Items */}
-      <div className="flex-1 flex flex-col gap-2 w-full px-3">
-        {navItems.map((item) => (
-          <button
-            key={item.id}
-            onClick={() => onViewChange(item.id)}
-            className={`relative group w-full py-3 rounded-xl transition-all duration-200 ${
-              activeView === item.id
-                ? 'bg-blue-600/20 text-blue-400'
-                : 'hover:bg-white/10 text-gray-400 hover:text-white'
-            }`}
-            aria-label={item.tooltip}
-          >
-            <span className="text-2xl">{item.icon}</span>
-
-            {/* Tooltip */}
-            <div className="absolute left-full ml-2 px-3 py-1 bg-gray-800 text-white text-sm rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50">
-              {item.tooltip}
-            </div>
-
-            {/* Active indicator */}
-            {activeView === item.id && (
-              <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 bg-blue-400 rounded-r-full" />
-            )}
-          </button>
-        ))}
+      <div className="flex-1 flex flex-col gap-1 w-full px-2">
+        {NAV_ITEMS.map(({ id, icon: Icon, tooltip }) => {
+          const isActive = activeView === id
+          return (
+            <button
+              key={id}
+              onClick={() => onViewChange(id)}
+              aria-label={tooltip}
+              className={`relative group w-full py-3 rounded-xl flex items-center justify-center transition-all duration-150 ${
+                isActive
+                  ? 'text-white'
+                  : 'text-white/35 hover:text-white/70 hover:bg-white/5'
+              }`}
+              style={isActive ? { background: 'rgba(255,255,255,0.08)' } : {}}
+            >
+              {/* Active left bar */}
+              {isActive && (
+                <div className="absolute left-0 top-1/2 -translate-y-1/2 w-0.5 h-6 bg-blue-400 rounded-r-full" />
+              )}
+
+              <Icon size={18} strokeWidth={isActive ? 2 : 1.75} />
+
+              {/* Tooltip */}
+              <div className="absolute left-full ml-3 px-3 py-1.5 text-xs font-medium text-white rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50 shadow-xl"
+                   style={{ background: '#1e2126', border: '1px solid var(--border-default)' }}>
+                {tooltip}
+              </div>
+            </button>
+          )
+        })}
       </div>
 
-      {/* App info */}
-      <div className="mt-auto pt-4 border-t border-white/10 w-full px-3">
-        <div className="text-center">
-          <p className="text-white/20 text-xs">CF</p>
-        </div>
+      {/* Bottom: keyboard shortcut hint */}
+      <div className="pt-4 w-full px-2" style={{ borderTop: '1px solid var(--border-subtle)' }}>
+        <button
+          onClick={onShowKeyboardHelp}
+          aria-label="Atalhos de teclado"
+          className="relative group w-full py-3 rounded-xl flex items-center justify-center text-white/25 hover:text-white/60 hover:bg-white/5 transition-all duration-150"
+        >
+          <Keyboard size={15} strokeWidth={1.75} />
+          <div className="absolute left-full ml-3 px-3 py-1.5 text-xs font-medium text-white rounded-lg opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity whitespace-nowrap z-50 shadow-xl"
+               style={{ background: '#1e2126', border: '1px solid var(--border-default)' }}>
+            Atalhos de teclado
+          </div>
+        </button>
       </div>
     </nav>
   )
diff --git a/src/components/ProgressCharts.jsx b/src/components/ProgressCharts.jsx
index 6e6c031..14310e9 100644
--- a/src/components/ProgressCharts.jsx
+++ b/src/components/ProgressCharts.jsx
@@ -1,8 +1,11 @@
 import { useState, useEffect } from 'react'
+import { Trophy, TrendingUp } from 'lucide-react'
+import { dbService } from '../services/dbService'
 
 const ProgressCharts = ({ stats }) => {
   const [timeRange, setTimeRange] = useState('week')
-  const [chartData, setChartData] = useState({ daily: [], weekly: [], tags: [] })
+  const [monthlyData, setMonthlyData] = useState([])
+  const [monthLoading, setMonthLoading] = useState(false)
 
   useEffect(() => {
     const daily = (stats.dailyBreakdown || []).map((d) => ({
@@ -10,23 +13,59 @@ const ProgressCharts = ({ stats }) => {
       time: (d.total_focus_minutes || 0) * 60,
       sessions: d.sessions || 0,
     }))
-    setChartData({ daily, weekly: [], tags: [] })
-  }, [stats, timeRange])
+    // daily is derived from props — kept for bar chart
+    void daily
+  }, [stats])
 
-  const formatTime = (s) => `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`
-  const getMax = (data, key) => Math.max(...data.map((i) => i[key]), 1)
-  const getBarH = (v, max) => Math.max((v / max) * 100, 5)
+  useEffect(() => {
+    if (timeRange !== 'month') return
+    setMonthLoading(true)
+    dbService.cycles.statsMonthly()
+      .then((data) => setMonthlyData(data))
+      .catch(() => setMonthlyData([]))
+      .finally(() => setMonthLoading(false))
+  }, [timeRange])
+
+  const formatTime = (s) => {
+    const h = Math.floor(s / 3600)
+    const m = Math.floor((s % 3600) / 60)
+    return h > 0 ? `${h}h ${m}m` : `${m}m`
+  }
+
+  const dailyChartData = (stats.dailyBreakdown || []).map((d) => ({
+    label: new Date(d.date).toLocaleDateString('pt-BR', { weekday: 'short' }).replace('.', ''),
+    time: (d.total_focus_minutes || 0) * 60,
+    sessions: d.sessions || 0,
+  }))
+
+  const monthlyChartData = monthlyData.map((d) => ({
+    label: new Date(d.week_start + 'T12:00:00').toLocaleDateString('pt-BR', { day: '2-digit', month: '2-digit' }),
+    time: (d.total_focus_minutes || 0) * 60,
+    sessions: d.sessions || 0,
+  }))
+
+  const chartData = timeRange === 'week' ? dailyChartData : monthlyChartData
+  const getMax = (data) => Math.max(...data.map((i) => i.time), 1)
+  const getBarH = (v, max) => Math.max((v / max) * 100, 4)
+
+  const bestDay = chartData.length > 0 ? chartData.reduce((b, c) => c.time > b.time ? c : b) : null
+  const avgTime = chartData.length > 0 ? chartData.reduce((s, d) => s + d.time, 0) / chartData.length : 0
+  const avgSess = chartData.length > 0 ? chartData.reduce((s, d) => s + d.sessions, 0) / chartData.length : 0
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center space-x-4">
-        <h2 className="text-xl font-bold text-white">Gráficos de Progresso</h2>
-        <div className="flex bg-white/10 rounded-lg p-1">
+    <div className="space-y-5">
+      {/* Header with range toggle */}
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg font-semibold text-white">Gráficos de Progresso</h2>
+        <div className="flex p-0.5 rounded-lg" style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}>
           {[{ value: 'week', label: 'Semana' }, { value: 'month', label: 'Mês' }].map((r) => (
             <button
               key={r.value}
               onClick={() => setTimeRange(r.value)}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${timeRange === r.value ? 'bg-blue-600 text-white' : 'text-white/60 hover:text-white'}`}
+              className="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
+              style={timeRange === r.value
+                ? { background: 'rgba(255,255,255,0.12)', color: 'var(--text-primary)' }
+                : { color: 'var(--text-muted)' }}
             >
               {r.label}
             </button>
@@ -34,69 +73,87 @@ const ProgressCharts = ({ stats }) => {
         </div>
       </div>
 
-      {timeRange === 'week' && (
-        <div className="bg-white/5 rounded-xl p-6">
-          <h3 className="text-white font-semibold mb-4">Atividade Diária (últimos 7 dias)</h3>
-          {chartData.daily.length === 0 ? (
-            <div className="py-12 text-center text-white/50">
-              Nenhum dado ainda. Complete ciclos no Timer para ver as estatísticas aqui.
-            </div>
-          ) : (
-            <div className="flex items-end justify-between h-48 space-x-2">
-              {chartData.daily.map((day, i) => {
-                const bh = getBarH(day.time, getMax(chartData.daily, 'time'))
-                return (
-                  <div key={i} className="flex flex-col items-center flex-1">
-                    <div className="text-white/60 text-xs mb-2 text-center">{formatTime(day.time)}</div>
-                    <div className="w-full bg-gray-700 rounded-t-lg relative" style={{ height: '120px' }}>
-                      <div
-                        className="bg-gradient-to-t from-blue-600 to-blue-400 rounded-t-lg transition-all duration-300 absolute bottom-0 w-full"
-                        style={{ height: `${bh}%` }}
-                      />
-                    </div>
-                    <div className="text-white/80 text-xs mt-2">{day.day}</div>
-                    <div className="text-white/60 text-xs mt-1">{day.sessions} sessões</div>
+      {/* Bar chart */}
+      <div className="card p-5">
+        <h3 className="text-sm font-semibold text-white mb-5">
+          {timeRange === 'week' ? 'Atividade Diária (últimos 7 dias)' : 'Atividade por Semana (últimos 28 dias)'}
+        </h3>
+
+        {monthLoading ? (
+          <div className="h-36 flex items-center justify-center">
+            <div className="w-6 h-6 rounded-full border-2 animate-spin"
+                 style={{ borderColor: 'var(--border-default)', borderTopColor: '#6366f1' }} />
+          </div>
+        ) : chartData.length === 0 ? (
+          <div className="py-10 text-center">
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>
+              Nenhum dado ainda. Complete ciclos para ver as estatísticas aqui.
+            </p>
+          </div>
+        ) : (
+          <div className="flex items-end gap-2 h-36">
+            {chartData.map((d, i) => {
+              const bh = getBarH(d.time, getMax(chartData))
+              return (
+                <div key={i} className="flex flex-col items-center flex-1 group relative">
+                  {/* Tooltip */}
+                  <div className="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 opacity-0 group-hover:opacity-100 pointer-events-none transition-opacity z-10 whitespace-nowrap"
+                       style={{ background: '#1e2126', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-sm)', padding: '6px 10px' }}>
+                    <p className="text-xs font-medium text-white">{formatTime(d.time)}</p>
+                    <p className="text-2xs" style={{ color: 'var(--text-muted)' }}>{d.sessions} sessões</p>
+                  </div>
+                  {/* Bar container */}
+                  <div className="w-full relative rounded-t-sm" style={{ height: '100px', background: 'var(--surface-3)' }}>
+                    <div
+                      className="absolute bottom-0 w-full rounded-t-sm transition-all duration-500 ease-out"
+                      style={{
+                        height: `${bh}%`,
+                        background: d.time > 0 ? 'linear-gradient(to top, #6366f1cc, #818cf8aa)' : 'transparent',
+                      }}
+                    />
                   </div>
-                )
-              })}
+                  <div className="text-2xs mt-1.5" style={{ color: 'var(--text-muted)' }}>{d.label}</div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Summary cards */}
+      <div className="grid grid-cols-2 gap-4">
+        <div className="card p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <Trophy size={14} className="text-yellow-400" strokeWidth={2} />
+            <h3 className="text-sm font-semibold text-white">Melhor Dia</h3>
+          </div>
+          {bestDay && bestDay.time > 0 ? (
+            <div>
+              <div className="text-xl font-semibold text-white">{bestDay.label}</div>
+              <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>
+                {formatTime(bestDay.time)} · {bestDay.sessions} sessões
+              </p>
             </div>
+          ) : (
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>Sem dados</p>
           )}
         </div>
-      )}
-
-      {timeRange === 'month' && (
-        <div className="bg-white/5 rounded-xl p-6">
-          <h3 className="text-white font-semibold mb-4">Atividade Semanal</h3>
-          <div className="py-12 text-center text-white/50">Em breve.</div>
-        </div>
-      )}
 
-      {/* Estatísticas resumidas */}
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <div className="bg-white/5 rounded-xl p-6">
-          <h3 className="text-white font-semibold mb-4">Melhor Dia</h3>
-          {chartData.daily.length > 0 ? (() => {
-            const best = chartData.daily.reduce((b, c) => c.time > b.time ? c : b)
-            return (
-              <div>
-                <div className="text-2xl font-bold text-white">{best.day}</div>
-                <p className="text-white/60 text-sm">{formatTime(best.time)} · {best.sessions} sessões</p>
-              </div>
-            )
-          })() : <p className="text-white/50 text-sm">Sem dados</p>}
-        </div>
-        <div className="bg-white/5 rounded-xl p-6">
-          <h3 className="text-white font-semibold mb-4">Média Diária</h3>
-          {chartData.daily.length > 0 ? (() => {
-            const avg = chartData.daily.reduce((s, d) => s + d.time, 0) / chartData.daily.length
-            const avgS = chartData.daily.reduce((s, d) => s + d.sessions, 0) / chartData.daily.length
-            return (
-              <div>
-                <div className="text-2xl font-bold text-white">{formatTime(avg)}</div>
-                <p className="text-white/60 text-sm">{Math.round(avgS)} sessões/dia</p>
-              </div>
-            )
-          })() : <p className="text-white/50 text-sm">Sem dados</p>}
+        <div className="card p-5">
+          <div className="flex items-center gap-2 mb-3">
+            <TrendingUp size={14} className="text-emerald-400" strokeWidth={2} />
+            <h3 className="text-sm font-semibold text-white">Média</h3>
+          </div>
+          {avgTime > 0 ? (
+            <div>
+              <div className="text-xl font-semibold text-white">{formatTime(avgTime)}</div>
+              <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>
+                {Math.round(avgSess * 10) / 10} sessões/dia
+              </p>
+            </div>
+          ) : (
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>Sem dados</p>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/QuickNotes.jsx b/src/components/QuickNotes.jsx
index 76791e4..e64f216 100644
--- a/src/components/QuickNotes.jsx
+++ b/src/components/QuickNotes.jsx
@@ -1,10 +1,11 @@
 import { useState, useEffect, useMemo } from 'react'
+import { FileText, Trash2, Brain, Timer } from 'lucide-react'
 import { dbService } from '../services/dbService'
 
 const colorFromString = (value) => {
   let hash = 0
   for (let i = 0; i < value.length; i++) hash = value.charCodeAt(i) + ((hash << 5) - hash)
-  return `hsl(${Math.abs(hash) % 360} 80% 55%)`
+  return `hsl(${Math.abs(hash) % 360} 70% 58%)`
 }
 
 const QuickNotes = () => {
@@ -54,35 +55,42 @@ const QuickNotes = () => {
     .sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp))
 
   const formatDate = (d) => new Date(d).toLocaleString('pt-BR', { day: '2-digit', month: '2-digit', hour: '2-digit', minute: '2-digit' })
-  const formatTime = (s) => `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`
+  const formatDur  = (s) => `${Math.floor(s / 3600)}h ${Math.floor((s % 3600) / 60)}m`
 
   return (
-    <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <h2 className="text-xl font-bold text-white">Notas e Atividades</h2>
-      </div>
+    <div className="space-y-5">
+      {/* New note */}
+      <div className="card p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <FileText size={14} className="text-white/50" strokeWidth={2} />
+          <h3 className="text-sm font-semibold text-white">Nova Nota</h3>
+        </div>
+        <div className="relative mb-3">
+          <textarea
+            value={newNote}
+            onChange={(e) => setNewNote(e.target.value)}
+            placeholder="O que você fez durante esta sessão?"
+            rows={3}
+            maxLength={500}
+            className="w-full px-3 py-2.5 rounded-xl text-sm text-white placeholder-white/30 resize-none transition-all"
+            style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}
+          />
+          <span className="absolute bottom-2.5 right-3 text-2xs pointer-events-none" style={{ color: 'var(--text-muted)' }}>
+            {newNote.length}/500
+          </span>
+        </div>
 
-      {/* Nova Nota */}
-      <div className="bg-white/5 rounded-xl p-6">
-        <h3 className="text-white font-semibold mb-4">Nova Nota</h3>
-        <textarea
-          value={newNote}
-          onChange={(e) => setNewNote(e.target.value)}
-          placeholder="O que você fez durante esta sessão?"
-          rows={3}
-          className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none mb-4"
-        />
         {userTags.length > 0 && (
-          <div className="flex flex-wrap gap-2 mb-4">
+          <div className="flex flex-wrap gap-2 mb-3">
             {userTags.map((tag) => (
               <button
                 key={tag}
                 onClick={() => setSelectedTags((p) => p.includes(tag) ? p.filter((t) => t !== tag) : [...p, tag])}
-                className={`px-3 py-1 rounded-full text-sm font-medium transition-colors`}
+                className="px-2.5 py-1 rounded-full text-xs font-medium transition-all"
                 style={{
-                  backgroundColor: selectedTags.includes(tag) ? tagMeta[tag]?.color : 'transparent',
-                  border: `1px solid ${tagMeta[tag]?.color}`,
-                  color: selectedTags.includes(tag) ? 'white' : 'rgba(255,255,255,0.6)',
+                  background: selectedTags.includes(tag) ? `${tagMeta[tag]?.color}30` : 'var(--surface-3)',
+                  border: `1px solid ${selectedTags.includes(tag) ? tagMeta[tag]?.color : 'var(--border-subtle)'}`,
+                  color: selectedTags.includes(tag) ? tagMeta[tag]?.color : 'var(--text-muted)',
                 }}
               >
                 #{tag}
@@ -90,24 +98,37 @@ const QuickNotes = () => {
             ))}
           </div>
         )}
-        <div className="flex gap-3">
-          <button onClick={addNote} disabled={!newNote.trim()} className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors">
-            Adicionar Nota
+
+        <div className="flex gap-2">
+          <button
+            onClick={addNote}
+            disabled={!newNote.trim()}
+            className="px-4 py-2 rounded-lg text-sm font-medium text-white transition-all hover:scale-[1.02] disabled:opacity-40"
+            style={{ background: 'rgba(99,102,241,0.3)', border: '1px solid rgba(99,102,241,0.4)' }}
+          >
+            Adicionar
           </button>
-          <button onClick={() => { setNewNote(''); setSelectedTags([]) }} className="px-4 py-2 bg-white/10 text-white rounded-lg hover:bg-white/20 transition-colors">
+          <button
+            onClick={() => { setNewNote(''); setSelectedTags([]) }}
+            className="px-3 py-2 rounded-lg text-sm transition-colors hover:bg-white/10"
+            style={{ color: 'var(--text-muted)' }}
+          >
             Limpar
           </button>
         </div>
       </div>
 
-      {/* Filtros */}
-      <div className="flex items-center gap-4 flex-wrap">
-        <div className="flex bg-white/10 rounded-lg p-1">
+      {/* Filters */}
+      <div className="flex items-center gap-3 flex-wrap">
+        <div className="flex p-0.5 rounded-lg" style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}>
           {[{ value: 'all', label: 'Tudo' }, { value: 'sessions', label: 'Sessões' }, { value: 'notes', label: 'Notas' }].map((f) => (
             <button
               key={f.value}
               onClick={() => setFilter(f.value)}
-              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${filter === f.value ? 'bg-blue-600 text-white' : 'text-white/60 hover:text-white'}`}
+              className="px-3 py-1.5 rounded-md text-xs font-medium transition-all"
+              style={filter === f.value
+                ? { background: 'rgba(255,255,255,0.12)', color: 'var(--text-primary)' }
+                : { color: 'var(--text-muted)' }}
             >
               {f.label}
             </button>
@@ -118,41 +139,63 @@ const QuickNotes = () => {
           value={searchTerm}
           onChange={(e) => setSearchTerm(e.target.value)}
           placeholder="Buscar..."
-          className="px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+          className="px-3 py-1.5 rounded-lg text-sm text-white placeholder-white/30 flex-1 min-w-32"
+          style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}
         />
       </div>
 
-      {/* Lista */}
-      <div className="space-y-3 max-h-96 overflow-y-auto scrollbar-hide">
+      {/* List */}
+      <div className="space-y-2 max-h-[500px] overflow-y-auto scrollbar-hide">
         {filtered.length === 0 ? (
-          <div className="text-center py-8"><p className="text-white/60">Nenhuma atividade encontrada</p></div>
-        ) : filtered.map((a, i) => (
-          <div key={a.id || i} className="bg-white/5 rounded-xl p-4">
-            <div className="flex items-start justify-between">
-              <div className="flex-1">
-                <div className="flex items-center gap-3 mb-2">
-                  <span>{a.type === 'session' ? '⏱️' : '📝'}</span>
-                  <span className="text-white font-medium">{a.name || 'Nota'}</span>
-                  <span className="text-white/60 text-sm">{formatDate(a.timestamp)}</span>
-                </div>
-                <p className="text-white/80 mb-2">{a.message || a.name}</p>
-                {a.tags?.length > 0 && (
-                  <div className="flex flex-wrap gap-2 mb-2">
-                    {a.tags.map((tag) => (
-                      <span key={tag} className="px-2 py-1 rounded-full text-xs font-medium text-white" style={{ backgroundColor: tagMeta[tag]?.color || '#3B82F6' }}>
-                        #{tag}
-                      </span>
-                    ))}
+          <div className="py-10 text-center">
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>Nenhuma atividade encontrada</p>
+          </div>
+        ) : filtered.map((a, i) => {
+          const isSession = a.type === 'session'
+          const ItemIcon = isSession ? Timer : FileText
+          return (
+            <div key={a.id || i} className="card card-hover p-4">
+              <div className="flex items-start justify-between gap-3">
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2 mb-1.5">
+                    <div className="w-5 h-5 rounded-md flex items-center justify-center shrink-0"
+                         style={{ background: isSession ? 'rgba(244,63,94,0.15)' : 'rgba(99,102,241,0.15)' }}>
+                      <ItemIcon size={11} style={{ color: isSession ? '#f43f5e' : '#a5b4fc' }} strokeWidth={2.5} />
+                    </div>
+                    <span className="text-xs font-medium text-white truncate">{a.name || 'Nota'}</span>
+                    <span className="text-2xs shrink-0" style={{ color: 'var(--text-muted)' }}>{formatDate(a.timestamp)}</span>
                   </div>
+
+                  {a.message && <p className="text-sm mb-2" style={{ color: 'var(--text-secondary)' }}>{a.message}</p>}
+
+                  {a.tags?.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5">
+                      {a.tags.map((tag) => (
+                        <span key={tag} className="px-2 py-0.5 rounded-full text-2xs font-medium text-white"
+                              style={{ background: `${tagMeta[tag]?.color || '#6366f1'}25`, border: `1px solid ${tagMeta[tag]?.color || '#6366f1'}40` }}>
+                          #{tag}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  {a.duration !== undefined && (
+                    <p className="text-2xs mt-1.5" style={{ color: 'var(--text-muted)' }}>Duração: {formatDur(a.duration)}</p>
+                  )}
+                </div>
+
+                {!isSession && (
+                  <button
+                    onClick={() => deleteNote(a.id)}
+                    className="w-7 h-7 rounded-lg flex items-center justify-center shrink-0 hover:bg-red-500/15 transition-colors"
+                    style={{ color: 'var(--text-muted)' }}
+                  >
+                    <Trash2 size={13} strokeWidth={2} />
+                  </button>
                 )}
-                {a.duration && <p className="text-white/60 text-sm">Duração: {formatTime(a.duration)}</p>}
               </div>
-              {a.type === 'note' && (
-                <button onClick={() => deleteNote(a.id)} className="text-red-400 hover:text-red-300 transition-colors ml-4">🗑️</button>
-              )}
             </div>
-          </div>
-        ))}
+          )
+        })}
       </div>
     </div>
   )
diff --git a/src/components/ReportsView.jsx b/src/components/ReportsView.jsx
new file mode 100644
index 0000000..657d3d1
--- /dev/null
+++ b/src/components/ReportsView.jsx
@@ -0,0 +1,216 @@
+import { useState, useEffect, useCallback } from 'react'
+import { FileBarChart, Plus, Trash2, TrendingUp, Clock, Target, Calendar } from 'lucide-react'
+import toast from 'react-hot-toast'
+import { dbService } from '../services/dbService'
+
+const scoreColor = (s) => {
+  if (s >= 70) return '#10b981'
+  if (s >= 40) return '#f59e0b'
+  return '#f43f5e'
+}
+
+const formatMinutes = (m) => {
+  const h = Math.floor(m / 60)
+  const rem = m % 60
+  return h > 0 ? `${h}h ${rem}m` : `${rem}m`
+}
+
+const ReportsView = () => {
+  const today = new Date().toISOString().slice(0, 10)
+  const weekAgo = new Date(Date.now() - 7 * 86400000).toISOString().slice(0, 10)
+
+  const [reports, setReports] = useState([])
+  const [loading, setLoading] = useState(true)
+  const [generating, setGenerating] = useState(false)
+  const [reportType, setReportType] = useState('weekly')
+  const [startDate, setStartDate] = useState(weekAgo)
+  const [endDate, setEndDate] = useState(today)
+
+  const loadReports = useCallback(async () => {
+    setLoading(true)
+    try {
+      const data = await dbService.reports.list()
+      setReports(data)
+    } catch {
+      toast.error('Erro ao carregar relatórios')
+    } finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => { loadReports() }, [loadReports])
+
+  const handleGenerate = async () => {
+    setGenerating(true)
+    try {
+      await dbService.reports.generate({ reportType, startDate, endDate })
+      toast.success('Relatório gerado com sucesso!')
+      await loadReports()
+    } catch {
+      toast.error('Erro ao gerar relatório')
+    } finally {
+      setGenerating(false)
+    }
+  }
+
+  const handleDelete = async (id) => {
+    try {
+      await dbService.reports.delete(id)
+      setReports((prev) => prev.filter((r) => r.id !== id))
+    } catch {
+      toast.error('Erro ao excluir relatório')
+    }
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Generate form */}
+      <div className="card p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <FileBarChart size={15} className="text-white/50" strokeWidth={2} />
+          <h3 className="text-sm font-semibold text-white">Gerar Relatório</h3>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-4 gap-3 items-end">
+          {/* Type */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium" style={{ color: 'var(--text-muted)' }}>Tipo</label>
+            <select
+              value={reportType}
+              onChange={(e) => setReportType(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg text-sm text-white transition-colors"
+              style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}
+            >
+              <option value="weekly">Semanal</option>
+              <option value="custom">Personalizado</option>
+            </select>
+          </div>
+
+          {/* Start date */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium" style={{ color: 'var(--text-muted)' }}>De</label>
+            <input
+              type="date"
+              value={startDate}
+              onChange={(e) => setStartDate(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg text-sm text-white transition-colors"
+              style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)', colorScheme: 'dark' }}
+            />
+          </div>
+
+          {/* End date */}
+          <div className="space-y-1.5">
+            <label className="text-xs font-medium" style={{ color: 'var(--text-muted)' }}>Até</label>
+            <input
+              type="date"
+              value={endDate}
+              onChange={(e) => setEndDate(e.target.value)}
+              className="w-full px-3 py-2 rounded-lg text-sm text-white transition-colors"
+              style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)', colorScheme: 'dark' }}
+            />
+          </div>
+
+          {/* Button */}
+          <button
+            onClick={handleGenerate}
+            disabled={generating}
+            className="flex items-center justify-center gap-2 px-4 py-2 rounded-lg text-sm font-medium text-white transition-all hover:scale-[1.02] active:scale-[0.98] disabled:opacity-50"
+            style={{ background: 'rgba(99,102,241,0.3)', border: '1px solid rgba(99,102,241,0.4)' }}
+          >
+            {generating ? (
+              <div className="w-4 h-4 rounded-full border-2 animate-spin"
+                   style={{ borderColor: 'var(--border-default)', borderTopColor: '#a5b4fc' }} />
+            ) : (
+              <Plus size={15} strokeWidth={2} />
+            )}
+            {generating ? 'Gerando...' : 'Gerar'}
+          </button>
+        </div>
+      </div>
+
+      {/* Reports list */}
+      <div className="card p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <Calendar size={15} className="text-white/50" strokeWidth={2} />
+          <h3 className="text-sm font-semibold text-white">Relatórios Salvos</h3>
+          <span className="ml-auto text-2xs px-2 py-0.5 rounded-full"
+                style={{ background: 'var(--surface-3)', color: 'var(--text-muted)' }}>
+            {reports.length}
+          </span>
+        </div>
+
+        {loading ? (
+          <div className="space-y-2">
+            {[0,1,2].map((i) => <div key={i} className="skeleton h-16 rounded-xl" />)}
+          </div>
+        ) : reports.length === 0 ? (
+          <div className="py-10 text-center">
+            <FileBarChart size={28} className="mx-auto mb-3 text-white/15" strokeWidth={1.5} />
+            <p className="text-sm font-medium text-white/40">Nenhum relatório ainda</p>
+            <p className="text-xs mt-1" style={{ color: 'var(--text-muted)' }}>
+              Selecione um período acima e clique em Gerar para criar seu primeiro relatório.
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {reports.map((r) => {
+              const color = scoreColor(r.productivity_score || 0)
+              return (
+                <div key={r.id}
+                     className="flex items-center gap-4 px-4 py-3 rounded-xl hover:bg-white/5 transition-colors group"
+                     style={{ border: '1px solid var(--border-subtle)' }}>
+                  {/* Score badge */}
+                  <div className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0 text-sm font-bold"
+                       style={{ background: `${color}15`, color, border: `1px solid ${color}30` }}>
+                    {r.productivity_score ?? '—'}
+                  </div>
+
+                  {/* Info */}
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-white capitalize">
+                      {r.report_type === 'weekly' ? 'Semanal' : 'Personalizado'}
+                    </p>
+                    <div className="flex items-center gap-3 mt-0.5">
+                      <span className="text-2xs flex items-center gap-1" style={{ color: 'var(--text-muted)' }}>
+                        <Calendar size={10} />
+                        {r.start_date} → {r.end_date}
+                      </span>
+                    </div>
+                  </div>
+
+                  {/* Stats */}
+                  <div className="hidden sm:flex items-center gap-4">
+                    <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--text-muted)' }}>
+                      <Clock size={12} strokeWidth={2} />
+                      {formatMinutes(r.total_focus_time || 0)}
+                    </div>
+                    <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--text-muted)' }}>
+                      <Target size={12} strokeWidth={2} />
+                      {r.total_cycles} ciclos
+                    </div>
+                    <div className="flex items-center gap-1 text-xs" style={{ color: 'var(--text-muted)' }}>
+                      <TrendingUp size={12} strokeWidth={2} />
+                      {r.completed_cycles} completos
+                    </div>
+                  </div>
+
+                  {/* Delete */}
+                  <button
+                    onClick={() => handleDelete(r.id)}
+                    className="w-8 h-8 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all hover:bg-red-500/15"
+                    style={{ color: 'var(--text-muted)' }}
+                    aria-label="Excluir relatório"
+                  >
+                    <Trash2 size={13} strokeWidth={2} />
+                  </button>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ReportsView
diff --git a/src/components/SettingsScreen.jsx b/src/components/SettingsScreen.jsx
index 2bd9b2c..ce4308e 100644
--- a/src/components/SettingsScreen.jsx
+++ b/src/components/SettingsScreen.jsx
@@ -1,5 +1,6 @@
 import { useState, useEffect } from 'react'
 import toast from 'react-hot-toast'
+import { Settings2, Clock, RefreshCw, Play, GitBranch, FolderOpen, X, Check } from 'lucide-react'
 import { dbService } from '../services/dbService'
 import { loadSettings, saveSettings, normalizeSettings } from '../utils/settingsUtils'
 import { useApp } from '../context/AppContext'
@@ -31,6 +32,7 @@ const SettingsScreen = ({ asPage = false, onClose }) => {
     setSettings(defaults)
     saveSettings(defaults)
     await refreshSettings()
+    toast.success('Configurações restauradas')
   }
 
   const handleSelectRepo = async () => {
@@ -41,154 +43,198 @@ const SettingsScreen = ({ asPage = false, onClose }) => {
       await dbService.settings.set('git_repo_path', path)
       localStorage.setItem('codefocus-settings', JSON.stringify(updated))
       await refreshSettings()
-      toast.success('Repositório salvo!', { duration: 2000, style: { background: '#1f2937', color: '#fff' } })
+      toast.success('Repositório salvo!')
     }
   }
 
-  const Toggle = ({ field, label, description }) => (
-    <div className="flex items-center justify-between">
-      <div>
-        <p className="text-white/90 font-medium">{label}</p>
-        {description && <p className="text-gray-400 text-xs">{description}</p>}
+  const Toggle = ({ field, label, description }) => {
+    const checked = !!settings[field]
+    return (
+      <div className="flex items-center justify-between py-1">
+        <div>
+          <p className="text-sm font-medium text-white">{label}</p>
+          {description && <p className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>{description}</p>}
+        </div>
+        <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
+          <input
+            type="checkbox"
+            className="sr-only peer"
+            checked={checked}
+            onChange={(e) => setSettings((p) => ({ ...p, [field]: e.target.checked }))}
+          />
+          <div
+            className="w-10 h-[22px] rounded-full transition-all duration-200 relative"
+            style={{ background: checked ? '#6366f1' : 'var(--surface-3)', border: '1px solid var(--border-default)' }}
+          >
+            <div
+              className="absolute top-0.5 h-[16px] w-[16px] bg-white rounded-full transition-all duration-200 shadow-sm"
+              style={{ left: checked ? 'calc(100% - 18px)' : '2px' }}
+            />
+          </div>
+        </label>
       </div>
-      <label className="relative inline-flex items-center cursor-pointer">
-        <input
-          type="checkbox"
-          className="sr-only peer"
-          checked={!!settings[field]}
-          onChange={(e) => setSettings((p) => ({ ...p, [field]: e.target.checked }))}
-        />
-        <div className="w-11 h-6 bg-gray-600 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600" />
-      </label>
-    </div>
-  )
+    )
+  }
 
-  const NumberInput = ({ field, label, min = 1, max = 120 }) => (
-    <div>
-      <label className="block text-white/90 text-sm mb-2">{label}</label>
-      <input
-        type="number"
-        value={settings[field] ?? ''}
-        onChange={(e) => setSettings((p) => ({ ...p, [field]: parseInt(e.target.value) || 0 }))}
-        className="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
-        min={min}
-        max={max}
-      />
+  const NumberInput = ({ field, label, min = 1, max = 120 }) => {
+    const val = parseInt(settings[field]) || min
+    const set = (n) => setSettings((p) => ({ ...p, [field]: Math.max(min, Math.min(max, n)) }))
+    return (
+      <div className="space-y-1.5">
+        <label className="block text-xs font-medium" style={{ color: 'var(--text-muted)' }}>{label}</label>
+        <div className="flex items-center rounded-lg overflow-hidden" style={{ border: '1px solid var(--border-default)' }}>
+          <button
+            onClick={() => set(val - 1)}
+            className="px-3 py-2 text-sm font-medium transition-colors hover:bg-white/10"
+            style={{ color: 'var(--text-secondary)', borderRight: '1px solid var(--border-subtle)' }}
+          >−</button>
+          <input
+            type="number"
+            value={val}
+            onChange={(e) => set(parseInt(e.target.value) || min)}
+            className="w-16 text-center bg-transparent text-white py-2 text-sm"
+            min={min}
+            max={max}
+          />
+          <button
+            onClick={() => set(val + 1)}
+            className="px-3 py-2 text-sm font-medium transition-colors hover:bg-white/10"
+            style={{ color: 'var(--text-secondary)', borderLeft: '1px solid var(--border-subtle)' }}
+          >+</button>
+        </div>
+      </div>
+    )
+  }
+
+  const Section = ({ icon: Icon, title, accent, children }) => (
+    <div className="card p-5">
+      <div className="flex items-center gap-2.5 mb-4">
+        <div className="w-7 h-7 rounded-lg flex items-center justify-center"
+             style={{ background: `${accent}20` }}>
+          <Icon size={14} style={{ color: accent }} strokeWidth={2} />
+        </div>
+        <h3 className="text-sm font-semibold text-white">{title}</h3>
+      </div>
+      {children}
     </div>
   )
 
   const content = (
-    <div className="bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl shadow-2xl w-full max-h-[90vh] overflow-hidden">
+    <div className="w-full" style={{ background: '#16191f', borderRadius: 'var(--radius-xl)', overflow: 'hidden', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
       {/* Header */}
-      <div className="flex justify-between items-center p-6 border-b border-gray-700">
-        <div className="flex items-center space-x-4">
-          <div className="w-12 h-12 bg-gradient-to-br from-blue-600 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
-            <span className="text-white text-xl">⚙️</span>
+      <div className="flex items-center justify-between px-6 py-5"
+           style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+        <div className="flex items-center gap-3">
+          <div className="w-9 h-9 rounded-xl flex items-center justify-center"
+               style={{ background: 'linear-gradient(135deg,#6366f1,#8b5cf6)' }}>
+            <Settings2 size={16} className="text-white" strokeWidth={2} />
           </div>
           <div>
-            <h2 className="text-2xl font-bold text-white">Configurações</h2>
-            <p className="text-gray-400 text-base">Personalize sua experiência</p>
+            <h2 className="text-base font-semibold text-white">Configurações</h2>
+            <p className="text-xs" style={{ color: 'var(--text-muted)' }}>Personalize sua experiência</p>
           </div>
         </div>
         {!asPage && onClose && (
-          <button onClick={onClose} className="text-gray-400 hover:text-white transition-colors text-xl">✕</button>
+          <button
+            onClick={onClose}
+            className="w-7 h-7 rounded-lg flex items-center justify-center hover:bg-white/10 transition-colors"
+            style={{ color: 'var(--text-muted)' }}
+          >
+            <X size={14} />
+          </button>
         )}
       </div>
 
-      {/* Conteúdo */}
-      <div className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-120px)]">
-
-        {/* Durações */}
-        <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
-          <div className="flex items-center space-x-3 mb-4">
-            <div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center"><span className="text-white text-sm">⏱️</span></div>
-            <h3 className="text-lg font-semibold text-white">Durações do Timer</h3>
-          </div>
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-            <NumberInput field="focus_time" label="Foco (minutos)" min={1} max={120} />
-            <NumberInput field="short_break_time" label="Pausa Curta (minutos)" min={1} max={30} />
-            <NumberInput field="long_break_time" label="Pausa Longa (minutos)" min={1} max={60} />
+      {/* Content */}
+      <div className="flex-1 overflow-y-auto p-5 space-y-4">
+        {/* Timer durations */}
+        <Section icon={Clock} title="Durações do Timer" accent="#6366f1">
+          <div className="grid grid-cols-3 gap-3">
+            <NumberInput field="focus_time" label="Foco (min)" min={1} max={120} />
+            <NumberInput field="short_break_time" label="Pausa Curta (min)" min={1} max={30} />
+            <NumberInput field="long_break_time" label="Pausa Longa (min)" min={1} max={60} />
           </div>
-        </div>
+        </Section>
 
-        {/* Ciclo */}
-        <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
-          <div className="flex items-center space-x-3 mb-4">
-            <div className="w-8 h-8 bg-green-600 rounded-lg flex items-center justify-center"><span className="text-white text-sm">🔄</span></div>
-            <h3 className="text-lg font-semibold text-white">Configurações de Ciclo</h3>
-          </div>
+        {/* Cycle */}
+        <Section icon={RefreshCw} title="Ciclos" accent="#10b981">
           <NumberInput field="cycles_before_long_break" label="Ciclos antes da pausa longa" min={1} max={10} />
-          <p className="text-gray-400 text-xs mt-2">Quantos ciclos de foco antes de uma pausa longa</p>
-        </div>
+          <p className="text-xs mt-2" style={{ color: 'var(--text-muted)' }}>Quantos ciclos de foco antes de uma pausa longa.</p>
+        </Section>
 
         {/* Auto-start */}
-        <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
-          <div className="flex items-center space-x-3 mb-4">
-            <div className="w-8 h-8 bg-purple-600 rounded-lg flex items-center justify-center"><span className="text-white text-sm">▶️</span></div>
-            <h3 className="text-lg font-semibold text-white">Início Automático</h3>
-          </div>
-          <div className="space-y-4">
+        <Section icon={Play} title="Início Automático" accent="#f59e0b">
+          <div className="space-y-3">
             <Toggle field="auto_start_breaks" label="Iniciar pausas automaticamente" description="As pausas começam quando o foco termina" />
-            <Toggle field="auto_start_pomodoros" label="Iniciar pomodoros automaticamente" description="Ciclos de foco iniciam após as pausas" />
+            <div style={{ borderTop: '1px solid var(--border-subtle)', margin: '0 -20px', padding: '0 20px', paddingTop: '12px' }}>
+              <Toggle field="auto_start_pomodoros" label="Iniciar pomodoros automaticamente" description="Ciclos de foco iniciam após as pausas" />
+            </div>
           </div>
-        </div>
+        </Section>
 
         {/* Git */}
-        <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
-          <div className="flex items-center space-x-3 mb-4">
-            <div className="w-8 h-8 bg-emerald-600 rounded-lg flex items-center justify-center"><span className="text-white text-sm">🔗</span></div>
-            <h3 className="text-lg font-semibold text-white">Repositório Git</h3>
-          </div>
-          <p className="text-gray-400 text-sm mb-4">
-            Ao finalizar um ciclo, o CodeFocus detecta automaticamente quais commits foram feitos nesta pasta durante a sessão.
+        <Section icon={GitBranch} title="Repositório Git" accent="#34d399">
+          <p className="text-xs mb-3" style={{ color: 'var(--text-muted)' }}>
+            Ao finalizar um ciclo, o CodeFocus detecta automaticamente quais commits foram feitos durante a sessão.
           </p>
-          <div className="flex gap-3">
-            <div className="flex-1 px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg text-white/70 text-sm truncate">
-              {settings.git_repo_path || 'Nenhum repositório selecionado'}
+          <div className="flex gap-2 items-center">
+            <div className="flex-1 flex items-center gap-1.5 px-3 py-2 rounded-lg truncate"
+                 style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}>
+              <GitBranch size={11} style={{ color: 'var(--text-muted)', flexShrink: 0 }} />
+              <span className="text-xs font-mono truncate" style={{ color: settings.git_repo_path ? 'var(--text-secondary)' : 'var(--text-muted)' }}>
+                {settings.git_repo_path || 'Nenhum repositório selecionado'}
+              </span>
             </div>
             <button
               onClick={handleSelectRepo}
-              className="px-4 py-3 bg-emerald-600 hover:bg-emerald-700 text-white rounded-lg transition-colors text-sm whitespace-nowrap"
+              className="flex items-center gap-1.5 px-3 py-2 rounded-lg text-xs font-medium text-white transition-all hover:scale-[1.02] shrink-0"
+              style={{ background: 'rgba(52,211,153,0.2)', border: '1px solid rgba(52,211,153,0.35)' }}
             >
-              📂 Escolher pasta
+              <FolderOpen size={13} strokeWidth={2} />
+              Escolher
             </button>
           </div>
           {settings.git_repo_path && (
             <button
               onClick={() => setSettings((p) => ({ ...p, git_repo_path: '' }))}
-              className="mt-2 text-red-400 hover:text-red-300 text-xs transition-colors"
+              className="mt-2 text-xs transition-colors hover:opacity-80"
+              style={{ color: 'var(--text-muted)' }}
             >
               Remover repositório
             </button>
           )}
-        </div>
-
+        </Section>
       </div>
 
-      {/* Ações */}
-      <div className="flex justify-end space-x-4 p-6 border-t border-gray-700">
+      {/* Footer actions */}
+      <div className="flex justify-end gap-3 px-5 py-4"
+           style={{ borderTop: '1px solid var(--border-subtle)' }}>
         <button
           onClick={handleReset}
-          className="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white font-medium rounded-xl transition-all hover:scale-105 shadow-lg"
+          className="px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-[1.02]"
+          style={{ border: '1px solid var(--border-default)', color: 'var(--text-secondary)' }}
         >
           Restaurar Padrão
         </button>
         <button
           onClick={handleSave}
           disabled={saving}
-          className="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 hover:from-purple-700 hover:to-blue-700 text-white font-medium rounded-xl transition-all hover:scale-105 shadow-lg disabled:opacity-70"
+          className="flex items-center gap-2 px-5 py-2 rounded-lg text-sm font-medium text-white transition-all hover:scale-[1.02] disabled:opacity-60"
+          style={{ background: 'linear-gradient(135deg,#6366f1,#8b5cf6)' }}
         >
-          {saving ? 'Salvando...' : saved ? '✅ Salvo!' : 'Salvar Configurações'}
+          {saved ? <Check size={14} strokeWidth={2.5} /> : null}
+          {saving ? 'Salvando...' : saved ? 'Salvo!' : 'Salvar'}
         </button>
       </div>
     </div>
   )
 
-  if (asPage) return <div className="rounded-2xl w-full max-w-5xl mx-auto overflow-hidden">{content}</div>
+  if (asPage) return <div className="w-full max-w-2xl mx-auto">{content}</div>
 
   return (
-    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
-      <div className="w-full max-w-3xl overflow-hidden rounded-2xl">{content}</div>
+    <div className="fixed inset-0 flex items-center justify-center z-50 p-4"
+         style={{ background: 'rgba(0,0,0,0.7)', backdropFilter: 'blur(12px)' }}>
+      <div className="w-full max-w-2xl">{content}</div>
     </div>
   )
 }
diff --git a/src/components/TagManager.jsx b/src/components/TagManager.jsx
index 9f7352d..471c724 100644
--- a/src/components/TagManager.jsx
+++ b/src/components/TagManager.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
+import { Tag, Plus, Trash2, Check, Flame, CheckSquare, ListTodo, ListChecks, X } from 'lucide-react'
 import { dbService } from '../services/dbService'
 
 const TagManager = () => {
@@ -80,117 +81,213 @@ const TagManager = () => {
   }
 
   if (loading) {
-    return <div className="flex items-center justify-center py-12"><p className="text-white/60">Carregando...</p></div>
+    return (
+      <div className="space-y-4">
+        {[0,1,2].map((i) => <div key={i} className="skeleton h-20 rounded-2xl" />)}
+      </div>
+    )
   }
 
   return (
-    <div className="min-h-screen animate-fade-in">
-      <div className="mb-8">
-        <h1 className="text-4xl font-bold text-white mb-2">Gerenciador de Tarefas</h1>
-        <p className="text-white/60 text-lg">Organize suas tarefas e acompanhe seu progresso</p>
+    <div className="space-y-5 animate-fade-in">
+      {/* Header */}
+      <div className="mb-1">
+        <h1 className="text-2xl font-semibold text-white">Tarefas</h1>
+        <p className="text-sm mt-0.5" style={{ color: 'var(--text-muted)' }}>Organize com tags e acompanhe os pomodoros</p>
       </div>
 
       {/* Stats */}
-      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
+      <div className="grid grid-cols-4 gap-3">
         {[
-          { label: 'Total', value: stats.total, colors: 'from-blue-600/20 to-purple-600/20' },
-          { label: 'Concluídas', value: stats.completed, colors: 'from-green-600/20 to-emerald-600/20' },
-          { label: 'Ativas', value: stats.active, colors: 'from-orange-600/20 to-red-600/20' },
-          { label: 'Pomodoros', value: stats.totalPomodoros, colors: 'from-purple-600/20 to-pink-600/20' },
-        ].map((s) => (
-          <div key={s.label} className={`bg-gradient-to-br ${s.colors} backdrop-blur-sm rounded-xl p-4 border border-white/10`}>
-            <p className="text-white/60 text-sm">{s.label}</p>
-            <p className="text-2xl font-bold text-white">{s.value}</p>
+          { label: 'Total',      value: stats.total,          icon: ListTodo,    accent: '#6366f1' },
+          { label: 'Concluídas', value: stats.completed,      icon: ListChecks,  accent: '#10b981' },
+          { label: 'Ativas',     value: stats.active,         icon: CheckSquare, accent: '#f59e0b' },
+          { label: 'Pomodoros',  value: stats.totalPomodoros, icon: Flame,       accent: '#f43f5e' },
+        ].map(({ label, value, icon: Icon, accent }) => (
+          <div key={label} className="card p-4">
+            <div className="flex items-center gap-1.5 mb-2">
+              <Icon size={12} style={{ color: accent }} strokeWidth={2.5} />
+              <span className="text-2xs font-medium" style={{ color: 'var(--text-muted)' }}>{label}</span>
+            </div>
+            <p className="text-xl font-semibold text-white">{value}</p>
           </div>
         ))}
       </div>
 
-      {/* Tags */}
-      <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 mb-8">
-        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2"><span>🏷️</span> Gerenciar Tags</h2>
-        <div className="flex gap-2 mb-4">
+      {/* Tags manager */}
+      <div className="card p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <Tag size={14} className="text-white/50" strokeWidth={2} />
+          <h2 className="text-sm font-semibold text-white">Gerenciar Tags</h2>
+        </div>
+        <div className="flex gap-2 mb-3">
           <input
             type="text"
             value={newTag}
             onChange={(e) => setNewTag(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && addTag()}
             placeholder="Nova tag..."
-            className="flex-1 px-4 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="flex-1 px-3 py-2 rounded-lg text-sm text-white placeholder-white/30 transition-all"
+            style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}
           />
-          <button onClick={addTag} className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors">Adicionar</button>
-        </div>
-        <div className="flex flex-wrap gap-2">
-          {tags.map((tag) => (
-            <div
-              key={tag.id}
-              className={`px-3 py-1 rounded-full text-sm transition-all cursor-pointer flex items-center gap-2 ${selectedTags.includes(tag.name) ? 'bg-blue-600 text-white' : 'bg-white/10 text-white/80 hover:bg-white/20'}`}
-              onClick={() => setSelectedTags((p) => p.includes(tag.name) ? p.filter((t) => t !== tag.name) : [...p, tag.name])}
-            >
-              <span>{tag.name}</span>
-              <button onClick={(e) => { e.stopPropagation(); removeTag(tag.id, tag.name) }} className="text-white/60 hover:text-white">×</button>
-            </div>
-          ))}
+          <button
+            onClick={addTag}
+            className="px-3 py-2 rounded-lg text-sm font-medium text-white flex items-center gap-1.5 transition-all hover:scale-[1.02]"
+            style={{ background: 'rgba(99,102,241,0.25)', border: '1px solid rgba(99,102,241,0.4)' }}
+          >
+            <Plus size={14} strokeWidth={2.5} />
+            Adicionar
+          </button>
         </div>
+        {tags.length > 0 ? (
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <div
+                key={tag.id}
+                onClick={() => setSelectedTags((p) => p.includes(tag.name) ? p.filter((t) => t !== tag.name) : [...p, tag.name])}
+                className="group flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium cursor-pointer transition-all"
+                style={selectedTags.includes(tag.name) ? {
+                  background: 'rgba(99,102,241,0.25)',
+                  color: '#a5b4fc',
+                  border: '1px solid rgba(99,102,241,0.45)',
+                } : {
+                  background: 'var(--surface-3)',
+                  color: 'var(--text-secondary)',
+                  border: '1px solid var(--border-subtle)',
+                }}
+              >
+                <Tag size={10} strokeWidth={2} />
+                {tag.name}
+                <button
+                  onClick={(e) => { e.stopPropagation(); removeTag(tag.id, tag.name) }}
+                  className="opacity-0 group-hover:opacity-100 transition-opacity ml-0.5 hover:text-red-400"
+                >
+                  <X size={10} strokeWidth={2.5} />
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : (
+          <p className="text-xs" style={{ color: 'var(--text-muted)' }}>Nenhuma tag criada ainda.</p>
+        )}
       </div>
 
-      {/* Nova Tarefa */}
-      <div className="bg-white/5 backdrop-blur-sm rounded-2xl p-6 border border-white/10 mb-8">
-        <h2 className="text-xl font-semibold text-white mb-4 flex items-center gap-2"><span>➕</span> Nova Tarefa</h2>
-        <div className="space-y-4">
+      {/* New task */}
+      <div className="card p-5">
+        <div className="flex items-center gap-2 mb-4">
+          <Plus size={14} className="text-white/50" strokeWidth={2} />
+          <h2 className="text-sm font-semibold text-white">Nova Tarefa</h2>
+        </div>
+        <div className="space-y-3">
           <input
             type="text"
             value={newTask}
             onChange={(e) => setNewTask(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && addTask()}
             placeholder="O que você precisa fazer?"
-            className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            className="w-full px-3 py-2.5 rounded-xl text-sm text-white placeholder-white/30 transition-all"
+            style={{ background: 'var(--surface-3)', border: '1px solid var(--border-subtle)' }}
           />
           {selectedTags.length > 0 && (
-            <div className="flex items-center gap-2">
-              <span className="text-white/60 text-sm">Tags:</span>
-              {selectedTags.map((t) => <span key={t} className="px-2 py-1 bg-blue-600/20 text-blue-300 rounded-full text-sm">#{t}</span>)}
+            <div className="flex items-center gap-2 flex-wrap">
+              {selectedTags.map((t) => (
+                <span key={t} className="px-2 py-0.5 rounded-full text-xs font-medium"
+                      style={{ background: 'rgba(99,102,241,0.2)', color: '#a5b4fc', border: '1px solid rgba(99,102,241,0.35)' }}>
+                  #{t}
+                </span>
+              ))}
             </div>
           )}
-          <button onClick={addTask} disabled={!newTask.trim()} className="w-full py-3 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 disabled:opacity-50 text-white rounded-lg transition-all font-medium">
+          <button
+            onClick={addTask}
+            disabled={!newTask.trim()}
+            className="w-full py-2.5 rounded-xl text-sm font-medium text-white transition-all hover:scale-[1.01] disabled:opacity-40"
+            style={{ background: 'linear-gradient(135deg, rgba(99,102,241,0.4), rgba(139,92,246,0.4))', border: '1px solid rgba(99,102,241,0.4)' }}
+          >
             Adicionar Tarefa
           </button>
         </div>
       </div>
 
-      {/* Filtros */}
-      <div className="flex gap-2 mb-6">
+      {/* Filter */}
+      <div className="flex gap-0" style={{ borderBottom: '1px solid var(--border-subtle)' }}>
         {[['all', 'Todas'], ['active', 'Ativas'], ['completed', 'Concluídas']].map(([f, label]) => (
-          <button key={f} onClick={() => setFilter(f)} className={`px-4 py-2 rounded-lg font-medium transition-all ${filter === f ? 'bg-white/20 text-white' : 'text-white/60 hover:text-white hover:bg-white/10'}`}>
+          <button
+            key={f}
+            onClick={() => setFilter(f)}
+            className="px-4 py-2.5 text-xs font-medium relative transition-colors"
+            style={filter === f ? { color: 'var(--text-primary)' } : { color: 'var(--text-muted)' }}
+          >
             {label}
+            {filter === f && <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-blue-400 rounded-t-full" />}
           </button>
         ))}
       </div>
 
-      {/* Lista de Tarefas */}
-      <div className="space-y-3">
+      {/* Task list */}
+      <div className="space-y-2">
         {filteredTasks.length === 0 ? (
-          <div className="text-center py-12"><p className="text-white/40 text-lg">Nenhuma tarefa encontrada</p></div>
+          <div className="py-12 text-center">
+            <ListTodo size={28} className="mx-auto mb-3 text-white/15" strokeWidth={1.5} />
+            <p className="text-sm" style={{ color: 'var(--text-muted)' }}>Nenhuma tarefa encontrada</p>
+          </div>
         ) : filteredTasks.map((task) => (
-          <div key={task.id} className={`bg-white/5 backdrop-blur-sm rounded-xl p-4 border border-white/10 hover:border-white/20 transition-all ${task.completed ? 'opacity-60' : ''}`}>
-            <div className="flex items-center gap-4">
-              <button onClick={() => toggleTask(task.id)} className={`w-6 h-6 rounded-full border-2 transition-all flex items-center justify-center ${task.completed ? 'bg-green-500 border-green-500' : 'border-white/40 hover:border-white'}`}>
-                {task.completed && <span className="text-white text-sm">✓</span>}
-              </button>
-              <div className="flex-1">
-                <p className={`text-white ${task.completed ? 'line-through' : ''}`}>{task.text}</p>
-                {task.tags?.length > 0 && (
-                  <div className="flex gap-1 mt-1">
-                    {task.tags.map((t, i) => <span key={i} className="px-2 py-0.5 bg-white/10 rounded-full text-xs text-white/60">#{t}</span>)}
-                  </div>
-                )}
-              </div>
-              <div className="flex items-center gap-2">
-                <button onClick={() => incrementPomodoro(task.id)} className="px-3 py-1 bg-red-500/20 hover:bg-red-500/30 text-red-300 rounded-lg text-sm flex items-center gap-1">
-                  <span>🍅</span><span>{task.pomodoro_count || 0}</span>
-                </button>
-                <button onClick={() => removeTask(task.id)} className="p-2 text-white/40 hover:text-red-400 transition-colors">🗑️</button>
-              </div>
+          <div
+            key={task.id}
+            className="flex items-center gap-3 px-4 py-3 rounded-xl group transition-all"
+            style={{
+              background: 'var(--surface-2)',
+              border: '1px solid var(--border-subtle)',
+              opacity: task.completed ? 0.55 : 1,
+            }}
+          >
+            {/* Checkbox */}
+            <button
+              onClick={() => toggleTask(task.id)}
+              className="w-5 h-5 rounded-md shrink-0 flex items-center justify-center transition-all"
+              style={task.completed ? {
+                background: 'rgba(16,185,129,0.25)',
+                border: '1.5px solid rgba(16,185,129,0.5)',
+              } : {
+                border: '1.5px solid var(--border-default)',
+              }}
+            >
+              {task.completed && <Check size={11} className="text-emerald-400" strokeWidth={3} />}
+            </button>
+
+            {/* Text + tags */}
+            <div className="flex-1 min-w-0">
+              <p className={`text-sm text-white ${task.completed ? 'line-through' : ''}`}>{task.text}</p>
+              {task.tags?.length > 0 && (
+                <div className="flex gap-1 mt-1 flex-wrap">
+                  {task.tags.map((t, i) => (
+                    <span key={i} className="px-1.5 py-0.5 rounded text-2xs font-medium"
+                          style={{ background: 'var(--surface-3)', color: 'var(--text-muted)' }}>
+                      #{t}
+                    </span>
+                  ))}
+                </div>
+              )}
             </div>
+
+            {/* Pomodoro counter */}
+            <button
+              onClick={() => incrementPomodoro(task.id)}
+              className="flex items-center gap-1 px-2 py-1 rounded-lg text-xs font-medium transition-all hover:scale-[1.05] shrink-0"
+              style={{ background: 'rgba(244,63,94,0.12)', border: '1px solid rgba(244,63,94,0.25)', color: 'rgba(244,63,94,0.8)' }}
+            >
+              <Flame size={11} strokeWidth={2.5} />
+              {task.pomodoro_count || 0}
+            </button>
+
+            {/* Delete */}
+            <button
+              onClick={() => removeTask(task.id)}
+              className="w-7 h-7 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all hover:bg-red-500/15"
+              style={{ color: 'var(--text-muted)' }}
+            >
+              <Trash2 size={13} strokeWidth={2} />
+            </button>
           </div>
         ))}
       </div>
diff --git a/src/components/Timer.jsx b/src/components/Timer.jsx
index 1d163d0..54500b0 100644
--- a/src/components/Timer.jsx
+++ b/src/components/Timer.jsx
@@ -1,10 +1,15 @@
 import { useState, useEffect, forwardRef, useImperativeHandle, useRef, useCallback } from 'react'
+import { Play, Pause, RotateCcw, CheckCircle, StickyNote, X, Brain, Coffee, Moon } from 'lucide-react'
 import notificationManager from '../utils/notificationUtils'
 import GitDetectModal from './GitDetectModal'
 import { loadSettings } from '../utils/settingsUtils'
 import { dbService } from '../services/dbService'
 import { useTodayStats } from '../hooks/useTodayStats'
 
+const PHASE_COLORS = { focus: '#f43f5e', shortBreak: '#14b8a6', longBreak: '#38bdf8' }
+const PHASE_NAMES  = { focus: 'Foco', shortBreak: 'Pausa Curta', longBreak: 'Pausa Longa' }
+const PHASE_ICONS  = { focus: Brain, shortBreak: Coffee, longBreak: Moon }
+
 const Timer = forwardRef((props, ref) => {
   const [settings, setSettings] = useState(loadSettings())
   const [pendingAutoStartPhase, setPendingAutoStartPhase] = useState(null)
@@ -50,7 +55,6 @@ const Timer = forwardRef((props, ref) => {
   const inputRef = useRef(null)
   const [todayStats, refreshTodayStats] = useTodayStats(isRunning)
 
-  // Atualizar settings quando mudarem
   useEffect(() => {
     const onStorage = (e) => {
       if (e.key === 'codefocus-settings') setSettings(loadSettings())
@@ -59,7 +63,6 @@ const Timer = forwardRef((props, ref) => {
     return () => window.removeEventListener('storage', onStorage)
   }, [])
 
-  // Carregar tags
   useEffect(() => {
     dbService.tags.list().then((list) => {
       setAvailableTags(list.map((t) => t.name))
@@ -74,14 +77,12 @@ const Timer = forwardRef((props, ref) => {
     try { localStorage.setItem(getFocusCountKey(), String(n)) } catch {}
   }, [])
 
-  // Salvar estado
   useEffect(() => {
     try {
       localStorage.setItem('codefocus-timer-state', JSON.stringify({ timeLeft, isPaused, currentPhase, cycleName }))
     } catch {}
   }, [timeLeft, isPaused, currentPhase, cycleName])
 
-  // Salvar sessão no histórico local
   const saveSession = (duration, phase, name, tags = [], note = '') => {
     try {
       const history = JSON.parse(localStorage.getItem('codefocus-history') || '[]')
@@ -112,16 +113,9 @@ const Timer = forwardRef((props, ref) => {
     const total = getPhaseDuration(currentPhase)
     return ((total - timeLeft) / total) * 100
   }
-  const getPhaseColor = () => ({ focus: '#FF6B6B', shortBreak: '#4ECDC4', longBreak: '#45B7D1' }[currentPhase] || '#FF6B6B')
-  const getPhaseName = () => ({ focus: 'FOCUS', shortBreak: 'SHORT BREAK', longBreak: 'LONG BREAK' }[currentPhase] || '')
-  const getStatusMessage = () => {
-    if (!isRunning && !isPaused && currentPhase === 'focus') return 'Pronto para focar? 🎯'
-    if (isRunning) return { focus: 'Mantenha o foco! 💪', shortBreak: 'Descanse um pouco 😌', longBreak: 'Hora de relaxar 🌟' }[currentPhase] || ''
-    if (isPaused) return 'Timer pausado ⏸️'
-    return ''
-  }
+  const getPhaseColor = () => PHASE_COLORS[currentPhase] || PHASE_COLORS.focus
+  const getPhaseName  = () => PHASE_NAMES[currentPhase]  || 'Foco'
 
-  // Timer principal
   useEffect(() => {
     let interval = null
     if (isRunning && timeLeft > 0) {
@@ -193,9 +187,14 @@ const Timer = forwardRef((props, ref) => {
     notificationManager.notifyPauseStarted('longBreak')
   }
 
-  const pauseTimer = () => { setIsRunning(false); setIsPaused(true); notificationManager.notifyTimerPaused() }
-  const resumeTimer = () => { setIsRunning(true); setIsPaused(false); notificationManager.notifyTimerResumed() }
-  const resetTimer = () => { setIsRunning(false); setIsPaused(false); setTimeLeft((settings.focus_time || 25) * 60); setCurrentPhase('focus') }
+  const pauseTimer  = () => { setIsRunning(false); setIsPaused(true);  notificationManager.notifyTimerPaused()  }
+  const resumeTimer = () => { setIsRunning(true);  setIsPaused(false); notificationManager.notifyTimerResumed() }
+  const resetTimer  = () => {
+    setIsRunning(false)
+    setIsPaused(false)
+    setTimeLeft((settings.focus_time || 25) * 60)
+    setCurrentPhase('focus')
+  }
 
   const handleStartFocus = () => {
     if (!cycleName.trim()) {
@@ -265,165 +264,280 @@ const Timer = forwardRef((props, ref) => {
   }
 
   const progress = calculateProgress()
+  const phaseColor = getPhaseColor()
+  const PhaseIcon = PHASE_ICONS[currentPhase] || Brain
 
   return (
-    <div className="flex flex-col items-center justify-center gap-2 h-full min-h-0 py-2">
-      {/* Status */}
-      <div className="text-center shrink-0 h-7">
-        <p className="text-base text-white/80 animate-fade-in">{getStatusMessage()}</p>
+    <div className="flex flex-col items-center justify-center gap-4 h-full min-h-0 py-4">
+
+      {/* Phase badge */}
+      <div className="shrink-0">
+        <span
+          className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold tracking-widest uppercase"
+          style={{
+            background: `${phaseColor}18`,
+            color: phaseColor,
+            border: `1px solid ${phaseColor}35`,
+          }}
+        >
+          <PhaseIcon size={11} strokeWidth={2.5} />
+          {getPhaseName()}
+        </span>
       </div>
 
       {/* Timer circular */}
       <div className="relative w-full max-w-2xl flex-1 min-h-0 flex flex-col items-center justify-center">
         <div className="relative mx-auto w-72 h-72 shrink-0">
+          {/* Track */}
           <svg className="absolute inset-0 w-full h-full" viewBox="0 0 384 384">
-            <circle cx="192" cy="192" r="170" fill="none" stroke="rgba(255,255,255,0.1)" strokeWidth="20" />
+            <circle cx="192" cy="192" r="170" fill="none" stroke="rgba(255,255,255,0.07)" strokeWidth="18" />
           </svg>
+          {/* Ambient glow ring */}
+          {isRunning && (
+            <svg className="absolute inset-0 w-full h-full transform -rotate-90 animate-glow-pulse" viewBox="0 0 384 384">
+              <circle
+                cx="192" cy="192" r="170" fill="none"
+                stroke={phaseColor} strokeWidth="8" opacity="0.15"
+                strokeDasharray={`${2 * Math.PI * 170}`}
+                strokeDashoffset={`${2 * Math.PI * 170 * (1 - progress / 100)}`}
+              />
+            </svg>
+          )}
+          {/* Progress ring */}
           <svg className="absolute inset-0 w-full h-full transform -rotate-90" viewBox="0 0 384 384">
             <circle
               cx="192" cy="192" r="170" fill="none"
-              stroke={getPhaseColor()} strokeWidth="20"
+              stroke={phaseColor} strokeWidth="18"
               strokeDasharray={`${2 * Math.PI * 170}`}
               strokeDashoffset={`${2 * Math.PI * 170 * (1 - progress / 100)}`}
               strokeLinecap="round"
               className="transition-all duration-1000 ease-out"
-              style={{ filter: `drop-shadow(0 0 20px ${getPhaseColor()})` }}
+              style={{ filter: `drop-shadow(0 0 16px ${phaseColor}90)` }}
             />
           </svg>
-          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center">
-            <div className="text-5xl font-light text-white mb-1 font-mono tracking-wider">
+
+          {/* Center content */}
+          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-center w-48">
+            <div
+              className="text-6xl font-extralight font-mono tracking-tight leading-none mb-2"
+              style={{ color: isRunning ? phaseColor : 'var(--text-primary)' }}
+            >
               {formatTime(timeLeft)}
             </div>
-            <div className="text-white/60 text-base mb-0.5 truncate max-w-[200px] mx-auto">
-              {cycleName && currentPhase === 'focus' ? cycleName : getPhaseName()}
-            </div>
-            <div className="text-white/40 text-xs">{Math.round(progress)}% completo</div>
+            <div className="text-white/40 text-xs">{Math.round(progress)}%</div>
           </div>
         </div>
 
+        {/* Cycle name display (when running/paused) */}
+        {(isRunning || isPaused) && cycleName && (
+          <div className="mt-3 text-sm text-white/50 truncate max-w-xs text-center shrink-0">
+            {cycleName}
+          </div>
+        )}
+
         {/* Quick Stats */}
-        <div className="flex justify-center gap-6 shrink-0 mt-2">
+        <div className="flex items-center gap-8 shrink-0 mt-4">
           <div className="text-center">
-            <p className="text-white/60 text-xs">Sessões hoje</p>
+            <p className="text-2xs text-white/30 uppercase tracking-widest mb-0.5">Sessões</p>
             <p className="text-xl font-semibold text-white">{todayStats.sessions}</p>
           </div>
+          <div className="w-px h-8 bg-white/10" />
           <div className="text-center">
-            <p className="text-white/60 text-xs">Tempo total</p>
-            <p className="text-xl font-semibold text-white">{todayStats.minutes}min</p>
+            <p className="text-2xs text-white/30 uppercase tracking-widest mb-0.5">Minutos</p>
+            <p className="text-xl font-semibold text-white">{todayStats.minutes}</p>
           </div>
         </div>
       </div>
 
-      {/* Controles */}
-      <div className="flex flex-col items-center gap-3 shrink-0 mt-2">
-        {!isRunning && !isPaused && (
-          <div className="flex flex-col items-center gap-3">
-            {currentPhase === 'focus' && (
-              <input
-                type="text"
-                placeholder="O que você vai focar agora?"
-                value={cycleName}
-                onChange={(e) => setCycleName(e.target.value)}
-                ref={inputRef}
-                className="px-5 py-2.5 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:bg-white/20 transition-all w-72 text-center text-sm"
-                onKeyDown={(e) => { if (e.key === 'Enter' && cycleName.trim()) startFocus() }}
-              />
-            )}
-            <button
-              onClick={handleStartFocus}
-              className="bg-gradient-to-r from-red-500 to-pink-500 hover:from-red-600 hover:to-pink-600 text-white font-medium py-3 px-6 rounded-full transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg flex items-center gap-2 text-sm"
-            >
-              <span className="text-xl">▶</span>
-              Iniciar Foco
-            </button>
-          </div>
+      {/* Controls */}
+      <div className="flex flex-col items-center gap-3 shrink-0">
+        {/* Input (idle focus phase) */}
+        {!isRunning && !isPaused && currentPhase === 'focus' && (
+          <input
+            type="text"
+            placeholder="O que você vai focar agora?"
+            value={cycleName}
+            onChange={(e) => setCycleName(e.target.value)}
+            ref={inputRef}
+            className="px-5 py-2.5 rounded-full text-white placeholder-white/30 text-center text-sm w-72 transition-all"
+            style={{
+              background: 'var(--surface-3)',
+              border: '1px solid var(--border-subtle)',
+            }}
+            onFocus={(e) => { e.target.style.borderColor = 'var(--border-default)' }}
+            onBlur={(e) => { e.target.style.borderColor = 'var(--border-subtle)' }}
+            onKeyDown={(e) => { if (e.key === 'Enter' && cycleName.trim()) startFocus() }}
+          />
         )}
 
-        {isRunning && (
-          <div className="flex gap-3 items-center">
+        {/* Primary action buttons */}
+        <div className="flex items-center gap-3">
+          {/* Play / Pause / Resume */}
+          {!isRunning && !isPaused && (
             <button
-              onClick={pauseTimer}
-              className="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-medium py-3 px-6 rounded-full transition-all transform hover:scale-105 active:scale-95 shadow-lg flex items-center gap-2 text-sm"
+              onClick={handleStartFocus}
+              className="w-14 h-14 rounded-full flex items-center justify-center transition-all duration-150 hover:scale-105 active:scale-95 shadow-lg"
+              style={{
+                background: `${phaseColor}25`,
+                border: `1.5px solid ${phaseColor}55`,
+                color: phaseColor,
+                boxShadow: `0 0 20px ${phaseColor}20`,
+              }}
+              aria-label="Iniciar"
             >
-              <span className="text-xl">⏸</span> Pausar
+              <Play size={22} strokeWidth={2} fill="currentColor" />
             </button>
-            {currentPhase === 'focus' && (
+          )}
+
+          {isRunning && (
+            <>
               <button
-                onClick={completeTaskEarly}
-                className="bg-emerald-500/30 hover:bg-emerald-500/50 text-emerald-200 font-medium py-3 px-5 rounded-full transition-all transform hover:scale-105 border border-emerald-400/30 flex items-center gap-2 text-sm shadow-lg"
+                onClick={pauseTimer}
+                className="w-14 h-14 rounded-full flex items-center justify-center transition-all duration-150 hover:scale-105 active:scale-95"
+                style={{
+                  background: `${phaseColor}25`,
+                  border: `1.5px solid ${phaseColor}55`,
+                  color: phaseColor,
+                }}
+                aria-label="Pausar"
               >
-                <span className="text-lg">✓</span> Concluir
+                <Pause size={20} strokeWidth={2} />
               </button>
-            )}
-          </div>
-        )}
+              {currentPhase === 'focus' && (
+                <button
+                  onClick={completeTaskEarly}
+                  className="w-10 h-10 rounded-full flex items-center justify-center transition-all duration-150 hover:scale-105 active:scale-95"
+                  style={{
+                    background: 'rgba(16,185,129,0.15)',
+                    border: '1.5px solid rgba(16,185,129,0.35)',
+                    color: '#10b981',
+                  }}
+                  aria-label="Concluir antecipado"
+                  title="Concluir antecipado"
+                >
+                  <CheckCircle size={16} strokeWidth={2} />
+                </button>
+              )}
+            </>
+          )}
 
-        {isPaused && (
-          <div className="flex gap-3">
-            <button
-              onClick={resumeTimer}
-              className="bg-gradient-to-r from-green-500 to-emerald-500 hover:from-green-600 hover:to-emerald-600 text-white font-medium py-3 px-6 rounded-full transition-all transform hover:scale-105 shadow-lg flex items-center gap-2 text-sm"
-            >
-              <span className="text-xl">▶</span> Continuar
-            </button>
-            <button
-              onClick={resetTimer}
-              className="bg-red-500/20 hover:bg-red-500/30 text-red-300 font-medium py-3 px-5 rounded-full transition-all transform hover:scale-105 border border-red-300/20 flex items-center gap-2 text-sm"
-            >
-              <span className="text-xl">↺</span> Reiniciar
-            </button>
-          </div>
-        )}
+          {isPaused && (
+            <>
+              <button
+                onClick={resumeTimer}
+                className="w-14 h-14 rounded-full flex items-center justify-center transition-all duration-150 hover:scale-105 active:scale-95"
+                style={{
+                  background: `${phaseColor}25`,
+                  border: `1.5px solid ${phaseColor}55`,
+                  color: phaseColor,
+                }}
+                aria-label="Continuar"
+              >
+                <Play size={22} strokeWidth={2} fill="currentColor" />
+              </button>
+              <button
+                onClick={resetTimer}
+                className="w-10 h-10 rounded-full flex items-center justify-center transition-all duration-150 hover:scale-105 active:scale-95"
+                style={{
+                  background: 'rgba(248,113,113,0.12)',
+                  border: '1.5px solid rgba(248,113,113,0.25)',
+                  color: 'rgba(248,113,113,0.8)',
+                }}
+                aria-label="Reiniciar"
+                title="Reiniciar"
+              >
+                <RotateCcw size={15} strokeWidth={2} />
+              </button>
+            </>
+          )}
 
-        {isRunning && currentPhase === 'focus' && (
-          <div className="flex flex-wrap justify-center gap-2 mt-2">
+          {/* Note button (visible while running) */}
+          {isRunning && currentPhase === 'focus' && (
             <button
               onClick={() => setShowNoteModal(true)}
-              className="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg text-white/80 hover:text-white transition-all text-sm flex items-center gap-2"
+              className="w-10 h-10 rounded-full flex items-center justify-center transition-all duration-150 hover:scale-105"
+              style={{
+                background: 'var(--surface-3)',
+                border: '1px solid var(--border-subtle)',
+                color: 'var(--text-muted)',
+              }}
+              aria-label="Adicionar nota"
+              title="Adicionar nota"
             >
-              📝 Adicionar nota
+              <StickyNote size={15} strokeWidth={1.75} />
             </button>
-          </div>
-        )}
+          )}
+        </div>
       </div>
 
-      {/* Modal de nota rápida (durante o ciclo) */}
+      {/* Session note modal */}
       {showNoteModal && !showGitModal && (
-        <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-          <div className="bg-gray-800/90 backdrop-blur-sm rounded-2xl p-6 w-full max-w-md border border-white/20">
-            <div className="flex items-center justify-between mb-4">
-              <h2 className="text-lg font-bold text-white">📝 Nota da Sessão</h2>
-              <button onClick={() => setShowNoteModal(false)} className="text-white/60 hover:text-white">✕</button>
+        <div className="fixed inset-0 flex items-center justify-center z-50 p-4"
+             style={{ background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)' }}>
+          <div className="w-full max-w-md animate-slide-up"
+               style={{ background: '#16191f', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)' }}>
+            <div className="flex items-center justify-between px-5 pt-5 pb-4"
+                 style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+              <div className="flex items-center gap-2">
+                <div className="w-7 h-7 rounded-lg flex items-center justify-center"
+                     style={{ background: 'var(--surface-3)' }}>
+                  <StickyNote size={14} className="text-white/60" />
+                </div>
+                <span className="text-sm font-semibold text-white">Nota da sessão</span>
+              </div>
+              <button onClick={() => setShowNoteModal(false)}
+                      className="w-7 h-7 rounded-lg flex items-center justify-center hover:bg-white/10 transition-colors"
+                      style={{ color: 'var(--text-muted)' }}>
+                <X size={14} />
+              </button>
             </div>
-            <textarea
-              value={sessionNote}
-              onChange={(e) => setSessionNote(e.target.value)}
-              placeholder="O que você está trabalhando?"
-              rows={3}
-              className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none mb-4"
-            />
-            <div className="flex gap-2 flex-wrap mb-4">
-              {availableTags.slice(0, 8).map((tag) => (
-                <button
-                  key={tag}
-                  onClick={() => setSelectedTags((p) => p.includes(tag) ? p.filter((t) => t !== tag) : [...p, tag])}
-                  className={`px-3 py-1 rounded-full text-sm font-medium transition-colors ${selectedTags.includes(tag) ? 'bg-blue-600 text-white' : 'bg-white/10 text-white/60 hover:text-white'}`}
-                >
-                  #{tag}
-                </button>
-              ))}
+            <div className="p-5 space-y-4">
+              <textarea
+                value={sessionNote}
+                onChange={(e) => setSessionNote(e.target.value)}
+                placeholder="O que você está trabalhando?"
+                rows={3}
+                className="w-full px-3 py-2.5 text-sm text-white placeholder-white/30 rounded-xl resize-none transition-all"
+                style={{
+                  background: 'var(--surface-3)',
+                  border: '1px solid var(--border-subtle)',
+                }}
+              />
+              {availableTags.length > 0 && (
+                <div className="flex gap-2 flex-wrap">
+                  {availableTags.slice(0, 8).map((tag) => (
+                    <button
+                      key={tag}
+                      onClick={() => setSelectedTags((p) => p.includes(tag) ? p.filter((t) => t !== tag) : [...p, tag])}
+                      className="px-3 py-1 rounded-full text-xs font-medium transition-all"
+                      style={selectedTags.includes(tag) ? {
+                        background: 'rgba(99,102,241,0.25)',
+                        color: '#a5b4fc',
+                        border: '1px solid rgba(99,102,241,0.4)',
+                      } : {
+                        background: 'var(--surface-3)',
+                        color: 'var(--text-muted)',
+                        border: '1px solid var(--border-subtle)',
+                      }}
+                    >
+                      #{tag}
+                    </button>
+                  ))}
+                </div>
+              )}
+              <button
+                onClick={() => setShowNoteModal(false)}
+                className="w-full py-2.5 rounded-xl text-sm font-medium text-white transition-colors"
+                style={{ background: 'rgba(99,102,241,0.3)', border: '1px solid rgba(99,102,241,0.4)' }}
+              >
+                Salvar
+              </button>
             </div>
-            <button
-              onClick={() => setShowNoteModal(false)}
-              className="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
-            >
-              Salvar
-            </button>
           </div>
         </div>
       )}
 
-      {/* Git Modal (ao finalizar ciclo) */}
+      {/* Git Modal */}
       <GitDetectModal
         isOpen={showGitModal}
         onClose={() => {
diff --git a/src/services/dbService.js b/src/services/dbService.js
index bb86a24..ae7e870 100644
--- a/src/services/dbService.js
+++ b/src/services/dbService.js
@@ -279,6 +279,29 @@ const cycles = {
       productivity_score: score,
     }
   },
+
+  async statsMonthly() {
+    const db = await getDb()
+    const rows = await db.select(
+      `SELECT strftime('%Y-W%W', created_at) as week_label,
+              MIN(date(created_at)) as week_start,
+              phase, duration
+       FROM cycles
+       WHERE created_at >= datetime('now', '-28 days')
+       ORDER BY week_start ASC`
+    )
+    const byWeek = {}
+    for (const row of rows) {
+      if (!byWeek[row.week_label]) {
+        byWeek[row.week_label] = { week: row.week_label, week_start: row.week_start, total_focus_minutes: 0, sessions: 0 }
+      }
+      if (row.phase === 'focus') {
+        byWeek[row.week_label].total_focus_minutes += row.duration || 0
+        byWeek[row.week_label].sessions += 1
+      }
+    }
+    return Object.values(byWeek)
+  },
 }
 
 // ========== TAGS ==========
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d2dfeea..195dc3e 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,24 +2,77 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Scrollbar global */
+/* ─── Design Tokens ─── */
+:root {
+  --surface-0: #0d0f12;
+  --surface-1: #13161b;
+  --surface-2: rgba(255,255,255,0.04);
+  --surface-3: rgba(255,255,255,0.08);
+  --border-subtle: rgba(255,255,255,0.07);
+  --border-default: rgba(255,255,255,0.12);
+  --text-primary: #f1f5f9;
+  --text-secondary: rgba(255,255,255,0.55);
+  --text-muted: rgba(255,255,255,0.28);
+  --phase-focus: #f43f5e;
+  --phase-short: #14b8a6;
+  --phase-long: #38bdf8;
+  --radius-sm: 8px;
+  --radius-md: 12px;
+  --radius-lg: 16px;
+  --radius-xl: 20px;
+}
+
+/* ─── Utility Classes ─── */
+@layer components {
+  .card {
+    background: var(--surface-2);
+    border: 1px solid var(--border-subtle);
+    border-radius: var(--radius-lg);
+    backdrop-filter: blur(12px);
+  }
+  .card-hover {
+    transition: background 150ms ease, border-color 150ms ease;
+  }
+  .card-hover:hover {
+    background: var(--surface-3);
+    border-color: var(--border-default);
+  }
+  .skeleton {
+    background: linear-gradient(
+      90deg,
+      rgba(255,255,255,0.04) 25%,
+      rgba(255,255,255,0.08) 50%,
+      rgba(255,255,255,0.04) 75%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s infinite;
+    border-radius: var(--radius-sm);
+  }
+}
+
+/* ─── Scrollbar ─── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
-::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 3px; }
-::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3); }
+::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); border-radius: 3px; }
+::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 3px; }
+::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
 
 .scrollbar-hide::-webkit-scrollbar { display: none; }
 .scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
 
-/* Seleção de texto */
+/* ─── Text selection ─── */
 ::selection { background: rgba(59, 130, 246, 0.3); }
 
-/* Animações */
+/* ─── Animations ─── */
 @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
 @keyframes slideIn { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes slideUp { from { transform: translateY(6px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
+@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
+@keyframes glowPulse { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
 
-.animate-fade-in { animation: fadeIn 0.3s ease-in-out; }
-.animate-slide-in { animation: slideIn 0.3s ease-out; }
+.animate-fade-in { animation: fadeIn 200ms ease-out; }
+.animate-slide-in { animation: slideIn 200ms ease-out; }
+.animate-slide-up { animation: slideUp 200ms ease-out; }
+.animate-glow-pulse { animation: glowPulse 2s ease-in-out infinite; }
 
-/* Remover outline padrão em inputs */
+/* ─── Input reset ─── */
 input:focus, textarea:focus, select:focus { outline: none; }
diff --git a/src/utils/notificationUtils.js b/src/utils/notificationUtils.js
index f82e36f..5d127d5 100644
--- a/src/utils/notificationUtils.js
+++ b/src/utils/notificationUtils.js
@@ -48,10 +48,11 @@ class NotificationManager {
 
   showToast(title, message = '', type = 'info', duration = 4000) {
     this.createToastContainer()
-    const toast = document.createElement('div')
     const typeColors = { info: '#3B82F6', success: '#10B981', warning: '#F59E0B', error: '#EF4444' }
-    const icons = { success: '✅', warning: '⚠️', error: '❌', info: '🎯' }
+    const icons     = { success: '✅', warning: '⚠️', error: '❌', info: '🎯' }
 
+    // Build DOM manually — never use innerHTML with dynamic values (XSS risk)
+    const toast = document.createElement('div')
     toast.style.cssText = `
       background: rgba(30, 41, 59, 0.95); backdrop-filter: blur(12px);
       border: 1px solid rgba(255,255,255,0.2); border-left: 4px solid ${typeColors[type] || typeColors.info};
@@ -60,16 +61,39 @@ class NotificationManager {
       pointer-events: auto; transform: translateX(100%);
       transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
     `
-    toast.innerHTML = `
-      <div style="display:flex;align-items:flex-start;gap:12px">
-        <div style="font-size:20px;line-height:1;margin-top:2px">${icons[type] || icons.info}</div>
-        <div style="flex:1">
-          <div style="font-weight:600;font-size:14px;margin-bottom:4px">${title}</div>
-          ${message ? `<div style="font-size:13px;opacity:.8;line-height:1.4">${message}</div>` : ''}
-        </div>
-        <button onclick="this.parentElement.parentElement.remove()" style="background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:18px;line-height:1;padding:0">×</button>
-      </div>
-    `
+
+    const row = document.createElement('div')
+    row.style.cssText = 'display:flex;align-items:flex-start;gap:12px'
+
+    const iconEl = document.createElement('div')
+    iconEl.style.cssText = 'font-size:20px;line-height:1;margin-top:2px'
+    iconEl.textContent = icons[type] || icons.info
+
+    const body = document.createElement('div')
+    body.style.cssText = 'flex:1'
+
+    const titleEl = document.createElement('div')
+    titleEl.style.cssText = 'font-weight:600;font-size:14px;margin-bottom:4px'
+    titleEl.textContent = title
+
+    body.appendChild(titleEl)
+
+    if (message) {
+      const msgEl = document.createElement('div')
+      msgEl.style.cssText = 'font-size:13px;opacity:.8;line-height:1.4'
+      msgEl.textContent = message
+      body.appendChild(msgEl)
+    }
+
+    const closeBtn = document.createElement('button')
+    closeBtn.style.cssText = 'background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-size:18px;line-height:1;padding:0'
+    closeBtn.textContent = '×'
+    closeBtn.addEventListener('click', () => toast.remove())
+
+    row.appendChild(iconEl)
+    row.appendChild(body)
+    row.appendChild(closeBtn)
+    toast.appendChild(row)
 
     this.toastContainer.appendChild(toast)
     setTimeout(() => { toast.style.transform = 'translateX(0)' }, 10)
diff --git a/tailwind.config.js b/tailwind.config.js
index 9f6fb9f..a204ede 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -4,13 +4,24 @@ export default {
   theme: {
     extend: {
       colors: {
-        gray: {
-          750: '#2d374850',
-        },
+        gray: { 750: '#2d374850' },
+      },
+      spacing: {
+        '18': '4.5rem',
+        '22': '5.5rem',
+      },
+      fontSize: {
+        '2xs': ['0.625rem', { lineHeight: '1rem' }],
+      },
+      fontFamily: {
+        mono: ['"JetBrains Mono"', '"Fira Code"', 'Menlo', 'monospace'],
       },
       animation: {
-        'fade-in': 'fadeIn 0.3s ease-in-out',
-        'slide-in': 'slideIn 0.3s ease-out',
+        'fade-in': 'fadeIn 200ms ease-out',
+        'slide-in': 'slideIn 200ms ease-out',
+        'slide-up': 'slideUp 200ms ease-out',
+        'glow-pulse': 'glowPulse 2s ease-in-out infinite',
+        'shimmer': 'shimmer 1.5s infinite',
       },
       keyframes: {
         fadeIn: {
@@ -21,6 +32,18 @@ export default {
           '0%': { transform: 'translateY(-10px)', opacity: '0' },
           '100%': { transform: 'translateY(0)', opacity: '1' },
         },
+        slideUp: {
+          '0%': { transform: 'translateY(6px)', opacity: '0' },
+          '100%': { transform: 'translateY(0)', opacity: '1' },
+        },
+        glowPulse: {
+          '0%,100%': { opacity: '0.6' },
+          '50%': { opacity: '1' },
+        },
+        shimmer: {
+          '0%': { backgroundPosition: '200% 0' },
+          '100%': { backgroundPosition: '-200% 0' },
+        },
       },
     },
   },