diff --git a/src/Components/Map/Subcomponents/FilterControl.tsx b/src/Components/Map/Subcomponents/FilterControl.tsx
index 68f9f86a..7c3a4c59 100644
--- a/src/Components/Map/Subcomponents/FilterControl.tsx
+++ b/src/Components/Map/Subcomponents/FilterControl.tsx
@@ -1,33 +1,60 @@
 import * as React from 'react'
 import { useFilterTags, useRemoveFilterTag, useSetSearchPhrase } from '../hooks/useFilter'
+import { useMapEvents } from 'react-leaflet';
+import { useState } from 'react';
+import useWindowDimensions from '../hooks/useWindowDimension';
+
+
+
 
 
 
 function capitalizeFirstLetter(string) {
     return string.charAt(0).toUpperCase() + string.slice(1);
-  }
-
+}
 
 export const FilterControl = () => {
+
+    const windowDimensions = useWindowDimensions();
+    /** 
+        const [popupOpen, setPopupOpen] = useState<boolean>(false);
+    
+        useMapEvents({
+            popupopen: (e) => {
+                console.log(e);
+    
+                setPopupOpen(true);
+            },
+            popupclose: () => {
+                setPopupOpen(false);
+            }
+        })
+    */
     const filterTags = useFilterTags();
     const removeFilterTag = useRemoveFilterTag();
     const setSearchPhrase = useSetSearchPhrase();
-    return (
-        <div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-[699] tw-right-4'>
-            <input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-max-w-sm tw-shadow-xl tw-rounded-2xl" onChange={(e) => setSearchPhrase(e.target.value)} />
-            <div className='tw-flex tw-flex-wrap tw-mt-4'>
-                {
-                    filterTags.map(tag =>
-                        <div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2' style={{ backgroundColor: tag.color }}>
-                            <div className="tw-card-actions tw-justify-end">
-                                <label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (removeFilterTag(tag.id))}>✕</label>
-                            </div><b>#{capitalizeFirstLetter(tag.id)}</b>
-                        </div>
-                    )
-                }
+    return (<>
+        {!(
+            //popupOpen &&
+            windowDimensions.height < 500) &&
+            <div className='tw-flex tw-flex-col tw-absolute tw-top-4 tw-left-4 tw-z-[699] tw-right-4'>
+                <input type="text" placeholder="search ..." className="tw-input tw-input-bordered tw-w-full tw-max-w-sm tw-shadow-xl tw-rounded-2xl" onChange={(e) => setSearchPhrase(e.target.value)} />
+                <div className='tw-flex tw-flex-wrap tw-mt-4'>
+                    {
+                        filterTags.map(tag =>
+                            <div key={tag.id} className='tw-rounded-2xl tw-text-white tw-p-2 tw-px-4 tw-shadow-xl tw-card tw-mr-2 tw-mb-2' style={{ backgroundColor: tag.color }}>
+                                <div className="tw-card-actions tw-justify-end">
+                                    <label className="tw-btn tw-btn-xs tw-btn-circle tw-absolute tw--right-2 tw--top-2 tw-bg-white tw-text-gray-600" onClick={() => (removeFilterTag(tag.id))}>✕</label>
+                                </div><b>#{capitalizeFirstLetter(tag.id)}</b>
+                            </div>
+                        )
+                    }
 
 
+                </div>
             </div>
-        </div>
+        }
+    </>
+
     )
 }
diff --git a/src/Components/Map/hooks/useWindowDimension.tsx b/src/Components/Map/hooks/useWindowDimension.tsx
new file mode 100644
index 00000000..89f0f7bd
--- /dev/null
+++ b/src/Components/Map/hooks/useWindowDimension.tsx
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+function getWindowDimensions() {
+  const { innerWidth: width, innerHeight: height } = window;
+  return {
+    width,
+    height
+  };
+}
+
+export default function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  return windowDimensions;
+}