Index: imaps-frontend/src/pages/AdminPage/AdminPage.jsx
===================================================================
--- imaps-frontend/src/pages/AdminPage/AdminPage.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/AdminPage/AdminPage.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,228 @@
+import React, {useEffect, useState} from "react";
+import styles from "./AdminPage.module.css";
+import {TilesContainer} from "react-tiles-dnd";
+import HttpService from "../../scripts/net/HttpService.js";
+import config from "../../scripts/net/netconfig.js";
+import card from "../../assets/card-map.png";
+import MapInfoModal from "../../components/MapInfoModal/MapInfoModal.jsx";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import PublishForm from "../../components/PublishForm/PublishForm.jsx";
+import Logo from "../../components/Logo/Logo.jsx";
+import Profile from "../../components/Profile/Profile.jsx";
+import Toast from "../../components/Toast/Toast.jsx";
+
+const renderTile = ({data, isDragging}, handleApprove, handleDeny, openMapInfoModal, openPublishForm) => (
+    <div className={`${styles.tile} ${isDragging ? styles.dragging : ""}`} onClick={() => openMapInfoModal(data)}>
+        <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
+        <div className={styles.mapTitle}>{data.mapName}</div>
+        <button className={styles.viewPublishFormButton} onClick={(e) => {
+            e.stopPropagation();
+            openPublishForm(data);
+        }}>
+            View Form
+        </button>
+        <div className={styles.buttonContainer}>
+            {/*<input*/}
+            {/*    type="text"*/}
+            {/*    placeholder="Reason"*/}
+            {/*    className={styles.reasonInput}*/}
+            {/*    onClick={(e) => e.stopPropagation()}*/}
+            {/*/>*/}
+            {/*<div className={styles.buttonsGroup}>*/}
+            {/*    <button className={styles.approveButton} onClick={(e) => {*/}
+            {/*        e.stopPropagation();*/}
+            {/*        handleApprove(data.mapName);*/}
+            {/*    }}>*/}
+            {/*        Approve*/}
+            {/*    </button>*/}
+            {/*    <button className={styles.denyButton} onClick={(e) => {*/}
+            {/*        e.stopPropagation();*/}
+            {/*        const reason = e.target.closest('div').previousSibling.value;*/}
+            {/*        handleDeny(data.mapName, reason);*/}
+            {/*    }}>*/}
+            {/*        Deny*/}
+            {/*    </button>*/}
+
+            {/*</div>*/}
+        </div>
+    </div>
+);
+
+const tileSize = (tile) => ({
+    colSpan: tile.cols,
+    rowSpan: tile.rows,
+});
+
+export default function AdminPage() {
+    const [pendingMaps, setPendingMaps] = useState([]);
+    const [selectedMap, setSelectedMap] = useState(null);
+    const [isMapInfoModalOpen, setIsMapInfoModalOpen] = useState(false);
+    const [publishFormMap, setPublishFormMap] = useState(null);
+    const [publishRequests, setPublishRequests] = useState([]);
+    const [currentForm, setCurrentForm] = useState({});
+    const {username} = useAppContext();
+
+    const [toastMessage, setToastMessage] = useState(null);
+    const [toastType, setToastType] = useState(1);
+
+    useEffect(() => {
+        const loadPendingMaps = async () => {
+            const httpService = new HttpService();
+            httpService.setAuthenticated();
+
+            const respMaps = await httpService.get(`${config.admin.display}`);
+
+            const mapTiles = respMaps.map((elem) => ({
+                mapName: elem.mapName,
+                cols: 1,
+                rows: 1,
+                status: elem.mapStatus,
+                created_at: elem.createdAt,
+                modified_at: elem.modifiedAt,
+                gmaps_url: elem.gmaps_url,
+                image_url: card,
+            })).filter((tile) => tile.status === "INVALID");
+
+            setPendingMaps(mapTiles);
+        };
+
+        loadPendingMaps();
+    }, [username]);
+
+    useEffect(() => {
+        const loadPublishRequests = async () => {
+            const httpService = new HttpService(true);
+            const respPr = await httpService.get(`${config.admin.load_pr}`)
+
+            setPublishRequests(respPr);
+        }
+
+        loadPublishRequests();
+    }, []);
+
+    const handleApprove = async (id,mapName) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        const url = `${config.admin.approve_pr}?id=${id}`;
+        closePublishForm()
+        try {
+            await httpService.post(url);
+            setPendingMaps((prev) => prev.filter((map) => map.mapName !== mapName));
+            showToast(`Publish Request "${id}" approved.`, 1)
+        } catch (error) {
+            console.error("Error approving pr:", error);
+            // alert("Failed to approve pr.");
+            showToast("Failed to approve pr.", 0)
+        }
+    };
+
+    const showToast = (message, type = 1) => {
+        setToastMessage(message);
+        setToastType(type);
+        setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
+    };
+
+    const handleDeny = async (id, mapName,reason) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        const url = `${config.admin.deny_pr}?id=${id}&reason=${encodeURIComponent(reason)}`;
+        closePublishForm()
+        try {
+            await httpService.post(url);
+            setPendingMaps((prev) => prev.filter((map) => map.mapName !== mapName));
+            showToast(`Publish request ${id} denied.`, 1)
+        } catch (error) {
+            console.error("Error denying pr:", error);
+            alert("Failed to deny pr.");
+            showToast("Failed to deny pr.", 0)
+        }
+    };
+
+    const handlePublishFormSubmit = async (formData) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        const url = `${config.admin.approve_pr}?mapName=${formData.mapName}`;
+
+        try {
+            await httpService.post(url, formData); // Assuming formData contains all required fields
+            setPendingMaps((prev) => prev.filter((map) => map.mapName !== formData.mapName));
+            alert(`Map "${formData.mapName}" published successfully.`);
+            closePublishForm();
+        } catch (error) {
+            console.error("Error publishing map:", error);
+            alert("Failed to publish map. Please try again.");
+        }
+    };
+
+
+    const openMapInfoModal = (map) => {
+        setSelectedMap(map);
+        setIsMapInfoModalOpen(true);
+    };
+
+    const closeMapInfoModal = () => {
+        setIsMapInfoModalOpen(false);
+        setSelectedMap(null);
+    };
+
+    const openPublishForm = (data) => {
+        console.log("DATA MAP NAME", data.mapName)
+        publishRequests.forEach(pr => {
+            console.log("PR: " + JSON.stringify(pr))
+        })
+
+        const pr = publishRequests.find(p => p.mapName === data.mapName);
+        console.log("FOUND PR: " + pr)
+        setCurrentForm(pr)
+        setPublishFormMap(data);
+    };
+
+    const closePublishForm = () => {
+        setPublishFormMap(null);
+    };
+
+    return (
+        <div className={styles.container}>
+            <Logo></Logo>
+            <Profile></Profile>
+            <h1>Pending Maps for Approval</h1>
+
+            {publishFormMap && (
+                <PublishForm
+                    isAdmin={true}
+                    formData={currentForm}
+                    onSubmit={handlePublishFormSubmit}
+                    onCancel={closePublishForm}
+                    onApprove={handleApprove}
+                    onDeny={handleDeny}
+
+                />
+            )}
+
+
+            <div className={styles.mapsContainer}>
+                <TilesContainer
+                    data={pendingMaps}
+                    renderTile={(tileProps) => renderTile(tileProps, handleApprove, handleDeny, openMapInfoModal, openPublishForm)}
+                    tileSize={tileSize}
+                    forceTileWidth={200}
+                    forceTileHeight={250}
+                />
+            </div>
+            {isMapInfoModalOpen && (
+                <MapInfoModal
+                    isOpen={isMapInfoModalOpen}
+                    onClose={closeMapInfoModal}
+                    map={selectedMap}
+                    onUpdate={() => {
+                    }}
+                    onDelete={() => {
+                    }}
+                    published={true}
+                />
+            )}
+            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
+
+        </div>
+    );
+}
Index: imaps-frontend/src/pages/AdminPage/AdminPage.module.css
===================================================================
--- imaps-frontend/src/pages/AdminPage/AdminPage.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/AdminPage/AdminPage.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,138 @@
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+    font-family: "Roboto", sans-serif;
+    overflow: hidden;
+}
+
+h1 {
+    font-size: 2.5rem;
+    color: black;
+    margin-bottom: 20px;
+}
+
+.mapsContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-top: 30px;
+}
+
+.tile {
+    width: 90%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: #2c3e50;
+    background-color: #ffffff;
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+    transition: all 300ms ease-in-out;
+    padding: 10px;
+    border: 2px solid #232323;
+    border-radius: 12px;
+    margin-bottom: 20px;
+}
+
+.tile:hover {
+    transform: scale(1.05);
+    box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 18px;
+    background: #eeeeee;
+}
+
+.imgStyle {
+    width: 80%;
+    margin-top: 10px;
+    margin-bottom: 5px;
+}
+
+.mapTitle {
+    color: #2c2f33;
+    text-transform: uppercase;
+    margin-bottom: 10px;
+    font-size: 1.2rem;
+}
+
+.buttonContainer {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 100%;
+}
+
+.buttonsGroup {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    width: 100%;
+}
+
+.approveButton, .denyButton {
+    padding: 8px 16px;
+    font-size: 14px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.approveButton {
+    background-color: #4caf50;
+    color: white;
+}
+
+.approveButton:hover {
+    background-color: #388e3c;
+    transform: translateY(-2px);
+}
+
+.denyButton {
+    background-color: #f44336;
+    color: white;
+}
+
+.denyButton:hover {
+    background-color: #d32f2f;
+    transform: translateY(-2px);
+}
+
+.viewPublishFormButton{
+    margin-bottom: 10px;
+}
+
+.reasonInput {
+    width: 100%;
+    padding: 8px;
+    font-size: 14px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    outline: none;
+    margin-bottom: 10px;
+}
+
+.reasonInput:focus {
+    border-color: #1e90ff;
+    box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
+}
+
+@media (max-width: 768px) {
+    .mapsContainer {
+        flex-direction: column;
+    }
+
+    .tile {
+        width: 100%;
+    }
+
+    .reasonInput {
+        width: 100%;
+    }
+
+    .buttonsGroup {
+        flex-direction: column;
+        gap: 10px;
+    }
+}
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;
+  }
+}
Index: imaps-frontend/src/pages/Draw/Draw.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Draw/Draw.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,116 +1,153 @@
-import { useEffect, useState } from "react";
-import { MapBuilder } from "../../scripts/main/MapBuilder.js";
+import { useContext, useEffect, useState } from "react";
 import styles from "./Draw.module.css";
