diff --git a/Dockerfile b/Dockerfile
index 5f41ba9..6743868 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -29,7 +29,7 @@ RUN bun x prisma generate
 # Generate API types
 RUN bun run gen:api
 
-# Build the application frontend
+# Build the application frontend using our custom build script
 RUN bun run build
 
 # Stage 2: Runtime
diff --git a/package.json b/package.json
index b835530..4ed17fa 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
 		"test": "bun test __tests__/api",
 		"test:ui": "bun test --ui __tests__/api",
 		"test:e2e": "bun run build && playwright test",
-		"build": "bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='\"production\"' --env='VITE_*' && cp -r public/* dist/ 2>/dev/null || true",
+		"build": "bun run scripts/build.ts",
 		"start": "NODE_ENV=production bun src/index.ts",
 		"seed": "bun prisma/seed.ts"
 	},
diff --git a/scripts/build.ts b/scripts/build.ts
new file mode 100644
index 0000000..e80eade
--- /dev/null
+++ b/scripts/build.ts
@@ -0,0 +1,58 @@
+#!/usr/bin/env bun
+
+/**
+ * Build script for production
+ * 1. Build CSS with PostCSS/Tailwind
+ * 2. Bundle JS with Bun (without CSS)
+ * 3. Replace CSS reference in HTML
+ */
+
+import { $ } from "bun";
+import fs from "node:fs";
+import postcss from "postcss";
+import tailwindcss from "@tailwindcss/postcss";
+import autoprefixer from "autoprefixer";
+
+console.log("🔨 Starting production build...");
+
+// Ensure dist directory exists
+if (!fs.existsSync("./dist")) {
+	fs.mkdirSync("./dist", { recursive: true });
+}
+
+// Step 1: Build CSS with PostCSS
+console.log("🎨 Building CSS...");
+const cssInput = fs.readFileSync("./src/index.css", "utf-8");
+const cssResult = await postcss([tailwindcss(), autoprefixer()]).process(
+	cssInput,
+	{
+		from: "./src/index.css",
+		to: "./dist/index.css",
+	},
+);
+
+fs.writeFileSync("./dist/index.css", cssResult.css);
+console.log("✅ CSS built successfully!");
+
+// Step 2: Build JS with Bun (build HTML too, we'll fix CSS link later)
+console.log("📦 Bundling JavaScript...");
+await $`bun build ./src/index.html --outdir=dist --sourcemap --target=browser --minify --define:process.env.NODE_ENV='"production"' --env='VITE_*'`;
+
+// Step 3: Copy public assets
+console.log("📁 Copying public assets...");
+if (fs.existsSync("./public")) {
+	await $`cp -r public/* dist/ 2>/dev/null || true`;
+}
+
+// Step 4: Ensure HTML references the correct CSS
+// Bun build might have renamed the CSS, we want to use our own index.css
+console.log("🔧 Fixing HTML CSS reference...");
+const htmlPath = "./dist/index.html";
+if (fs.existsSync(htmlPath)) {
+	let html = fs.readFileSync(htmlPath, "utf-8");
+	// Replace any bundled CSS reference with our index.css
+	html = html.replace(/href="[^"]*\.css"/g, 'href="/index.css"');
+	fs.writeFileSync(htmlPath, html);
+}
+
+console.log("✅ Build completed successfully!");
diff --git a/src/components/bumdes-page.tsx b/src/components/bumdes-page.tsx
index 5a34605..605a8e8 100644
--- a/src/components/bumdes-page.tsx
+++ b/src/components/bumdes-page.tsx
@@ -149,16 +149,40 @@ const BumdesPage = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#0F172A" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#0F172A" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: Top 4 Metrics Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi, index) => (
 						<div
 							key={index}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -197,7 +221,12 @@ const BumdesPage = () => {
 				{/* Row 2: Sales Update Header */}
 				<div
 					className="rounded-xl shadow-sm mb-6 overflow-hidden"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<div
 						className="px-6 py-4 flex items-center justify-between"
@@ -232,13 +261,25 @@ const BumdesPage = () => {
 				</div>
 
 				{/* Row 3: Main Content Grid */}
-				<div className="grid grid-cols-1 lg:grid-cols-10 gap-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-10 gap-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(10, 1fr)",
+						gap: "1.5rem",
+					}}
+				>
 					{/* Left Column (30%) */}
 					<div className="lg:col-span-3 space-y-6">
 						{/* Produk Unggulan Section */}
 						<div
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<h3
 								className="text-lg font-semibold mb-4"
