diff --git a/src/30-useLongPress.js/LongPressComponent.js b/src/30-useLongPress/LongPressComponent.js
similarity index 100%
rename from src/30-useLongPress.js/LongPressComponent.js
rename to src/30-useLongPress/LongPressComponent.js
diff --git a/src/30-useLongPress.js/useLongPress.js b/src/30-useLongPress/useLongPress.js
similarity index 100%
rename from src/30-useLongPress.js/useLongPress.js
rename to src/30-useLongPress/useLongPress.js
diff --git a/src/31-useBreakpoints/BreakpointsComponents.js b/src/31-useBreakpoints/BreakpointsComponents.js
new file mode 100644
index 0000000..ac7392c
--- /dev/null
+++ b/src/31-useBreakpoints/BreakpointsComponents.js
@@ -0,0 +1,12 @@
+import useBreakpoints from "./useBreakpoints";
+
+export default function BreakpointsComponent() {
+  const { isMobile, isTablet } = useBreakpoints();
+
+  return (
+    <>
+      {isMobile && <div>Mobile</div>}
+      {isTablet && <div>Tablet</div>}
+    </>
+  );
+}
diff --git a/src/31-useBreakpoints/useBreakpoints.js b/src/31-useBreakpoints/useBreakpoints.js
new file mode 100644
index 0000000..496bc21
--- /dev/null
+++ b/src/31-useBreakpoints/useBreakpoints.js
@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react";
+
+const useBreakpoints = () => {
+  const [currentBreakpoint, setCurrentBreakpoint] = useState("");
+
+  useEffect(() => {
+    const handleResize = () => {
+      const mobileMatch = window.matchMedia("(min-width: 320px)");
+      const tabletMatch = window.matchMedia("(min-width: 768px)");
+      const desktopMatch = window.matchMedia("(min-width: 1024px)");
+
+      if (desktopMatch.matches) {
+        setCurrentBreakpoint("desktop");
+      } else if (tabletMatch.matches) {
+        setCurrentBreakpoint("tablet");
+      } else if (mobileMatch.matches) {
+        setCurrentBreakpoint("mobile");
+      }
+    };
+
+    handleResize(); // Initial check
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  const isMobile = currentBreakpoint === "mobile";
+  const isTablet = currentBreakpoint === "tablet";
+  const isDesktop = currentBreakpoint === "desktop";
+
+  return {
+    isMobile,
+    isTablet,
+    isDesktop,
+  };
+};
+
+export default useBreakpoints;