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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,165 @@
+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 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 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";
+
+let loadedTiles = [];
+
+const renderTile = ({ data, isDragging, toggleFavorite }) => (
+    <div style={{ padding: "1rem", width: "100%", position: "relative" }}>
+        <Link to={`/Maps/${data.text}/View`} className={styles.linkStyle}>
+            <div
+                className={`${styles.tile} ${isDragging ? styles.dragging : ""}`}
+                style={{ width: "100%", height: "100%" }}
+            >
+                <img src={card} className={styles.imgStyle} alt="Map Thumbnail" />
+                <div style={{ fontFamily: "exo" }}>
+                    {data.text} {isDragging ? "DRAGGING" : null}
+                </div>
+            </div>
+        </Link>
+        <div className={styles.favorite} onClick={() => toggleFavorite(data.text, data.isFavorite)}>
+            <img
+                src={data.isFavorite ? star_filled_icon : star_icon}
+                alt="Favorite Icon"
+                style={{ width: "20px", height: "20px" }}
+            />
+        </div>
+    </div>
+);
+
+const tileSize = (tile) => ({
+    colSpan: tile.cols,
+    rowSpan: tile.rows,
+});
+
+export default function BrowseMaps() {
+    const [searchTerm, setSearchTerm] = useState("");
+    const [tiles, setTiles] = useState([]);
+    const { username, isAuthenticated } = useAppContext();
+
+    useEffect(() => {
+        const loadMaps = async () => {
+            const httpService = new HttpService();
+            let mapTiles = [];
+
+            if (isAuthenticated) {
+                // :D
+                const favResp = await httpService.get(`${config.favourites.display}?username=${username}`);
+                console.log("RESPONSE FAVORITE MAPS", favResp);
+
+                const favMapTiles = favResp.map((elem) => ({
+                    text: elem.mapName,
+                    cols: 1,
+                    rows: 1,
+                    isFavorite: true,
+                }));
+
+                // Load all maps
+                const allResp = await httpService.get(config.view_maps.display);
+                console.log("RESPONSE MAPS PUBLIC", allResp);
+
+                const nonFavMapTiles = allResp
+                    .filter((elem) => !favMapTiles.some((fav) => fav.text === elem.mapName))
+                    .map((elem) => ({
+                        text: elem.mapName,
+                        cols: 1,
+                        rows: 1,
+                        isFavorite: false,
+                    }));
+
+                mapTiles = [...favMapTiles, ...nonFavMapTiles];
+            } else {
+                const allResp = await httpService.get(config.view_maps.display);
+                console.log("RESPONSE MAPS PUBLIC", allResp);
+
+                mapTiles = allResp.map((elem) => ({
+                    text: elem.mapName,
+                    cols: 1,
+                    rows: 1,
+                    isFavorite: false,
+                }));
+            }
+
+            loadedTiles = [...mapTiles];
+            sortTiles(mapTiles);
+            setTiles(mapTiles);
+        };
+        loadMaps();
+    }, [isAuthenticated, username]);
+
+    const toggleFavorite = async (tileName, isFavorite) => {
+        const httpService = new HttpService();
+        const url = isFavorite
+            ? `${config.favourites.delete}?username=${username}&mapName=${encodeURIComponent(tileName)}`
+            : `${config.favourites.add}?username=${username}&mapName=${encodeURIComponent(tileName)}`;
+
+        console.log("Request URL:", url);
+        let response;
+        if (isFavorite) {
+            response = await httpService.delete(url);
+        } else {
+            response = await httpService.post(url);
+        }
+        console.log("Response received:", response);
+
+        const updatedTiles = tiles.map((tile) =>
+            tile.text === tileName ? { ...tile, isFavorite: !tile.isFavorite } : tile
+        );
+
+        loadedTiles = [...updatedTiles];
+        sortTiles(updatedTiles);
+        setTiles(updatedTiles);
+    };
+
+    const handleSearchChange = (e) => {
+        const value = e.target.value.toLowerCase();
+        setSearchTerm(value);
+
+        const filteredTiles = loadedTiles.filter((tile) =>
+            tile.text.toLowerCase().includes(value)
+        );
+        sortTiles(filteredTiles);
+        setTiles(filteredTiles);
+    };
+
+    const sortTiles = (tilesToSort) => {
+        tilesToSort.sort((a, b) => {
+            if (a.isFavorite === b.isFavorite) return a.text.localeCompare(b.text);
+            return a.isFavorite ? -1 : 1;
+        });
+    };
+
+    return (
+        <div className={styles.container}>
+            <h1>Explore Maps</h1>
+            <Logo></Logo>
+            <Profile></Profile>
+            <div className={styles.searchBar}>
+                <input
+                    type="text"
+                    placeholder="Search for maps..."
+                    value={searchTerm}
+                    onChange={handleSearchChange}
+                />
+            </div>
+
+            <TilesContainer
+                data={tiles}
+                renderTile={(props) => renderTile({ ...props, toggleFavorite })}
+                tileSize={tileSize}
+                forceTileWidth={150}
+                forceTileHeight={170}
+            />
+        </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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,98 @@
+
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+}
+
+h1 {
+  font-family: exo, sans-serif;
+  font-size: 2.5rem;
+  color: #0f71da;
+  margin-bottom: 20px;
+}
+
+/* Search Bar */
+.searchBar {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.searchBar input {
+  width: 300px;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.searchBar input:focus {
+  border-color: #1e90ff;
+  box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
+}
+
+/* Tile Styles */
+.tile {
+  background: #fff;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #2c3e50;
+  background-color: #f7f9fc;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+  transition: all 300ms ease-in-out;
+  padding: 10px;
+  border: 1px solid #dcdcdc;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.tile:hover {
+  transform: scale(1.05);
+  box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 18px;
+}
+
+.imgStyle {
+  width: 80%;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.favorite{
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  cursor: pointer;
+}
+
+/* When dragging a tile */
+.dragging {
+  background-color: #1e90ff;
+  transform: scale(1.06) rotate(3deg);
+  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px,
+    rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
+}
+
+/* Link Style */
+.linkStyle {
+  text-decoration: none;
+  color: inherit;
+}
+
+/* Media Query for smaller screens */
+@media (max-width: 768px) {
+  .searchBar input {
+    width: 100%;
+  }
+
+  .tile {
+    width: 100%;
+    height: auto;
+  }
+}
