diff --git a/src/components/MasonryGallery.js b/src/components/MasonryGallery.js
index 5a41144..f459911 100644
--- a/src/components/MasonryGallery.js
+++ b/src/components/MasonryGallery.js
@@ -19,7 +19,7 @@ const MasonryGallery = ({
     [aspectTargetsByBreakpoint]
     );
 
-  const { breakpoint } = useBreakpoint(breakpoints, "md");
+  const { breakpoint } = useBreakpoint(breakpoints, "sm");
 
   const scrollIntoView = React.useCallback(() => {
     if (!window.location.hash) {
@@ -87,6 +87,8 @@ const MasonryGallery = ({
 
   let cursor = 0;
   return (
+    <>
+    {/* {breakpoint} */}
     <div
       className="w-full flex items-center flex-wrap"
       style={{
@@ -158,8 +160,8 @@ const MasonryGallery = ({
         );
       })}
     </div>
+    </>
   );
-  // return null;
 };
 
 export default MasonryGallery;
diff --git a/src/pages/photogallery.js b/src/pages/photogallery.js
index 2a72fe1..f92be9b 100644
--- a/src/pages/photogallery.js
+++ b/src/pages/photogallery.js
@@ -148,6 +148,7 @@ const GalleryPage = ({ data }) => {
       </div>
       <MasonryGallery
         aspectsByBreakpoint={{
+          xs: 2,
           sm: 3,
           md: 4,
           lg: 4,
diff --git a/tailwind.config.js b/tailwind.config.js
index e196def..7863362 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
   // darkMode: 'media', // or 'media' or 'class'
   theme: {
     screens: {
+      xs: "10px",
       sm: "640px",
       md: "768px",
       lg: "1024px",