diff --git a/src/components/dashboard/sdgs-card.tsx b/src/components/dashboard/sdgs-card.tsx
index 2732387..d661c69 100644
--- a/src/components/dashboard/sdgs-card.tsx
+++ b/src/components/dashboard/sdgs-card.tsx
@@ -16,6 +16,7 @@ export function SDGSCard({ title, score, image }: SDGSCardProps) {
 			p="md"
 			radius="xl"
 			withBorder
+			bg={dark ? "#1E293B" : "white"}
 			style={{
 				borderColor: dark ? "#334155" : "white",
 				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
diff --git a/src/components/demografi-pekerjaan.tsx b/src/components/demografi-pekerjaan.tsx
index 7d58b34..33e5d31 100644
--- a/src/components/demografi-pekerjaan.tsx
+++ b/src/components/demografi-pekerjaan.tsx
@@ -259,7 +259,7 @@ const DemografiPekerjaan = () => {
 								/>
 								<Bar
 									dataKey="total"
-									fill="#1E3A5F"
+									fill="#396aaaff"
 									radius={[8, 8, 0, 0]}
 									maxBarSize={40}
 								/>
@@ -325,7 +325,7 @@ const DemografiPekerjaan = () => {
 								/>
 								<Bar
 									dataKey="total"
-									fill="#1E3A5F"
+									fill="#396aaaff"
 									radius={[0, 8, 8, 0]}
 									maxBarSize={30}
 								/>
@@ -663,12 +663,12 @@ const DemografiPekerjaan = () => {
 								/>
 								<Bar
 									dataKey="value"
-									fill="#1E3A5F"
+									fill="#396aaaff"
 									radius={[0, 8, 8, 0]}
 									maxBarSize={40}
 								>
 									{sektorUnggulanData.map((entry, index) => (
-										<Cell key={`cell-${index}`} fill="#1E3A5F" />
+										<Cell key={`cell-${index}`} fill="#396aaaff" />
 									))}
 								</Bar>
 							</BarChart>
diff --git a/src/components/jenna-analytic.tsx b/src/components/jenna-analytic.tsx
index 0939ad1..a97fdbe 100644
--- a/src/components/jenna-analytic.tsx
+++ b/src/components/jenna-analytic.tsx
@@ -197,7 +197,7 @@ const JennaAnalytic = () => {
 						/>
 						<Bar
 							dataKey="total"
-							fill="#1E3A5F"
+							fill="#396aaaff"
 							radius={[8, 8, 0, 0]}
 							maxBarSize={60}
 						/>
diff --git a/src/components/keuangan-anggaran.tsx b/src/components/keuangan-anggaran.tsx
index 5b90e1d..6afc78a 100644
--- a/src/components/keuangan-anggaran.tsx
+++ b/src/components/keuangan-anggaran.tsx
@@ -312,7 +312,7 @@ const KeuanganAnggaran = () => {
 								/>
 								<Bar
 									dataKey="amount"
-									fill="#1E3A5F"
+									fill="#396aaaff"
 									radius={[0, 8, 8, 0]}
 									maxBarSize={30}
 								/>
diff --git a/src/components/pengaduan-layanan-publik.tsx b/src/components/pengaduan-layanan-publik.tsx
index b6bb992..edb2347 100644
--- a/src/components/pengaduan-layanan-publik.tsx
+++ b/src/components/pengaduan-layanan-publik.tsx
@@ -246,7 +246,7 @@ const PengaduanLayananPublik = () => {
 						<Line
 							type="monotone"
 							dataKey="jumlah"
-							stroke="#1E3A5F"
+							stroke="#396aaaff"
 							strokeWidth={2}
 							dot={{
 								fill: "#1E3A5F",
@@ -305,7 +305,7 @@ const PengaduanLayananPublik = () => {
 										borderRadius: "8px",
 									}}
 								/>
-								<Bar dataKey="jumlah" fill="#1E3A5F" radius={[0, 4, 4, 0]} />
+								<Bar dataKey="jumlah" fill="#396aaaff" radius={[0, 4, 4, 0]} />
 							</BarChart>
 						</ResponsiveContainer>
 					</Card>
diff --git a/src/components/sosial/event-calendar.tsx b/src/components/sosial/event-calendar.tsx
index 721c06d..1f5b04c 100644
--- a/src/components/sosial/event-calendar.tsx
+++ b/src/components/sosial/event-calendar.tsx
@@ -92,7 +92,7 @@ export const EventCalendar = ({ data }: EventCalendarProps) => {
 							</Text>
 						</Group>
 						<Group pl={36}>
-							<Text size="sm" c={dark ? "dark.4" : "gray.6"}>
+							<Text size="sm" c={dark ? "white" : "gray.6"}>
 								{event.tanggal}
 							</Text>
 						</Group>