diff --git a/src/app/courses/[courseId]/layout.tsx b/src/app/courses/[courseId]/layout.tsx
index 827af309b..d4142a173 100644
--- a/src/app/courses/[courseId]/layout.tsx
+++ b/src/app/courses/[courseId]/layout.tsx
@@ -1,5 +1,5 @@
 import { QueryParams } from '@/actions/types';
-import { FilterContent } from '@/components/FilterContent';
+import FilterContainer from '@/components/FilterContainer';
 import { Sidebar } from '@/components/Sidebar';
 import { getFullCourseContent } from '@/db/course';
 import { authOptions } from '@/lib/auth';
@@ -54,7 +54,7 @@ const Layout = async ({
           <Sidebar fullCourseContent={fullCourseContent} courseId={courseId} />
         </div>
         <div>
-          <FilterContent />
+          <FilterContainer />
         </div>
       </div>
 
diff --git a/src/components/FilterContainer.tsx b/src/components/FilterContainer.tsx
new file mode 100644
index 000000000..6a6cf45e6
--- /dev/null
+++ b/src/components/FilterContainer.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { FilterContent } from '@/components/FilterContent';
+
+const FilterContainer = () => {
+  const pathname = usePathname();
+
+  const hideFilter = pathname.split('/').length > 4;
+
+  if (hideFilter) {
+    return null;
+  }
+
+  return <FilterContent />;
+};
+
+export default FilterContainer;