diff --git a/app/lib/widgets/choropleth_map.dart b/app/lib/widgets/choropleth_map.dart
index 5e043c1542bc994e3dc3fddf29142f004f613fe1..40043b983ab008631988268a293e293713fa10a1 100644
--- a/app/lib/widgets/choropleth_map.dart
+++ b/app/lib/widgets/choropleth_map.dart
@@ -1,9 +1,8 @@
 import 'dart:typed_data';
 import 'package:flutter/material.dart';
+import 'package:syncfusion_flutter_core/theme.dart';
 import 'package:syncfusion_flutter_maps/maps.dart';
 
-import 'package:latlong2/latlong.dart';
-
 import '../data_classes.dart';
 
 /// A class containing thickness data for each subdivision of the map.
@@ -35,6 +34,7 @@ class ChoroplethMap extends StatefulWidget {
 }
 
 class _ChoroplethMapState extends State<ChoroplethMap> {
+  late MapShapeSource dataSource;
   int selectedIndex = -1;
   late MapShapeSource mapShapeSource;
   late final MapZoomPanBehavior _zoomPanBehavior = MapZoomPanBehavior();
@@ -52,63 +52,70 @@ class _ChoroplethMapState extends State<ChoroplethMap> {
         count++;
       }
     };
+
+    // Initialise data source
+    dataSource = MapShapeSource.memory(
+      widget.relation,
+      shapeDataField: 'sub_div_id',
+      dataCount: count,
+      primaryValueMapper: (int index) =>
+      subdivisions[index].sub_div_id,
+      shapeColorValueMapper: (int index) =>
+      subdivisions[index].avgThickness,
+      shapeColorMappers: const [
+      MapColorMapper(
+          from: 0,
+          to: 4,
+          color: Color(0xFFff0000),
+          text: '{0},{25}'),
+      MapColorMapper(
+          from: 4,
+          to: 7,
+          color: Color(0xffff6a00),
+          text: '75'),
+      MapColorMapper(
+          from: 7,
+          to: 10,
+          color: Color(0xFFb1ff00),
+          text: '150'),
+      MapColorMapper(
+          from: 10,
+          to: 400,
+          color: Color(0xff4fa8d7),
+          text: '400'),
+        ],
+    );
   }
 
   @override
   Widget build(BuildContext context) {
     return Stack(
       children: [
-        SfMaps(
-          layers: [
-            MapShapeLayer(
-              source: MapShapeSource.memory( // Map polygon
-                widget.relation, // JSON coordinates from server
-                shapeDataField: 'sub_div_id',
-                dataCount: count,
-                primaryValueMapper: (int index) => subdivisions[index].sub_div_id,
-                shapeColorValueMapper: (int index) => subdivisions[index].avgThickness,
-                shapeColorMappers: const [
-                  MapColorMapper(
-                      from: 0,
-                      to: 4,
-                      color: Color(0xFFff0000),
-                      text: '{0},{25}'),
-                  MapColorMapper(
-                      from: 4,
-                      to: 7,
-                      color: Color(0xffff6a00),
-                      text: '75'),
-                  MapColorMapper(
-                      from: 7,
-                      to: 10,
-                      color:  Color(0xFFb1ff00),
-                      text: '150'),
-                  MapColorMapper(
-                      from: 10,
-                      to: 400,
-                      color:  Color(0xff4fa8d7),
-                      text: '400'),
-                ],
+        SfMapsTheme(
+          data: SfMapsThemeData( // Shape selection behavior
+            selectionColor: Colors.orange,
+            selectionStrokeWidth: 3,
+            selectionStrokeColor: Colors.red[900],
+          ),
+          child: SfMaps(
+            layers: [
+              MapShapeLayer(
+                source: dataSource,
+                //zoomPanBehavior: _zoomPanBehavior,
+                strokeColor: Colors.blue.shade50,
+                // Shape selection
+                selectedIndex: selectedIndex,
+                onSelectionChanged: (int index) {
+                  setState(() { // Shape selection
+                    selectedIndex = index;
+                  });
+                  widget.onSelectionChanged(selectedIndex);
+                },
               ),
-              zoomPanBehavior: _zoomPanBehavior,
-              strokeColor: Colors.blue.shade50,
-              // Shape selection
-              selectedIndex: selectedIndex,
-              onSelectionChanged: (int index) {
-                setState(() {
-                  selectedIndex = index;
-                });
-                widget.onSelectionChanged(selectedIndex);
-              },
-              selectionSettings: const MapSelectionSettings(
-                strokeWidth: 3.0, // Increase stroke width
-                color: Colors.black,
-              ),
-            ),
-          ],
+            ],
+          ),
         ),
       ],
     );
   }
-}
-
+}
\ No newline at end of file
diff --git a/app/pubspec.lock b/app/pubspec.lock
index 5b0f2cb4733fec028e86a2921324f4d76244dbde..1e7728945e251625cd3e67a58f210351b54ea845 100644
--- a/app/pubspec.lock
+++ b/app/pubspec.lock
@@ -454,7 +454,7 @@ packages:
     source: hosted
     version: "1.2.0"
   syncfusion_flutter_core:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: syncfusion_flutter_core
       sha256: "3979f0b1c5a97422cadae52d476c21fa3e0fb671ef51de6cae1d646d8b99fe1f"
diff --git a/app/pubspec.yaml b/app/pubspec.yaml
index 29d73faf2f2176169e74fbb8f582885e0ce22f44..2442a708ccce155e0200b25901a69d56b68e97f4 100644
--- a/app/pubspec.yaml
+++ b/app/pubspec.yaml
@@ -16,6 +16,7 @@ dependencies:
   fl_chart: ^0.20.0-nullsafety1       # Charts and diagrams
   google_fonts: any                   # Fonts
   syncfusion_flutter_maps: ^20.4.41   # Choropleth map
+  syncfusion_flutter_core: any       # Choropleth shape selection
   path_provider: ^2.0.8
   shared_preferences: any             # Persistent data storage