diff --git a/src/components/NewNotices.tsx b/src/components/NewNotices.tsx
index ba29b0a0..71d030b2 100644
--- a/src/components/NewNotices.tsx
+++ b/src/components/NewNotices.tsx
@@ -1,13 +1,21 @@
 import { Swiper, SwiperSlide } from "swiper/react";
 import { A11y, Pagination, Navigation } from "swiper";
 import Link from "next/link";
+import useBreakpoint from "@hooks/useBreakpoint";
 
 export default function NewNotices({ notifications }) {
+  const breakpoint = useBreakpoint();
+
+  console.log(breakpoint);
   return (
     <div className="swiper--notices overflow-hidden relative pb-16">
       <Swiper
         modules={[A11y, Pagination, Navigation]}
-        slidesPerView={5}
+        slidesPerView={
+          (breakpoint === "sm" && 2) ||
+          (breakpoint === "md" && 3) ||
+          (breakpoint === "lg" && 5)
+        }
         pagination={{ clickable: true }}
         navigation
         className="cursor-move"
diff --git a/src/hooks/useBreakpoint.ts b/src/hooks/useBreakpoint.ts
new file mode 100644
index 00000000..4b945ad3
--- /dev/null
+++ b/src/hooks/useBreakpoint.ts
@@ -0,0 +1,11 @@
+import { createBreakpoint } from 'react-use'
+
+const useBreakpoint = createBreakpoint({
+  'sm': 640,
+  'md': 768,
+  'lg': 1024,
+  'xl': 1280,
+  '2xl': 1536
+})
+
+export default useBreakpoint
\ No newline at end of file
diff --git a/src/styles/components/_swiper.scss b/src/styles/components/_swiper.scss
index 649443b1..9c85f79f 100644
--- a/src/styles/components/_swiper.scss
+++ b/src/styles/components/_swiper.scss
@@ -49,6 +49,7 @@
 
 .swiper--notices {
   .swiper-pagination {
+    @apply hidden md:block;
     bottom: -3rem !important;
   }