diff --git a/app/lib/features/quiz_download/presentation/pages/components/QuizCard.dart b/app/lib/features/quiz_download/presentation/pages/components/QuizCard.dart
index 05f87d00..93841216 100644
--- a/app/lib/features/quiz_download/presentation/pages/components/QuizCard.dart
+++ b/app/lib/features/quiz_download/presentation/pages/components/QuizCard.dart
@@ -1,81 +1,183 @@
-import 'package:bebras_pandai/models/quiz_participation.dart';
 import 'package:flutter/material.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
+import 'package:intl/intl.dart';
+
+import '../../../../../core/bases/widgets/atoms/button.dart';
+import '../../../../../models/quiz_participation.dart';
 
 class QuizCard extends StatelessWidget {
-  QuizCard(this.weeklyQuizParticipant, this.date, this.score, this.level);
-      // this.context);
+  const QuizCard(this.weeklyQuizParticipant, this.date, this.score, this.level,
+      this.maxAttempts, this.countAttempts, this.startAt, this.endAt,
+      {super.key});
+  // this.context);
 
   final WeeklyQuizParticipation weeklyQuizParticipant;
-  final String date;
+  final DateTime? date;
   final String score;
   final String level;
+  final int maxAttempts;
+  final int countAttempts;
+  final DateTime startAt;
+  final DateTime endAt;
+
   // final BuildContext context;
 
   @override
   Widget build(BuildContext context) {
+    final currentDate = DateTime.now();
+    final inDateRange =
+        currentDate.isAfter(startAt) && currentDate.isBefore(endAt);
+
     return InkWell(
-      onTap: () async {
-        await context.push(
-          Uri(
-            path: '/quiz_start',
-            queryParameters: {
-              'quiz_participant_id': weeklyQuizParticipant.id,
-            },
-          ).toString(),
-        );
-      },
       child: Container(
-        padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 18),
-        margin: const EdgeInsets.only(bottom: 12),
+        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+        margin: const EdgeInsets.only(bottom: 16),
+        clipBehavior: Clip.antiAlias,
         decoration: BoxDecoration(
-          color: Colors.blue[50],
+          color: Colors.white,
+          boxShadow: [
+            BoxShadow(
+              color: Colors.grey.withOpacity(0.2),
+              spreadRadius: 1,
+              blurRadius: 4,
+              offset: const Offset(0, 2),
+            ),
+          ],
           borderRadius: BorderRadius.circular(8),
         ),
-        child: Column(children: [
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Flexible(
-                child: Container(
-                  padding: const EdgeInsets.only(right: 20),
-                  child: Text(
-                    weeklyQuizParticipant.quiz_title,
-                    overflow: TextOverflow.ellipsis,
-                    style: const TextStyle(fontSize: 12),
+        child: Column(
+          children: [
+            Row(
+              children: [
+                Expanded(
+                  flex: 7,
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        weeklyQuizParticipant.quiz_title,
+                        overflow: TextOverflow.ellipsis,
+                        style: const TextStyle(
+                          fontSize: 14,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 8,
+                      ),
+                      Text(
+                        'Nilai: $score',
+                        style: const TextStyle(
+                          fontSize: 12,
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      const SizedBox(
+                        height: 8,
+                      ),
+                      Row(
+                        children: [
+                          const Icon(
+                            FontAwesomeIcons.clock,
+                            size: 12,
+                            color: Colors.blueGrey,
+                          ),
+                          const SizedBox(width: 4),
+                          Text(
+                            'Dikerjakan Pada: ${date != null ? DateFormat('dd/MM/yyyy HH:mm ').format(date!) : '-'}',
+                            style: const TextStyle(
+                              fontSize: 12,
+                              color: Colors.blueGrey,
+                            ),
+                          ),
+                        ],
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        'Sisa coba lagi: ${maxAttempts - countAttempts}/$maxAttempts',
+                        style: const TextStyle(
+                          fontSize: 12,
+                          color: Color(0xFF1BB8E1),
+                        ),
+                      ),
+                    ],
                   ),
                 ),
-              ),
-              Text(
-                'Nilai: $score',
-                style: const TextStyle(fontSize: 12),
-              )
-            ],
-          ),
-          const SizedBox(
-            height: 8,
-          ),
-          Row(
-            children: [
-              Text(
-                'Kategori: $level',
-                style: const TextStyle(fontSize: 12),
-              )
-            ],
+                Expanded(
+                  flex: 3,
+                  child: Button(
+                    isDisabled: countAttempts > maxAttempts || !inDateRange,
+                    onTap: () async {
+                      await context.push(
+                        Uri(
+                          path: '/quiz_start',
+                          queryParameters: {
+                            'quiz_participant_id': weeklyQuizParticipant.id,
+                          },
+                        ).toString(),
+                      );
+                    },
+                    customButtonColor: const Color(0xFF1BB8E1),
+                    customTextColor: Colors.white,
+                    text: 'Kerjakan',
+                    fontSize: 12,
+                    innerVerticalPadding: 8,
+                    innerHorizontalPadding: 8,
+                    borderRadius: 4,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(
+              height: 8,
+            ),
+            buildInfoWidget(startAt, endAt, currentDate)
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+Widget buildInfoWidget(DateTime startAt, DateTime endAt, DateTime currentDate) {
+  if (currentDate.isBefore(startAt)) {
+    return Row(
+      children: [
+        const Icon(
+          FontAwesomeIcons.circleInfo,
+          size: 12,
+          color: Color(0xFF1BB8E1),
+        ),
+        const SizedBox(width: 4),
+        Text(
+          'Dapat mulai dikerjakan pada: ${DateFormat('dd/MM/yyyy HH:mm').format(startAt)}',
+          style: const TextStyle(
+            fontSize: 12,
+            color: Color(0xFF1BB8E1),
           ),
-          const SizedBox(
-            height: 8,
+        ),
+      ],
+    );
+  } else if (currentDate.isAfter(endAt)) {
+    return Row(
+      children: [
+        const Icon(
+          FontAwesomeIcons.circleInfo,
+          size: 12,
+          color: Color(0xFF1BB8E1),
+        ),
+        const SizedBox(width: 4),
+        Text(
+          'Selesai pada: ${DateFormat('dd/MM/yyyy HH:mm').format(endAt)}',
+          style: const TextStyle(
+            fontSize: 12,
+            color: Color(0xFF1BB8E1),
           ),
-          Row(
-            children: [
-              Text(
-                'Dikerjakan: $date',
-                style: const TextStyle(fontSize: 12),
-              )
-            ],
-          )
-        ]),
-      ),
+        ),
+      ],
     );
+  } else {
+    return Container();
   }
 }
diff --git a/app/lib/features/quiz_download/presentation/pages/quiz_download_page.dart b/app/lib/features/quiz_download/presentation/pages/quiz_download_page.dart
index 0b3389a8..794f0d83 100644
--- a/app/lib/features/quiz_download/presentation/pages/quiz_download_page.dart
+++ b/app/lib/features/quiz_download/presentation/pages/quiz_download_page.dart
@@ -155,7 +155,7 @@ class _QuizDownloadPageState extends State<QuizDownloadPage> {
         Align(
           alignment: Alignment.centerLeft,
           child: Text(
-            'Latihan yang pernah diikuti',
+            'Ayo kerjakan!',
             style: FontTheme.blackSubtitleBold(),
           ),
         ),
@@ -173,12 +173,18 @@ class _QuizDownloadPageState extends State<QuizDownloadPage> {
           .map((quiz) => QuizCard(
                 quiz,
                 quiz.attempts.isNotEmpty
-                    ? quiz.attempts[quiz.attempts.length - 1].startAt.toString()
-                    : '-',
+                    ? DateTime.parse(quiz
+                        .attempts[quiz.attempts.length - 1].startAt
+                        .toString())
+                    : null,
                 quiz.attempts.isNotEmpty
                     ? quiz.attempts[quiz.attempts.length - 1].score.toString()
                     : '??',
                 quiz.challenge_group,
+                quiz.quiz_max_attempts,
+                quiz.attempts.length,
+                DateTime.parse(quiz.quiz_start_at),
+                DateTime.parse(quiz.quiz_end_at),
               ))
           .toList(),
     );
diff --git a/app/lib/models/quiz_participation.dart b/app/lib/models/quiz_participation.dart
index 511c8701..107623f3 100644
--- a/app/lib/models/quiz_participation.dart
+++ b/app/lib/models/quiz_participation.dart
@@ -33,7 +33,7 @@ class WeeklyQuizParticipation extends Equatable {
     String id,
     Map<String, dynamic> json,
   ) {
-    var attempts = json['attempts'];
+    final attempts = json['attempts'];
     return WeeklyQuizParticipation(
       id: id,
       quiz_start_at: json['quiz_start_at'] as String,