diff --git a/src/app/courses/[courseId]/layout.tsx b/src/app/courses/[courseId]/layout.tsx
index f134db9b4..e6c279ddd 100644
--- a/src/app/courses/[courseId]/layout.tsx
+++ b/src/app/courses/[courseId]/layout.tsx
@@ -1,4 +1,5 @@
 import { QueryParams } from '@/actions/types';
+import SearchBar from '@/components/search/SearchBar';
 import { Sidebar } from '@/components/Sidebar';
 import { getFullCourseContent } from '@/db/course';
 import { authOptions } from '@/lib/auth';
@@ -49,7 +50,10 @@ const Layout = async ({
 
   return (
     <div className="relative flex min-h-screen flex-col py-24">
-      <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} />
+      <div className="flex justify-between gap-8">
+        <SearchBar />
+        <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} />
+      </div>
       {children}
     </div>
   );
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 1266360a4..347d09838 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -177,7 +177,7 @@ export function Sidebar({
             variants={sidebarVariants}
             className="fixed right-0 top-0 z-[99999] flex h-screen w-full flex-col gap-4 overflow-y-auto rounded-r-lg border-l border-primary/10 bg-neutral-50 dark:bg-neutral-900 md:max-w-[30vw]"
           >
-            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 p-5">
+            <div className="sticky top-0 z-10 flex items-center justify-between border-b border-primary/10 bg-neutral-50 p-5 dark:bg-neutral-900">
               <h4 className="text-xl font-bold tracking-tighter text-primary lg:text-2xl">
                 Course Content
               </h4>