diff --git a/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart b/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart
index 84b0ecb1..7ff17113 100644
--- a/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart	
+++ b/lib/presentation/Screens/Bottom Navigation Pages/Competitiveness/Detailedcompetitiveness.dart	
@@ -28,7 +28,7 @@ class ReportDetailPage extends StatelessWidget {
             Container(
               padding: const EdgeInsets.all(12),
               decoration: BoxDecoration(
-                color: Colors.grey.shade200,
+                color: Colors.grey.shade100,
                 borderRadius: BorderRadius.circular(12),
               ),
               child: Row(
@@ -60,20 +60,37 @@ class ReportDetailPage extends StatelessWidget {
             const SizedBox(height: 24),
 
             // Ranking section
-            Row(
-              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-              children: [
-                _RankingCard(
-                  title: 'Rank in 2023',
-                  value: '44',
-                  icon: const Icon(Icons.arrow_downward, color: Colors.red, size: 25, weight: 50),
-                ),
-                _RankingCard(
-                  title: 'vs. Previous Edition',
-                  value: '41',
-                  icon: const SizedBox.shrink(),
-                ),
-              ],
+            Container(
+              decoration: BoxDecoration(
+                color: Colors.grey[100],
+                borderRadius: BorderRadius.circular(12),
+              ),
+              padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+              child: Row(
+                children: [
+                  Expanded(
+                    child: _RankingCard(
+                      title: 'Rank in 2023',
+                      value: '44',
+                      icon: const Icon(Icons.arrow_downward, color: Colors.red, size: 25),
+                    ),
+                  ),
+                  SizedBox(
+                    height: 60,
+                    width: 1,
+                    child: CustomPaint(
+                      painter: DottedLinePainter(),
+                    ),
+                  ),
+                  Expanded(
+                    child: _RankingCard(
+                      title: 'vs. Previous Edition',
+                      value: '41',
+                      icon: const SizedBox.shrink(),
+                    ),
+                  ),
+                ],
+              ),
             ),
             const SizedBox(height: 24),
 
@@ -91,7 +108,10 @@ class ReportDetailPage extends StatelessWidget {
                     country: 'DENMARK',
                     flagPath: 'assets/country_flags/de.png',
                   ),
-                  const Divider(),
+                  const Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 8),
+                    child: DottedDivider(),
+                  ),
                   _CountryRankingItem(
                     title: 'First in GCC',
                     country: 'MULTIPLE COUNTRIES',
@@ -122,7 +142,10 @@ class ReportDetailPage extends StatelessWidget {
                       ),
                     ),
                   ),
-                  const Divider(),
+                  const Padding(
+                    padding: EdgeInsets.symmetric(horizontal: 8),
+                    child: DottedDivider(),
+                  ),
                   _CountryRankingItem(
                     title: 'First in Arab Countries',
                     country: 'UNITED ARAB EMIRATES',
@@ -157,7 +180,6 @@ class _RankingCard extends StatelessWidget {
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
         color: Colors.grey[100],
-        borderRadius: BorderRadius.circular(12),
       ),
       child: Column(
         children: [
@@ -270,4 +292,56 @@ class _CountryItem extends StatelessWidget {
       ),
     );
   }
-}
\ No newline at end of file
+}
+class DottedLinePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    const double dashHeight = 3, dashSpace = 2;
+    double startY = 0;
+    final paint = Paint()
+      ..color = Colors.grey
+      ..strokeWidth = 0.8;
+
+    while (startY < size.height) {
+      canvas.drawLine(Offset(0, startY), Offset(0, startY + dashHeight), paint);
+      startY += dashHeight + dashSpace;
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}
+
+class HorizontalDottedLinePainter extends CustomPainter {
+  @override
+  void paint(Canvas canvas, Size size) {
+    const double dashWidth = 3, dashSpace = 2;
+    double startX = 0;
+    final paint = Paint()
+      ..color = Colors.grey
+      ..strokeWidth = 0.8;
+
+    while (startX < size.width) {
+      canvas.drawLine(Offset(startX, 0), Offset(startX + dashWidth, 0), paint);
+      startX += dashWidth + dashSpace;
+    }
+  }
+
+  @override
+  bool shouldRepaint(CustomPainter oldDelegate) => false;
+}
+
+class DottedDivider extends StatelessWidget {
+  const DottedDivider({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return CustomPaint(
+      painter: HorizontalDottedLinePainter(),
+      child: const SizedBox(
+        height: 1,
+        width: double.infinity,
+      ),
+    );
+  }
+}
diff --git a/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart b/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart
index a28a19cf..ccc44536 100644
--- a/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart	
+++ b/lib/presentation/Screens/Bottom Navigation Pages/Country_Profile/DetailedCountryProfilePage.dart	
@@ -164,59 +164,56 @@ class _LeaderCard extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
-      width: 170,
-      height: 100,
-      decoration: BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.circular(12),
-      ),
-      child: Row(
-        children: [
-          ClipRRect(
-            borderRadius: const BorderRadius.only(
-              topLeft: Radius.circular(12),
-              bottomLeft: Radius.circular(12),
-            ),
-            child: Image.asset(
-              imagePath,
-              height: double.infinity,
-              width: 80,
-              fit: BoxFit.cover,
-            ),
-          ),
-          const SizedBox(width: 8),
-          Expanded(
-            child: Padding(
-              padding: const EdgeInsets.symmetric(vertical: 10),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Text(
-                    position,
-                    style: TextStyle(
-                      fontSize: 10,
-                      color: Colors.grey.shade600,
-                    ),
-                    maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                  const SizedBox(height: 4),
-                  Text(
-                    name,
-                    style: const TextStyle(
-                      fontWeight: FontWeight.bold,
-                      fontSize: 12,
-                    ),
-                    maxLines: 2,
-                    overflow: TextOverflow.ellipsis,
-                  ),
-                ],
+    return ClipRRect(
+      borderRadius: BorderRadius.circular(8),
+      child: Container(
+        width: 170,
+        height: 100,
+        decoration: BoxDecoration(
+          color: Colors.white,
+        ),
+        child: Row(
+          children: [
+            ClipRRect(
+              borderRadius: BorderRadius.circular(12),
+              child: Image.asset(
+                imagePath,
+                fit: BoxFit.cover,
               ),
             ),
-          ),
-        ],
+            const SizedBox(width: 8),
+            Expanded(
+              child: Padding(
+                padding: const EdgeInsets.symmetric(vertical: 10),
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Text(
+                      position,
+                      style: TextStyle(
+                        fontSize: 10,
+                        color: Colors.grey.shade600,
+                      ),
+                      // maxLines: 2,
+                      overflow: TextOverflow.visible,
+                    ),
+                    const SizedBox(height: 4),
+                    Text(
+                      name,
+                      style: const TextStyle(
+                        fontWeight: FontWeight.bold,
+                        fontSize: 12,
+                      ),
+                      // maxLines: 2,
+                      // overflow: TextOverflow.visible,
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }