diff --git a/app/Services/Admin/AcademicClasses/MaterialService.php b/app/Services/Admin/AcademicClasses/MaterialService.php
index 39ccc06..0c2057f 100644
--- a/app/Services/Admin/AcademicClasses/MaterialService.php
+++ b/app/Services/Admin/AcademicClasses/MaterialService.php
@@ -20,8 +20,10 @@ public function __construct(
     public function paginated(User $user, int $perPage = 25, string $search = '', ?int $courseClassId = null): LengthAwarePaginator
     {
         return Material::query()
-            ->select(['id', 'course_class_id', 'title', 'description', 'meeting_number'])
-            ->with('courseClass.course:id,code,name')
+            ->with([
+                'courseClass.course:id,code,name',
+                'courseClass.lecturer.user.profile',
+            ])
             ->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
             ->when($courseClassId, fn ($q) => $q->where('course_class_id', $courseClassId))
             ->when($user->hasRole(UserRole::Dosen->value), fn ($q) => $q->whereHas('courseClass', fn ($q) => $q->where('lecturer_id', $user->lecturer?->id)))
@@ -32,7 +34,7 @@ public function paginated(User $user, int $perPage = 25, string $search = '', ?i
                 });
             }))
             ->latest()
-            ->paginate($perPage);
+            ->paginate($perPage, ['id', 'course_class_id', 'title', 'description', 'meeting_number', 'created_at']);
     }
 
     public function create(array $data, ?UploadedFile $file): Material
diff --git a/resources/js/pages/admin/academic-classes/materials/card.tsx b/resources/js/pages/admin/academic-classes/materials/card.tsx
index 5cb91d2..05b063e 100644
--- a/resources/js/pages/admin/academic-classes/materials/card.tsx
+++ b/resources/js/pages/admin/academic-classes/materials/card.tsx
@@ -1,6 +1,23 @@
-import { Pencil, Trash2 } from 'lucide-react';
+import { format } from 'date-fns';
+import {
+    BookOpen,
+    CalendarDays,
+    FileIcon,
+    FileX,
+    Pencil,
+    Trash2,
+    User,
+} from 'lucide-react';
 import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
 import { RowActions } from '@/components/row-actions';
+import {
+    Attachment,
+    AttachmentActions,
+    AttachmentContent,
+    AttachmentDescription,
+    AttachmentMedia,
+    AttachmentTitle,
+} from '@/components/ui/attachment';
 import { Badge } from '@/components/ui/badge';
 import type { Material } from '@/types/material';
 
