diff --git a/src/app/globals.css b/src/app/globals.css
index 0de3fdc..e2f1b3d 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -102,6 +102,11 @@ html { scroll-padding-top: var(--anchor-offset); }
   border: 1px solid var(--border);
   border-radius: 12px;
 }
+.card-simple {
+  background: var(--surface-2);
+  border: 1px solid var(--border);
+  border-radius: 12px;
+}
 
 .frosted {
   background: rgba(255, 255, 255, 0.04);
diff --git a/src/app/hack/[slug]/page.tsx b/src/app/hack/[slug]/page.tsx
index 23a91a3..450b744 100644
--- a/src/app/hack/[slug]/page.tsx
+++ b/src/app/hack/[slug]/page.tsx
@@ -332,7 +332,7 @@ export default async function HackDetail({ params }: HackDetailProps) {
         <div className="space-y-6 lg:min-w-[640px]">
           <Gallery images={images} title={hack.title} />
 
-          <div className="card p-5">
+          <div className="card-simple p-5">
             <h2 className="text-2xl font-semibold tracking-tight">About this hack</h2>
             <div className="prose prose-sm mt-3 max-w-none text-foreground/80">
               <ReactMarkdown
diff --git a/src/components/Hack/Gallery.tsx b/src/components/Hack/Gallery.tsx
index 7c5d4e8..3e12f53 100644
--- a/src/components/Hack/Gallery.tsx
+++ b/src/components/Hack/Gallery.tsx
@@ -18,7 +18,7 @@ export default function Gallery({ images, title }: { images: string[]; title: st
     };
   }, [emblaApi]);
   return (
-    <div className="card p-4">
+    <div className="card-simple p-4">
       <div className="relative aspect-[16/9] w-full overflow-hidden" ref={emblaRef}>
         <div className="flex h-full">
           {images.map((src, idx) => (
diff --git a/src/components/Hack/HackEditForm.tsx b/src/components/Hack/HackEditForm.tsx
index 4b527b9..c693799 100644
--- a/src/components/Hack/HackEditForm.tsx
+++ b/src/components/Hack/HackEditForm.tsx
@@ -224,7 +224,7 @@ export default function HackEditForm({ slug, initial }: HackEditFormProps) {
   return (
     <div className="mt-6 flex flex-col gap-6 lg:grid lg:grid-cols-[minmax(0,1fr)_360px]">
       <div className="space-y-6">
-        <div className="card p-5">
+        <div className="card-simple p-5">
             <div className="flex items-center justify-between">
               <h2 className="text-xl font-semibold tracking-tight">Content</h2>
               <div className="flex items-center gap-3">