diff --git a/pages/ManageCourses.tsx b/pages/ManageCourses.tsx
index 74dd5cc..5eaef41 100644
--- a/pages/ManageCourses.tsx
+++ b/pages/ManageCourses.tsx
@@ -395,13 +395,23 @@ const CourseModal: React.FC<{
       alert("Informe o nome do arquivo para download.");
       return;
     }
+    if (!newAttUrl.trim()) {
+      alert('Informe a URL do material.');
+      return;
+    }
+    try {
+      new URL(newAttUrl.trim());
+    } catch {
+      alert('Informe uma URL válida para o material.');
+      return;
+    }
 
     const att: Attachment = {
       id: `att-${Date.now()}`,
       name: newAttName.trim(),
       type: newAttType,
-      url: newAttUrl.trim() || '#',
-      size: newAttSize.trim() || '1.5 MB',
+      url: newAttUrl.trim(),
+      size: newAttSize.trim() || undefined,
       description: newAttDesc.trim()
     };
 
@@ -679,12 +689,21 @@ const CourseModal: React.FC<{
                 </select>
               </div>
 
+              <div className="flex gap-2">
+                <input
+                  type="url"
+                  value={newAttUrl}
+                  onChange={(e) => setNewAttUrl(e.target.value)}
+                  placeholder="URL do material (https://...)"
+                  className="min-w-0 flex-1 bg-white/5 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white focus:outline-none"
+                />
+              </div>
               <div className="flex gap-2">
                 <input 
                   type="text" 
                   value={newAttSize}
                   onChange={(e) => setNewAttSize(e.target.value)}
-                  placeholder="Ex.: 2,4 MB"
+                  placeholder="Tamanho (opcional)"
                   className="w-28 bg-white/5 border border-white/10 rounded-lg px-2.5 py-1.5 text-xs text-white focus:outline-none"
                 />
                 <input 
diff --git a/pages/MaterialsPage.tsx b/pages/MaterialsPage.tsx
index d9f5c63..e00dd78 100644
--- a/pages/MaterialsPage.tsx
+++ b/pages/MaterialsPage.tsx
@@ -1,948 +1,72 @@
-import React, { useState, useEffect, useMemo, useRef } from 'react';
-import { 
-  Folder, 
-  FileSpreadsheet, 
-  FileText, 
-  FileArchive, 
-  FileCode, 
-  Link as LinkIcon,
-  Search, 
-  Download, 
-  ChevronRight, 
-  ArrowLeft,
-  Sparkles,
-  Copy,
-  BookOpen,
-  Undo2,
-  Eye,
-  LayoutGrid,
-  List,
-  HardDrive,
-  X,
-  Play
-} from 'lucide-react';
+import React, { useEffect, useMemo, useState } from 'react';
+import { ArrowLeft, BookOpen, Download, ExternalLink, Filter, FolderOpen, LayoutGrid, List, Loader2, Play, Search, X } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
-import { Course, Attachment, AttachmentType } from '../types';
+import { Attachment, AttachmentType, Course } from '../types';
 import { getCourses } from '../services/db';
+import { getAttachmentBadge, getAttachmentIcon } from '../components/MaterialCard';
 import { useToast } from '../context/ToastContext';
 
-interface MaterialsPageProps {
-  onPlayCourse: (course: Course) => void;
-}
+interface MaterialsPageProps { onPlayCourse: (course: Course) => void; }
+type Material = { id: string; attachment: Attachment; course: Course; lessonTitle?: string; };
+type SortOption = 'recent' | 'name' | 'type';
 
-interface MaterialFileItem {
-  id: string;
-  name: string;
-  type: string;
-  formatType: AttachmentType;
-  size: string;
-  modified: string;
-  course: Course;
-  lessonTitle?: string;
-  description?: string;
-  url: string;
-}
+const filterTypes: Array<{ value: 'all' | AttachmentType; label: string }> = [
+  { value: 'all', label: 'Todos os formatos' }, { value: 'pdf', label: 'PDF' }, { value: 'spreadsheet', label: 'Planilha' }, { value: 'doc', label: 'Documento' }, { value: 'zip', label: 'Arquivo compactado' }, { value: 'image', label: 'Imagem' }, { value: 'link', label: 'Link' },
+];
+
+const formatDate = (date?: string) => date ? new Intl.DateTimeFormat('pt-BR', { dateStyle: 'medium' }).format(new Date(date)) : 'Data não informada';
+const materialDate = (material: Material) => {
+  const value = material.attachment.createdAt ? new Date(material.attachment.createdAt).getTime() : 0;
+  return Number.isNaN(value) ? 0 : value;
+};
 
 export const MaterialsPage: React.FC<MaterialsPageProps> = ({ onPlayCourse }) => {
-  const [courses, setCourses] = useState<Course[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [searchTerm, setSearchTerm] = useState('');
-  
-  // Navigation & View Mode State
-  const [activeFolder, setActiveFolder] = useState<string>('downloads');
-  const [viewMode, setViewMode] = useState<'list' | 'grid'>('grid');
-  const [selectedItem, setSelectedItem] = useState<MaterialFileItem | null>(null);
-  const [previewItem, setPreviewItem] = useState<MaterialFileItem | null>(null);
-  
-  // Filter Chip State (All, XLSX, PDF, ZIP, DOC)
-  const [typeFilter, setTypeFilter] = useState<string>('all');
-
-  // Table Sort State
-  const [sortBy, setSortBy] = useState<'name' | 'type' | 'size' | 'modified'>('name');
-  const [sortAsc, setSortAsc] = useState<boolean>(true);
-
-  // Context Menu State
-  const [contextMenu, setContextMenu] = useState<{
-    visible: boolean;
-    x: number;
-    y: number;
-    item: MaterialFileItem | null;
-  }>({ visible: false, x: 0, y: 0, item: null });
-
-  const [downloadingId, setDownloadingId] = useState<string | null>(null);
-
   const navigate = useNavigate();
-  const { showToast, showDownloadToast } = useToast();
-  const contextMenuRef = useRef<HTMLDivElement>(null);
+  const { showDownloadToast, showToast } = useToast();
+  const [courses, setCourses] = useState<Course[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [query, setQuery] = useState('');
+  const [selectedTrail, setSelectedTrail] = useState('all');
+  const [selectedCourse, setSelectedCourse] = useState('all');
+  const [selectedType, setSelectedType] = useState<'all' | AttachmentType>('all');
+  const [sort, setSort] = useState<SortOption>('recent');
+  const [view, setView] = useState<'grid' | 'list'>('grid');
 
   useEffect(() => {
     window.scrollTo(0, 0);
-    getCourses().then(data => {
-      setCourses(data);
-      setLoading(false);
-    });
-
-    const handleClickOutside = (e: MouseEvent) => {
-      if (contextMenuRef.current && !contextMenuRef.current.contains(e.target as Node)) {
-        setContextMenu(prev => ({ ...prev, visible: false }));
-      }
-    };
-    window.addEventListener('click', handleClickOutside);
-    return () => window.removeEventListener('click', handleClickOutside);
-  }, []);
-
-  // Format type helper
-  const getFileExtension = (att: Attachment) => {
-    if (att.type === 'spreadsheet') return 'XLSX';
-    if (att.type === 'pdf') return 'PDF';
-    if (att.type === 'zip') return 'ZIP';
-    if (att.type === 'doc') return 'DOC';
-    if (att.type === 'link') return 'JSON';
-    return 'TXT';
-  };
-
-  // Compile file list
-  const allFiles: MaterialFileItem[] = useMemo(() => {
-    const list: MaterialFileItem[] = [];
-    courses.forEach((course, cIdx) => {
-      if (course.attachments && course.attachments.length > 0) {
-        course.attachments.forEach((att, aIdx) => {
-          const fileId = `f-c-${course.id}-${att.id || aIdx}`;
-          list.push({
-            id: fileId,
-            name: att.name,
-            type: getFileExtension(att),
-            formatType: att.type,
-            size: att.size || `${(aIdx + 1) * 14 + 120} KB`,
-            modified: `2026. 08. 1${(aIdx % 8) + 1}`,
-            course,
-            description: att.description,
-            url: att.url || '#'
-          });
-        });
-      }
-
-      if (course.lessons) {
-        course.lessons.forEach((lesson, lIdx) => {
-          if (lesson.attachments && lesson.attachments.length > 0) {
-            lesson.attachments.forEach((att, laIdx) => {
-              const fileId = `f-l-${course.id}-${lesson.id}-${att.id || laIdx}`;
-              list.push({
-                id: fileId,
-                name: att.name,
-                type: getFileExtension(att),
-                formatType: att.type,
-                size: att.size || `${(lIdx + 2) * 22 + 210} KB`,
-                modified: `2026. 08. 1${(lIdx % 9) + 1}`,
-                course,
-                lessonTitle: lesson.title,
-                description: att.description,
-                url: att.url || '#'
-              });
-            });
-          }
-        });
-      }
-    });
-    return list;
-  }, [courses]);
-
-  // Set default selected item if none selected
-  useEffect(() => {
-    if (allFiles.length > 0 && !selectedItem) {
-      setSelectedItem(allFiles[0]);
-    }
-  }, [allFiles, selectedItem]);
-
-  const categories = useMemo(() => {
-    return Array.from(new Set(courses.map(c => c.category)));
-  }, [courses]);
-
-  // Filtered and Sorted Files
-  const displayedFiles = useMemo(() => {
-    return allFiles.filter(file => {
-      // Type Chip filter
-      if (typeFilter !== 'all') {
-        if (typeFilter === 'xlsx' && file.type !== 'XLSX') return false;
-        if (typeFilter === 'pdf' && file.type !== 'PDF') return false;
-        if (typeFilter === 'zip' && file.type !== 'ZIP') return false;
-        if (typeFilter === 'doc' && file.type !== 'DOC' && file.type !== 'TXT') return false;
-      }
-
-      // Search Query
-      if (searchTerm.trim()) {
-        const query = searchTerm.toLowerCase();
-        const matchesName = file.name.toLowerCase().includes(query);
-        const matchesType = file.type.toLowerCase().includes(query);
-        const matchesCourse = file.course.title.toLowerCase().includes(query);
-        const matchesDesc = file.description?.toLowerCase().includes(query);
-        if (!matchesName && !matchesType && !matchesCourse && !matchesDesc) {
-          return false;
-        }
-      }
-
-      // Folder navigation filter
-      if (activeFolder === 'downloads' || activeFolder === 'my-files' || activeFolder === 'recent') {
-        return true;
-      }
-      if (activeFolder === 'zip') {
-        return file.type === 'ZIP';
-      }
-      if (activeFolder === 'pdf') {
-        return file.type === 'PDF';
-      }
-      if (activeFolder === 'xlsx') {
-        return file.type === 'XLSX';
-      }
-      if (categories.includes(activeFolder)) {
-        return file.course.category === activeFolder;
-      }
-      return true;
-    }).sort((a, b) => {
-      let cmp = 0;
-      if (sortBy === 'name') cmp = a.name.localeCompare(b.name);
-      if (sortBy === 'type') cmp = a.type.localeCompare(b.type);
-      if (sortBy === 'size') cmp = a.size.localeCompare(b.size);
-      if (sortBy === 'modified') cmp = a.modified.localeCompare(b.modified);
-      return sortAsc ? cmp : -cmp;
-    });
-  }, [allFiles, searchTerm, activeFolder, typeFilter, sortBy, sortAsc, categories]);
-
-  const handleSort = (column: 'name' | 'type' | 'size' | 'modified') => {
-    if (sortBy === column) {
-      setSortAsc(!sortAsc);
-    } else {
-      setSortBy(column);
-      setSortAsc(true);
-    }
-  };
-
-  const handleDownload = (item: MaterialFileItem) => {
-    setDownloadingId(item.id);
-    setContextMenu(prev => ({ ...prev, visible: false }));
-    setTimeout(() => {
-      setDownloadingId(null);
-      showDownloadToast(item.name, item.size);
-      const link = document.createElement('a');
-      link.href = item.url;
-      link.download = item.name;
-      link.target = '_blank';
-      link.rel = 'noreferrer';
-      document.body.appendChild(link);
-      link.click();
-      document.body.removeChild(link);
-    }, 400);
-  };
-
-  const handleContextMenu = (e: React.MouseEvent, item: MaterialFileItem) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setSelectedItem(item);
-    setContextMenu({
-      visible: true,
-      x: Math.min(e.clientX, window.innerWidth - 240),
-      y: Math.min(e.clientY, window.innerHeight - 280),
-      item
-    });
-  };
-
-  // Color Coded File Icon Component with Dark Theme Styling
-  const renderFileIcon = (type: string, sizeClass: string = "w-5 h-5") => {
-    switch (type.toUpperCase()) {
-      case 'XLSX':
-      case 'SPREADSHEET':
-        return <FileSpreadsheet className={`${sizeClass} text-emerald-400 shrink-0`} />;
-      case 'PDF':
-        return <FileText className={`${sizeClass} text-rose-400 shrink-0`} />;
-      case 'ZIP':
-      case 'RAR':
-        return <FileArchive className={`${sizeClass} text-amber-400 shrink-0`} />;
-      case 'DOC':
-      case 'MD':
-      case 'TXT':
-        return <FileCode className={`${sizeClass} text-blue-400 shrink-0`} />;
-      default:
-        return <LinkIcon className={`${sizeClass} text-orange-400 shrink-0`} />;
-    }
-  };
-
-  return (
-    <div className="min-h-screen bg-black text-white selection:bg-orange-500/30 selection:text-white pt-24 pb-20 font-sans">
-      
-      {/* Ambient background glow matching Home */}
-      <div className="fixed inset-0 pointer-events-none overflow-hidden z-0">
-        <div className="absolute top-10 left-1/2 -translate-x-1/2 w-[700px] h-[400px] bg-orange-500/5 rounded-full blur-[140px]" />
-        <div className="absolute top-1/3 -right-20 w-[450px] h-[450px] bg-amber-500/5 rounded-full blur-[160px]" />
-      </div>
-
-      <div className="relative z-10 max-w-[1440px] mx-auto px-6 md:px-12 space-y-8">
-        
-        {/* Breadcrumb + Header Hero */}
-        <div className="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-white/10">
-          <div className="space-y-3">
-            {/* Breadcrumb */}
-            <div className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-gray-400">
-              <button 
-                onClick={() => navigate('/')} 
-                className="hover:text-orange-400 transition-colors flex items-center gap-1.5"
-              >
-                <ArrowLeft className="w-3.5 h-3.5" />
-                <span>Início</span>
-              </button>
-              <span className="text-gray-600">/</span>
-              <span className="text-orange-400">Central de Recursos</span>
-            </div>
-
-            {/* Title */}
-            <h1 className="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-white tracking-tight leading-tight">
-              Biblioteca de <span className="text-orange-500">Materiais</span>
-            </h1>
-            <p className="text-sm sm:text-base text-gray-300 max-w-2xl font-normal leading-relaxed">
-              Explore e faça o download de todas as planilhas de ROI, modelos de criativos, relatórios e arquivos complementares das aulas em um ambiente integrado.
-            </p>
-          </div>
-
-          {/* Quick Search & Switcher Controls */}
-          <div className="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
-            {/* Search Input */}
-            <div className="relative min-w-[260px] sm:min-w-[320px]">
-              <Search className="w-4 h-4 text-gray-400 absolute left-4 top-1/2 -translate-y-1/2 pointer-events-none" />
-              <input
-                type="text"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                placeholder="Pesquisar material, planilha ou aula..."
-                className="w-full bg-zinc-900/90 rounded-[980px] pl-11 pr-10 py-2.5 text-sm text-white placeholder:text-gray-400 font-normal focus:outline-none focus:ring-2 focus:ring-orange-500/30 transition-all"
-              />
-              {searchTerm && (
-                <button
-                  onClick={() => setSearchTerm('')}
-                  className="absolute right-3.5 top-1/2 -translate-y-1/2 p-1 text-gray-400 hover:text-white transition-colors"
-                >
-                  <X className="w-4 h-4" />
-                </button>
-              )}
-            </div>
-
-            {/* View Switcher: Grid vs List */}
-            <div className="flex items-center bg-zinc-900/90 p-1 rounded-[980px] shrink-0 self-end sm:self-auto">
-              <button
-                onClick={() => setViewMode('grid')}
-                className={`flex items-center gap-1.5 px-4 py-2 rounded-[980px] text-xs font-bold uppercase tracking-wider transition-all ${
-                  viewMode === 'grid'
-                    ? 'bg-orange-500 text-white shadow-lg shadow-orange-500/25'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-                title="Visualização em Grade de Cards"
-              >
-                <LayoutGrid className="w-3.5 h-3.5" />
-                <span className="hidden sm:inline">Grade</span>
-              </button>
-              <button
-                onClick={() => setViewMode('list')}
-                className={`flex items-center gap-1.5 px-4 py-2 rounded-[980px] text-xs font-bold uppercase tracking-wider transition-all ${
-                  viewMode === 'list'
-                    ? 'bg-orange-500 text-white shadow-lg shadow-orange-500/25'
-                    : 'text-gray-400 hover:text-white'
-                }`}
-                title="Visualização em Lista de Tabela"
-              >
-                <List className="w-3.5 h-3.5" />
-                <span className="hidden sm:inline">Lista</span>
-              </button>
-            </div>
-          </div>
-        </div>
-
-        {/* Main Content Explorer Area */}
-        <div className="flex flex-col lg:flex-row items-start gap-6">
-          
-          {/* Left Sidebar: Drive Structure */}
-          <aside className="w-full lg:w-64 bg-zinc-950/80 rounded-2xl p-4 shadow-xl shrink-0 select-none">
-            
-            <div className="flex items-center gap-2.5 px-3 py-2 text-xs font-bold uppercase tracking-wider text-orange-400 pb-3 mb-2">
-              <HardDrive className="w-4 h-4" />
-              <span>Navegação do Drive</span>
-            </div>
-
-            <div className="space-y-6 text-sm font-medium">
-              
-              {/* Primary Folder */}
-              <div className="space-y-1">
-                <button
-                  onClick={() => { setActiveFolder('downloads'); setTypeFilter('all'); setSelectedItem(null); }}
-                  className={`w-full flex items-center justify-between px-3.5 py-2.5 rounded-xl transition-all ${
-                    activeFolder === 'downloads' && typeFilter === 'all'
-                      ? 'bg-orange-500/20 text-orange-400 font-bold'
-                      : 'text-gray-300 hover:bg-white/5 hover:text-white'
-                  }`}
-                >
-                  <div className="flex items-center gap-3">
-                    <HardDrive className="w-4 h-4 text-orange-400" />
-                    <span>Todos os Arquivos</span>
-                  </div>
-                  <span className="text-xs font-mono px-2 py-0.5 rounded-[980px] bg-white/10 text-gray-300 font-semibold">
-                    {allFiles.length}
-                  </span>
-                </button>
-              </div>
-
-              {/* Trilhas & Categorias */}
-              <div>
-                <div className="text-xs font-bold uppercase tracking-wider text-gray-400 px-3 pb-2 flex items-center justify-between">
-                  <span>Trilhas de Cursos</span>
-                </div>
-                
-                <div className="space-y-1">
-                  {categories.map(cat => {
-                    const count = allFiles.filter(f => f.course.category === cat).length;
-                    const isActive = activeFolder === cat;
-                    return (
-                      <button
-                        key={cat}
-                        onClick={() => { setActiveFolder(cat); setTypeFilter('all'); setSelectedItem(null); }}
-                        className={`w-full flex items-center justify-between px-3.5 py-2 rounded-xl text-xs transition-all ${
-                          isActive
-                            ? 'bg-orange-500/20 text-orange-400 font-bold'
-                            : 'text-gray-400 hover:bg-white/5 hover:text-white'
-                        }`}
-                      >
-                        <div className="flex items-center gap-2.5 min-w-0 pr-1">
-                          <Folder className={`w-3.5 h-3.5 shrink-0 ${isActive ? 'text-orange-400 fill-orange-400/20' : 'text-gray-500'}`} />
-                          <span className="truncate">{cat}</span>
-                        </div>
-                        <span className="text-xs text-gray-500 font-mono">{count}</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              </div>
-
-              {/* Formatos Rápidos */}
-              <div>
-                <div className="text-xs font-bold uppercase tracking-wider text-gray-400 px-3 pb-2">
-                  Formatos de Download
-                </div>
-                <div className="space-y-1 text-xs">
-                  <button
-                    onClick={() => { setTypeFilter('xlsx'); setActiveFolder('downloads'); setSelectedItem(null); }}
-                    className={`w-full flex items-center gap-2.5 px-3.5 py-2 rounded-xl transition-all ${
-                      typeFilter === 'xlsx' ? 'bg-emerald-500/20 text-emerald-400 font-semibold' : 'text-gray-400 hover:bg-white/5 hover:text-white'
-                    }`}
-                  >
-                    <FileSpreadsheet className="w-3.5 h-3.5 text-emerald-400" />
-                    <span>Planilhas Excel (.xlsx)</span>
-                  </button>
-
-                  <button
-                    onClick={() => { setTypeFilter('pdf'); setActiveFolder('downloads'); setSelectedItem(null); }}
-                    className={`w-full flex items-center gap-2.5 px-3.5 py-2 rounded-xl transition-all ${
-                      typeFilter === 'pdf' ? 'bg-rose-500/20 text-rose-400 font-semibold' : 'text-gray-400 hover:bg-white/5 hover:text-white'
-                    }`}
-                  >
-                    <FileText className="w-3.5 h-3.5 text-rose-400" />
-                    <span>Documentos PDF (.pdf)</span>
-                  </button>
-
-                  <button
-                    onClick={() => { setTypeFilter('zip'); setActiveFolder('downloads'); setSelectedItem(null); }}
-                    className={`w-full flex items-center gap-2.5 px-3.5 py-2 rounded-xl transition-all ${
-                      typeFilter === 'zip' ? 'bg-amber-500/20 text-amber-400 font-semibold' : 'text-gray-400 hover:bg-white/5 hover:text-white'
-                    }`}
-                  >
-                    <FileArchive className="w-3.5 h-3.5 text-amber-400" />
-                    <span>Pacotes Compactados (.zip)</span>
-                  </button>
-                </div>
-              </div>
-
-            </div>
-
-            {/* Storage Gauge */}
-            <div className="mt-8 pt-4 border-t border-white/5 text-xs">
-              <div className="flex items-center gap-2 text-gray-300 font-semibold mb-2">
-                <HardDrive className="w-4 h-4 text-orange-400" />
-                <span>Espaço de Arquivos</span>
-              </div>
-              <div className="w-full h-1.5 bg-white/10 rounded-[980px] overflow-hidden mb-2">
-                <div className="h-full w-1/3 bg-gradient-to-r from-orange-500 to-amber-500 rounded-[980px]"></div>
-              </div>
-              <p className="text-[11px] text-gray-400 leading-tight">
-                Acesso Ilimitado de Alta Velocidade para Alunos Compor HUB.
-              </p>
-            </div>
-
-          </aside>
-
-          {/* Main Files Area */}
-          <main className="flex-1 min-w-0 bg-zinc-950/80 rounded-2xl shadow-2xl overflow-hidden flex flex-col min-h-[700px]">
-            
-            {/* Explorer Header */}
-            <div className="p-5 sm:p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
-              <div className="flex items-center gap-3">
-                <h2 className="text-xl sm:text-2xl font-bold text-white capitalize flex items-center gap-2">
-                  <span>
-                    {activeFolder === 'downloads' 
-                      ? (typeFilter !== 'all' ? `Filtro: ${typeFilter.toUpperCase()}` : 'Todos os Materiais') 
-                      : activeFolder}
-                  </span>
-                </h2>
-                <span className="text-xs font-mono px-3 py-1 rounded-[980px] bg-white/10 text-orange-400 font-bold">
-                  {displayedFiles.length} {displayedFiles.length === 1 ? 'item' : 'itens'}
-                </span>
-              </div>
-
-              {/* Action Buttons */}
-              <div className="flex items-center gap-2">
-                {(searchTerm || typeFilter !== 'all' || activeFolder !== 'downloads') && (
-                  <button
-                    onClick={() => {
-                      setSearchTerm('');
-                      setTypeFilter('all');
-                      setActiveFolder('downloads');
-                      showToast('Filtros redefinidos.', 'info');
-                    }}
-                    className="px-4 py-2 rounded-[980px] text-xs font-semibold bg-white/5 hover:bg-white/10 text-gray-300 hover:text-white flex items-center gap-1.5 transition-colors"
-                  >
-                    <Undo2 className="w-3.5 h-3.5 text-orange-400" />
-                    <span>Limpar Filtros</span>
-                  </button>
-                )}
-
-                <button
-                  onClick={() => {
-                    showToast('Materiais organizados por relevância.', 'success');
-                    setSortBy('type');
-                    setSortAsc(true);
-                  }}
-                  className="px-4 py-2 rounded-[980px] text-xs font-bold bg-orange-500 hover:bg-orange-600 active:scale-95 text-white flex items-center gap-1.5 shadow-lg shadow-orange-500/25 transition-all"
-                >
-                  <Sparkles className="w-3.5 h-3.5" />
-                  <span>Ordenar por Tipo</span>
-                </button>
-              </div>
-            </div>
-
-            {/* Files Content: Grid or List */}
-            <div className="flex-1 overflow-y-auto">
-              
-              {/* EMPTY STATE */}
-              {displayedFiles.length === 0 ? (
-                <div className="py-32 text-center text-gray-400 px-6">
-                  <div className="w-16 h-16 rounded-full bg-white/5 flex items-center justify-center mx-auto mb-4 text-orange-400">
-                    <Folder className="w-8 h-8 opacity-60" />
-                  </div>
-                  <h3 className="text-lg font-bold text-white mb-1">Nenhum material encontrado</h3>
-                  <p className="text-sm text-gray-400 max-w-md mx-auto mb-6">
-                    Não encontramos arquivos correspondentes aos filtros selecionados. Tente ajustar o termo de pesquisa ou limpar os filtros.
-                  </p>
-                  <button
-                    onClick={() => {
-                      setSearchTerm('');
-                      setTypeFilter('all');
-                      setActiveFolder('downloads');
-                    }}
-                    className="px-6 py-2.5 rounded-[980px] bg-orange-500 hover:bg-orange-600 text-white font-bold text-xs uppercase tracking-wider transition-all shadow-lg shadow-orange-500/25"
-                  >
-                    Ver Todos os Arquivos
-                  </button>
-                </div>
-              ) : viewMode === 'grid' ? (
-                /* GRID VIEW */
-                <div className="p-6 space-y-8">
-                  
-                  {/* Category Fast-Folders (When in All or Category View) */}
-                  {activeFolder === 'downloads' && typeFilter === 'all' && !searchTerm && (
-                    <div>
-                      <h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3.5 flex items-center gap-2">
-                        <Folder className="w-4 h-4 text-orange-400" />
-                        <span>Pastas por Módulo</span>
-                      </h3>
-                      <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-3.5">
-                        {categories.map(cat => {
-                          const count = allFiles.filter(f => f.course.category === cat).length;
-                          return (
-                            <div
-                              key={cat}
-                              onClick={() => setActiveFolder(cat)}
-                              className="bg-zinc-900/60 hover:bg-zinc-900 rounded-xl p-4 cursor-pointer hover:shadow-xl transition-all flex items-center justify-between group"
-                            >
-                              <div className="flex items-center gap-3 min-w-0 pr-2">
-                                <div className="w-10 h-10 rounded-xl bg-orange-500/15 flex items-center justify-center text-orange-400 shrink-0 group-hover:scale-110 transition-transform">
-                                  <Folder className="w-5 h-5 fill-orange-500/20" />
-                                </div>
-                                <div className="min-w-0">
-                                  <h4 className="text-xs font-bold text-white truncate group-hover:text-orange-400 transition-colors">
-                                    {cat}
-                                  </h4>
-                                  <p className="text-[11px] text-gray-400 font-mono mt-0.5">{count} arquivos</p>
-                                </div>
-                              </div>
-                              <ChevronRight className="w-4 h-4 text-gray-500 group-hover:text-orange-400 group-hover:translate-x-1 transition-all shrink-0" />
-                            </div>
-                          );
-                        })}
-                      </div>
-                    </div>
-                  )}
-
-                  {/* Material Cards Grid */}
-                  <div>
-                    <h3 className="text-xs font-bold uppercase tracking-wider text-gray-400 mb-3.5 flex items-center gap-2">
-                      <HardDrive className="w-4 h-4 text-orange-400" />
-                      <span>Arquivos para Download</span>
-                    </h3>
-
-                    <div className="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4">
-                      {displayedFiles.map(file => {
-                        const isSelected = selectedItem?.id === file.id;
-                        const isDownloading = downloadingId === file.id;
-
-                        return (
-                          <div
-                            key={file.id}
-                            onClick={() => setSelectedItem(file)}
-                            onContextMenu={(e) => handleContextMenu(e, file)}
-                            className={`bg-zinc-900/60 hover:bg-zinc-900 rounded-xl overflow-hidden cursor-pointer transition-all hover:shadow-2xl flex flex-col justify-between group ${
-                              isSelected 
-                                ? 'ring-2 ring-orange-500 bg-zinc-900' 
-                                : ''
-                            }`}
-                          >
-                            {/* Card Header with Icon */}
-                            <div className="p-4 bg-black/20 flex items-center justify-between">
-                              <div className="flex items-center gap-3">
-                                {renderFileIcon(file.type, "w-6 h-6")}
-                                <div>
-                                  <span className="text-[11px] font-bold font-mono uppercase px-2 py-0.5 rounded bg-white/10 text-gray-300">
-                                    {file.type}
-                                  </span>
-                                  <span className="text-[11px] font-mono text-gray-500 ml-2">
-                                    {file.size}
-                                  </span>
-                                </div>
-                              </div>
-
-                              <button
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setPreviewItem(file);
-                                }}
-                                className="p-1.5 rounded-full hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
-                                title="Pré-visualizar detalhes"
-                              >
-                                <Eye className="w-4 h-4" />
-                              </button>
-                            </div>
-
-                            {/* Card Body */}
-                            <div className="p-4 flex-1 flex flex-col justify-between space-y-4">
-                              <div>
-                                <h4 className="text-sm font-bold text-white line-clamp-2 group-hover:text-orange-400 transition-colors leading-snug mb-1.5">
-                                  {file.name}
-                                </h4>
-                                <p className="text-xs text-gray-400 line-clamp-1 font-medium flex items-center gap-1.5">
-                                  <BookOpen className="w-3.5 h-3.5 text-orange-400 shrink-0" />
-                                  <span className="truncate">{file.course.title}</span>
-                                </p>
-                                {file.lessonTitle && (
-                                  <p className="text-[11px] text-gray-500 line-clamp-1 mt-1 font-normal">
-                                    Aula: {file.lessonTitle}
-                                  </p>
-                                )}
-                              </div>
-
-                              {/* Card Footer Actions */}
-                              <div className="pt-3 flex items-center justify-between gap-2">
-                                <button
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    onPlayCourse(file.course);
-                                  }}
-                                  className="text-xs text-gray-400 hover:text-orange-400 flex items-center gap-1 transition-colors truncate"
-                                  title="Assistir aula associada"
-                                >
-                                  <Play className="w-3 h-3 text-orange-400 shrink-0" />
-                                  <span className="truncate">Ver Aula</span>
-                                </button>
-
-                                <button
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    handleDownload(file);
-                                  }}
-                                  disabled={isDownloading}
-                                  className="px-4 py-2 rounded-[980px] bg-orange-500 hover:bg-orange-600 active:scale-95 text-white text-xs font-bold flex items-center gap-1.5 shadow-md shadow-orange-500/20 transition-all shrink-0"
-                                >
-                                  <Download className={`w-3.5 h-3.5 ${isDownloading ? 'animate-bounce' : ''}`} />
-                                  <span>{isDownloading ? 'Baixando...' : 'Baixar'}</span>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        );
-                      })}
-                    </div>
-                  </div>
-
-                </div>
-              ) : (
-                /* LIST VIEW (TABLE) */
-                <table className="w-full text-left border-collapse">
-                  <thead>
-                    <tr className="bg-black/60 text-xs font-bold uppercase tracking-wider text-gray-400 select-none sticky top-0 z-10 backdrop-blur-md">
-                      
-                      <th 
-                        onClick={() => handleSort('name')}
-                        className="py-4 px-6 cursor-pointer hover:text-white transition-colors"
-                      >
-                        <div className="flex items-center gap-1.5">
-                          <span>Nome do Arquivo</span>
-                          {sortBy === 'name' && (
-                            <span className="text-orange-400 font-bold">{sortAsc ? '↑' : '↓'}</span>
-                          )}
-                        </div>
-                      </th>
-
-                      <th className="py-4 px-6 hidden md:table-cell">
-                        <span>Curso / Trilha</span>
-                      </th>
-
-                      <th className="py-4 px-6 text-center w-36">
-                        <span>Ações</span>
-                      </th>
-
-                    </tr>
-                  </thead>
-
-                  <tbody className="divide-y divide-white/5 text-sm font-medium">
-                    {displayedFiles.map((file) => {
-                      const isSelected = selectedItem?.id === file.id;
-
-                      return (
-                        <tr
-                          key={file.id}
-                          onClick={() => setSelectedItem(file)}
-                          onContextMenu={(e) => handleContextMenu(e, file)}
-                          className={`group transition-all cursor-pointer select-none ${
-                            isSelected
-                              ? 'bg-orange-500/10'
-                              : 'hover:bg-white/[0.03]'
-                          }`}
-                        >
-                          {/* Name column */}
-                          <td className="py-4 px-6">
-                            <div className="flex items-center gap-3.5">
-                              {renderFileIcon(file.type, "w-6 h-6")}
-                              
-                              <div className="min-w-0">
-                                <div className="flex items-center gap-2">
-                                  <span className={`font-bold transition-colors truncate text-sm ${
-                                    isSelected ? 'text-orange-400' : 'text-white group-hover:text-orange-400'
-                                  }`}>
-                                    {file.name}
-                                  </span>
-                                </div>
-
-                                {file.lessonTitle && (
-                                  <p className="text-xs text-gray-400 truncate mt-0.5 font-normal">
-                                    Aula: {file.lessonTitle}
-                                  </p>
-                                )}
-                              </div>
-                            </div>
-                          </td>
-
-                          {/* Course / Owner */}
-                          <td className="py-4 px-6 hidden md:table-cell text-gray-300">
-                            <span className="inline-flex items-center gap-1.5 bg-zinc-900 px-3 py-1 rounded-[980px] text-xs font-semibold text-gray-300">
-                              <BookOpen className="w-3.5 h-3.5 text-orange-400 shrink-0" />
-                              <span className="truncate max-w-[200px]">{file.course.title}</span>
-                            </span>
-                          </td>
-
-                          {/* Actions */}
-                          <td className="py-4 px-6 text-center">
-                            <div className="flex items-center justify-center gap-1.5">
-                              <button
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  handleDownload(file);
-                                }}
-                                className="p-2 rounded-[980px] bg-orange-500/10 hover:bg-orange-500 text-orange-400 hover:text-white transition-all shadow-sm"
-                                title="Baixar arquivo"
-                              >
-                                <Download className="w-4 h-4" />
-                              </button>
-
-                              <button
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  setPreviewItem(file);
-                                }}
-                                className="p-2 rounded-[980px] bg-white/5 hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
-                                title="Ver detalhes"
-                              >
-                                <Eye className="w-4 h-4" />
-                              </button>
-
-                              <button
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  onPlayCourse(file.course);
-                                }}
-                                className="p-2 rounded-[980px] bg-white/5 hover:bg-white/10 text-gray-400 hover:text-orange-400 transition-colors"
-                                title="Assistir aula"
-                              >
-                                <Play className="w-4 h-4" />
-                              </button>
-                            </div>
-                          </td>
-
-                        </tr>
-                      );
-                    })}
-                  </tbody>
-                </table>
-              )}
-
-            </div>
-
-            {/* Table Footer */}
-            <div className="p-4 px-6 bg-black/40 flex items-center justify-between text-xs text-gray-400">
-              <span className="font-semibold">{displayedFiles.length} item(s) listados</span>
-              <span className="hidden sm:inline">Dica: Clique com o botão direito para o menu de ações rápido</span>
-            </div>
-
-          </main>
-
-        </div>
-
-      </div>
-
-      {/* QUICK PREVIEW MODAL */}
-      {previewItem && (
-        <div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-md flex items-center justify-center p-4 animate-in fade-in duration-200">
-          <div className="bg-zinc-950 border border-white/15 rounded-[12px] max-w-lg w-full p-6 shadow-2xl space-y-6 animate-in zoom-in-95 duration-200">
-            <div className="flex items-center justify-between pb-4 border-b border-white/10">
-              <div className="flex items-center gap-3">
-                {renderFileIcon(previewItem.type)}
-                <div>
-                  <h3 className="text-base font-bold text-white truncate max-w-xs">{previewItem.name}</h3>
-                  <p className="text-xs text-gray-400 font-mono">{previewItem.size} • {previewItem.type}</p>
-                </div>
-              </div>
-              <button
-                onClick={() => setPreviewItem(null)}
-                className="p-1.5 rounded-full hover:bg-white/10 text-gray-400 hover:text-white"
-              >
-                <X className="w-5 h-5" />
-              </button>
-            </div>
-
-            <div className="space-y-3 text-sm">
-              <div className="p-4 rounded-[8px] bg-zinc-900 border border-white/10 space-y-2">
-                <div className="flex justify-between text-xs">
-                  <span className="text-gray-400">Trilha:</span>
-                  <span className="text-white font-semibold">{previewItem.course.title}</span>
-                </div>
-                {previewItem.lessonTitle && (
-                  <div className="flex justify-between text-xs">
-                    <span className="text-gray-400">Aula:</span>
-                    <span className="text-white font-semibold">{previewItem.lessonTitle}</span>
-                  </div>
-                )}
-                <div className="flex justify-between text-xs">
-                  <span className="text-gray-400">Instrutor:</span>
-                  <span className="text-orange-400 font-semibold">{previewItem.course.instructor.name}</span>
-                </div>
-              </div>
-
-              {previewItem.description && (
-                <div className="text-xs text-gray-300 leading-relaxed bg-white/5 p-3 rounded-[8px] border border-white/10">
-                  {previewItem.description}
-                </div>
-              )}
-            </div>
-
-            <div className="flex items-center justify-end gap-3 pt-2">
-              <button
-                onClick={() => {
-                  onPlayCourse(previewItem.course);
-                  setPreviewItem(null);
-                }}
-                className="px-5 py-2.5 rounded-[980px] bg-white/10 hover:bg-white/15 text-white text-xs font-bold flex items-center gap-2 transition-colors"
-              >
-                <Play className="w-4 h-4 text-orange-400" />
-                <span>Assistir Aula</span>
-              </button>
-
-              <button
-                onClick={() => {
-                  handleDownload(previewItem);
-                  setPreviewItem(null);
-                }}
-                className="px-6 py-2.5 rounded-[980px] bg-orange-500 hover:bg-orange-600 text-white text-xs font-bold flex items-center gap-2 shadow-lg shadow-orange-500/25 transition-all"
-              >
-                <Download className="w-4 h-4" />
-                <span>Baixar Material</span>
-              </button>
-            </div>
-          </div>
-        </div>
-      )}
-
-      {/* Context Menu Popup */}
-      {contextMenu.visible && contextMenu.item && (
-        <div
-          ref={contextMenuRef}
-          style={{ top: contextMenu.y, left: contextMenu.x }}
-          className="fixed z-50 w-60 bg-zinc-950 border border-white/15 rounded-[12px] shadow-2xl py-2 text-xs text-gray-200 animate-in fade-in zoom-in-95 duration-100 select-none"
-        >
-          
-          <button
-            onClick={() => handleDownload(contextMenu.item!)}
-            className="w-full text-left px-4 py-2.5 hover:bg-orange-500 hover:text-white flex items-center gap-2.5 transition-colors font-bold text-orange-400"
-          >
-            <Download className="w-4 h-4" />
-            <span>Fazer Download</span>
-          </button>
-
-          <button
-            onClick={() => {
-              onPlayCourse(contextMenu.item!.course);
-              setContextMenu(prev => ({ ...prev, visible: false }));
-            }}
-            className="w-full text-left px-4 py-2.5 hover:bg-white/10 flex items-center gap-2.5 transition-colors font-medium text-white"
-          >
-            <Play className="w-4 h-4 text-orange-400" />
-            <span>Assistir Aula do Curso</span>
-          </button>
-
-          <button
-            onClick={() => {
-              navigator.clipboard.writeText(window.location.origin + contextMenu.item!.url);
-              showToast('Link do arquivo copiado!', 'info');
-              setContextMenu(prev => ({ ...prev, visible: false }));
-            }}
-            className="w-full text-left px-4 py-2.5 hover:bg-white/10 flex items-center gap-2.5 transition-colors font-medium text-gray-300"
-          >
-            <Copy className="w-4 h-4 text-gray-400" />
-            <span>Copiar Link do Arquivo</span>
-          </button>
-
-          <div className="h-px bg-white/10 my-1"></div>
-
-          <button
-            onClick={() => setContextMenu(prev => ({ ...prev, visible: false }))}
-            className="w-full text-left px-4 py-2 hover:bg-white/10 text-gray-400 hover:text-white transition-colors"
-          >
-            <span>Fechar</span>
-          </button>
-
-        </div>
-      )}
-
-    </div>
-  );
+    getCourses().then(setCourses).catch(() => showToast('Não foi possível carregar os materiais.', 'error')).finally(() => setIsLoading(false));
+  }, [showToast]);
+
+  const materials = useMemo<Material[]>(() => courses.flatMap((course) => [
+    ...(course.attachments || []).map((attachment) => ({ id: `course-${course.id}-${attachment.id}`, attachment, course })),
+    ...course.lessons.flatMap((lesson) => (lesson.attachments || []).map((attachment) => ({ id: `lesson-${course.id}-${lesson.id}-${attachment.id}`, attachment, course, lessonTitle: lesson.title }))),
+  ]), [courses]);
+  const trails = useMemo<string[]>(() => Array.from(new Set<string>(courses.map((course) => course.category))).filter(Boolean).sort((a, b) => a.localeCompare(b, 'pt-BR')), [courses]);
+  const courseOptions = useMemo(() => courses.filter((course) => selectedTrail === 'all' || course.category === selectedTrail).sort((a, b) => a.title.localeCompare(b.title, 'pt-BR')), [courses, selectedTrail]);
+  const filteredMaterials = useMemo(() => materials.filter((material) => {
+    const normalized = query.trim().toLocaleLowerCase('pt-BR');
+    const searchMatches = !normalized || [material.attachment.name, material.attachment.description, material.course.title, material.course.category, material.lessonTitle].some((value) => value?.toLocaleLowerCase('pt-BR').includes(normalized));
+    return searchMatches && (selectedTrail === 'all' || material.course.category === selectedTrail) && (selectedCourse === 'all' || material.course.id === selectedCourse) && (selectedType === 'all' || material.attachment.type === selectedType);
+  }).sort((left, right) => {
+    if (sort === 'name') return left.attachment.name.localeCompare(right.attachment.name, 'pt-BR');
+    if (sort === 'type') return left.attachment.type.localeCompare(right.attachment.type, 'pt-BR') || left.attachment.name.localeCompare(right.attachment.name, 'pt-BR');
+    return materialDate(right) - materialDate(left) || left.attachment.name.localeCompare(right.attachment.name, 'pt-BR');
+  }), [materials, query, selectedTrail, selectedCourse, selectedType, sort]);
+  const hasFilters = Boolean(query) || selectedTrail !== 'all' || selectedCourse !== 'all' || selectedType !== 'all';
+  const clearFilters = () => { setQuery(''); setSelectedTrail('all'); setSelectedCourse('all'); setSelectedType('all'); };
+  const openMaterial = (material: Material) => material.attachment.type === 'link' ? showToast(`Abrindo “${material.attachment.name}”.`, 'info') : showDownloadToast(material.attachment.name, material.attachment.size);
+
+  return <main className="min-h-screen bg-black pb-20 pt-24 text-white"><div className="mx-auto max-w-7xl px-5 sm:px-8">
+    <header className="border-b border-white/10 pb-7"><button onClick={() => navigate('/')} className="mb-5 inline-flex items-center gap-1.5 text-sm text-gray-400 transition hover:text-orange-300"><ArrowLeft className="h-4 w-4" /> Início</button><div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between"><div><p className="text-xs font-bold uppercase tracking-[0.18em] text-orange-400">Central de recursos</p><h1 className="mt-2 text-3xl font-bold tracking-tight sm:text-4xl">Biblioteca de materiais</h1><p className="mt-3 max-w-2xl text-sm leading-6 text-gray-400">Materiais disponibilizados pelos instrutores nos cursos e aulas da plataforma.</p></div><div className="rounded-2xl border border-white/10 bg-zinc-950 px-5 py-4 text-right"><p className="text-2xl font-bold text-white">{materials.length}</p><p className="text-xs text-gray-500">{materials.length === 1 ? 'material disponível' : 'materiais disponíveis'}</p></div></div></header>
+
+    <section className="mt-6 rounded-2xl border border-white/10 bg-zinc-950/80 p-4 sm:p-5"><div className="grid gap-3 lg:grid-cols-[minmax(0,1.5fr)_repeat(3,minmax(0,.7fr))]"><label className="relative block"><Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-500" /><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Buscar por material, curso ou aula" className="w-full rounded-xl border border-white/10 bg-zinc-900 py-3 pl-10 pr-10 text-sm text-white outline-none transition focus:border-orange-500/70 focus:ring-2 focus:ring-orange-500/15" />{query && <button onClick={() => setQuery('')} className="absolute right-3 top-1/2 -translate-y-1/2 rounded p-1 text-gray-400 hover:text-white" aria-label="Limpar busca"><X className="h-4 w-4" /></button>}</label><FilterSelect value={selectedTrail} onChange={(value) => { setSelectedTrail(value); setSelectedCourse('all'); }} label="Trilha" options={[{ value: 'all', label: 'Todas as trilhas' }, ...trails.map((trail) => ({ value: trail, label: trail }))]} /><FilterSelect value={selectedCourse} onChange={setSelectedCourse} label="Curso" options={[{ value: 'all', label: 'Todos os cursos' }, ...courseOptions.map((course) => ({ value: course.id, label: course.title }))]} /><FilterSelect value={selectedType} onChange={(value) => setSelectedType(value as 'all' | AttachmentType)} label="Formato" options={filterTypes} /></div><div className="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-white/5 pt-4"><div className="flex items-center gap-2 text-xs text-gray-500"><Filter className="h-3.5 w-3.5 text-orange-400" /> {filteredMaterials.length} {filteredMaterials.length === 1 ? 'resultado' : 'resultados'}</div><div className="flex items-center gap-2">{hasFilters && <button onClick={clearFilters} className="rounded-lg px-3 py-2 text-xs font-semibold text-gray-300 transition hover:bg-white/10 hover:text-white">Limpar filtros</button>}<label className="sr-only" htmlFor="materials-sort">Ordenar por</label><select id="materials-sort" value={sort} onChange={(event) => setSort(event.target.value as SortOption)} className="rounded-lg border border-white/10 bg-zinc-900 px-3 py-2 text-xs font-semibold text-white outline-none"><option value="recent">Mais recentes</option><option value="name">Nome</option><option value="type">Formato</option></select><div className="flex rounded-lg border border-white/10 bg-zinc-900 p-1"><button onClick={() => setView('grid')} aria-label="Visualização em grade" className={`rounded p-1.5 ${view === 'grid' ? 'bg-orange-500 text-white' : 'text-gray-400 hover:text-white'}`}><LayoutGrid className="h-4 w-4" /></button><button onClick={() => setView('list')} aria-label="Visualização em lista" className={`rounded p-1.5 ${view === 'list' ? 'bg-orange-500 text-white' : 'text-gray-400 hover:text-white'}`}><List className="h-4 w-4" /></button></div></div></div></section>
+
+    <section className="mt-6">{isLoading ? <div className="flex min-h-72 items-center justify-center"><Loader2 className="h-7 w-7 animate-spin text-orange-400" /></div> : filteredMaterials.length === 0 ? <EmptyState hasMaterials={materials.length > 0} onClear={clearFilters} /> : view === 'grid' ? <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">{filteredMaterials.map((material) => <MaterialGridCard key={material.id} material={material} onOpen={openMaterial} onCourse={onPlayCourse} />)}</div> : <div className="overflow-hidden rounded-2xl border border-white/10 bg-zinc-950/80"><div className="hidden grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_10rem_8rem] gap-4 border-b border-white/10 px-5 py-3 text-xs font-semibold uppercase tracking-wider text-gray-500 md:grid"><span>Material</span><span>Curso e aula</span><span>Adicionado em</span><span className="text-right">Ações</span></div>{filteredMaterials.map((material) => <MaterialListRow key={material.id} material={material} onOpen={openMaterial} onCourse={onPlayCourse} />)}</div>}</section>
+  </div></main>;
 };
+
+const FilterSelect: React.FC<{ value: string; label: string; options: Array<{ value: string; label: string }>; onChange: (value: string) => void }> = ({ value, label, options, onChange }) => <label className="block"><span className="sr-only">{label}</span><select value={value} onChange={(event) => onChange(event.target.value)} className="w-full rounded-xl border border-white/10 bg-zinc-900 px-3 py-3 text-sm text-white outline-none transition focus:border-orange-500/70"><option value="" disabled>{label}</option>{options.map((option) => <option key={option.value} value={option.value}>{option.label}</option>)}</select></label>;
+const EmptyState: React.FC<{ hasMaterials: boolean; onClear: () => void }> = ({ hasMaterials, onClear }) => <div className="flex min-h-80 flex-col items-center justify-center rounded-2xl border border-dashed border-white/15 bg-zinc-950/50 px-6 text-center"><div className="flex h-14 w-14 items-center justify-center rounded-2xl bg-orange-500/10"><FolderOpen className="h-7 w-7 text-orange-400" /></div><h2 className="mt-5 text-lg font-bold text-white">{hasMaterials ? 'Nenhum material corresponde aos filtros' : 'A biblioteca ainda não tem materiais'}</h2><p className="mt-2 max-w-md text-sm leading-6 text-gray-500">{hasMaterials ? 'Tente alterar a busca ou os filtros selecionados.' : 'Quando um instrutor adicionar materiais a um curso ou aula, eles aparecerão aqui.'}</p>{hasMaterials && <button onClick={onClear} className="mt-5 rounded-xl bg-orange-500 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-orange-600">Limpar filtros</button>}</div>;
+const MaterialMeta: React.FC<{ material: Material }> = ({ material }) => <div className="min-w-0"><p className="truncate text-xs font-semibold text-orange-300">{material.course.category}</p><p className="mt-1 flex items-center gap-1.5 truncate text-xs text-gray-400"><BookOpen className="h-3.5 w-3.5 shrink-0" />{material.course.title}</p>{material.lessonTitle && <p className="mt-1 truncate text-xs text-gray-500">Aula: {material.lessonTitle}</p>}</div>;
+const MaterialGridCard: React.FC<{ material: Material; onOpen: (material: Material) => void; onCourse: (course: Course) => void }> = ({ material, onOpen, onCourse }) => { const { attachment } = material; const badge = getAttachmentBadge(attachment.type); const isLink = attachment.type === 'link'; return <article className="flex min-h-64 flex-col rounded-2xl border border-white/10 bg-zinc-950/80 p-5 transition hover:border-orange-500/35 hover:bg-zinc-900/80"><div className="flex items-start justify-between gap-4"><div className="rounded-xl bg-white/5 p-3">{getAttachmentIcon(attachment.type)}</div><span className={`rounded-full px-2.5 py-1 text-[10px] font-bold uppercase tracking-wider ${badge.bg}`}>{badge.label}</span></div><div className="mt-5"><h2 className="line-clamp-2 text-base font-bold text-white">{attachment.name}</h2>{attachment.description && <p className="mt-2 line-clamp-2 text-sm leading-5 text-gray-400">{attachment.description}</p>}</div><div className="mt-5 border-t border-white/10 pt-4"><MaterialMeta material={material} /><div className="mt-4 flex items-center justify-between gap-3 text-xs text-gray-500"><span>{attachment.size || 'Tamanho não informado'}</span><span>{formatDate(attachment.createdAt)}</span></div></div><div className="mt-5 flex items-center gap-2"><button onClick={() => onCourse(material.course)} className="inline-flex items-center gap-1.5 rounded-lg border border-white/10 px-3 py-2 text-xs font-semibold text-gray-300 transition hover:bg-white/10 hover:text-white"><Play className="h-3.5 w-3.5 text-orange-400" /> Abrir curso</button><a href={attachment.url} target="_blank" rel="noreferrer" onClick={() => onOpen(material)} className="ml-auto inline-flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-2 text-xs font-semibold text-white transition hover:bg-orange-600">{isLink ? <ExternalLink className="h-3.5 w-3.5" /> : <Download className="h-3.5 w-3.5" />}{isLink ? 'Abrir' : 'Baixar'}</a></div></article>; };
+const MaterialListRow: React.FC<{ material: Material; onOpen: (material: Material) => void; onCourse: (course: Course) => void }> = ({ material, onOpen, onCourse }) => { const { attachment } = material; const isLink = attachment.type === 'link'; return <article className="grid gap-4 border-b border-white/5 px-5 py-4 last:border-0 md:grid-cols-[minmax(0,1.5fr)_minmax(0,1fr)_10rem_8rem] md:items-center"><div className="flex min-w-0 items-center gap-3"><div className="shrink-0">{getAttachmentIcon(attachment.type)}</div><div className="min-w-0"><p className="truncate text-sm font-semibold text-white">{attachment.name}</p><p className="mt-1 text-xs text-gray-500">{attachment.size || 'Tamanho não informado'}</p></div></div><MaterialMeta material={material} /><p className="text-xs text-gray-500">{formatDate(attachment.createdAt)}</p><div className="flex items-center gap-2 md:justify-end"><button onClick={() => onCourse(material.course)} className="rounded-lg p-2 text-gray-400 transition hover:bg-white/10 hover:text-orange-300" title="Abrir curso"><Play className="h-4 w-4" /></button><a href={attachment.url} target="_blank" rel="noreferrer" onClick={() => onOpen(material)} className="inline-flex items-center gap-1.5 rounded-lg bg-orange-500 px-3 py-2 text-xs font-semibold text-white transition hover:bg-orange-600">{isLink ? <ExternalLink className="h-3.5 w-3.5" /> : <Download className="h-3.5 w-3.5" />}{isLink ? 'Abrir' : 'Baixar'}</a></div></article>; };
diff --git a/server/src/routes/courses.ts b/server/src/routes/courses.ts
index 235f9b5..657bde1 100644
--- a/server/src/routes/courses.ts
+++ b/server/src/routes/courses.ts
@@ -49,6 +49,8 @@ export const courseSelect = (publicOnly = false, includeUnreadyMedia = false) =>
               'name', a.name,
               'kind', a.kind,
               'url', a.url,
+              'sizeBytes', a.size_bytes,
+              'createdAt', a.created_at,
               'description', a.description,
               'accessLevel', a.access_level
             ) order by a.created_at)
@@ -81,6 +83,8 @@ export const courseSelect = (publicOnly = false, includeUnreadyMedia = false) =>
         'name', a.name,
         'kind', a.kind,
         'url', a.url,
+        'sizeBytes', a.size_bytes,
+        'createdAt', a.created_at,
         'description', a.description,
         'accessLevel', a.access_level
       ) order by a.created_at)
diff --git a/server/src/routes/manage-courses.ts b/server/src/routes/manage-courses.ts
index a21cca4..e66f11b 100644
--- a/server/src/routes/manage-courses.ts
+++ b/server/src/routes/manage-courses.ts
@@ -20,6 +20,7 @@ const assetSchema = z.object({
   name: z.string().trim().min(1).max(255),
   kind: z.enum(['document', 'spreadsheet', 'archive', 'image', 'link']),
   url: z.string().url(),
+  sizeBytes: z.number().int().nonnegative().nullable().optional(),
   description: z.string().max(2000).default(''),
   accessLevel: z.enum(['public', 'enrolled']).default('enrolled'),
 });
@@ -85,9 +86,9 @@ async function uniqueSlug(client: PoolClient, requestedSlug: string | undefined,
 async function insertAssets(client: PoolClient, parent: { courseId?: string; lessonId?: string }, assets: CourseInput['assets']) {
   for (const asset of assets) {
     await client.query(
-      `insert into assets (course_id, lesson_id, name, kind, url, description, access_level)
-       values ($1, $2, $3, $4, $5, $6, $7)`,
-      [parent.courseId ?? null, parent.lessonId ?? null, asset.name, asset.kind, asset.url, asset.description, asset.accessLevel],
+      `insert into assets (course_id, lesson_id, name, kind, url, size_bytes, description, access_level)
+       values ($1, $2, $3, $4, $5, $6, $7, $8)`,
+      [parent.courseId ?? null, parent.lessonId ?? null, asset.name, asset.kind, asset.url, asset.sizeBytes ?? null, asset.description, asset.accessLevel],
     );
   }
 }
diff --git a/services/db.ts b/services/db.ts
index 2c8665c..96bb492 100644
--- a/services/db.ts
+++ b/services/db.ts
@@ -8,6 +8,8 @@ type ApiAsset = {
   name: string;
   kind: 'document' | 'spreadsheet' | 'archive' | 'image' | 'link';
   url: string;
+  sizeBytes: number | null;
+  createdAt: string;
   description: string;
 };
 
@@ -88,9 +90,19 @@ const toAttachment = (asset: ApiAsset): Attachment => ({
   name: asset.name,
   type: toAttachmentType(asset.kind),
   url: asset.url,
+  size: asset.sizeBytes === null ? undefined : formatBytes(asset.sizeBytes),
+  sizeBytes: asset.sizeBytes ?? undefined,
+  createdAt: asset.createdAt,
   description: asset.description,
 });
 
+const formatBytes = (bytes: number) => {
+  if (bytes < 1024) return `${bytes} B`;
+  const units = ['KB', 'MB', 'GB'];
+  const index = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)) - 1, units.length - 1);
+  return `${new Intl.NumberFormat('pt-BR', { maximumFractionDigits: 1 }).format(bytes / 1024 ** (index + 1))} ${units[index]}`;
+};
+
 const toDuration = (seconds: number | null) => {
   if (!seconds || seconds < 1) return '—';
   const totalSeconds = Math.round(seconds);
@@ -166,10 +178,19 @@ const toAssetPayload = (attachment: Attachment) => ({
   name: attachment.name,
   kind: toAssetKind(attachment.type),
   url: attachment.url,
+  sizeBytes: attachment.sizeBytes ?? parseSizeBytes(attachment.size),
   description: attachment.description || '',
   accessLevel: 'enrolled' as const,
 });
 
+const parseSizeBytes = (value?: string) => {
+  if (!value) return null;
+  const match = value.trim().replace(',', '.').match(/^(\d+(?:\.\d+)?)\s*(B|KB|MB|GB)$/i);
+  if (!match) return null;
+  const units: Record<string, number> = { B: 1, KB: 1024, MB: 1024 ** 2, GB: 1024 ** 3 };
+  return Math.round(Number(match[1]) * units[match[2].toUpperCase()]);
+};
+
 const toCoursePayload = (course: Course) => ({
   title: course.title,
   description: course.description,
diff --git a/types.ts b/types.ts
index 7dfdbc4..57a93e3 100644
--- a/types.ts
+++ b/types.ts
@@ -8,6 +8,8 @@ export interface Attachment {
   type: AttachmentType;
   url: string;
   size?: string; // e.g. "4.2 MB"
+  sizeBytes?: number;
+  createdAt?: string;
   description?: string;
   lessonId?: string; // Associated lesson or global course asset
   downloadCount?: number;