diff --git a/bun.lockb b/bun.lockb
index 95aef60..87a6104 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 449e255..f6666da 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@notionhq/client": "^2.2.15",
-    "@tailwindcss/typography": "^0.5.15"
+    "@tailwindcss/typography": "^0.5.15",
+    "tailwind-scrollbar": "^3.1.0"
   }
 }
diff --git a/src/components/Blogs.astro b/src/components/Blogs.astro
index cecaaf8..29548ab 100644
--- a/src/components/Blogs.astro
+++ b/src/components/Blogs.astro
@@ -6,45 +6,44 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { getCollection } from "astro:content";
-import ScrollArea from "@/components/ScrollArea";
 
 const blogs = await getCollection("database");
 ---
 
 <section class="text-red-100 max-h-dvh grid grid-rows-[auto_1fr] gap-12">
-  <div class="pl-1">
+  <div class="pl-9">
     <h1 class="text-7xl text-red-500 font-medium">Blogs</h1>
     <p class="pl-2 py-1 text-xl">astro + notion</p>
   </div>
-  <div class="overflow-y-scroll">
-    <ScrollArea>
-      <div class="space-y-8">
-        {
-          blogs.map((blog: any) => {
-            const slug =
-              blog.data.properties.Slug.rich_text[0].plain_text.replaceAll(
-                '"',
-                ""
-              );
-            const title = blog.data.properties.Name.title[0].plain_text;
-            const description =
-              blog.data.properties.Description?.rich_text[0].plain_text;
-
-            return (
-              <Card className="bg-card/30 backdrop-blur-2xl max-w-screen-sm">
-                <CardHeader>
-                  <a href={slug}>
-                    <CardTitle>{title}</CardTitle>
-                  </a>
-                  <CardDescription className="line-clamp-5">
-                    {description}
-                  </CardDescription>
-                </CardHeader>
-              </Card>
+  <div
+    class="overflow-y-scroll px-8 scrollbar-track-transparent scrollbar-corner-transparent scroll-smooth scollbar scrollbar-thin scrollbar-thumb-red-900 scrollbar-thumb-rounded-full"
+  >
+    <div class="space-y-8">
+      {
+        blogs.map((blog: any) => {
+          const slug =
+            blog.data.properties.Slug.rich_text[0].plain_text.replaceAll(
+              '"',
+              ""
             );
-          })
-        }
-      </div>
-    </ScrollArea>
+          const title = blog.data.properties.Name.title[0].plain_text;
+          const description =
+            blog.data.properties.Description?.rich_text[0].plain_text;
+
+          return (
+            <Card className="bg-card/30 backdrop-blur-2xl max-w-screen-sm">
+              <CardHeader>
+                <a href={slug}>
+                  <CardTitle>{title}</CardTitle>
+                </a>
+                <CardDescription className="line-clamp-5">
+                  {description}
+                </CardDescription>
+              </CardHeader>
+            </Card>
+          );
+        })
+      }
+    </div>
   </div>
 </section>
diff --git a/src/components/ScrollArea.tsx b/src/components/ScrollArea.tsx
deleted file mode 100644
index 398756b..0000000
--- a/src/components/ScrollArea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
-  ScrollArea as _ScrollArea,
-  ScrollBar,
-} from "@/components/ui/scroll-area";
-import type { ReactNode } from "react";
-
-export default function ScrollArea({
-  children,
-}: {
-  children: ReactNode | JSX.Element;
-}) {
-  return (
-    <_ScrollArea>
-      {children}
-      <ScrollBar />
-    </_ScrollArea>
-  );
-}
diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
deleted file mode 100644
index cf253cf..0000000
--- a/src/components/ui/scroll-area.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-import { cn } from "@/lib/utils"
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
-
-export { ScrollArea, ScrollBar }
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 13221cc..9c94bd3 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -53,5 +53,9 @@ export default {
       },
     },
   },
-  plugins: [require("@tailwindcss/typography"), require("tailwindcss-animate")],
+  plugins: [
+    require("tailwindcss-animate"),
+    require("tailwind-scrollbar"),
+    require("@tailwindcss/typography"),
+  ],
 };