-import RoomModal from "../../components/RoomModal/RoomModal.jsx";
-import SideBar from "../../components/SideBar/SideBar.jsx";
-import EntranceModal from "../../components/EntranceModal/EntranceModal.jsx";
+import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
+import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
 import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
-import RoomTypeModal from "../../components/RoomTypeModal/RoomTypeModal.jsx";
-import InfoPinModal from "../../components/InfoPinModal/InfoPinModal.jsx";
+import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
+import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
+import SaveMap from "../../components/SaveMap/SaveMap.jsx";
+import Logo from "../../components/Logo/Logo.jsx";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import Profile from "../../components/Profile/Profile.jsx";
 import HttpService from "../../scripts/net/HttpService.js";
-import SaveMap from "../../components/SaveMap/SaveMap.jsx";
-import logo from "../../assets/logo_icon.png";
-import MapTemplateSelector from "../../components/MapTemplateSelector/LoadMap.jsx";
-import KeymapPanel from "../../components/KeyMappingsGuidePanel/KeymapPanel.jsx";
-import { Link } from "react-router-dom";
+import StairsModal from "../../components/Modals/StairsModal/StairsModal.jsx";
+import useMapLoader from "./Hooks/useMapLoader.js";
+import {FloorSelector} from "./FloorSelector.jsx";
+import {useRoomTypesLoader} from "./Hooks/useRoomTypesLoader.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
+import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
 
 function Draw() {
-  const [selectedFloor, setSelectedFloor] = useState(1);
-  const [app, setApp] = useState(null);
+  const { mapName } = useParams();
+  const { username } = useAppContext();
+
   const [isPopupVisible, setIsPopupVisible] = useState(false);
+  const [errorMessage, setErrorMessage] = useState("Error");
+  const [hasError, setHasError] = useState(false);
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const[roomTypes,setRoomTypes] = useState([]);
+
+  const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
+  const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
+
+  const addFloorHandler = async (newFloorNum) => {
+    const httpService = new HttpService();
+    httpService.setAuthenticated();
+
+    const payload = {
+      num: newFloorNum,
+      mapName: mapName,
+    };
+
+    try {
+      await httpService.put(`${config.floors.add}`, payload);
+      console.log(`Added floor ${newFloorNum}`);
+      setFloors((prevFloors) => [...prevFloors, { num: newFloorNum }]);
+    } catch (error) {
+      console.error("Error adding floor:", error);
+    }
+  };
+
+  const deleteFloorHandler = async (floorNum) => {
+    if(floorNum === 0) return
+
+    const httpService = new HttpService();
+    httpService.setAuthenticated();
+
+    try {
+      await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
+      setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
+
+      const currFloor = searchParams.get("floor");
+      if(currFloor == floorNum){
+        setSearchParams({floor:"0"},{replace:true})
+      }
+      console.log(`Deleted floor ${floorNum}`);
+    } catch (error) {
+      console.error("Error deleting floor:", error);
+    }
+  };
+
   useEffect(() => {
-    const app = new MapBuilder("container");
-    setApp(app);
-    // fpsCounterLoop();
+    return () => {
+      ShapeRegistry.clear();
+    }
   }, []);
 
-  const handleFloorChange = (event) => {
-    setSelectedFloor(event.target.value);
-    console.log(`Floor changed to: ${event.target.value}`);
-  };
 
-  const handleRenderClick = () => {
-    setIsPopupVisible(true);
+  const handleSaveClick = async () => {
+    saveFloor().then(r => {
+     floors.forEach(flr => {
+       setIsPopupVisible(true);
+       setTimeout(() => {
+         setIsPopupVisible(false);},
+           3000);
+       console.log("floor after save: " + JSON.stringify(flr))
+     })
+    });
 
-    setTimeout(() => {
-      setIsPopupVisible(false);
-    }, 3000);
-  };
 
-  const handleSaveClick = async (mapName) => {
-    const resp = await app.saveMap(mapName);
-  };
-  const handleLoadMapClick = (data) => {
-    app.deserializeMap(data);
   };
 
   return (
     <div className={styles.wrapper} id="wrapper">
-      <SideBar></SideBar>
+      {/* <SideBar></SideBar> */}
+      <Logo></Logo>
       <div id="container" className={styles.cont}></div>
       <div className={styles.panel}>
-        <Link to="/">
-          <img src={logo} alt="Finki Logo" className={styles.logo} />
+        <div className={styles.topPanelH}>
+          <Profile position="inline"></Profile>
+        </div>
+        <Link to={`/myMaps/${mapName}/View`} className={styles.titleLink}>
+          <h1 className={styles.title}>{mapName}</h1>
         </Link>
-        <h1 className={styles.title}>Map Builder</h1>
-        {/* <div id="fpscont" className={styles.fpscounter}>
-          <p id="fpsCounter"></p>
-        </div> */}
         <div className={styles.guideWrapper}>
-          <DrawGuide />
+          <DrawGuide/>
         </div>
-
-        {/* <div className={styles.floorSelector}>
-          <label htmlFor="floorSelect">Select Floor:</label>
-          <select
-            id="floorSelect"
-            value={selectedFloor}
-            onChange={handleFloorChange}
-            className={styles.floorDropdown}
-          >
-            <option value={1}>1st Floor</option>
-            <option value={2}>2nd Floor</option>
-            <option value={3}>3rd Floor</option>
-            <option value={4}>4th Floor</option>
-          </select>
-        </div> */}
-        {/* <h2 className={styles.paragraph}>Objects:</h2> */}
+        <hr/>
+        <br/>
+        {/* {<h2 className={styles.paragraph}>Objects:</h2>} */}
         <ul className={styles.shapeOptions} id="shapeOptions">
           <li data-info="Entrance" className={`${styles.shapeOption} ${styles.entrance}`}></li>
           <li data-info="Wall" className={`${styles.shapeOption} ${styles.wall}`} id="wall"></li>
           <li data-info="Room" className={`${styles.shapeOption} ${styles.room}`} id="room"></li>
+          <li data-info="Stairs" className={`${styles.shapeOption} ${styles.stairs}`} id="stairs"></li>
         </ul>
-        <br />
-        <RoomTypeModal map={app}></RoomTypeModal>
+        <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
+        <br/>
+        <hr/>
+        <br/>
+        <FloorSelector floorConfig={{
+          floors,searchParams,
+          setSearchParams,addFloorHandler,
+          deleteFloorHandler
+        }}></FloorSelector>
 
-        <div id="render" className={styles.buttonContainer}>
-          <button
-            id="render-button"
-            type="button"
-            className={styles.renderButton}
-            onClick={handleRenderClick}
-          >
-            Render
-          </button>
-        </div>
+        <br/>
+
+        <hr/>
+        <br/>
+        {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
         <div className={styles.templateCont}>
           <SaveMap submitHandler={handleSaveClick}></SaveMap>
-          <MapTemplateSelector loadHandler={handleLoadMapClick}></MapTemplateSelector>
         </div>
 
         <div className={styles.hide}>
-          <RoomModal map={app}></RoomModal>
+          <RoomModal map={app} roomTypes={roomTypes}></RoomModal>
           <EntranceModal map={app}></EntranceModal>
           <InfoPinModal map={app}></InfoPinModal>
+          <StairsModal map={app}></StairsModal>
         </div>
       </div>
 
       {isPopupVisible && (
-        <div className={styles.popup}>
-          <div className={styles.popupContent}>
-            <h2>Map Rendered!</h2>
-            <p>Your map has been successfully rendered.</p>
+          <div className={styles.popup}>
+            <div className={styles.popupContent}>
+              <h2>Map Saved!</h2>
+              <p>Your map has been successfully saved.</p>
+            </div>
           </div>
-        </div>
       )}
     </div>
Index: imaps-frontend/src/pages/Draw/Draw.module.css
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Draw/Draw.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -4,18 +4,36 @@
   padding: 0;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   background-color: #141414;
 }
 
+.topPanelH {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
 .logo {
-  width: 100px;
-  margin: 10px;
-  align-self: center;
+  width: 80px;
 }
 
 .title {
-  margin-top: 20px;
-  color: #804047;
-  font-size: 120%;
+  text-align: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #333333;
+  font-family: "Oswald", sans-serif;
+  margin-bottom: 0;
+  text-decoration: none;
+}
+
+.titleLink {
+  text-decoration: none;
+}
+.titleLink:hover{
+  text-decoration: none;
 }
 
@@ -23,4 +41,5 @@
   color: #cccccc;
 }
+
 .guideWrapper {
   display: flex;
@@ -28,4 +47,5 @@
   align-items: center;
   margin: 0;
+  width: 100%;
 }
 
@@ -51,4 +71,5 @@
   display: flex;
   flex-direction: column;
+  align-items: center; /* Center elements horizontally */
   padding: 20px;
   background-color: #1c1c1c;
@@ -58,17 +79,15 @@
   margin-right: 10px;
   border-radius: 20px;
+  overflow-x: hidden;
 }
 
 .buttonContainer {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   margin-top: 2rem;
   gap: 10px;
-}
-
-/* .hide {
-  visibility: hidden;
-} */
+  width: 100%;
+}
 
 .renderButton {
@@ -104,8 +123,9 @@
   list-style: none;
   padding: 0;
-  margin: 0 0;
-  display: flex;
-  flex-direction: column;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 15px;
+  justify-items: center;
   align-items: center;
 }
@@ -127,9 +147,4 @@
 }
 
-.templateCont {
-  display: flex;
-  flex-direction: column;
-}
-
 .shapeOption:hover {
   background-color: #94183b;
@@ -137,7 +152,16 @@
 }
 
+.templateCont {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center section horizontally */
+  width: 100%;
+}
+
 .fpscounter {
   border: 1px solid #00b822;
   margin: 20px 0;
+  text-align: center;
+  width: 100%;
 }
 
@@ -145,37 +169,8 @@
   color: #00740c;
   font-weight: bold;
-  text-align: center;
   margin: 0;
   padding: 5px 0;
 }
 
-.floorSelector {
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: #ffffff;
-}
-
-.floorSelector label {
-  font-size: 14px;
-}
-
-.floorDropdown {
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #3a3a3a;
-  color: #ffffff;
-  cursor: pointer;
-  width: 100%;
-  transition: border-color 0.3s;
-}
-
-.floorDropdown:focus {
-  outline: none;
-  border-color: #1e90ff;
-}
 
 .popup {
@@ -226,2 +221,173 @@
   background-image: url("./shapeImages/room_icon.png");
 }
