diff --git a/src/components/ServerCard.tsx b/src/components/ServerCard.tsx
index 98fffa1..f3f6e4b 100644
--- a/src/components/ServerCard.tsx
+++ b/src/components/ServerCard.tsx
@@ -62,7 +62,7 @@ export default function ServerCard({
 	return online ? (
 		<Card
 			className={cn(
-				"flex flex-col items-center justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors",
+				"flex cursor-pointer flex-col items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 dark:hover:ring-stone-700",
 				{
 					"flex-col": fixedTopServerName,
 					"lg:flex-row": !fixedTopServerName,
diff --git a/src/components/ServerCardInline.tsx b/src/components/ServerCardInline.tsx
index e70fb76..d4f1271 100644
--- a/src/components/ServerCardInline.tsx
+++ b/src/components/ServerCardInline.tsx
@@ -58,7 +58,7 @@ export default function ServerCardInline({
 		<section>
 			<Card
 				className={cn(
-					"flex items-center lg:flex-row justify-start gap-3 p-3 md:px-5 cursor-pointer hover:bg-accent/50 transition-colors min-w-[900px] w-full",
+					"flex w-full min-w-[900px] cursor-pointer items-center justify-start gap-3 p-3 transition-all hover:shadow-sm hover:ring-stone-300 md:px-5 lg:flex-row dark:hover:ring-stone-700",
 					{
 						"bg-card/70": customBackgroundImage,
 					},
diff --git a/src/components/ServerDetailOverview.tsx b/src/components/ServerDetailOverview.tsx
index 934ac28..e1cd647 100644
--- a/src/components/ServerDetailOverview.tsx
+++ b/src/components/ServerDetailOverview.tsx
@@ -114,7 +114,7 @@ export default function ServerDetailOverview({
 				{name}
 			</div>
 			<section className="flex flex-wrap gap-2 mt-3">
-				<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+				<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 					<CardContent className="px-1.5 py-1">
 						<section className="flex flex-col items-start gap-0.5">
 							<p className="text-xs text-muted-foreground">
@@ -135,7 +135,7 @@ export default function ServerDetailOverview({
 					</CardContent>
 				</Card>
 				{online && (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -152,7 +152,7 @@ export default function ServerDetailOverview({
 					</Card>
 				)}
 				{version && (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -164,7 +164,7 @@ export default function ServerDetailOverview({
 					</Card>
 				)}
 				{arch && (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -177,7 +177,7 @@ export default function ServerDetailOverview({
 				)}
 
 				{mem_total ? (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -190,7 +190,7 @@ export default function ServerDetailOverview({
 				) : null}
 
 				{disk_total ? (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -206,7 +206,7 @@ export default function ServerDetailOverview({
 					<TooltipProvider delayDuration={100}>
 						<Tooltip>
 							<TooltipTrigger asChild>
-								<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+								<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 									<CardContent className="px-1.5 py-1">
 										<section className="flex flex-col items-start gap-0.5">
 											<p className="text-xs text-muted-foreground">
@@ -236,7 +236,7 @@ export default function ServerDetailOverview({
 			</section>
 			<section className="flex flex-wrap gap-2 mt-1">
 				{platform && (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -251,7 +251,7 @@ export default function ServerDetailOverview({
 					</Card>
 				)}
 				{cpu_info.length > 0 && (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">{"CPU"}</p>
@@ -261,7 +261,7 @@ export default function ServerDetailOverview({
 					</Card>
 				)}
 				{gpu_info.length > 0 && (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">{"GPU"}</p>
@@ -272,7 +272,7 @@ export default function ServerDetailOverview({
 				)}
 			</section>
 			<section className="flex flex-wrap gap-2 mt-1">
-				<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+				<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 					<CardContent className="px-1.5 py-1">
 						<section className="flex flex-col items-start gap-0.5">
 							<p className="text-xs text-muted-foreground">{"Load"}</p>
@@ -283,7 +283,7 @@ export default function ServerDetailOverview({
 					</CardContent>
 				</Card>
 				{net_out_transfer ? (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -302,7 +302,7 @@ export default function ServerDetailOverview({
 					</Card>
 				) : null}
 				{net_in_transfer ? (
-					<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+					<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 						<CardContent className="px-1.5 py-1">
 							<section className="flex flex-col items-start gap-0.5">
 								<p className="text-xs text-muted-foreground">
@@ -347,7 +347,7 @@ export default function ServerDetailOverview({
 			</section>
 
 			<section className="flex flex-wrap gap-2 mt-1">
-				<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+				<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 					<CardContent className="px-1.5 py-1">
 						<section className="flex flex-col items-start gap-0.5">
 							<p className="text-xs text-muted-foreground">
@@ -359,7 +359,7 @@ export default function ServerDetailOverview({
 						</section>
 					</CardContent>
 				</Card>
-				<Card className="rounded-[10px] bg-transparent border-none shadow-none">
+				<Card className="rounded-[10px] bg-transparent border-none shadow-none ring-0">
 					<CardContent className="px-1.5 py-1">
 						<section className="flex flex-col items-start gap-0.5">
 							<p className="text-xs text-muted-foreground">
diff --git a/src/components/ServerOverview.tsx b/src/components/ServerOverview.tsx
index 1fec05e..7888a8e 100644
--- a/src/components/ServerOverview.tsx
+++ b/src/components/ServerOverview.tsx
@@ -47,9 +47,12 @@ export default function ServerOverview({
 				onClick={() => {
 					setStatus("all");
 				}}
-				className={cn("hover:border-blue-500 cursor-pointer transition-all", {
-					"bg-card/70": customBackgroundImage,
-				})}
+				className={cn(
+					"group cursor-pointer transition-all hover:ring-blue-500 dark:hover:ring-blue-600",
+					{
+						"bg-card/70": customBackgroundImage,
+					},
+				)}
 			>
 				<CardContent className="flex h-full items-center px-6 py-3">
 					<section className="flex flex-col gap-1">
@@ -70,12 +73,13 @@ export default function ServerOverview({
 					setStatus("online");
 				}}
 				className={cn(
-					"cursor-pointer hover:ring-green-500 ring-1 ring-transparent transition-all",
+					"cursor-pointer ring-1 transition-all hover:ring-green-500 dark:hover:ring-green-600",
 					{
 						"bg-card/70": customBackgroundImage,
 					},
 					{
-						"ring-green-500 ring-2 border-transparent": status === "online",
+						"border-transparent ring-2 ring-green-500 dark:ring-green-600":
+							status === "online",
 					},
 				)}
 			>
@@ -100,12 +104,13 @@ export default function ServerOverview({
 					setStatus("offline");
 				}}
 				className={cn(
-					"cursor-pointer hover:ring-red-500 ring-1 ring-transparent transition-all",
+					"cursor-pointer ring-1 transition-all hover:ring-red-500 dark:hover:ring-red-600",
 					{
 						"bg-card/70": customBackgroundImage,
 					},
 					{
-						"ring-red-500 ring-2 border-transparent": status === "offline",
+						"border-transparent ring-2 ring-red-500 dark:ring-red-600":
+							status === "offline",
 					},
 				)}
 			>
@@ -126,7 +131,7 @@ export default function ServerOverview({
 			</Card>
 			<Card
 				className={cn(
-					"hover:ring-purple-500 ring-1 ring-transparent transition-all",
+					"group ring-1 hover:ring-purple-500 dark:hover:ring-purple-600",
 					{
 						"bg-card/70": customBackgroundImage,
 					},
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 8d540f1..76bfc99 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -8,7 +8,7 @@ const Card = React.forwardRef<
 	<div
 		ref={ref}
 		className={cn(
-			"rounded-lg border bg-card text-card-foreground shadow-lg shadow-neutral-200/40 dark:shadow-none",
+			"rounded-lg bg-card text-card-foreground shadow-md shadow-stone-200/50 ring ring-stone-200 dark:shadow-none dark:ring-stone-800",
 			className,
 		)}
 		{...props}
diff --git a/src/pages/Server.tsx b/src/pages/Server.tsx
index 42f1361..c219e3a 100644
--- a/src/pages/Server.tsx
+++ b/src/pages/Server.tsx
@@ -445,7 +445,7 @@ export default function Servers() {
 			{inline === "1" && (
 				<section
 					ref={containerRef}
-					className="flex flex-col gap-2 overflow-x-scroll scrollbar-hidden mt-6 server-inline-list"
+					className="flex flex-col gap-2 overflow-x-scroll p-px scrollbar-hidden mt-6 server-inline-list"
 				>
 					{filteredServers.map((serverInfo) => (
 						<ServerCardInline