@@ -16,60 +33,100 @@ export function createMaterialCard(params: CreateCardParams) {
 
     return function MaterialCard(material: Material) {
         const courseClass = material.course_class;
+        const lecturerName =
+            courseClass?.lecturer?.user?.profile?.full_name ?? null;
 
         return (
-            <div className="flex flex-col gap-3">
+            <div className="flex flex-col gap-4">
                 <div className="flex items-start justify-between gap-2">
-                    <div className="flex flex-wrap items-center gap-2">
-                        {material.meeting_number && (
-                            <Badge variant="secondary">
-                                Pertemuan {material.meeting_number}
-                            </Badge>
-                        )}
+                    <div className="flex items-start gap-3">
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
+                            <BookOpen className="h-5 w-5" />
+                        </div>
+                        <div className="min-w-0">
+                            <p className="font-medium break-words">
+                                {material.title}
+                            </p>
+                            <p className="mt-0.5 truncate text-xs text-muted-foreground">
+                                {courseClass
+                                    ? `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`
+                                    : '-'}
+                            </p>
+                            {lecturerName && (
+                                <p className="mt-1 flex items-center gap-1 truncate text-xs text-muted-foreground">
+                                    <User className="h-3 w-3 shrink-0" />
+                                    {lecturerName}
+                                </p>
+                            )}
+                        </div>
                     </div>
-                    <div className="flex items-center">
-                        {material.file_url && material.file_name && (
+                    <RowActions
+                        actions={[
+                            {
+                                label: 'Edit',
+                                icon: <Pencil className="h-4 w-4" />,
+                                show: canUpdate,
+                                onClick: () => handleEdit(material),
+                            },
+                            {
+                                label: 'Hapus',
+                                icon: (
+                                    <Trash2 className="h-4 w-4 text-destructive" />
+                                ),
+                                show: canDelete,
+                                onClick: () => handleDeleteClick(material),
+                            },
+                        ]}
+                    />
+                </div>
+
+                {material.description && (
+                    <p className="line-clamp-2 text-sm text-muted-foreground">
+                        {material.description}
+                    </p>
+                )}
+
+                {material.file_url && material.file_name ? (
+                    <Attachment size="sm" className="w-full">
+                        <AttachmentMedia>
+                            <FileIcon />
+                        </AttachmentMedia>
+                        <AttachmentContent>
+                            <AttachmentTitle>
+                                {material.file_name}
+                            </AttachmentTitle>
+                            <AttachmentDescription>
+                                Lampiran materi
+                            </AttachmentDescription>
+                        </AttachmentContent>
+                        <AttachmentActions>
                             <AttachmentPreviewDialog
                                 fileUrl={material.file_url}
                                 fileName={material.file_name}
                                 variant="icon"
                             />
-                        )}
-                        <RowActions
-                            actions={[
-                                {
-                                    label: 'Edit',
-                                    icon: <Pencil className="h-4 w-4" />,
-                                    show: canUpdate,
-                                    onClick: () => handleEdit(material),
-                                },
-                                {
-                                    label: 'Hapus',
-                                    icon: (
-                                        <Trash2 className="h-4 w-4 text-destructive" />
-                                    ),
-                                    show: canDelete,
-                                    onClick: () => handleDeleteClick(material),
-                                },
-                            ]}
-                        />
+                        </AttachmentActions>
+                    </Attachment>
+                ) : (
+                    <div className="flex items-center gap-2 rounded-xl border border-dashed px-2.5 py-2 text-xs text-muted-foreground">
+                        <FileX className="h-4 w-4 shrink-0" />
+                        Tidak ada file dilampirkan
+                    </div>
+                )}
+
+                <div className="flex flex-wrap items-center justify-between gap-2 border-t pt-3">
+                    {material.meeting_number ? (
+                        <Badge variant="secondary">
+                            Pertemuan {material.meeting_number}
+                        </Badge>
+                    ) : (
+                        <span />
+                    )}
+                    <div className="flex items-center gap-1 text-xs text-muted-foreground">
+                        <CalendarDays className="h-3.5 w-3.5" />
+                        {format(new Date(material.created_at), 'd MMM yyyy')}
                     </div>
                 </div>
-
-                <div>
-                    <p className="font-medium">{material.title}</p>
-                    {material.description && (
-                        <p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
-                            {material.description}
-                        </p>
-                    )}
-                </div>
-
-                <p className="text-sm text-muted-foreground">
-                    {courseClass
-                        ? `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`
-                        : '-'}
-                </p>
             </div>
         );
     };
diff --git a/resources/js/pages/admin/academic-classes/materials/columns.tsx b/resources/js/pages/admin/academic-classes/materials/columns.tsx
index b3240bf..ce28ccf 100644
--- a/resources/js/pages/admin/academic-classes/materials/columns.tsx
+++ b/resources/js/pages/admin/academic-classes/materials/columns.tsx
@@ -61,7 +61,7 @@ export function createMaterialColumns(
                     return '-';
                 }
 
-                return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
+                return `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`;
             },
         },
     ];
diff --git a/resources/js/types/material.ts b/resources/js/types/material.ts
index 1e17152..15fb9ef 100644
--- a/resources/js/types/material.ts
+++ b/resources/js/types/material.ts
@@ -4,10 +4,18 @@ export type Material = {
     course_class: {
         id: number;
         course: { id: number; code: string; name: string } | null;
+        lecturer: {
+            id: number;
+            user: {
+                id: number;
+                profile: { full_name: string } | null;
+            } | null;
+        } | null;
     } | null;
     title: string;
     description: string | null;
     meeting_number: number | null;
     file_url: string | null;
     file_name: string | null;
+    created_at: string;
 };