Index: imaps-frontend/src/pages/AdminPage/AdminPage.jsx
===================================================================
--- imaps-frontend/src/pages/AdminPage/AdminPage.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,232 +1,0 @@
-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";
-import ListReports from "../../components/ListReports/ListReports.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 === "PENDING");
-
-            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);
-            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>
-            <hr/>
-
-            {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>
-            <hr/>
-            {isMapInfoModalOpen && (
-                <MapInfoModal
-                    isOpen={isMapInfoModalOpen}
-                    onClose={closeMapInfoModal}
-                    map={selectedMap}
-                    onUpdate={() => {
-                    }}
-                    onDelete={() => {
-                    }}
-                    published={true}
-                />
-            )}
-            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
-        <hr/>
-            <ListReports></ListReports>
-        </div>
-    );
-}
Index: imaps-frontend/src/pages/AdminPage/AdminPage.module.css
===================================================================
--- imaps-frontend/src/pages/AdminPage/AdminPage.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,138 +1,0 @@
-.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/AuthCallback.jsx
===================================================================
--- imaps-frontend/src/pages/AuthCallback.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,18 +1,0 @@
-import {useEffect} from "react";
-import {useLocation, useNavigate} from "react-router-dom";
-import {useAppContext} from "../components/AppContext/AppContext.jsx";
-
-export function AuthCallback(){
-    const location = useLocation();
-    const navigate = useNavigate();
-    const {setUsername,setIsAuthenticated} = useAppContext()
-    useEffect(() => {
-        const searchParams = new URLSearchParams(location.search);
-        const token = searchParams.get('token');
-        const username = searchParams.get('username');
-        localStorage.setItem("token",token)
-        setIsAuthenticated(true)
-        setUsername(username)
-        navigate("/")
-    }, []);
-}
Index: imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx
===================================================================
--- imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,198 +1,0 @@
-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";
-import FilterMaps from "../../components/FilterMaps/FilterMaps.jsx";
-
-let loadedTiles = [];
-
-const renderTile = ({data, isDragging, toggleFavorite}) => (
-    <div style={{padding: "1rem", width: "100%", position: "relative"}}>
-        <Link to={`/Maps/View/${data.text}`} 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();
-    const [filter, setFilter] = useState("all")
-    const [mapFilters, setMapFilters] = useState([])
-
-    useEffect(() => {
-        const loadMaps = async () => {
-            const httpService = new HttpService();
-            let mapTiles = [];
-            let mapTypes = ['Hospital', 'Faculty', 'House', 'Other'];
-            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,
-                    type: elem.mapType,
-                }));
-
-                console.log("TUKA")
-                // Load all maps
-                const allResp = await httpService.get(config.view_maps.display);
-                console.log("RESPONSE MAPS PUBLIC", allResp);
-
-                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
-
-
-                const nonFavMapTiles = allResp
-                    .filter((elem) => !favMapTiles.some((fav) => fav.text === elem.mapName))
-                    .map((elem) => ({
-                        text: elem.mapName,
-                        cols: 1,
-                        rows: 1,
-                        isFavorite: false,
-                        type: elem.mapType,
-                    }));
-
-
-                mapTiles = [...favMapTiles, ...nonFavMapTiles];
-            } else {
-                const allResp = await httpService.get(config.view_maps.display);
-                console.log("RESPONSE MAPS PUBLIC", allResp);
-                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
-
-                mapTiles = allResp.map((elem) => ({
-                    text: elem.mapName,
-                    cols: 1,
-                    rows: 1,
-                    isFavorite: false,
-                    type: elem.mapType,
-                }));
-            }
-
-            console.log("TYPES:", mapTypes);
-            setMapFilters(mapTypes);
-
-            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;
-        });
-    };
-
-    const onFilter = (selectedFilter) => {
-        setFilter(selectedFilter);
-
-        if (selectedFilter === "all") {
-            // Show all tiles
-            setTiles(loadedTiles);
-        } else {
-            // Filter tiles by selected type
-            const filteredTiles = loadedTiles.filter((tile) => tile.type === selectedFilter);
-            setTiles(filteredTiles);
-        }
-    };
-
-
-    return (
-        <div className={styles.container}>
-            <h1>Explore Maps</h1>
-            <Logo></Logo>
-            <Profile></Profile>
-            <div className={styles.searchBar}>
-                <input
-                    type="text"
-                    placeholder="Search for maps..."
-                    value={searchTerm}
-                    onChange={handleSearchChange}
-                />
-
-            </div>
-            <div className={styles.filterBar}>
-            <FilterMaps mapTypes={mapFilters} setFilter={onFilter}></FilterMaps>
-            </div>
-            {filter !== "all" && tiles.length === 0 && <p>No maps of type {filter} found</p>}
-            <TilesContainer
-                data={tiles}
-                renderTile={(props) => renderTile({...props, toggleFavorite})}
-                tileSize={tileSize}
-                forceTileWidth={170}
-                forceTileHeight={200}
-            />
-        </div>
-    );
-}
Index: imaps-frontend/src/pages/BrowseMaps/Maps.module.css
===================================================================
--- imaps-frontend/src/pages/BrowseMaps/Maps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,104 +1,0 @@
-
-
-.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;
-  margin-top: 5em;
-}
-
-.searchBar input {
-  /*width: 300px;*/
-  width: 33vw;
-  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);
-}
-
-.filterBar{
-  margin-left: 6vw;
-}
-
-/* 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 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Draw/Draw.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,152 +1,119 @@
-import {useContext, useEffect, useState} from "react";
+import { useEffect, useState } from "react";
+import { MapBuilder } from "../../scripts/main/MapBuilder.js";
 import styles from "./Draw.module.css";
-import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
-import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
+import RoomModal from "../../components/RoomModal/RoomModal.jsx";
+import SideBar from "../../components/SideBar/SideBar.jsx";
+import EntranceModal from "../../components/EntranceModal/EntranceModal.jsx";
 import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
-import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
-import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
+import RoomTypeModal from "../../components/RoomTypeModal/RoomTypeModal.jsx";
+import InfoPinModal from "../../components/InfoPinModal/InfoPinModal.jsx";
+import HttpService from "../../scripts/net/HttpService.js";
 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 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";
-import {TopPanel} from "./TopPanel/TopPanel.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";
 
 function Draw() {
-    const {mapName} = useParams();
-    const {username} = useAppContext();
+  const [selectedFloor, setSelectedFloor] = useState(1);
+  const [app, setApp] = useState(null);
+  const [isPopupVisible, setIsPopupVisible] = useState(false);
+  useEffect(() => {
+    const app = new MapBuilder("container");
+    setApp(app);
+    // fpsCounterLoop();
+  }, []);
 
-    const [isPopupVisible, setIsPopupVisible] = useState(false);
-    const [errorMessage, setErrorMessage] = useState("Error");
-    const [hasError, setHasError] = useState(false);
-    const [searchParams, setSearchParams] = useSearchParams();
+  const handleFloorChange = (event) => {
+    setSelectedFloor(event.target.value);
+    console.log(`Floor changed to: ${event.target.value}`);
+  };
 
-    const [roomTypes, setRoomTypes] = useState([]);
+  const handleRenderClick = () => {
+    setIsPopupVisible(true);
 
-    const {app, floors, saveFloor, setFloors} = useMapLoader(mapName, username, searchParams, setSearchParams)
-    const {addRoomType} = useRoomTypesLoader(setRoomTypes, mapName, username);
+    setTimeout(() => {
+      setIsPopupVisible(false);
+    }, 3000);
+  };
 
-    const addFloorHandler = async (newFloorNum) => {
-        const httpService = new HttpService();
-        httpService.setAuthenticated();
+  const handleSaveClick = async (mapName) => {
+    const resp = await app.saveMap(mapName);
+  };
+  const handleLoadMapClick = (data) => {
+    app.deserializeMap(data);
+  };
 
-        const payload = {
-            num: newFloorNum,
-            mapName: mapName,
-        };
+  return (
+    <div className={styles.wrapper} id="wrapper">
+      <SideBar></SideBar>
+      <div id="container" className={styles.cont}></div>
+      <div className={styles.panel}>
+        <Link to="/">
+          <img src={logo} alt="Finki Logo" className={styles.logo} />
+        </Link>
+        <h1 className={styles.title}>Map Builder</h1>
+        {/* <div id="fpscont" className={styles.fpscounter}>
+          <p id="fpsCounter"></p>
+        </div> */}
+        <div className={styles.guideWrapper}>
+          <DrawGuide />
+        </div>
 
