diff --git a/src/components/CourseView.tsx b/src/components/CourseView.tsx
index 45f5689f9..2924e5d20 100644
--- a/src/components/CourseView.tsx
+++ b/src/components/CourseView.tsx
@@ -38,8 +38,8 @@ export const CourseView = ({
     ? 'folder'
     : courseContent?.value.type;
   return (
-    <div className="flex w-full flex-col gap-8 pb-16 pt-8 xl:pt-[9px]">
-      <div className="flex flex-col gap-4 xl:pt-2">
+    <div className="flex w-full flex-col gap-8 pb-16 pt-8 xl:pt-[9px] relative">
+      <div className="flex flex-col gap-4 xl:pt-2 sticky z-10 top-[120px] py-2 bg-background">
         <BreadCrumbComponent
           course={course}
           contentType={contentType}
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index d113df33b..c6ebfdf50 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -186,7 +186,7 @@ export function Sidebar({
   );
 
   return (
-    <>
+    <div className='sticky top-[72px] z-20 bg-background py-2'>
       <Button
         ref={buttonRef}
         onClick={() => setSidebarOpen((s) => !s)}
@@ -223,7 +223,7 @@ export function Sidebar({
           </motion.div>
         )}
       </AnimatePresence>
-    </>
+    </div>
   );
 }