diff --git a/src/features/Projects/pages/CategoryPage/CategoryPage.tsx b/src/features/Projects/pages/CategoryPage/CategoryPage.tsx
index e5cc0e4..da6c204 100644
--- a/src/features/Projects/pages/CategoryPage/CategoryPage.tsx
+++ b/src/features/Projects/pages/CategoryPage/CategoryPage.tsx
@@ -36,7 +36,7 @@ export default function CategoryPage() {
                 <title>{`${data?.getCategory.title!} Lightning Products`}</title>
                 <meta property="og:title" content={`${data?.getCategory.title!} Lightning Products`} />
             </Helmet>
-            <div className='px-32'>
+            <div className='page-container'>
                 <HeaderImage
                     isLoading={loading}
                     title={data?.getCategory.title!}
diff --git a/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx b/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
index f478999..44bd9cf 100644
--- a/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
+++ b/src/features/Projects/pages/ExplorePage/Categories/Categories.tsx
@@ -19,7 +19,10 @@ const colors = [
 
 export default function Categories() {
 
-    const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({ align: 'start', slidesToScroll: 2 })
+    const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({
+        align: 'start', slidesToScroll: 2,
+        containScroll: "trimSnaps",
+    })
     const { data, loading } = useAllCategoriesQuery();
     const navigate = useNavigate();
 
@@ -52,10 +55,10 @@ export default function Categories() {
                     )}
                 </div>
             </div>
-            <button className={`absolute inset-y-0 w-42 left-0 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} transition-opacity rounded-l-12 bg-gradient-to-r from-gray-700 text-white`} onClick={() => scrollSlides(-1)}>
+            <button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center left-0 -translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400 opacity-0 ${canScrollPrev && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(-1)}>
                 <FaChevronLeft />
             </button>
-            <button className={`absolute inset-y-0 w-42 right-0 opacity-0 ${canScrollNext && 'group-hover:opacity-100'} transition-opacity rounded-r-12 bg-gradient-to-l from-gray-700 text-white`} onClick={() => scrollSlides(1)}>
+            <button className={`absolute text-body6 w-[28px] aspect-square flex justify-center items-center right-0 translate-x-1/2 top-1/2 -translate-y-1/2 rounded-full bg-white text-gray-400  opacity-0 ${canScrollNext && 'group-hover:opacity-100'} active:scale-90 transition-opacity border border-gray-200 shadow-md`} onClick={() => scrollSlides(1)}>
                 <FaChevronRight />
             </button>
         </div>
diff --git a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
index eff9c10..27053cd 100644
--- a/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
+++ b/src/features/Projects/pages/ExplorePage/ExplorePage.tsx
@@ -15,7 +15,7 @@ export default function ExplorePage() {
 
                 <Header />
 
-                <div className="my-32 overflow-hidden">
+                <div className="my-32">
                     <Categories />
                 </div>
                 <div className="w-full overflow-hidden">
diff --git a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
index fb8937b..71da859 100644
--- a/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
+++ b/src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
@@ -26,7 +26,11 @@ export default function ProjectsRow({ title, link, projects }: Props) {
 
     const [slidesToScroll, setSlidesToScroll] = useState(1)
     const rowRef = useRef<HTMLDivElement>(null)
-    const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({ align: 'start', slidesToScroll })
+    const { viewportRef, scrollSlides, canScrollNext, canScrollPrev, isClickAllowed } = useCarousel({
+        align: 'start',
+        slidesToScroll,
+        containScroll: "trimSnaps",
+    })
     const dispatch = useAppDispatch()