-        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);
-        }
-    };
+        {/* <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> */}
+        <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>
+        </ul>
+        <br />
+        <RoomTypeModal map={app}></RoomTypeModal>
 
-    const deleteFloorHandler = async (floorNum) => {
-        if (floorNum === 0) return
+        <div id="render" className={styles.buttonContainer}>
+          <button
+            id="render-button"
+            type="button"
+            className={styles.renderButton}
+            onClick={handleRenderClick}
+          >
+            Render
+          </button>
+        </div>
+        <div className={styles.templateCont}>
+          <SaveMap submitHandler={handleSaveClick}></SaveMap>
+          <MapTemplateSelector loadHandler={handleLoadMapClick}></MapTemplateSelector>
+        </div>
 
-        const httpService = new HttpService();
-        httpService.setAuthenticated();
+        <div className={styles.hide}>
+          <RoomModal map={app}></RoomModal>
+          <EntranceModal map={app}></EntranceModal>
+          <InfoPinModal map={app}></InfoPinModal>
+        </div>
+      </div>
 
-        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(() => {
-        return () => {
-            ShapeRegistry.clear();
-        }
-    }, []);
-
-
-    const handleSaveClick = async () => {
-        saveFloor()
-        setIsPopupVisible(true);
-        setTimeout(() => {
-                setIsPopupVisible(false);
-            },
-            3000);
-    };
-
-    return (
-        <div className={styles.wrapper} id="wrapper">
-            {/* <SideBar></SideBar> */}
-            <Logo></Logo>
-            <div id="container" className={styles.cont}></div>
-            <div className={styles.panel}>
-                <div className={styles.topPanelH}>
-                    <Profile position="inline"></Profile>
-                </div>
-                <Link to={`/myMaps/View/${mapName}`} className={styles.titleLink}>
-                    <h1 className={styles.title}>{mapName}</h1>
-                </Link>
-                <div className={styles.guideWrapper}>
-                    <DrawGuide/>
-                </div>
-                <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>
-                <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
-                <br/>
-                <hr/>
-                <br/>
-                <FloorSelector floorConfig={{
-                    floors, searchParams,
-                    setSearchParams, addFloorHandler,
-                    deleteFloorHandler
-                }}></FloorSelector>
-
-                <br/>
-
-                <hr/>
-                <br/>
-                {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
-                <div className={styles.templateCont}>
-                    <SaveMap submitHandler={handleSaveClick}></SaveMap>
-                </div>
-
-                <div className={styles.hide}>
-                    <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 Saved!</h2>
-                        <p>Your map has been successfully saved.</p>
-                    </div>
-                </div>
-            )}
+      {isPopupVisible && (
+        <div className={styles.popup}>
+          <div className={styles.popupContent}>
+            <h2>Map Rendered!</h2>
+            <p>Your map has been successfully rendered.</p>
+          </div>
         </div>
-    );
+      )}
+    </div>
+  );
 }
 
Index: imaps-frontend/src/pages/Draw/Draw.module.css
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Draw/Draw.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -4,36 +4,18 @@
   padding: 0;
   height: 100%;
-  overflow-x: hidden;
+  overflow: hidden;
   background-color: #141414;
 }
 
-.topPanelH {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  margin-bottom: 20px;
-}
-
 .logo {
-  width: 80px;
+  width: 100px;
+  margin: 10px;
+  align-self: center;
 }
 
 .title {
-  text-align: center;
-  font-size: 2.5em;
-  font-weight: 700;
-  text-transform: uppercase;
-  color: #c0c0c0;
-  font-family: "Oswald", sans-serif;
-  margin-bottom: 0;
-  text-decoration: none;
-}
-
-.titleLink {
-  text-decoration: none;
-}
-.titleLink:hover{
-  text-decoration: none;
+  margin-top: 20px;
+  color: #804047;
+  font-size: 120%;
 }
 
@@ -41,5 +23,4 @@
   color: #cccccc;
 }
-
 .guideWrapper {
   display: flex;
@@ -47,5 +28,4 @@
   align-items: center;
   margin: 0;
-  width: 100%;
 }
 
@@ -71,5 +51,4 @@
   display: flex;
   flex-direction: column;
-  align-items: center; /* Center elements horizontally */
   padding: 20px;
   background-color: #1c1c1c;
@@ -79,15 +58,17 @@
   margin-right: 10px;
   border-radius: 20px;
-  overflow-x: hidden;
 }
 
 .buttonContainer {
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-top: 2rem;
   gap: 10px;
-  width: 100%;
-}
+}
+
+/* .hide {
+  visibility: hidden;
+} */
 
 .renderButton {
@@ -123,9 +104,8 @@
   list-style: none;
   padding: 0;
-  margin: 0;
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
+  margin: 0 0;
+  display: flex;
+  flex-direction: column;
   gap: 15px;
-  justify-items: center;
   align-items: center;
 }
@@ -147,4 +127,9 @@
 }
 
+.templateCont {
+  display: flex;
+  flex-direction: column;
+}
+
 .shapeOption:hover {
   background-color: #94183b;
@@ -152,16 +137,7 @@
 }
 
-.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%;
 }
 
@@ -169,8 +145,37 @@
   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 {
@@ -221,173 +226,2 @@
   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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,60 +1,0 @@
-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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,114 +1,0 @@
-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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,31 +1,0 @@
-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/Draw/TopPanel/TopPanel.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/TopPanel/TopPanel.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,10 +1,0 @@
-import {Button} from "../../IMaps/components/Button.jsx";
-
-export function TopPanel(){
-    return (
-        <div>
-            <Button>Efficient Drawing</Button>
-            <Button>Rotate 90</Button>
-        </div>
-    )
-}
Index: imaps-frontend/src/pages/FinkiMaps/FinkiMaps.jsx
===================================================================
--- imaps-frontend/src/pages/FinkiMaps/FinkiMaps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/FinkiMaps/FinkiMaps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,53 @@
+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 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/FinkiMaps/FinkiMaps.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,93 @@
+.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 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/IMaps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -4,14 +4,13 @@
 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="homebg">
-      <Navbar></Navbar>
-      <Home></Home>
-    </div>
+    <>
+      <div className={styles.home}>
+        <Navbar></Navbar>
+        <Home></Home>
+      </div>
+    </>
   );
 }
Index: imaps-frontend/src/pages/IMaps/IMaps.module.css
===================================================================
--- imaps-frontend/src/pages/IMaps/IMaps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/IMaps.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -5,4 +5,5 @@
 html,
 body {
-  margin: 0;
+  overflow: auto;
+  overflow-x: hidden;
 }
