diff --git a/apps/client/app/components/ui/card.tsx b/apps/client/app/components/ui/card.tsx
index 4c05831..4e96561 100644
--- a/apps/client/app/components/ui/card.tsx
+++ b/apps/client/app/components/ui/card.tsx
@@ -1,17 +1,26 @@
-import * as React from "react";
+import type * as React from "react";
 
 import { cn } from "~/lib/utils";
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+function Card({ className, children, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card"
-			className={cn(
-				"bg-card text-card-foreground flex flex-col gap-6 border-2 py-6 shadow-sm",
-				className,
-			)}
+			className={cn("bg-card text-card-foreground relative flex flex-col gap-6 border-2 py-6 shadow-sm", className)}
 			{...props}
-		/>
+		>
+			<span aria-hidden="true" className="pointer-events-none absolute inset-0 z-10 select-none">
+				<span className="absolute left-[-2px] top-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute left-[-2px] top-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute right-[-2px] top-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute right-[-2px] top-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute left-[-2px] bottom-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute left-[-2px] bottom-[-2px] h-4 w-0.5 bg-white/80" />
+				<span className="absolute right-[-2px] bottom-[-2px] h-0.5 w-4 bg-white/80" />
+				<span className="absolute right-[-2px] bottom-[-2px] h-4 w-0.5 bg-white/80" />
+			</span>
+			{children}
+		</div>
 	);
 }
 
@@ -29,64 +38,31 @@ function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-title"
-			className={cn("leading-none font-semibold", className)}
-			{...props}
-		/>
-	);
+	return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
 }
 
 function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-description"
-			className={cn("text-muted-foreground text-sm", className)}
-			{...props}
-		/>
-	);
+	return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
 }
 
 function CardAction({ className, ...props }: React.ComponentProps<"div">) {
 	return (
 		<div
 			data-slot="card-action"
-			className={cn(
-				"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-				className,
-			)}
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
 			{...props}
 		/>
 	);
 }
 
 function CardContent({ className, ...props }: React.ComponentProps<"div">) {
-	return (
-		<div
-			data-slot="card-content"
-			className={cn("px-6", className)}
-			{...props}
-		/>
-	);
+	return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
 }
 
 function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
 	return (
-		<div
-			data-slot="card-footer"
-			className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-			{...props}
-		/>
+		<div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
 	);
 }
 
-export {
-	Card,
-	CardHeader,
-	CardFooter,
-	CardTitle,
-	CardAction,
-	CardDescription,
-	CardContent,
-};
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };