diff --git a/html/template/sync/settings.html b/html/template/sync/settings.html
index eb19f61d..4f9a1713 100644
--- a/html/template/sync/settings.html
+++ b/html/template/sync/settings.html
@@ -2,56 +2,6 @@
 
 {{ define "title" }}Settings{{ end }}
 {{ define "extraheader" }}
-	<style>
-		.settings-card {
-			transition:
-				transform 0.2s,
-				box-shadow 0.2s;
-			height: 100%;
-		}
-		.settings-card:hover {
-			transform: translateY(-5px);
-			box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
-		}
-		.settings-icon {
-			font-size: 2.5rem;
-			width: 80px;
-			height: 80px;
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			border-radius: 50%;
-			margin-bottom: 1.5rem;
-		}
-		.icon-users {
-			color: #6f42c1;
-			background-color: rgba(111, 66, 193, 0.1);
-		}
-		.icon-pesticides {
-			color: #198754;
-			background-color: rgba(25, 135, 84, 0.1);
-		}
-		.icon-integrations {
-			color: #0d6efd;
-			background-color: rgba(13, 110, 253, 0.1);
-		}
-		.icon-notifications {
-			color: #fd7e14;
-			background-color: rgba(253, 126, 20, 0.1);
-		}
-		.icon-general {
-			color: #6c757d;
-			background-color: rgba(108, 117, 125, 0.1);
-		}
-		.icon-equipment {
-			color: #dc3545;
-			background-color: rgba(220, 53, 69, 0.1);
-		}
-		.last-updated {
-			font-size: 0.8rem;
-			color: #6c757d;
-		}
-	</style>
 {{ end }}
 {{ define "content" }}
 	<div class="container py-5">
@@ -139,24 +89,22 @@
 				</div>
 			</div>
 
-			<!-- Equipment Card -->
+			<!-- District Card -->
 			<div class="col-12 col-md-6 col-lg-4">
 				<div class="card settings-card border-0 shadow-sm">
 					<div class="card-body p-4">
 						<div class="settings-icon icon-equipment">
-							<i class="bi bi-tools"></i>
+							<i class="bi bi-globe-europe-africa"></i>
 						</div>
-						<h2 class="h4 mb-2">Equipment</h2>
+						<h2 class="h4 mb-2">District</h2>
 						<p class="text-muted mb-4">
-							Manage your field equipment inventory, calibration, and
-							maintenance.
+							Manage your district location and information.
 						</p>
 						<div class="d-flex justify-content-between align-items-center">
 							<a href="equipment.html" class="btn btn-outline-danger">
-								Manage Equipment
+								Manage District
 								<i class="bi bi-arrow-right ms-1"></i>
 							</a>
-							<span class="last-updated">Updated 5 days ago</span>
 						</div>
 					</div>
 				</div>
diff --git a/scss/custom.scss b/scss/custom.scss
index 004166ad..088ac247 100644
--- a/scss/custom.scss
+++ b/scss/custom.scss
@@ -54,3 +54,4 @@ $theme-colors: map-merge(
 @import "./sync/notification.scss";
 @import "./sync/pool-csv-upload.scss";
 @import "./sync/pool-by-id.scss";
+@import "./sync/settings.scss";
diff --git a/scss/sync/settings.scss b/scss/sync/settings.scss
new file mode 100644
index 00000000..96879348
--- /dev/null
+++ b/scss/sync/settings.scss
@@ -0,0 +1,48 @@
+.settings-card {
+	transition:
+		transform 0.2s,
+		box-shadow 0.2s;
+	height: 100%;
+}
+.settings-card:hover {
+	transform: translateY(-5px);
+	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+}
+.settings-icon {
+	font-size: 2.5rem;
+	width: 80px;
+	height: 80px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+	margin-bottom: 1.5rem;
+}
+.icon-users {
+	color: #6f42c1;
+	background-color: rgba(111, 66, 193, 0.1);
+}
+.icon-pesticides {
+	color: #198754;
+	background-color: rgba(25, 135, 84, 0.1);
+}
+.icon-integrations {
+	color: #0d6efd;
+	background-color: rgba(13, 110, 253, 0.1);
+}
+.icon-notifications {
+	color: #fd7e14;
+	background-color: rgba(253, 126, 20, 0.1);
+}
+.icon-general {
+	color: #6c757d;
+	background-color: rgba(108, 117, 125, 0.1);
+}
+.icon-equipment {
+	color: #dc3545;
+	background-color: rgba(220, 53, 69, 0.1);
+}
+.last-updated {
+	font-size: 0.8rem;
+	color: #6c757d;
+}