+.stairs {
+  background-image: url("./shapeImages/stairs_icon.png");
+}
+.floorSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  background-color: #2d2d2d;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  width: 100%;
+}
+
+.floorLabel {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.floorList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+}
+
+.floorItems {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.addFloorButton {
+  background-color: #e67e22;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.addFloorButton:hover {
+  background-color: #d2691e;
+  transform: scale(1.1);
+}
+
+.addFloorButton:active {
+  background-color: #b35418;
+  transform: scale(0.95);
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  filter: invert(1);
+}
+
+.floorButton {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.floorButton:hover {
+  background-color: #4a4a4a;
+}
+
+.floorButton.active {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.floorInput {
+  width: 60%;
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #3a3a3a;
+  color: #ffffff;
+  text-align: center;
+  transition: border-color 0.3s;
+}
+
+.floorInput:focus {
+  outline: none;
+  border-color: #1e90ff;
+}
+
+.floorActions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.errorMessage {
+  color: red;
+  font-size: 12px;
+  margin-top: 10px;
+  text-align: center;
+}
+.floorItemWrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.floorItem {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  flex-grow: 1;
+  transition: background-color 0.3s;
+}
+
+.floorItem:hover {
+  background-color: #4a4a4a;
+}
+
+.activeFloor {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.deleteFloorButton {
+  background-color: #ff4d4d;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.deleteFloorButton:hover {
+  background-color: #e60000;
+  transform: scale(1.1);
+}
+
+.deleteFloorButton:active {
+  background-color: #cc0000;
+  transform: scale(0.95);
+}
Index: imaps-frontend/src/pages/Draw/FloorSelector.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/FloorSelector.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/FloorSelector.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,60 @@
+import styles from "./Draw.module.css";
+import plus_icon from "../../assets/plus_icon.png";
+
+export const FloorSelector = ({floorConfig}) => {
+
+    const {floors,searchParams,addFloorHandler,setSearchParams,deleteFloorHandler} = floorConfig;
+
+    return (
+        <div className={styles.floorSection}>
+            <div className={styles.floorList}>
+                <label className={styles.floorLabel}>Available Floors:</label>
+                <div className={styles.floorItems}>
+                    {/* Add new positive floor above */}
+                    <button
+                        className={styles.addFloorButton}
+                        onClick={() => {
+                            const newFloor = Math.max(...floors.map((f) => f.num)) + 1;
+                            addFloorHandler(newFloor);
+                        }}
+                    >
+                        <img src={plus_icon} alt="Add Positive Floor" className={styles.icon}/>
+                    </button>
+
+                    {/* Display editable floors */}
+                    {floors
+                        .sort((a, b) => b.num - a.num)
+                        .map((floor) => (
+                            <div key={floor.num} className={styles.floorItemWrapper}>
+                                <button
+                                    onClick={() => setSearchParams({floor: floor.num}, {replace: true})}
+                                    className={`${styles.floorItem} ${
+                                        searchParams.get("floor") == floor.num ? styles.activeFloor : ""
+                                    }`}
+                                >
+                                    Floor {floor.num}
+                                </button>
+                                <button
+                                    className={styles.deleteFloorButton}
+                                    onClick={() => deleteFloorHandler(floor.num)}
+                                >
+                                    🗑️
+                                </button>
+                            </div>
+                        ))}
+
+                    {/* Add new negative floor below */}
+                    <button
+                        className={styles.addFloorButton}
+                        onClick={() => {
+                            const newFloor = Math.min(...floors.map((f) => f.num)) - 1;
+                            addFloorHandler(newFloor);
+                        }}
+                    >
+                        <img src={plus_icon} alt="Add Negative Floor" className={styles.icon}/>
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
Index: imaps-frontend/src/pages/Draw/Hooks/useMapLoader.js
===================================================================
--- imaps-frontend/src/pages/Draw/Hooks/useMapLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/Hooks/useMapLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,114 @@
+import { useState, useEffect } from "react";
+import HttpService from "../../../scripts/net/HttpService.js";
+import {MapBuilder} from "../../../scripts/main/MapBuilder.js";
+import parseMapData from "../../../scripts/util/parseMapData.js";
+import ShapeRegistry from "../../../scripts/util/ShapeRegistry.js";
+import saveMap from "../../../components/SaveMap/SaveMap.jsx";
+import triggerMapSave from "../../../scripts/util/triggerMapSave.js";
+import config from "../../../scripts/net/netconfig.js";
+
+
+
+const useMapLoader = (mapName, username, searchParams, setSearchParams) => {
+    const [floors, setFloors] = useState([]);
+    const [mapLoaded, setMapLoaded] = useState(false);
+    const [app, setApp] = useState(null);
+
+    useEffect(() => {
+        if (!searchParams.has("floor")) {
+            setSearchParams({ floor: "0"},{replace:true});
+        }
+    }, [setSearchParams, searchParams]);
+
+    useEffect(() => {
+        const loadFloors = async () => {
+            const httpService = new HttpService();
+            try {
+                const respFloors = await httpService.get(`${config.my_maps.load}?mapName=${mapName}&username=${username}`);
+                console.log("Floors loaded:", respFloors);
+                setFloors(respFloors);
+                setMapLoaded(true);
+
+                respFloors.forEach(flr => {
+                    parseMapData(flr.mapData,() => true,false)
+                })
+
+            } catch (e) {
+                console.error("Can't load map:", e.message);
+            }
+        };
+
+        if (!mapLoaded) {
+            loadFloors();
+
+        }
+    }, [mapName, username]);
+
+    // floor change
+    useEffect(() => {
+        if (!mapLoaded || floors === undefined || floors.length === 0) return;
+
+        const floorNum = parseInt(searchParams.get("floor"));
+        const selectedFloor = floors.find((f) => f.num === floorNum);
+
+        if (!selectedFloor) {
+            console.error(`Floor ${floorNum} not found`);
+            return;
+        }
+
+        console.log("Changing to floor:", selectedFloor);
+
+        const appInstance = new MapBuilder("container", floorNum, mapName);
+        appInstance.loadNewFloor(selectedFloor);
+        setApp(appInstance);
+        console.log("Fchange");
+        triggerMapSave();
+
+        }, [searchParams, mapLoaded]);
+
+
+    const saveFloor = async () => {
+        const payload = app.saveShapeDetails();
+        const httpService = new HttpService(true);
+        try {
+            const responseFloor = await httpService.put(`${config.my_maps.save}?username=${username}`, payload);
+            console.log("FLOORS",floors.length)
+
+            setFloors((prevFloors) =>
+                prevFloors.map(floor => floor.num === responseFloor.num ? responseFloor : floor)
+            )
+            console.log(responseFloor, "resp in builder");
+        } catch (err) {
+            console.log("ERROR --> Could not Save map --->", err);
+        }
+    }
+
+
+    useEffect(() => {
+        if (app) {
+            const handleSaveFloor = () => {
+                console.log("mapsave event triggered");
+                saveFloor();
+            };
+
+            window.addEventListener("mapsave", handleSaveFloor);
+            return () => {
+                window.removeEventListener("mapsave", handleSaveFloor);
+            };
+        }
+    }, [app]);
+
+
+    useEffect(() => {
+        return () => {
+            if (app) {
+                app.clearMap();
+                app.stage.destroy();
+            }
+        };
+    }, [app]);
+
+    return { app, floors, saveFloor,setFloors};
+};
+
+export default useMapLoader;
Index: imaps-frontend/src/pages/Draw/Hooks/useRoomTypesLoader.js
===================================================================
--- imaps-frontend/src/pages/Draw/Hooks/useRoomTypesLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/Hooks/useRoomTypesLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,31 @@
+import {useEffect} from "react";
+import HttpService from "../../../scripts/net/HttpService.js";
+import log from "eslint-plugin-react/lib/util/log.js";
+import config from "../../../scripts/net/netconfig.js";
+
+export const useRoomTypesLoader = (setRoomTypes,mapName,username) => {
+    useEffect(() => {
+            const loadRoomTypes = async () => {
+                const httpService = new HttpService();
+                httpService.setAuthenticated();
+                const roomTypes = await httpService.get(`${config.room_types.display(true)}?mapName=${mapName}&username=${username}`)
+                console.log("loaded ROOM TYPES: " + roomTypes)
+                setRoomTypes(roomTypes);
+            }
+            loadRoomTypes()
+                .then(resp => {
+                    console.log("LOADED ROOM TYPES")
+                })
+
+    }, []);
+
+    const addRoomType = async (roomTypeName) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        await httpService.post(`${config.room_types.add}?roomTypeName=${roomTypeName}&username=${username}&mapName=${mapName}`)
+
+        setRoomTypes((prevRoomTypes) => [...prevRoomTypes,{name:roomTypeName}]);
+    }
+
+    return {addRoomType}
+}
Index: imaps-frontend/src/pages/FinkiMaps/FinkiMaps.jsx
===================================================================
--- imaps-frontend/src/pages/FinkiMaps/FinkiMaps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,53 +1,0 @@
-import React, { useEffect, useState } from "react";
-import SearchBar from "../../components/SearchBar/SearchBar";
-import FilterBar from "../../components/FilterBar/FilterBar";
-import Profile from "../../components/Profile/Profile";
-import SideBar from "../../components/SideBar/SideBar";
-import Draw from "../../pages/Draw/Draw";
-import { MapDisplay } from "../../scripts/main/MapDisplay.js";
-import MapControls from "../../components/MapControls/MapControls";
-import styles from "./FinkiMaps.module.css";
-
-function FinkiMaps() {
-  const [app,setApp] = useState(null);
-
-  useEffect(() => {
-    const app = new MapDisplay("map");
-    app.loadMap();
-    setApp(app);
-  }, []);
-
-  const handleZoomIn = () => {
-    console.log("Zooming in");
-  };
-
-  const handleZoomOut = () => {
-    console.log("Zooming out");
-  };
-
-  const handleFloorChange = (floor) => {
-    console.log(`Switched to floor ${floor}`);
-  };
-
-  return (
-    <div id="main" className={styles.main}>
-      <div id="map" className={styles.mapContainer}></div>
-      <div className={styles.toolbar}>
-        <SideBar />
-        <div className={styles.left}>
-          <SearchBar map={app}/>
-          <FilterBar />
-        </div>
-        <div className={styles.right}>
-          <Profile />
-        </div>
-      </div>
-
-      <div className={styles.mapControlsContainer}>
-        <MapControls onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} onFloorChange={handleFloorChange} />
-      </div>
-    </div>
-  );
-}
-
-export default FinkiMaps;
Index: imaps-frontend/src/pages/FinkiMaps/FinkiMaps.module.css
===================================================================
--- imaps-frontend/src/pages/FinkiMaps/FinkiMaps.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,93 +1,0 @@
-.main {
-  position: relative;
-  width: 100vw;
-  height: 100vh; /* Full screen height */
-  overflow: hidden; /* Prevent scrolling */
-}
-
-.toolbar {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  position: absolute;
-  top: 0; /* Position toolbar at the top */
-  z-index: 10; /* Ensure the toolbar is above the map */
-  background-color: rgba(255, 255, 255, 0.8); /* Optional: translucent background */
-  backdrop-filter: blur(5px); /* Optional: blur effect */
-  flex-wrap: wrap; /* Allow items to wrap on smaller screens */
-}
-
-.left {
-  width: 100%;
-  max-width: 100%;
-  padding-left: 10vw;
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end; /* Align items at the bottom */
-  flex-wrap: nowrap;
-  gap: 20px;
-  padding-right: 100px;
-  height: 100%; /* Ensure the .left container takes full height of the parent */
-}
-
-.right {
-  position: absolute;
-  top: 1.2em; /* Positioned at the top-right in desktop */
-  right: 50px;
-  z-index: 10; /* Ensure the profile is floating over the map */
-}
-
-.mapContainer {
-  position: relative;
-  top: 80px;
-  left: 0;
-  width: 100vw; /* Make the map fill the entire width of the screen */
-  height: 100vh; /* Make the map fill the entire height of the screen */
-  z-index: 1; /* Ensure the map is behind the toolbar */
-  background-color:beige /* Set your map's background color */
-}
-
-.mapControlsContainer {
-  position: absolute;
-  bottom: 20px;
-  right: 20px;
-  z-index: 10; /* Ensure the map controls are above the map */
-}
-
-@media (max-width: 768px) {
-  .toolbar {
-    flex-direction: column; /* Stack elements vertically */
-    align-items: center;
-    max-width: 100%;
-    padding: 20px 20px;
-    position: relative;
-  }
-
-  .left {
-    width: 100%;
-    max-width: 100%; /* Take full width */
-    flex-direction: column;
-    justify-content: flex-start;
-    align-items: center;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  /* Profile floating above Search and Filter */
-  .right {
-    position: absolute; /* Keep it floating */
-    top: 0.8em; /* Make sure it's above the search */
-    right: 20px;
-    z-index: 11; /* Ensure it's on top */
-  }
-
-  .left {
-    margin-top: 40px; /* Push the Search and Filter below the Profile */
-  }
-
-  .mapControlsContainer {
-    bottom: 10px;
-    right: 10px;
-  }
-}
Index: imaps-frontend/src/pages/IMaps/IMaps.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/IMaps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/IMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -4,13 +4,14 @@
 import styles from "./IMaps.module.css";
 import Home from "./components/pages/Home";
+import Profile from "../../components/Profile/Profile";
+import Logo from "../../components/Logo/Logo";
+import Cards from "./components/Cards";
 
 function IMaps() {
   return (
-    <>
-      <div className={styles.home}>
-        <Navbar></Navbar>
-        <Home></Home>
-      </div>
-    </>
+    <div className="homebg">
+      <Navbar></Navbar>
+      <Home></Home>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/IMaps.module.css
===================================================================
--- imaps-frontend/src/pages/IMaps/IMaps.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/IMaps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -5,5 +5,4 @@
 html,
 body {
-  overflow: auto;
-  overflow-x: hidden;
+  margin: 0;
 }
Index: imaps-frontend/src/pages/IMaps/components/Button.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Button.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/Button.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,9 +1,10 @@
+@import url(https://fonts.googleapis.com/css?family=Exo:500);
 :root {
-  --primary: #fff;
+  --primary: #252627;
 }
 
 .btn {
   padding: 8px 20px;
-
+  font-family: exo, sans-serif;
   border-radius: 20px;
   outline: none;
@@ -14,6 +15,5 @@
 .btn--primary {
   background-color: var(--primary);
-
-  color: #242424;
+  color: #ffffff;
   border: 1px solid var(--primary);
 }
@@ -24,5 +24,5 @@
   color: #fff;
   padding: 8px 20px;
-  border: 1px solid var(--primary);
+  /* border: 1px solid var(--primary); */
   transition: all 0.3s ease-out;
 }
@@ -30,10 +30,10 @@
 .btn--medium {
   padding: 8px 20px;
-  font-size: 18px;
+  font-size: 22px;
 }
 
 .btn--large {
   padding: 12px 26px;
-  font-size: 20px;
+  font-size: 24px;
 }
 
@@ -41,6 +41,6 @@
 .btn--medium:hover {
   transition: all 0.3s ease-out;
-  background: #fff;
-  color: #242424;
+  background: #ffffffc2;
+  color: #000000;
   transition: 250ms;
 }
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,2 +1,4 @@
+@import url(https://fonts.googleapis.com/css?family=Exo:500);
+
 video {
   object-fit: cover;
@@ -7,6 +9,8 @@
 }
 
+
+
+
 .hero-container {
-  background: url("../images/img-home.jpg") center center/cover no-repeat;
   height: 100vh;
   width: 100%;
@@ -15,6 +19,9 @@
   justify-content: center;
   align-items: center;
-  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
+
   object-fit: contain;
+
+
+
 }
 
@@ -23,4 +30,16 @@
   font-size: 100px;
   margin-top: -100px;
+  font-family: exo, sans-serif;
+  text-transform: uppercase;
+  text-shadow: 1px 1px 0px #ef404e,
+  1px 2px 0px #ef404e,
+  1px 3px 0px #ef404e,
+  1px 4px 0px #ef404e,
+  1px 5px 0px #ef404e,
+  1px 6px 0px #ef404e,
+  1px 10px 5px rgba(16, 16, 16, 0.5),
+  1px 15px 10px rgba(16, 16, 16, 0.4),
+  1px 20px 30px rgba(16, 16, 16, 0.3),
+  1px 25px 50px rgba(16, 16, 16, 0.2);
 }
 
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -7,25 +7,24 @@
 function HeroSection() {
   return (
-    <div className="hero-container">
-      <h1>Map Your World</h1>
-      <p>Create and explore detailed indoor maps.</p>
-      <div className="hero-btns">
-        <Link to="/Maps/FinkiMaps/Draw">
-          <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
-            Create maps
-          </Button>
-        </Link>
-        <Link to="/Maps">
-          <Button
-            className="btns"
-            buttonStyle="btn--primary"
-            buttonSize="btn--large"
-            onClick={console.log("hey")}
-          >
-            Browse Maps <i className="far fa-play-circle" />
-          </Button>
-        </Link>
+      <div className="hero-container">
+          <h1>Map Your World</h1>
+          <p>Create and explore detailed indoor maps.</p>
+          <div className="hero-btns">
+              <Link to="/myMaps">
+                  <Button className="btns" buttonStyle="btn--outline" buttonSize="btn--large">
+                      Create maps
+                  </Button>
+              </Link>
+              <Link to="/Maps">
+                  <Button
+                      className="btns"
+                      buttonStyle="btn--primary"
+                      buttonSize="btn--large"
+                  >
+                      Browse Maps <i className="far fa-play-circle"/>
+                  </Button>
+              </Link>
+          </div>
       </div>
-    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/Navbar.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,161 +1,92 @@
-.navbar {
-  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
-  height: 80px;
+.modern-navbar {
+  /*background-color: #ffffff;*/
+  /*background: linear-gradient(*/
+  /*        90deg,*/
+  /*        #fafafa 0%,*/
+  /*        #c07e7e 25%,*/
+  /*        #af2525 50%,*/
+  /*        #443a3a 75%,*/
+  /*        #8d1010 100%*/
+  /*);*/
+  /*background: linear-gradient(to right, #ffffff, #c12c2c);*/
+  /*background: linear-gradient(90deg, #3b3131, #ffffff);*/
+  background: linear-gradient(90deg, #9b1818, #efefef);
+  color: #ffffff;
+  /*color: #333333;*/
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 1.2rem;
+  padding: 0.8rem 1.5rem;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
   position: sticky;
   top: 0;
-  z-index: 999;
-}
-
-.pad-bot {
-  /* padding-bottom: 1.5rem; */
+  z-index: 1000;
+  border-radius: 8px;
+  margin: 5px;
 }
 
 .navbar-container {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   width: 100%;
+  max-width: 1200px;
 }
 
-.navbar-logo {
-  color: #fff;
-  justify-self: start;
-  margin-left: 20px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 2rem;
+.navbar-left {
   display: flex;
   align-items: center;
+  gap: 1rem;
 }
 
-.fa-typo3 {
-  margin-left: 0.5rem;
-  font-size: 1.8rem;
+.navbar-title {
+  font-size: 1.6rem;
+  font-weight: 700;
+  color: #ffffff;
+  margin: 0;
+  font-family: "exo", sans-serif;
 }
 
-.nav-menu {
-  display: grid;
-  grid-template-columns: repeat(4, auto);
-  grid-gap: 10px;
-  list-style: none;
-  text-align: center;
-  width: 70vw;
-  justify-content: end;
-  margin-right: 2rem;
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
 }
 
-.nav-item {
-  height: 80px;
+.navbar-btn {
+  padding: 0.4rem 1.5rem;
+  font-size: 0.9rem;
+  border: 2px solid transparent;
+  border-radius: 20px;
+  text-decoration: none;
+  color: #ffffff;
+  font-weight: 500;
+  transition: all 0.3s ease-in-out;
+  font-family: "exo", sans-serif;
+  cursor: pointer;
+  margin-left: 4em;
+  margin-right: 1em;
 }
 
-.nav-links {
-  color: #fff;
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
-  height: 100%;
+.navbar-login {
+  background-color: #252627;
+  border: 2px solid #3f3232;
 }
 
-.nav-links:hover {
-  border-bottom: 4px solid #fff;
-  transition: all 0.2s ease-out;
+.navbar-login:hover {
+  background-color: #ffffff;
+  color: #212121;
+  border: 1px solid rgba(19, 18, 18, 0.82);
 }
 
-.fa-bars {
-  color: #fff;
+.navbar-signup {
+  background-color: #252627;
+  color: #ffffff;
+  border: 2px solid #343a40;
 }
 
-.nav-links-mobile {
-  display: none;
+.navbar-signup:hover {
+  background-color: #ffffff;
+  color: #343a40;
+  border: 2px solid #343a40;
 }
-
-.menu-icon {
-  display: none;
-}
-
-@media screen and (max-width: 960px) {
-  .NavbarItems {
-    position: relative;
-  }
-
-  .nav-menu {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 90vh;
-    position: absolute;
-    top: 80px;
-    left: -100%;
-    opacity: 1;
-    transition: all 0.5s ease;
-  }
-
-  .nav-menu.active {
-    background: #242222;
-    left: 0;
-    opacity: 1;
-    transition: all 0.5s ease;
-    z-index: 1;
-  }
-
-  .nav-links {
-    text-align: center;
-    padding: 2rem;
-    width: 100%;
-    display: table;
-  }
-
-  .nav-links:hover {
-    background-color: #fff;
-    color: #242424;
-    border-radius: 0;
-  }
-
-  .navbar-logo {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(25%, 50%);
-  }
-
-  .menu-icon {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translate(-100%, 60%);
-    font-size: 1.8rem;
-    cursor: pointer;
-  }
-
-  .fa-times {
-    color: #fff;
-    font-size: 2rem;
-  }
-
-  .nav-links-mobile {
-    display: block;
-    text-align: center;
-    margin: 2rem auto;
-    border-radius: 4px;
-    width: 80%;
-    text-decoration: none;
-    font-size: 1.5rem;
-    background-color: transparent;
-    color: #fff;
-    padding: 14px 20px;
-    border: 1px solid #fff;
-    transition: all 0.3s ease-out;
-  }
-
-  .nav-links-mobile:hover {
-    background: #fff;
-    color: #242424;
-    transition: 250ms;
-  }
-}
Index: imaps-frontend/src/pages/IMaps/components/Navbar.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,7 +1,10 @@
-import React, { useState, useEffect } from "react";
-import { Button } from "./Button";
+import React, {useContext, useState} from "react";
+import { Link } from "react-router-dom";
+import logo_icon from "../../../assets/logo_icon.png";
+//import { AuthContext } from "../../../components/AuthContext/AuthContext";
+import Logo from "../../../components/Logo/Logo.jsx";
+import Profile from "../../../components/Profile/Profile.jsx";
+import {useAppContext} from "../../../components/AppContext/AppContext.jsx";
 import "./Navbar.css";
-import { Link } from "react-router-dom";
-import logo from "../../../assets/logo_icon.png";
 
 function Navbar() {
@@ -12,44 +15,33 @@
   const closeMobileMenu = () => setClick(false);
 
-  const showButton = () => {
-    if (window.innerWidth <= 960) {
-      setButton(false);
-    } else {
-      setButton(true);
-    }
-  };
+  const { isAuthenticated } = useAppContext();
 
-  useEffect(() => {
-    showButton();
-  }, []);
+    return (
+        <nav className="modern-navbar">
+            <div className="navbar-container">
+                {/* Left Section - Logo and Title */}
+                <div className="navbar-left">
+                    <Logo position="relative"/>
+                    <h1 className="navbar-title">iMaps</h1>
+                </div>
 
-  window.addEventListener("resize", showButton);
-
-  return (
-    <>
-      <nav className="navbar">
-        <div className="navbar-container">
-          <a href="#" className="navbar-logo pad-bot" onClick={closeMobileMenu}>
-            iMaps
-          </a>
-          <div className="menu-icon" onClick={handleClick}>
-            <i className={click ? "fas fa-times" : "fas fa-bars"} />
-          </div>
-          <ul className={click ? "nav-menu active" : "nav-menu"}>
-            <Link to="/Signup">
-              <li className="nav-item">
-                <a href="#" className="nav-links" onClick={closeMobileMenu}>
-                  SignUp
-                </a>
-              </li>
-            </Link>
-          </ul>
-          <div className="pad-bot">
-            <Link to="/Login">{button && <Button buttonStyle="btn--outline">LOG IN</Button>}</Link>
-          </div>
-        </div>
-      </nav>
-    </>
-  );
+                {/* Right Section - Login/Signup or Profile */}
+                <div className="navbar-right">
+                    {isAuthenticated ? (
+                        <Profile position="relative"/>
+                    ) : (
+                        <>
+                            <Link to="/Login" className="navbar-btn navbar-login">
+                                Log In
+                            </Link>
+                            <Link to="/Signup" className="navbar-btn navbar-signup">
+                                Sign Up
+                            </Link>
+                        </>
+                    )}
+                </div>
+            </div>
+        </nav>
+    );
 }
 
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,3 +1,0 @@
-.home {
-  width: 100%;
-}
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,17 +1,32 @@
 import React from "react";
-import "./Home.css";
-import Cards from "../Cards";
-import HeroSection from "../HeroSection";
-import Footer from "../Footer";
+import "./Home.scss";
+import { Link } from "react-router-dom";
+import { Button } from "../Button.jsx";
+import Cards from "../Cards.jsx";
+import Footer from "../Footer.jsx";
+import sl from "../../../../assets/bg-home-light-gray.png"
 
 function Home() {
   return (
-    <>
-      <div className="home">
-        <HeroSection />
-        {/* <Cards /> */}
-        <Footer />
+    <div className="home">
+      <div className="hero-container">
+        <h1>Map Your World</h1>
+        <h2 className="description">Create and explore detailed indoor maps.</h2>
+        <div className="hero-btns">
+          <Link to="/myMaps">
+            <Button className="btns" buttonSize="btn--large">
+              Create Maps
+            </Button>
+          </Link>
+          <Link to="/Maps">
+            <Button className="btns" buttonSize="btn--large">
+              Browse Maps <i className="far fa-play-circle" />
+            </Button>
+          </Link>
+        </div>
       </div>
-    </>
+      <Cards />
+      <Footer></Footer>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.scss
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,158 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
+
+/* Exo thin font */
+@import url(https://fonts.googleapis.com/css?family=Exo:500);
+
+//$bg-url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAIAAACRXR/mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAABnSURBVHja7M5RDYAwDEXRDgmvEocnlrQS2SwUFST9uEfBGWs9c97nbGtDcquqiKhOImLs/UpuzVzWEi1atGjRokWLFi1atGjRokWLFi1atGjRokWLFi1af7Ukz8xWp8z8AAAA//8DAJ4LoEAAlL1nAAAAAElFTkSuQmCC";
+$bg-url: "../../../../assets/bg-home-light-gray.png";
+$bg-width: 50px;
+$bg-height: 50px;
+
+/* Animations */
+@-webkit-keyframes bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+@-moz-keyframes    bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+@-o-keyframes      bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+@keyframes         bg-scrolling-reverse {
+  100% { background-position: $bg-width $bg-height; }
+}
+
+@-webkit-keyframes bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+@-moz-keyframes    bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+@-o-keyframes      bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+@keyframes         bg-scrolling {
+  0% { background-position: $bg-width $bg-height; }
+}
+
+.homebg{
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.home {
+  color: #999;
+
+  font: 400 16px/1.5 exo, ubuntu, "segoe ui", helvetica, arial, sans-serif;
+  text-align: center;
+  height: 100vh;
+  width: 100vw;
+  /* img size is 50x50 */
+  background: url($bg-url) repeat 0 0;
+
+  -webkit-animation: bg-scrolling-reverse .92s infinite; /* Safari 4+ */
+  -moz-animation:    bg-scrolling-reverse .92s infinite; /* Fx 5+ */
+  -o-animation:      bg-scrolling-reverse .92s infinite; /* Opera 12+ */
+  animation:         bg-scrolling-reverse .92s infinite; /* IE 10+ */
+  -webkit-animation-timing-function: linear;
+  -moz-animation-timing-function:    linear;
+  -o-animation-timing-function:      linear;
+  animation-timing-function:         linear;
+
+  &::before {
+    font-size: 8rem;
+    font-weight: 100;
+    font-style: normal;
+  }
+}
+
+.hero-container {
+  height: 100vh;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  object-fit: contain;
+  //box-shadow: inset 0 0 0 1000px rgba(253, 244, 195, 0.5);
+
+}
+
+.hero-container h1 {
+  font-family: exo, sans-serif;
+
+
+  background: linear-gradient(
+                  90deg,
+                  #9a2020 0%,
+                  #3b3131 25%,
+                  #af2525 50%,
+                  #443a3a 75%,
+                  #8d1010 100%
+  );
+
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  text-shadow: 3px 2px 10px rgba(0, 0, 0, 0.5);
+
+  font-size: 6em;
+
+
+
+
+}
+.hero-container h2{
+  font-family: exo, sans-serif;
+  color: #1c1c1c;
+}
+
+.hero-container > p {
+  margin-top: 8px;
+  color: #fff;
+  font-size: 32px;
+}
+
+.hero-btns {
+  margin-top: 32px;
+}
+
+.hero-btns .btn {
+  margin: 6px;
+}
+
+.description{
+  color: gray;
+}
+
+.fa-play-circle {
+  margin-left: 4px;
+}
+
+@media screen and (max-width: 960px) {
+  .hero-container > h1 {
+    font-size: 70px;
+    margin-top: -150px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .hero-container > h1 {
+    font-size: 50px;
+    margin-top: -100px;
+  }
+
+  .hero-container > p {
+    font-size: 30px;
+  }
+
+  .btn-mobile {
+    display: block;
+    text-decoration: none;
+  }
+
+  .home-btn {
+    width: 100%;
+    background: #252627;
+  }
+}
Index: imaps-frontend/src/pages/Login/Login.jsx
===================================================================
--- imaps-frontend/src/pages/Login/Login.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Login/Login.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,88 +1,120 @@
-import React, { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import React, {useContext, useState} from "react";
+import {Link, useLocation, useNavigate} from "react-router-dom";
 import styles from "./Login.module.css";
 import illustration from "../../assets/illustration_img.png";
+import Logo from "../../components/Logo/Logo.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
 
-const LoginPage = ({onLogin}) => {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState(null);
-  const navigate = useNavigate();
+const LoginPage = () => {
+    const [formUsername, setFormUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState(null);
+    const navigate = useNavigate();
+    const location = useLocation();
 
-  const payload = {
-    username: username,
-    password: password
-  };
+    const {setUsername, setIsAuthenticated} = useAppContext();
 
-  const handleLogin = (e) => {
-    e.preventDefault();
+    const {targetPath} = location.state || {targetPath: {pathname: "/"}};
 
-    fetch("http://localhost:8080/api/auth/login", {
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify(payload),
-    })
-      .then((response) => {
-        if (!response.ok) {
-          throw new Error("Login failed: resp = " + response.statusText); 
-        }
-        return response.json();
-      })
-      .then((data) => {
-        if (data.token) {
-          navigate("/Maps/FinkiMaps/Draw");
-          onLogin(data.token)
-        } else {
-          setError("Invalid username or password.");
-        }
-      })
-      .catch((error) => {
-        console.error("Login failed", error);
-        setError("Login failed. Please try again.");
-      });
-    
-  };
+    const payload = {
+        username: formUsername,
+        password: password,
+    };
 
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.illustration}>
-        <img src={illustration} alt="illustration" />
-      </div>
-      <div className={styles.form}>
-        <div className={styles.heading}>LOGIN</div>
-        <form onSubmit={handleLogin}>
-          <div>
-            <label htmlFor="username">Username</label>
-            <input
-              type="text"
-              id="name"
-              placeholder="Enter your username"
-              onChange={(e) => setUsername(e.target.value)}
-              value={username}
-              required
-            />
-          </div>
-          <div>
-            <label htmlFor="password">Password</label>
-            <input
-              type="password"
-              id="password"
-              placeholder="Enter your password"
-              onChange={(e) => setPassword(e.target.value)}
-              value={password}
-              required
-            />
-          </div>
-          {error && <p className={styles.error}>{error}</p>}
-          <button type="submit">Submit</button>
-        </form>
-        <p>
-          Don't have an account? <Link to="/Signup"> Sign Up </Link>
-        </p>
-      </div>
-    </div>
-  );
+    const handleLogin = async () => {
+        const httpService = new HttpService();
+        return httpService.post(config.auth.login, payload)
+
+    };
+
+
+    const login = async (e) => {
+        e.preventDefault();
+
+        handleLogin()
+            .then(resp => {
+                if (resp.token) {
+                    navigate(targetPath)
+                    localStorage.setItem("token", resp.token);
+                    setUsername(resp.username);
+                    setIsAuthenticated(true);
+                    console.log("ROLES",resp.roles)
+                } else {
+                    setError("Invalid username or password.");
+                }
+            }).catch(reason => {
+            console.error("Login failed", reason);
+            setError("Login failed. Please try again.")
+        })
+
+        // fetch("http://localhost:8080/api/auth/login", {
+        //   method: "POST",
+        //   headers: {
+        //     "Content-Type": "application/json",
+        //   },
+        //   body: JSON.stringify(payload),
+        // })
+        //   .then((response) => {
+        //     if (!response.ok) {
+        //       throw new Error("Login failed: resp = " + response.statusText);
+        //     }
+        //     return response.json();
+        //   })
+        //   .then((data) => {
+        //     if (data.token) {
+        //       navigate(targetPath);
+        //       handleLogin(data);
+        //     } else {
+        //       setError("Invalid username or password.");
+        //     }
+        //   })
+        //   .catch((error) => {
+        //     console.error("Login failed", error);
+        //     setError("Login failed. Please try again.");
+        //   });
+    };
+
+    return (
+        <div className={styles.wrapper}>
+            <Logo></Logo>
+            <div className={styles.illustration}>
+                <img src={illustration} alt="illustration"/>
+            </div>
+            <div className={styles.form}>
+                <div className={styles.heading}>LOGIN</div>
+                <form onSubmit={login}>
+                    <div>
+                        <label htmlFor="username">Username</label>
+                        <input
+                            type="text"
+                            id="name"
+                            placeholder="Enter your username"
+                            onChange={(e) => setFormUsername(e.target.value)}
+                            value={formUsername}
+                            required
+                        />
+                    </div>
+                    <div>
+                        <label htmlFor="password">Password</label>
+                        <input
+                            type="password"
+                            id="password"
+                            placeholder="Enter your password"
+                            onChange={(e) => setPassword(e.target.value)}
+                            value={password}
+                            required
+                        />
+                    </div>
+                    {error && <p className={styles.error}>{error}</p>}
+                    <button type="submit">Submit</button>
+                </form>
+                <p>
+                    Don't have an account? <Link to="/Signup"> Sign Up </Link>
+                </p>
+            </div>
+        </div>
+    );
 };
 
Index: imaps-frontend/src/pages/MapView/MapView.jsx
===================================================================
--- imaps-frontend/src/pages/MapView/MapView.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MapView/MapView.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,289 @@
+import {useNavigate, useParams, useSearchParams} from "react-router-dom";
+import React, {useContext, useEffect, useRef, useState} from "react";
+import {MapDisplay} from "../../scripts/main/MapDisplay.js";
+import styles from "./MapView.module.css";
+import SearchBar from "../../components/SearchBar/SearchBar.jsx";
+import FilterBar from "../../components/FilterBar/FilterBar.jsx";
+import Profile from "../../components/Profile/Profile.jsx";
+import RoomInfoPanel from "../../components/RoomInfoPanel/RoomInfoPanel.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import floorIcon from "../../assets/floor_icon.png";
+import Logo from "../../components/Logo/Logo.jsx";
+import config from "../../scripts/net/netconfig.js";
+import parseMapData from "../../scripts/util/parseMapData.js";
+import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+
+const MapView = ({isPrivate}) => {
+    const {mapName} = useParams();
+    const {username} = useAppContext();
+
+    const [mapLoaded, setMapLoaded] = useState(false);
+    const [app, setApp] = useState(null);
+    const [isPanelOpen, setIsPanelOpen] = useState(true);
+    const [selectedRoom, setSelectedRoom] = useState(null);
+    const [floors, setFloors] = useState([]); // ova trebit da sa objekti
+    const navigate = useNavigate();
+    const [shapes, setShapes] = useState([]);
+    const [searchParams, setSearchParams] = useSearchParams();
+    const [mainEntrance, setMainEntrance] = useState({});
+
+    const defaultNavObj = {
+        enabled: false,
+        nextFloor: 0,
+        nodes: [],
+        offset: 0
+    }
+
+    const [navNext, setNavNext] = useState(defaultNavObj)
+    const [roomTypes, setRoomTypes] = useState([]);
+
+    useEffect(() => {
+        const loadRoomTypes = async () => {
+            const httpService = new HttpService();
+            let roomTypes;
+            if (isPrivate) {
+                roomTypes = await httpService.get(`${config.room_types.display(true)}?mapName=${mapName}&username=${username}`)
+            } else {
+                roomTypes = await httpService.get(`${config.room_types.display(false)}?mapName=${mapName}`)
+            }
+
+            console.log("loaded ROOM TYPES: " + roomTypes)
+            setRoomTypes(roomTypes);
+        }
+        loadRoomTypes().then(resp => {
+            console.log("LOADED ROOM TYPES")
+        })
+    }, []);
+
+
+    useEffect(() => {
+        if (!searchParams.has("floor")) {
+            setSearchParams({floor: "0"}, {replace: true});
+        }
+    }, [setSearchParams, searchParams]);
+
+
+    useEffect(() => {
+
+
+        const floorNum = parseInt(searchParams.get("floor") || 0);
+        const appInstance = new MapDisplay("map", floorNum);
+
+        const load = async () => {
+            const httpService = new HttpService();
+
+            try {
+                let url;
+                if (isPrivate) {
+                    httpService.setAuthenticated();
+                    url = `${config.view_maps.load(true)}?mapName=${mapName}&username=${username}`
+                } else {
+                    url = `${config.view_maps.load(false)}?mapName=${mapName}`
+                }
+
+                return httpService.get(url);
+            } catch (e) {
+                throw new Error("Can't load map: " + e.message);
+            }
+        };
+
+        load()
+            .then(respFloors => {
+                let tlFloor = respFloors.filter(f => f.num === floorNum)[0];
+
+                let parsedShapes = [];
+
+                respFloors.forEach(flr => {
+                    console.log("FLR", flr)
+                    const parsed = parseMapData(flr.mapData, (shape => shape.className !== "InfoPin"), true)
+                    parsedShapes = [...parsedShapes, ...parsed];
+                })
+
+                setShapes(parsedShapes)
+
+                parsedShapes.forEach(shape => {
+                    console.info("PARSED Shapes: " + shape.info.name)
+                })
+
+                const mainEntrance = parsedShapes.find(shape => shape.info.isMainEntrance);
+                setMainEntrance(mainEntrance)
+
+                console.log("MAIN ENTRANCE: " + mainEntrance)
+
+
+                setFloors(respFloors);
+
+                appInstance.loadMapN(tlFloor?.mapData)
+                setApp(appInstance);
+                setMapLoaded(true);
+            })
+            .catch(reason => {
+                console.log("ERROR LOADING MAP VIEW: " + reason)
+            });
+
+
+    }, []);
+
+    //nova load, ne vo MapDisplay
+
+    //loso
+    useEffect(() => {
+        const openRoomInfoPanel = (e) => {
+            setSelectedRoom(e.detail.room);
+            setIsPanelOpen(true)
+            console.log("SHAPES REG", ShapeRegistry.getShapes().length)
+
+        }
+        window.addEventListener("openRoomInfoPanel", openRoomInfoPanel);
+
+        return () => window.removeEventListener("openRoomInfoPanel", openRoomInfoPanel);
+    }, [])
+
+    const handleDirectionsSubmit = (fromSearch = null, toSearch = null) => {
+
+        if (fromSearch === null && toSearch === null) {
+            return;
+        }
+        if (fromSearch === null || fromSearch === "") {
+            fromSearch = mainEntrance.info.name;
+        }
+        let shapeFrom = shapes.find(sh => sh.info.name === fromSearch)
+
+
+        if (shapeFrom.floorNum != searchParams.get("floor")) {
+            handleFloorChange(shapeFrom.floorNum);
+        }
+
+        const httpService = new HttpService();
+
+        if (isPrivate) httpService.setAuthenticated();
+
+        const fromEncoded = encodeURIComponent(fromSearch).trimEnd()
+        const toEncoded = encodeURIComponent(toSearch).trimEnd()
+
+        httpService.get(`${config.view_maps.navigate}?from=${fromEncoded}&to=${toEncoded}`).then(path => {
+            app.drawRouteNEW(path);
+        }).catch(reason => {
+            console.log("err", reason)
+        })
+    };
+
+    
+
+    const multiFloorNavigate = () => {
+        if (navNext && app) {
+            console.log("NAVNEXT F: " + navNext.nextFloor)
+            const f = navNext.nextFloor;
+            handleFloorChange(f)
+            setTimeout(() => {
+                app.drawRouteNEW(navNext.nodes, navNext.offset)
+            }, 50)
+            setNavNext(defaultNavObj)
+
+        }
+    }
+
+
+    useEffect(() => {
+
+        const handleNavigate = (event) => {
+            console.log("SHAPES NAV", shapes)
+
+            setNavNext({
+                enabled: true,
+                nextFloor: event.detail.changeFloorTo,
+                nodes: event.detail.nodes,
+                offset: event.detail.offset
+            })
+
+            console.log("ROUTE LAYER", app.routeLayer);
+        }
+
+        window.addEventListener("navigate", handleNavigate)
+        return () => {
+            window.removeEventListener("navigate", handleNavigate);
+        };
+
+    }, [app, mapLoaded]);
+
+    const handleFloorChange = (floorNum) => {
+        setSearchParams({floor: floorNum}, {replace: true});
+        const chFloor = floors.find(floor => floor.num === floorNum)
+
+        console.log("FLOOR NUM:", floorNum, "CHFLOOR:", chFloor)
+        app.clearRoute()
+        app.loadMapN(chFloor.mapData)
+        app.floorNum = floorNum;
+
+
+        console.log(`Floor changed to: ${floorNum}`);
+    };
+
+    const closePanel = () => {
+        setIsPanelOpen(false);
+        selectedRoom.unHighlight()
+    };
+
+
+    return (
+        <div id="main" className={styles.main}>
+            {navNext.enabled && (
+                <div className={styles.nextButtonContainer}>
+                    <button onClick={multiFloorNavigate} className={styles.nextButton}>
+                        NEXT FLOOR
+                    </button>
+                </div>
+            )}
+
+            <div id="map" className={styles.mapContainer}></div>
+
+            <RoomInfoPanel isOpen={isPanelOpen} onClose={closePanel} floor={searchParams.get("floor")}
+                           room={selectedRoom} handleDirectionsSubmit={handleDirectionsSubmit}/>
+            <div className={styles.toolbar}>
+                <div className={styles.toolbarContainer}>
+                    <div className={styles.logoContainer}>
+                        <Logo position="relative"/>
+                    </div>
+                    <h1 className={styles.mapTitle}>{mapName}</h1>
+                    {mapLoaded && app && (
+                        <div className={styles.searchFilterContainer}>
+                            <SearchBar
+                                map={app}
+                                handleDirectionsSubmit={handleDirectionsSubmit}
+                                setIsPanelOpen={setIsPanelOpen}
+                                setSelectedRoom={setSelectedRoom}
+                                availableShapes={shapes}
+                                handleFloorChange={handleFloorChange}
+                            />
+                            <FilterBar map={app} roomTypes={roomTypes}/>
+                        </div>
+                    )}
+                    <div className={styles.profileContainer}>
+                        <Profile position="relative"/>
+                    </div>
+                </div>
+            </div>
+
+            <div className={styles.floorSelectorContainer}>
+                <div className={styles.floorSelector}>
+                    <img src={floorIcon} alt="Floor Icon" className={styles.floorIcon}/>
+                    <select
+                        value={searchParams.get("floor")}
+                        onChange={(e) => handleFloorChange(parseInt(e.target.value, 10))}
+                        className={styles.floorDropdown}
+                    >
+                        {floors?.map((floor) => (
+                            <option key={floor.num} value={floor.num}>
+                                Floor {floor.num}
+                            </option>
+                        ))}
+                    </select>
+                </div>
+            </div>
+
+        </div>
+    );
+};
+
+export default MapView;
Index: imaps-frontend/src/pages/MapView/MapView.module.css
===================================================================
--- imaps-frontend/src/pages/MapView/MapView.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MapView/MapView.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,207 @@
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap");
+
+.main {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.toolbar {
+  width: 100%;
+  padding: 10px 20px;
+  position: fixed;
+  top: 0;
+  z-index: 3;
+  background-color: rgba(255, 255, 255, 0.9);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+}
+
+.toolbarContainer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.logoContainer {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.mapTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #333333;
+  margin: 0 20px;
+  flex-grow: 1;
+  text-align: center;
+  font-family: "Oswald", sans-serif;
+}
+
+.searchFilterContainer {
+  flex-grow: 3;
+  display: flex;
+  align-items: center;
+  gap: 150px;
+  justify-content: flex-start;
+  padding: 0 10px;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #d6d6d6 transparent;
+}
+
+.searchFilterContainer::-webkit-scrollbar {
+  height: 6px;
+}
+
+.searchFilterContainer::-webkit-scrollbar-thumb {
+  background-color: #d6d6d6;
+  border-radius: 10px;
+}
+
+.profileContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+
+.mapTitle {
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #333333;
+  margin: 0 20px;
+  flex-grow: 1;
+  text-align: center;
+  font-family: "Oswald", sans-serif;
+}
+
+.searchFilterContainer {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.profileContainer {
+  display: flex;
+  align-items: center;
+}
+
+.mapContainer {
+  position: relative;
+  top: 0px;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+  background-color: #F2F2F2;
+}
+
+.mapControlsContainer {
+  position: absolute;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1;
+}
+
+.nextButtonContainer {
+  position: absolute;
+  bottom: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 5;
+}
+
+.nextButton {
+  font-size: 1.5em;
+  font-weight: bold;
+  padding: 15px 30px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 50px;
+  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.75);
+  cursor: pointer;
+  animation: pulse 2s infinite;
+  transition: transform 0.2s ease-in-out;
+}
+
+.nextButton:hover {
+  transform: scale(1.1);
+  background-color: #0056b3;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
+  }
+  50% {
+    box-shadow: 0 0 30px rgba(0, 123, 255, 0.8);
+  }
+  100% {
+    box-shadow: 0 0 15px rgba(0, 123, 255, 0.5);
+  }
+}
+.floorSelectorContainer {
+  position: fixed;
+  bottom: 50px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  padding: 10px;
+  background-color: rgba(255, 255, 255, 0.9);
+  border-radius: 20px;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.floorSelector {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.floorIcon {
+  width: 40px;
+  height: 40px;
+}
+
+.floorDropdown {
+  font-size: 1.5em;
+  padding: 10px 20px;
+  border-radius: 10px;
+  border: 2px solid #007bff;
+  outline: none;
+  background-color: #f9f9f9;
+  color: #333;
+  transition: all 0.3s ease-in-out;
+  cursor: pointer;
+}
+
+.floorDropdown:hover,
+.floorDropdown:focus {
+  border-color: #0056b3;
+  background-color: #e6f7ff;
+}
+
+.floorDropdown option {
+  font-size: 1.2em;
+  padding: 5px;
+  background-color: #fff;
+  color: #333;
+}
Index: imaps-frontend/src/pages/MapView/useMapViewHook.jsx
===================================================================
--- imaps-frontend/src/pages/MapView/useMapViewHook.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MapView/useMapViewHook.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,21 @@
+//
+// function useMapViewHook() {
+//   const { mapName } = useParams();
+//   const { username } = useContext(AuthContext);
+//
+//   const [mapLoaded, setMapLoaded] = useState(false);
+//   const [app, setApp] = useState(null);
+//   const [isPanelOpen, setIsPanelOpen] = useState(true);
+//   const [floors, setFloors] = useState([]);
+//   const navigate = useNavigate();
+//
+//   const [searchParams, setSearchParams] = useSearchParams();
+//
+//   return {
+//     mapName,
+//     username,
+//     mapLoaded
+//   }
+// }
+//
+// export default useMapViewHook;
Index: imaps-frontend/src/pages/Maps/Maps.jsx
===================================================================
--- imaps-frontend/src/pages/Maps/Maps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,74 +1,0 @@
-import React, { useState } from "react";
-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";
-
-const initialTiles = [
-  { text: "FINKI", cols: 1, rows: 1 },
-  { text: "TMF", cols: 1, rows: 1 },
-  { text: "HOSPITAL", cols: 1, rows: 1 },
-  { text: "POLICE", cols: 1, rows: 1 },
-  { text: "LIBRARY", cols: 1, rows: 1 },
-  { text: "PENTAGON", cols: 1, rows: 1 },
-  { text: "WHITE HOUSE", cols: 1, rows: 1 },
-  { text: "HOME", cols: 1, rows: 1 },
-  { text: "PRESPATEKS", cols: 1, rows: 1 },
-];
-
-const renderTile = ({ data, isDragging }) => (
-  <div style={{ padding: "1rem", width: "100%" }}>
-    <Link to="/Maps/FinkiMaps/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>
-          {data.text} {isDragging ? "DRAGGING" : null}
-        </div>
-      </div>
-    </Link>
-  </div>
-);
-
-const tileSize = (tile) => ({
-  colSpan: tile.cols,
-  rowSpan: tile.rows,
-});
-
-export default function Maps() {
-  const [searchTerm, setSearchTerm] = useState("");
-  const [tiles, setTiles] = useState(initialTiles);
-
-  const handleSearchChange = (e) => {
-    const value = e.target.value.toLowerCase();
-    setSearchTerm(value);
-
-    setTiles(initialTiles.filter((tile) => tile.text.toLowerCase().includes(value)));
-  };
-
-  return (
-    <div className={styles.container}>
-      <h1>Explore Maps</h1>
-
-      <div className={styles.searchBar}>
-        <input
-          type="text"
-          placeholder="Search for maps..."
-          value={searchTerm}
-          onChange={handleSearchChange}
-        />
-      </div>
-
-      <TilesContainer
-        data={tiles}
-        renderTile={renderTile}
-        tileSize={tileSize}
-        forceTileWidth={150}
-        forceTileHeight={170}
-      />
-    </div>
-  );
-}
Index: imaps-frontend/src/pages/Maps/Maps.module.css
===================================================================
--- imaps-frontend/src/pages/Maps/Maps.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ 	(revision )
@@ -1,88 +1,0 @@
-.container {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 20px;
-  text-align: center;
-}
-
-h1 {
-  font-size: 2.5rem;
-  color: #34495e;
-  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;
-}
-
-/* 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;
-  }
-}
Index: imaps-frontend/src/pages/MyMaps/CreateMaps.module.css
===================================================================
--- imaps-frontend/src/pages/MyMaps/CreateMaps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MyMaps/CreateMaps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,142 @@
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20px;
+  text-align: center;
+  font-family: "Roboto", sans-serif;
+  overflow: hidden;
+}
+
+* {
+  font-family: "Exo", sans-serif;
+}
+
+.mapTitle {
+  color: #2c2f33;
+  text-transform: uppercase;
+}
+
+h1 {
+  font-size: 2.5rem;
+  color: black;
+  margin-bottom: 20px;
+}
+
+.categories {
+  margin-bottom: 20px;
+  text-align: start;
+  color: #333;
+}
+
+.actionButtons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-bottom: 30px;
+}
+
+.createMapsButton {
+  padding: 10px 20px;
+  font-size: 16px;
+  background-color: #f1153b;
+  color: white;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background-color 0.3s ease, transform 0.2s ease;
+}
+
+.createMapsButton:hover {
+  background-color: #b70526;
+  transform: translateY(-2px);
+}
+
+.searchBar {
+  margin-bottom: 30px;
+  text-align: center;
+}
+
+.searchBar input {
+  width: 300px;
+  padding: 10px;
+  font-size: 16px;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  outline: none;
+  transition: all 0.3s ease;
+}
+
+.searchBar input:focus {
+  border-color: #1e90ff;
+  box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
+}
+
+.mapsContainer {
+  display: flex;
+  justify-content: space-between;
+  gap: 20px;
+  margin-top: 30px;
+}
+
+.mapColumn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center items horizontally */
+  justify-content: flex-start; /* Ensure tiles stack from the top */
+  padding: 10px;
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.tile {
+  width: 90%; /* Adjust width to leave space around the tile */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #2c3e50;
+  background-color: #ffffff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px;
+  transition: all 300ms ease-in-out;
+  padding: 10px;
+  border: 2px solid #232323;
+  border-radius: 12px;
+  margin-bottom: 20px;
+}
+
+.tile:hover {
+  transform: scale(1.05);
+  box-shadow: rgba(0, 0, 0, 0.4) 0px 8px 18px;
+  background: #f1153b;
+}
+
+.imgStyle {
+  width: 80%;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.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;
+}
+
+@media (max-width: 768px) {
+  .mapsContainer {
+    flex-direction: column;
+  }
+
+  .mapColumn {
+    width: 100%;
+    margin-bottom: 20px;
+  }
+
+  .searchBar input {
+    width: 100%;
+  }
+}
Index: imaps-frontend/src/pages/MyMaps/MyMaps.jsx
===================================================================
--- imaps-frontend/src/pages/MyMaps/MyMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MyMaps/MyMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,241 @@
+import React, {useEffect, useState} from "react";
+import styles from "./CreateMaps.module.css";
+import {TilesContainer} from "react-tiles-dnd";
+import MapInfoModal from "../../components/MapInfoModal/MapInfoModal.jsx";
+import CreateMapModal from "../../components/Modals/CreateMapModal/CreateMapModal.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
+import card from "../../assets/card-map.png";
+import Logo from "../../components/Logo/Logo.jsx";
+import Profile from "../../components/Profile/Profile.jsx";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
+import {element} from "prop-types";
+import Toast from "../../components/Toast/Toast.jsx";
+
+const renderTile = ({data, isDragging}, openMapInfo) => (
+    <div style={{padding: "1rem", width: "100%"}}>
+        <div
+            className={`${styles.tile} ${isDragging ? styles.dragging : ""}`}
+            style={{width: "100%", height: "100%"}}
+            onClick={() => openMapInfo(data)}
+        >
+            <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
+            <div className={styles.mapTitle}>{data.mapName}</div>
+        </div>
+    </div>
+);
+
+const tileSize = (tile) => ({
+    colSpan: tile.cols,
+    rowSpan: tile.rows,
+});
+
+export default function MyMaps() {
+    const [tiles, setTiles] = useState([]);
+    const [allTiles, setAllTiles] = useState([]);
+    const {username} = useAppContext();
+    const [selectedMap, setSelectedMap] = useState(null);
+    const [isMapInfoModalOpen, setIsMapInfoModalOpen] = useState(false);
+    const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
+    const [publicMaps, setPublicMaps] = useState([]);
+    const [privateMaps, setPrivateMaps] = useState([]);
+    const [pendingMaps, setPendingMaps] = useState([]);
+    const [toastMessage, setToastMessage] = useState(null);
+    const [toastType, setToastType] = useState(1);
+
+    const openMapInfoModal = (map) => {
+        setSelectedMap(map);
+        setIsMapInfoModalOpen(true);
+    };
+
+    const closeMapInfoModal = () => {
+        setIsMapInfoModalOpen(false);
+        setSelectedMap(null);
+    };
+
+    const openCreateModal = () => {
+        setIsCreateModalOpen(true);
+    };
+
+    const closeCreateModal = () => {
+        setIsCreateModalOpen(false);
+    };
+
+    const showToast = (message, type = 1) => {
+        setToastMessage(message);
+        setToastType(type);
+        setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
+    };
+
+
+    const handleUpdate = async (updatedMap) => {
+        // Placeholder for map update logic
+    };
+
+    const deleteMap = (mapName) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        const url = `${config.my_maps.delete}?mapName=${mapName}&username=${username}`;
+
+        httpService
+            .delete(url)
+            .then(() => {
+                setTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
+                setAllTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
+                showToast("Map deleted", 1)
+            })
+            .catch((error) => {
+                const errorMessage = error.response?.data?.error || error.message || "Unknown error";
+                // alert(`Error deleting the map: ${errorMessage}`);
+                showToast(`Error deleting the map: ${errorMessage}`, 0)
+            });
+    };
+
+    const addMap = (mapDetails) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+
+        httpService
+            .put(`${config.my_maps.add}?username=${username}`, mapDetails)
+            .then((respMap) => {
+                console.log("RESP NEW MAP: " + respMap)
+                const mapTile = {
+                    mapName: respMap.mapName,
+                    cols: 1,
+                    rows: 1,
+                    status: respMap.mapStatus,
+                    created_at: respMap.createdAt,
+                    modified_at: respMap.modifiedAt,
+                    published_at: respMap.published_at,
+                    gmaps_url: respMap.gmaps_url,
+                    image_url: card,
+                    is_published: respMap.is_published,
+                };
+
+                setAllTiles((prevTiles) => [...prevTiles, mapTile]);
+                setTiles((prevTiles) => [...prevTiles, mapTile]);
+                showToast("Map added successfully!");
+
+
+            })
+            .catch((error) => {
+                showToast("Map name already taken", 0)
+            });
+    };
+
+    useEffect(() => {
+        const loadMaps = async () => {
+            const httpService = new HttpService();
+            httpService.setAuthenticated();
+
+            const respMaps = await httpService.get(`${config.my_maps.display}?username=${username}`);
+
+            const mapTiles = respMaps.map((elem) => ({
+                mapName: elem.mapName,
+                cols: 1,
+                rows: 1,
+                status: elem.mapStatus,
+                created_at: elem.createdAt,
+                modified_at: elem.modifiedAt,
+                published_at: elem.published_at,
+                gmaps_url: elem.gMapsUrl,
+                image_url: card,
+                numFavourites: elem.numFavourites,
+            }));
+
+
+            setTiles(mapTiles);
+            setAllTiles(mapTiles);
+        };
+        loadMaps();
+    }, [username]);
+
+    useEffect(() => {
+        setPublicMaps(tiles.filter((tile) => tile.status === "PUBLIC"));
+        setPrivateMaps(tiles.filter((tile) => tile.status === "PRIVATE"));
+        setPendingMaps(tiles.filter((tile) => tile.status === "INVALID"));
+    }, [tiles]);
+
+    const handleSearch = (e) => {
+        const query = e.target.value.toLowerCase();
+        setTiles(allTiles.filter((tile) => tile.mapName.toLowerCase().includes(query)));
+    };
+
+    return (
+        <div className={styles.container}>
+            <Logo/>
+            <Profile/>
+            <h1>Your Maps</h1>
+
+            <div className={styles.actionButtons}>
+                <button className={styles.createMapsButton} onClick={openCreateModal}>
+                    Create Map
+                </button>
+            </div>
+
+            <div className={styles.searchBar}>
+                <input type="text" placeholder="Search for maps..." onChange={handleSearch}/>
+            </div>
+
+            <div className={styles.mapsContainer}>
+                <div className={styles.mapColumn}>
+                    <h3 className={styles.categories}>Public Maps:</h3>
+                    <hr/>
+                    <TilesContainer
+                        data={publicMaps}
+                        renderTile={(tileProps) => renderTile(tileProps, openMapInfoModal)}
+                        tileSize={tileSize}
+                        forceTileWidth={150}
+                        forceTileHeight={170}
+                    />
+                </div>
+
+                <div className={styles.mapColumn}>
+                    <h3 className={styles.categories}>Private Maps:</h3>
+                    <hr/>
+                    <TilesContainer
+                        data={privateMaps}
+                        renderTile={(tileProps) => renderTile(tileProps, openMapInfoModal)}
+                        tileSize={tileSize}
+                        forceTileWidth={150}
+                        forceTileHeight={170}
+                    />
+                </div>
+
+                <div className={styles.mapColumn}>
+                    <h3 className={styles.categories}>Pending Approval:</h3>
+                    <hr/>
+                    <TilesContainer
+                        data={pendingMaps}
+                        renderTile={(tileProps) => renderTile(tileProps, openMapInfoModal)}
+                        tileSize={tileSize}
+                        forceTileWidth={150}
+                        forceTileHeight={170}
+                    />
+                </div>
+            </div>
+
+            <MapInfoModal
+                isOpen={isMapInfoModalOpen}
+                onClose={closeMapInfoModal}
+                map={selectedMap}
+                onDelete={deleteMap}
+                onUpdate={handleUpdate}
+                onPublish={() => {
+                    showToast(`Map ${selectedMap.mapName} published successfully!`);
+                    setPrivateMaps((prevMaps) => prevMaps.filter(m => m.mapName !== selectedMap.mapName))
+                    setPendingMaps((prevMaps) => [...prevMaps,allTiles.find(m => m.mapName = selectedMap.mapName)])
+                    closeMapInfoModal()
+                }}
+            />
+
+            <CreateMapModal
+                isOpen={isCreateModalOpen}
+                onClose={closeCreateModal}
+                addMap={addMap}
+            />
+
+            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
+        </div>
+    );
+}
Index: imaps-frontend/src/pages/Signup/Signup.jsx
===================================================================
--- imaps-frontend/src/pages/Signup/Signup.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Signup/Signup.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -3,4 +3,5 @@
 import illustration from "../../assets/illustration_img.png";
 import styles from "./Signup.module.css";
+import Logo from "../../components/Logo/Logo";
 
 export default function Signup() {
@@ -54,4 +55,5 @@
   return (
     <div className={styles.wrapper}>
+      <Logo></Logo>
       <div className={styles.illustration}>
         <img src={illustration} alt="illustration" />
