Your changes

lib/screens/mark_list_screen.dart

@@ -10,15 +10,13 @@ class MarkListScreen extends StatefulWidget {
 }
 
 class _MarkListScreenState extends State<MarkListScreen> {
-
   @override
   void initState() {
     super.initState();
-
     WidgetsBinding.instance.addPostFrameCallback((_) {
       final provider = Provider.of<MarkListProvider>(context, listen: false);
       provider.init(context);
-      provider.loadMarks(context); // Load full list again
+      provider.loadMarks(context);
     });
   }
 
@@ -26,27 +24,112 @@ class _MarkListScreenState extends State<MarkListScreen> {
   Widget build(BuildContext context) {
     final marks = Provider.of<MarkListProvider>(context);
 
+    // Responsive scale factor
+    final screenWidth = MediaQuery.of(context).size.width;
+    final scale = (screenWidth / 390).clamp(0.82, 1.35);
+
     return Scaffold(
+      backgroundColor: Colors.white,
+
       appBar: AppBar(
-        title: const Text("All Mark Numbers"),
+        backgroundColor: Colors.white,
+        elevation: 0,
+        centerTitle: true,
+        iconTheme: const IconThemeData(color: Colors.black),
+
+        title: Text(
+          "All Mark Numbers",
+          style: TextStyle(
+            color: Colors.black,
+            fontSize: 20 * scale,
+            fontWeight: FontWeight.w700,
+          ),
+        ),
       ),
 
       body: marks.loading
           ? const Center(child: CircularProgressIndicator())
           : ListView.builder(
-        padding: const EdgeInsets.all(12),
+        padding: EdgeInsets.all(10 * scale), // smaller padding
         itemCount: marks.marks.length,
         itemBuilder: (_, i) {
           final m = marks.marks[i];
 
-          return Card(
-            child: ListTile(
-              title: Text(m['mark_no']),
-              subtitle: Text("${m['origin']} → ${m['destination']}"),
-              trailing: Text(
-                m['status'],
-                style: const TextStyle(color: Colors.indigo),
+          return Container(
+            margin: EdgeInsets.only(bottom: 10 * scale), // reduced margin
+            padding: EdgeInsets.all(12 * scale), // smaller padding
+            decoration: BoxDecoration(
+              gradient: const LinearGradient(
+                colors: [
+                  Color(0xFF2196F3),
+                  Color(0xFF64B5F6),
+                ],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
               ),
+              borderRadius: BorderRadius.circular(14 * scale), // smaller radius
+              boxShadow: [
+                BoxShadow(
+                  color: Colors.black.withOpacity(0.06),
+                  blurRadius: 5 * scale, // smaller shadow
+                  offset: Offset(0, 2 * scale),
+                ),
+              ],
+            ),
+
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // LEFT TEXT
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      // MARK NUMBER
+                      Text(
+                        m['mark_no'],
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontSize: 16 * scale, // reduced font
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+
+                      SizedBox(height: 3 * scale),
+
+                      // ROUTE
+                      Text(
+                        "${m['origin']} → ${m['destination']}",
+                        style: TextStyle(
+                          color: Colors.white,
+                          fontSize: 13 * scale, // reduced font
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+
+                // STATUS BADGE
+                Container(
+                  padding: EdgeInsets.symmetric(
+                    horizontal: 10 * scale,
+                    vertical: 5 * scale, // smaller badge
+                  ),
+                  decoration: BoxDecoration(
+                    color: Colors.white.withOpacity(0.92),
+                    borderRadius: BorderRadius.circular(24 * scale),
+                  ),
+                  child: Text(
+                    m['status'],
+                    style: TextStyle(
+                      fontSize: 11.5 * scale,
+                      color: Colors.black87,
+                      fontWeight: FontWeight.bold,
+                    ),
+                  ),
+                ),
+              ],
             ),
           );
         },