Index: imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx
===================================================================
--- imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,27 +1,28 @@
 import styles from "./Maps.module.css";
 import "react-tiles-dnd/esm/index.css";
-import { TilesContainer } from "react-tiles-dnd";
-import { Link } from "react-router-dom";
+import {TilesContainer} from "react-tiles-dnd";
+import {Link} from "react-router-dom";
 import card from "../../assets/card-map.png";
 import star_icon from "../../assets/star_icon.png"; // Unfilled star icon
 import star_filled_icon from "../../assets/star_filled_icon.png"; // Filled star icon
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import HttpService from "../../scripts/net/HttpService.js";
 import Logo from "../../components/Logo/Logo.jsx";
 import Profile from "../../components/Profile/Profile.jsx";
 import config from "../../scripts/net/netconfig.js";
-import { useAppContext } from "../../components/AppContext/AppContext.jsx";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import FilterMaps from "../../components/FilterMaps/FilterMaps.jsx";
 
 let loadedTiles = [];
 
-const renderTile = ({ data, isDragging, toggleFavorite }) => (
-    <div style={{ padding: "1rem", width: "100%", position: "relative" }}>
-        <Link to={`/Maps/${data.text}/View`} className={styles.linkStyle}>
+const renderTile = ({data, isDragging, toggleFavorite}) => (
+    <div style={{padding: "1rem", width: "100%", position: "relative"}}>
+        <Link to={`/Maps/View/${data.text}`} className={styles.linkStyle}>
             <div
                 className={`${styles.tile} ${isDragging ? styles.dragging : ""}`}
-                style={{ width: "100%", height: "100%" }}
+                style={{width: "100%", height: "100%"}}
             >
-                <img src={card} className={styles.imgStyle} alt="Map Thumbnail" />
-                <div style={{ fontFamily: "exo" }}>
+                <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
+                <div style={{fontFamily: "exo"}}>
                     {data.text} {isDragging ? "DRAGGING" : null}
                 </div>
@@ -32,5 +33,5 @@
                 src={data.isFavorite ? star_filled_icon : star_icon}
                 alt="Favorite Icon"
-                style={{ width: "20px", height: "20px" }}
+                style={{width: "20px", height: "20px"}}
             />
         </div>
@@ -46,5 +47,7 @@
     const [searchTerm, setSearchTerm] = useState("");
     const [tiles, setTiles] = useState([]);
-    const { username, isAuthenticated } = useAppContext();
+    const {username, isAuthenticated} = useAppContext();
+    const [filter, setFilter] = useState("all")
+    const [mapFilters, setMapFilters] = useState([])
 
     useEffect(() => {
@@ -52,5 +55,5 @@
             const httpService = new HttpService();
             let mapTiles = [];
-
+            let mapTypes = ['Hospital', 'Faculty', 'House', 'Other'];
             if (isAuthenticated) {
                 // :D
@@ -63,9 +66,14 @@
                     rows: 1,
                     isFavorite: true,
+                    type: elem.mapType,
                 }));
 
+                console.log("TUKA")
                 // Load all maps
                 const allResp = await httpService.get(config.view_maps.display);
                 console.log("RESPONSE MAPS PUBLIC", allResp);
+
+                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
+
 
                 const nonFavMapTiles = allResp
@@ -76,5 +84,7 @@
                         rows: 1,
                         isFavorite: false,
+                        type: elem.mapType,
                     }));
+
 
                 mapTiles = [...favMapTiles, ...nonFavMapTiles];
@@ -82,4 +92,5 @@
                 const allResp = await httpService.get(config.view_maps.display);
                 console.log("RESPONSE MAPS PUBLIC", allResp);
+                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
 
                 mapTiles = allResp.map((elem) => ({
@@ -88,6 +99,10 @@
                     rows: 1,
                     isFavorite: false,
+                    type: elem.mapType,
                 }));
             }
+
+            console.log("TYPES:", mapTypes);
+            setMapFilters(mapTypes);
 
             loadedTiles = [...mapTiles];
@@ -114,5 +129,5 @@
 
         const updatedTiles = tiles.map((tile) =>
-            tile.text === tileName ? { ...tile, isFavorite: !tile.isFavorite } : tile
+            tile.text === tileName ? {...tile, isFavorite: !tile.isFavorite} : tile
         );
 
@@ -140,4 +155,18 @@
     };
 
+    const onFilter = (selectedFilter) => {
+        setFilter(selectedFilter);
+
+        if (selectedFilter === "all") {
+            // Show all tiles
+            setTiles(loadedTiles);
+        } else {
+            // Filter tiles by selected type
+            const filteredTiles = loadedTiles.filter((tile) => tile.type === selectedFilter);
+            setTiles(filteredTiles);
+        }
+    };
+
+
     return (
         <div className={styles.container}>
@@ -152,12 +181,16 @@
                     onChange={handleSearchChange}
                 />
+
             </div>
-
+            <div className={styles.filterBar}>
+            <FilterMaps mapTypes={mapFilters} setFilter={onFilter}></FilterMaps>
+            </div>
+            {filter !== "all" && tiles.length === 0 && <p>No maps of type {filter} found</p>}
             <TilesContainer
                 data={tiles}
-                renderTile={(props) => renderTile({ ...props, toggleFavorite })}
+                renderTile={(props) => renderTile({...props, toggleFavorite})}
                 tileSize={tileSize}
-                forceTileWidth={150}
-                forceTileHeight={170}
+                forceTileWidth={170}
+                forceTileHeight={200}
             />
         </div>
Index: imaps-frontend/src/pages/BrowseMaps/Maps.module.css
===================================================================
--- imaps-frontend/src/pages/BrowseMaps/Maps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/BrowseMaps/Maps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -19,8 +19,10 @@
   margin-bottom: 30px;
   text-align: center;
+  margin-top: 5em;
 }
 
 .searchBar input {
-  width: 300px;
+  /*width: 300px;*/
+  width: 33vw;
   padding: 10px;
   font-size: 16px;
@@ -34,4 +36,8 @@
   border-color: #1e90ff;
   box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
+}
+
+.filterBar{
+  margin-left: 6vw;
 }
 