@@ -271,11 +312,7 @@ const BumdesPage = () => {
 										</p>
 										{stat.subtitle && (
 											<p
-												className={`text-xs mt-1 ${
-													stat.isPositive
-														? "text-green-500"
-														: subtitleStyle.color
-												}`}
+												className="text-xs mt-1"
 												style={
 													stat.isPositive
 														? { color: "#22C55E" }
@@ -332,7 +369,7 @@ const BumdesPage = () => {
 												{product.umkmOwner}
 											</p>
 											<div className="flex items-center justify-between mt-2">
-												<p className="text-xs font-medium text-green-500">
+												<p className="text-xs font-medium" style={{ color: "#22C55E" }}>
 													{product.sales}
 												</p>
 												<p
@@ -356,7 +393,12 @@ const BumdesPage = () => {
 					<div className="lg:col-span-7">
 						<div
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between mb-6">
 								<h3
@@ -505,11 +547,11 @@ const BumdesPage = () => {
 												</td>
 												<td className="py-4 px-4">
 													<span
-														className={`inline-flex items-center px-3 py-1 rounded-full text-xs font-medium ${
-															parseInt(product.stok) > 200
-																? "bg-green-100 text-green-800"
-																: "bg-red-100 text-red-800"
-														}`}
+														className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
+														style={{
+															backgroundColor: parseInt(product.stok) > 200 ? "#DCFCE7" : "#FEE2E2",
+															color: parseInt(product.stok) > 200 ? "#166534" : "#991B1B",
+														}}
 													>
 														{product.stok}
 													</span>
diff --git a/src/components/demografi-pekerjaan.tsx b/src/components/demografi-pekerjaan.tsx
index ea71b2e..81776ef 100644
--- a/src/components/demografi-pekerjaan.tsx
+++ b/src/components/demografi-pekerjaan.tsx
@@ -140,16 +140,40 @@ const DemografiPekerjaan = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Statistic Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi) => (
 						<div
 							key={kpi.id}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -186,11 +210,24 @@ const DemografiPekerjaan = () => {
 				</div>
 
 				{/* Row 2: 2 Chart Cards */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(2, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{/* Age Distribution Bar Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -239,7 +276,12 @@ const DemografiPekerjaan = () => {
 					{/* Job Distribution Bar Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -287,11 +329,24 @@ const DemografiPekerjaan = () => {
 				</div>
 
 				{/* Row 3: 3 Insight Cards */}
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(3, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{/* Religion Distribution Pie Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -331,7 +386,12 @@ const DemografiPekerjaan = () => {
 					{/* Population per Banjar Table */}
 					<div
 						className="rounded-xl shadow-sm p-6 lg:col-span-2"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -416,7 +476,12 @@ const DemografiPekerjaan = () => {
 				{/* Population Dynamics Stats */}
 				<div
 					className="rounded-xl shadow-sm p-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -424,13 +489,22 @@ const DemografiPekerjaan = () => {
 					>
 						Statistik Dinamika Penduduk
 					</h3>
-					<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+					<div
+						className="grid grid-cols-1 md:grid-cols-4 gap-4"
+						style={{
+							display: "grid",
+							gridTemplateColumns: "repeat(4, 1fr)",
+							gap: "1rem",
+						}}
+					>
 						{dynamicStats.map((stat, index) => (
 							<div
 								key={index}
 								className="p-4 rounded-lg"
 								style={{
 									backgroundColor: dark ? "#1F2937" : "#F9FAFB",
+									borderRadius: "8px",
+									padding: "1rem",
 								}}
 							>
 								<div className="flex items-center justify-between">
diff --git a/src/components/jenna-analytic.tsx b/src/components/jenna-analytic.tsx
index 578d2a5..4fc8032 100644
--- a/src/components/jenna-analytic.tsx
+++ b/src/components/jenna-analytic.tsx
@@ -98,16 +98,40 @@ const JennaAnalytic = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Statistic Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi) => (
 						<div
 							key={kpi.id}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -146,7 +170,13 @@ const JennaAnalytic = () => {
 				{/* Row 2: Full Width Weekly Bar Chart */}
 				<div
 					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -193,11 +223,23 @@ const JennaAnalytic = () => {
 				</div>
 
 				{/* Row 3: Two Insight Cards */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-2 gap-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+						gap: "1.5rem",
+					}}
+				>
 					{/* Left: Frequently Asked Topics */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -220,7 +262,7 @@ const JennaAnalytic = () => {
 									>
 										{item.topic}
 									</span>
-									<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+									<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-darmasaba-blue-100 text-darmasaba-blue-800">
 										{item.count}x
 									</span>
 								</div>
@@ -231,7 +273,12 @@ const JennaAnalytic = () => {
 					{/* Right: Busy Hour Distribution */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
diff --git a/src/components/keuangan-anggaran.tsx b/src/components/keuangan-anggaran.tsx
index 73322cc..ff35706 100644
--- a/src/components/keuangan-anggaran.tsx
+++ b/src/components/keuangan-anggaran.tsx
@@ -123,16 +123,40 @@ const KeuanganAnggaran = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#0F172A" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#0F172A" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Summary Metrics Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{kpiData.map((kpi) => (
 						<div
 							key={kpi.id}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -155,7 +179,7 @@ const KeuanganAnggaran = () => {
 										{kpi.subtitle}
 									</p>
 									{kpi.delta && (
-										<p className="text-xs text-green-500 mt-1">
+										<p className="text-xs mt-1" style={{ color: "#22C55E" }}>
 											{kpi.delta}
 										</p>
 									)}
@@ -176,7 +200,13 @@ const KeuanganAnggaran = () => {
 				{/* Row 2: Line Chart Section */}
 				<div
 					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -258,11 +288,24 @@ const KeuanganAnggaran = () => {
 				{/* Row 3: Analytics Section */}
 
 
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(2, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{/* Left: Horizontal Bar Chart */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -314,7 +357,12 @@ const KeuanganAnggaran = () => {
 					{/* Right: Assistance Funds List */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -368,7 +416,12 @@ const KeuanganAnggaran = () => {
 				{/* Row 4: Report Section */}
 				<div
 					className="rounded-xl shadow-sm p-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-6"
@@ -376,7 +429,14 @@ const KeuanganAnggaran = () => {
 					>
 						Laporan APBDes
 					</h3>
-					<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+					<div
+						className="grid grid-cols-1 md:grid-cols-2 gap-8"
+						style={{
+							display: "grid",
+							gridTemplateColumns: "repeat(2, 1fr)",
+							gap: "2rem",
+						}}
+					>
 						{/* Left: Pendapatan */}
 						<div>
 							<h4
diff --git a/src/components/kinerja-divisi.tsx b/src/components/kinerja-divisi.tsx
index bdaf4b0..4f64037 100644
--- a/src/components/kinerja-divisi.tsx
+++ b/src/components/kinerja-divisi.tsx
@@ -11,6 +11,7 @@ import {
 	YAxis,
 } from "recharts";
 import { useMantineColorScheme } from "@mantine/core";
+import { IconMessage } from "@tabler/icons-react";
 
 const KinerjaDivisi = () => {
 	const { colorScheme } = useMantineColorScheme();
@@ -76,10 +77,22 @@ const KinerjaDivisi = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
 			{/* Top Row - 4 Activity Cards */}
-			<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+			<div
+				className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(4, 1fr)",
+					gap: "1.5rem",
+					marginBottom: "1.5rem",
+				}}
+			>
 				{activities.map((activity, index) => (
 					<div
 						key={index}
@@ -87,6 +100,9 @@ const KinerjaDivisi = () => {
 						style={{
 							backgroundColor: dark ? "#141D34" : "white",
 							border: `1px solid ${dark ? "#141D34" : "white"}`,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.25rem",
 						}}
 					>
 						{/* Dark blue title bar */}
@@ -125,13 +141,24 @@ const KinerjaDivisi = () => {
 			</div>
 
 			{/* Second Row - Charts */}
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+			<div
+				className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6"
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+					gap: "1.5rem",
+					marginBottom: "1.5rem",
+				}}
+			>
 				{/* Left Card - Jumlah Dokumen (Bar Chart) */}
 				<div
 					className="rounded-xl shadow-sm p-5"
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
@@ -181,6 +208,9 @@ const KinerjaDivisi = () => {
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
@@ -261,13 +291,23 @@ const KinerjaDivisi = () => {
 			</div>
 
 			{/* Bottom Row */}
-			<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+			<div
+				className="grid grid-cols-1 lg:grid-cols-2 gap-6"
+				style={{
+					display: "grid",
+					gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+					gap: "1.5rem",
+				}}
+			>
 				{/* Left Card - Diskusi */}
 				<div
 					className="rounded-xl shadow-sm p-5"
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
@@ -290,20 +330,11 @@ const KinerjaDivisi = () => {
 										className="w-8 h-8 rounded-full flex items-center justify-center"
 										style={{ backgroundColor: "#DBEAFE" }}
 									>
-										<svg
+										<IconMessage
 											className="w-4 h-4"
 											style={{ color: "#1E3A5F" }}
-											fill="none"
-											stroke="currentColor"
-											viewBox="0 0 24 24"
-										>
-											<path
-												strokeLinecap="round"
-												strokeLinejoin="round"
-												strokeWidth={2}
-												d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
-											/>
-										</svg>
+											stroke={2}
+										/>
 									</div>
 								</div>
 								<div className="flex-1">
@@ -331,6 +362,9 @@ const KinerjaDivisi = () => {
 					style={{
 						backgroundColor: dark ? "#141D34" : "white",
 						border: `1px solid ${dark ? "#141D34" : "white"}`,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.25rem",
 					}}
 				>
 					<h3
diff --git a/src/components/pengaduan-layanan-publik.tsx b/src/components/pengaduan-layanan-publik.tsx
index adacb0a..ef3ccab 100644
--- a/src/components/pengaduan-layanan-publik.tsx
+++ b/src/components/pengaduan-layanan-publik.tsx
@@ -78,8 +78,8 @@ const PengaduanLayananPublik = () => {
 			type: "KTP Elektronik",
 			date: "10 Mar 2025",
 			status: "Selesai",
-			statusColor: "green",
-			statusText: "bg-green-100 text-green-800",
+			statusBg: "bg-darmasaba-success-100",
+			statusText: "text-darmasaba-success-800",
 		},
 		{
 			id: 2,
@@ -87,8 +87,8 @@ const PengaduanLayananPublik = () => {
 			type: "Surat Domisili",
 			date: "10 Mar 2025",
 			status: "Diproses",
-			statusColor: "yellow",
-			statusText: "bg-yellow-100 text-yellow-800",
+			statusBg: "bg-darmasaba-warning-100",
+			statusText: "text-darmasaba-warning-800",
 		},
 		{
 			id: 3,
@@ -96,8 +96,8 @@ const PengaduanLayananPublik = () => {
 			type: "Kartu Keluarga",
 			date: "9 Mar 2025",
 			status: "Baru",
-			statusColor: "blue",
-			statusText: "bg-blue-100 text-blue-800",
+			statusBg: "bg-darmasaba-blue-100",
+			statusText: "text-darmasaba-blue-800",
 		},
 		{
 			id: 4,
@@ -105,8 +105,8 @@ const PengaduanLayananPublik = () => {
 			type: "Surat Usaha",
 			date: "9 Mar 2025",
 			status: "Selesai",
-			statusColor: "green",
-			statusText: "bg-green-100 text-green-800",
+			statusBg: "bg-darmasaba-success-100",
+			statusText: "text-darmasaba-success-800",
 		},
 		{
 			id: 5,
@@ -114,8 +114,8 @@ const PengaduanLayananPublik = () => {
 			type: "SKCK",
 			date: "8 Mar 2025",
 			status: "Diproses",
-			statusColor: "yellow",
-			statusText: "bg-yellow-100 text-yellow-800",
+			statusBg: "bg-darmasaba-warning-100",
+			statusText: "text-darmasaba-warning-800",
 		},
 	];
 
@@ -165,16 +165,40 @@ const PengaduanLayananPublik = () => {
 	return (
 		<div
 			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#10192D" : "#F3F4F6" }}
+			style={{
+				backgroundColor: dark ? "#10192D" : "#F3F4F6",
+				minHeight: "100vh",
+				padding: "1.5rem",
+			}}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div
+				className="max-w-7xl mx-auto"
+				style={{
+					maxWidth: "80rem",
+					marginLeft: "auto",
+					marginRight: "auto",
+				}}
+			>
 				{/* Row 1: 4 Statistic Cards */}
-				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
+				<div
+					className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(4, 1fr)",
+						gap: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
+				>
 					{statsData.map((stat, index) => (
 						<div
 							key={index}
 							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							style={{
+								...cardStyle,
+								borderRadius: "12px",
+								boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+								padding: "1.5rem",
+							}}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
@@ -213,7 +237,13 @@ const PengaduanLayananPublik = () => {
 				{/* Row 2: Full Width Line Chart */}
 				<div
 					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					style={{
+						...cardStyle,
+						borderRadius: "12px",
+						boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+						padding: "1.5rem",
+						marginBottom: "1.5rem",
+					}}
 				>
 					<h3
 						className="text-lg font-semibold mb-4"
@@ -260,11 +290,23 @@ const PengaduanLayananPublik = () => {
 				</div>
 
 				{/* Row 3: 3 Column Grid */}
-				<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+				<div
+					className="grid grid-cols-1 lg:grid-cols-3 gap-6"
+					style={{
+						display: "grid",
+						gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
+						gap: "1.5rem",
+					}}
+				>
 					{/* Left: Most Requested Documents (Horizontal Bar Chart) */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -316,7 +358,12 @@ const PengaduanLayananPublik = () => {
 					{/* Middle: Recent Applications */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
@@ -349,7 +396,7 @@ const PengaduanLayananPublik = () => {
 									</div>
 									<div className="text-right">
 										<span
-											className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${app.statusText}`}
+											className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${app.statusBg} ${app.statusText}`}
 										>
 											{app.status}
 										</span>
@@ -368,7 +415,12 @@ const PengaduanLayananPublik = () => {
 					{/* Right: Innovation Ideas */}
 					<div
 						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						style={{
+							...cardStyle,
+							borderRadius: "12px",
+							boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+							padding: "1.5rem",
+						}}
 					>
 						<h3
 							className="text-lg font-semibold mb-4"
diff --git a/src/components/sosial-page.tsx b/src/components/sosial-page.tsx
index 211bf1b..76b84e3 100644
--- a/src/components/sosial-page.tsx
+++ b/src/components/sosial-page.tsx
@@ -115,62 +115,55 @@ const SosialPage = () => {
 		},
 	];
 
-	const cardStyle = {
-		backgroundColor: dark ? "#1E293B" : "white",
-		border: `1px solid ${dark ? "#1E293B" : "white"}`,
-	};
-
-	const textStyle = {
-		color: dark ? "white" : "#1F2937",
-	};
-
-	const subtitleStyle = {
-		color: dark ? "#9CA3AF" : "#6B7280",
-	};
-
 	return (
 		<div
-			className="min-h-screen"
-			style={{ backgroundColor: dark ? "#0F172A" : "#F3F4F6" }}
+			className={`min-h-screen py-6 px-4 sm:px-6 lg:px-8 ${
+				dark ? "bg-slate-900" : "bg-gray-100"
+			}`}
 		>
-			<div className="max-w-7xl mx-auto">
+			<div className="max-w-7xl mx-auto w-full">
 				{/* Row 1: Top 4 Metrics Cards */}
 				<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-6">
 					{healthStats.map((stat, index) => (
 						<div
 							key={index}
-							className="rounded-xl shadow-sm p-6"
-							style={cardStyle}
+							className={`rounded-xl shadow-sm p-6 ${
+								dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+							}`}
 						>
 							<div className="flex items-center justify-between">
 								<div className="flex-1">
 									<h3
-										className="text-sm font-medium mb-1"
-										style={subtitleStyle}
+										className={`text-sm font-medium mb-1 ${
+											dark ? "text-gray-400" : "text-gray-500"
+										}`}
 									>
 										{stat.title}
 									</h3>
 									<p
-										className="text-3xl font-bold mb-1"
-										style={
-											stat.alert ? { color: "#EF4444" } : textStyle
-										}
+										className={`text-3xl font-bold mb-1 ${
+											stat.alert
+												? "text-red-500"
+												: dark
+												? "text-white"
+												: "text-gray-800"
+										}`}
 									>
 										{stat.value}
 									</p>
 									<p
-										className="text-xs"
-										style={subtitleStyle}
+										className={`text-xs ${
+											dark ? "text-gray-400" : "text-gray-500"
+										}`}
 									>
 										{stat.subtitle}
 									</p>
 								</div>
 								<div className="flex-shrink-0 ml-4">
 									<div
-										className="w-12 h-12 rounded-full flex items-center justify-center text-white"
-										style={{
-											backgroundColor: stat.alert ? "#EF4444" : "#1F3A5F",
-										}}
+										className={`w-12 h-12 rounded-full flex items-center justify-center text-white ${
+											stat.alert ? "bg-red-500" : "bg-blue-900"
+										}`}
 									>
 										<stat.icon size={24} />
 									</div>
@@ -182,12 +175,14 @@ const SosialPage = () => {
 
 				{/* Row 2: Statistik Kesehatan */}
 				<div
-					className="rounded-xl shadow-sm p-6 mb-6"
-					style={cardStyle}
+					className={`rounded-xl shadow-sm p-6 mb-6 ${
+						dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+					}`}
 				>
 					<h3
-						className="text-lg font-semibold mb-6"
-						style={textStyle}
+						className={`text-lg font-semibold mb-6 ${
+							dark ? "text-white" : "text-gray-800"
+						}`}
 					>
 						Statistik Kesehatan
 					</h3>
@@ -196,34 +191,34 @@ const SosialPage = () => {
 							<div key={index}>
 								<div className="flex items-center justify-between mb-2">
 									<span
-										className="text-sm font-medium"
-										style={textStyle}
+										className={`text-sm font-medium ${
+											dark ? "text-white" : "text-gray-800"
+										}`}
 									>
 										{item.label}
 									</span>
 									<span
-										className="text-sm font-semibold"
-										style={
+										className={`text-sm font-semibold ${
 											item.isAlert
-												? { color: "#EF4444" }
-												: textStyle
-										}
+												? "text-red-500"
+												: dark
+												? "text-white"
+												: "text-gray-800"
+										}`}
 									>
 										{item.value}%
 									</span>
 								</div>
 								<div
-									className="w-full rounded-full h-2"
-									style={{ backgroundColor: dark ? "#334155" : "#E5E7EB" }}
+									className={`w-full rounded-full h-2 ${
+										dark ? "bg-slate-700" : "bg-gray-200"
+									}`}
 								>
 									<div
-										className="h-2 rounded-full transition-all"
-										style={{
-											width: `${item.value}%`,
-											backgroundColor: item.isAlert
-												? "#EF4444"
-												: "#1F3A5F",
-										}}
+										className={`h-2 rounded-full transition-all ${
+											item.isAlert ? "bg-red-500" : "bg-blue-900"
+										}`}
+										style={{ width: `${item.value}%` }}
 									/>
 								</div>
 							</div>
@@ -232,15 +227,17 @@ const SosialPage = () => {
 				</div>
 
 				{/* Row 3: Jadwal Posyandu & Pendidikan */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
 					{/* Jadwal Posyandu */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<h3
-							className="text-lg font-semibold mb-4"
-							style={textStyle}
+							className={`text-lg font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Jadwal Posyandu
 						</h3>
@@ -248,32 +245,29 @@ const SosialPage = () => {
 							{posyanduSchedule.map((item, index) => (
 								<div
 									key={index}
-									className="p-4 rounded-lg"
-									style={{
-										backgroundColor: dark ? "#334155" : "#F9FAFB",
-									}}
+									className={`p-4 rounded-lg ${
+										dark ? "bg-slate-700" : "bg-gray-50"
+									}`}
 								>
 									<div className="flex items-center justify-between">
 										<div>
 											<p
-												className="text-sm font-medium"
-												style={textStyle}
+												className={`text-sm font-medium ${
+													dark ? "text-white" : "text-gray-800"
+												}`}
 											>
 												{item.nama}
 											</p>
 											<p
-												className="text-xs mt-1"
-												style={subtitleStyle}
+												className={`text-xs mt-1 ${
+													dark ? "text-gray-400" : "text-gray-500"
+												}`}
 											>
 												{item.tanggal}
 											</p>
 										</div>
 										<span
-											className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium"
-											style={{
-												backgroundColor: "#DBEAFE",
-												color: "#1E3A5F",
-											}}
+											className="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-900"
 										>
 											{item.jam}
 										</span>
@@ -285,12 +279,14 @@ const SosialPage = () => {
 
 					{/* Pendidikan Section */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<h3
-							className="text-lg font-semibold mb-4"
-							style={textStyle}
+							className={`text-lg font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Pendidikan
 						</h3>
@@ -298,17 +294,17 @@ const SosialPage = () => {
 							{educationStats.map((item, index) => (
 								<div
 									key={index}
-									className="flex items-center justify-between py-2"
-									style={{
-										borderBottom: `1px solid ${dark ? "#334155" : "#F3F4F6"}`,
-									}}
+									className={`flex items-center justify-between py-2 ${
+										dark ? "border-b border-slate-700" : "border-b border-gray-100"
+									}`}
 								>
-									<span className="text-sm" style={subtitleStyle}>
+									<span className="text-sm" style={{ color: dark ? "#9CA3AF" : "#6B7280" }}>
 										{item.level}
 									</span>
 									<span
-										className="text-sm font-semibold"
-										style={textStyle}
+										className={`text-sm font-semibold ${
+											dark ? "text-white" : "text-gray-800"
+										}`}
 									>
 										{item.value}
 									</span>
@@ -318,8 +314,9 @@ const SosialPage = () => {
 
 						{/* Info Sekolah */}
 						<h4
-							className="text-base font-semibold mb-4"
-							style={textStyle}
+							className={`text-base font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Info Sekolah
 						</h4>
@@ -327,17 +324,17 @@ const SosialPage = () => {
 							{schoolInfo.map((item, index) => (
 								<div
 									key={index}
-									className="flex items-center justify-between py-3 px-4 rounded-lg"
-									style={{
-										backgroundColor: dark ? "#334155" : "#F9FAFB",
-									}}
+									className={`flex items-center justify-between py-3 px-4 rounded-lg ${
+										dark ? "bg-slate-700" : "bg-gray-50"
+									}`}
 								>
-									<span className="text-sm" style={subtitleStyle}>
+									<span className="text-sm" style={{ color: dark ? "#9CA3AF" : "#6B7280" }}>
 										{item.label}
 									</span>
 									<span
-										className="text-lg font-bold"
-										style={textStyle}
+										className={`text-lg font-bold ${
+											dark ? "text-white" : "text-gray-800"
+										}`}
 									>
 										{item.value}
 									</span>
@@ -348,22 +345,23 @@ const SosialPage = () => {
 				</div>
 
 				{/* Row 4: Beasiswa Desa & Kalender Event Budaya */}
-				<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 					{/* Beasiswa Desa */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<div className="flex items-center justify-between mb-6">
 							<h3
-								className="text-lg font-semibold"
-								style={textStyle}
+								className={`text-lg font-semibold ${
+									dark ? "text-white" : "text-gray-800"
+								}`}
 							>
 								Beasiswa Desa
 							</h3>
 							<div
-								className="w-12 h-12 rounded-full flex items-center justify-center text-white"
-								style={{ backgroundColor: "#22C55E" }}
+								className="w-12 h-12 rounded-full flex items-center justify-center text-white bg-green-500"
 							>
 								<IconAward size={24} />
 							</div>
@@ -372,39 +370,39 @@ const SosialPage = () => {
 						{/* Two centered metrics */}
 						<div className="grid grid-cols-2 gap-4 mb-6">
 							<div
-								className="p-4 rounded-lg text-center"
-								style={{
-									backgroundColor: dark ? "#334155" : "#F9FAFB",
-								}}
+								className={`p-4 rounded-lg text-center ${
+									dark ? "bg-slate-700" : "bg-gray-50"
+								}`}
 							>
 								<p
-									className="text-3xl font-bold mb-1"
-									style={textStyle}
+									className={`text-3xl font-bold mb-1 ${
+										dark ? "text-white" : "text-gray-800"
+									}`}
 								>
 									{scholarshipData.penerima}
 								</p>
 								<p
-									className="text-xs"
-									style={subtitleStyle}
+									className={`text-xs ${
+										dark ? "text-gray-400" : "text-gray-500"
+									}`}
 								>
 									Penerima Beasiswa
 								</p>
 							</div>
 							<div
-								className="p-4 rounded-lg text-center"
-								style={{
-									backgroundColor: dark ? "#334155" : "#F9FAFB",
-								}}
+								className={`p-4 rounded-lg text-center ${
+									dark ? "bg-slate-700" : "bg-gray-50"
+								}`}
 							>
 								<p
-									className="text-3xl font-bold mb-1"
-									style={{ color: "#22C55E" }}
+									className={`text-3xl font-bold mb-1 text-green-500`}
 								>
 									{scholarshipData.dana}
 								</p>
 								<p
-									className="text-xs"
-									style={subtitleStyle}
+									className={`text-xs ${
+										dark ? "text-gray-400" : "text-gray-500"
+									}`}
 								>
 									Dana Tersalurkan
 								</p>
@@ -413,8 +411,9 @@ const SosialPage = () => {
 
 						{/* Footer text */}
 						<p
-							className="text-center text-sm"
-							style={subtitleStyle}
+							className={`text-center text-sm ${
+								dark ? "text-gray-400" : "text-gray-500"
+							}`}
 						>
 							Tahun Ajaran {scholarshipData.tahunAjaran}
 						</p>
@@ -422,12 +421,14 @@ const SosialPage = () => {
 
 					{/* Kalender Event Budaya */}
 					<div
-						className="rounded-xl shadow-sm p-6"
-						style={cardStyle}
+						className={`rounded-xl shadow-sm p-6 ${
+							dark ? "bg-slate-800 border border-slate-800" : "bg-white border border-white"
+						}`}
 					>
 						<h3
-							className="text-lg font-semibold mb-4"
-							style={textStyle}
+							className={`text-lg font-semibold mb-4 ${
+								dark ? "text-white" : "text-gray-800"
+							}`}
 						>
 							Kalender Event Budaya
 						</h3>
@@ -435,36 +436,34 @@ const SosialPage = () => {
 							{culturalEvents.map((event, index) => (
 								<div
 									key={index}
-									className="flex items-start gap-3 p-4 rounded-lg"
-									style={{
-										backgroundColor: dark ? "#334155" : "#F9FAFB",
-									}}
+									className={`flex items-start gap-3 p-4 rounded-lg ${
+										dark ? "bg-slate-700" : "bg-gray-50"
+									}`}
 								>
 									<div
-										className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0"
-										style={{
-											backgroundColor: "#DBEAFE",
-											color: "#1E3A5F",
-										}}
+										className="w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 bg-blue-100 text-blue-900"
 									>
 										<IconCalendarEvent size={20} />
 									</div>
 									<div className="flex-1">
 										<p
-											className="text-sm font-medium"
-											style={textStyle}
+											className={`text-sm font-medium ${
+												dark ? "text-white" : "text-gray-800"
+											}`}
 										>
 											{event.nama}
 										</p>
 										<p
-											className="text-xs mt-1"
-											style={subtitleStyle}
+											className={`text-xs mt-1 ${
+												dark ? "text-gray-400" : "text-gray-500"
+											}`}
 										>
 											{event.tanggal}
 										</p>
 										<p
-											className="text-xs mt-1"
-											style={subtitleStyle}
+											className={`text-xs mt-1 ${
+												dark ? "text-gray-400" : "text-gray-500"
+											}`}
 										>
 											Location: {event.lokasi}
 										</p>
diff --git a/src/index.css b/src/index.css
index f1d8c73..3dc36b0 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1 +1,100 @@
 @import "tailwindcss";
+
+/* Custom CSS variables for Tailwind */
+:root {
+	/* Darmasaba Navy Colors */
+	--darmasaba-navy-50: #E1E4F2;
+	--darmasaba-navy-100: #B9C2DD;
+	--darmasaba-navy-200: #91A0C9;
+	--darmasaba-navy-300: #697EBA;
+	--darmasaba-navy-400: #4C6CAE;
+	--darmasaba-navy-500: #3B5B97;
+	--darmasaba-navy-600: #2C497F;
+	--darmasaba-navy-700: #1E3766;
+	--darmasaba-navy-800: #12264D;
+	--darmasaba-navy-900: #071833;
+	--darmasaba-navy: #1E3A5F;
+
+	/* Darmasaba Blue Colors */
+	--darmasaba-blue-50: #E3F0FF;
+	--darmasaba-blue-100: #B6D9FF;
+	--darmasaba-blue-200: #89C2FF;
+	--darmasaba-blue-300: #5CA9FF;
+	--darmasaba-blue-400: #3B8FFF;
+	--darmasaba-blue-500: #237AE0;
+	--darmasaba-blue-600: #1C6BBF;
+	--darmasaba-blue-700: #155BA0;
+	--darmasaba-blue-800: #0E4980;
+	--darmasaba-blue-900: #073260;
+	--darmasaba-blue: #3B82F6;
+
+	/* Darmasaba Success Colors */
+	--darmasaba-success-50: #E3F9E7;
+	--darmasaba-success-100: #BFEEC7;
+	--darmasaba-success-200: #9BD8A7;
+	--darmasaba-success-300: #77C387;
+	--darmasaba-success-400: #5DB572;
+	--darmasaba-success-500: #499A5D;
+	--darmasaba-success-600: #3C7F4A;
+	--darmasaba-success-700: #2F6438;
+	--darmasaba-success-800: #234926;
+	--darmasaba-success-900: #17301B;
+	--darmasaba-success: #22C55E;
+
+	/* Darmasaba Warning Colors */
+	--darmasaba-warning-50: #FFF8E1;
+	--darmasaba-warning-100: #FEE7B3;
+	--darmasaba-warning-200: #FDD785;
+	--darmasaba-warning-300: #FDC757;
+	--darmasaba-warning-400: #FBBF3B;
+	--darmasaba-warning-500: #E1AC23;
+	--darmasaba-warning-600: #C2981D;
+	--darmasaba-warning-700: #A38418;
+	--darmasaba-warning-800: #856F12;
+	--darmasaba-warning-900: #675A0D;
+	--darmasaba-warning: #FACC15;
+
+	/* Darmasaba Danger Colors */
+	--darmasaba-danger-50: #FFE3E3;
+	--darmasaba-danger-100: #FFBABA;
+	--darmasaba-danger-200: #FF9191;
+	--darmasaba-danger-300: #FF6868;
+	--darmasaba-danger-400: #FA4B4B;
+	--darmasaba-danger-500: #E03333;
+	--darmasaba-danger-600: #C22A2A;
+	--darmasaba-danger-700: #A32020;
+	--darmasaba-danger-800: #851616;
+	--darmasaba-danger-900: #670C0C;
+	--darmasaba-danger: #EF4444;
+
+	/* Darmasaba Background */
+	--darmasaba-background: #F5F8FB;
+
+	/* Standard colors for dark mode */
+	--slate-900: #0F172A;
+	--slate-800: #1E293B;
+	--slate-700: #334155;
+	--slate-600: #475569;
+	--gray-50: #F9FAFB;
+	--gray-100: #F3F4F6;
+	--gray-200: #E5E7EB;
+	--gray-600: #4B5563;
+	--gray-700: #1F2937;
+	--gray-400: #9CA3AF;
+	--gray-500: #6B7280;
+	--gray-800: #1F2937;
+	--blue-50: #EFF6FF;
+	--blue-100: #DBEAFE;
+	--blue-900: #1E3A5F;
+	--red-500: #EF4444;
+	--green-500: #22C55E;
+}
+
+/* Dark mode support */
+[data-mantine-color-scheme="dark"] {
+	color-scheme: dark;
+}
+
+[data-mantine-color-scheme="light"] {
+	color-scheme: light;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index 3623a49..4a9d1b2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,15 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+	content: [
+		"./src/index.html",
+		"./public/**/*.html",
+		"./src/**/*.{js,ts,jsx,tsx}",
+	],
 	theme: {
 		extend: {
 			colors: {
 				"darmasaba-navy": {
-					DEFAULT: "#1E3A5F", // Primary navy color
+					DEFAULT: "#1E3A5F",
 					50: "#E1E4F2",
 					100: "#B9C2DD",
 					200: "#91A0C9",
@@ -18,7 +22,7 @@ module.exports = {
 					900: "#071833",
 				},
 				"darmasaba-blue": {
-					DEFAULT: "#3B82F6", // Primary blue color
+					DEFAULT: "#3B82F6",
 					50: "#E3F0FF",
 					100: "#B6D9FF",
 					200: "#89C2FF",