Index: imaps-frontend/src/pages/IMaps/components/Button.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Button.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Button.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,10 +1,9 @@
-@import url(https://fonts.googleapis.com/css?family=Exo:500);
 :root {
-  --primary: #252627;
+  --primary: #fff;
 }
 
 .btn {
   padding: 8px 20px;
-  font-family: exo, sans-serif;
+
   border-radius: 20px;
   outline: none;
@@ -15,15 +14,15 @@
 .btn--primary {
   background-color: var(--primary);
-  color: #ffffff;
+
+  color: #242424;
   border: 1px solid var(--primary);
 }
 
 .btn--outline {
-  background-color: #ffffffc2;
+  background-color: transparent;
 
-  color: #252627;
+  color: #fff;
   padding: 8px 20px;
-  border: 1px solid #252627 ;
-  /* border: 1px solid var(--primary); */
+  border: 1px solid var(--primary);
   transition: all 0.3s ease-out;
 }
@@ -31,15 +30,10 @@
 .btn--medium {
   padding: 8px 20px;
-  font-size: 22px;
+  font-size: 18px;
 }
 
 .btn--large {
   padding: 12px 26px;
-  font-size: 24px;
-}
-.btn--outline:hover{
-  transition: all 0.3s ease-out;
-  background: #000000;
-  color:#ffffffc2;
+  font-size: 20px;
 }
 
@@ -47,5 +41,6 @@
 .btn--medium:hover {
   transition: all 0.3s ease-out;
-  background: #ffffffc2;
-  color: #000000;
+  background: #fff;
+  color: #242424;
+  transition: 250ms;
 }
Index: imaps-frontend/src/pages/IMaps/components/Cards.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Cards.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Cards.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -19,5 +19,5 @@
               text="Create intricate floor plans for your building with precision and ease."
               label="Create"
-              path="#"
+              path="/services"
             />
             <CardItem
@@ -25,5 +25,5 @@
               text="Explore and navigate through complex building layouts seamlessly."
               label="Explore"
-              path="#"
+              path="/services"
             />
           </ul>
@@ -33,5 +33,5 @@
               text="Add custom icons, labels, and markers to personalize your indoor maps."
               label="Customize"
-              path="#"
+              path="/services"
             />
             <CardItem
@@ -39,5 +39,5 @@
               text="Ensure accessibility by mapping out routes and facilities for all users."
               label="Accessibility"
-              path="#"
+              path="/products"
             />
             <CardItem
@@ -45,5 +45,5 @@
               text="Share your maps with others and collaborate in real-time for efficient space planning."
               label="Collaboration"
-              path="#"
+              path="/sign-up"
             />
           </ul>
Index: imaps-frontend/src/pages/IMaps/components/Footer.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Footer.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Footer.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -47,19 +47,17 @@
 .footer-links {
   width: 100%;
+  max-width: 1000px;
   display: flex;
-  justify-content: space-evenly;
-}
-.footer-link-wrapper a {
-  margin-top: 1em;
-}
-.footer-link-wrapper h2 {
-  width: 100%;
+  justify-content: center;
 }
 
+.footer-link-wrapper {
+  display: flex;
+}
 
 .footer-link-items {
   display: flex;
   flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
   margin: 16px;
   text-align: left;
@@ -102,10 +100,15 @@
 
 .social-media {
+  max-width: 1000px;
+  width: 100%;
 }
 
 .social-media-wrap {
   display: flex;
-  flex-direction: column;
+  justify-content: space-between;
   align-items: center;
+  width: 90%;
+  max-width: 1000px;
+  margin: 40px auto 0 auto;
 }
 
@@ -120,4 +123,5 @@
   color: #fff;
   justify-self: start;
+  margin-left: 20px;
   cursor: pointer;
   text-decoration: none;
@@ -127,13 +131,8 @@
   margin-bottom: 16px;
 }
-.social-media-wrap img {
-  width: 25%;
-}
 
 .website-rights {
   color: #fff;
-  align-content: flex-end;
-  width: 50%;
-  margin-top: 2em;
+  margin-bottom: 16px;
 }
 
Index: imaps-frontend/src/pages/IMaps/components/Footer.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Footer.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Footer.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -2,11 +2,10 @@
 import "./Footer.css";
 import { Button } from "./Button";
-import logo from "../../../assets/novo_logo_nobg_cropped.png";
-import {Link} from "react-router-dom";
+import logo from "../../../assets/logo_icon.png";
 
 function Footer() {
   return (
     <div className="footer-container">
-      <div className="footer-links">
+      {/* <div className="footer-links">
         <div className="footer-link-wrapper">
           <div className="footer-link-items">
@@ -14,26 +13,45 @@
             <a href="#">Contact</a>
             <a href="#">Support</a>
+            <a href="#">Destinations</a>
+            <a href="#">Sponsorships</a>
           </div>
         </div>
-          <div className="social-media-wrap">
-
-            <div className="footer-logo">
-              <img src={logo} alt={"logo"}/>
-            </div>
-            <small className="website-rights">iMaps © {2024}</small>
-          </div>
-        <div>
-          <div className="footer-link-wrapper">
-            <div className="footer-link-items">
-              <h2>Legal & Privacy</h2>
-              <Link to={"/privacy-policy"}>Privacy Policy</Link>
-              <Link to={"/terms-of-service"}>Terms Of Service</Link>
-
-            </div>
+        <div className="footer-link-wrapper">
+          <div className="footer-link-items">
+            <h2>Social Media</h2>
+            <a href="#">Instagram</a>
+            <a href="#">Facebook</a>
+            <a href="#">Youtube</a>
+            <a href="#">Twitter</a>
           </div>
         </div>
-
-      </div>
-
+      </div> */}
+      <section className="social-media">
+        <div className="social-media-wrap">
+          <div className="footer-logo">
+            <a href="#" className="social-logo">
+              iMaps
+            </a>
+          </div>
+          <small className="website-rights">iMaps © {2024}</small>
+          <div className="social-icons">
+            <a className="social-icon-link facebook" href="#" aria-label="Facebook">
+              <i className="fab fa-facebook-f" />
+            </a>
+            <a className="social-icon-link instagram" href="#" aria-label="Instagram">
+              <i className="fab fa-instagram" />
+            </a>
+            <a className="social-icon-link youtube" href="#" aria-label="Youtube">
+              <i className="fab fa-youtube" />
+            </a>
+            <a className="social-icon-link twitter" href="#" aria-label="Twitter">
+              <i className="fab fa-twitter" />
+            </a>
+            <a className="social-icon-link linkedin" href="#" aria-label="LinkedIn">
+              <i className="fab fa-linkedin" />
+            </a>
+          </div>
+        </div>
+      </section>
     </div>
   );
Index: imaps-frontend/src/pages/IMaps/components/HeroSection.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,2 @@
-@import url(https://fonts.googleapis.com/css?family=Exo:500);
-
 video {
   object-fit: cover;
@@ -9,8 +7,6 @@
 }
 
-
-
-
 .hero-container {
+  background: url("../images/img-home.jpg") center center/cover no-repeat;
   height: 100vh;
   width: 100%;
@@ -19,9 +15,6 @@
   justify-content: center;
   align-items: center;
-
+  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.4);
   object-fit: contain;
-
-
-
 }
 
@@ -30,16 +23,4 @@
   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 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/HeroSection.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -7,24 +7,25 @@
 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="/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 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>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/IMaps/components/Navbar.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,83 +1,161 @@
-.modern-navbar {
-  background: linear-gradient(90deg, #ffffff, #fffefe);
-  color: #ffffff;
-  /*color: #333333;*/
+.navbar {
+  background: linear-gradient(90deg, rgb(28, 27, 27) 0%, rgb(26, 23, 23) 100%);
+  height: 80px;
   display: flex;
   justify-content: center;
   align-items: center;
-  padding: 0.8rem 1.5rem;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  font-size: 1.2rem;
   position: sticky;
   top: 0;
-  z-index: 1000;
-  border-radius: 8px;
-  margin: 5px;
-  height: 70px;
-  overflow: hidden;
+  z-index: 999;
+}
+
+.pad-bot {
+  /* padding-bottom: 1.5rem; */
 }
 
 .navbar-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   width: 100%;
-  max-width: 1200px;
 }
 
-.navbar-left {
+.navbar-logo {
+  color: #fff;
+  justify-self: start;
+  margin-left: 20px;
+  cursor: pointer;
+  text-decoration: none;
+  font-size: 2rem;
   display: flex;
   align-items: center;
-  gap: 1rem;
 }
 
-.navbar-title {
-  font-size: 1.6rem;
-  font-weight: 700;
-  color: #ffffff;
-  margin: 0;
-  font-family: "exo", sans-serif;
+.fa-typo3 {
+  margin-left: 0.5rem;
+  font-size: 1.8rem;
 }
 
-.navbar-right {
+.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;
+}
+
+.nav-item {
+  height: 80px;
+}
+
+.nav-links {
+  color: #fff;
   display: flex;
   align-items: center;
-  gap: 1rem;
+  text-decoration: none;
+  padding: 0.5rem 1rem;
+  height: 100%;
 }
 
-.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:hover {
+  border-bottom: 4px solid #fff;
+  transition: all 0.2s ease-out;
 }
 
-.navbar-login {
-  background-color: #252627;
-  border: 2px solid #3f3232;
+.fa-bars {
+  color: #fff;
 }
 
-.navbar-login:hover {
-  background-color: #ffffff;
-  color: #212121;
-  border: 1px solid rgba(19, 18, 18, 0.82);
+.nav-links-mobile {
+  display: none;
 }
 
-.navbar-signup {
-  background-color: #252627;
-  color: #ffffff;
-  border: 2px solid #343a40;
+.menu-icon {
+  display: none;
 }
 
-.navbar-signup:hover {
-  background-color: #ffffff;
-  color: #343a40;
-  border: 2px solid #343a40;
+@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 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,42 +1,55 @@
-import React, {useContext, useState} from "react";
+import React, { useState, useEffect } from "react";
+import { Button } from "./Button";
+import "./Navbar.css";
 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 logo from "../../../assets/logo_icon.png";
 
 function Navbar() {
   const [click, setClick] = useState(false);
+  const [button, setButton] = useState(true);
 
-  const { isAuthenticated } = useAppContext();
+  const handleClick = () => setClick(!click);
+  const closeMobileMenu = () => setClick(false);
 
-    return (
-        <nav className="modern-navbar">
-            <div className="navbar-container">
-                {/* Left Section - Logo and Title */}
-                <div className="navbar-left">
-                    <Logo position="relative"/>
-                </div>
+  const showButton = () => {
+    if (window.innerWidth <= 960) {
+      setButton(false);
+    } else {
+      setButton(true);
+    }
+  };
 
-                {/* 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>
-    );
+  useEffect(() => {
+    showButton();
+  }, []);
+
+  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>
+    </>
+  );
 }
 
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,3 @@
+.home {
+  width: 100%;
+}
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,32 +1,17 @@
 import React from "react";
-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"
+import "./Home.css";
+import Cards from "../Cards";
+import HeroSection from "../HeroSection";
+import Footer from "../Footer";
 
 function Home() {
   return (
-    <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="/Maps">
-            <Button buttonSize="btn--large" >
-              Browse Maps <i className="far fa-play-circle" />
-            </Button>
-          </Link>
-          <Link to="/myMaps">
-            <Button buttonSize="btn--large" buttonStyle="btn--outline">
-              Create Maps
-            </Button>
-          </Link>
-        </div>
+    <>
+      <div className="home">
+        <HeroSection />
+        {/* <Cards /> */}
+        <Footer />
       </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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,159 +1,0 @@
-@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 */
-  /* Set a base background color */
-  background: #87898d url($bg-url) repeat 0 0;
-
-  /* Apply hue rotation to the image */
-
-  -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 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Login/Login.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,131 +1,88 @@
-import React, {useContext, useState} from "react";
-import {Link, useLocation, useNavigate} from "react-router-dom";
+import React, { useState } from "react";
+import { Link, 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, {API_BASE_URL} from "../../scripts/net/netconfig.js";
-import google_icon from "../../assets/Logo-google-icon-PNG.png"
-import github_icon from "../../assets/github-mark-white.png";
-import { v4 as uuidv4 } from 'uuid';
 
-const LoginPage = () => {
-    const [formUsername, setFormUsername] = useState("");
-    const [password, setPassword] = useState("");
-    const [error, setError] = useState(null);
-    const navigate = useNavigate();
-    const location = useLocation();
+const LoginPage = ({onLogin}) => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
 
-    const {setUsername, setIsAuthenticated} = useAppContext();
+  const payload = {
+    username: username,
+    password: password
+  };
 
-    const {targetPath} = location.state || {targetPath: {pathname: "/"}};
+  const handleLogin = (e) => {
+    e.preventDefault();
 
-    const payload = {
-        username: formUsername,
-        password: password,
-    };
+    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 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.");
-        });
-    };
-
-    const continueWithGitHub = async () => {
-        const httpService = new HttpService();
-        httpService.setResponseType('text');
-        const state = await httpService.get(config.auth.oauth.github.state)
-        const clientId = 'Iv23liqzhX5wMYNDHtnz';
-        const redirectUri = encodeURI(`${API_BASE_URL}/oauth/callback/github`);
-
-        const githubAuthUrl = `https://github.com/login/oauth/authorize?client_id=${encodeURI(clientId)}&redirect_uri=${redirectUri}&state=${encodeURI(state)}&scope=user:email`;
-
-        window.location.href = githubAuthUrl;
-
-    };
-
-    const continueWithGoogle = async () => {
-        console.log("Continue with Google");
-        const httpService = new HttpService();
-        httpService.setResponseType('text');
-        const state = await httpService.get(config.auth.oauth.github.state)
-        const clientId = '1024418489231-ml40ukvqcg9ad1h5ejor5dm6ipt6p8fo.apps.googleusercontent.com';
-        const redirectUri = encodeURI(`${API_BASE_URL}/oauth/callback/google`);
-        const googleAuthUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${encodeURIComponent(clientId)}
-        &redirect_uri=${encodeURIComponent(redirectUri)}&state=${encodeURIComponent(state)}&response_type=code&scope=${encodeURIComponent("openid profile email")}`;
-        window.location.href = googleAuthUrl
-    };
-
-    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>
-                <div className={styles.or}>OR</div>
-                <div className={styles.socialButtons}>
-                    <button className={styles.socialButton} onClick={continueWithGoogle}>
-                        <img src={google_icon} alt="Facebook Icon" className={styles.socialIcon}/>
-                        Sign In With Google
-                    </button>
-                    <button className={styles.socialButton} onClick={continueWithGitHub}>
-                        <img src={github_icon} alt="GitHub Icon" className={styles.socialIcon}/>
-                        Sign In With GitHub
-                    </button>
-                </div>
-                <p>
-                    Don't have an account? <Link to="/Signup"> Sign Up </Link>
-                </p>
-            </div>
-        </div>
-    );
+  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>
+  );
 };
 
Index: imaps-frontend/src/pages/Login/Login.module.css
===================================================================
--- imaps-frontend/src/pages/Login/Login.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Login/Login.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -13,39 +13,32 @@
 
 .wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: flex-end; /* Move content towards the right */
-  align-items: center; /* Center content vertically */
   height: 100vh;
-  margin-left: 30%;
-  padding: 2rem;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
 }
 
-
+.wrapper p {
+  font-size: 0.85rem;
+  margin-top: 1rem;
+}
 
 .form {
-  padding: 2rem;
-  display: flex;
-  flex-direction: column; /* Stack form elements vertically */
-  align-items: center; /* Center form elements horizontally */
-  justify-content: center; /* Vertically center the form */
-  background-color: #fff;
-  border-radius: 8px; /* Rounded corners for the form */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow to form */
-  width: 100%;
-  max-width: 400px; /* Restrict the form width for better appearance */
+  padding: 1.5rem;
+  -ms-flex-preferred-size: 100vw;
+  flex-basis: 100vw;
 }
 
 .form .heading {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: bold;
   text-align: center;
-  margin-bottom: 1.5rem; /* Spacing between heading and form */
 }
 
 .or {
-  margin-top: 1em;
-  text-align: center;
-  font-weight: bold;
-  color: #666;
+  margin: 1rem 0;
 }
 
@@ -53,6 +46,4 @@
   display: block;
   margin: 1.25rem 0 1rem 0;
-  font-size: 0.95rem;
-  color: #333;
 }
 
@@ -60,11 +51,8 @@
   height: 40px;
   width: 100%;
-  max-width: 350px; /* Slightly larger max-width */
   padding: 15px;
   background-color: #f1f9ff;
   border: 2px solid #bce0fd;
   border-radius: 8px;
-  box-sizing: border-box;
-  font-size: 1rem; /* Make input text a bit larger */
 }
 
@@ -72,6 +60,4 @@
   height: 40px;
   width: 100%;
-  max-width: 350px;
-  margin-top: 1.5rem;
   background-color: #258de6;
   color: white;
@@ -79,89 +65,42 @@
   letter-spacing: 1px;
   border: none;
+  display: block;
+  margin: 0 auto;
   font-weight: bold;
+  margin-top: 1.5rem;
   border-radius: 8px;
-  font-size: 1rem; /* Increase font size for better readability */
-}
-
-.socialButtons {
-  display: flex;
-  flex-direction: column; /* Stack social buttons vertically */
-  align-items: center; /* Center them horizontally */
-}
-
-.socialButton {
-  display: inline-flex; /* Align text and image inline */
-  align-items: center; /* Vertically center content */
-  justify-content: flex-start; /* Align items to the left */
-  padding: 10px 15px;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  font-size: 0.8rem;
-  font-weight: bold;
-  transition: background-color 0.2s, transform 0.2s;
-  width: 100%;
-  max-width: 350px; /* Limit max width */
-}
-
-.socialButton img {
-  width: 20px;
-  height: 20px;
-  margin-right: 10px;
-  vertical-align: middle;
-}
-
-.socialButton:hover {
-  filter: brightness(95%);
-}
-
-.socialButton:active {
-  transform: scale(0.98);
-}
-
-.socialButton:nth-child(2) {
-  background-color: #333; /* GitHub button */
-  color: white;
-}
-
-.socialButton:nth-child(1) {
-  background-color: #ffffff; /* Google button */
-  color: #000000;
-  box-shadow: 1px 2px #2f2525;
 }
 
 @media (min-width: 542px) {
   body {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
     justify-content: center;
   }
-
   .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
     display: flex;
     height: 100vh;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
     align-items: center;
-    justify-content: flex-end; /* Keep the form to the right */
-    padding: 2rem;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    padding: 1.5rem;
     max-width: 1100px;
   }
-
   .form {
+    -ms-flex-preferred-size: auto;
     flex-basis: auto;
-    align-items: center; /* Center form in larger screens */
-    width: 100%;
-    max-width: 400px; /* Keep form max width consistent */
   }
-
   .form input {
-    width: 100%; /* Ensures the input expands fully */
-    max-width: 350px;
+    width: 250px;
   }
-
-  .illustration{
-    margin-right: 40%;
-  }
-
   .illustration img {
-    max-width: 100%;
+    max-width: 80%;
     height: auto;
   }
@@ -169,25 +108,13 @@
 
 @media (max-width: 680px) {
-  .wrapper {
-    flex-direction: column; /* Stack form and illustration vertically */
-    align-items: center; /* Center content horizontally */
-    padding: 1rem;
+  .illustration {
+    display: none;
   }
+}
 
-  .illustration {
-    display: none; /* Hide the illustration on mobile */
-  }
-
-  .form {
-    width: 100%; /* Full width for mobile */
-    align-items: center; /* Center form elements horizontally */
-  }
-
-  .form input,
-  .form button,
-  .socialButton {
-    width: 100%; /* Full width for mobile */
-    max-width: 300px; /* Optional: Limit max width */
-  }
+.signUp .illustration {
+  order: 2;
+  justify-self: flex-end;
+  margin-left: 2rem;
 }
 
@@ -199,8 +126,2 @@
   transform: scale(0.98);
 }
-
-.error {
-  color: red;
-  font-size: 0.9rem;
-  margin-top: 0.5rem;
-}
Index: imaps-frontend/src/pages/MapView/MapView.jsx
===================================================================
--- imaps-frontend/src/pages/MapView/MapView.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,328 +1,0 @@
-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";
-import Report from "../../components/Report/Report.jsx";
-import {Button} from "../IMaps/components/Button.jsx";
-
-const MapView = ({isPrivate}) => {
-    const {mapName} = useParams();
-    const {username} = useAppContext();
-    const {isAuthenticated} = 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 [canDisplayNavDownload,setCanDisplayNavDownload] = useState(false);
-    const [from,setFrom] = useState("");
-    const [to,setTo] = 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);
-
-                console.log("FLOOR DATA: " + tlFloor?.mapData)
-
-                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()
-
-        setFrom(fromSearch);
-        setTo(toSearch);
-
-        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 handleNavigateEnd = (event) => {
-            console.log("DETAIL END",event.detail)
-            setCanDisplayNavDownload(true);
-        }
-
-        window.addEventListener("navend",handleNavigateEnd)
-        return () => {
-            window.removeEventListener("navend",handleNavigateEnd)
-        }
-    }, [app]);
-
-
-    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}
-                            />
-                            {canDisplayNavDownload &&
-                                (<div className={styles.downloadRouteButton}>
-                                    <button onClick={() => {
-                                        app.getRouteImages({
-                                            mapName: mapName,
-                                            from: from,
-                                            to: to
-                                        })
-                                        setCanDisplayNavDownload(false)
-                                    }}> Download Route</button>
-                                </div>) }
-                            <FilterBar map={app} roomTypes={roomTypes}/>
-                        </div>
-                    )}
-
-                    {isAuthenticated && <Report mapName = {mapName}></Report>}
-                    <div className={styles.profileContainer}>
-                        <Profile position="relative"/>
-                    </div>
-                </div>
-            </div>
-            <div id="temp"></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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,207 +1,0 @@
-@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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,21 +1,0 @@
-//
-// 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)
+++ imaps-frontend/src/pages/Maps/Maps.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,74 @@
+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)
+++ imaps-frontend/src/pages/Maps/Maps.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,88 @@
+.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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,208 +1,0 @@
-.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;
-  margin-top: 5em;
-
-}
-
-.searchBar input {
-  /*width: 300px;*/
-  width: 33vw;
-  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;
-  justify-content: flex-start;
-  padding: 10px;
-  /*padding-left: 2.5em;*/
-  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;
-}
-
-.plusButton {
-  width: 50px;
-  height: 50px;
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: transform 0.3s ease-in-out;
-  background: #4ebc3b;
-  margin-right: 20px;
-}
-
-.plusButton img {
-  width: 50px;
-  height: auto;
-  margin-left: 0;
-}
-
-.plusButton:hover {
-  transform: scale(1.1);
-  background: #46be2f;
-}
-
-.header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background-color: #f8f9fa; /* Light grey background for a clean look */
-  border-bottom: 1px solid #ddd; /* Subtle separation from the rest of the page */
-  padding: 10px 20px; /* Add some space around the content */
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Light shadow for subtle elevation */
-}
-
-.header .logo-wrapper,
-.header .profile-wrapper {
-  display: flex;
-  align-items: center;
-}
-
-.header h1 {
-  font-size: 1.5rem; /* Slightly larger font size */
-  color: #333; /* Dark grey for a professional tone */
-  margin: 0 auto; /* Center-align the title */
-  font-weight: 600; /* Semi-bold text for emphasis */
-  text-align: center;
-  flex-grow: 1; /* Allow it to take space in the middle */
-}
-
-.logo-wrapper {
-  margin-right: auto; /* Push logo to the far left */
-}
-
-.profile-wrapper {
-  margin-left: auto; /* Push profile to the far right */
-}
-
-
-
-
-@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 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,276 +1,0 @@
-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 Toast from "../../components/Toast/Toast.jsx";
-import plus_icon from "../../assets/plus_icon.png";
-
-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);
-    };
-
-    const handleUpdate = async (updatedMap) => {
-        try {
-            let httpService = new HttpService(true);
-            const response = await httpService.post(
-                config.my_maps.edit_map_info,
-                updatedMap
-            );
-            closeMapInfoModal()
-            window.location.reload();
-
-        } catch (error) {
-            showToast("Map Name already taken", 0)
-            closeMapInfoModal()
-        }
-    };
-
-    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";
-                showToast(`Error deleting the map: ${errorMessage}`, 0);
-            });
-    };
-
-    const addMap = (mapDetails) => {
-        const httpService = new HttpService();
-        httpService.setAuthenticated();
-
-        httpService
-            .put(`${config.my_maps.add}?username=${encodeURI(username)}`, mapDetails)
-            .then((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.gmapsUrl,
-                    image_url: card,
-                    is_published: respMap.is_published,
-                    mapType: respMap.mapType
-                };
-
-                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=${encodeURI(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 === "PENDING"));
-    }, [tiles]);
-
-    const handleSearch = (e) => {
-        const query = e.target.value.toLowerCase();
-        setTiles(allTiles.filter((tile) => tile.mapName.toLowerCase().includes(query)));
-    };
-
-    return (
-        <div className={styles.container}>
-
-            <div className={`${styles.logoWrapper}`}>
-                <Logo/>
-            </div>
-            <h1>Your Maps</h1>
-            <div className={`${styles.profileWrapper}`}>
-                <Profile/>
-            </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}
-                    />
-                    <button className={styles.plusButton} onClick={openCreateModal}>
-                        <img src={plus_icon} alt="Add Map"/>
-                    </button>
-                </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={(updatedMap = null) => {
-
-                    const updatedTile = {
-                        mapName: updatedMap.mapName,
-                        cols: 1,
-                        rows: 1,
-                        status: updatedMap.mapStatus,
-                        created_at: updatedMap.createdAt,
-                        modified_at: updatedMap.modifiedAt,
-                        published_at: updatedMap.published_at,
-                        gmaps_url: updatedMap.gMapsUrl,
-                        image_url: card,
-                        numFavourites: updatedMap.numFavourites,
-                    }
-                    showToast(`Map ${selectedMap.mapName} published successfully!`);
-                    setPrivateMaps((prevMaps) => prevMaps.filter(m => m.mapName !== selectedMap.mapName))
-                    setPendingMaps((prevMaps) => [...prevMaps, updatedTile])
-                    closeMapInfoModal()
-                }}
-            />
-
-            <CreateMapModal
-                isOpen={isCreateModalOpen}
-                onClose={closeCreateModal}
-                addMap={addMap}
-            />
-
-            {toastMessage && (
-                <Toast
-                    message={toastMessage}
-                    type={toastType}
-                    onClose={() => setToastMessage(null)}
-                />
-            )}
-        </div>
-    );
-}
Index: imaps-frontend/src/pages/PrivacyPolicy/PrivacyPolicy.css
===================================================================
--- imaps-frontend/src/pages/PrivacyPolicy/PrivacyPolicy.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,39 +1,0 @@
-.privacy-policy-container {
-    max-width: 800px; /* Set a max width for the content */
-    margin: 50px auto; /* Center the container with top/bottom margin */
-    padding: 20px; /* Add some padding for inner spacing */
-    background-color: #f9f9f9; /* Light background for contrast */
-    border: 1px solid #ddd; /* Subtle border for structure */
-    border-radius: 8px; /* Rounded corners */
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a shadow for depth */
-}
-
-.privacy-policy-container h1,
-.privacy-policy-container h2 {
-    color: #333; /* Darker color for headings */
-    margin-bottom: 20px; /* Add spacing below headings */
-}
-
-.privacy-policy-container p {
-    color: #555; /* Slightly lighter color for paragraph text */
-    line-height: 1.6; /* Increase line height for readability */
-    margin-bottom: 15px; /* Add spacing below paragraphs */
-}
-
-.privacy-policy-container ul {
-    margin-left: 20px; /* Indent lists */
-    margin-bottom: 20px; /* Space below lists */
-}
-
-.privacy-policy-container ul li {
-    margin-bottom: 10px; /* Add spacing between list items */
-}
-
-.privacy-policy-container a {
-    color: #007bff; /* Link color */
-    text-decoration: none; /* Remove underline by default */
-}
-
-.privacy-policy-container a:hover {
-    text-decoration: underline; /* Add underline on hover */
-}
Index: imaps-frontend/src/pages/PrivacyPolicy/PrivacyPolicy.jsx
===================================================================
--- imaps-frontend/src/pages/PrivacyPolicy/PrivacyPolicy.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,82 +1,0 @@
-import React from "react";
-import "./PrivacyPolicy.css";
-
-const PrivacyPolicy = () => {
-    return (
-        <div className="privacy-policy-container">
-            <h1>Privacy Policy</h1>
-            <p>Effective Date: January 19, 2025</p>
-            <p>
-                Welcome to <strong>IMAPS</strong>, your indoor mapping solution. Your privacy is
-                important to us. This Privacy Policy explains how we collect, use, and
-                protect your personal information.
-            </p>
-
-            <h2>1. Information We Collect</h2>
-            <p>
-                We may collect the following types of information when you use our
-                application:
-            </p>
-            <ul>
-                <li>Location data for providing navigation and map services.</li>
-                <li>
-                    Device information, including operating system and browser type.
-                </li>
-                <li>
-                    Usage data, such as search queries, clicks, and time spent on the app.
-                </li>
-                <li>Any feedback or messages you provide via the app.</li>
-            </ul>
-
-            <h2>2. How We Use Your Information</h2>
-            <p>
-                The information we collect is used to:
-            </p>
-            <ul>
-                <li>Provide accurate navigation and mapping services.</li>
-                <li>Enhance the app's features and functionality.</li>
-                <li>Analyze usage trends to improve performance.</li>
-                <li>Respond to user queries and support requests.</li>
-            </ul>
-
-            <h2>3. Sharing Your Information</h2>
-            <p>
-                We do not sell your personal information. However, we may share your
-                data with:
-            </p>
-            <ul>
-                <li>Third-party service providers who assist in app operations.</li>
-                <li>
-                    Legal authorities if required by law or to protect the app's security.
-                </li>
-            </ul>
-
-            <h2>4. Data Security</h2>
-            <p>
-                We implement industry-standard measures to protect your data. However,
-                no system is completely secure, and we cannot guarantee absolute
-                security.
-            </p>
-
-            <h2>5. Your Choices</h2>
-            <p>
-                You can control the information we collect by managing your device
-                settings or opting out of certain features.
-            </p>
-
-            <h2>6. Changes to This Privacy Policy</h2>
-            <p>
-                We may update this Privacy Policy from time to time. Changes will be
-                posted on this page with an updated &#34;Effective Date.&#34;
-            </p>
-
-            <h2>7. Contact Us</h2>
-            <p>
-                If you have any questions or concerns about this Privacy Policy, please
-                contact us at <a href="mailto:support@imaps.mk">support@imaps.mk</a>.
-            </p>
-        </div>
-    );
-};
-
-export default PrivacyPolicy;
Index: imaps-frontend/src/pages/Signup/Signup.jsx
===================================================================
--- imaps-frontend/src/pages/Signup/Signup.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Signup/Signup.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -3,6 +3,4 @@
 import illustration from "../../assets/illustration_img.png";
 import styles from "./Signup.module.css";
-import Logo from "../../components/Logo/Logo";
-import netconfig from "../../scripts/net/netconfig.js";
 
 export default function Signup() {
@@ -10,17 +8,10 @@
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
-  const [confirmPassword, setConfirmPassword] = useState("");
   const [message, setMessage] = useState("");
-  const [messageType, setMessageType] = useState("");
+  const [messageType, setMessageType] = useState(""); // New state to manage message type
   const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
-
-    if (password !== confirmPassword) {
-      setMessageType("error");
-      setMessage("Passwords do not match.");
-      return;
-    }
 
     const payload = {
@@ -31,5 +22,5 @@
 
     try {
-      const response = await fetch(netconfig.auth.register, {
+      const response = await fetch("http://localhost:8080/api/auth/register", {
         method: "POST",
         headers: {
@@ -43,7 +34,8 @@
         setMessage("User registered successfully!");
 
+        // Wait 3 seconds and then redirect to login page
         setTimeout(() => {
           navigate("/login");
-        }, 1000);
+        }, 3000);
       } else if (response.status === 409) {
         setMessageType("error");
@@ -61,68 +53,61 @@
 
   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}>CREATE AN ACCOUNT</div>
-          <form onSubmit={handleSubmit}>
-            <div>
-              <label htmlFor="name">Username</label>
-              <input
-                  type="text"
-                  id="name"
-                  value={name}
-                  onChange={(e) => setName(e.target.value)}
-                  placeholder="Enter your username"
-                  required
-              />
-            </div>
-            <div>
-              <label htmlFor="email">E-Mail</label>
-              <input
-                  type="email"
-                  id="email"
-                  value={email}
-                  onChange={(e) => setEmail(e.target.value)}
-                  placeholder="Enter your email"
-                  required
-              />
-            </div>
-            <div>
-              <label htmlFor="password">Password</label>
-              <input
-                  type="password"
-                  id="password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  placeholder="Enter your password"
-                  required
-              />
-            </div>
-            <div>
-              <label htmlFor="confirmPassword">Confirm Password</label>
-              <input
-                  type="password"
-                  id="confirmPassword"
-                  value={confirmPassword}
-                  onChange={(e) => setConfirmPassword(e.target.value)}
-                  placeholder="Confirm your password"
-                  required
-              />
-            </div>
-            <button type="submit">Submit</button>
-            {message && (
-                <p className={messageType === "success" ? styles.successMessage : styles.errorMessage}>
-                  {message}
-                </p>
-            )}
-          </form>
-          <p>
-            Have an account? <Link to="/Login"> Login </Link>
-          </p>
-        </div>
+    <div className={styles.wrapper}>
+      <div className={styles.illustration}>
+        <img src={illustration} alt="illustration" />
       </div>
+      <div className={styles.form}>
+        <div className={styles.heading}>CREATE AN ACCOUNT</div>
+        <form onSubmit={handleSubmit}>
+          <div>
+            <label htmlFor="name">Username</label>
+            <input
+              type="text"
+              id="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Enter your username"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="email">E-Mail</label>
+            <input
+              type="email"
+              id="email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              placeholder="Enter your email"
+              required
+            />
+          </div>
+          <div>
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              id="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Enter your password"
+              required
+            />
+          </div>
+          <button type="submit">Submit</button>
+
+          {/* Display message with appropriate styling */}
+          {message && (
+            <p className={messageType === "success" ? styles.successMessage : styles.errorMessage}>
+              {message}
+            </p>
+          )}
+          <h2 align="center" className={styles.or}>
+            OR
+          </h2>
+        </form>
+        <p>
+          Have an account? <Link to="/Login"> Login </Link>
+        </p>
+      </div>
+    </div>
   );
 }
Index: imaps-frontend/src/pages/Signup/Signup.module.css
===================================================================
--- imaps-frontend/src/pages/Signup/Signup.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Signup/Signup.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,35 +1,49 @@
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  font-family: sans-serif;
+}
+
+.illustration img {
+  max-height: 500px;
+  width: auto;
+}
+
 .wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  align-items: center; /* Vertically center content */
-  justify-content: center; /* Horizontally center content */
-  height: 100vh; /* Full viewport height */
-  background-color: #ffffff; /* Light background */
-  padding: 1rem;
-  gap: 2rem; /* Space between form and image */
+  height: 100vh;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+
+.wrapper p {
+  font-size: 0.85rem;
+  margin-top: 1rem;
 }
 
 .form {
-  padding: 2rem;
-  background-color: white;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 10px;
-  flex-basis: 100%;
-  max-width: 400px; /* Restrict form width */
-  text-align: center; /* Center text inside the form */
+  padding: 1.5rem;
+  -ms-flex-preferred-size: 100vw;
+  flex-basis: 100vw;
 }
 
 .form .heading {
-  font-size: 1.8rem;
+  font-size: 1.5rem;
   font-weight: bold;
-  color: #258de6;
-  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.or {
+  margin: 1rem 0;
 }
 
 .form label {
   display: block;
-  margin: 1.25rem 0 0.5rem 0;
-  font-size: 0.9rem;
-  font-weight: bold;
-  color: #555;
+  margin: 1.25rem 0 1rem 0;
 }
 
@@ -37,19 +51,12 @@
   height: 40px;
   width: 100%;
-  padding: 10px 15px;
+  padding: 15px;
   background-color: #f1f9ff;
   border: 2px solid #bce0fd;
   border-radius: 8px;
-  font-size: 1rem;
-}
-
-.form input:focus {
-  outline: none;
-  border-color: #258de6;
-  background-color: #e6f4ff;
 }
 
 .form button {
-  height: 45px;
+  height: 40px;
   width: 100%;
   background-color: #258de6;
@@ -58,97 +65,89 @@
   letter-spacing: 1px;
   border: none;
+  display: block;
+  margin: 0 auto;
+  font-weight: bold;
   margin-top: 1.5rem;
-  font-weight: bold;
   border-radius: 8px;
-  cursor: pointer;
-  transition: all 0.2s ease;
 }
 
-.form button:hover {
-  filter: brightness(90%);
+@media (min-width: 542px) {
+  body {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+  }
+  .wrapper {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    height: 100vh;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: distribute;
+    justify-content: space-around;
+    padding: 1.5rem;
+    max-width: 1100px;
+  }
+  .form {
+    -ms-flex-preferred-size: auto;
+    flex-basis: auto;
+  }
+  .form input {
+    width: 250px;
+  }
+  .illustration img {
+    max-width: 80%;
+    height: auto;
+  }
 }
 
-.form button:active {
-  transform: scale(0.96);
+@media (max-width: 680px) {
+  .illustration {
+    display: none;
+  }
 }
 
-.form p {
-  text-align: center;
-  margin-top: 1rem;
-  font-size: 0.9rem;
+.signUp .illustration {
+  order: 2;
+  justify-self: flex-end;
+  margin-left: 2rem;
 }
 
-.form p a {
-  color: #258de6;
-  text-decoration: none;
+button:hover {
+  filter: brightness(95%);
+}
+
+button:active {
+  transform: scale(0.98);
+}
+
+/* Error message style */
+.errorMessage {
+  color: #e74c3c; /* Red color for error */
+  background-color: #fbeaea;
+  padding: 10px;
+  border: 1px solid #e74c3c;
+  border-radius: 5px;
+  margin-top: 1rem;
+  text-align: center;
+  font-size: 0.9rem;
   font-weight: bold;
 }
 
-.form p a:hover {
-  text-decoration: underline;
-}
-
-.illustration {
-  text-align: center; /* Center image container */
-}
-
-.illustration img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 10px;
-  display: block;
-  margin: 0 auto; /* Center the image */
-}
-
-@media (min-width: 768px) {
-  .wrapper {
-    flex-direction: row;
-    gap: 4rem; /* Space between form and image */
-  }
-
-  .form {
-    flex-basis: 50%;
-  }
-
-  .illustration {
-    flex-basis: 50%;
-  }
-
-  .illustration img {
-    max-height: 600px;
-    width: auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .wrapper {
-    flex-direction: column;
-    text-align: center; /* Center all content in column layout */
-  }
-
-  .illustration {
-    margin-bottom: 2rem; /* Space between image and form */
-  }
-}
-
-.errorMessage,
+/* Success message style */
 .successMessage {
+  color: #2ecc71; /* Green color for success */
+  background-color: #ebf9f1;
+  padding: 10px;
+  border: 1px solid #2ecc71;
+  border-radius: 5px;
+  margin-top: 1rem;
+  text-align: center;
   font-size: 0.9rem;
   font-weight: bold;
-  text-align: center;
-  margin-top: 1rem;
-  padding: 10px;
-  border-radius: 8px;
 }
-
-.errorMessage {
-  color: #e74c3c;
-  background-color: #fbeaea;
-  border: 1px solid #e74c3c;
-}
-
-.successMessage {
-  color: #2ecc71;
-  background-color: #ebf9f1;
-  border: 1px solid #2ecc71;
-}
Index: imaps-frontend/src/pages/TermsOfService/TermsOfService.css
===================================================================
--- imaps-frontend/src/pages/TermsOfService/TermsOfService.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,42 +1,0 @@
-.terms-container {
-    max-width: 800px;
-    margin: 40px auto;
-    padding: 20px;
-    background-color: #f9f9f9;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    font-family: Arial, sans-serif;
-    color: #333;
-    line-height: 1.6;
-}
-
-.terms-container h1 {
-    font-size: 2rem;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.terms-container h2 {
-    font-size: 1.5rem;
-    margin-top: 20px;
-    color: #007BFF;
-}
-
-.terms-container p {
-    margin: 10px 0;
-}
-
-.terms-container ul {
-    margin: 10px 20px;
-    padding-left: 20px;
-    list-style: disc;
-}
-
-.terms-container a {
-    color: #007BFF;
-    text-decoration: none;
-}
-
-.terms-container a:hover {
-    text-decoration: underline;
-}
Index: imaps-frontend/src/pages/TermsOfService/TermsOfService.jsx
===================================================================
--- imaps-frontend/src/pages/TermsOfService/TermsOfService.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,81 +1,0 @@
-import React from "react";
-import "./TermsOfService.css";
-
-const TermsOfService = () => {
-    return (
-        <div className="terms-container">
-            <h1>Terms of Service</h1>
-            <p>Effective Date: January 19 2024</p>
-
-            <section>
-                <h2>1. Acceptance of Terms</h2>
-                <p>
-                    By accessing or using our indoor map application (“IMaps”), you agree to comply with and be bound by these Terms of Service (“Terms”). If you do not agree to these Terms, you may not use IMaps.
-                </p>
-            </section>
-
-            <section>
-                <h2>2. Changes to Terms</h2>
-                <p>
-                    We reserve the right to modify these Terms at any time. We will notify you of significant changes by posting the updated Terms on our website. Your continued use of the IMaps constitutes acceptance of the revised Terms.
-                </p>
-            </section>
-
-            <section>
-                <h2>3. Use of IMaps</h2>
-                <p>
-                    You agree to use IMaps only for lawful purposes. You must not:
-                </p>
-                <ul>
-                    <li>Engage in any activity that disrupts or interferes with IMaps.</li>
-                    <li>Use IMaps for any fraudulent, unlawful, or harmful activity.</li>
-                    <li>Attempt to gain unauthorized access to our servers or systems.</li>
-                </ul>
-            </section>
-
-            <section>
-                <h2>4. User Accounts</h2>
-                <p>
-                    To access certain features, you may need to create an account. You are responsible for maintaining the confidentiality of your account information and for all activities that occur under your account.
-                </p>
-            </section>
-
-            <section>
-                <h2>5. Intellectual Property</h2>
-                <p>
-                    All content, designs, trademarks, and intellectual property associated with IMaps are the property of [Your Company Name] or its licensors. Unauthorized use of these materials is strictly prohibited.
-                </p>
-            </section>
-
-            <section>
-                <h2>6. Limitation of Liability</h2>
-                <p>
-                    To the maximum extent permitted by law, [Your Company Name] shall not be liable for any direct, indirect, incidental, or consequential damages arising out of your use of the IMaps.
-                </p>
-            </section>
-
-            <section>
-                <h2>7. Termination</h2>
-                <p>
-                    We reserve the right to terminate or suspend your access to IMaps at our sole discretion, without notice, for conduct that we believe violates these Terms or is harmful to other users or the IMaps.
-                </p>
-            </section>
-
-            <section>
-                <h2>8. Governing Law</h2>
-                <p>
-                    These Terms shall be governed by and construed in accordance with the laws of [Your Jurisdiction]. Any disputes arising from these Terms will be subject to the exclusive jurisdiction of the courts in [Your Location].
-                </p>
-            </section>
-
-            <section>
-                <h2>9. Contact Us</h2>
-                <p>
-                    If you have any questions about these Terms, please contact us at <a href="mailto:support@imaps.mk">support@imaps.mk</a>.
-                </p>
-            </section>
-        </div>
-    );
-};
-
-export default TermsOfService;
