diff --git a/src/components/pageCard.svelte b/src/components/pageCard.svelte
index bae8938..870f874 100644
--- a/src/components/pageCard.svelte
+++ b/src/components/pageCard.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import type { Snippet } from "svelte";
   import { cn } from "@/utils/cn";
+  import ScrollArea from "./ui/scroll-area/scroll-area.svelte";
+  import { ScrollAreaScrollbar } from "./ui/scroll-area";
 
   interface PageCardProps {
     children: Snippet;
@@ -21,14 +23,16 @@
       containerClass,
     )}
   >
-    <div
+    <ScrollArea
+      maskHeight={50}
+      maskClassName="before:from-transparent after:from-white dark:before:from-[#0f0f0f] dark:after:from-[#0f0f0f]"
       class={cn(
-        "max-h-[calc(100vh-4.5rem)] min-h-[calc(100vh-4.5rem)]",
-        "overflow-hidden overflow-y-auto",
+        "flex size-full max-h-[calc(100vh-4.5rem)] min-h-[calc(100vh-4.5rem)] flex-col",
         contentCardClass,
       )}
     >
+      <ScrollAreaScrollbar orientation="vertical" class="relative z-99999" />
       {@render children?.()}
-    </div>
+    </ScrollArea>
   </div>
 </div>