diff --git a/src/pages/tentang-bpa/index.tsx b/src/pages/tentang-bpa/index.tsx
index cd0162b..8f1ef40 100644
--- a/src/pages/tentang-bpa/index.tsx
+++ b/src/pages/tentang-bpa/index.tsx
@@ -19,7 +19,7 @@ const TentangBpa = () => {
       <section className="flex-grow flex flex-col md:flex-row items-center justify-center w-full overflow-x-clip relative h-fit">
         {/* nav */}
         <section className="h-full w-full flex flex-col items-start justify-start gap-2 px-4 self-stretch border-r-2 md:w-[210px]">
-          <div className="block md:fixed top-0 left-0 md:px-4 md:h-[100svh] md:shadow-lg">
+          <div className="block md:fixed top-0 left-0 md:px-4 md:h-[100svh] md:shadow-lg overflow-y-auto">
             <div className="w-fit h-[4.5rem] hidden md:flex items-center gap-2">
               <div className={`h-4 min-h-full py-2 transition-all duration-300`}>
                 <Image
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 5731151..d79b9ef 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -12,6 +12,18 @@
   }
 }
 
+/* Scrollbar */
+
+::-webkit-scrollbar {
+  width: 12px;
+  background-color: #f5f8fb;
+}
+
+::-webkit-scrollbar-thumb {
+  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.1);
+  background-color: #d3d5d7;
+}
+
 /* loader */
 .loader {
   width: fit-content;