diff --git a/lib/Screens/dashboard/status_dashboard.dart b/lib/Screens/dashboard/status_dashboard.dart
index 4c9d8c8..23227f1 100644
--- a/lib/Screens/dashboard/status_dashboard.dart
+++ b/lib/Screens/dashboard/status_dashboard.dart
@@ -98,6 +98,41 @@ class StatusDashboardState extends State<StatusDashboard> {
     }
   }
 
+  Color getStatusColor(String status) {
+    if (status == "Domestic") return Colors.white;
+    if (status == "International") return Colors.white;
+    if (status == "Partially Approved") return Colors.yellow.shade100;
+    if (status == "Pending Approval") return Colors.greenAccent.shade100;
+    if (status == "Approved") return Colors.green.shade100;
+    if (status == "Completed") return Colors.green.shade500;
+    if (status == "Rejected") return Colors.red.shade100;
+    if (status == "Cancelled") return Colors.red.shade200;
+    return Colors.grey.shade100;
+  }
+
+  IconData getStatusIcon(String title) {
+    switch (title) {
+      case "Domestic":
+        return Icons.directions_bus_filled_outlined;
+      case "International":
+        return Icons.airplanemode_active;
+      case "Partially Approved":
+        return Icons.pending;
+      case "Approved":
+        return Icons.check_circle_outline;
+      case "Completed":
+        return Icons.done_all;
+      case "Rejected":
+        return Icons.cancel_outlined;
+      case "Cancelled":
+        return Icons.cancel_schedule_send_outlined;
+
+      default:
+        return Icons.info_outline;
+    }
+  }
+
+
   @override
   Widget build(BuildContext context) {
     final typeBasedCount = List<Map<String, dynamic>>.from(
@@ -111,9 +146,12 @@ class StatusDashboardState extends State<StatusDashboard> {
     print("statusBasedCount - => $statusBasedCount");
     // 👇 Local function to create the card widget
     Widget buildInfoCard(String title, int count, double width) {
+      print('title $title');
+      final color = getStatusColor(title);
+      final icon = getStatusIcon(title);
       return Card(
         elevation: 3,
-        color: Colors.white,
+        color: color,
         shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
         child: Container(
           width: width,
@@ -121,10 +159,15 @@ class StatusDashboardState extends State<StatusDashboard> {
           child: Column(
             mainAxisSize: MainAxisSize.min,
             children: [
+              Icon(icon, size: 32, color: (title == 'Domestic' ||  title == 'International') ? Colors.green : Colors.black54), // 👈 Add Icon here
+              const SizedBox(height: 8),
               Text(
                 title,
                 textAlign: TextAlign.center,
-                style: const TextStyle(fontWeight: FontWeight.w600),
+                style: TextStyle(
+                    fontWeight: FontWeight.w600,
+                  fontSize: (title == 'Domestic' ||  title == 'International')  ? 16 : 14,
+                ),
               ),
               const SizedBox(height: 8),
               Text(
@@ -132,7 +175,7 @@ class StatusDashboardState extends State<StatusDashboard> {
                 style: const TextStyle(
                   fontSize: 22,
                   fontWeight: FontWeight.bold,
-                  color: Colors.blue,
+                  // color: Colors.blue,
                 ),
               ),
             ],
@@ -154,54 +197,63 @@ class StatusDashboardState extends State<StatusDashboard> {
         body: Padding(
           padding: isDesktop
               ? EdgeInsets.symmetric(
-            horizontal: MediaQuery.of(context).size.width * 0.1,
-            vertical: 0,
+            horizontal: MediaQuery.of(context).size.width *
+                0.1, // 30% of screen width as horizontal padding
+            vertical:  10, // 5% of screen height as vertical padding
           )
-              : const EdgeInsets.all(0),
-          child: Row(
-            children: [
-              Expanded(
-                child: Padding(
-                  padding: const EdgeInsets.all(12.0),
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      Wrap(
-                        spacing: 10,
-                        runSpacing: 10,
-                        children: typeBasedCount.map((item) {
-                          double cardWidth = isDesktop
-                              ? (MediaQuery.of(context).size.width * 0.75 - 10) / 2 // 80% width padding adjusted
-                              : MediaQuery.of(context).size.width - 24; // full width with padding
+              : EdgeInsets.all(0),
+          child:Container(
+      // padding: const EdgeInsets.all(10.0),
+            decoration: BoxDecoration(
+              color: isDesktop ? Colors.white : const Color(0xFFFCFCFC),
+              borderRadius: BorderRadius.circular(12), // 👈 Set your desired radius
+            ),
+      // color: isDesktop ? Colors.white : Color(0xFFFCFCFC),
+         child:  Row(
+           children: [
+             Expanded(
+               child: Padding(
+                 padding: const EdgeInsets.all(30.0),
+                 child: Column(
+                   crossAxisAlignment: CrossAxisAlignment.center,
+                   children: [
+                     Wrap(
+                       spacing: 10,
+                       runSpacing: 10,
+                       children: typeBasedCount.map((item) {
+                         double cardWidth = isDesktop
+                             ? (MediaQuery.of(context).size.width * 0.75 - 10) / 2 // 80% width padding adjusted
+                             : MediaQuery.of(context).size.width - 24; // full width with padding
 
-                          return SizedBox(
-                            width: cardWidth,
-                            child: buildInfoCard(item['value'], item['count'], cardWidth),
-                          );
-                        }).toList(),
-                      ),
-                      const SizedBox(height: 20),
-                      Wrap(
-                        spacing: 10,
-                        runSpacing: 10,
-                          children: statusBasedCount.map((item) {
-                            double cardWidth = isDesktop
-                                ? (MediaQuery.of(context).size.width * 0.90 - 50) / 6 // desktop layout: 6 cards per row
-                                : MediaQuery.of(context).size.width - 24; // mobile: full width
+                         return SizedBox(
+                           width: cardWidth,
+                           child: buildInfoCard(item['value'], item['count'], cardWidth),
+                         );
+                       }).toList(),
+                     ),
+                     const SizedBox(height: 20),
+                     Wrap(
+                       spacing: 10,
+                       runSpacing: 10,
+                       children: statusBasedCount.map((item) {
+                         double cardWidth = isDesktop
+                             ? (MediaQuery.of(context).size.width * 0.90 - 50) / 6 // desktop layout: 6 cards per row
+                             : MediaQuery.of(context).size.width - 24; // mobile: full width
 
-                            return SizedBox(
-                              width: cardWidth,
-                              child: buildInfoCard(item['value'], item['count'], cardWidth),
-                            );
-                          }).toList(),
-                      ),
+                         return SizedBox(
+                           width: cardWidth,
+                           child: buildInfoCard(item['value'], item['count'], cardWidth),
+                         );
+                       }).toList(),
+                     ),
 
-                    ],
-                  ),
-                ),
-              ),
-            ],
-          ),
+                   ],
+                 ),
+               ),
+             ),
+           ],
+         ),
+          )
         ),
       );
     });