diff --git a/src/components/help-page.tsx b/src/components/help-page.tsx
index 1501704..d1183e4 100644
--- a/src/components/help-page.tsx
+++ b/src/components/help-page.tsx
@@ -159,7 +159,9 @@ const HelpPage = () => {
 						p="lg"
 						style={{
 							textAlign: "center",
-							borderColor: dark ? "#141D34" : "white",
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+							transition: "transform 0.15s ease, box-shadow 0.15s ease",
 						}}
 						h="100%"
 					>
@@ -179,7 +181,11 @@ const HelpPage = () => {
 						{/* Panduan Memulai */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
-								style={{ borderColor: dark ? "#141D34" : "white" }}
+								style={{
+									borderColor: dark ? "#334155" : "white",
+									boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+									transition: "transform 0.15s ease, box-shadow 0.15s ease",
+								}}
 								bg={dark ? "#1E293B" : "white"}
 								icon={<IconBook size={24} color="white" />}
 								title="Panduan Memulai"
@@ -209,7 +215,11 @@ const HelpPage = () => {
 						{/* Video Tutorial */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
-								style={{ borderColor: dark ? "#141D34" : "white" }}
+								style={{
+									borderColor: dark ? "#334155" : "white",
+									boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+									transition: "transform 0.15s ease, box-shadow 0.15s ease",
+								}}
 								bg={dark ? "#1E293B" : "white"}
 								icon={<IconVideo size={24} color="white" />}
 								title="Video Tutorial"
@@ -239,7 +249,11 @@ const HelpPage = () => {
 						{/* FAQ */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
-								style={{ borderColor: dark ? "#141D34" : "white" }}
+								style={{
+									borderColor: dark ? "#334155" : "white",
+									boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+									transition: "transform 0.15s ease, box-shadow 0.15s ease",
+								}}
 								bg={dark ? "#1E293B" : "white"}
 								icon={<IconHelpCircle size={24} color="white" />}
 								title="FAQ"
@@ -271,7 +285,11 @@ const HelpPage = () => {
 						{/* Hubungi Support */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
-								style={{ borderColor: dark ? "#141D34" : "white" }}
+								style={{
+									borderColor: dark ? "#334155" : "white",
+									boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+									transition: "transform 0.15s ease, box-shadow 0.15s ease",
+								}}
 								bg={dark ? "#1E293B" : "white"}
 								icon={<IconHeadphones size={24} color="white" />}
 								title="Hubungi Support"
@@ -306,7 +324,11 @@ const HelpPage = () => {
 						{/* Dokumentasi */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
-								style={{ borderColor: dark ? "#141D34" : "white" }}
+								style={{
+									borderColor: dark ? "#334155" : "white",
+									boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+									transition: "transform 0.15s ease, box-shadow 0.15s ease",
+								}}
 								bg={dark ? "#1E293B" : "white"}
 								icon={<IconFileText size={24} color="white" />}
 								title="Dokumentasi"
@@ -338,7 +360,11 @@ const HelpPage = () => {
 						{/* Jenna - Virtual Assistant */}
 						<Grid.Col span={{ base: 12, sm: 6, md: 4 }}>
 							<HelpCard
-								style={{ borderColor: dark ? "#141D34" : "white" }}
+								style={{
+									borderColor: dark ? "#334155" : "white",
+									boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+									transition: "transform 0.15s ease, box-shadow 0.15s ease",
+								}}
 								bg={dark ? "#1E293B" : "white"}
 								icon={<IconMessage size={24} color="white" />}
 								title="Jenna - Virtual Assistant"
diff --git a/src/components/keamanan-page.tsx b/src/components/keamanan-page.tsx
index 3eb2481..58c94bd 100644
--- a/src/components/keamanan-page.tsx
+++ b/src/components/keamanan-page.tsx
@@ -127,7 +127,11 @@ const KeamananPage = () => {
 										radius="md"
 										withBorder
 										bg={dark ? "#1E293B" : "white"}
-										style={{ borderColor: dark ? "#141D34" : "white" }}
+										style={{
+											borderColor: dark ? "#334155" : "white",
+											boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+											transition: "transform 0.15s ease, box-shadow 0.15s ease",
+										}}
 										h="100%"
 									>
 										<Group justify="space-between" align="center">
@@ -166,7 +170,11 @@ const KeamananPage = () => {
 							radius="md"
 							withBorder
 							bg={dark ? "#1E293B" : "white"}
-							style={{ borderColor: dark ? "#141D34" : "white" }}
+							style={{
+								borderColor: dark ? "#334155" : "white",
+								boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+								transition: "transform 0.15s ease, box-shadow 0.15s ease",
+							}}
 							h="100%"
 						>
 							<Title order={3} mb="md" c={dark ? "dark.0" : "black"}>
@@ -253,7 +261,11 @@ const KeamananPage = () => {
 						radius="md"
 						withBorder
 						bg={dark ? "#1E293B" : "white"}
-						style={{ borderColor: dark ? "#141D34" : "white" }}
+						style={{
+							borderColor: dark ? "#334155" : "white",
+							boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+							transition: "transform 0.15s ease, box-shadow 0.15s ease",
+						}}
 						h="100%"
 					>
 						<Stack gap="sm">
diff --git a/src/components/sosial/beasiswa.tsx b/src/components/sosial/beasiswa.tsx
index f3518b8..e39269d 100644
--- a/src/components/sosial/beasiswa.tsx
+++ b/src/components/sosial/beasiswa.tsx
@@ -38,7 +38,11 @@ export const Beasiswa = ({ data }: BeasiswaProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 			h={"100%"}
 		>
 			<Group justify="space-between" align="center">
diff --git a/src/components/sosial/event-calendar.tsx b/src/components/sosial/event-calendar.tsx
index c62dcc7..721c06d 100644
--- a/src/components/sosial/event-calendar.tsx
+++ b/src/components/sosial/event-calendar.tsx
@@ -54,7 +54,11 @@ export const EventCalendar = ({ data }: EventCalendarProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
 				Kalender Event Budaya
@@ -68,7 +72,6 @@ export const EventCalendar = ({ data }: EventCalendarProps) => {
 						withBorder
 						bg={dark ? "#263852ff" : "#F1F5F9"}
 						style={{ borderColor: dark ? "#263852ff" : "#F1F5F9" }}
-						hoverable
 					>
 						<Group justify="space-between" mb="xs">
 							<Group gap="sm" align="center">
diff --git a/src/components/sosial/health-stats.tsx b/src/components/sosial/health-stats.tsx
index 8eb1510..3552576 100644
--- a/src/components/sosial/health-stats.tsx
+++ b/src/components/sosial/health-stats.tsx
@@ -38,7 +38,11 @@ export const HealthStats = ({ data }: HealthStatsProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 			h={"100%"}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
diff --git a/src/components/sosial/pendidikan.tsx b/src/components/sosial/pendidikan.tsx
index f1d060b..273b866 100644
--- a/src/components/sosial/pendidikan.tsx
+++ b/src/components/sosial/pendidikan.tsx
@@ -50,7 +50,11 @@ export const Pendidikan = ({ data }: PendidikanProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
 				Pendidikan
diff --git a/src/components/sosial/posyandu-schedule.tsx b/src/components/sosial/posyandu-schedule.tsx
index 570df29..513bf66 100644
--- a/src/components/sosial/posyandu-schedule.tsx
+++ b/src/components/sosial/posyandu-schedule.tsx
@@ -59,7 +59,11 @@ export const PosyanduSchedule = ({ data }: PosyanduScheduleProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Title order={3} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
 				Jadwal Posyandu
diff --git a/src/components/sosial/summary-cards.tsx b/src/components/sosial/summary-cards.tsx
index a3a232f..324ace4 100644
--- a/src/components/sosial/summary-cards.tsx
+++ b/src/components/sosial/summary-cards.tsx
@@ -44,7 +44,11 @@ const SummaryCard = ({
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Group justify="space-between" align="center">
 				<Stack gap={2}>
diff --git a/src/components/umkm/produk-unggulan.tsx b/src/components/umkm/produk-unggulan.tsx
index a1a2da2..5ef80c7 100644
--- a/src/components/umkm/produk-unggulan.tsx
+++ b/src/components/umkm/produk-unggulan.tsx
@@ -78,7 +78,11 @@ export const ProdukUnggulan = ({ data }: ProdukUnggulanProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Stack gap="lg">
 				<MetricCard
diff --git a/src/components/umkm/sales-table.tsx b/src/components/umkm/sales-table.tsx
index 2aa8428..e9c83ef 100644
--- a/src/components/umkm/sales-table.tsx
+++ b/src/components/umkm/sales-table.tsx
@@ -109,7 +109,11 @@ export const SalesTable = ({ data, onDetailClick }: SalesTableProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Group justify="space-between" mb="md">
 				<Title order={4} c={dark ? "dark.0" : "#1e3a5f"}>
diff --git a/src/components/umkm/top-products.tsx b/src/components/umkm/top-products.tsx
index d3994ee..0f1cbc1 100644
--- a/src/components/umkm/top-products.tsx
+++ b/src/components/umkm/top-products.tsx
@@ -85,7 +85,11 @@ export const TopProducts = ({ products }: TopProductsProps) => {
 			withBorder
 			shadow="sm"
 			bg={dark ? "#1E293B" : "white"}
-			style={{ borderColor: dark ? "#141D34" : "#e5e7eb" }}
+			style={{
+				borderColor: dark ? "#334155" : "white",
+				boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1)",
+				transition: "transform 0.15s ease, box-shadow 0.15s ease",
+			}}
 		>
 			<Title order={4} mb="md" c={dark ? "dark.0" : "#1e3a5f"}>
 				Top 3 Produk Terlaris