diff --git a/src/app/hack/[slug]/page.tsx b/src/app/hack/[slug]/page.tsx
index 41fd269..ccb0b73 100644
--- a/src/app/hack/[slug]/page.tsx
+++ b/src/app/hack/[slug]/page.tsx
@@ -415,6 +415,7 @@ export default async function HackDetail({ params }: HackDetailProps) {
                 month: "long",
                 day: "numeric",
               })}`}
+              className="card-simple"
             >
               {patchChangelog && patchChangelog.trim().length > 0 ? (
                 <div className="prose prose-sm max-w-none text-foreground/80">
diff --git a/src/app/hack/[slug]/versions/page.tsx b/src/app/hack/[slug]/versions/page.tsx
index 190cbe0..387036c 100644
--- a/src/app/hack/[slug]/versions/page.tsx
+++ b/src/app/hack/[slug]/versions/page.tsx
@@ -88,7 +88,10 @@ export default async function VersionsPage({ params }: VersionsPageProps) {
         </div>
       </div>
 
-      <CollapsibleCard title="Version Status Guide">
+      <CollapsibleCard
+        title="Version Status Guide"
+        className="mb-6 bg-[var(--surface-1)] border border-[var(--border)]/50 rounded-lg"
+      >
         <div className="space-y-5 sm:space-y-2.5 text-sm text-foreground/80">
           <div className="flex flex-col sm:grid sm:grid-cols-[100px_1fr] gap-2 sm:gap-1 items-start">
             <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/20 px-2 py-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400 shrink-0 w-fit">
diff --git a/src/components/Primitives/CollapsibleCard.tsx b/src/components/Primitives/CollapsibleCard.tsx
index a14ec94..9feb663 100644
--- a/src/components/Primitives/CollapsibleCard.tsx
+++ b/src/components/Primitives/CollapsibleCard.tsx
@@ -7,16 +7,17 @@ interface CollapsibleCardProps {
   title: string;
   children: ReactNode;
   defaultExpanded?: boolean;
+  className?: string;
 }
 
-export default function CollapsibleCard({ title, children, defaultExpanded = false }: CollapsibleCardProps) {
+export default function CollapsibleCard({ title, children, defaultExpanded = false, className }: CollapsibleCardProps) {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
   return (
-    <div className="card-simple p-4 sm:p-5">
+    <div className={`px-4 sm:px-5 ${className}`}>
       <button
         onClick={() => setIsExpanded(!isExpanded)}
-        className="w-full flex items-center justify-between gap-2 text-left hover:opacity-80 transition-opacity"
+        className="py-4 sm:py-5 hover:cursor-pointer w-full flex items-center justify-between gap-2 text-left group-hover:opacity-80 transition-opacity"
         aria-expanded={isExpanded}
       >
         <h2 className="text-sm font-semibold text-foreground/90">{title}</h2>
@@ -30,7 +31,7 @@ export default function CollapsibleCard({ title, children, defaultExpanded = fal
       </button>
       <div
         className={`grid transition-all duration-300 ease-in-out ${
-          isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          isExpanded ? "grid-rows-[1fr] pb-4 sm:pb-5" : "grid-rows-[0fr]"
         }`}
       >
         <div className="overflow-hidden">