diff --git a/public/SDGS-1.png b/public/SDGS-1.png
new file mode 100644
index 0000000..2a0437e
Binary files /dev/null and b/public/SDGS-1.png differ
diff --git a/public/SDGS-16.png b/public/SDGS-16.png
new file mode 100644
index 0000000..09821a1
Binary files /dev/null and b/public/SDGS-16.png differ
diff --git a/public/SDGS-3.png b/public/SDGS-3.png
new file mode 100644
index 0000000..b65cd01
Binary files /dev/null and b/public/SDGS-3.png differ
diff --git a/public/SDGS-7.png b/public/SDGS-7.png
new file mode 100644
index 0000000..c57ea96
Binary files /dev/null and b/public/SDGS-7.png differ
diff --git a/src/components/dashboard-content.tsx b/src/components/dashboard-content.tsx
index d0c8b8e..888caf4 100644
--- a/src/components/dashboard-content.tsx
+++ b/src/components/dashboard-content.tsx
@@ -1,4 +1,5 @@
 import {
+	Briefcase,
 	Calendar,
 	CheckCircle,
 	FileText,
@@ -27,7 +28,9 @@ import {
 	Card, // Added for icon containers
 	Grid,
 	Group,
+	Image,
 	Progress,
+	SimpleGrid,
 	Stack,
 	Text,
 	ThemeIcon,
@@ -67,9 +70,16 @@ const eventData = [
 ];
 
 const apbdesData = [
-	{ name: "Belanja", value: 70, color: "blue" },
-	{ name: "Pendapatan", value: 90, color: "green" },
-	{ name: "Pembangunan", value: 50, color: "orange" },
+	{ name: "Belanja", value: 390, label: "390M" },
+	{ name: "Pendapatan", value: 470, label: "470M" },
+	{ name: "Pembiayaan", value: 290, label: "290M" },
+];
+
+const sdgsData = [
+	{ label: "Desa Berenergi Bersih Dan Terbarukan", value: 99.64, image: "/SDGS-7.png" },
+	{ label: "Desa Damai Berkeadilan", value: 78.65, image: "/SDGS-16.png" },
+	{ label: "Desa Sehat Dan Sejahtera", value: 77.37, image: "/SDGS-3.png" },
+	{ label: "Desa Tanpa Kemiskinan", value: 52.62, image: "/SDGS-1.png" }
 ];
 
 export function DashboardContent() {
@@ -109,7 +119,7 @@ export function DashboardContent() {
 								variant="filled"
 								size="xl"
 								radius="xl"
-								color={dark ? "gray" : "darmasaba-blue"}
+								color={dark ? "gray" : "darmasaba-navy"}
 							>
 								<FileText style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
@@ -143,7 +153,7 @@ export function DashboardContent() {
 								variant="filled"
 								size="xl"
 								radius="xl"
-								color={dark ? "gray" : "darmasaba-blue"}
+								color={dark ? "gray" : "darmasaba-navy"}
 							>
 								<MessageCircle style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
@@ -180,7 +190,7 @@ export function DashboardContent() {
 								variant="filled"
 								size="xl"
 								radius="xl"
-								color={dark ? "gray" : "darmasaba-blue"}
+								color={dark ? "gray" : "darmasaba-navy"}
 							>
 								<CheckCircle style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
@@ -214,7 +224,7 @@ export function DashboardContent() {
 								variant="filled"
 								size="xl"
 								radius="xl"
-								color={dark ? "gray" : "darmasaba-blue"}
+								color={dark ? "gray" : "darmasaba-navy"}
 							>
 								<Users style={{ width: "70%", height: "70%" }} />
 							</ThemeIcon>
@@ -282,7 +292,7 @@ export function DashboardContent() {
 								<Tooltip />
 								<Bar
 									dataKey="value"
-									fill="var(--mantine-color-blue-filled)"
+									fill="#1E3A5F"
 									radius={[4, 4, 0, 0]}
 								/>
 							</BarChart>
@@ -375,46 +385,7 @@ export function DashboardContent() {
 						<Group gap="xs" mb="lg">
 							<Box>
 								{/* Original SVG icon */}
-								<svg
-									width="24"
-									height="24"
-									viewBox="0 0 24 24"
-									fill="none"
-									xmlns="http://www.w3.org/2000/svg"
-								>
-									<rect
-										x="3"
-										y="3"
-										width="7"
-										height="7"
-										rx="1"
-										fill="currentColor"
-									/>
-									<rect
-										x="3"
-										y="14"
-										width="7"
-										height="7"
-										rx="1"
-										fill="currentColor"
-									/>
-									<rect
-										x="14"
-										y="3"
-										width="7"
-										height="7"
-										rx="1"
-										fill="currentColor"
-									/>
-									<rect
-										x="14"
-										y="14"
-										width="7"
-										height="7"
-										rx="1"
-										fill="currentColor"
-									/>
-								</svg>
+								<Briefcase color="#1E3A5F" />
 							</Box>
 							<Title order={4}>Divisi Teraktif</Title>
 						</Group>
@@ -433,7 +404,7 @@ export function DashboardContent() {
 										value={(divisi.value / 37) * 100}
 										size="sm"
 										radius="xl"
-										color="blue"
+										color="#1E3A5F"
 									/>
 								</Box>
 							))}
@@ -459,7 +430,7 @@ export function DashboardContent() {
 								<Box
 									key={index}
 									style={{
-										borderLeft: "4px solid var(--mantine-color-blue-filled)",
+										borderLeft: "4px solid #1E3A5F",
 										paddingLeft: 12,
 									}}
 								>
@@ -493,18 +464,53 @@ export function DashboardContent() {
 									{data.name}
 								</Text>
 							</Grid.Col>
-							<Grid.Col span={9}>
+							<Grid.Col span={7}>
 								<Progress
-									value={data.value}
+									value={(data.value / 470) * 100}
 									size="lg"
 									radius="xl"
-									color={data.color}
+									color="#1E3A5F"
 								/>
 							</Grid.Col>
+							<Grid.Col span={2}>
+								<Text size="sm" fw={600} ta="right">
+									{data.label}
+								</Text>
+							</Grid.Col>
 						</Grid>
 					))}
 				</Stack>
 			</Card>
+
+			{/* SDGS Desa */}
+			<Card
+				p="md"
+				style={{ borderColor: dark ? "#141D34" : "white" }}
+				radius="md"
+				withBorder
+				bg={dark ? "#141D34" : "white"}
+			>
+				<Title order={4} mb="lg">
+					SDGS Desa
+				</Title>
+				<SimpleGrid cols={{ base: 2, md: 5 }}>
+					{sdgsData.map((data, index) => (
+						<Card key={index} withBorder bg={dark ? "#141D34" : "white"} p="md">
+							<Group gap="sm" align="center">
+								<Image src={data.image} width={40} height={40} />
+								<Box>
+									<Text size="sm" ta={"center"}  fw={500} lineClamp={2}>
+										{data.label}
+									</Text>
+									<Text size="sm" ta={"center"} fw={600} c="darmasaba-blue">
+										{data.value}
+									</Text>
+								</Box>
+							</Group>
+						</Card>
+					))}
+				</SimpleGrid>
+			</Card>
 		</Stack>
 	);
 }
diff --git a/src/components/sidebar.tsx b/src/components/sidebar.tsx
index bc25cde..53ee82b 100644
--- a/src/components/sidebar.tsx
+++ b/src/components/sidebar.tsx
@@ -61,6 +61,8 @@ export function Sidebar({ className }: SidebarProps) {
 		(item) => location.pathname === item.path,
 	);
 
+	const headerBgColor = colorScheme === "dark" ? "#ebedf0ff" : "#19355E";
+
 	return (
 		<Box className={className}>
 			{/* Logo */}
@@ -92,7 +94,7 @@ export function Sidebar({ className }: SidebarProps) {
 							label={item.name}
 							active={isActive}
 							variant="subtle"
-							color="blue"
+							color={headerBgColor}
 							style={{
 								background: isActive ? isActiveBg : "transparent",
 								fontWeight: isActive ? "bold" : "normal",
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 2622ba2..c2551c5 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -21,6 +21,7 @@ export const auth = betterAuth({
 			clientId: process.env.GITHUB_CLIENT_ID || "CLIENT_ID_MISSING",
 			clientSecret: process.env.GITHUB_CLIENT_SECRET || "CLIENT_SECRET_MISSING",
 			enabled: true,
+			redirectURI: `${baseUrl}/api/auth/callback/github`,
 		},
 	},
 	user: {