diff --git a/src/Components/Map/Layer.tsx b/src/Components/Map/Layer.tsx
index 2ed17832..cc2f09b6 100644
--- a/src/Components/Map/Layer.tsx
+++ b/src/Components/Map/Layer.tsx
@@ -6,7 +6,7 @@ import { ItemViewPopup } from './Subcomponents/ItemViewPopup'
 import { useItems, useResetItems, useSetItemsApi, useSetItemsData } from './hooks/useItems'
 import { useEffect, useState } from 'react'
 import { ItemFormPopupProps, ItemFormPopup } from './Subcomponents/ItemFormPopup'
-import { useFilterTags } from './hooks/useFilter'
+import { useAddFilterTag, useFilterTags } from './hooks/useFilter'
 
 
 export const Layer = (props: LayerProps) => {
@@ -14,6 +14,11 @@ export const Layer = (props: LayerProps) => {
     const [itemFormPopup, setItemFormPopup] = useState<ItemFormPopupProps | null>(null);
 
     const filterTags = useFilterTags();
+    const setFilterTag = useAddFilterTag();
+    
+
+   // setFilterTag({id: "healing", color: "#000"})
+
 
     const items = useItems();
     const setItemsApi = useSetItemsApi();
@@ -31,7 +36,8 @@ export const Layer = (props: LayerProps) => {
     return (
         <>
             {items &&
-                items.filter(item => item.layer?.name === props.name)?.filter(item => item)?.map((place: Item) => {
+                items.filter(item => item.layer?.name === props.name)?.filter(item => 
+                    filterTags.length == 0 ? item : item.tags?.some(tag => filterTags.some(filterTag => filterTag.id === tag.id)))?.map((place: Item) => {
                     const tags = place.tags;
                     if(place.name === "docutopia")
                     console.log(tags);
diff --git a/src/Components/Map/UtopiaMap.tsx b/src/Components/Map/UtopiaMap.tsx
index 029bc737..b8119d94 100644
--- a/src/Components/Map/UtopiaMap.tsx
+++ b/src/Components/Map/UtopiaMap.tsx
@@ -11,6 +11,7 @@ import { ItemFormPopupProps } from "./Subcomponents/ItemFormPopup";
 import { ItemsProvider } from "./hooks/useItems";
 import { TagsProvider } from "./hooks/useTags";
 import { LayersProvider } from "./hooks/useLayers";
+import { FilterProvider } from "./hooks/useFilter";
 
 
 export interface MapEventListenerProps {
@@ -55,34 +56,36 @@ function UtopiaMap({
     return (
         <LayersProvider initialLayers={[]}>
             <TagsProvider initialTags={[]}>
-                <ItemsProvider initialItems={[]}>
-                    <div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
-                        <MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom}>
-                            <TileLayer
-                                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-                                url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
-                            <MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
-                                {
-                                    React.Children.toArray(children).map((child) =>
-                                        React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null }>(child) ?
-                                            React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup }) : child
-                                    )
-                                }
-                            </MarkerClusterGroup>
-                            <MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
-                            <AddButton setSelectMode={setSelectMode}></AddButton>
-                        </MapContainer>
-                        {selectMode != null &&
-                            <div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-20 tw-drop-shadow-md">
-                                <div className="tw-alert tw-bg-white tw-text-green-900">
-                                    <div>
-                                        <span>Select {selectMode.name} position!</span>
+                <FilterProvider initialTags={[]}>
+                    <ItemsProvider initialItems={[]}>
+                        <div className={(selectMode != null ? "crosshair-cursor-enabled" : undefined)}>
+                            <MapContainer ref={mapDivRef} style={{ height: height, width: width }} center={center} zoom={zoom}>
+                                <TileLayer
+                                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+                                    url="https://tile.osmand.net/hd/{z}/{x}/{y}.png" />
+                                <MarkerClusterGroup showCoverageOnHover chunkedLoading maxClusterRadius={50}>
+                                    {
+                                        React.Children.toArray(children).map((child) =>
+                                            React.isValidElement<{ setItemFormPopup: React.Dispatch<React.SetStateAction<ItemFormPopupProps>>, itemFormPopup: ItemFormPopupProps | null }>(child) ?
+                                                React.cloneElement(child, { setItemFormPopup: setItemFormPopup, itemFormPopup: itemFormPopup }) : child
+                                        )
+                                    }
+                                </MarkerClusterGroup>
+                                <MapEventListener setSelectMode={setSelectMode} selectMode={selectMode} setItemFormPopup={setItemFormPopup} />
+                                <AddButton setSelectMode={setSelectMode}></AddButton>
+                            </MapContainer>
+                            {selectMode != null &&
+                                <div className="tw-button tw-z-500 tw-absolute tw-right-5 tw-top-20 tw-drop-shadow-md">
+                                    <div className="tw-alert tw-bg-white tw-text-green-900">
+                                        <div>
+                                            <span>Select {selectMode.name} position!</span>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                        }
-                    </div>
-                </ItemsProvider>
+                            }
+                        </div>
+                    </ItemsProvider>
+                </FilterProvider>
             </TagsProvider>
         </LayersProvider>
     );
diff --git a/src/Components/Map/hooks/useFilter.tsx b/src/Components/Map/hooks/useFilter.tsx
index 688dbd5e..2715625f 100644
--- a/src/Components/Map/hooks/useFilter.tsx
+++ b/src/Components/Map/hooks/useFilter.tsx
@@ -6,16 +6,16 @@ type ActionType =
   | { type: "ADD"; tag: Tag }
   | { type: "REMOVE"; id: string };
 
-type UseTagManagerResult = ReturnType<typeof useTagsManager>;
+type UseFilterManagerResult = ReturnType<typeof useFilterManager>;
 
-const TagContext = createContext<UseTagManagerResult>({
+const FilterContext = createContext<UseFilterManagerResult>({
   filterTags: [],
   addFilterTag: () => { },
   removeFilterTag: () => { },
 
 });
 
-function useTagsManager(initialTags: Tag[]): {
+function useFilterManager(initialTags: Tag[]): {
   filterTags: Tag[];
   addFilterTag: (tag: Tag) => void;
   removeFilterTag: (id: string) => void;
@@ -60,25 +60,25 @@ function useTagsManager(initialTags: Tag[]): {
   return { filterTags, addFilterTag, removeFilterTag };
 }
 
-export const TagsProvider: React.FunctionComponent<{
+export const FilterProvider: React.FunctionComponent<{
   initialTags: Tag[], children?: React.ReactNode
 }> = ({ initialTags, children }) => (
-  <TagContext.Provider value={useTagsManager(initialTags)}>
+  <FilterContext.Provider value={useFilterManager(initialTags)}>
     {children}
-  </TagContext.Provider>
+  </FilterContext.Provider>
 );
 
 export const useFilterTags = (): Tag[] => {
-  const { filterTags } = useContext(TagContext);
+  const { filterTags } = useContext(FilterContext);
   return filterTags;
 };
 
-export const useAddFilterTag = (): UseTagManagerResult["addFilterTag"] => {
-  const { addFilterTag } = useContext(TagContext);
+export const useAddFilterTag = (): UseFilterManagerResult["addFilterTag"] => {
+  const { addFilterTag } = useContext(FilterContext);
   return addFilterTag;
 };
 
-export const useRemoveFilterTag = (): UseTagManagerResult["removeFilterTag"] => {
-  const { removeFilterTag } = useContext(TagContext);
+export const useRemoveFilterTag = (): UseFilterManagerResult["removeFilterTag"] => {
+  const { removeFilterTag } = useContext(FilterContext);
   return removeFilterTag;
 };
diff --git a/src/Utils/HeighlightTags.ts b/src/Utils/HeighlightTags.tsx
similarity index 100%
rename from src/Utils/HeighlightTags.ts
rename to src/Utils/HeighlightTags.tsx