diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index 0f23080..eac8f98 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -110,9 +110,12 @@ export default function Navbar() {
 
           {sidebar ? (
             <div className="fixed top-0 bottom-0 right-0 left-0 bg-gray-500 bg-opacity-10 backdrop-blur-sm flex items-center fade-in z-30">
-              <ClickAwayHandler onClickOutside={toggleSidebar}>
-                <div className="slide-right shadow-lg">
-                  <Sidebar />
+              <ClickAwayHandler
+                className="h-full"
+                onClickOutside={toggleSidebar}
+              >
+                <div className="slide-right h-full shadow-lg">
+                  <Sidebar className="" />
                 </div>
               </ClickAwayHandler>
             </div>
diff --git a/components/Sidebar.tsx b/components/Sidebar.tsx
index 36a18a1..b04d728 100644
--- a/components/Sidebar.tsx
+++ b/components/Sidebar.tsx
@@ -51,7 +51,7 @@ export default function Sidebar({ className }: { className?: string }) {
 
   return (
     <div
-      className={`bg-gray-100 h-screen w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
+      className={`bg-gray-100 h-full w-64 xl:w-80 overflow-y-auto border-solid border-r-sky-100 px-2 border z-20 ${className}`}
     >
       <div className="flex justify-center gap-2 mt-2">
         <Link
diff --git a/layouts/MainLayout.tsx b/layouts/MainLayout.tsx
index de0dea9..b64d93e 100644
--- a/layouts/MainLayout.tsx
+++ b/layouts/MainLayout.tsx
@@ -33,7 +33,7 @@ export default function MainLayout({ children }: Props) {
 
         <div className="flex">
           <div className="hidden lg:block">
-            <Sidebar className="fixed" />
+            <Sidebar className="fixed top-0" />
           </div>
 
           <div className="w-full lg:ml-64 xl:ml-80">