Index: imaps-frontend/src/App.css
===================================================================
--- imaps-frontend/src/App.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/App.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,10 +1,4 @@
-
-
 body {
-  margin: 0;
-  padding: 0;
-  height: 100%;
-  background: white;
-  backdrop-filter: blur(10px);
+  background-color: white;
 }
 .loading-container {
@@ -13,11 +7,11 @@
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  background-color: #f7f9fc;
+  height: 100vh; /* Full-screen loader */
+  background-color: #f7f9fc; /* Light background */
 }
 
 .spinner {
-  border: 8px solid #f3f3f3;
-  border-top: 8px solid #1e90ff;
+  border: 8px solid #f3f3f3; /* Light grey border */
+  border-top: 8px solid #1e90ff; /* Accent color for spinning part */
   border-radius: 50%;
   width: 60px;
@@ -38,5 +32,5 @@
   margin-top: 20px;
   font-size: 18px;
-  color: #2c3e50;
+  color: #2c3e50; /* Dark text for contrast */
   font-weight: 500;
 }
Index: imaps-frontend/src/App.jsx
===================================================================
--- imaps-frontend/src/App.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/App.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,6 +1,7 @@
 // eslint-disable-next-line no-unused-vars
-import React from "react";
-import {BrowserRouter as Router, Route, Routes} from "react-router-dom";
-import BrowseMaps from "./pages/BrowseMaps/BrowseMaps.jsx";
+import React, { useState, useEffect } from "react";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import FinkiMaps from "./pages/FinkiMaps/FinkiMaps";
+import Maps from "./pages/Maps/Maps";
 import LoginPage from "./pages/Login/Login";
 import Signup from "./pages/Signup/Signup";
@@ -10,50 +11,69 @@
 import ProtectedRoute from "./components/ProtectedRoute/ProtectedRoute";
 import "./App.css";
-import MapView from "./pages/MapView/MapView.jsx";
-import MyMaps from "./pages/MyMaps/MyMaps.jsx";
-
-import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/700.css';
-import {AppProvider} from "./components/AppContext/AppContext.jsx";
-import AdminPage from "./pages/AdminPage/AdminPage.jsx";
-import {AuthCallback} from "./pages/AuthCallback.jsx";
-import PrivacyPolicy from "./pages/PrivacyPolicy/PrivacyPolicy.jsx";
-import TermsOfService from "./pages/TermsOfService/TermsOfService.jsx";
-
+import HttpService from "./scripts/net/HttpService";
 
 function App() {
+  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [loading, setLoading] = useState(true);
 
+  useEffect(() => {
+    const token = localStorage.getItem("token");
+    const httpService = new HttpService("http://localhost:8080/api/auth");
+
+    const verifyToken = async () => {
+      try {
+        const response = await httpService.get(`/verify?token=${token}`);
+        if (response.username) {
+          setIsAuthenticated(true);
+          console.log("good");
+        }
+      } catch (error) {
+        console.log("ERROR: ", error);
+        setIsAuthenticated(false);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (token) {
+      verifyToken();
+      //setLoading(false);
+    } else {
+      setIsAuthenticated(false);
+      setLoading(false);
+    }
+  }, []);
+
+  const handleLogin = (token) => {
+    localStorage.setItem("token", token);
+    setIsAuthenticated(true);
+  };
+
+  if (loading) {
     return (
+      <div className="loading-container">
+        <div className="spinner"></div>
+        <p>Loading, please wait...</p>
+      </div>
+    );
+  }
 
-        <AppProvider>
-            <Router>
-                <Routes>
+  return (
+    <Router>
+      <Routes>
+        <Route path="/" element={<IMaps />} />
+        <Route path="/Maps/FinkiMaps/View" element={<FinkiMaps />} /> 
+        <Route path="/Maps" element={<Maps />} />
+        <Route path="/Login" element={<LoginPage onLogin={handleLogin} />} />
+        <Route path="/Signup" element={<Signup />} />
 
-                    <Route element={<ProtectedRoute/>}>
-                        <Route path="/myMaps/Draw/:mapName" element={<Draw/>}/>
-                        <Route path="/myMaps" element={<MyMaps/>}/>
-                        <Route path="/myMaps/View/:mapName" element={<MapView isPrivate={true}/>}/>
-                        <Route path="/Admin" element={<AdminPage/>}/>
-                    </Route>
-                    <Route path="/" element={<IMaps/>}/>
-                    <Route path="/Maps/View/:mapName" element={<MapView isPrivate={false}/>}/>
-                    <Route path="/Maps" element={<BrowseMaps/>}/>
-                    <Route path="/auth-callback" element={<AuthCallback/>}/>
-                    <Route path={"/privacy-policy"} element={<PrivacyPolicy/>}/>
-                    <Route path={"/terms-of-service"} element={<TermsOfService/>}/>
+        <Route element={<ProtectedRoute isAuthenticated={isAuthenticated} />}>
+          <Route path="/Maps/FinkiMaps/Draw" element={<Draw />} />
+        </Route>
 
-
-                    <Route path="/Login" element={<LoginPage/>}/>
-                    <Route path="/Signup" element={<Signup/>}/>
-
-                    <Route path="*" element={<Error/>}/>
-                </Routes>
-            </Router>
-        </AppProvider>
-
-
-    );
+        <Route path="*" element={<Error />} />
+      </Routes>
+    </Router>
+  );
 }
 
Index: imaps-frontend/src/TODO.txt
===================================================================
--- imaps-frontend/src/TODO.txt	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/TODO.txt	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,34 @@
--IDs za shape posebno od iminja
-- Refactor style na my maps i browse, da ne e tolku prazno od okolu
-- Admin link da izlegvit za admin users
-- Google maps url da sa pokazvit vo browse na mapite
+PRIORITY HIGH
+
+-Graph na backend
+-Connections za infoPins i entrance
+-Cuvanje ID vo _info (da se sovpagjat so modalite)
+-Crtanje na ruta vo View
+-Da se prenesat info od From i To vo Mapata kaj so se crtat
+-Da se cuvaat connections vnatre vo js kodoj za da imat prev data ko ke otvoris nanovo modal
+
+
+PRIORITY MEDIUM
+
+-Modluarnost za pojke mapi (ne samo finkimap)
+-Refactor na kod
+-Hover na sobi na View
+-Filter na prostorii (Ke zemame od roomType modal)
+-Multiple floor (Prerabotka na baza)
+-Zoom na View (imame, da se napret globalno)
+-Implementacija na stairs
+-Shape sho ke selektiras za klavanje da sejt celo vreme ko selektiran, duri ne kliknis drug shape ili escape.
+-Nacin da znes dodeka crtas koi sobi ti se povrzani
+-Ako kliknis na room vo view, da ta odnesit do toj room (navigacija);
+
+
+PRIORITY LOW
+
+-Page za pregled na svoi mapi
+-Refactor (Da se koristit net util klasa za pustanje do backend)
+-AutoSave na draw duri crtas (Da se pret update request do baza)
+-Refactor na stil na Draw
+
+
+
+ZA PREZ
Index: imaps-frontend/src/components/AppContext/AppContext.jsx
===================================================================
--- imaps-frontend/src/components/AppContext/AppContext.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,31 +1,0 @@
-import React, {createContext, useState, useContext, useEffect} from 'react';
-import {verifyToken} from "../../scripts/util/verifyToken.js";
-
-const AppContext = createContext();
-export const AppProvider = ({ children }) => {
-    const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const [username, setUsername] = useState('');
-    const [loading, setLoading] = useState(true);
-
-    useEffect(() => {
-        verifyToken(setIsAuthenticated,setUsername,setLoading)
-    }, []);
-
-
-    return (
-        <AppContext.Provider
-            value={{
-                isAuthenticated,
-                username,
-                loading,
-                setIsAuthenticated,
-                setUsername,
-                setLoading,
-            }}
-        >
-            {children}
-        </AppContext.Provider>
-    );
-};
-
-export const useAppContext = () => useContext(AppContext);
Index: imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx
===================================================================
--- imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,26 +1,0 @@
-import styles from "./DeleteConfirmationModal.module.css";
-
-export default function DeleteConfirmationModal({ isOpen, onClose, onDelete, maps }) {
-  if (!isOpen) return null;
-
-  return (
-    <div className={styles.modalOverlay}>
-      <div className={styles.modalContent}>
-        <h2>Select a Map to Delete</h2>
-        <ul className={styles.mapList}>
-          {maps.map((map) => (
-            <li key={map.mapName} className={styles.mapItem}>
-              {map.mapName}
-              <button onClick={() => onDelete(map.mapName)} className={styles.deleteButton}>
-                Delete
-              </button>
-            </li>
-          ))}
-        </ul>
-        <div className={styles.modalActions}>
-          <button onClick={onClose}>Cancel</button>
-        </div>
-      </div>
-    </div>
-  );
-}
Index: imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.css
===================================================================
--- imaps-frontend/src/components/DeleteConfirmationModal/DeleteConfirmationModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,92 +1,0 @@
-.modalOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background: rgba(0, 0, 0, 0.7);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fadeIn 0.3s ease-out;
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-.modalContent {
-  background: white;
-  padding: 30px;
-  border-radius: 12px;
-  width: 450px;
-  max-width: 90%;
-  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.2);
-  transition: transform 0.3s ease;
-  animation: scaleUp 0.3s ease-out;
-}
-
-@keyframes scaleUp {
-  from {
-    transform: scale(0.9);
-  }
-  to {
-    transform: scale(1);
-  }
-}
-
-h2 {
-  font-size: 1.75rem;
-  margin-bottom: 20px;
-  color: #333;
-}
-
-ul {
-  padding-left: 0;
-  list-style: none;
-  margin-bottom: 20px;
-}
-
-li {
-  margin-bottom: 10px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-li button {
-  background-color: #ff4d4d;
-  color: white;
-  border: none;
-  padding: 8px 12px;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-li button:hover {
-  background-color: #cc0000;
-}
-
-.modalActions {
-  display: flex;
-  justify-content: center;
-}
-
-.modalActions button {
-  padding: 10px 20px;
-  font-size: 1rem;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s ease;
-}
-
-.modalActions button:hover {
-  background-color: #f5f5f5;
-}
Index: imaps-frontend/src/components/DrawGuide/DrawGuide.jsx
===================================================================
--- imaps-frontend/src/components/DrawGuide/DrawGuide.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/DrawGuide/DrawGuide.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -18,6 +18,6 @@
           <div onClick={toggleModal} className={styles.overlay}></div>
           <div className={styles.modalContent}>
-            <h2 className={styles.title}>How to Use the Map Builder</h2>
-            <p className={styles.paragraph}>Welcome to the Map Builder! Here you can create an indoor map, render it and enjoy!:</p>
+            <h2>How to Use the Map Builder</h2>
+            <p>Welcome to the Map Builder! Here you can create an indoor map, render it and enjoy!:</p>
             <br></br>
             <ul>
@@ -35,5 +35,5 @@
             </ul>
             <br></br>
-            <p className={styles.paragraph}>After completing your map, click the render button and go to the View page to see your full featured map!</p>
+            <p>After completing your map, click the render button and go to the View page to see your full featured map!</p>
 
             <button className={styles.closeModal} onClick={toggleModal}>
Index: imaps-frontend/src/components/DrawGuide/DrawGuide.module.css
===================================================================
--- imaps-frontend/src/components/DrawGuide/DrawGuide.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/DrawGuide/DrawGuide.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -18,13 +18,4 @@
   backdrop-filter: blur(5px); /* Optional blur effect */
   z-index: 999;
-
-}
-
-.title{
-  color: white;
-}
-
-.paragraph{
-  color: #ababab;
 }
 
@@ -34,5 +25,5 @@
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: #2c2f33;
+  background-color: #2c2f33; /* Darker background for modal content */
   color: #ffffff; /* White text for contrast */
   padding: 20px;
@@ -44,8 +35,8 @@
 }
 
-/*h2 {*/
-/*  margin-bottom: 15px;*/
-/*  color: #ffffff; !* White text for the heading *!*/
-/*}*/
+h2 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the heading */
+}
 
 .btnModal {
Index: imaps-frontend/src/components/EntranceModal/EntranceModal.jsx
===================================================================
--- imaps-frontend/src/components/EntranceModal/EntranceModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/EntranceModal/EntranceModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,248 @@
+import React, { useState, useEffect } from "react";
+import styles from "./EntranceModal.module.css";
+
+export default function EntranceModal(props) {
+  const [modal, setModal] = useState(false);
+  const [room, setRoom] = useState(null);
+  const [pins, setPins] = useState([]);
+
+  const [formData, setFormData] = useState({
+    name: "",
+    connectedRoom: "",
+    description: "",
+    availableRooms: [],
+    availablePins: [],
+    selectedPins: [],
+    isMainEntrance: false,
+    selectedPin: "",
+  });
+
+  const toggleModal = () => {
+    if (modal) {
+      room.info = formData;
+      props.map.updateRoomNames();
+      console.log("Se vikna");
+    }
+    setModal(!modal);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value, type, checked } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+
+    console.log(formData);
+  };
+
+  const addPinToList = () => {
+    if (!formData.selectedPin || pins.includes(formData.selectedPin)) return;
+
+    setPins((prevPins) => {
+      const updatedPins = [...prevPins, formData.selectedPin];
+
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        selectedPin: "",
+        selectedPins: updatedPins,
+      }));
+
+      return updatedPins;
+    });
+  };
+
+  const removePinFromList = (pinToRemove) => {
+    setPins((prevPins) => {
+      const updatedPins = prevPins.filter((pin) => pin !== pinToRemove);
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        selectedPins: updatedPins,
+      }));
+      return updatedPins;
+    });
+    props.map.removeConnection(formData.name, pinToRemove);
+  };
+
+  const saveDetails = () => {
+    if (room) {
+      room.info = formData;
+      toggleModal();
+    }
+  };
+
+  useEffect(() => {
+    const openModalHandler = (event) => {
+      const roomObj = event.detail.room;
+      setRoom(roomObj);
+
+      const savedPins = roomObj.info.selectedPins || [];
+
+      setFormData({
+        name: roomObj.info.name || "",
+        connectedRoom: roomObj.info.connectedRoom || "",
+        description: roomObj.info.description || "",
+        availablePins: event.detail.map.getConnections() || [],
+        availableRooms: event.detail.map.getRooms() || [],
+        isMainEntrance: roomObj.info.isMainEntrance || false,
+        selectedPin: "",
+        selectedPins: savedPins,
+      });
+
+      setPins(savedPins);
+      setModal(true);
+      event.detail.map.updateConnections();
+
+      console.log(savedPins, "Loaded pins on modal open");
+    };
+
+    window.addEventListener("openEntranceModalEvent", openModalHandler);
+
+    return () => {
+      window.removeEventListener("openEntranceModalEvent", openModalHandler);
+    };
+  }, []);
+
+  if (modal) {
+    document.body.classList.add(styles.activeModal);
+  } else {
+    document.body.classList.remove(styles.activeModal);
+  }
+
+  return (
+    <>
+      {/* <button onClick={toggleModal} className={styles.btnModal}>
+        Entrance Modal
+      </button> */}
+
+      {modal && (
+        <div className={styles.modal}>
+          <div onClick={toggleModal} className={styles.overlay}></div>
+          <div className={styles.modalContent}>
+            <h2>Enter Entrance Details</h2>
+            <form className={styles.form}>
+              {/* Entrance Name */}
+              <div className={styles.formGroup}>
+                <label htmlFor="name">Name:</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  placeholder="Enter the entrance name" // Suggest user input
+                  required
+                />
+              </div>
+
+              {/* Select Room for Entrance */}
+              <div className={styles.formGroup}>
+                <label htmlFor="connectedRoom">Select room associated with entrance:</label>
+                <select
+                  id="connectedRoom"
+                  name="connectedRoom"
+                  value={formData.connectedRoom}
+                  onChange={handleInputChange}
+                  required
+                >
+                  <option value="">Select Room</option>
+                  {formData.availableRooms.map((room, index) => (
+                    <option key={index} value={room.name}>
+                      {room.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+
+              {/* Pins Dropdown for Hallway Navigation */}
+              <div className={styles.formGroup}>
+                <label htmlFor="selectedPin">Select connections:</label>
+                <select
+                  id="selectedPin"
+                  name="selectedPin"
+                  value={formData.selectedPin}
+                  onChange={handleInputChange}
+                  required
+                >
+                  <option value="">Select Connection</option>
+                  {formData.availablePins
+                    .filter(
+                      (pin) =>
+                        formData.selectedPins.includes(pin.name) === false &&
+                        pin.name !== "" &&
+                        pin.name !== formData.name
+                    )
+                    .map((pin, index) => (
+                      <option key={index} value={pin.name}>
+                        {pin.name}
+                      </option>
+                    ))}
+                </select>
+                <button type="button" onClick={addPinToList} className={styles.addButton}>
+                  Add Connection
+                </button>
+              </div>
+
+              {/* Display added pins */}
+              <h3>Connections:</h3>
+              <ul className={styles.pinList}>
+                {pins.length > 0 ? (
+                  pins.map((pin, index) => (
+                    <li key={index} className={styles.pinItem}>
+                      {pin}
+                      <button onClick={() => removePinFromList(pin)} className={styles.removeButton}>
+                        Remove
+                      </button>
+                    </li>
+                  ))
+                ) : (
+                  <li>No connections added</li>
+                )}
+              </ul>
+              <br />
+
+              {/* Description */}
+              <div className={styles.formGroup}>
+                <label htmlFor="description">Description:</label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  rows="3"
+                />
+              </div>
+
+              {/* Main Entrance Checkbox */}
+              <div className={styles.formGroupCheckbox}>
+                <input
+                  type="checkbox"
+                  id="isMainEntrance"
+                  name="isMainEntrance"
+                  checked={formData.isMainEntrance}
+                  onChange={handleInputChange}
+                />
+                <label htmlFor="isMainEntrance">Is Main Entrance?</label>
+              </div>
+
+              {/* Save Button */}
+              <div className={styles.formGroup}>
+                <button
+                  type="button"
+                  id="submit-details"
+                  onClick={saveDetails}
+                  className={styles.submitButton}
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+            <button className={styles.closeModal} onClick={toggleModal}>
+              CLOSE
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
Index: imaps-frontend/src/components/EntranceModal/EntranceModal.module.css
===================================================================
--- imaps-frontend/src/components/EntranceModal/EntranceModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/EntranceModal/EntranceModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,183 @@
+/* Active modal: Disable scrolling when the modal is open */
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+/* Modal and overlay styles */
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* Overlay: Dark background with optional blur */
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999; /* Ensure the overlay appears below the modal */
+}
+
+/* Modal content: Centered and styled */
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000; /* Ensure the modal appears above the overlay */
+}
+
+/* Heading styles */
+h2,
+h3 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the headings */
+}
+
+/* Button for opening the modal */
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+/* Close button inside the modal */
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+/* Form styles */
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+/* Form labels */
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+/* Input, select, and textarea styles */
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+/* Checkbox alignment fix */
+.formGroupCheckbox {
+  display: flex;
+  align-items: center; /* Vertical alignment */
+  color: #ffffff;
+}
+
+/* Add button */
+.addButton {
+  background-color: #28a745;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.addButton:hover {
+  background-color: #218838;
+}
+
+/* Save button styling */
+.submitButton {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
+
+/* Pin list */
+.pinList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 15px;
+}
+
+/* Individual pin item */
+.pinItem {
+  background-color: #444;
+  padding: 8px;
+  margin-bottom: 5px;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Remove button */
+.removeButton {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}
Index: imaps-frontend/src/components/FilterBar/FilterBar.jsx
===================================================================
--- imaps-frontend/src/components/FilterBar/FilterBar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/FilterBar/FilterBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,34 +1,32 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React from "react";
 import styles from "./FilterBar.module.css";
 
-export default function FilterBar({roomTypes,map}) {
-  const [selectedCategory, setSelectedCategory] = useState("all");
-
-
-
-  const filterLocation = useCallback((category) => {
-    map.setFilter(category)
-    setSelectedCategory(category);
-  },[])
+function FilterBar() {
+  const filterLocation = (category) => {
+    console.log(`Filter locations by: ${category}`);
+    // filtering logic
+  };
 
   return (
     <div className={styles.wrapper}>
       <div className={styles.scrollableContainer}>
-        <button
-          className={`${styles.buttonValue} ${selectedCategory === "all" ? styles.active : ""}`}
-          onClick={() => filterLocation("all")}
-        >
+        <button className={styles.buttonValue} onClick={() => filterLocation("all")}>
           All
         </button>
-
-        {roomTypes?.map((roomType, index) => (
-          <button
-            key={index}
-            className={`${styles.buttonValue} ${selectedCategory === roomType.name ? styles.active : ""}`}
-            onClick={() => filterLocation(roomType.name)}
-          >
-            {roomType.name}
-          </button>
-        ))}
+        <button className={styles.buttonValue} onClick={() => filterLocation("Classrooms")}>
+          Classrooms
+        </button>
+        <button className={styles.buttonValue} onClick={() => filterLocation("Administrative")}>
+          Administrative
+        </button>
+        <button className={styles.buttonValue} onClick={() => filterLocation("Labs")}>
+          Labs
+        </button>
+        <button className={styles.buttonValue} onClick={() => filterLocation("Restrooms")}>
+          Restrooms
+        </button>
+        <button className={styles.buttonValue} onClick={() => filterLocation("Cafeteria")}>
+          Cafeteria
+        </button>
       </div>
     </div>
@@ -36,2 +34,3 @@
 }
 
+export default FilterBar;
Index: imaps-frontend/src/components/FilterBar/FilterBar.module.css
===================================================================
--- imaps-frontend/src/components/FilterBar/FilterBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/FilterBar/FilterBar.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,3 +1,3 @@
-/* FilterMaps.module.css */
+/* FilterBar.module.css */
 * {
   font-family: "Poppins", sans-serif;
@@ -18,13 +18,12 @@
   padding: 0px 0; /* Adds some space around the buttons */
   width: 100%;
-  overflow-y: hidden;
 }
 
 .buttonValue {
-  border: 2px solid rgb(37,111,123);
+  border: 2px solid #6759ff;
   padding: 0.5em 1.5em;
   border-radius: 3em;
   background-color: transparent;
-  color: rgb(37,111,123);
+  color: #6759ff;
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
@@ -34,10 +33,10 @@
 .buttonValue:hover,
 .buttonValue:focus {
-  background-color: rgb(33, 98, 108);
+  background-color: #6759ff;
   color: #ffffff;
 }
 
 .active {
-  background-color: rgb(37,111,123);
+  background-color: #6759ff;
   color: #ffffff;
 }
@@ -48,5 +47,5 @@
 
 .scrollableContainer::-webkit-scrollbar-thumb {
-  background-color: rgb(37,111,123);
+  background-color: #6759ff;
   border-radius: 3px;
 }
Index: imaps-frontend/src/components/FilterMaps/FilterMaps.jsx
===================================================================
--- imaps-frontend/src/components/FilterMaps/FilterMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,37 +1,0 @@
-import React, { useState, useEffect, useCallback } from "react";
-import styles from "./FilterMaps.module.css";
-
-export default function FilterMaps({mapTypes,setFilter}) {
-  const [selectedCategory, setSelectedCategory] = useState("all");
-
-
-
-  const mapFilter = useCallback((category) => {
-    setFilter(category)
-    setSelectedCategory(category);
-  },[])
-
-  return (
-    <div className={styles.wrapper}>
-      <div className={styles.scrollableContainer}>
-        <button
-          className={`${styles.buttonValue} ${selectedCategory === "all" ? styles.active : ""}`}
-          onClick={() => mapFilter("all")}
-        >
-          All
-        </button>
-
-        {mapTypes?.map((mapType, index) => (
-          <button
-            key={index}
-            className={`${styles.buttonValue} ${selectedCategory === mapType ? styles.active : ""}`}
-            onClick={() => mapFilter(mapType)}
-          >
-            {mapType}
-          </button>
-        ))}
-      </div>
-    </div>
-  );
-}
-
Index: imaps-frontend/src/components/FilterMaps/FilterMaps.module.css
===================================================================
--- imaps-frontend/src/components/FilterMaps/FilterMaps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,52 +1,0 @@
-/* FilterMaps.module.css */
-* {
-  font-family: "Poppins", sans-serif;
-}
-
-.wrapper {
-  display: flex;
-  justify-content: center; /* Centers the scrollable container */
-  width: 100%; /* Ensures the container takes full width */
-  overflow-x: hidden; /* Prevents the wrapper from overflowing */
-}
-
-.scrollableContainer {
-  display: flex;
-  gap: 10px;
-  overflow-x: auto; /* Allows horizontal scrolling */
-  white-space: nowrap; /* Prevents buttons from wrapping */
-  padding: 0px 0; /* Adds some space around the buttons */
-  width: 100%;
-  overflow-y: hidden;
-}
-
-.buttonValue {
-  border: 2px solid rgb(37,111,123);
-  padding: 0.5em 1.5em;
-  border-radius: 3em;
-  background-color: transparent;
-  color: rgb(37,111,123);
-  cursor: pointer;
-  transition: background-color 0.3s, color 0.3s;
-  white-space: nowrap; /* Ensures the text does not wrap */
-}
-
-.buttonValue:hover,
-.buttonValue:focus {
-  background-color: rgb(33, 98, 108);
-  color: #ffffff;
-}
-
-.active {
-  background-color: rgb(37,111,123);
-  color: #ffffff;
-}
-
-.scrollableContainer::-webkit-scrollbar {
-  height: 6px;
-}
-
-.scrollableContainer::-webkit-scrollbar-thumb {
-  background-color: rgb(37,111,123);
-  border-radius: 3px;
-}
Index: imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx
===================================================================
--- imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/InfoPinModal/InfoPinModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,204 @@
+import React, { useState, useEffect } from "react";
+import styles from "./InfoPinModal.module.css"; // Reusing the same styles
+
+export default function InfoPinModal(props) {
+  const [modal, setModal] = useState(false);
+  const [pins, setPins] = useState([]);
+  const [room, setRoom] = useState(null);
+
+  const [formData, setFormData] = useState({
+    name: "",
+    description: "",
+    selectedPin: "",
+    availablePins: [],
+    selectedPins: [],
+  });
+
+  const toggleModal = () => {
+    if (modal) {
+      room.info = formData;
+      props.map.updateRoomNames();
+    }
+    setModal(!modal);
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const addPinToList = () => {
+    if (!formData.selectedPin || pins.includes(formData.selectedPin)) return;
+
+    setPins((prevPins) => {
+      const updatedPins = [...prevPins, formData.selectedPin];
+
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        selectedPin: "",
+        selectedPins: updatedPins,
+      }));
+
+      return updatedPins;
+    });
+  };
+
+  const removePinFromList = (pinToRemove) => {
+    setPins((prevPins) => {
+      const updatedPins = prevPins.filter((pin) => pin !== pinToRemove);
+
+      setFormData((prevFormData) => ({
+        ...prevFormData,
+        selectedPins: updatedPins,
+      }));
+
+      props.map.removeConnection(formData.name, pinToRemove);
+      return updatedPins;
+    });
+  };
+
+  const saveDetails = () => {
+    room.info = formData;
+    toggleModal();
+  };
+
+  useEffect(() => {
+    const openModalHandler = (event) => {
+      const roomObj = event.detail.room;
+
+      setRoom(roomObj);
+
+      // Populate formData and pins based on the room information
+      setFormData({
+        name: roomObj.info.name || "", // Room name
+        description: roomObj.info.description || "",
+        selectedPin: "",
+        availablePins: event.detail.map.getConnections(),
+        selectedPins: roomObj.info.selectedPins,
+      });
+
+      setPins(roomObj.info.selectedPins || []); // Set the already connected pins
+
+      setModal(true); // Open the modal
+      event.detail.map.updateConnections();
+    };
+
+    // Add event listener to open modal
+    window.addEventListener("openPinModalEvent", openModalHandler);
+
+    return () => {
+      // Cleanup the event listener when the component unmounts
+      window.removeEventListener("openPinModalEvent", openModalHandler);
+    };
+  }, []);
+
+  if (modal) {
+    document.body.classList.add(styles.activeModal);
+  } else {
+    document.body.classList.remove(styles.activeModal);
+  }
+
+  return (
+    <>
+      {/* <button onClick={toggleModal} className={styles.btnModal}>
+        Info Pin Modal
+      </button> */}
+
+      {modal && (
+        <div className={styles.modal}>
+          <div onClick={toggleModal} className={styles.overlay}></div>
+          <div className={styles.modalContent}>
+            <h2>Enter Pin Details</h2>
+            <form className={styles.form}>
+              <div className={styles.formGroup}>
+                <label htmlFor="name">Name:</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  placeholder="Enter the pin name"
+                  required
+                />
+              </div>
+
+              <div className={styles.formGroup}>
+                <label htmlFor="selectedPin">Select connections:</label>
+                <select
+                  id="selectedPin"
+                  name="selectedPin"
+                  value={formData.selectedPin}
+                  onChange={handleInputChange}
+                  required
+                >
+                  <option value="">Select Connection</option>
+                  {formData.availablePins
+                    .filter(
+                      (pin) =>
+                        formData.selectedPins.includes(pin.name) == false &&
+                        pin.name != "" &&
+                        pin.name != formData.name
+                    )
+                    .map((pin, index) => (
+                      <option key={index} value={pin.name}>
+                        {pin.name}
+                      </option>
+                    ))}
+                </select>
+                <button type="button" onClick={addPinToList} className={styles.addButton}>
+                  Add Connection
+                </button>
+              </div>
+
+              <h3>Connections:</h3>
+              <ul className={styles.pinList}>
+                {pins.length > 0 ? (
+                  pins.map((pin, index) => (
+                    <li key={index} className={styles.pinItem}>
+                      {pin}
+                      <button onClick={() => removePinFromList(pin)} className={styles.removeButton}>
+                        Remove
+                      </button>
+                    </li>
+                  ))
+                ) : (
+                  <li>No connections added</li>
+                )}
+              </ul>
+              <br />
+              <div className={styles.formGroup}>
+                <label htmlFor="description">Description:</label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  rows="3"
+                  placeholder="Enter description for the pin"
+                />
+              </div>
+
+              <div className={styles.formGroup}>
+                <button
+                  type="button"
+                  id="submit-details"
+                  onClick={saveDetails}
+                  className={styles.submitButton}
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+            <button className={styles.closeModal} onClick={toggleModal}>
+              CLOSE
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
Index: imaps-frontend/src/components/InfoPinModal/InfoPinModal.module.css
===================================================================
--- imaps-frontend/src/components/InfoPinModal/InfoPinModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/InfoPinModal/InfoPinModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,183 @@
+/* Active modal: Disable scrolling when the modal is open */
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+/* Modal and overlay styles */
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* Overlay: Dark background with optional blur */
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999; /* Ensure the overlay appears below the modal */
+}
+
+/* Modal content: Centered and styled */
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000; /* Ensure the modal appears above the overlay */
+}
+
+/* Heading styles */
+h2,
+h3 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the headings */
+}
+
+/* Button for opening the modal */
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+/* Close button inside the modal */
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+/* Form styles */
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+/* Form labels */
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+/* Input, select, and textarea styles */
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+/* Checkbox alignment fix */
+.formGroupCheckbox {
+  display: flex;
+  align-items: center; /* Vertical alignment */
+  color: #ffffff;
+}
+
+/* Add button */
+.addButton {
+  background-color: #28a745;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.addButton:hover {
+  background-color: #218838;
+}
+
+/* Save button styling */
+.submitButton {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 16px;
+  margin-top: 15px;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
+
+/* Pin list */
+.pinList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 15px;
+}
+
+/* Individual pin item */
+.pinItem {
+  background-color: #444;
+  padding: 8px;
+  margin-bottom: 5px;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Remove button */
+.removeButton {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}
Index: imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.jsx
===================================================================
--- imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,39 @@
+import { useState } from "react";
+import styles from './KeymapPanel.module.css'; // Import the CSS module
+
+const keyMappings = [
+    { key: 'W', info: 'Move Up' },
+    { key: 'A', info: 'Move Left' },
+    { key: 'S', info: 'Move Down' },
+    { key: 'D', info: 'Move Right' },
+    { key: 'Space', info: 'Jump / Shoot' },
+    { key: 'E', info: 'Interact' },
+    { key: 'Q', info: 'Switch Weapon' }
+];
+
+const KeyboardPanel = () => {
+    const [hoveredKey, setHoveredKey] = useState(null);
+
+    return (
+        <div className={styles.keyboardPanel}>
+            {keyMappings.map((keyItem, index) => (
+                <button
+                    key={index}
+                    className={styles.keyButton}
+                    onMouseEnter={() => setHoveredKey(keyItem.info)}
+                    onMouseLeave={() => setHoveredKey(null)}
+                >
+                    {keyItem.key}
+                </button>
+            ))}
+
+            {hoveredKey && (
+                <div className={styles.keyInfo}>
+                    {hoveredKey}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default KeyboardPanel;
Index: imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.module.css
===================================================================
--- imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/KeyMappingsGuidePanel/KeymapPanel.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,45 @@
+.keymapPanel {
+    position: fixed; /* Position the panel at the top */
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 1000; /* Make sure the panel is above other elements */
+    background-color: #f1f1f1;
+    border: 2px solid #333;
+    padding: 10px;
+    border-radius: 10px;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 10px;
+    width: 20px; /* Adjust the width to suit your layout */
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.keyButton {
+    width: 50px;
+    height: 50px;
+    background-color: #f1f1f1;
+    border: 2px solid #333;
+    border-radius: 5px;
+    font-size: 18px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.keyButton:hover {
+    background-color: #333;
+    color: #fff;
+}
+
+.keyInfo {
+    margin-top: 10px;
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    background-color: #f8f8f8;
+    border: 2px solid #333;
+    padding: 5px;
+    border-radius: 5px;
+}
Index: imaps-frontend/src/components/ListReports/ListReports.jsx
===================================================================
--- imaps-frontend/src/components/ListReports/ListReports.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,77 +1,0 @@
-import React, { useEffect, useState } from "react";
-import styles from "./ListReports.module.css";
-import HttpService from "../../scripts/net/HttpService.js";
-import config from "../../scripts/net/netconfig.js";
-import {Link} from "react-router-dom";
-
-const ListReports = () => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [reports, setReports] = useState([]);
-
-    useEffect(() => {
-        const loadReports = async () => {
-            try {
-                const httpService = new HttpService(true);
-                httpService.setAuthenticated();
-
-                const respReports = await httpService.get(config.admin.load_reports);
-
-                const sortedReports = respReports.sort(
-                    (a, b) => new Date(b.date) - new Date(a.date)
-                );
-
-                setReports(sortedReports);
-            } catch (error) {
-                console.error("Error loading reports:", error);
-            }
-        };
-        loadReports();
-    }, []);
-
-    const handleButtonClick = () => {
-        setIsModalOpen(true);
-    };
-
-    const handleCloseModal = () => {
-        setIsModalOpen(false);
-    };
-
-    return (
-        <div>
-            <button className={styles.openButton} onClick={handleButtonClick}>
-                View Reports
-            </button>
-
-            {isModalOpen && (
-                <div className={styles.modalBackground} onClick={handleCloseModal}>
-                    <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
-                        <div className={styles.heading}>Reports</div>
-                        <div className={styles.cardContainer}>
-                            {reports.length > 0 ? (
-                                reports.map((report, index) => (
-                                    <div key={index} className={styles.card}>
-                                        <div className={styles.cardTitle}>{report.subject}</div>
-                                        <div className={styles.cardContent}>{report.content}</div>
-                                        <small className={styles.cardFooter}>
-                                            User: {report.username} <br/>
-                                            Map: <Link to={`/myMaps/View/${report.mapName}`}>{report.mapName}</Link>
-                                            <br/>
-                                            Submitted: {new Date(report.date).toLocaleDateString()}
-                                        </small>
-                                    </div>
-                                ))
-                            ) : (
-                                <p className={styles.noReports}>No reports available</p>
-                            )}
-                        </div>
-                        <button className={styles.closeButton} onClick={handleCloseModal}>
-                            Close
-                        </button>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default ListReports;
Index: imaps-frontend/src/components/ListReports/ListReports.module.css
===================================================================
--- imaps-frontend/src/components/ListReports/ListReports.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,101 +1,0 @@
-.openButton {
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #007bff;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    margin-top: 2em;
-    transition: background-color 0.3s ease;
-}
-
-.openButton:hover {
-    background-color: #0056b3;
-}
-
-.modalBackground {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.modalContent {
-    background-color: white;
-    padding: 20px;
-    border-radius: 10px;
-    width: 80%;
-    max-width: 600px;
-    position: relative;
-}
-
-.heading {
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 15px;
-    color: #333;
-}
-
-.cardContainer {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 15px;
-    margin-top: 15px;
-}
-
-.card {
-    background-color: #f9f9f9;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    padding: 15px;
-    flex: 1 1 calc(50% - 20px); /* Adjust the width for two columns */
-    max-width: calc(50% - 20px);
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.cardTitle {
-    font-size: 18px;
-    font-weight: bold;
-    margin-bottom: 10px;
-}
-
-.cardContent {
-    margin-bottom: 5px;
-    font-size: 14px;
-    color: #555;
-}
-
-.cardFooter {
-    font-size: 12px;
-    color: #666;
-}
-
-.noReports {
-    font-size: 16px;
-    color: #999;
-    text-align: center;
-    width: 100%;
-}
-
-.closeButton {
-    margin-top: 15px;
-    padding: 10px 20px;
-    font-size: 16px;
-    background-color: #dc3545;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.closeButton:hover {
-    background-color: #a71d2a;
-}
Index: imaps-frontend/src/components/LoadingContainer/LoadingContainer.jsx
===================================================================
--- imaps-frontend/src/components/LoadingContainer/LoadingContainer.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,10 +1,0 @@
-import React from "react";
-import styles from "./LoadingContainer.module.css"
-
-export const LoadingContainer = () => {
-    return (
-        <div className="loading-container">
-            <div className="spinner"></div>
-        </div>
-    );
-}
Index: imaps-frontend/src/components/LoadingContainer/LoadingContainer.module.css
===================================================================
--- imaps-frontend/src/components/LoadingContainer/LoadingContainer.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,39 +1,0 @@
-.loading-container {
-    position: absolute; /* Confined to the parent container */
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    background-color: rgba(255, 255, 255, 0.1); /* Light overlay effect */
-    z-index: 10; /* Ensures it’s above other content inside the modal */
-    border-radius: inherit; /* Matches modal border-radius */
-    padding: 20px; /* Adds spacing inside modal */
-}
-.spinner {
-    border: 8px solid #f3f3f3;
-    border-top: 8px solid #1e90ff;
-    border-radius: 50%;
-    width: 60px;
-    height: 60px;
-    animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.loading-container p {
-    margin-top: 20px;
-    font-size: 18px;
-    color: #2c3e50;
-    font-weight: 500;
-}
Index: imaps-frontend/src/components/Logo/Logo.jsx
===================================================================
--- imaps-frontend/src/components/Logo/Logo.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,23 +1,0 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
-import novo_logo from "../../assets/novo_logo_nobg_cropped.png";
-import styles from "./Logo.module.css";
-
-function Logo({ position = "fixed" }) {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate("/");
-  };
-
-  return (
-    <div
-      className={position === "fixed" ? styles.fixedLogoContainer : styles.inlineLogoContainer}
-      onClick={handleClick}
-    >
-      <img src={novo_logo} alt="Logo" className={styles.logoImage} />
-    </div>
-  );
-}
-
-export default Logo;
Index: imaps-frontend/src/components/Logo/Logo.module.css
===================================================================
--- imaps-frontend/src/components/Logo/Logo.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,35 +1,0 @@
-.logoContainer {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  cursor: pointer;
-  z-index: 1000;
-}
-
-.logoImage {
-  width: 80px;
-  height: auto;
-  transition: opacity 0.2s ease;
-  border-radius: 20px;
-}
-
-.logoImage:hover {
-  opacity: 0.8; /* Slight hover effect */
-}
-
-.fixedLogoContainer {
-  position: fixed;
-  top: 10px;
-  left: 10px;
-  cursor: pointer;
-  z-index: 1000;
-}
-
-.inlineLogoContainer {
-  display: inline-block; /* Allows the logo to be placed inline within other elements */
-  cursor: pointer;
-}
-
-.logoImage:hover {
-  opacity: 0.8; /* Hover effect */
-}
Index: imaps-frontend/src/components/MapControls/MapControls.jsx
===================================================================
--- imaps-frontend/src/components/MapControls/MapControls.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/MapControls/MapControls.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,14 +1,10 @@
-import React, {useEffect, useState} from "react";
+import React, { useState } from "react";
 import styles from "./MapControls.module.css";
 import plusIcon from "../../assets/plus_icon.png";
 import minusIcon from "../../assets/minus_icon.png";
 import floorIcon from "../../assets/floor_icon.png";
-import HttpService from "../../scripts/net/HttpService.js";
 
-export default function MapControls({onFloorChange,mapName }) {
-  const [currentFloor, setCurrentFloor] = useState(0);
-  const [floors, setFloors] = useState([]);
-
-  // Starting floor
+export default function MapControls({ onZoomIn, onZoomOut, onFloorChange }) {
+  const [currentFloor, setCurrentFloor] = useState(1); // Starting floor
 
   // Handle floor selection
@@ -24,8 +20,8 @@
       {/* Zoom Controls */}
       <div className={styles.zoomControls}>
-        <button className={styles.zoomButton}>
+        <button onClick={onZoomIn} className={styles.zoomButton}>
           <img src={plusIcon} alt="Zoom In" />
         </button>
-        <button className={styles.zoomButton}>
+        <button onClick={onZoomOut} className={styles.zoomButton}>
           <img src={minusIcon} alt="Zoom Out" />
         </button>
@@ -33,23 +29,17 @@
 
       {/* Floor Selector */}
-      {/*<div className={styles.floorSelector}>*/}
-      {/*  <img src={floorIcon} alt="Floor Icon" className={styles.floorIcon} />*/}
-      {/*  <select*/}
-      {/*    value={currentFloor}*/}
-      {/*    onChange={(e) => handleFloorChange(parseInt(e.target.value, 10))}*/}
-      {/*    className={styles.floorDropdown}*/}
-      {/*  >*/}
-      {/*    {floors?.map(floor => (*/}
-      {/*        <option key={floor.floorNumber} value={floor.floorNumber}>*/}
-      {/*          {floor.floorNumber}F*/}
-      {/*        </option>*/}
-
-      {/*    ))}*/}
-      {/*    /!*<option value={1}>1F</option>*!/*/}
-      {/*    /!*<option value={2}>2F</option>*!/*/}
-      {/*    /!*<option value={3}>3F</option>*!/*/}
-      {/*    /!*<option value={4}>4F</option>*!/*/}
-      {/*  </select>*/}
-      {/*</div>*/}
+      <div className={styles.floorSelector}>
+        <img src={floorIcon} alt="Floor Icon" className={styles.floorIcon} />
+        <select
+          value={currentFloor}
+          onChange={(e) => handleFloorChange(parseInt(e.target.value, 10))}
+          className={styles.floorDropdown}
+        >
+          <option value={1}>1F</option>
+          <option value={2}>2F</option>
+          <option value={3}>3F</option>
+          <option value={4}>4F</option>
+        </select>
+      </div>
     </div>
   );
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,201 +1,0 @@
-import React, { useEffect, useState } from "react";
-import styles from "./MapInfoModal.module.css";
-import edit_icon from "../../assets/edit_icon_black.png";
-import PublishForm from "../PublishForm/PublishForm.jsx";
-import HttpService from "../../scripts/net/HttpService.js";
-import config from "../../scripts/net/netconfig.js";
-import { useAppContext } from "../AppContext/AppContext.jsx";
-import { useNavigate } from "react-router-dom";
-
-export default function MapInfoModal({
-                                         isOpen,
-                                         onClose,
-                                         map,
-                                         onDelete,
-                                         onUpdate,
-                                         onPublish,
-                                         published = false,
-                                     }) {
-    const [isEditPopupOpen, setEditPopupOpen] = useState(false);
-    const [editedName, setEditedName] = useState("");
-    const [editedGmapsUrl, setEditedGmapsUrl] = useState("");
-    const [editedType, setEditedType] = useState("");
-    const [publishFormOpen, setPublishFormOpen] = useState(false);
-    const navigate = useNavigate();
-    const [loadedFormData, setLoadedFormData] = useState(null);
-    const { setLoading } = useAppContext();
-    const { loading } = useAppContext();
-    const { username } = useAppContext();
-
-    useEffect(() => {
-        if (map) {
-            setEditedName(map.mapName || "");
-            setEditedGmapsUrl(map.gmaps_url || "");
-            setEditedType(map.mapType || "");
-        }
-    }, [map, isEditPopupOpen]);
-
-    if (!isOpen || !map) return null;
-
-    const handleView = () => {
-        navigate(`/myMaps/View/${map.mapName}`);
-    };
-
-    const handleEdit = () => {
-        navigate(`/myMaps/Draw/${map.mapName}`);
-    };
-
-    const handleDelete = () => {
-        if (
-            window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`)
-        ) {
-            onDelete(map.mapName);
-            onClose();
-        }
-    };
-
-    const openEditPopup = () => {
-        setEditPopupOpen(true);
-    };
-
-    const closeEditPopup = () => {
-        setEditPopupOpen(false);
-    };
-
-    const handleEditSubmit = async () => {
-        const updatedMap = {
-            initialName: map.mapName,
-            name: editedName,
-            gmapsUrl: editedGmapsUrl,
-            type: editedType,
-        };
-        onUpdate(updatedMap);
-        closeEditPopup()
-    };
-
-    return (
-        <div className={styles.modalOverlay} onClick={onClose}>
-            <div
-                className={styles.modalContent}
-                onClick={(e) => e.stopPropagation()}
-            >
-                {!loading && (
-                    <>
-                        <img
-                            src={map.image_url}
-                            alt="Map Thumbnail"
-                            className={styles.mapImage}
-                        />
-                        <h2 className={styles.title}>
-                            {map.mapName}
-                            <img
-                                src={edit_icon}
-                                alt="Edit"
-                                className={styles.editIcon}
-                                onClick={openEditPopup}
-                            />
-                        </h2>
-                        <p>
-                            <strong>Status:</strong> {map.status}
-                        </p>
-                        <p>
-                            <strong>Created At:</strong>{" "}
-                            {new Date(map.created_at).toLocaleString()}
-                        </p>
-                        <p>
-                            <strong>Modified At:</strong>{" "}
-                            {new Date(map.modified_at).toLocaleString()}
-                        </p>
-                        <p>
-                            <strong>Published At:</strong>{" "}
-                            {map.published_at
-                                ? new Date(map.published_at).toLocaleString()
-                                : "Not published yet"}
-                        </p>
-                        <p>
-                            <strong>Google Maps URL:</strong>{" "}
-                            <a href={`${map.gmaps_url}`} rel="noopener noreferrer">
-                                Open in Google Maps
-                            </a>
-                        </p>
-
-                        <div className={styles.buttonContainer}>
-                            <button className={styles.viewButton} onClick={handleView}>
-                                View
-                            </button>
-                            <button className={styles.editButton} onClick={handleEdit}>
-                                Edit
-                            </button>
-                            <button className={styles.deleteButton} onClick={handleDelete}>
-                                Delete
-                            </button>
-                            {!map.is_published && !published && (
-                                <button
-                                    className={styles.publishButton}
-                                    onClick={() => setPublishFormOpen(true)}
-                                >
-                                    Publish
-                                </button>
-                            )}
-                        </div>
-                        <button className={styles.closeButton} onClick={onClose}>
-                            Close
-                        </button>
-
-                        {isEditPopupOpen && (
-                            <div
-                                className={styles.editPopupOverlay}
-                                onClick={closeEditPopup}
-                            >
-                                <div
-                                    className={styles.editPopupContent}
-                                    onClick={(e) => e.stopPropagation()}
-                                >
-                                    <h3 className={styles.title}>Edit Map Details</h3>
-                                    <div className={styles.editField}>
-                                        <label>Map Name:</label>
-                                        <input
-                                            type="text"
-                                            value={editedName}
-                                            onChange={(e) => setEditedName(e.target.value)}
-                                        />
-                                    </div>
-                                    <div className={styles.editField}>
-                                        <label>Google Maps URL:</label>
-                                        <input
-                                            type="text"
-                                            value={editedGmapsUrl}
-                                            onChange={(e) => setEditedGmapsUrl(e.target.value)}
-                                        />
-                                    </div>
-                                    <div className={styles.editField}>
-                                        <label>Map Type:</label>
-                                        <input
-                                            type="text"
-                                            value={editedType}
-                                            onChange={(e) => setEditedType(e.target.value)}
-                                        />
-                                    </div>
-                                    <div className={styles.editPopupButtons}>
-                                        <button
-                                            className={styles.submitButton}
-                                            onClick={handleEditSubmit}
-                                        >
-                                            Submit
-                                        </button>
-                                        <button
-                                            className={styles.cancelButton}
-                                            onClick={closeEditPopup}
-                                        >
-                                            Cancel
-                                        </button>
-                                    </div>
-                                </div>
-                            </div>
-                        )}
-                    </>
-                )}
-            </div>
-        </div>
-    );
-}
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,237 +1,0 @@
-.modalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    backdrop-filter: blur(5px);
-}
-
-.modalContent {
-    position: relative;
-    background-color: white;
-    padding: 20px;
-    border-radius: 12px;
-    width: 400px;
-    max-width: 90%;
-    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    animation: fadeIn 0.3s ease-out;
-
-}
-
-.mapImage {
-    width: 100%;
-    height: auto;
-    border-radius: 8px;
-    margin-bottom: 15px;
-}
-
-.title {
-    font-size: 1.5rem;
-    color: #333;
-    margin-bottom: 10px;
-    text-transform: uppercase;
-}
-
-p {
-    margin: 5px 0;
-    font-size: 0.9rem;
-    color: #555;
-}
-
-a {
-    color: #1e90ff;
-    text-decoration: none;
-    font-weight: bold;
-}
-
-a:hover {
-    text-decoration: underline;
-}
-
-.buttonContainer {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
-    gap: 10px;
-}
-
-button {
-    padding: 10px 15px;
-    font-size: 0.9rem;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.2s;
-}
-
-button:active {
-    transform: scale(0.95);
-}
-
-button:disabled {
-    background-color: #d3d3d3;
-    color: #888;
-    cursor: not-allowed;
-}
-
-.viewButton {
-    background-color: #1e90ff;
-    color: white;
-}
-
-.viewButton:hover {
-    background-color: #155a8a;
-}
-
-button:disabled.viewButton {
-    background-color: #d3d3d3;
-    color: #888;
-}
-
-.editButton {
-    background-color: #ffa500;
-    color: white;
-}
-
-.editButton:hover {
-    background-color: #cc8400;
-}
-
-button:disabled.editButton {
-    background-color: #d3d3d3;
-    color: #888;
-}
-
-.deleteButton {
-    background-color: #ff4c4c;
-    color: white;
-}
-
-.deleteButton:hover {
-    background-color: #cc0000;
-}
-
-.closeButton {
-    margin-top: 20px;
-    padding: 10px 15px;
-    background-color: #f5f5f5;
-    color: #333;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.closeButton:hover {
-    background-color: #e0e0e0;
-}
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
-.editPopupOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1100;
-    backdrop-filter: blur(5px);
-}
-
-.editPopupContent {
-    background-color: white;
-    padding: 20px;
-    border-radius: 12px;
-    width: 400px;
-    max-width: 90%;
-    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
-    text-align: center;
-    animation: fadeIn 0.3s ease-out;
-}
-
-.editField {
-    margin: 15px 0;
-    text-align: left;
-}
-
-.editField label {
-    display: block;
-    margin-bottom: 5px;
-    font-size: 0.9rem;
-    color: #555;
-}
-
-.editField input {
-    width: 100%;
-    padding: 10px;
-    font-size: 0.9rem;
-    border: 1px solid #ccc;
-    border-radius: 5px;
-    box-sizing: border-box;
-}
-
-.editPopupButtons {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 20px;
-    gap: 10px;
-}
-
-.submitButton {
-    background-color: #4caf50;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.submitButton:hover {
-    background-color: #45a049;
-}
-
-.cancelButton {
-    background-color: #f44336;
-    color: white;
-    padding: 10px 15px;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s ease;
-}
-
-.cancelButton:hover {
-    background-color: #d32f2f;
-}
-
-.editIcon {
-    width: 20px;
-    height: 20px;
-    margin-left: 10px;
-    cursor: pointer;
-    transition: transform 0.2s ease;
-}
-
-.editIcon:hover {
-    transform: scale(1.1);
-}
Index: imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx
===================================================================
--- imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/MapTemplateSelector/LoadMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from "react";
+import styles from "./LoadMap.module.css";
+import HttpService from "../../scripts/net/HttpService";
+
+const MapTemplateSelector = ({ loadHandler }) => {
+  const [templates, setTemplates] = useState([]);
+  const [selectedTemplate, setSelectedTemplate] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchTemplates = async () => {
+      const httpService = new HttpService("http://localhost:8080/api/protected", true);
+      try {
+        const response = await httpService.get("/maps");
+        setTemplates(response);
+        setLoading(false);
+      } catch (error) {
+        console.error("Error fetching templates:", error);
+        setLoading(false);
+      }
+    };
+
+    fetchTemplates();
+  }, []);
+
+  const handleSelect = async (template) => {
+    setSelectedTemplate(template);
+    console.log("Selected template:", template);
+    const httpService = new HttpService("http://localhost:8080/api/protected", true);
+    const response = await httpService.get(`/maps/load?mapName=${template.name}`);
+    console.log("LOAD TEMPLATE: ", response);
+
+    const data = response.map.mapData.textData;
+    loadHandler(data);
+  };
+
+  if (loading) {
+    return <div>Loading map templates...</div>;
+  }
+
+  return (
+    <div className={styles.mapTemplateSelector}>
+      <p>Templates</p>
+      {templates.length > 0 ? (
+        <ul className={styles.templateList}>
+          {templates.map((template) => (
+            <li key={template.id}>
+              <button onClick={() => handleSelect(template)} className={styles.mapTemplateButton}>
+                {template.name}
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : (
+        <p>No map templates available.</p>
+      )}
+      {selectedTemplate && (
+        <div className={styles.selectedTemplate}>
+          <h3 className={styles.text}>Loaded Template:</h3>
+          <p className={styles.text}>{selectedTemplate.name}</p>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MapTemplateSelector;
Index: imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css
===================================================================
--- imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/MapTemplateSelector/LoadMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,51 @@
+.mapTemplateSelector {
+   
+  }
+  
+  
+  .templateList {
+    list-style-type: none;
+    padding: 0;
+     display: grid;
+    grid-template-columns: repeat(2, 7vh); /* Defines responsive columns */
+    gap: 5px;
+    margin: 20px 0;
+  }
+  
+  .templateListItem {
+    /* display: flex;
+    justify-content: center; */
+    width: 80%;
+  }
+  
+  .mapTemplateButton {
+    display: flex; /* Enable flexbox for the button */
+    justify-content: center; /* Center text horizontally */
+    align-items: center; /* Center text vertically */
+    width: 100%; /* Full width of the parent container */
+    padding: 10px;
+    background-color: #804047;
+    border: 2px solid beige;
+    cursor: pointer;
+    border-radius: 5px;
+    font-size: 70%; /* Adjust font size as needed */
+    white-space: nowrap; /* Prevent text wrapping */
+    overflow: hidden; /* Hide any overflow text */
+    text-overflow: ellipsis; /* Show ellipsis for overflow text */
+}
+
+  
+  .mapTemplateButton:hover {
+    background-color: beige;
+  }
+  .text{
+    font-size: medium;
+    color: #804047;
+  }
+  
+  .selectedTemplate {
+    margin-top: 10px;
+    padding: 10px;
+    text-align: center;
+  }
+  
Index: imaps-frontend/src/components/Modals/Components/Modal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/Modal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,86 +1,0 @@
-import React, { useRef, useState, useEffect } from "react";
-import styles from "../EntranceModal/EntranceModal.module.css";
-
-export default function Modal({ children, title, isOpen, toggleModal }) {
-  const modalRef = useRef(null);
-  const [dragging, setDragging] = useState(false);
-  const [position, setPosition] = useState({ x: "50%", y: "50%" });
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-
-  const handleMouseDown = (e) => {
-    if (!modalRef.current) return;
-    setDragging(true);
-    const rect = modalRef.current.getBoundingClientRect();
-    setOffset({
-      x: e.clientX - rect.left,
-      y: e.clientY - rect.top,
-    });
-  };
-
-  const handleMouseMove = (e) => {
-    if (!dragging) return;
-    setPosition({
-      x: e.clientX - offset.x,
-      y: e.clientY - offset.y,
-    });
-  };
-
-  const handleMouseUp = () => {
-    setDragging(false);
-  };
-
-  useEffect(() => {
-    if (dragging) {
-      window.addEventListener("mousemove", handleMouseMove);
-      window.addEventListener("mouseup", handleMouseUp);
-    } else {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    }
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [dragging]);
-
-  if (isOpen) {
-    document.body.classList.add(styles.activeModal);
-  } else {
-    document.body.classList.remove(styles.activeModal);
-  }
-
-  return (
-      <>
-        {isOpen && (
-            <div className={styles.modal}>
-              <div onClick={toggleModal} className={styles.overlay}></div>
-              <div
-                  ref={modalRef}
-                  className={styles.modalContent}
-                  style={{
-                    top: typeof position.y === "string" ? position.y : `${position.y}px`,
-                    left: typeof position.x === "string" ? position.x : `${position.x}px`,
-                    transform:
-                        typeof position.x === "string" && typeof position.y === "string"
-                            ? "translate(-50%, -50%)"
-                            : "none",
-                  }}
-              >
-                <div
-                    className={styles.draggableHeader}
-                    onMouseDown={handleMouseDown}
-                >
-                  <h2 className={styles.title}>{title}</h2>
-                </div>
-                <form className={styles.form}>
-                  {children}
-                  <button className={styles.closeModal} onClick={toggleModal}>
-                    CLOSE
-                  </button>
-                </form>
-              </div>
-            </div>
-        )}
-      </>
-  );
-}
Index: imaps-frontend/src/components/Modals/Components/ModalAddRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalAddRoomTypes.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,25 +1,0 @@
-import styles from "../RoomTypeModal/RoomTypeModal.module.css";
-import React from "react";
-
-export default function ModalAddRoomTypes(handleInputChange,formData,addRoomType){
-    return (
-        <>
-            <h2>Manage Room Types</h2>
-            <div className={styles.formGroup}>
-                <label htmlFor="type">Add New Room Type:</label>
-                <input
-                    type="text"
-                    id="type"
-                    name="type"
-                    value={formData.type}
-                    onChange={handleInputChange}
-                    placeholder="Enter a new room type (e.g., Office, Classroom)"
-                />
-                <button type="button" className={styles.addButton} onClick={addRoomType}>
-                    Add Type
-                </button>
-            </div>
-        </>
-
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalDescriptionField.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalDescriptionField.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,16 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-
-export default function ModalDescriptionField({shapeInfo,updateModalData}){
-    return (
-        <div className={styles.formGroup}>
-            <label htmlFor="description">Description:</label>
-            <textarea
-                id="description"
-                name="description"
-                value={shapeInfo.description}
-                onChange={updateModalData}
-                rows="3"
-            />
-        </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalDisplayConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalDisplayConnections.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,30 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React, {useEffect} from "react";
-
-export default function ModalDisplayConnections({connections,removePinFromList}){
-
-    useEffect(() => {
-        console.log("CONNNECTIONS: " + connections);
-    }, []);
-
-    return (
-        <>
-            <h3>Connections:</h3>
-            <ul className={styles.pinList}>
-                {connections.length > 0 ? (
-                    connections.map((pin, index) => (
-                        <li key={index} className={styles.pinItem}>
-                            {pin}
-                            <button onClick={() => removePinFromList(pin)} className={styles.removeButton}>
-                                Remove
-                            </button>
-                        </li>
-                    ))
-                ) : (
-                    <li>No connections added</li>
-                )}
-            </ul>
-            <br/>
-        </>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalDisplayRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalDisplayRoomTypes.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,24 +1,0 @@
-import styles from "../RoomTypeModal/RoomTypeModal.module.css";
-import React from "react";
-
-export default function ModalDisplayRoomTypes(roomTypes,removeRoomType){
-    return (
-        <>
-            <h3>Available Room Types:</h3>
-            <ul className={styles.roomTypeList}>
-                {roomTypes.length > 0 ? (
-                    roomTypes.map((type, index) => (
-                        <li key={index} className={styles.roomTypeItem}>
-                            {type}
-                            <button className={styles.removeButton} onClick={() => removeRoomType(type)}>
-                                Remove
-                            </button>
-                        </li>
-                    ))
-                ) : (
-                    <li>No room types available</li>
-                )}
-            </ul>
-        </>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalMainEntranceCheckbox.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalMainEntranceCheckbox.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,16 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-
-export default function ModalMainEntranceCheckbox ({shapeInfo,updateModalData}){
-    return (
-        <div className={styles.formGroupCheckbox}>
-            <input
-                type="checkbox"
-                id="isMainEntrance"
-                name="isMainEntrance"
-                checked={shapeInfo.isMainEntrance}
-                onChange={updateModalData}
-            />
-            <label htmlFor="isMainEntrance" style={{color: "white"}}>Main Entrance</label>
-        </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalNameField.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalNameField.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,19 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React from "react";
-
-export default function ModalNameField({shapeInfo,updateModalData,phtext}) {
-    return (
-        <div className={styles.formGroup}>
-            <label htmlFor="name">Name:</label>
-            <input
-                type="text"
-                id="name"
-                name="name"
-                value={shapeInfo.name}
-                onChange={updateModalData}
-                placeholder={phtext}
-                required
-            />
-        </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalRoomTypes.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,20 +1,0 @@
-import styles from "../RoomModal/RoomModal.module.css";
-import React from "react";
-
-export default function ModalRoomTypes({shapeInfo,updateModalData,roomTypes}){
-    console.log("ROOM TYPES: " + roomTypes)
-
-    return (
-        <div className={styles.formGroup}>
-            <label htmlFor="type">Type:</label>
-            <select id="type" name="type" onChange={updateModalData} value={shapeInfo.type} required>
-                <option value="">Select Room Type</option>
-                {roomTypes?.map((roomType, index) => (
-                    <option key={index} value={roomType.name}>
-                        {roomType.name}
-                    </option>
-                ))}
-            </select>
-        </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalSaveButton.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSaveButton.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,17 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React from "react";
-
-export default function ModalSaveButton({saveDetails}){
-    return (
-        <div className={styles.formGroup}>
-            <button
-                type="button"
-                id="submit-details"
-                onClick={saveDetails}
-                className={styles.submitButton}
-            >
-                Save
-            </button>
-        </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalSelectConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSelectConnections.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,33 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React from "react";
-
-export default function ModalSelectConnections({shape = null,availableShapes,updateModalData,addPinToList,}) {
-
-    return shape && (
-        <div className={styles.formGroup}>
-                <label htmlFor="selectedPin">Select connections:</label>
-                <select
-                    id="selectedPin"
-                    name="selectedPin"
-                    value={shape.info.selectedPin}
-                    onChange={updateModalData}
-                    required
-                >
-                    <option value="">Select Connection</option>
-                    {availableShapes.filter ((conn) =>
-                                shape.info.selectedPins.includes(conn.name) === false &&
-                                conn.name !== "" &&
-                                conn.name !== shape.info.name
-                        )
-                        .map((conn, index) => (
-                            <option key={index} value={conn.info.name}>
-                                {conn.info.name}
-                            </option>
-                        ))}
-                </select>
-                <button type="button" onClick={addPinToList} className={styles.addButton}>
-                    Add Connection
-                </button>
-            </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalSelectConnections2.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSelectConnections2.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,43 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React from "react";
-import PropTypes from "prop-types";
-import MapShape from "../../../scripts/base/MapShape.js";
-
-export default function ModalSelectConnections2({shapeInfo,updateModalData,addConnection,availableShapes}) {
-
-    console.log("shapes modal",availableShapes)
-    return (
-            <div className={styles.formGroup}>
-                <label htmlFor="selectedPin">Select connections:</label>
-                <select
-                    id="selectedPin"
-                    name="selectedPin"
-                    value={shapeInfo.selectedPin}
-                    onChange={updateModalData}
-                >
-                    <option value="">Select Connection</option>
-                    {availableShapes
-                        .filter(
-                            (s) =>
-                                !s.info.selectedPins.includes(shapeInfo.name) &&
-                                s.info.name !== "" &&
-                                s.info.name !== shapeInfo.name
-                        )
-                        .map((othShape, index) => (
-                            <option key={index} value={othShape.info.name}>
-                                {othShape.info.name}
-                            </option>
-                        ))}
-                </select>
-                <button type="button" onClick={addConnection} className={styles.addButton}>
-                    Add Connection
-                </button>
-            </div>
-    )
-}
-
-ModalSelectConnections2.propTypes = {
-    shapeInfo: PropTypes.object,
-    updateModalData: PropTypes.func,
-    addConnection: PropTypes.func,
-}
Index: imaps-frontend/src/components/Modals/Components/ModalSelectRoom.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalSelectRoom.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,24 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React from "react";
-
-export default function ModalSelectRoom({shapeInfo,availableRooms,updateModalData}){
-    return (
-        <div className={styles.formGroup}>
-            <label htmlFor="connectedRoom">Select room associated with entrance:</label>
-            <select
-                id="connectedRoom"
-                name="connectedRoom"
-                value={shapeInfo.connectedRoom}
-                onChange={updateModalData}
-                required
-            >
-                <option value="">Select Room</option>
-                {availableRooms.map((room, index) => (
-                    <option key={index} value={room.info.name}>
-                        {room.info.name}
-                    </option>
-                ))}
-            </select>
-        </div>
-    )
-}
Index: imaps-frontend/src/components/Modals/Components/ModalUploadRoomImage.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalUploadRoomImage.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,31 +1,0 @@
-import styles from "../EntranceModal/EntranceModal.module.css";
-import React, { useRef } from "react";
-
-export default function ModalUploadRoomImage() {
-    const fileInputRef = useRef(null);
-
-    const handleClick = () => {
-        fileInputRef.current.click();
-    };
-
-    return (
-        <div className={styles.formGroup}>
-            <label htmlFor="name">Room Image</label>
-            <div className={styles.customFileInput}>
-                <button
-                    type="button"
-                    className={styles.uploadButton}
-                    onClick={handleClick}
-                >
-                    Upload Image
-                </button>
-                <input
-                    type="file"
-                    accept="image/*"
-                    ref={fileInputRef}
-                    style={{ display: "none" }}
-                />
-            </div>
-        </div>
-    );
-}
Index: imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,54 +1,0 @@
-import React, { useContext, useState } from "react";
-import PropTypes from "prop-types";
-import styles from "./CreateMapModal.module.css";
-
-const CreateMapModal = ({ isOpen, onClose,addMap}) => {
-    const [mapName, setMapName] = useState("");
-    const [mapType, setMapType] = useState("");
-
-    const handleSubmit = (e) => {
-        const mapDetails = {
-            name: mapName,
-        };
-
-        addMap(mapDetails);
-
-        onClose();
-    };
-
-    if (!isOpen) return null;
-
-    return (
-        <div className={styles.modalOverlay} onClick={onClose}>
-            <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
-                <h2 className={styles.title}>Enter Map Details</h2>
-                <form onSubmit={handleSubmit} className={styles.formData}>
-                    <label>
-                        Map Name:
-                        <input
-                            type="text"
-                            value={mapName}
-                            onChange={(e) => setMapName(e.target.value)}
-                            required
-                        />
-                    </label>
-                    <div className={styles.modalButtons}>
-                        <button type="submit" className={styles.modalSubmitButton}>
-                            Submit
-                        </button>
-                        <button type="button" className={styles.modalCancelButton} onClick={onClose}>
-                            Cancel
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    );
-};
-
-CreateMapModal.propTypes = {
-    isOpen: PropTypes.bool.isRequired,
-    onClose: PropTypes.func.isRequired,
-};
-
-export default CreateMapModal;
Index: imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,116 +1,0 @@
-/* Modal Overlay */
-.modalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background-color: rgba(0, 0, 0, 0.6);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-    backdrop-filter: blur(5px);
-}
-
-/* Modal Content */
-.modalContent {
-    background-color: #fff;
-    padding: 2rem;
-    border-radius: 12px;
-    width: 400px;
-    max-width: 90%;
-    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
-    animation: fadeIn 0.3s ease-out;
-}
-
-/* Modal Title */
-.title {
-    color: #333;
-    text-transform: uppercase;
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
-    text-align: center;
-}
-
-/* Modal Buttons Container */
-.modalButtons {
-    display: flex;
-    justify-content: space-between;
-}
-
-/* Submit Button */
-.modalSubmitButton {
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-    font-weight: bold;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    background-color: #007bff;
-    color: white;
-    transition: background-color 0.3s, transform 0.2s;
-}
-
-.modalSubmitButton:hover {
-    background-color: #0056b3;
-    transform: scale(1.05);
-}
-
-/* Cancel Button */
-.modalCancelButton {
-    padding: 0.8rem 1.5rem;
-    font-size: 1rem;
-    font-weight: bold;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    background-color: #f1f1f1;
-    color: #333;
-    transition: background-color 0.3s, transform 0.2s;
-}
-
-.modalCancelButton:hover {
-    background-color: #e0e0e0;
-    transform: scale(1.05);
-}
-
-/* Form Data */
-.formData {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-label {
-    font-size: 0.9rem;
-    color: #666;
-    margin-bottom: 0.5rem;
-    display: block;
-}
-
-input {
-    padding: 0.7rem;
-    font-size: 1rem;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    outline: none;
-    transition: border-color 0.3s;
-}
-
-input:focus {
-    border-color: #007bff;
-    box-shadow: 0px 0px 4px rgba(0, 123, 255, 0.5);
-}
-
-/* Fade In Animation */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: scale(0.9);
-    }
-    to {
-        opacity: 1;
-        transform: scale(1);
-    }
-}
Index: imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,70 +1,0 @@
-import React, {useState, useEffect} from "react";
-import styles from "./EntranceModal.module.css";
-import PropTypes from "prop-types";
-import {MapBuilder} from "../../../scripts/main/MapBuilder.js";
-
-import Modal from "../Components/Modal.jsx";
-import ModalNameField from "../Components/ModalNameField.jsx";
-import ModalSelectRoom from "../Components/ModalSelectRoom.jsx";
-import ModalSelectConnections from "../Components/ModalSelectConnections.jsx";
-import ModalDisplayConnections from "../Components/ModalDisplayConnections.jsx";
-import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
-import ModalSaveButton from "../Components/ModalSaveButton.jsx";
-import ModalMainEntranceCheckbox from "../Components/ModalMainEntranceCheckbox.jsx";
-import {useModalEvent} from "../Hooks/useModalEvent.jsx";
-import useModalState from "../Hooks/useModalState.jsx";
-import useConnections from "../Hooks/useConnections.jsx";
-import ModalSelectConnections2 from "../Components/ModalSelectConnections2.jsx";
-import ShapeQuery from "../../../scripts/util/ShapeQuery.js";
-
-export default function EntranceModal({map}) {
-
-    const {
-        modalState: {isOpen,setIsOpen,shape,setShape,shapeInfo,setShapeInfo},
-        handlers: {toggleModal,updateModalData,saveDetails}
-    } = useModalState(map);
-
-    const {
-        connectionState: {connections,setConnections},
-        handlers: {addConnection,removeConnection}
-    } = useConnections(map,shapeInfo,setShapeInfo)
-
-
-    useModalEvent((event) => {
-        const shape = event.detail.room;
-        setShape(shape);
-        setShapeInfo({
-            ...shape.info,
-            selectedPin: ""
-
-        })
-        const connections = shape.info.selectedPins || [];
-        setConnections(connections);
-        setIsOpen(true);
-        event.detail.map.detachKeyPressEventListeners();
-        console.log(connections, "Loaded pins on modal open");
-    },"openEntranceModalEvent")
-
-
-
-    return (
-        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Entrance Details"}>
-            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalSelectRoom shapeInfo={shapeInfo} availableRooms={ShapeQuery.findAllByTypeAndFloor(shape?.floorNum,"Room")} updateModalData={updateModalData}/>
-            <ModalSelectConnections2
-                availableShapes={ShapeQuery.findAllByTypeAndFloor(map?.floorNum,"Entrance","InfoPin")} // najubo ke e entrance samo so room da mozit
-                addConnection={addConnection}
-                updateModalData={updateModalData}
-                shapeInfo={shapeInfo}
-            />
-            <ModalDisplayConnections connections={connections} removePinFromList={removeConnection}/>
-            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalMainEntranceCheckbox shapeInfo={shapeInfo} updateModalData={updateModalData}></ModalMainEntranceCheckbox>
-            <ModalSaveButton saveDetails={saveDetails}/>
-        </Modal>
-    );
-}
-
-EntranceModal.propTypes = {
-    map: PropTypes.instanceOf(MapBuilder),
-};
Index: imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,228 +1,0 @@
-/* Active modal: Disable scrolling when the modal is open */
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-/* Modal and overlay styles */
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-.overlay {
-  /*background: rgba(255, 255, 255, 0.05);*/
-  z-index: 999;
-}
-
-.draggableHeader {
-  cursor: move;
-  padding: 10px;
-  background-color: #2c2f33;
-  color: #ffffff;
-  border-bottom: 1px solid #444;
-}
-
-
-
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33f7;
-  color: #ffffff !important;
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-}
-
-
-.title {
-  margin-bottom: 15px;
-  color: #ffffff ;
-}
-
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 20px;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #0056b3;
-}
-
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-/*tuka novo start*/
-
-label {
-  font-size: 16px;
-  font-weight: bold;
-  margin-bottom: 8px;
-}
-
-.customFileInput {
-  position: relative;
-}
-
-.uploadButton {
-  background-color: #007bff;
-  color: white;
-  border: none;
-  padding: 10px 20px;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  transition: background-color 0.3s ease;
-}
-
-.uploadButton:hover {
-  background-color: #0056b3;
-}
-
-.uploadButton:focus {
-  outline: none;
-  box-shadow: 0 0 4px rgba(0, 123, 255, 0.6);
-}
-
-.uploadButton:active {
-  background-color: #003f7f;
-}
-
-/*tuka novo end*/
-
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff;
-}
-
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a;
-  color: #ffffff;
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888;
-}
-
-/* Checkbox alignment fix */
-.formGroupCheckbox {
-
-  display: flex;
-  flex-direction: row;
-  vertical-align: middle;
-  align-items: flex-end;
-  /*justify-content: start;!* Vertical alignment *!*/
-  /*color: #ffffff;*/
-}
-
-.formGroupCheckbox input{
-  width: 10%;
-  margin-bottom: 0.88em;
-}
-
-/* Add button */
-.addButton {
-  background-color: #28a745 !important;
-  color: white;
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.addButton:hover {
-  background-color: #218838 !important;
-}
-
-/* Save button styling */
-.submitButton {
-  background-color: #28a745 !important;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  margin-top: 15px;
-}
-
-.submitButton:hover {
-  background-color: #218838;
-}
-
-.pinList {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 15px;
-}
-
-.pinItem {
-  background-color: #444;
-  padding: 8px;
-  margin-bottom: 5px;
-  color: white;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.removeButton {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.removeButton:hover {
-  background-color: #c82333;
-}
Index: imaps-frontend/src/components/Modals/Hooks/useConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,44 +1,0 @@
-import {useState} from "react";
-
-export default function useConnections(map,shapeInfo,setShapeInfo){
-    const [connections,setConnections] = useState([])
-
-    const addConnection = () => {
-        if (!shapeInfo.selectedPin || connections.includes(shapeInfo.selectedPin)) return;
-
-        setConnections((prevConn) => {
-            const updatedConnections = [...prevConn, shapeInfo.selectedPin];
-
-
-            setShapeInfo((prevShapeInfo) => ({
-                ...prevShapeInfo,
-                ["selectedPin"]: "",
-                ["selectedPins"]: updatedConnections,
-            }));
-
-            console.log(shapeInfo.name,shapeInfo.selectedPin,"TEST")
-
-            map.drawConnection(shapeInfo.name,shapeInfo.selectedPin);
-            return updatedConnections;
-        });
-    };
-
-    const removeConnection = (connToRemove) => {
-        setConnections((prevConn) => {
-            const updatedPins = prevConn.filter((pin) => pin !== connToRemove);
-            setShapeInfo((prevFormData) => ({
-                ...prevFormData,
-                selectedPins: updatedPins,
-            }));
-            return updatedPins;
-        });
-        map.removeConnection(shapeInfo.name, connToRemove);
-    };
-
-
-    return {
-        connectionState: {connections,setConnections},
-        handlers: {addConnection,removeConnection}
-
-    }
-}
Index: imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalEvent.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,14 +1,0 @@
-import {useEffect} from "react";
-
-export function useModalEvent(openModalHandler,eventName){
-    useEffect(() => {
-
-        if(eventName == null) return;
-
-        window.addEventListener(eventName, openModalHandler);
-
-        return () => {
-            window.removeEventListener(eventName, openModalHandler);
-        };
-    }, []);
-}
Index: imaps-frontend/src/components/Modals/Hooks/useModalState.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,40 +1,0 @@
-import {useState} from "react";
-import triggerMapSave from "../../../scripts/util/triggerMapSave.js";
-
-export default function useModalState(map) {
-    const [isOpen, setIsOpen] = useState(false);
-    const [shape, setShape] = useState(null);
-    const [shapeInfo,setShapeInfo] = useState({});
-
-
-    const toggleModal = () => {
-        if (isOpen) {
-            shape.setInfo(shapeInfo);
-            map.updateRoomNames();
-            triggerMapSave();
-            map.attachKeyPressEventListeners();
-        }
-        setIsOpen(!isOpen);
-    };
-
-    const updateModalData = (e) => {
-        const {name, value, type, checked} = e.target;
-        setShapeInfo(prevShapeInfo => ({
-                ...prevShapeInfo,
-                [name]: type === "checkbox" ? checked : value
-            }
-        ))
-        console.log("SHAPE INFO UPDATE",shape.info)
-    };
-
-    const saveDetails = () => {
-        if (shape) {
-            toggleModal();
-        }
-    };
-
-    return {
-        modalState: {isOpen, shapeInfo,setIsOpen, shape, setShape,setShapeInfo},
-        handlers: {toggleModal, updateModalData, saveDetails}
-    };
-}
Index: imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useRoomTypes.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,19 +1,0 @@
-import {useEffect} from "react";
-
-export default function useRoomTypes(formData,setFormData,roomTypes,setRoomTypes,map){
-
-    const addRoomType = () => {
-        if (!formData.type || roomTypes.includes(formData.type)) return;
-        // setRoomTypes((prevTypes) => [...prevTypes, formData.type]);
-        setFormData({ ...formData, type: "" });
-        map.addRoomType(formData.type);
-        console.log("TYPES" + map.roomTypes);
-    };
-
-    const removeRoomType = (typeToRemove) => {
-        map.removeRoomType(typeToRemove);
-        setRoomTypes((prevTypes) => prevTypes.filter((type) => type !== typeToRemove));
-    };
-
-    return {addRoomType,removeRoomType}
-}
Index: imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,64 +1,0 @@
-import React, {useState, useEffect} from "react";
-import styles from "./InfoPinModal.module.css";
-import PropTypes, {instanceOf} from "prop-types";
-import {MapBuilder} from "../../../scripts/main/MapBuilder.js";
-import ModalNameField from "../Components/ModalNameField.jsx";
-import ModalSelectConnections from "../Components/ModalSelectConnections.jsx";
-import ModalDisplayConnections from "../Components/ModalDisplayConnections.jsx";
-import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
-import ModalSaveButton from "../Components/ModalSaveButton.jsx";
-import Modal from "../Components/Modal.jsx";
-import useModalState from "../Hooks/useModalState.jsx";
-import useConnections from "../Hooks/useConnections.jsx";
-import {useModalEvent} from "../Hooks/useModalEvent.jsx";
-import ModalSelectConnections2 from "../Components/ModalSelectConnections2.jsx";
-import ShapeQuery from "../../../scripts/util/ShapeQuery.js";
-
-export default function InfoPinModal({map}) {
-
-    const {
-        modalState: {isOpen,shapeInfo,shape,setIsOpen,setShape,setShapeInfo},
-        handlers: {toggleModal,updateModalData,saveDetails}
-    } = useModalState(map);
-
-    const {
-        connectionState: {connections,setConnections},
-        handlers: {addConnection,removeConnection}
-    } = useConnections(map,shapeInfo,setShapeInfo)
-
-
-    useModalEvent((event) => {
-        const shape = event.detail.room;
-        setShape(shape);
-        setShapeInfo({
-            ...shape.info,
-            selectedPin: ""
-        })
-        setConnections(shape.info.selectedPins || []);
-        setIsOpen(true);
-        event.detail.map.detachKeyPressEventListeners();
-
-        console.log(shape.info.selectedPins, "Loaded pins on modal open");
-    },"openPinModalEvent")
-
-
-    return (
-        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Pin Details"}>
-            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalSelectConnections2
-                shapeInfo={shapeInfo}
-                availableShapes={ShapeQuery.findAllByTypeAndFloor(map?.floorNum,"Stairs","InfoPin","Entrance")}
-                updateModalData={updateModalData}
-                addConnection={addConnection}
-            />
-            <ModalDisplayConnections connections={connections} removePinFromList={removeConnection}/>
-            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalSaveButton saveDetails={saveDetails}/>
-        </Modal>
-
-    );
-}
-
-InfoPinModal.propTypes = {
-    map: PropTypes.instanceOf(MapBuilder),
-};
Index: imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,183 +1,0 @@
-/* Active modal: Disable scrolling when the modal is open */
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-/* Modal and overlay styles */
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-/* Overlay: Dark background with optional blur */
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999; /* Ensure the overlay appears below the modal */
-}
-
-/* Modal content: Centered and styled */
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000; /* Ensure the modal appears above the overlay */
-}
-
-/* Heading styles */
-h2,
-h3 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the headings */
-}
-
-/* Button for opening the modal */
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 20px;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #0056b3;
-}
-
-/* Close button inside the modal */
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-/* Form styles */
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-/* Form labels */
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-/* Input, select, and textarea styles */
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-/* Checkbox alignment fix */
-.formGroupCheckbox {
-  display: flex;
-  align-items: center; /* Vertical alignment */
-  color: #ffffff;
-}
-
-/* Add button */
-.addButton {
-  background-color: #28a745;
-  color: white;
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.addButton:hover {
-  background-color: #218838;
-}
-
-/* Save button styling */
-.submitButton {
-  background-color: #28a745;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 16px;
-  margin-top: 15px;
-}
-
-.submitButton:hover {
-  background-color: #218838;
-}
-
-/* Pin list */
-.pinList {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 15px;
-}
-
-/* Individual pin item */
-.pinItem {
-  background-color: #444;
-  padding: 8px;
-  margin-bottom: 5px;
-  color: white;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Remove button */
-.removeButton {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.removeButton:hover {
-  background-color: #c82333;
-}
Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,38 +1,0 @@
-import React, {useState, useEffect} from "react";
-import ModalNameField from "../Components/ModalNameField.jsx";
-import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
-import ModalSaveButton from "../Components/ModalSaveButton.jsx";
-import Modal from "../Components/Modal.jsx";
-import ModalRoomTypes from "../Components/ModalRoomTypes.jsx";
-import useModalState from "../Hooks/useModalState.jsx";
-import {useModalEvent} from "../Hooks/useModalEvent.jsx";
-import ModalUploadRoomImage from "../Components/ModalUploadRoomImage.jsx";
-
-export default function RoomModal({map,roomTypes}) {
-    const {
-        modalState: {isOpen,setIsOpen,setShape,shapeInfo,setShapeInfo},
-        handlers: {toggleModal,updateModalData,saveDetails}
-    } = useModalState(map);
-
-
-    useModalEvent((event) => {
-        const shape = event.detail.room;
-        setShape(shape);
-        setShapeInfo(shape.info);
-        setIsOpen(true);
-        event.detail.map.detachKeyPressEventListeners();
-
-    },"openRoomModalEvent")
-
-
-
-    return (
-        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Room Details"}>
-            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalRoomTypes updateModalData={updateModalData} shapeInfo={shapeInfo} roomTypes={roomTypes}/>
-            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalUploadRoomImage></ModalUploadRoomImage>
-            <ModalSaveButton saveDetails={saveDetails}/>
-        </Modal>
-    );
-}
Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,121 +1,0 @@
-/* Modal.module.css */
-
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999;
-}
-
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000;
-}
-
-h2 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the heading */
-}
-
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 20px;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #0056b3;
-}
-
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-.formGroup {
-  margin-bottom: 15px;
-}
-
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-.formGroup input[type="checkbox"] {
-  width: auto;
-  margin-right: 10px;
-}
-
-.submitButton {
-  background-color: #28a745;
-  color: white;
-  padding: 10px 20px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.submitButton:hover {
-  background-color: #218838;
-}
Index: imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,76 +1,0 @@
-import React, { useState, useEffect } from "react";
-import styles from "./RoomTypeModal.module.css";
-import useRoomTypes from "../Hooks/useRoomTypes.jsx";
-
-export default function RoomTypeModal({map,roomTypes,addRoomTypeDB}) {
-  const [modalIsOpen, setModalIsOpen] = useState(false);
-  const [roomTypeName, setRoomTypeName] = useState("");
-
-  const toggleModal = () => {
-    setModalIsOpen(!modalIsOpen);
-  };
-
-  const handleAddRoomType = async () => {
-    await addRoomTypeDB(roomTypeName);
-    setRoomTypeName("");
-  }
-  // Handle form input changes
-  const handleInputChange = (e) => {
-    const { name, value } = e.target;
-    setRoomTypeName(value);
-  };
-
-  return (
-    <>
-      <button onClick={toggleModal} className={styles.btnModal}>
-        Room Types
-      </button>
-
-      {modalIsOpen && (
-        <div className={styles.modal}>
-          <div onClick={toggleModal} className={styles.overlay}></div>
-          <div className={styles.modalContent}>
-            <h2 style={{color: 'white'}}>Manage Room Types</h2>
-
-            <form className={styles.form}>
-              <div className={styles.formGroup}>
-                <label htmlFor="roomTypeName">Add New Room Type:</label>
-                <input
-                  type="text"
-                  id="roomTypeName"
-                  name="roomTypeName"
-                  value={roomTypeName}
-                  onChange={handleInputChange}
-                  placeholder="Enter a new room type (e.g., Office, Classroom)"
-                />
-                <button type="button" className={styles.addButton} onClick={handleAddRoomType}>
-                  Add Type
-                </button>
-              </div>
-            </form>
-
-            <h3>Available Room Types:</h3>
-            <ul className={styles.roomTypeList}>
-              {roomTypes.length > 0 ? (
-                roomTypes.map((roomType,index) => (
-                  <li key={index} className={styles.roomTypeItem}>
-                    {roomType.name}
-                    <button className={styles.removeButton} >
-                      Remove
-                    </button>
-                  </li>
-                ))
-              ) : (
-                <li>No room types available</li>
-              )}
-            </ul>
-
-            <button className={styles.closeModal} onClick={toggleModal}>
-              CLOSE
-            </button>
-          </div>
-        </div>
-      )}
-    </>
-  );
-}
Index: imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,167 +1,0 @@
-/* Active modal: Disable scrolling when the modal is open */
-.activeModal {
-  overflow-y: hidden; /* Disable scrolling */
-}
-
-/* Modal and overlay styles */
-.modal,
-.overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-}
-
-/* Overlay: Dark background with optional blur */
-.overlay {
-  background: rgba(0, 0, 0, 0.7); /* Darken the background */
-  backdrop-filter: blur(5px); /* Optional blur effect */
-  z-index: 999; /* Ensure the overlay appears below the modal */
-}
-
-/* Modal content: Centered and styled */
-.modalContent {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
-  color: #ffffff; /* White text for contrast */
-  padding: 20px;
-  border-radius: 8px;
-  max-width: 600px;
-  width: 100%;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  z-index: 1000; /* Ensure the modal appears above the overlay */
-}
-
-/* Modal heading */
-h2,
-h3 {
-  margin-bottom: 15px;
-  color: #ffffff; /* White text for the headings */
-}
-
-/* Button for opening the modal */
-.btnModal {
-  padding: 10px 20px;
-  font-size: 18px;
-  background-color: #aa5c5c;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin: 10px 0;
-  display: block;
-}
-
-.btnModal:hover {
-  background-color: #994f4f;
-}
-
-/* Close button inside the modal */
-.closeModal {
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.closeModal:hover {
-  background-color: #c82333;
-}
-
-/* Form styles */
-.form {
-  display: flex;
-  flex-direction: column;
-}
-
-/* Form group: margin between form elements */
-.formGroup {
-  margin-bottom: 15px;
-}
-
-/* Form labels */
-.formGroup label {
-  display: block;
-  margin-bottom: 5px;
-  color: #ffffff; /* White text for labels */
-}
-
-/* Input, select, and textarea styles */
-.formGroup input,
-.formGroup select,
-.formGroup textarea {
-  width: 100%;
-  padding: 8px;
-  border-radius: 4px;
-  border: 1px solid #ccc;
-  background-color: #23272a; /* Darker input background */
-  color: #ffffff; /* White text inside the input fields */
-}
-
-.formGroup input::placeholder,
-.formGroup textarea::placeholder {
-  color: #888888; /* Slightly lighter color for placeholder text */
-}
-
-/* Checkbox style adjustment */
-.formGroup input[type="checkbox"] {
-  width: auto;
-  margin-right: 10px;
-}
-
-/* Add button for adding room types */
-.addButton {
-  background-color: #28a745;
-  color: white;
-  padding: 8px 15px;
-  border: none;
-  border-radius: 5px;
-  cursor: pointer;
-  margin-top: 10px;
-}
-
-.addButton:hover {
-  background-color: #218838;
-}
-
-/* Dynamic room type list */
-.roomTypeList {
-  list-style-type: none;
-  padding: 0;
-  margin-top: 15px;
-}
-
-/* Individual room type item */
-.roomTypeItem {
-  background-color: #444;
-  padding: 8px;
-  margin-bottom: 5px;
-  color: white;
-  border-radius: 5px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-/* Remove button */
-.removeButton {
-  background-color: #dc3545;
-  color: white;
-  border: none;
-  padding: 5px 10px;
-  border-radius: 5px;
-  cursor: pointer;
-}
-
-.removeButton:hover {
-  background-color: #c82333;
-}
Index: imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,55 +1,0 @@
-import React, {useState} from "react";
-import useModalState from "../Hooks/useModalState.jsx";
-import {useModalEvent} from "../Hooks/useModalEvent.jsx";
-import useConnections from "../Hooks/useConnections.jsx";
-import ModalNameField from "../Components/ModalNameField.jsx";
-
-import ModalDisplayConnections from "../Components/ModalDisplayConnections.jsx";
-import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
-import ModalSaveButton from "../Components/ModalSaveButton.jsx";
-import Modal from "../Components/Modal.jsx";
-import ModalSelectConnections2 from "../Components/ModalSelectConnections2.jsx";
-import ShapeRegistry from "../../../scripts/util/ShapeRegistry.js";
-import ShapeQuery from "../../../scripts/util/ShapeQuery.js";
-
-export default function StairsModal({map}){
-    const {
-        modalState: {isOpen,setIsOpen,setShape,shapeInfo,setShapeInfo},
-        handlers: {toggleModal,updateModalData,saveDetails}
-    } = useModalState(map);
-
-    const {
-        connectionState: {connections,setConnections},
-        handlers: {addConnection,removeConnection}
-    } = useConnections(map,shapeInfo,setShapeInfo)
-
-
-    useModalEvent((event) => {
-        const roomObj = event.detail.room;
-        setShape(roomObj);
-        setShapeInfo(roomObj.info);
-        console.log("stairs connections shape info: " + roomObj.info.selectedPins)
-        setConnections(roomObj.info.selectedPins || []);
-        setIsOpen(true);
-        console.log(roomObj.info.selectedPins, "Loaded pins on modal open");
-        event.detail.map.detachKeyPressEventListeners();
-    },"openStairsModalEvent")
-
-
-
-    return (
-
-        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Stair Details"}>
-            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData} phtext={"Enter name of stairs"}/>
-            <ModalSelectConnections2
-                shapeInfo={shapeInfo}
-                updateModalData={updateModalData}
-                addConnection={addConnection}
-                availableShapes={ShapeQuery.findAllByType("Stairs")}
-            />
-            <ModalDisplayConnections connections={connections} removePinFromList={removeConnection}/>
-            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
-            <ModalSaveButton saveDetails={saveDetails}/>
-        </Modal>
-    )
-}
Index: imaps-frontend/src/components/Profile/Profile.jsx
===================================================================
--- imaps-frontend/src/components/Profile/Profile.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/Profile/Profile.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,102 +1,52 @@
 import React, { useState, useRef, useEffect } from "react";
-import ReactDOM from "react-dom";
-import { useNavigate } from "react-router-dom";
 import profile from "../../assets/person_icon.png";
 import styles from "./Profile.module.css";
-import { useAppContext } from "../AppContext/AppContext.jsx";
 
-function Profile({ position = "fixed" }) {
-    const { username, isAuthenticated } = useAppContext();
-    const [open, setOpen] = useState(false);
-    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-    const imgRef = useRef(null);
-    const navigate = useNavigate();
+function Profile() {
+  const menus = ["Profile", "Settings", "Support", "Logout"];
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef(null);
+  const imgRef = useRef(null);
 
-    const menus = isAuthenticated ? ["My Maps", "Logout"] : ["Login"];
-
-    useEffect(() => {
-        const handleClickOutside = (e) => {
-            if (imgRef.current && !imgRef.current.contains(e.target)) {
-                setOpen(false);
-            }
-        };
-
-        document.addEventListener("click", handleClickOutside);
-
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
-    }, []);
-
-    const toggleMenu = () => {
-        if (imgRef.current) {
-            const rect = imgRef.current.getBoundingClientRect();
-            setMenuPosition({
-                top: rect.bottom + window.scrollY,
-                left: rect.left + window.scrollX,
-            });
+  useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (menuRef.current && imgRef.current) {
+        if (!menuRef.current.contains(e.target) && !imgRef.current.contains(e.target)) {
+          setOpen(false);
         }
-        setOpen(!open);
+      }
     };
 
-    const handleMenuClick = (menu) => {
-        if (menu === "My Maps") {
-            navigate("/MyMaps");
-        } else if (menu === "Logout") {
-            localStorage.removeItem("token");
-            window.location.reload();
-        } else if (menu === "Login") {
-            navigate("/Login");
-        }
-        setOpen(false);
+    document.addEventListener("click", handleClickOutside);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
     };
+  }, []);
 
-    const renderDropdown = () => {
-        if (!open) return null;
-
-        return ReactDOM.createPortal(
-            <div
-                className={styles.dropdownMenu}
-                style={{
-                    position: "absolute",
-                    top: menuPosition.top,
-                    left: menuPosition.left,
-                }}
-            >
-                {isAuthenticated && <div className={styles.username}>{username}</div>}
-                <ul className={styles.menuList}>
-                    {menus.map((menu) => (
-                        <li
-                            key={menu}
-                            className={styles.menuItem}
-                            onClick={() => handleMenuClick(menu)}
-                        >
-                            {menu}
-                        </li>
-                    ))}
-                </ul>
-            </div>,
-            document.body
-        );
-    };
-
-    return (
-        <div
-            className={
-                position === "fixed" ? styles.fixedProfileContainer : styles.inlineProfileContainer
-            }
-        >
-            <div className={styles.profileWrapper}>
-                <div
-                    className={styles.profileIconContainer}
-                    onClick={toggleMenu}
-                    ref={imgRef}
-                >
-                    <img src={profile} alt="profile" className={styles.profileImage} />
-                </div>
-                {renderDropdown()}
-            </div>
-        </div>
-    );
+  return (
+    <div className={styles.profileContainer}>
+      <div className={styles.profileWrapper}>
+        <img
+          onClick={() => setOpen(!open)}
+          src={profile}
+          alt="profile"
+          className={styles.profileImage}
+          ref={imgRef}
+        />
+        {open && (
+          <div ref={menuRef} className={styles.dropdownMenu}>
+            <ul className={styles.menuList}>
+              {menus.map((menu) => (
+                <li key={menu} onClick={() => setOpen(false)} className={styles.menuItem}>
+                  {menu}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+    </div>
+  );
 }
 
Index: imaps-frontend/src/components/Profile/Profile.module.css
===================================================================
--- imaps-frontend/src/components/Profile/Profile.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/Profile/Profile.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,58 +1,44 @@
-.fixedProfileContainer {
-  position: fixed;
-  top: 1em;
-  right: 2.5em;
-  z-index: 1000;
-}
-
-.inlineProfileContainer {
-  display: inline-block;
+img:hover,
+.menuItem:hover {
   cursor: pointer;
 }
 
-.profileWrapper {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+.menuList {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  text-align: center;
 }
 
-.profileIconContainer {
-  position: relative; /* Makes dropdown position relative to this container */
-  cursor: pointer;
+.profileContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.profileWrapper {
+  position: relative;
 }
 
 .profileImage {
-  width: 60px;
-  height: 60px;
+  height: 48px;
+  width: 48px;
   border-radius: 50%;
-  transition: box-shadow 0.3s ease;
+  /* border: 4px solid #d1d5db; */
+  object-fit: cover;
 }
 
-.profileImage:hover {
-  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+/* Dropdown Menu */
+.dropdownMenu {
+  position: absolute;
+  top: 50px; /* Adjust according to image size and spacing */
+  left: 50%;
+  transform: translateX(-50%); /* Center the menu below the image */
+  width: 13rem;
+  background-color: white;
+  padding: 1rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
-.dropdownMenu {
-  position: absolute;
-  top: 70px; 
-  margin-left: 1.8em;
-  transform: translateX(-50%);
-  background-color: #ffffff;
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-  border-radius: 12px;
-  padding: 12px;
-  width: 180px;
-  transition: opacity 0.3s ease;
-  opacity: 1;
-}
-
-.username {
-  padding: 10px 0;
-  font-weight: 600;
-  text-align: center;
-  color: #333;
-  border-bottom: 1px solid #eee;
-}
-
+/* Menu List and Items */
 .menuList {
   list-style-type: none;
@@ -63,14 +49,10 @@
 .menuItem {
   padding: 10px;
-  cursor: pointer;
-  transition: background-color 0.2s ease, color 0.2s ease;
   text-align: center;
-  color: #333;
-  font-weight: 500;
-  border-radius: 8px;
+  border-radius: 5px;
+  transition: background-color 0.3s ease;
 }
 
 .menuItem:hover {
-  background-color: #f5f5f5;
-  color: #007bff; /* Optional: Adds a blue highlight on hover */
+  background-color: #f0f0f0;
 }
Index: imaps-frontend/src/components/ProtectedRoute/ProtectedRoute.jsx
===================================================================
--- imaps-frontend/src/components/ProtectedRoute/ProtectedRoute.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/ProtectedRoute/ProtectedRoute.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,25 +1,7 @@
-import { Navigate, Outlet, useLocation } from "react-router-dom";
-import {useAppContext} from "../AppContext/AppContext.jsx";
-import HttpService from "../../scripts/net/HttpService.js";
-import React, {useEffect} from "react";
-import {LoadingContainer} from "../LoadingContainer/LoadingContainer.jsx";
-import config from "../../scripts/net/netconfig.js";
-import {verifyToken} from "../../scripts/util/verifyToken.js";
+import React from "react";
+import { Outlet, Navigate } from "react-router-dom";
 
-const ProtectedRoute = () => {
-  const location = useLocation();
-  const {loading,isAuthenticated} = useAppContext();
-
-
-  if(loading){
-    return <LoadingContainer/>
-  }
-
-
-  if (!isAuthenticated) {
-    return <Navigate to="/Login" state={{ targetPath: location }} replace />;
-  }
-
-  return <Outlet />;
+const ProtectedRoute = ({ isAuthenticated }) => {
+  return isAuthenticated ? <Outlet /> : <Navigate to="/Login" />;
 };
 
Index: imaps-frontend/src/components/PublishForm/PublishForm.jsx
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,188 +1,0 @@
-import React, { useState } from 'react';
-import styles from './PublishForm.module.css';
-
-const PublishForm = ({ isAdmin = false, formData, onSubmit, onCancel, onApprove, onDeny }) => {
-    const [state, setState] = useState(isAdmin ? 'viewing' : 'writing');
-    const [form, setForm] = useState(
-        formData || {
-            id: -1,
-            name: '',
-            lastName: '',
-            mapName: '',
-            mapType: 'Other',
-            googleMapsUrl: '',
-        }
-    );
-    const [errors, setErrors] = useState({});
-    const [denyReason, setDenyReason] = useState('');
-    const [isDenying, setIsDenying] = useState(false);
-
-    const mapTypeOptions = ['Hospital', 'Faculty', 'House', 'Other'];
-
-    const handleChange = (e) => {
-        const { name, value } = e.target;
-        setForm((prev) => ({ ...prev, [name]: value }));
-        setErrors((prev) => ({ ...prev, [name]: '' }));
-    };
-
-    const validateForm = () => {
-        const newErrors = {};
-        if (!form.name.trim()) newErrors.name = 'Name is required.';
-        if (!form.lastName.trim()) newErrors.lastName = 'Last Name is required.';
-        if (!form.googleMapsUrl.trim()) newErrors.googleMapsUrl = 'Google Maps URL is required.';
-        return newErrors;
-    };
-
-    const handleSubmit = () => {
-        const formErrors = validateForm();
-        if (Object.keys(formErrors).length > 0) {
-            setErrors(formErrors);
-            return;
-        }
-
-        if (state === 'writing') {
-            onSubmit(form);
-        }
-    };
-
-    const handleDeny = () => {
-        if (!denyReason.trim()) {
-            alert('Please provide a reason for denial.');
-            return;
-        }
-        onDeny(form.id, form.mapName, denyReason);
-        setIsDenying(false);
-    };
-
-    return (
-        <>
-            <div className={styles.modalOverlay}></div>
-            <div className={styles.modal}>
-                <div className={styles.modalContent}>
-                    <h2>{state === 'writing' ? 'Publish Map' : 'View Map Details'}</h2>
-                    {state === 'writing' ? (
-                        <form>
-                            <div>
-                                <label>Name:</label>
-                                <input
-                                    type="text"
-                                    name="name"
-                                    value={form.name}
-                                    onChange={handleChange}
-                                />
-                                {errors.name && <p className={styles.error}>{errors.name}</p>}
-                            </div>
-                            <div>
-                                <label>Last Name:</label>
-                                <input
-                                    type="text"
-                                    name="lastName"
-                                    value={form.lastName}
-                                    onChange={handleChange}
-                                />
-                                {errors.lastName && <p className={styles.error}>{errors.lastName}</p>}
-                            </div>
-                            <div>
-                                <label>Google Maps URL:</label>
-                                <input
-                                    type="url"
-                                    name="googleMapsUrl"
-                                    value={form.googleMapsUrl}
-                                    onChange={handleChange}
-                                />
-                                {errors.googleMapsUrl && (
-                                    <p className={styles.error}>{errors.googleMapsUrl}</p>
-                                )}
-                            </div>
-                            <div>
-                                <label>Type of Map:</label>
-                                <select
-                                    name="mapType"
-                                    value={form.mapType}
-                                    onChange={handleChange}
-                                >
-                                    {mapTypeOptions.map((option) => (
-                                        <option key={option} value={option}>
-                                            {option}
-                                        </option>
-                                    ))}
-                                </select>
-                            </div>
-                            <div className={styles.buttonGroup}>
-                                <button type="button" onClick={handleSubmit}>
-                                    Submit
-                                </button>
-                                <button
-                                    type="button"
-                                    className={styles.cancelButton}
-                                    onClick={onCancel}
-                                >
-                                    Cancel
-                                </button>
-                            </div>
-                        </form>
-                    ) : (
-                        <div>
-                            <p><strong>Map Name:</strong> {form.mapName}</p>
-                            <p><strong>Name:</strong> {form.name}</p>
-                            <p><strong>Last Name:</strong> {form.lastName}</p>
-                            <p>
-                                <strong>Google Maps URL:</strong>{' '}
-                                <a
-                                    href={form.googleMapsUrl}
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    {form.googleMapsUrl}
-                                </a>
-                            </p>
-                            <p><strong>Type of Map:</strong> {form.mapType}</p>
-                            <div className={styles.buttonGroup}>
-                                <button
-                                    className={styles.cancelButton}
-                                    onClick={() => {
-                                        setIsDenying(false);
-                                        onCancel();
-                                    }}
-                                >
-                                    Cancel
-                                </button>
-                                <button
-                                    className={styles.approveButton}
-                                    onClick={() => onApprove(form.id, form.mapName)}
-                                >
-                                    Approve
-                                </button>
-                                <button
-                                    className={styles.denyButton}
-                                    onClick={() => setIsDenying(true)}
-                                >
-                                    Deny
-                                </button>
-                            </div>
-                            {isDenying && (
-                                <div className={styles.denyReason}>
-                                    <textarea className={styles.denyReasonTextArea}
-                                        placeholder="Enter reason for denial..."
-                                        value={denyReason}
-                                        onChange={(e) => setDenyReason(e.target.value)}
-                                    />
-                                    <div className={styles.buttonGroup}>
-                                        <button
-                                            className={styles.denySubmitButton}
-                                            onClick={handleDeny}
-                                        >
-                                            Submit
-                                        </button>
-                                    </div>
-                                </div>
-                            )}
-                        </div>
-                    )}
-                </div>
-            </div>
-        </>
-    );
-};
-
-export default PublishForm;
Index: imaps-frontend/src/components/PublishForm/PublishForm.module.css
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,194 +1,0 @@
-/* Modal overlay for blur and dark background */
-.modalOverlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(0, 0, 0, 0.6); /* Dark transparent background */
-    backdrop-filter: blur(8px); /* Stronger blur effect */
-    z-index: 999; /* Behind the modal */
-}
-
-.denyReason {
-    display: flex;
-    flex-direction: column;
-    margin-top: 10px;
-    border-radius: 20px;
-}
-.denyReasonTextArea{
-    padding-bottom: 4rem;
-}
-
-.denySubmitButton {
-    color: white;
-    margin-right: 10px;
-}
-
-
-/* Modal styles */
-.modal {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: #ffffff;
-    border-radius: 12px;
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-    width: 420px;
-    max-width: 90%;
-    z-index: 1000; /* Above the overlay */
-    padding: 30px;
-    animation: fadeIn 0.3s ease;
-}
-
-/* Modal fade-in animation */
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translate(-50%, -55%);
-    }
-    to {
-        opacity: 1;
-        transform: translate(-50%, -50%);
-    }
-}
-
-.modalContent {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-h2 {
-    font-size: 1.8rem;
-    font-weight: 600;
-    margin-bottom: 20px;
-    color: #333333;
-    text-align: center;
-    width: 100%;
-}
-
-/* Input and form styles */
-form {
-    width: 100%;
-}
-
-label {
-    font-size: 1rem;
-    font-weight: 600;
-    margin-bottom: 5px;
-    display: block;
-    color: #555555;
-}
-
-input, select {
-    width: calc(100% - 10px);
-    padding: 10px;
-    margin-bottom: 15px;
-    border: 1px solid #cccccc;
-    border-radius: 6px;
-    font-size: 1rem;
-}
-
-/* Button styles */
-button {
-    background-color: #007bff;
-    color: #ffffff;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 20px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s;
-}
-
-button:hover {
-    background-color: #0056b3;
-    transform: scale(1.05); /* Slight scaling effect */
-}
-
-.cancelButton {
-    background-color: #dc3545;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 20px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s;
-}
-
-.cancelButton:hover {
-    background-color: #a71d2a;
-    transform: scale(1.05); /* Slight scaling effect */
-}
-
-.approveButton {
-    background-color: #28a745;
-    color: white;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 20px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s;
-}
-
-.approveButton:hover {
-    background-color: #218838;
-    transform: scale(1.05); /* Slight scaling effect */
-}
-
-.denyButton {
-    background-color: #ffc107;
-    color: #212529;
-    border: none;
-    border-radius: 6px;
-    padding: 12px 20px;
-    font-size: 1rem;
-    cursor: pointer;
-    transition: background-color 0.3s ease, transform 0.2s;
-}
-
-.denyButton:hover {
-    background-color: #e0a800;
-    transform: scale(1.05); /* Slight scaling effect */
-}
-
-/* Button group */
-.buttonGroup {
-    display: flex;
-    justify-content: space-between;
-    gap: 15px;
-    margin-top: 20px;
-}
-
-.error {
-    color: #ff0000;
-    font-size: 0.85rem;
-    margin-top: -10px;
-    margin-bottom: 10px;
-}
-
-p {
-    font-size: 1rem;
-    margin: 10px 0;
-    line-height: 1.6;
-}
-
-a {
-    color: #007bff;
-    text-decoration: none;
-    transition: color 0.3s ease;
-}
-
-a:hover {
-    color: #0056b3;
-}
-
-@media (max-width: 480px) {
-    .modal {
-        width: 90%;
-    }
-}
Index: imaps-frontend/src/components/Report/Report.jsx
===================================================================
--- imaps-frontend/src/components/Report/Report.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,80 +1,0 @@
-import React, { useState } from "react";
-import styles from "./Report.module.css";
-import report_icon from "../../assets/report_icon.png";
-import {useAppContext} from "../AppContext/AppContext.jsx";
-import HttpService from "../../scripts/net/HttpService.js";
-import config from "../../scripts/net/netconfig.js";
-
-const Report = ({mapName}) => {
-    const [isModalOpen, setIsModalOpen] = useState(false);
-    const [topic, setTopic] = useState("");
-    const [description, setDescription] = useState("");
-    const {username} = useAppContext();
-
-    const handleSubmit = async () => {
-        if (!topic.trim() || !description.trim()) {
-            alert("Please fill in both fields.");
-            return;
-        }
-
-        let httpService = new HttpService(true);
-        let payload = {
-            username: username,
-            mapName: mapName,
-            subject: topic,
-            content: description,
-        }
-
-        let response = await httpService.post(config.view_maps.add_report, payload);
-
-        setTopic("")
-        setDescription("")
-        setIsModalOpen(false)
-    }
-
-
-    const handleOutsideClick = (e) => {
-        if (e.target.classList.contains(styles.modalBackground)) {
-            setIsModalOpen(false);
-        }
-    };
-
-    return (
-        <div>
-            <button className={styles.reportButton} onClick={() => setIsModalOpen(true)}>
-                <img src={report_icon} alt="Report Icon" className={styles.reportIcon} />
-            </button>
-
-            {isModalOpen && (
-                <div className={styles.modalBackground} onClick={handleOutsideClick}>
-                    <div className={styles.modalContent}>
-                        <h2>Report Issue</h2>
-                        <input
-                            type="text"
-                            placeholder="Topic"
-                            value={topic}
-                            onChange={(e) => setTopic(e.target.value)}
-                            className={styles.inputField}
-                        />
-                        <textarea
-                            placeholder="Description"
-                            value={description}
-                            onChange={(e) => setDescription(e.target.value)}
-                            className={styles.textareaField}
-                        ></textarea>
-                        <div className={styles.buttonGroup}>
-                            <button onClick={handleSubmit} className={styles.submitButton}>
-                                Submit
-                            </button>
-                            <button onClick={() => setIsModalOpen(false)} className={styles.cancelButton}>
-                                Cancel
-                            </button>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </div>
-    );
-};
-
-export default Report;
Index: imaps-frontend/src/components/Report/Report.module.css
===================================================================
--- imaps-frontend/src/components/Report/Report.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,93 +1,0 @@
-.modalBackground {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100vw;
-    height: 100vh;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    z-index: 1000;
-}
-
-.modalContent {
-    background: white;
-    padding: 20px;
-    border-radius: 8px;
-    width: 400px;
-    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
-    animation: fadeIn 0.3s ease-out;
-}
-.reportButton {
-    background: none;
-    border: none;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0;
-    outline: none;
-}
-
-.reportIcon {
-    width: 40px;
-    height: 40px;
-    transition: transform 0.2s ease;
-}
-
-.reportButton:hover .reportIcon {
-    transform: scale(1.1);
-    background: none;
-}
-
-
-.inputField,
-.textareaField {
-    width: 100%;
-    padding: 10px;
-    margin-bottom: 10px;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 14px;
-}
-
-.textareaField {
-    height: 100px;
-    resize: none;
-}
-
-.buttonGroup {
-    display: flex;
-    justify-content: flex-end;
-}
-
-.submitButton {
-    background: #4caf50;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 4px;
-    cursor: pointer;
-    margin-right: 10px;
-}
-
-.cancelButton {
-    background: #f44336;
-    color: white;
-    border: none;
-    padding: 10px 15px;
-    border-radius: 4px;
-    cursor: pointer;
-}
-
-
-
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
Index: imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.jsx
===================================================================
--- imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,67 +1,0 @@
-import React, {useEffect, useRef, useState} from "react";
-import styles from "./RoomInfoPanel.module.css";
-import navigate_icon from "../../assets/route_icon.png";
-
-const RoomInfoPanel = ({isOpen, onClose, floor, room, handleDirectionsSubmit}) => {
-  const panelRef = useRef();
-  const testImageUrl = "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTExIVFhUXGBsYGBcWFxgXFhcYFRgXFxUVFRYYHiggGBolGxUXITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGysmHSUtLS0rLS0tLS0tLS0tLS0rKy0tKy0rLi0tLS0tKy4tLSstLS0vLS0tLS0rLS0tKy0tLf/AABEIAMIBAwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgMEAAECBwj/xABOEAACAQIDBAcEBwQHBAkFAAABAhEAAwQSIQUGMUETIlFhcYGRMqGxwQcUI1JyktEzQmLwQ3OCorLC4RUWJFM0RIOTs8PS4vEXVGNko//EABsBAAMBAQEBAQAAAAAAAAAAAAECAwAEBQYH/8QAMREAAgIBAwIDBgYCAwAAAAAAAAECEQMSITEEQVFhgQUTIjJx0UKhscHh8BSRFdLx/9oADAMBAAIRAxEAPwB4UV1FaFbpxDIrUVusrBOCK4YVIa4Vg3ODMQQRWMQOKgdau3LRqvcWtRijcWql1KIXBVW4tAwMupVO6lFLi1TurSsIJvJqKy1YAJIGp4+Qj4Ct7RuFYIUt3CPnQ25t4ISGRhrHL5UAlbeUENbgkGCNDB4ipcDJUTroKhxuKt4iD1lKzB059oq5hSoA6w4eHuosxZRanVKjS4v3l9RUq30++vqKUx2qVIqVGMTb++v5hUiYlPvisYkCV2ErauO/0P6VIGHf+U/pWMR5KwpUvSLIGsnQSCJ0nmK7KVglUpUbLVpkqJlrGKzLUbLVllqJhWMVWWonFWXFQuKxiO3gDcnrKq/eaYnsECSatYTY6qZN9D4K/wClD8SxEQTx7asbOk8ST41jBhbNv/mj8rVlQ7Ow7LbUPBfXMRwkknSfGspgHoQrdcit0wpusrVaomMNR43aa22VYJlHaQRxt5OpHac/uqSaVbr27lwg38hzPqVkdbioIiDIXjxiqY0m9wPjYJ7V2kF6N3FxShdmRTPsKCQ0aMsMD5+NXHtj9p98DTwH+tD8bszprIm6GckEOBxWBbI75HGrODuHKUJBymFMzKwCJ8CSPKjNLegp3FXyY4qtcFWnqvcFRMU7i1TvCr9wVUuigYEe0ygjn/PGlvelLVp1BDZrkkERAIIGs+NOCp1h40B3w2ZcuPZKBSq5s85Z4qdJ7poUEBYS3pNFtl2QV4cz8TXHRZVireyR1fM/EmgEt27I7K1i0yqI01/WrCCo8eOqPH5VjFJSTMk8KMYPZ6FVbWSAePnQm2OPh8xTNg16i/hHwoIxtMOO+plwwqS0tTBaJis2FXQxw4VnQirRWuMtYxQxdsBT5fEVTuVf2jovmPjNeX7U3rxAu3FVlyq7AdWdASPlWow9MaiY159/vXifvL+UVwd6MT95fy0aMPztULmkb/ebEfeX8taO8d/tX8v+tCjDdieI86v7NXSlzY2Na8oLRIBmBA1OnuFNGzl0FYxcfFIpgnWsrdrCq4zEamT5T1fdFapgD2Kya5Brc0QG5rJrU1qsY2TXnNu+elvIetFxwJ4jrtlgzXok1wyjsFNF07CnsANnY4W7B6TTIdSx5mNR2jUkdmorvD4tWvLFwPmUkQCDliVzDxJ1oubK/dX0Fckd1M52A4eq71O9V7lIYguVVu1ZuVWuUGYpO0GRxFDsbZzozsoBzCOffRG7UGKH2J/EKVhAlwDn2f8AxVnZg6v89pqvfq1sz2f57TQMX0FQ4/gPGp0qHaHBaLMVbY0Pl8aaMOOqvgPhSujaHypssroPAVkZktsVMq1wgruaJjoioytd61yaBgftXgv4vgprwvEvmdz2sx9STXtu3LkCexXb0H+teGCsE6rK5zVmaiY2K2awVjVjDXusn2Z8qc8GIFK+7luLY7zTTaHVjt09dKUwRwqQi/hHwrKlC1lMAZwa3NcA1uiA6mtTWprU1gmya5JrRNVNo4gpauOvFUZhPCQCRNFK9gFomo2pMt7xbRZVdcGLiMoYECJnjEMdO/3VFc30xSANc2e4VvZaXCtEzlYpB4Hh2V1/4OZuklf1QkckJOk0/Uc3NV7hpQ/+oaj28LcHbDjTyKij+yNrW8UjsgIyRpmRvaMa5Tpw50mTpM2NapxpDlhteFQvab7p9KobzLOGcdrWhqY/6xa58vGtNuVhi6nLdAZ4OW6csFWYnMCRMiY8qOLp4zhqlKvS/wBxZNxV068ef03/ACJL9h/uN6Gq2KQi1GRiS6qANDLGBxpfv7KtnEdFbv31Jd4+0YjIhuKDoO1V56z36Hd2rbWsQts32ZWslybpLAEdFrqBIl29B2TXXL2ZoWpyvvVDU/79uQdfwl4Ak4TEgKATC22gMYBMP21FgscqyrWsQIksxtKFUAmSxz6AdvdRTaW/KhcVay5biRbtlQOjudG7S7+yVnTTXiaqYcudmZm6xe1fJJME9Z9YI15V0w9nQ03OFb0t33ViRcq3f9/2wiVgkVW2h+75/KrV32m8TVXH/u+fyrwJLcdFS2DrJEDgI11k6691ONsaUoqND4j4GjeD2i7GMq+poILDIrtRVNb7/dX8x/SuxiG+6Pzf+2iAs1waq2scWzdQiCRxGscx3VSxW1GynJbcNyLKCPODQMdbTshyVPAoQfBtPlSBc3LGuoVQGYksYCqCxJMHgAae9nO91hnEEkLwjmdYPiKEbW3gwgS6hN8Bhds5glpoPWts2XpJjjEgTVcWGWR1FBuhKv7tWlMHFWgewuQdRI0Kdhqvc3fXlicOf+1UfEa04jebZ5t9HJ9gKCcJanSZaQ8yZqLbu1dm4hy1spZHR5Aowp0OV1zSJk9dTP8AAPL0I9BDVTbrxr+CalPul/v+BTtbvEmBesE9gv2yfSpbu7N1DlPODplIIOo1FMGBGAmLdyWmdLV4sAOk4RbJGjp+Twg9j7IDKeRUQCGUjJ1CGVwCDKniKh1nTRw1pbfpRROwNs2yFAUcAT8aPWR7H4vkaD4ISaNYISx7hHmdT7orhCFAKytisomLlneLCtwv2/zCrdvaVluF1D4MK8mOw16JXDtJ6PQp1ftGZSQ3YI8zI5a7TdzWTcQQRAuLoevk7ToNSfCvafsnwkU90z2C3cDcCD4Gtmk36Obk9OuVBkISUBUNBY5iCeOseAFOyWGbgpPlXl58TxTcH2JtUyA1S2sPsLv9W3+E0XOEj2iq+cn0FU9q2l6G4AWYlCBAjiOzianHlAAG7D2BhrHSFk+yEMzW0Vj1dAzKZJ1I4mBy4VS3lxv/AAFglvs0fKIM+1buATl1Pj39mlLm28S1zA4ex0F5WtFJzWWHs22UmZ11PZQS5tS89oWLl5mtoRkt9XTKCBqdVABjXtr6fF0uqamnvfd9vI3xSlqaSaeyXH1b8/Db6jDsS90g6Ug5mdm/fkfaWxo41J1PafiprdBIu4wNPs2P8GnEcKXNiYy0lkK7KGDHq5wDq9vjI7FJ4/6mNgLbcY0dIAh6DrBgR7IkTw46UfaVrp5t/wB3ReW8Ugnt+9be0yL1iGtMyrLvlW/aLHKoJ0HdQXfDeS/n6LCZksghluLauWnDEQ8SF07dOZrrEX7eGP2KlyeJTSBxjMTB8BQzH7auuZVsXZPcrRz7xXg9J10cS3jq9Tmlg+NS32KG7uIC4vpcQ5EyWuXJkliASec8+NG7WNtu7G2ely4R5UBX1z2Bly6g8OBoBg9vYxLoFzF3FT+NZJnuy8aY9oW9o3bLN0oSyUljcCocoOaSVUsugnyrr6n2vGcWlCrVLf8AgdQbAWKxpCnLgwG5ThlAntOUDSrexr6Oh6TCoGAJfLbZRxMcGE6dk1Ds/YONv2y1m+lxNRK3WjhqOso7aL293sTbUM6KABqc68fM15EutzxWzf8AtlVhiwjh36QZ14NrwI9x1FR4+y2hjQTS7j9q9Hla3cXN1uBB1ykj3ii2CxT3bSPcbMxWewCewVzxyyfKM8SRInDz+VX9l+35H5UPTh5/KiOyfaPh8xVkRYYFbrkVuaYUiw/DxJ+NbeuMMeoK0+0LKkKWljOiwcscQdeNJOairZSMXJndi8ts9K5hLY6RjBOianQUD2Ftmxh7IQ49lVnLhvq7rIJZiEziDq8yZq5t/GWzg8UUOvRRwI9shfnQnY2xMHdwdtr1u4XECOlYHVQSyWi3skniNOVet7NhrxOd967P9SPUfBs8bn6WGsJvFg1a6xxlhzcVVBuW4IChpkcPaaaUvqWHKopv4IwVLHOgJyqwIkoCQWYHXs1mAKMYndDANcsJbzoLt0JJuqwC5WYyQTGi1BvhuPg8Pcw6WL1xuleDwuEKFJJQKNTIEePnXd004456YyacuzXh4JcehLE7VRxNLj5aKLbIsm0yo2GZiDDZ7JOY2raTmJkDMLjd0jnrRNsG4s2ERrZKWkUxcT2hJcce0xSg+wFmyFuMTctPcb7M6ZC+i/e0TU8AZ7K6XdkhWctBVLTqrIYfpmhRmOgWJOY6GIrq6rocnUKpSWz8PTxOje+B22bgm4Nay94ZW9IPdzHOrtmx0ZMnQmQToCIHv04Uq7tvlxd20EsnoRdYXEtC2zEDowJ4hTmnL20z7AxC31XMW00iT1W5q686+c6rB7iehjLctdOn3l9RW6vNg3BjKfKsqADzJcfme0gkAMoYaHMQ+n86U3o50AzgZhoHWAPrMjQ8IPPmetwpGwyjpVE5jnHszHtDtEmnG+okTIJLf0f/AOxBgg+PCdRlr7Bb0dsXZc+jt8t3FkmIu6kxAiZJPCmPae+NtCQtzpDHsoCTP9kRSduvcVbe0CwBUM0g6AgAzM8BV7ZW2sPoossOwIA0+kGvlPaeRx6iSRJQUm7LZ3jv3B9laQE8TdZge/qBfnVS4+Jukh78DsT9F19TRH/b+DGjE94NtuPeIqHG4yxiUyWsX0EceqFmeQLRHka8/wB9vuF4l2MweGYatdcxyLz6/p/Ig21ibltGYNMKSuaCAYJHH+fDiQt3cdYLLtC1A1JIB94eq67mXH0THYd+7pCD86vHNFdyTxy8AFh968RdMHDYa83YcPnb0Bo4u2V6JrX1e1Ya4FLhV6NuqZEqe+pMDuZtKyfsr1pQfuXWHjpkFNO5mFvQUxdtFA1DXXtu5Y6aKrERHM61suduFKe3hY0ItPdCJj7n2T5TDZTBnnGlC323iIIW8+UjhIIgjh769+/3dwrDXD2W8baGfdVa/ujs9VzNhMOqjiciqB5iK5IOKLO2eSbJxRa2jSZKgnxohi8Y623YMZCkiSeIEiju18HgVVhhcMBAPXzXFUQP3Vza+deY3NqXCIzt7qTRqew10htw30g4lWFsIjAlQCdDrEcu+jWJvs5zOxY9/AfhHAV5rsdpuWp450HowHyr0S5VJbOheUec4jCayXT2u0EiTEwDPOm/ZjDobQB0yLrw4ga0ExWXI5Eg5THXbjGmk0cC9VdNMo08qeW1E07svMmnU60EgyQI0FWME7ISShOnIqfnQu3gV5IPSplw3iPAmq6iNB5ccOaOP7M/A1Nhr4uMEQMWbQDKw95Gg76XltMODv8AmNdPvFfwK57ZDFiAc4BMdgJGlCWSkGMLdD1a3aZVA6QSB2H9aWr24V8YlrwuWspzadYGWFvuj9w+tDdj72Yxi7G8xAuMoBhhCmOffNEn36xI0K2j4qR8DXJPM3szqhirdFbbuykt4e5av4hLJulQGIlRkbNHETIoxsfeK0iWra42wQhExk9lQoGUTObTmYpJ+kzaLXrWFZwAz53IXhoFAifGquI3Nxt62HFvDZUgFkhGJIgBpGtfSdF0ql00baq73S5OPL1ywSak0r8fL7Wel7WxSYq7hz9a+zt3TcJUgMDkYKRl1OrHSYj0oHvXhr9x7D2UF0WxcJ66oZeANWmRAngONeeXNx8cBm+rkrrqrIRoSDznkapf7LxaObYt3s4AJVMxIDaAwvbXXhx6ZpwnFtdv6/M5cXUY+079f2+4z7F2FjEe4160zRZdEBvdsABcjTpxC6DTWmI7OuZsuRspuYVSQWYZbSyxJfkDxPBSNBXm92/jbPtNibcfeNxY8c1dW95cYvDE3PMg/EV2vJ1D3qP5/UvGarYYtni9afaGIKMHCHKWU9Yu/EaDNw5VmwdoXeldoAuLBdYgOukafeHbQa1vnjV/pp8UX5CrNvfzFjj0R8UI+Bryur6XNnyvI0h1NJUemptpiJUgryPbWV5wN/r/APybPof1rK5f8DP4G1IYcZuzZt2yzXmtgR1yqnKZ0OYAHzqjY2WG/Y7UtMeUkEzMj9489aZdubAx1+09pTbyMIgHz1JWqOx/or6OHum7dYQRbt5UkjUAFuPqKMet6hfiG94yC1sp8Pgsd0l225u22IZTxJUjmBrJoDulijkkGGXQxx0puxW5633KfVfqw5lndrmuuqzlB586Vt5djNssKbF3pEdpYkAFSsAKYkZTJ104Vw5c3vcmqXJSnVkW2rpfGlu20pbvaSAT5AelBNpuwuESYZJGvNDJjymiuxtj4nat641h0tEIJnNk6sKFzAGDz9av4j6LNpkgl7Dx2XW58faQVCda7bGi3ppIUFvvyZvU0Y2ffLW1Y6mBPzq7d+jraSf9WzfhuWz8WBqlc2LjcJbm/h3tpMAsBGp01BpJpSWxSDae4QtGo9pXyltmXiBPpQ1dqZeIHrXN3auYMsLB051FYnZVzVDDa+kLG2oVbkqAMshTpAgaqaZcFtW7jLa3bzEnkvBRpxygAT5V5TYuyqyRIAH5dPlXpW6pnDL/ADyFPOKRNO0X740PgfhXndrE3mVSbSNMAk21OswfZbuPKvR7o0NeX7O2hlzAPHWJ9et/mNNiSdk8ja4CeEwWa6qiVCMLpHR5OLyFJIkiQ3OOFODikzZmPJvk5pzZE8RJP+angpWycghdCdjthuqTmmWUcDPWYL86Zdn4Dqrm4KAO8kCjlvBmBIqX6v3U73Jp0DmsDkK0MPRP6vU+Cs2s6i9cW2nMsYmOQ76z2AtzrYu6pvIXZ8g/d6sz2niNKg2/9HNy8gVL6AhgesrAGOWhNXtub/W8PiVsWRaup0YY5W4akQGEjgBpFW8Nv9hm9tbiHwDD1Bn3VzSyOzojj7oU8F9HeLtKQWstLM0q7fvMTzUdtVcZuXjBMWgfB1+Zr0JN7sE39OB4q4+VbfefB/8A3Fv1P6VN03ZROSPFd/rDdJhLEdYWwpHYzMFI9RTTa2Xi0sHqXWudJ1b/AEsrkyibeRuJkEzS7vsTc2raC8Ytx452b503Xb+KSyCFu5gWJY5GtMo4ZREg9s19t066iHT41i0/SV+nHbxRHBj6PK3HqJQu9lJrjx389jlMHjkVM1jFNKgnItoqZ6xgKsnjznxNQ7m4tRjcY+JlGXolUMjZxlDEdUEQ2oozZ21ZcW+j2gpdBlHXSQCFzAQdQSo8Y1oRuohZ8bfN1WK4hoNyW6To1A8Dw51LIlolKUVBv8SW/P7ngZep6Gm8WJOSq1Wnb68HH0sbVR8OEGVmdkhsuV4nMQwBM8KU8MFGItBrVhgtkwhNooeqx+2MKGuAE8etKrRT6SNoB7dmRbXO4uHomDZeqZUgRlYZuFJm0tqFnzW2ZRABiV4ciMx8ePE16/s/HLDgcZu278vL7no4oe7T149Dv5btvzvzOsBhA632yFsgHIEKCwEk5hry4HjyojZ2KufCh7NzLdhjlS4HupMsLYgyYEAqI1E1DstlGEu5i+ZnGSNEkR0mY5CDKkaBhEcDpR2zeVcVZK4hl6OzJdykJcCnSyFZNCcvMNqa9Fu4vbx7eX3ZaMLQqY/DWhccW1ITMcoYnMFnqhpA6wGh041lE7WAu3BnFpWBJM5uOpnUtJ1rVdSjgSppfkBxPerW0RztXB4BG/wtQjevaOONlvqaC3wAEqbzAkT1ictrSeEnvFL1vfeP6E/n/wBKmXfkc7H9/wD0r8mfUzOtdPEq7D2XtNiue50KDiCwus2stPESddZnWni/sy0VANpSOwqD8aE4TfDCkDMzISOBUmPNQaK294cIw0vp5mD6HWoym5DqGktYCwqaKAo7AIHoKtYjEW7a5nZVHafl2mlTaG9mpXDrJ++3DyX9fSl++z3Wz3XLt3nQdwFKrC0Mm0d7ZlcOn/aMPgv6+lKO8Vhr9p+kcsxjVjoOsNB2VdUcKobyOVw11gSMoDSND1WU6d+lPFboD2QotseSQmQkGCAdQYmOHZrUDbvXDwX0M13hMQGvM1vEX8rIHBypmzJmQhswI0BXXTj4Ua2cbjABMSfO2jRMnWAI1nnXQ8bXcl76+wmvgGDdFkbpS4VRGnWiCT2fpXpG6tkpYyNEoSpjgcpiR3aUPu2bv1nCi5dR1LuerbyEZbTRJzGeI5UwYNIa4B96fUAmlycI0HbJWFKV3cj7reo/Sm80UtWe6hjBkPMtkbrtnZ9T0d2IA45Msx769M2bs4LDvx5L2d57+7+RatWQOVTXCFBZiAAJJPACqNW7J6nVEVxZrg2amw2JsOARiLMn91nCn+9Vi7ZC2zcLJkXiwdSvGOIPaRTaGJqRR6Cl/fdCMKfH4Bj8qZrN5HEowYTGhnXs99L+/wBphT4n/A9JLgfH8yPKNjMxxKkkmFOpM+Gp8abXOlI9rEFHzKYMevdRK1vG40ZAfDSoZsUpO0deOSQed4qNDmdV7WA9SBQPFbwDLKoc08+EeVEdmYsnEYJSATeKPpplBciO/RJnvpYdPPkMs0VsEMWwfbgzTlV1HVBY6WwdAJJMmnnbO0bS2MVlu3B0dtujRhGuQkq2YDK3d3UlbY3cxy4x8TZVTLkqVdAwEQNHI105VBtHHbTFm5ZazdKXTNzqM8kxqXUkToO+vuMePHmxQ05EqS2tep8/1vs/F1C1u9afHavvYjxTruxvlawuEfDPYLM2frjKYz8IBjhSjcEHK4Kt3iPVT8q6sIFMtBHISDJ8uVepn6bF1MdE+OTtxTlCVxDm+O3rWMNvobPR5ZBEAFpgAwPA+tL3QNMZT6VOWcklUA/CoEeBAqFUPAtHcZ+FUhgWOKjHgbLkllnqlyMeDRfqltMyF3vaoMuqiQDcYOD7RYAEDQyDRXEYhxiMQ/7QLa6POQygJlChQGzmSOEnlxrMJbYjAWc1ph+0yHMq2yTOa65DdUhVcwIAJ0qricepOLfo7RN0wDlELLEk2SCsDQ/unQjtqkVqdVfP5yS/Rf8ApeK2SLOyrgW0g6BTodWFkkySZ69smNdJPCK1THsqyq2bQbZV66cinpOmZc4YBlbKLvVlSNPhWVw5Opjrfw9/GP8A3F0oVhXOKUlGCmDBg9/KqVjaqkhcrZjyEGreIxWQS1twO3q/+qvzrRJb0dmpcC+l8vaViTmRipPOG6y+moqWzi3BHXb8xqsbwFy6ADluCRPbOYe+a0rGuhpEotnpuyv2SeHwJq0DQ/Y9ybQ8/wBfnVlrtc5RljNVXbizhrw7bbfCuumHbVgYY30e1bAZihHEAaggak08Yu9hG1R5Bh7pUoRMqSvbpy+Aoph9qMpnN7qNYncjEICWsXBGpgBoHacpPZQv/ZA5E10y8yCRh203S2mkdUP/AHgB8qed2sSbtsueJPw0+VeePs/LeVeMqT6EV6FubaOQqBJmABzmall4VFMfLDVuwWIVRJOgFMgwUVNsvZ4siTBcjU8h/CP51qdta0I0JOVlB1CgsSABqSeAA7aStvbZN85VkWwdO1iP3j3dg/kQb2b22muvhxcCrbYqwMjMynWSdIB4Chti8riVdGH8LqT6AzXVjh3ZCT7HQFaYcABJOgAEns0HOunMCTTf9Huws5+t3BoP2QPMjQ3PAageZ7K2bIoIOOGpjTulsL6thwlwAuxztIBgtHV74jj2zVvamwsNiEKXbYZTyBZeRHFSDwNXgT21hNeY5N7nXpoRcX9Euzm1UXrZ/huk/wDiBqE4r6HbX9HinH40VvepWvTiK1NHXIZHzvv9uK+zrSXGvJcV3yCAytOVmkgyI6vbSrYvXrt2wqk9IMlq1k6rDrQgBEay3GvpHfXdxdoYfoHdkAYNKhZkcAcwMDwivP8AA/RU9i/bupezBGDQV1kagzOhmDwrox5ko0+SU4NysXVbbNgkOuJyjmydIPWGqZd78WnthD+JCp9xFew2bhiCVBHKaV333wLyrXYjQh0aOMdhFZZJPgdxS5E8b6X8oN7A3MhEqwD5WU8GXMkEEd9Vf95Nm3J6TCBe09Eg18bZmvV9m7xYS5CLibGUKAqrdVeAGmWQfKvLfpWsq+KGUBQba6rEGC4mRxrvjKcVcZM5XJeBDabZVzg/Rzw69xT/AP1kV2+62Eu628WfzW3+GWkK5hyKd93NiYO/ZU3bbq2oLo54g81aRwiuiPX9UlSm/V3+ptmtzTbi3F1t4lZ5SrJ71JqC5uzj1UqtwMpMlVunKT2lXgE1Y2hufdUj6piXnse4UkaRkKiJ4yD3VFZ2dthDC3MxH7pdSfRxMd9VXtjqIOm0ZQvgqnZW0P8AkjyWx8q1RE39sjToQe/IPkayq/8AO5fL++odMvFgVNjBBpmL6HpQxWNZhFHEHtPbyqTEKzGWJJ76g2XtoKttCYCqQSwJzMWYgg8lC5R5GiuG2hZe6bQZDwKvMKxMSNeBGvpXzs1ks6McoJC7j7UQ3YamVeymHaODQucOQA7IWU/uwJ1B7RHDuoPZS4iFGw9zOkycsWwBrmLeHrRWprgOqKlyNuw7v2I8vgKnuXNaFbAv/YBj2TwjTWDHhVZ9s27hgOsd5A9ZilhjcnQZzS3CWIxnIev6UPuXJqM3Qefpr7xVS/iZ0X1/SuuMVFbHNKTZYu491BRXaDxAY5fMcDTNufgFuWSzCTnI9y/rSWor0b6O1nDv/WH/AArS5LaMi3ht2LPTdMZJyZMpjKNZJGkzTHsrZ9qySbaAE8Tx+PDyraLVi0tSSCWi9ckVoLXRFMA+bN7v+m4n+uf/ABGg8Ub3yH/H4oD/AJz/ABoNFVQr5HX6L9gXcdiCpZhYQA3WkxrwROx21EjgJPZX0PZshVCqAFUAAAQABoAOwRXz9uPvTewtprVslQpLsCikHNOuup0EeVeh7M3/ACVU3F4gGVXt14ZtK4c7bkdWOPw2egxXJWlzD72KwlbbXBz6Ih2Xva2crjxgjvqbDb4YR/6XKf41ZffEVGh6YcM1wSahw+0bVz2LqN+FlPwNTMaxiNm7qjJqQmuawQTtqwvRu5HsqxnwBNfPN+yew89eXGa+l7qAgggEHQg8weVLmL3MwLz/AMMintSUP92K6MOVQ5J5Meo+f3HhXAEcNPCvZ8Z9G2Fb2Wur/bzf4waB4v6L/uX/AM9v5qRXQuogyTwyPNc57TRLAbfv2VyKVKzMFQdSNTPHl20wYr6OsUvsm0/9plPvB+NCcVuljE44djz6hVvgZ91OssH3E93Jdi3h987yjW2h8JHlqTRWxvtbIi5ZYdhRhp3gGAD30m38BdTR7Nxe9rbD3xFVy44aT4/LyotRluzJyiekpvkkaOY/jtgt5lXAPpWq81JPL4VlL7qI3vJBDZ7oLahrasIB1k+ccKj2stk5WW1lAIzhdAy8/A9/fXOGEKPAV1ecEEdoodzVsdY6yiBbuHe51NQGM5R/BIqbG7UxPQOGvo4cDN1QHjTKVIiQdATx7aq2F6kd0VVv24tgTOtEDQ6XGXocqMCOjRdO5ApHupBpu2XqjAknXSTPZpS6cLbOgvqDzDq6wewMoYHxMUmPlj5OERYPRxRlaEpayvEgwRqplYPf50WWqkiVa9G+jU/YXB/+T/ItecrXo30aWW6G4xBCl9D2woBjt1pZcBQ621qYLXCGuppAkk1grkVsGsY+fd8NqXRjcSmYMgvPlW4iXVXrfui4rZfKONBb+NV1I6G0rH99A6nv6ufoxPcg7oq7vmf+PxX9c/xoVdw7KAWUjxiefEcRwPHsNWEDO7yjLdj7qz49erP15hdtJPVyj5/pVfdlZW94D/NWY1Mt6z4Af3m/WuaSTmzpi6ghqtuRBBgjmOI7weVX22qzftlS93uCH/71CrnzJHdQ+2NKxjXLdFy2ww7cGvWj3hL6/wDlsB5tVmziLifssco7i1+16gqV99CIrgmtfkHcarO8ONX+nsv43LB/zBqIWt7cSBL4ZXHM220/u5qQGNVmxwRwJgnhGnvrKN8GvxPTbG/tg+0lxfDKw+M+6iFjerCPwvAfiBX3kRXie0nJusxYyY1nU6DUnnVa3i7gYwxgCO3Xjz8qdY7Qrkj6Fs422/sXEb8LA/A101eJjC4pQD0YbSeqyM3ojEg90Vibw37TZS11D2ZmH900uh9g2j2dlFRtaFeXYffi+ONwn8Sg+8a0Sw+/7fvLbbwJU++aDizbD02HFUsTsm0/tW0b8Sg/EUFsb72zxtsPwkMPlV6zvXhm4uV/Ep+U0N0Zogbc/Bkz9WtflFZREbcw5/prf5hWU2tg0+R4dBIHZWZaPW8BpXL7Prr1nNQETSq+L5eNHG2fQ3aGFKtbHafhFGMlZmti/sh9G8v591LuKX7Rh/EfjTJg7WSZ5il/HSLrEaGZoQ+ZhyfKiO1IYA6aijqUCthmObUxEnjHITTtuxsB8XcgSttfbfs/hH8R/wBasyKLW6O7jYt8zSLKnrNzY/cXv7Tyr1jD2VRQigKqiABwAHKocHhUtItu2oVVEADl2+J76nmpt2MSJXU1GDXS0DEsGuhUYNbrGPm/eozjMT/XXP8AGaGvdZtCzEDgCSQPAGnP6WFA2g0ACbaEwAJJzST2nvpMHhVUK+Q/ukNLn9n51Y28o6awe0gf3l/Wud3b5fpWIE9XgIHPlW94n1st91p9Cp+VS/Gyr+RB29iLdvR7iqSCVBmWy8QIB18a1avq4lWB8D8RSnma/ca8QYOiDsUVvIQZBIPdpUJwjdIvjtq2NZqJ6AptK6v70/iE++phtg809DU9DHCT0v7U/bW/L4miQ2kD+6fdQraVzNdtkfzBmqYlTEycE2Mudc/zyqLZ41WebAnzM0T2NhRfvsIkBWPjplUa9rMtMG08Fh7Vq0Ra67r1WGkEKCS0d1Nfwit/EBv9oKXKc6uriWIyk5l+6wDr6NIFLGD62JY9k/pTGlSnFRHhKzi9hLLcbZQ9ttjH5WkekVSv7GB9i8v9tSh9RI99EHqMmgpNBpMDXdh3wSVUHQQUdDwnkDPZUgweLHC3d9CaJVo0/vH3F0JcAxvrg/orn/dn9KyiWbvrVHX5IGl+IQStnn41qsokjYFBtt/t7Pn8RWVlNHkDL20dMsdp+FGr1hCsFVIjgQCPSsrKMQvhCRtu0qXIVQo7gB8K9n3JtgYKzAAlZMDiSTJPaaysqr4Jhp6xOVZWUrCdL/PuqUfz6VqsrAOlrf8APwrKysY8T+lf/p5/qrfwNJT1lZVVwLLkPbr+zd8vnXW3/YT8XyrKyo/jZX8CCGDUdEug9kfCoMQKysrk/Edq4KF0VwtarKqKTCqWK/aJ51lZTY+SeX5Rq3C/bt+H9T8QPSi+8o+xwv4f/LFZWUHwI/nETYn7S5/PM0xpWVlLm5HxfKafhULVlZUihlctWVlEBo1lZWURT//Z"
-
-  function onNavigate(){
-    handleDirectionsSubmit("", room.info.name)
-  }
-  useEffect(() => {
-    const handleClickOutside = (event) => {
-      if (panelRef.current && !panelRef.current.contains(event.target)) {
-        onClose();
-
-      }
-    };
-
-
-    if (isOpen) {
-      document.addEventListener("mousedown", handleClickOutside);
-    } else {
-      document.removeEventListener("mousedown", handleClickOutside);
-    }
-
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen, onClose]);
-
-
-
-  return (room !== null &&
-      <div ref={panelRef} className={`${styles.roomInfoPanel} ${isOpen ? styles.open : ""}`}>
-        <button className={styles.closeButton} onClick={onClose}>
-          ×
-        </button>
-        {room ? (
-            <>
-              <div className={styles.roomHeader}>
-                <h2>{room.info.name}</h2>
-                <h2>{room.info.type !== "" && "("+room.info.type+")"}</h2>
-              </div>
-              <div className={styles.floorInfo}>
-                <p>Floor: {floor}</p>
-              </div>
-              <div className={styles.roomImageWrapper}>
-                <img src={testImageUrl} alt={room.name} className={styles.roomImage} />
-              </div>
-              <div className={styles.roomDescription}>
-                <p>{room.info.description}</p>
-              </div>
-              <button className={styles.navigateButton} onClick={onNavigate}>
-                <img src={navigate_icon} alt="Navigate Icon" className={styles.navigateIcon} />
-                Navigate
-              </button>
-              <p style={{fontSize: '0.8em'}}><i>From Main Entrance</i></p>
-            </>
-        ) : (
-            <p>Select a room to see details.</p>
-        )}
-      </div>
-  );
-};
-
-export default RoomInfoPanel;
Index: imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.module.css
===================================================================
--- imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,103 +1,0 @@
-/* Panel styling */
-.roomInfoPanel {
-  position: fixed;
-  top: 0;
-  right: -350px;
-  width: 350px;
-  height: 100%;
-  background-color: #f7f9fc !important;
-  box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1);
-  transition: right 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);
-  border-top-left-radius: 20px;
-  border-bottom-left-radius: 20px;
-  overflow-y: auto;
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  z-index: 6;
-}
-
-.open {
-  right: 0;
-}
-
-/* Close button styling */
-.closeButton {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  font-size: 28px;
-  background: none;
-  border: none;
-  color: #555;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-.closeButton:hover {
-  color: #000 !important;
-}
-
-/* Room image styling */
-.roomImageWrapper {
-  width: 100%;
-  border-radius: 12px;
-  overflow: hidden;
-  margin: 20px 0;
-  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
-}
-
-.roomImage {
-  width: 100%;
-  height: auto;
-  display: block;
-  border-radius: 12px;
-}
-
-.roomHeader h2 {
-  color: #333;
-  font-size: 1.5rem;
-  font-weight: 600;
-  text-align: center;
-  margin: 0;
-  color: black !important;
-}
-
-.roomDescription p {
-  color: #666 !important;
-  line-height: 1.6;
-  text-align: center;
-}
-/* Floor information styling */
-.floorInfo p {
-  color: #666 !important;
-  font-size: 1.1rem;
-  margin-top: 10px;
-  text-align: center;
-}
-
-/* Navigate button styling */
-.navigateButton {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 10px 20px;
-  margin-top: 20px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 8px;
-  cursor: pointer;
-  transition: background-color 0.3s;
-}
-
-.navigateButton:hover {
-  background-color: #0056b3;
-}
-
-.navigateIcon {
-  width: 20px;
-  height: 20px;
-}
-
Index: imaps-frontend/src/components/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/RoomModal/RoomModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/RoomModal/RoomModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from "react";
+import styles from "./RoomModal.module.css";
+import { Ring } from "konva/lib/shapes/Ring";
+
+export default function RoomModal(props) {
+  const [modal, setModal] = useState(false);
+  const [room, setRoom] = useState(null);
+  const [formData, setFormData] = useState({
+    name: "",
+    type: "",
+    description: "",
+  });
+  const [roomTypes, setRoomTypes] = useState([]);
+
+  const toggleModal = () => {
+    if(modal) {
+      room.info = formData;
+      props.map.updateRoomNames();
+    }
+    setModal(!modal);
+  };
+
+  const saveDetails = () => {
+    if (room) {
+      room.info = formData;
+      toggleModal();
+      console.log(room.info);
+    }
+  };
+  // impl da sa gledat dali ti e zacuvana formava
+
+  const handleInputChange = (e) => {
+    console.log(room.info)
+    const { name, value, type, checked } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: type === "checkbox" ? checked : value,
+    }));
+    room.info = formData;
+  };
+
+  useEffect(() => {
+    const openModalHandler = (event) => {
+      const roomObj = event.detail.room;
+      console.log(roomObj, "ROOMOBJ OTV")
+      setRoom(roomObj);
+      setFormData({
+        name: roomObj.info.name,
+        type: roomObj.info.type,
+        description: roomObj.info.description,
+      });
+      setRoomTypes(event.detail.map.getRoomTypes());
+      toggleModal(true);
+    };
+
+    window.addEventListener("openRoomModalEvent", openModalHandler);
+
+    return () => {
+      window.removeEventListener("openRoomModalEvent", openModalHandler);
+    };
+  }, []);
+
+  if (modal) {
+    document.body.classList.add(styles.activeModal);
+  } else {
+    document.body.classList.remove(styles.activeModal);
+  }
+
+  return (
+    <>
+      {/* <button onClick={toggleModal} className={styles.btnModal}>
+        RoomModal
+      </button> */}
+
+      {modal && (
+        <div className={styles.modal}>
+          <div onClick={toggleModal} className={styles.overlay}></div>
+          <div className={styles.modalContent}>
+            <h2>Enter Room Details</h2>
+            <form className={styles.form}>
+              <div className={styles.formGroup}>
+                <label htmlFor="name">Name:</label>
+                <input
+                  type="text"
+                  id="name"
+                  name="name"
+                  value={formData.name}
+                  onChange={handleInputChange}
+                  required
+                />
+              </div>
+              <div className={styles.formGroup}>
+                <label htmlFor="type">Type:</label>
+                <select id="type" name="type" onChange={handleInputChange} value={formData.type} required>
+                  <option value="">Select Room Type</option>
+                  {roomTypes.map((type, index) => (
+                    <option key={index} value={type}>
+                      {type}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div className={styles.formGroup}>
+                <label htmlFor="description">Description:</label>
+                <textarea
+                  id="description"
+                  name="description"
+                  value={formData.description}
+                  onChange={handleInputChange}
+                  rows="3"
+                />
+              </div>
+              <div className={styles.formGroup}>
+                <button
+                  type="button"
+                  id="submit-details"
+                  onClick={saveDetails}
+                  className={styles.submitButton}
+                >
+                  Save
+                </button>
+              </div>
+            </form>
+            <button className={styles.closeModal} onClick={toggleModal}>
+              CLOSE
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
Index: imaps-frontend/src/components/RoomModal/RoomModal.module.css
===================================================================
--- imaps-frontend/src/components/RoomModal/RoomModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/RoomModal/RoomModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,121 @@
+/* Modal.module.css */
+
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999;
+}
+
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the heading */
+}
+
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+.formGroup input[type="checkbox"] {
+  width: auto;
+  margin-right: 10px;
+}
+
+.submitButton {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
Index: imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.jsx
===================================================================
--- imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,107 @@
+import React, { useState, useEffect } from "react";
+import styles from "./RoomTypeModal.module.css";
+
+export default function RoomTypeModal(args) {
+  const [modal, setModal] = useState(false);
+  const [roomTypes, setRoomTypes] = useState([]);
+  const [formData, setFormData] = useState({
+    name: "",
+    type: "",
+    description: "",
+  });
+
+  const toggleModal = () => {
+    setModal(!modal);
+  };
+
+  // Add new room type to the list
+  const addRoomType = () => {
+    if (!formData.type || roomTypes.includes(formData.type)) return; // Prevent empty or duplicate room types
+    setRoomTypes((prevTypes) => [...prevTypes, formData.type]);
+    setFormData({ ...formData, type: "" }); // Reset type input after adding
+    args.map.addRoomType(formData.type);
+    console.log(args.map.roomTypes);
+  };
+
+  // Remove room type from the list
+  const removeRoomType = (typeToRemove) => {
+    setRoomTypes((prevTypes) => prevTypes.filter((type) => type !== typeToRemove));
+  };
+
+  // Handle form input changes
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setFormData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  // Load room types from local storage on mount
+  // useEffect(() => {
+  //   //const storedRoomTypes = JSON.parse(localStorage.getItem("roomTypes")) || [];
+  //   if(args && args.map){
+  //     setRoomTypes(args.map.roomTypes);
+  //   }
+
+  // }, [args]);
+
+  // Save room types to local storage whenever they change
+  // useEffect(() => {
+  //   localStorage.setItem("roomTypes", JSON.stringify(roomTypes));
+  // }, [roomTypes]);
+
+  return (
+    <>
+      <button onClick={toggleModal} className={styles.btnModal}>
+        Room Types
+      </button>
+
+      {modal && (
+        <div className={styles.modal}>
+          <div onClick={toggleModal} className={styles.overlay}></div>
+          <div className={styles.modalContent}>
+            <h2>Manage Room Types</h2>
+
+            <form className={styles.form}>
+              <div className={styles.formGroup}>
+                <label htmlFor="type">Add New Room Type:</label>
+                <input
+                  type="text"
+                  id="type"
+                  name="type"
+                  value={formData.type}
+                  onChange={handleInputChange}
+                  placeholder="Enter a new room type (e.g., Office, Classroom)"
+                />
+                <button type="button" className={styles.addButton} onClick={addRoomType}>
+                  Add Type
+                </button>
+              </div>
+            </form>
+
+            <h3>Available Room Types:</h3>
+            <ul className={styles.roomTypeList}>
+              {roomTypes.length > 0 ? (
+                roomTypes.map((type, index) => (
+                  <li key={index} className={styles.roomTypeItem}>
+                    {type}
+                    <button className={styles.removeButton} onClick={() => removeRoomType(type)}>
+                      Remove
+                    </button>
+                  </li>
+                ))
+              ) : (
+                <li>No room types available</li>
+              )}
+            </ul>
+
+            <button className={styles.closeModal} onClick={toggleModal}>
+              CLOSE
+            </button>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
Index: imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.module.css
===================================================================
--- imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/components/RoomTypeModal/RoomTypeModal.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,167 @@
+/* Active modal: Disable scrolling when the modal is open */
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+/* Modal and overlay styles */
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+/* Overlay: Dark background with optional blur */
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999; /* Ensure the overlay appears below the modal */
+}
+
+/* Modal content: Centered and styled */
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000; /* Ensure the modal appears above the overlay */
+}
+
+/* Modal heading */
+h2,
+h3 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the headings */
+}
+
+/* Button for opening the modal */
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #aa5c5c;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 10px 0;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #994f4f;
+}
+
+/* Close button inside the modal */
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+/* Form styles */
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Form group: margin between form elements */
+.formGroup {
+  margin-bottom: 15px;
+}
+
+/* Form labels */
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+/* Input, select, and textarea styles */
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+/* Checkbox style adjustment */
+.formGroup input[type="checkbox"] {
+  width: auto;
+  margin-right: 10px;
+}
+
+/* Add button for adding room types */
+.addButton {
+  background-color: #28a745;
+  color: white;
+  padding: 8px 15px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin-top: 10px;
+}
+
+.addButton:hover {
+  background-color: #218838;
+}
+
+/* Dynamic room type list */
+.roomTypeList {
+  list-style-type: none;
+  padding: 0;
+  margin-top: 15px;
+}
+
+/* Individual room type item */
+.roomTypeItem {
+  background-color: #444;
+  padding: 8px;
+  margin-bottom: 5px;
+  color: white;
+  border-radius: 5px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Remove button */
+.removeButton {
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  padding: 5px 10px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}
Index: imaps-frontend/src/components/SaveMap/SaveMap.jsx
===================================================================
--- imaps-frontend/src/components/SaveMap/SaveMap.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SaveMap/SaveMap.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -2,5 +2,4 @@
 import HttpService from '../../scripts/net/HttpService';
 import styles from './SaveMap.module.css';
-import triggerMapSave from "../../scripts/util/triggerMapSave.js";
 
 const SaveMap = ({submitHandler}) => {
@@ -9,8 +8,5 @@
     const handleSubmit = (event) => {
         event.preventDefault();
-        // submitHandler();
-        // const mapSaveEvent = new CustomEvent("mapsave",{});
-        // window.dispatchEvent(mapSaveEvent)
-        triggerMapSave();
+        submitHandler(name);
     };
 
@@ -19,4 +15,16 @@
         <div className={styles.saveMapContainer}>
             <form onSubmit={handleSubmit} className={styles.saveMapForm}>
+                <div>
+                    <label htmlFor="name">Map Name: </label>
+                    <input 
+                        type="text" 
+                        id="name" 
+                        value={name} 
+                        onChange={(e) => setName(e.target.value)} 
+                        placeholder="Enter map name" 
+                        required
+                        className={styles.saveMapInput}
+                    />
+                </div>
                 <div>
                     <button type="submit" className={styles.saveMapButton}>Save Map</button>
Index: imaps-frontend/src/components/SaveMap/SaveMap.module.css
===================================================================
--- imaps-frontend/src/components/SaveMap/SaveMap.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SaveMap/SaveMap.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -21,30 +21,16 @@
 
 .saveMapButton {
-  width: 100%;
-  height: 50px;
-  background-color: #e67e22 !important;
-  color: #ffffff !important;
+  background-color: #e67e22;
+  color: white;
   border: none;
-  border-radius: 8px;
-  font-size: 20px;
-  font-weight: bold;
+  border-radius: 5px;
   cursor: pointer;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s, transform 0.2s, box-shadow 0.3s;
-  appearance: none;
-  -webkit-appearance: none;
+  width: 8vw;
+  height: 2vw;
+  text-align: center;
 }
 
 .saveMapButton:hover {
-  background-color: #d2691e !important;
-  transform: scale(1.05);
-  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
-}
-
-.saveMapButton:active {
-  background-color: #b35418 !important;
+  background-color: #b35418;
   transform: scale(0.98);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
Index: imaps-frontend/src/components/SearchBar/SearchBar.jsx
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,3 @@
-import React, { useState, useEffect, useRef } from "react";
-import ReactDOM from "react-dom";
+import React, { useState } from "react";
 import searchIcon from "../../assets/search_icon.png";
 import routeIcon from "../../assets/route_icon.png";
@@ -6,194 +5,93 @@
 import styles from "./SearchBar.module.css";
 
-function SearchBar({
-                     map,
-                     handleDirectionsSubmit,
-                     setIsPanelOpen,
-                     setSelectedRoom,
-                     availableShapes,
-                     handleFloorChange,
-                   }) {
+function SearchBar(props) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [from, setFrom] = useState("");
   const [to, setTo] = useState("");
-  const [availableOptions, setAvailableOptions] = useState([]);
-  const [filteredOptions, setFilteredOptions] = useState([]);
-  const [dropdownVisible, setDropdownVisible] = useState(false);
-  const [inputFieldType, setInputFieldType] = useState("");
 
-  const wrapperRef = useRef(null);
-  const dropdownContainerRef = useRef(null);
-  const activeInputRef = useRef(null); // Track the currently focused input field
-
-  const toggleExpanded = () => setIsExpanded(!isExpanded);
-
-  const handleClickOutside = (event) => {
-    if (
-        wrapperRef.current &&
-        !wrapperRef.current.contains(event.target) &&
-        dropdownContainerRef.current &&
-        !dropdownContainerRef.current.contains(event.target)
-    ) {
-      setDropdownVisible(false);
-    }
+  const toggleExpanded = () => {
+    setIsExpanded(!isExpanded);
   };
 
-  useEffect(() => {
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, []);
+  function searchRoom(){
+    props.map.search();
 
-  const searchRoom = () => {
-    const foundRoom = availableShapes.find((sh) => sh.info.name === from);
-    if (foundRoom && foundRoom.floorNum !== map.floorNum) {
-      handleFloorChange(foundRoom.floorNum);
-    }
-    map.highlightShape(from);
-    setSelectedRoom(foundRoom);
-    setIsPanelOpen(true);
-  };
+  }
 
-  const handleInputFocus = (field, inputRef) => {
-    if (availableOptions.length === 0 && map) {
-      setAvailableOptions(
-          availableShapes
-              .filter((sh) => sh.className === "RenderedRoom")
-              .map((shape) => shape.info.name)
-      );
-    }
-    setInputFieldType(field);
-    setDropdownVisible(true);
-    activeInputRef.current = inputRef; // Set the active input ref
-  };
+  const handleDirectionsSubmit = () => {
+    console.log(`From: ${from}, To: ${to}`);
+    const url = new URL('http://localhost:8080/api/public/navigate');
+    url.searchParams.append('from', from);
+    url.searchParams.append('to', to);
 
-  const handleInputChange = (setter) => (event) => {
-    const value = event.target.value;
-    setter(value);
-    setDropdownVisible(true);
-
-    const filtered = availableOptions.filter((option) =>
-        option.toLowerCase().includes(value.toLowerCase())
-    );
-    setFilteredOptions(filtered);
-  };
-
-  const handleOptionClick = (option) => {
-    if (inputFieldType === "from") {
-      setFrom(option);
-    } else if (inputFieldType === "to") {
-      setTo(option);
-    }
-    setDropdownVisible(false);
-  };
-
-  const renderDropdown = () => {
-    if (!dropdownVisible || filteredOptions.length === 0) return null;
-
-    const position = activeInputRef.current?.getBoundingClientRect() || {
-      top: 0,
-      left: 0,
-      width: 0,
-    };
-
-    return ReactDOM.createPortal(
-        <ul
-            ref={dropdownContainerRef}
-            className={styles.dropdown}
-            style={{
-              position: "absolute",
-              top: position.top + position.height + window.scrollY,
-              left: position.left + window.scrollX,
-              width: position.width,
-            }}
-        >
-          {filteredOptions.map((option, index) => (
-              <li
-                  key={index}
-                  className={styles.dropdownItem}
-                  onClick={() => handleOptionClick(option)}
-              >
-                {option}
-              </li>
-          ))}
-        </ul>,
-        document.body
-    );
+    fetch(url)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok');
+                }
+                return response.json();
+            })
+            .then(data => {
+                console.log('Success:', data);
+                const points = data.map(item => item.coordinates);
+                props.map.drawRoute(points);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
   };
 
   return (
-      <div className={styles.wrapper} ref={wrapperRef}>
-        {!isExpanded ? (
-            <div className={styles.searchBar}>
-              <input
-                  type="search"
-                  className={styles.inputField}
-                  placeholder="Search location"
-                  aria-label="Search"
-                  onFocus={(e) => handleInputFocus("from", e.target)}
-                  onChange={handleInputChange(setFrom)}
-                  value={from}
-              />
-              {renderDropdown()}
-              <div className={styles.buttons}>
-                <button
-                    type="button"
-                    className={styles.iconButton}
-                    onClick={searchRoom}
-                >
-                  <img src={searchIcon} alt="Search Icon" />
-                </button>
-                <button
-                    type="button"
-                    className={styles.iconButton}
-                    onClick={toggleExpanded}
-                >
-                  <img src={routeIcon} alt="Route Icon" />
-                </button>
-              </div>
-            </div>
-        ) : (
-            <div className={styles.directionsContainer}>
-              <div className={styles.directionsInputs}>
-                <input
-                    type="text"
-                    placeholder="From"
-                    aria-label="From"
-                    value={from}
-                    onFocus={(e) => handleInputFocus("from", e.target)}
-                    onChange={handleInputChange(setFrom)}
-                    className={styles.inputField}
-                />
-                <input
-                    type="text"
-                    placeholder="To"
-                    aria-label="To"
-                    value={to}
-                    onFocus={(e) => handleInputFocus("to", e.target)}
-                    onChange={handleInputChange(setTo)}
-                    className={styles.inputField}
-                />
-                {renderDropdown()}
-              </div>
-              <div className={styles.buttons}>
-                <button
-                    type="button"
-                    className={styles.iconButton}
-                    onClick={() => handleDirectionsSubmit(from, to)}
-                >
-                  <img src={searchIcon} alt="Submit Directions" />
-                </button>
-                <button
-                    type="button"
-                    className={styles.iconButton}
-                    onClick={toggleExpanded}
-                >
-                  <img src={closeIcon} alt="Close Icon" />
-                </button>
-              </div>
-            </div>
-        )}
-      </div>
+    <div className={styles.wrapper}>
+      {/* Regular search bar */}
+      {!isExpanded ? (
+        <div className={styles.searchBar}>
+          <input
+            type="search"
+            className={styles.inputField}
+            placeholder="Search location"
+            aria-label="Search"
+          />
+          <div className={styles.buttons}>
+            <button type="button" className={styles.iconButton} onClick={searchRoom}>
+              <img src={searchIcon} alt="Search Icon" />
+            </button>
+            <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+              <img src={routeIcon} alt="Route Icon" />
+            </button>
+          </div>
+        </div>
+      ) : (
+        /* Expanded view for directions */
+        <div className={styles.directionsContainer}>
+          <div className={styles.directionsInputs}>
+            <input
+              type="text"
+              placeholder="From"
+              aria-label="From"
+              value={from}
+              onChange={(e) => setFrom(e.target.value)}
+              className={styles.inputField}
+            />
+            <input
+              type="text"
+              placeholder="To"
+              aria-label="To"
+              value={to}
+              onChange={(e) => setTo(e.target.value)}
+              className={styles.inputField}
+            />
+          </div>
+          <div className={styles.buttons}>
+            <button type="button" className={styles.iconButton} onClick={handleDirectionsSubmit}>
+              <img src={searchIcon} alt="Submit Directions" />
+            </button>
+            <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+              <img src={closeIcon} alt="Close Icon" />
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
   );
 }
Index: imaps-frontend/src/components/SearchBar/SearchBar.module.css
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,19 +1,15 @@
 .wrapper {
-  position: relative;
   display: flex;
   justify-content: center;
-  margin: 0 auto;
-  z-index: 105;
+  margin: 0px auto;
   max-width: 600px;
   width: 100%;
-  padding: 10px;
 }
 
 .searchBar,
 .directionsContainer {
-  position: relative;
   display: flex;
-  align-items: center;
-  /*width: 100%;*/
+  align-items: end; /* Ensure all items remain aligned in the center */
+  width: 100%;
   background-color: white;
   padding: 10px;
@@ -21,10 +17,10 @@
   border-radius: 30px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  flex-wrap: nowrap;
+  flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
 }
 
 .inputField {
   flex-grow: 1;
-  /*padding: 10px 15px;*/
+  padding: 10px 15px;
   font-size: 16px;
   border: 1px solid #ddd;
@@ -32,34 +28,6 @@
   outline: none;
   margin-right: 10px;
-  min-width: 0;
-  margin-top: 12px;
+  min-width: 0; /* Ensure the input field remains flexible */
 }
-
-.dropdown {
-  position: absolute; /* Position absolute to detach from wrapper flow */
-  top: 100%; /* Place below the search bar */
-  left: 0;
-  background-color: white;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  width: 100%; /* Match the search bar width */
-  max-height: 200px;
-  overflow-y: auto;
-  z-index: 9999; /* Highest level to ensure it's above everything */
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-
-.dropdownItem {
-  padding: 10px;
-  cursor: pointer;
-  transition: background-color 0.3s ease, color 0.3s ease;
-}
-
-.dropdownItem:hover {
-  background-color: #007bff; /* Highlight color */
-  color: white; /* Ensure text is readable */
-}
-
 
 .buttons {
@@ -82,4 +50,5 @@
   font-size: 16px;
   transition: background-color 0.3s ease;
+  width: auto;
 }
 
@@ -93,5 +62,7 @@
 }
 
+/* Expanded view for the direction inputs */
 .directionsContainer {
+  flex-direction: column;
   gap: 10px;
 }
@@ -102,2 +73,39 @@
   gap: 10px;
 }
+
+.directionsInputs .inputField {
+  flex: 1;
+}
+
+/* Media query for responsive design */
+@media (max-width: 768px) {
+  .wrapper {
+    max-width: 100%;
+    padding: 10px;
+  }
+
+  /* Keep buttons and input fields inline */
+  .searchBar,
+  .directionsContainer {
+    flex-direction: row; /* Keep items in a row */
+    align-items: center; /* Keep buttons and inputs on the same line */
+    flex-wrap: nowrap; /* Prevent items from wrapping */
+    padding: 8px;
+  }
+
+  .inputField {
+    width: 100%;
+    flex-grow: 1;
+    margin-right: 10px;
+  }
+
+  .buttons {
+    width: auto;
+    gap: 5px;
+  }
+
+  .iconButton {
+    width: auto;
+    padding: 10px;
+  }
+}
Index: imaps-frontend/src/components/SideBar/SideBar.jsx
===================================================================
--- imaps-frontend/src/components/SideBar/SideBar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SideBar/SideBar.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -24,8 +24,8 @@
             </li>
             <li>
-              <Link to="/Maps">Browse Maps</Link>
+              <Link to="/Maps">Maps</Link>
             </li>
             <li>
-              <Link to="/myMaps">My Maps</Link>
+              <Link to="/Maps/FinkiMaps/Draw">Draw</Link>
             </li>
           </ul>
Index: imaps-frontend/src/components/SideBar/SideBar.module.css
===================================================================
--- imaps-frontend/src/components/SideBar/SideBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/SideBar/SideBar.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -90,7 +90,7 @@
   top: 0;
   left: 0;
-  width: 100vw;
-  height: 100vh;
+  width: 100%;
+  height: 100%;
   background-color: rgba(0, 0, 0, 0.4);
-  z-index: 100;
+  z-index: 900;
 }
Index: imaps-frontend/src/components/Toast/Toast.jsx
===================================================================
--- imaps-frontend/src/components/Toast/Toast.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,18 +1,0 @@
-import React from "react";
-import PropTypes from "prop-types";
-import styles from "./Toast.module.css";
-
-const Toast = ({ message, type, onClose }) => {
-    return (
-        <div
-            className={`${styles.toast} ${type === 1 ? styles.success : styles.error}`}
-            onClick={onClose}
-        >
-            {message}
-        </div>
-    );
-};
-
-
-
-export default Toast;
Index: imaps-frontend/src/components/Toast/Toast.module.css
===================================================================
--- imaps-frontend/src/components/Toast/Toast.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,25 +1,0 @@
-.toast {
-    position: fixed;
-    bottom: 20px;
-    right: 20px;
-    padding: 10px 20px;
-    border-radius: 5px;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
-    cursor: pointer;
-    animation: fadeInOut 3s ease-in-out;
-    color: white;
-    font-size: 16px;
-}
-
-.toast.success {
-    background-color: #4caf50; /* Green for success */
-}
-
-.toast.error {
-    background-color: #f44336; /* Red for error */
-}
-
-@keyframes fadeInOut {
-    0%, 100% { opacity: 0; }
-    10%, 90% { opacity: 1; }
-}
Index: imaps-frontend/src/index.css
===================================================================
--- imaps-frontend/src/index.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/index.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,2 @@
-
-
 html,
 body,
Index: imaps-frontend/src/main.jsx
===================================================================
--- imaps-frontend/src/main.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/main.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -4,9 +4,4 @@
 import './index.css'
 
-if (typeof GestureEvent === "undefined") {
-    window.GestureEvent = class GestureEvent {};
-}
-
-
 ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
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;
Index: imaps-frontend/src/scripts/base/MapNode.js
===================================================================
--- imaps-frontend/src/scripts/base/MapNode.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,99 +1,0 @@
-import MapShape from "./MapShape.js";
-import Konva from "konva";
-
-export default class MapNode extends MapShape{
-
-    constructor(config, layer, blockSize, snap) {
-        if (new.target === MapNode) {
-            throw new Error("Cannot instantiate abstract class NodeShape directly.");
-        }
-
-        super(config,layer,blockSize,snap);
-        this.connectionLines = [];
-
-        this.connLine = new Konva.Line({
-            stroke: "rgba(245,37,37,0.85)",
-            dash: [2,3],
-            strokeWidth: 2,
-            lineCap: 'round',
-            lineJoin: 'miter',
-            opacity: 0.8
-        });
-        this.connLine.cache();
-
-        this.on("dragmove",() => {
-            this.connectionLines.forEach(lineWrapper => {
-                console.log("other",lineWrapper.otherShape)
-                let updatedPoints = [this.x(),this.y(),lineWrapper.otherShape.x(),lineWrapper.otherShape.y()]
-                lineWrapper.line.points(updatedPoints);
-            })
-        })
-    }
-
-    connect(node,draw = true){
-
-
-        if(!node.info.selectedPins.includes(this.info.name)){
-            console.log("vleze conn 2ds")
-            node.info.selectedPins.push(this.info.name);
-        }
-
-        if(!draw) return
-
-        const line = this.connLine.clone({
-            points: [this.x(),this.y(),node.x(),node.y()]
-        });
-
-        let lineWrapper = {
-            line: line,
-            otherShape: node
-        };
-
-        this.connectionLines.push(lineWrapper);
-
-        let lineWrapperSend = {
-            line: line,
-            otherShape: this
-        };
-
-        node.addLineReference(lineWrapperSend);
-
-        this.layer.add(lineWrapper.line);
-    }
-    
-    
-
-    addLineReference(line){
-        this.connectionLines.push(line);
-    }
-
-    removeLineWrapper(target){
-        this.connectionLines = this.connectionLines.filter(lineWrapper => lineWrapper.otherShape !== target);
-    }
-
-    removeConnection(shape){
-        this.info.selectedPins = this.info.selectedPins.filter(sl => sl !== shape.info.name)
-    }
-
-
-    removeConnectionLine(target){
-        this.connectionLines.forEach(lineWrapper => {
-            if (lineWrapper.otherShape === target){
-                lineWrapper.line.remove();
-                target.removeLineWrapper(this);
-                this.removeLineWrapper(target);
-            }
-        })
-    }
-
-
-    destroy() {
-        super.destroy();
-        this.connectionLines.forEach(lineWrapper => {
-            lineWrapper.line.remove()
-            lineWrapper.otherShape.removeLineWrapper(this);
-        });
-    }
-
-
-}
Index: imaps-frontend/src/scripts/base/MapShape.js
===================================================================
--- imaps-frontend/src/scripts/base/MapShape.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,156 +1,0 @@
-import Konva from "konva";
-
-export default class MapShape extends Konva.Shape {
-    constructor(config, layer, blockSize, snap) {
-        if (new.target === MapShape) {
-            throw new Error("Cannot instantiate abstract class BaseShape directly.");
-        }
-
-        super(config);
-        this.layer = layer;
-        this.blockSize = blockSize;
-        this._type = "";
-        this.snappable = snap;
-        this._info = {};
-        this.eventName = "";
-        this.infoText = null;
-        this.floorNum;
-
-        this.shadowForStrokeEnabled(false);
-        this.on("mouseover", () => (document.body.style.cursor = "pointer"));
-        this.on("mouseout", () => (document.body.style.cursor = "default"));
-        this.on("click", (e) => {
-            if(e.evt.altKey){
-                this.moveToTop();
-                this.getLayer()
-                    .find("Transformer")
-                    .forEach((t) => t.moveToTop());
-            }
-
-        });
-
-        if (snap) {
-            this.on("dragend", this.snapToGrid.bind(this));
-            this.on('dblclick', this.snapToGrid.bind(this));
-        }
-
-        this.on("transform", () => {
-            const scaleX = this.scaleX();
-            const scaleY = this.scaleY();
-            this.strokeWidth(1 / Math.max(scaleX, scaleY));
-        });
-
-
-        this.on('dragmove', () => {
-            if (this.infoText) {
-                this.updateTextPosition();
-            }
-        });
-
-    }
-
-    loadInfo(attrs) {
-        console.log("Abstract function");
-    }
-
-
-    initText() {
-        this.textOffsetX = 0;
-        this.textOffsetY = -30;
-        this.infoText = new Konva.Text({
-            x: this.x() + this.textOffsetX,
-            y: this.y() + this.textOffsetY,
-            text: this._info.name,
-            fontSize: 12,
-            fontFamily: 'Exo',
-            fill: 'white',
-        });
-    }
-
-    updateTextPosition() {
-        if (this.infoText) {
-            this.infoText.x(this.x() + this.textOffsetX);
-            this.infoText.y(this.y() + this.textOffsetY);
-        }
-    }
-
-    displayName(layer) {
-        if (this.infoText) {
-            this.infoText.text(this._info.name);
-            layer.add(this.infoText);
-        }
-    }
-
-
-    destroy() {
-        super.destroy();
-        if (this.infoText !== null) {
-            this.infoText.remove()
-            console.log("cleared text")
-        }
-    }
-
-    setInfo(infoObj){
-        this.info = infoObj;
-    }
-
-    load(){
-        console.log("Abstract function")
-    }
-
-    _sceneFunc(context) {
-        let width = this.width();
-        let height = this.height();
-        context.beginPath();
-        context.rect(0, 0, width, height)
-        context.closePath();
-        context.fillStrokeShape(this);
-    }
-
-    clearText() {
-        if (this.infoText !== null) {
-            this.infoText.remove()
-            console.log("cleared text")
-        }
-
-    }
-
-    updateText(shapeName){
-            this.infoText.text = shapeName;
-            console.log("Updated text to : " + shapeName)
-    }
-
-    snapToGrid() {
-        this.position({
-            x: Math.round(this.x() / this.blockSize) * this.blockSize,
-            y: Math.round(this.y() / this.blockSize) * this.blockSize,
-        });
-
-    }
-
-    saveShapeDetails() {
-        console.log("This shape does not contain information");
-    }
-
-    onPlace(){
-        //this.snapToGrid();
-    }
-
-
-    get info() {
-        return this._info;
-    }
-
-    set info(formData) {
-        this._info = formData;
-    }
-
-    get type() {
-        return this._type;
-    }
-
-    set type(type) {
-        this._type = type
-    }
-
-}
Index: imaps-frontend/src/scripts/base/RenderedMapShape.js
===================================================================
--- imaps-frontend/src/scripts/base/RenderedMapShape.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,89 +1,0 @@
-import Konva from "konva";
-import config from "../net/netconfig.js";
-
-export default class RenderedMapShape extends Konva.Shape {
-  constructor(config) {
-    if (new.target === RenderedMapShape) {
-      throw new Error("Cannot instantiate abstract class RenderedMapShape directly.");
-    }
-
-    super(config);
-
-    this.info = {
-      name: "",
-      description: "",
-      type: "",
-    };
-    this.class = "Rect";
-    this.infoText = null;
-    this.textOffsetX = 0;
-    this.textOffsetY = 0;
-
-    this.eventName = "";
-
-  }
-
-  initText() {
-    const rectWidth = this.width();
-    const rectHeight = this.height();
-
-    this.infoText = new Konva.Text({
-      x: this.x(),
-      y: this.y(),
-      text: this.info.name || "no name",
-      fontSize: 10,
-      fontFamily: "Exo",
-      fill: "black",
-      align: "center",
-      verticalAlign: "middle",
-    });
-
-    this.infoText.offsetX(this.infoText.width() / 2);
-    this.infoText.offsetY(this.infoText.height() / 2);
-
-    this.infoText.x(this.x() + rectWidth / 2);
-    this.infoText.y(this.y() + rectHeight / 2);
-    this.infoText.rotation(this.rotation());
-  }
-
-
-  updateTextPosition() {
-    if (this.infoText) {
-      this.infoText.x(this.x() + this.textOffsetX);
-      this.infoText.y(this.y() + this.textOffsetY);
-    }
-  }
-
-  clearText() {
-    if (this.infoText !== null) {
-      this.infoText.remove()
-      console.log("cleared text")
-    }
-
-  }
-  _sceneFunc(context) {
-
-    let width = this.width();
-    let height = this.height();
-
-    const cornerRadius = this.attrs.cornerRadius;
-
-    context.beginPath();
-
-    if(!cornerRadius){
-      context.rect(0, 0, width, height)
-    } else {
-      Konva.Util.drawRoundedRectPath(context,width,height,cornerRadius)
-    }
-
-    context.closePath();
-    context.fillStrokeShape(this);
-  }
-
-
-  displayName(layer) {
-    if (this.infoText != null) {
-      layer.add(this.infoText);
-    }
-  }
-}
Index: imaps-frontend/src/scripts/main/MapBuilder.js
===================================================================
--- imaps-frontend/src/scripts/main/MapBuilder.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/main/MapBuilder.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -2,625 +2,565 @@
 import Konva from "konva";
 import HttpService from "../net/HttpService.js";
-import {zoomStage} from "../util/zoomStage.js";
-import {addEventHandling} from "../util/addEventHandling.js";
-import MapNode from "../base/MapNode.js";
-import {json} from "react-router-dom";
-import log from "eslint-plugin-react/lib/util/log.js";
-import ShapeRegistry from "../util/ShapeRegistry.js";
-import shapeRegistry from "../util/ShapeRegistry.js";
-import triggerMapSave from "../util/triggerMapSave.js";
+import { zoomStage } from "../util/zoomStage.js";
 
 export class MapBuilder {
-    constructor(containerId,floorNum,mapName) {
-        this.container = document.getElementById(containerId);
-        this.stage = new Konva.Stage({
-            container: containerId,
-            width: this.container.clientWidth,
-            height: this.container.clientHeight,
+  constructor(containerId) {
+    this.container = document.getElementById(containerId);
+    this.stage = new Konva.Stage({
+      container: containerId,
+      width: this.container.clientWidth,
+      height: this.container.clientHeight,
+    });
+
+    // TODO AKO DRAGNIT NEKOJ OD POCETOK NA STAGE POZICIIVE KE SA ZEZNAT
+    // TODO jwt vo cookie
+    // TODO placed shape i mouseMoveHandler da ne callback ( da ne vrakjat funkcija)
+
+    this.gridLayer = new Konva.Layer();
+    this.mainLayer = new Konva.Layer();
+    this.dragLayer = new Konva.Layer();
+    this.infoPinLayer = new Konva.Layer();
+    this.textLayer = new Konva.Layer();
+    this.gridLayer.listening(false);
+
+    this.originalWidth = this.container.clientWidth;
+    this.originalHeight = this.container.clientHeight;
+
+    this.shapes = [];
+    this.blockSize = 10;
+    this.efficientDrawingMode = false;
+    this.roomTypes = [];
+
+    this.gridLine = new Konva.Line({
+      points: [],
+      stroke: "grey",
+      strokeWidth: 1,
+      opacity: 0.3,
+    });
+
+    this.gridLine.cache();
+
+    this.mainTransformer = new Konva.Transformer({
+      centeredScaling: false,
+      rotationSnaps: [0, 90, 180, 270],
+      anchorSize: 5,
+      padding: 2,
+      anchorFill: "#ef7539",
+      borderStroke: "black",
+      anchorStroke: "black",
+      cornerRadius: 20,
+      anchorCornerRadius: 10,
+      anchorDragBoundFunc: this.transformerSnapFunc(),
+    });
+
+    this.selectionRectangle = new Konva.Rect({
+      fill: "rgba(200,0,255,0.5)",
+      visible: false,
+      listening: false,
+      zIndex: 100,
+    });
+
+    this.x1 = 0;
+    this.y1 = 0;
+    this.x2 = 0;
+    this.y2 = 0;
+
+    this.selecting = false;
+
+    this.initialize();
+  }
+
+  initialize() {
+    this.drawGrid();
+    this.mainLayer.add(this.mainTransformer);
+    this.mainLayer.add(this.selectionRectangle);
+    this.stage.add(this.gridLayer);
+    this.stage.add(this.dragLayer);
+    this.stage.add(this.mainLayer);
+    this.stage.add(this.infoPinLayer);
+    this.stage.add(this.textLayer);
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    document.getElementById("shapeOptions").addEventListener("click", this.selectShape.bind(this));
+    document.getElementById("render-button").addEventListener("click", this.render.bind(this));
+    window.addEventListener("keydown", this.handleExitSelection.bind(this));
+    window.addEventListener("keydown", this.handleDelete.bind(this));
+    window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
+    window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
+    window.addEventListener("resize", this.handleResize.bind(this));
+    this.stage.on("mousedown touchstart", this.handleMouseDown.bind(this));
+    this.stage.on("mousemove touchmove", this.handleMouseMove.bind(this));
+    this.stage.on("mouseup touchend", this.handleMouseUp.bind(this));
+    this.stage.on("click tap", this.handleStageClick.bind(this));
+    this.stage.on("contextmenu", this.placeInfoPin.bind(this));
+    this.stage.on("dragmove", this.dragStage.bind(this));
+    this.stage.on("wheel", this.zoom.bind(this));
+  }
+
+  detachKeyPressEventListeners() {
+    window.removeEventListener("keydown", this.handleExitSelection.bind(this));
+    window.removeEventListener("keydown", this.handleDelete.bind(this));
+    window.removeEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
+    window.removeEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
+  }
+  attachKeyPressEventListeners() {
+    window.addEventListener("keydown", this.handleExitSelection.bind(this));
+    window.addEventListener("keydown", this.handleDelete.bind(this));
+    window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
+    window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
+  }
+
+  dragStage(e) {
+    if (!e.evt.shiftKey) return;
+    this.drawGrid();
+  }
+
+  transformerSnapFunc() {
+    return (oldPos, newPos) => {
+      const snapDistance = 8;
+
+      if (this.mainTransformer.getActiveAnchor() === "rotater") {
+        return newPos;
+      }
+
+      const distance = Math.sqrt(Math.pow(newPos.x - oldPos.x, 2) + Math.pow(newPos.y - oldPos.y, 2));
+
+      if (distance > snapDistance) {
+        return newPos;
+      }
+
+      const nextX = Math.round(newPos.x / this.blockSize) * this.blockSize;
+      const diffX = Math.abs(newPos.x - nextX);
+
+      const nextY = Math.round(newPos.y / this.blockSize) * this.blockSize;
+      const diffY = Math.abs(newPos.y - nextY);
+
+      const snapToX = diffX < snapDistance;
+      const snapToY = diffY < snapDistance;
+
+      if (snapToX && !snapToY) {
+        return {
+          x: nextX,
+          y: oldPos.y,
+        };
+      } else if (!snapToX && snapToY) {
+        return {
+          x: oldPos.x,
+          y: nextY,
+        };
+      } else if (snapToX && snapToY) {
+        return {
+          x: nextX,
+          y: nextY,
+        };
+      }
+
+      return newPos;
+    };
+  }
+
+  handleResize() {
+    this.stage.width(this.container.offsetWidth);
+    this.stage.height(this.container.offsetHeight);
+    this.drawGrid();
+  }
+
+  zoom(e) {
+   zoomStage(e,this.stage);
+   this.drawGrid();
+  }
+
+  drawGrid() {
+    this.gridLayer.destroyChildren();
+
+    let width = this.stage.width();
+    let height = this.stage.height();
+
+    //presmetka od globalen koordinaten sistem vo lokalen na canvasot
+    let transform = this.stage.getAbsoluteTransform().copy().invert();
+    let topLeft = transform.point({
+      x: 0,
+      y: 0,
+    });
+
+    let bottomRight = transform.point({
+      x: width,
+      y: height,
+    });
+
+    let startX = Math.floor(topLeft.x / this.blockSize) * this.blockSize;
+    let startY = Math.floor(topLeft.y / this.blockSize) * this.blockSize;
+
+    let endX = Math.ceil(bottomRight.x / this.blockSize) * this.blockSize;
+    let endY = Math.ceil(bottomRight.y / this.blockSize) * this.blockSize;
+
+    for (let x = startX; x <= endX; x += this.blockSize) {
+      let line = this.gridLine.clone({
+        points: [x + 0.5, topLeft.y - this.blockSize, x + 0.5, bottomRight.y + this.blockSize],
+      });
+
+      line.transformsEnabled("position");
+      line.perfectDrawEnabled(false);
+      line.shadowForStrokeEnabled(false);
+
+      this.gridLayer.add(line);
+    }
+
+    for (let y = startY; y <= endY; y += this.blockSize) {
+      let line = this.gridLine.clone({
+        points: [topLeft.x - this.blockSize, y + 0.5, bottomRight.x + this.blockSize, y + 0.5],
+      });
+
+      line.perfectDrawEnabled(false);
+      line.shadowForStrokeEnabled(false);
+      line.transformsEnabled("position");
+      this.gridLayer.add(line);
+    }
+
+    this.mainLayer.moveToTop();
+    this.infoPinLayer.moveToTop();
+
+    this.gridLayer.batchDraw();
+  }
+
+  placeInfoPin(e) {
+    e.evt.preventDefault();
+    let mousePos = this.stage.getRelativePointerPosition();
+    let infoPin = Factory.createShape("InfoPin", mousePos, this.blockSize, this.mainLayer, 0,1,1,true);
+    this.addModalHandling(infoPin);
+    this.shapes.push(infoPin);
+    this.mainLayer.add(infoPin)
+    infoPin.displayName(this.textLayer);
+    console.log(infoPin.name());
+  }
+
+  toggleEfficientDrawingMode(e) {
+    if (e.key === "e" || e.key === "E") {
+      this.efficientDrawingMode = !this.efficientDrawingMode;
+      console.log("EFFICIENT DRAWING MODE is: ", this.efficientDrawingMode);
+
+      if (!this.efficientDrawingMode) {
+        this.stopDrawing();
+      }
+    }
+  }
+
+  placeShape() {
+    const mousePos = this.stage.getRelativePointerPosition();
+    const placedObj = Factory.createShape(
+      this.hoverObj.type,
+      mousePos,
+      this.blockSize,
+      this.mainLayer,
+      this.hoverObj.rotation(),
+        1,
+        1,
+        true
+    );
+
+    if (!placedObj) return;
+
+    this.mainLayer.add(placedObj);
+    this.shapes.push(placedObj);
+    this.addModalHandling(placedObj);
+    this.mainLayer.draw();
+    placedObj.displayName(this.textLayer);
+    placedObj.snapToGrid();
+
+    if (!this.efficientDrawingMode) {
+      this.stopDrawing();
+    }
+  }
+
+  stopDrawing() {
+    this.mainTransformer.nodes([]);
+    this.hoverObj.remove();
+    this.dragLayer.removeChildren();
+    this.stage.off("mousemove", this.boundMouseMoveHandler);
+    this.stage.off("click", this.boundPlaceShapeHandler);
+  }
+
+  mouseMoveHandler() {
+    const mousePos = this.stage.getRelativePointerPosition();
+    this.hoverObj.position({ x: mousePos.x, y: mousePos.y });
+    this.hoverObj.visible(true);
+  }
+
+  startDrawing(shapeType) {
+    let pos = { x: 0, y: 0 };
+    this.hoverObj = Factory.createShape(shapeType, pos, this.blockSize, this.dragLayer, 0);
+
+    this.hoverObj.visible(false);
+    this.dragLayer.add(this.hoverObj);
+    this.dragLayer.moveToTop();
+    this.boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
+    this.boundPlaceShapeHandler = this.placeShape.bind(this);
+
+    this.stage.on("mousemove", this.boundMouseMoveHandler);
+    this.stage.on("click", this.boundPlaceShapeHandler);
+  }
+
+  selectShape(e) {
+    if (e.target.tagName === "LI") {
+      const shapeType = e.target.getAttribute("data-info");
+      this.startDrawing(shapeType);
+      this.mainTransformer.nodes([]);
+    }
+  }
+
+  addModalHandling(shape) {
+    shape.on("dblclick", () => {
+      const eventName = shape.modalEventName;
+      if (eventName) {
+        const data = {
+          room: shape,
+          map: this,
+        };
+        const event = new CustomEvent(eventName, { detail: data });
+        window.dispatchEvent(event);
+      }
+    });
+  }
+
+  rotateShapesBy90Deg(e) {
+    if (e.key === "r" || e.key === "R") {
+      if (this.hoverObj) {
+        this.hoverObj.rotate(90);
+      }
+      this.mainTransformer.nodes().forEach((node) => {
+        node.rotate(90);
+      });
+    }
+  }
+
+  handleDelete(e) {
+    if (e.key === "Delete") {
+      this.mainTransformer.nodes().forEach((node) => {
+        node.remove();
+        this.shapes.splice(this.shapes.indexOf(node), 1);
+      });
+      this.mainTransformer.nodes([]);
+      this.mainLayer.batchDraw();
+    }
+  }
+
+  handleExitSelection(e) {
+    if (e.key === "Escape") {
+      this.mainTransformer.nodes([]);
+      this.stopDrawing();
+    }
+  }
+
+  handleMouseDown(e) {
+    this.stage.draggable(e.evt.shiftKey);
+
+    if (e.target !== this.stage) {
+      return;
+    }
+
+    e.evt.preventDefault();
+    this.x1 = this.stage.getRelativePointerPosition().x;
+    this.y1 = this.stage.getRelativePointerPosition().y;
+    this.x2 = this.stage.getRelativePointerPosition().x;
+    this.y2 = this.stage.getRelativePointerPosition().y;
+
+    this.selectionRectangle.width(0);
+    this.selectionRectangle.height(0);
+    this.selecting = true;
+  }
+
+  handleMouseMove(e) {
+    if (!this.selecting) {
+      return;
+    }
+    e.evt.preventDefault();
+    this.x2 = this.stage.getRelativePointerPosition().x;
+    this.y2 = this.stage.getRelativePointerPosition().y;
+
+    this.selectionRectangle.setAttrs({
+      visible: true,
+      x: Math.min(this.x1, this.x2),
+      y: Math.min(this.y1, this.y2),
+      width: Math.abs(this.x2 - this.x1),
+      height: Math.abs(this.y2 - this.y1),
+    });
+  }
+
+  handleMouseUp(e) {
+    this.selecting = false;
+    this.stage.draggable(false);
+
+    if (!this.selectionRectangle.visible()) {
+      return;
+    }
+
+    e.evt.preventDefault();
+    this.selectionRectangle.visible(false);
+    const shapes = this.stage.find(".mapObj");
+    const box = this.selectionRectangle.getClientRect();
+    const selected = shapes.filter((shape) => Konva.Util.haveIntersection(box, shape.getClientRect()));
+    this.mainTransformer.nodes(selected);
+    console.log(this.mainTransformer.nodes());
+  }
+
+  saveShapeDetails() {
+    this.shapes.forEach((room) => {
+      room.saveShapeDetails();
+      console.log(room.info);
+    });
+  }
+
+  async render() {
+    this.saveShapeDetails();
+    const httpService = new HttpService("http://localhost:8080/api/protected", true);
+    try {
+      const response = await httpService.post("/render", this.shapes);
+      console.log(response);
+    } catch (err) {
+      console.log("ERROR --> Could not render map --->", err);
+    }
+  }
+
+  async saveMap(mapName) {
+    this.saveShapeDetails();
+    const httpService = new HttpService("http://localhost:8080/api/protected/maps", true);
+    try {
+      const response = await httpService.put(`/save?mapName=${mapName}`, this.shapes);
+      console.log(response, "resp in builder");
+    } catch (err) {
+      console.log("ERROR --> Could not Save map --->", err);
+    }
+  }
+
+  handleStageClick(e) {
+    if (this.selectionRectangle.visible()) {
+      return;
+    }
+
+    if (e.target === this.stage) {
+      this.mainTransformer.nodes([]);
+      return;
+    }
+
+    if (!e.target.hasName("mapObj")) {
+      return;
+    }
+
+    const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
+    const isSelected = this.mainTransformer.nodes().indexOf(e.target) >= 0;
+
+    if (!metaPressed && !isSelected) {
+      this.mainTransformer.nodes([e.target]);
+      console.log("Sel 1");
+    } else if (metaPressed && isSelected) {
+      const nodes = this.mainTransformer.nodes().slice();
+      nodes.splice(nodes.indexOf(e.target), 1);
+      this.mainTransformer.nodes(nodes);
+    } else if (metaPressed && !isSelected) {
+      const nodes = this.mainTransformer.nodes().concat([e.target]);
+      this.mainTransformer.nodes(nodes);
+    }
+  }
+
+  addRoomType(roomType) {
+    this.roomTypes.push(roomType);
+  }
+
+  getRoomTypes() {
+    return this.roomTypes;
+  }
+
+  getRooms() {
+    return this.getShapeInfoByType("Room");
+  }
+
+  getPins() {
+    return this.getShapeInfoByType("InfoPin");
+  }
+
+  getEntrances() {
+    return this.getShapeInfoByType("Entrance");
+  }
+
+  getConnections() {
+    const pins = this.getShapeInfoByType("InfoPin");
+    const entrances = this.getShapeInfoByType("Entrance");
+    return [...pins, ...entrances];
+  }
+
+  getShapeInfoByType(type) {
+    return this.shapes.filter((shape) => shape.className === type).map((shape) => shape.info);
+  }
+
+  updateConnections() {
+    console.log("Update");
+
+    this.shapes.forEach((shape) => {
+      if (shape.className === "InfoPin" || shape.className === "Entrance") {
+        shape.info.selectedPins.forEach((connectedShapeName) => {
+          const connectedShape = this.shapes.find((s) => s.info.name === connectedShapeName);
+          if (
+            connectedShape &&
+            (connectedShape.className === "InfoPin" || connectedShape.className === "Entrance")
+          ) {
+            if (!connectedShape.info.selectedPins.includes(shape.info.name)) {
+              connectedShape.info.selectedPins.push(shape.info.name);
+            }
+          }
         });
-
-        // TODO AKO DRAGNIT NEKOJ OD POCETOK NA STAGE POZICIIVE KE SA ZEZNAT
-        // TODO placed shape i mouseMoveHandler da ne callback ( da ne vrakjat funkcija)
-        // TODO text na top layer sekogas
-
-        this._floorNum = floorNum;
-        this.mapName = mapName;
-
-        this.gridLayer = new Konva.Layer();
-        this.mainLayer = new Konva.Layer();
-        this.dragLayer = new Konva.Layer();
-        this.infoPinLayer = new Konva.Layer();
-        this.prioLayer = new Konva.Layer();
-        this.textLayer = new Konva.Layer();
-        this.gridLayer.listening(false);
-
-        this.isDrawEventBound = false;
-
-
-        this.othStairs = [];
-
-        this.blockSize = 10;
-        this.efficientDrawingMode = false;
-        this.roomTypes = [];
-
-        this.gridLine = new Konva.Line({
-            points: [],
-            stroke: "grey",
-            strokeWidth: 1,
-            opacity: 0.3,
-        });
-
-        this.gridLine.cache();
-
-        this.mainTransformer = new Konva.Transformer({
-            centeredScaling: false,
-            rotationSnaps: [0, 90, 180, 270],
-            anchorSize: 5,
-            padding: 2,
-            anchorFill: "#f6031f",
-            borderStroke: "black",
-            anchorStroke: "black",
-            cornerRadius: 20,
-            anchorCornerRadius: 10,
-            anchorDragBoundFunc: this.transformerSnapFunc(),
-        });
-
-        this.selectionRectangle = new Konva.Rect({
-            fill: "rgba(56,194,245,0.5)",
-            visible: false,
-            listening: false,
-            zIndex: 100,
-        });
-
-        this.x1 = 0;
-        this.y1 = 0;
-        this.x2 = 0;
-        this.y2 = 0;
-
-        this.selecting = false;
-
-        this.initialize();
-    }
-
-    initialize() {
-        this.drawGrid();
-        this.mainLayer.add(this.mainTransformer);
-        this.mainLayer.add(this.selectionRectangle);
-        this.stage.add(this.gridLayer);
-        this.stage.add(this.dragLayer);
-        this.stage.add(this.mainLayer);
-        this.stage.add(this.infoPinLayer);
-        this.stage.add(this.textLayer);
-        this.setupEventListeners();
-    }
-
-    setupEventListeners() {
-        document.getElementById("shapeOptions").addEventListener("click", this.selectShape.bind(this));
-        // window.addEventListener("keydown", this.handleExitSelection.bind(this));
-        // window.addEventListener("keydown", this.handleDelete.bind(this));
-        // window.addEventListener("keydown", this.rotateShapesBy90Deg.bind(this));
-        // window.addEventListener("keydown", this.toggleEfficientDrawingMode.bind(this));
-        window.addEventListener("resize", this.handleResize.bind(this));
-
-        this.boundEscapeEventListener = this.handleExitSelection.bind(this);
-        this.boundDeleteEventListener = this.handleDelete.bind(this);
-        this.boundRotateShapeEventListener = this.rotateShapesBy90Deg.bind(this)
-        this.boundEfficientDrawingModeEventListener = this.toggleEfficientDrawingMode.bind(this);
-
-        this.attachKeyPressEventListeners();
-
-        this.stage.on("mousedown touchstart", this.handleMouseDown.bind(this));
-        this.stage.on("mousemove touchmove", this.handleMouseMove.bind(this));
-        this.stage.on("mouseup touchend", this.handleMouseUp.bind(this));
-        this.stage.on("click tap", this.handleStageClick.bind(this));
-        this.stage.on("contextmenu", this.placeInfoPin.bind(this));
-        this.stage.on("dragmove", this.dragStage.bind(this));
-        this.stage.on("wheel", this.zoom.bind(this));
-    }
-
-    detachKeyPressEventListeners() {
-        console.log("DETACH")
-        window.removeEventListener("keydown", this.boundEscapeEventListener);
-        window.removeEventListener("keydown", this.boundDeleteEventListener);
-        window.removeEventListener("keydown", this.boundRotateShapeEventListener);
-        window.removeEventListener("keydown", this.boundEfficientDrawingModeEventListener);
-    }
-
-    attachKeyPressEventListeners() {
-        console.log("ATTACH")
-        window.addEventListener("keydown", this.boundEscapeEventListener);
-        window.addEventListener("keydown", this.boundDeleteEventListener);
-        window.addEventListener("keydown", this.boundRotateShapeEventListener);
-        window.addEventListener("keydown", this.boundEfficientDrawingModeEventListener);
-    }
-
-    dragStage(e) {
-        if (!e.evt.shiftKey) return;
-        this.drawGrid();
-    }
-
-    transformerSnapFunc() {
-        return (oldPos, newPos) => {
-            const snapDistance = 8;
-
-            if (this.mainTransformer.getActiveAnchor() === "rotater") {
-                return newPos;
-            }
-
-            const distance = Math.sqrt(Math.pow(newPos.x - oldPos.x, 2) + Math.pow(newPos.y - oldPos.y, 2));
-
-            if (distance > snapDistance) {
-                return newPos;
-            }
-
-            const nextX = Math.round(newPos.x / this.blockSize) * this.blockSize;
-            const diffX = Math.abs(newPos.x - nextX);
-
-            const nextY = Math.round(newPos.y / this.blockSize) * this.blockSize;
-            const diffY = Math.abs(newPos.y - nextY);
-
-            const snapToX = diffX < snapDistance;
-            const snapToY = diffY < snapDistance;
-
-            if (snapToX && !snapToY) {
-                return {
-                    x: nextX,
-                    y: oldPos.y,
-                };
-            } else if (!snapToX && snapToY) {
-                return {
-                    x: oldPos.x,
-                    y: nextY,
-                };
-            } else if (snapToX && snapToY) {
-                return {
-                    x: nextX,
-                    y: nextY,
-                };
-            }
-
-            return newPos;
-        };
-    }
-
-    handleResize() {
-        this.stage.width(this.container.offsetWidth);
-        this.stage.height(this.container.offsetHeight);
-        this.drawGrid();
-    }
-
-    zoom(e) {
-        zoomStage(e, this.stage, true);
-        this.drawGrid();
-    }
-
-    get floorNum(){
-        return this._floorNum;
-    }
-
-    set floorNum(val){
-        this._floorNum = val;
-    }
-
-    drawGrid() {
-        this.gridLayer.destroyChildren();
-
-        let width = this.stage.width();
-        let height = this.stage.height();
-
-        //presmetka od globalen koordinaten sistem vo lokalen na canvasot
-        let transform = this.stage.getAbsoluteTransform().copy().invert();
-        let topLeft = transform.point({
-            x: 0,
-            y: 0,
-        });
-
-        let bottomRight = transform.point({
-            x: width,
-            y: height,
-        });
-
-        let startX = Math.floor(topLeft.x / this.blockSize) * this.blockSize;
-        let startY = Math.floor(topLeft.y / this.blockSize) * this.blockSize;
-
-        let endX = Math.ceil(bottomRight.x / this.blockSize) * this.blockSize;
-        let endY = Math.ceil(bottomRight.y / this.blockSize) * this.blockSize;
-
-        for (let x = startX; x <= endX; x += this.blockSize) {
-            let line = this.gridLine.clone({
-                points: [x + 0.5, topLeft.y - this.blockSize, x + 0.5, bottomRight.y + this.blockSize],
-            });
-
-            line.transformsEnabled("position");
-            line.perfectDrawEnabled(false);
-            line.shadowForStrokeEnabled(false);
-
-            this.gridLayer.add(line);
-        }
-
-        for (let y = startY; y <= endY; y += this.blockSize) {
-            let line = this.gridLine.clone({
-                points: [topLeft.x - this.blockSize, y + 0.5, bottomRight.x + this.blockSize, y + 0.5],
-            });
-
-            line.perfectDrawEnabled(false);
-            line.shadowForStrokeEnabled(false);
-            line.transformsEnabled("position");
-            this.gridLayer.add(line);
-        }
-
-        this.mainLayer.moveToTop();
-        this.infoPinLayer.moveToTop();
-
-        this.gridLayer.batchDraw();
-    }
-
-    placeInfoPin(e) {
-        e.evt.preventDefault();
-        let mousePos = this.stage.getRelativePointerPosition();
-        const attrs = {
-            type: "InfoPin",
-            position: mousePos,
-            blockSize: this.blockSize,
-            layer: this.mainLayer,
-            rotation: 0,
-            scaleX: 1,
-            scaleY: 1,
-            increment: true,
-            floorNum: this.floorNum
-        };
-        let infoPin = Factory.createShape("InfoPin", attrs);
-        addEventHandling(infoPin, this, "dblclick");
-        ShapeRegistry.add(infoPin)
-        this.mainLayer.add(infoPin);
-        infoPin.displayName(this.textLayer);
-        triggerMapSave()
-
-        console.log(infoPin.name());
-    }
-
-    toggleEfficientDrawingMode(e) {
-        if (e.key === "e" || e.key === "E") {
-            this.efficientDrawingMode = !this.efficientDrawingMode;
-            console.log("EFFICIENT DRAWING MODE is: ", this.efficientDrawingMode);
-
-            if (!this.efficientDrawingMode) {
-                this.stopDrawing();
-            }
-        }
-    }
-
-    placeShape() {
-        const mousePos = this.stage.getRelativePointerPosition();
-        const attrs = {
-            position: mousePos,
-            width: this.blockSize,
-            height: this.blockSize,
-            layer: this.mainLayer,
-            rotation: this.hoverObj.rotation(),
-            scaleX: 1,
-            scaleY: 1,
-            increment: true,
-            snap: true,
-            fromLoad: false,
-            blockSize: this.blockSize,
-            floorNum: this.floorNum
-        };
-
-        const placedObj = Factory.createShape(this.hoverObj.type, attrs);
-
-        if (!placedObj) return;
-
-        console.info("ATTRS FNUM",attrs.floorNum)
-
-        this.mainLayer.add(placedObj);
-        ShapeRegistry.add(placedObj);
-        addEventHandling(placedObj, this, "dblclick");
-        this.mainLayer.draw();
-        // site ovie func da se vo edna funkcija vo shape.
-
-        placedObj.displayName(this.textLayer);
-        placedObj.snapToGrid();
-        placedObj.onPlace();
-
-        triggerMapSave();
-
-        if (!this.efficientDrawingMode) {
-            this.stopDrawing();
-        }
-        this.mainTransformer.nodes([])
-    }
-
-    stopDrawing() {
-        if(this.isDrawEventBound){
-            this.mainTransformer.nodes([]);
-            if (this.hoverObj != null) this.hoverObj.remove();
-            this.dragLayer.removeChildren();
-            this.stage.off("mousemove", this.boundMouseMoveHandler);
-            this.stage.off("click", this.boundPlaceShapeHandler);
-            this.isDrawEventBound = false;
-        }
-
-    }
-
-    mouseMoveHandler() {
-        const mousePos = this.stage.getRelativePointerPosition();
-        this.hoverObj.position({x: mousePos.x, y: mousePos.y});
-        this.hoverObj.visible(true);
-    }
-
-    startDrawing(shapeType) {
-        const attrs = {
-            position: {x: 0, y: 0},
-            width: this.blockSize,
-            height: this.blockSize,
-            layer: this.mainLayer,
-            rotation: 0,
-            scaleX: 1,
-            scaleY: 1,
-            increment: false,
-            snap: true,
-            fromLoad: false,
-            blockSize: this.blockSize
-        };
-        this.hoverObj = Factory.createShape(shapeType, attrs);
-
-        console.log("HOVBER OBK:", this.hoverObj)
-
-        this.hoverObj.visible(false);
-        this.dragLayer.add(this.hoverObj);
-        this.dragLayer.moveToTop();
-
-
-        this.boundMouseMoveHandler = this.mouseMoveHandler.bind(this);
-        this.boundPlaceShapeHandler = this.placeShape.bind(this);
-        this.isDrawEventBound = true;
-
-        this.stage.on("mousemove", this.boundMouseMoveHandler);
-        this.stage.on("click", this.boundPlaceShapeHandler);
-    }
-
-    selectShape(e) {
-        if (e.target.tagName === "LI") {
-          this.stopDrawing()
-            const shapeType = e.target.getAttribute("data-info");
-            this.startDrawing(shapeType);
-            this.mainTransformer.nodes([])
-        }
-    }
-
-    rotateShapesBy90Deg(e) {
-        if (e.key === "r" || e.key === "R") {
-            if (this.hoverObj) {
-                this.hoverObj.rotate(90);
-            }
-            this.mainTransformer.nodes().forEach((node) => {
-                node.rotate(90);
-            });
-        }
-    }
-
-    handleDelete(e) {
-        if (e.key === "Delete") {
-            this.mainTransformer.nodes().forEach((node) => {
-                node.remove();
-                node.destroy();
-                ShapeRegistry.delete(node);
-                triggerMapSave();
-            });
-            this.mainTransformer.nodes([]);
-            this.mainLayer.batchDraw();
-        }
-    }
-
-    handleExitSelection(e) {
-        if (e.key === "Escape") {
-            this.mainTransformer.nodes([]);
-            this.stopDrawing();
-        }
-    }
-
-    handleMouseDown(e) {
-        this.stage.draggable(e.evt.shiftKey);
-
-        if (e.target !== this.stage) {
-            return;
-        }
-
-        e.evt.preventDefault();
-        this.x1 = this.stage.getRelativePointerPosition().x;
-        this.y1 = this.stage.getRelativePointerPosition().y;
-        this.x2 = this.stage.getRelativePointerPosition().x;
-        this.y2 = this.stage.getRelativePointerPosition().y;
-
-        this.selectionRectangle.width(0);
-        this.selectionRectangle.height(0);
-        this.selecting = true;
-    }
-
-    handleMouseMove(e) {
-        if (!this.selecting) {
-            return;
-        }
-        e.evt.preventDefault();
-        this.x2 = this.stage.getRelativePointerPosition().x;
-        this.y2 = this.stage.getRelativePointerPosition().y;
-
-        this.selectionRectangle.setAttrs({
-            visible: true,
-            x: Math.min(this.x1, this.x2),
-            y: Math.min(this.y1, this.y2),
-            width: Math.abs(this.x2 - this.x1),
-            height: Math.abs(this.y2 - this.y1),
-        });
-    }
-
-    handleMouseUp(e) {
-        this.selecting = false;
-        this.stage.draggable(false);
-
-        if (!this.selectionRectangle.visible()) {
-            return;
-        }
-
-        e.evt.preventDefault();
-        this.selectionRectangle.visible(false);
-        const shapes = this.stage.find(".mapObj");
-        const box = this.selectionRectangle.getClientRect();
-        const selected = shapes.filter((shape) => Konva.Util.haveIntersection(box, shape.getClientRect()));
-        this.mainTransformer.nodes(selected);
-        console.log(this.mainTransformer.nodes());
-    }
-
-    saveShapeDetails() {
-        ShapeRegistry.saveDetails();
-        console.log("thisflornum",this.floorNum)
-        return  {
-            shapes: ShapeRegistry.getShapes(this.floorNum),
-            roomTypes: JSON.stringify(this.roomTypes),
-            mapName: this.mapName,
-            floorNum: this.floorNum
-        }
-    }
-
-
-
-    handleStageClick(e) {
-        if (this.selectionRectangle.visible()) {
-            console.log("STAGECLICK1")
-            return;
-        }
-
-        if (e.target === this.stage) {
-            console.log("STAGECLICK2")
-            this.mainTransformer.nodes([]);
-            return;
-        }
-
-        if (!e.target.hasName("mapObj")) {
-            console.log("STAGECLICK3")
-            return;
-        }
-
-        const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
-        const isSelected = this.mainTransformer.nodes().indexOf(e.target) >= 0;
-
-
-        if (!metaPressed && !isSelected) {
-            this.mainTransformer.nodes([e.target]);
-            console.log("Sel 1");
-        } else if (metaPressed && isSelected) {
-            const nodes = this.mainTransformer.nodes().slice();
-            nodes.splice(nodes.indexOf(e.target), 1);
-            this.mainTransformer.nodes(nodes);
-        } else if (metaPressed && !isSelected) {
-            const nodes = this.mainTransformer.nodes().concat([e.target]);
-            this.mainTransformer.nodes(nodes);
-        }
-    }
-
-    addRoomType(type) {
-        this.roomTypes.push(type);
-    }
-
-    removeRoomType(targetType) {
-        this.roomTypes = this.roomTypes.filter(type => type !== targetType);
-    }
-
-
-    drawConnection(node1Name, node2Name) {
-
-        ShapeRegistry.drawConnection(node1Name,node2Name);
-    }
-
-    removeConnection(from, to) {
-        ShapeRegistry.removeConnection(from,to);
-    }
-
-    updateRoomNames() {
-        this.textLayer.removeChildren();
-        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => {
-            shape.displayName(this.textLayer);
-        });
-
-    }
-
-
-    clearMap() {
-        this.mainLayer.removeChildren();
-        this.hoverObj = null;
-    }
-
-
-    // ova  klasa i map display da nasledbat od glavna klasa
-
-    loadNewFloor(floor) {
-
-        this._floorNum = floor?.num;
-        let data = floor?.mapData;
-
-        if (data == null || data === "") return;
-
-        this.deserializeMap(data);
-        shapeRegistry.getShapes(this.floorNum).forEach((shape) => {
-            this.mainLayer.add(shape);
-        });
-
-
-    }
-
-    //nov
-    deserializeMap(data) {
-        console.log("DESERIALIZING: ", data);
-        ShapeRegistry.clear(this.floorNum);
-
-        if (data != null) {
-            const dsrData = JSON.parse(data);
-            //load shapes
-            dsrData.forEach((shape) => {
-                const attrs = {
-                    position: {x: shape.attrs.x, y: shape.attrs.y},
-                    width: shape.attrs.width,
-                    height: shape.attrs.height,
-                    layer: this.mainLayer,
-                    blockSize: this.blockSize,
-                    rotation: shape.attrs.rotation,
-                    scaleX: shape.attrs.scaleX,
-                    scaleY: shape.attrs.scaleY,
-                    increment: false,
-                    snap: true,
-                    fromLoad: true,
-                    floorNum: this.floorNum
-                };
-
-                const loadedShape = Factory.createShape(shape.className, attrs);
-                loadedShape.loadInfo(shape.attrs);
-                ShapeRegistry.add(loadedShape);
-                // na destroy trebit events da sa trgnat
-                addEventHandling(loadedShape, this, "dblclick");
-            });
-            let nodes = ShapeRegistry.getShapes(this.floorNum).filter((shape) => shape.className === "InfoPin" || shape.className === "Entrance" || shape.className === "Stairs");
-            nodes.forEach((pin) => {
-                let connectedPins = pin.info.selectedPins;
-                if (connectedPins) {
-                    connectedPins.forEach((slPin) => {
-                        console.log("CONN node1: " + pin + "conn node2: " + slPin)
-                        this.drawConnection(pin.info.name, slPin);
-                    });
-                }
-            });
-        }
-
-        this.mainTransformer.nodes([]);
-        this.mainLayer.add(this.mainTransformer);
-        this.mainLayer.add(this.selectionRectangle);
-
-        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => {
-            shape.displayName(this.textLayer);
-            if(shape.className === "Entrance"){
-                shape.setHighlight();
-            }
-        });
-    }
-
+      }
+    });
+  }
+
+  removeConnection(from, to) {
+    this.shapes
+      .filter((s) => s.info.name === from || s.info.name === to)
+      .forEach((s) => {
+        s.info.selectedPins = s.info.selectedPins.filter((pin) => pin !== from && pin !== to);
+      });
+    console.log("Remove");
+  }
+
+  updateRoomNames() {
+    this.textLayer.removeChildren();
+    this.shapes.forEach((shape) => {
+      shape.displayName(this.textLayer);
+    });
+    this.textLayer.children.forEach((child) => console.log(child));
+  }
+
+  clearMap() {
+    this.mainLayer.removeChildren();
+    this.shapes = [];
+    this.hoverObj = null;
+  }
+
+  deserializeMap(data) {
+    console.log("DESERIALIZING: ", data);
+    this.clearMap();
+    let dsrData = JSON.parse(data);
+    dsrData.forEach((child) => {
+      const shape = JSON.parse(child);
+      const loadedShape = Factory.createShape(
+        shape.className,
+        { x: shape.attrs.x, y: shape.attrs.y },
+        this.blockSize,
+        this.mainLayer,
+        shape.attrs.rotation,
+          shape.attrs.scaleX,
+          shape.attrs.scaleY
+      );
+      loadedShape.loadInfo(shape.attrs);
+      this.shapes.push(loadedShape);
+      this.addModalHandling(loadedShape);
+      this.mainLayer.add(loadedShape);
+    });
+    this.mainTransformer.nodes([]);
+    this.mainLayer.add(this.mainTransformer);
+    this.mainLayer.add(this.selectionRectangle);
+
+    this.shapes.forEach((shape) => shape.displayName(this.textLayer));
+  }
 }
Index: imaps-frontend/src/scripts/main/MapDisplay.js
===================================================================
--- imaps-frontend/src/scripts/main/MapDisplay.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/main/MapDisplay.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -3,314 +3,121 @@
 import HttpService from "../net/HttpService.js";
 import {zoomStage} from "../util/zoomStage.js";
-import {addEventHandling} from "../util/addEventHandling.js";
-import ShapeRegistry from "../util/ShapeRegistry.js";
-import triggerNavigate from "../util/triggerNavigate.js";
-import config from "../net/netconfig.js";
-import {dispatchCustomEvent} from "../util/dispatchCustomEvent.js";
-import { jsPDF } from "jspdf";
+export class MapDisplay {
+  constructor(containerId) {
+    this.container = document.getElementById(containerId);
+    this.containerId = containerId;
+    this.stage = new Konva.Stage({
+      container: containerId,
+      width: window.innerWidth,
+      height: window.innerHeight,
+      draggable: true,
+    });
+
+    this.shapes = [];
+    this.loaded = false;
+    this.mainLayer = new Konva.Layer();
+    this.routeLayer = new Konva.Layer();
+    this.textLayer = new Konva.Layer();
+    this.stage.add(this.mainLayer);
+    this.stage.add(this.routeLayer);
+    this.stage.add(this.textLayer);
+    this.route = new Konva.Line();
+
+    this.stage.on("resize", () => {
+      this.stage.width = window.innerWidth;
+      this.stage.height = window.innerHeight;
+    });
+
+    this.stage.on("wheel",(e) => {
+        zoomStage(e,this.stage);
+    })
+
+   
+  }
+
+  deserializeMap(data) {
+    data.forEach((child) => {
+        const shape = JSON.parse(child);
+        if (shape.className !== "InfoPin") {
+            const renderedShape = Factory.createRenderedShape(
+                shape.className,
+                shape.attrs
+            );
+            this.shapes.push(renderedShape);
+      }
+    });
+  }
+
+  displayRoomNames(){
+    console.log("VLEZE")
+    this.shapes.forEach(shape => {
+      shape.displayName(this.textLayer);
+    })
+
+    this.textLayer.children.forEach(child => console.log(child,"DECAAA"));
+  }
+
+  async loadMap() {
+    const httpService = new HttpService();
+    const mapData = await httpService.get("/public/mapData");
+    console.log("DESERIALIZED --->",mapData);
+    this.deserializeMap(mapData);
+    this.shapes.forEach((shape) => {
+      this.mainLayer.add(shape);
+    });
+    this.displayRoomNames();
+  }
+
+  drawRoute(path) {
+    this.routeLayer.removeChildren();
+    console.log("====PATH====");
+    path.forEach((point) => console.log(point.x, point.y));
+
+    const pointsArray = path.flatMap((point) => [point.x, point.y]);
+
+    console.log(pointsArray, "POINTS");
+
+    let buff = [];
+    let count = 0;
+    let index = 0;
+
+    const drawNextSegment = () => {
+        if (index >= pointsArray.length) return;
+
+        buff.push(pointsArray[index]);
+        count++;
+
+        if (count % 4 === 0) {
+            const line = new Konva.Arrow({
+                points: buff,
+                stroke: "#e91332",
+                strokeWidth: 2.5,
+                dash: [5, 4],
+                lineCap: 'round',
+                lineJoin: 'round',
+                pointerLength: 7,
+                pointerWidth: 7,
+                fill:'red',
+            });
+
+            this.routeLayer.add(line);
+            this.routeLayer.draw(); 
+
+            console.log(buff, "BUFFER");
+            buff = []; 
+            index -= 2; 
+        }
+
+        index++;
+
+        setTimeout(drawNextSegment, 25); 
+    };
+
+    drawNextSegment(); 
+}
 
 
-export class MapDisplay {
-    constructor(containerId, floorNum) {
-        this.container = document.getElementById(containerId);
-        this.containerId = containerId;
-        this.stage = new Konva.Stage({
-            container: containerId,
-            width: window.innerWidth,
-            height: window.innerHeight,
-            draggable: true,
-        });
-
-        this.selectedRoom = {
-            id: 1,
-            name: "223",
-            type: "Laboratory",
-            image:
-                "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wCEAAkGBxMSEhUTExIVFhUXGBsYGBcWFxgXFhcYFRgXFxUVFRYYHiggGBolGxUXITEhJSkrLi4uFx8zODMtNygtLisBCgoKDg0OGxAQGysmHSUtLS0rLS0tLS0tLS0tLS0rKy0tKy0rLi0tLS0tKy4tLSstLS0vLS0tLS0rLS0tKy0tLf/AABEIAMIBAwMBIgACEQEDEQH/xAAcAAACAgMBAQAAAAAAAAAAAAAFBgMEAAECBwj/xABOEAACAQIDBAcEBwQHBAkFAAABAhEAAwQSIQUGMUETIlFhcYGRMqGxwQcUI1JyktEzQmLwQ3OCorLC4RUWJFM0RIOTs8PS4vEXVGNko//EABsBAAMBAQEBAQAAAAAAAAAAAAECAwAEBQYH/8QAMREAAgIBAwIDBgYCAwAAAAAAAAECEQMSITEEQVFhgQUTIjJx0UKhscHh8BSRFdLx/9oADAMBAAIRAxEAPwB4UV1FaFbpxDIrUVusrBOCK4YVIa4Vg3ODMQQRWMQOKgdau3LRqvcWtRijcWql1KIXBVW4tAwMupVO6lFLi1TurSsIJvJqKy1YAJIGp4+Qj4Ct7RuFYIUt3CPnQ25t4ISGRhrHL5UAlbeUENbgkGCNDB4ipcDJUTroKhxuKt4iD1lKzB059oq5hSoA6w4eHuosxZRanVKjS4v3l9RUq30++vqKUx2qVIqVGMTb++v5hUiYlPvisYkCV2ErauO/0P6VIGHf+U/pWMR5KwpUvSLIGsnQSCJ0nmK7KVglUpUbLVpkqJlrGKzLUbLVllqJhWMVWWonFWXFQuKxiO3gDcnrKq/eaYnsECSatYTY6qZN9D4K/wClD8SxEQTx7asbOk8ST41jBhbNv/mj8rVlQ7Ow7LbUPBfXMRwkknSfGspgHoQrdcit0wpusrVaomMNR43aa22VYJlHaQRxt5OpHac/uqSaVbr27lwg38hzPqVkdbioIiDIXjxiqY0m9wPjYJ7V2kF6N3FxShdmRTPsKCQ0aMsMD5+NXHtj9p98DTwH+tD8bszprIm6GckEOBxWBbI75HGrODuHKUJBymFMzKwCJ8CSPKjNLegp3FXyY4qtcFWnqvcFRMU7i1TvCr9wVUuigYEe0ygjn/PGlvelLVp1BDZrkkERAIIGs+NOCp1h40B3w2ZcuPZKBSq5s85Z4qdJ7poUEBYS3pNFtl2QV4cz8TXHRZVireyR1fM/EmgEt27I7K1i0yqI01/WrCCo8eOqPH5VjFJSTMk8KMYPZ6FVbWSAePnQm2OPh8xTNg16i/hHwoIxtMOO+plwwqS0tTBaJis2FXQxw4VnQirRWuMtYxQxdsBT5fEVTuVf2jovmPjNeX7U3rxAu3FVlyq7AdWdASPlWow9MaiY159/vXifvL+UVwd6MT95fy0aMPztULmkb/ebEfeX8taO8d/tX8v+tCjDdieI86v7NXSlzY2Na8oLRIBmBA1OnuFNGzl0FYxcfFIpgnWsrdrCq4zEamT5T1fdFapgD2Kya5Brc0QG5rJrU1qsY2TXnNu+elvIetFxwJ4jrtlgzXok1wyjsFNF07CnsANnY4W7B6TTIdSx5mNR2jUkdmorvD4tWvLFwPmUkQCDliVzDxJ1oubK/dX0Fckd1M52A4eq71O9V7lIYguVVu1ZuVWuUGYpO0GRxFDsbZzozsoBzCOffRG7UGKH2J/EKVhAlwDn2f8AxVnZg6v89pqvfq1sz2f57TQMX0FQ4/gPGp0qHaHBaLMVbY0Pl8aaMOOqvgPhSujaHypssroPAVkZktsVMq1wgruaJjoioytd61yaBgftXgv4vgprwvEvmdz2sx9STXtu3LkCexXb0H+teGCsE6rK5zVmaiY2K2awVjVjDXusn2Z8qc8GIFK+7luLY7zTTaHVjt09dKUwRwqQi/hHwrKlC1lMAZwa3NcA1uiA6mtTWprU1gmya5JrRNVNo4gpauOvFUZhPCQCRNFK9gFomo2pMt7xbRZVdcGLiMoYECJnjEMdO/3VFc30xSANc2e4VvZaXCtEzlYpB4Hh2V1/4OZuklf1QkckJOk0/Uc3NV7hpQ/+oaj28LcHbDjTyKij+yNrW8UjsgIyRpmRvaMa5Tpw50mTpM2NapxpDlhteFQvab7p9KobzLOGcdrWhqY/6xa58vGtNuVhi6nLdAZ4OW6csFWYnMCRMiY8qOLp4zhqlKvS/wBxZNxV068ef03/ACJL9h/uN6Gq2KQi1GRiS6qANDLGBxpfv7KtnEdFbv31Jd4+0YjIhuKDoO1V56z36Hd2rbWsQts32ZWslybpLAEdFrqBIl29B2TXXL2ZoWpyvvVDU/79uQdfwl4Ak4TEgKATC22gMYBMP21FgscqyrWsQIksxtKFUAmSxz6AdvdRTaW/KhcVay5biRbtlQOjudG7S7+yVnTTXiaqYcudmZm6xe1fJJME9Z9YI15V0w9nQ03OFb0t33ViRcq3f9/2wiVgkVW2h+75/KrV32m8TVXH/u+fyrwJLcdFS2DrJEDgI11k6691ONsaUoqND4j4GjeD2i7GMq+poILDIrtRVNb7/dX8x/SuxiG+6Pzf+2iAs1waq2scWzdQiCRxGscx3VSxW1GynJbcNyLKCPODQMdbTshyVPAoQfBtPlSBc3LGuoVQGYksYCqCxJMHgAae9nO91hnEEkLwjmdYPiKEbW3gwgS6hN8Bhds5glpoPWts2XpJjjEgTVcWGWR1FBuhKv7tWlMHFWgewuQdRI0Kdhqvc3fXlicOf+1UfEa04jebZ5t9HJ9gKCcJanSZaQ8yZqLbu1dm4hy1spZHR5Aowp0OV1zSJk9dTP8AAPL0I9BDVTbrxr+CalPul/v+BTtbvEmBesE9gv2yfSpbu7N1DlPODplIIOo1FMGBGAmLdyWmdLV4sAOk4RbJGjp+Twg9j7IDKeRUQCGUjJ1CGVwCDKniKh1nTRw1pbfpRROwNs2yFAUcAT8aPWR7H4vkaD4ISaNYISx7hHmdT7orhCFAKytisomLlneLCtwv2/zCrdvaVluF1D4MK8mOw16JXDtJ6PQp1ftGZSQ3YI8zI5a7TdzWTcQQRAuLoevk7ToNSfCvafsnwkU90z2C3cDcCD4Gtmk36Obk9OuVBkISUBUNBY5iCeOseAFOyWGbgpPlXl58TxTcH2JtUyA1S2sPsLv9W3+E0XOEj2iq+cn0FU9q2l6G4AWYlCBAjiOzianHlAAG7D2BhrHSFk+yEMzW0Vj1dAzKZJ1I4mBy4VS3lxv/AAFglvs0fKIM+1buATl1Pj39mlLm28S1zA4ex0F5WtFJzWWHs22UmZ11PZQS5tS89oWLl5mtoRkt9XTKCBqdVABjXtr6fF0uqamnvfd9vI3xSlqaSaeyXH1b8/Db6jDsS90g6Ug5mdm/fkfaWxo41J1PafiprdBIu4wNPs2P8GnEcKXNiYy0lkK7KGDHq5wDq9vjI7FJ4/6mNgLbcY0dIAh6DrBgR7IkTw46UfaVrp5t/wB3ReW8Ugnt+9be0yL1iGtMyrLvlW/aLHKoJ0HdQXfDeS/n6LCZksghluLauWnDEQ8SF07dOZrrEX7eGP2KlyeJTSBxjMTB8BQzH7auuZVsXZPcrRz7xXg9J10cS3jq9Tmlg+NS32KG7uIC4vpcQ5EyWuXJkliASec8+NG7WNtu7G2ely4R5UBX1z2Bly6g8OBoBg9vYxLoFzF3FT+NZJnuy8aY9oW9o3bLN0oSyUljcCocoOaSVUsugnyrr6n2vGcWlCrVLf8AgdQbAWKxpCnLgwG5ThlAntOUDSrexr6Oh6TCoGAJfLbZRxMcGE6dk1Ds/YONv2y1m+lxNRK3WjhqOso7aL293sTbUM6KABqc68fM15EutzxWzf8AtlVhiwjh36QZ14NrwI9x1FR4+y2hjQTS7j9q9Hla3cXN1uBB1ykj3ii2CxT3bSPcbMxWewCewVzxyyfKM8SRInDz+VX9l+35H5UPTh5/KiOyfaPh8xVkRYYFbrkVuaYUiw/DxJ+NbeuMMeoK0+0LKkKWljOiwcscQdeNJOairZSMXJndi8ts9K5hLY6RjBOianQUD2Ftmxh7IQ49lVnLhvq7rIJZiEziDq8yZq5t/GWzg8UUOvRRwI9shfnQnY2xMHdwdtr1u4XECOlYHVQSyWi3skniNOVet7NhrxOd967P9SPUfBs8bn6WGsJvFg1a6xxlhzcVVBuW4IChpkcPaaaUvqWHKopv4IwVLHOgJyqwIkoCQWYHXs1mAKMYndDANcsJbzoLt0JJuqwC5WYyQTGi1BvhuPg8Pcw6WL1xuleDwuEKFJJQKNTIEePnXd004456YyacuzXh4JcehLE7VRxNLj5aKLbIsm0yo2GZiDDZ7JOY2raTmJkDMLjd0jnrRNsG4s2ERrZKWkUxcT2hJcce0xSg+wFmyFuMTctPcb7M6ZC+i/e0TU8AZ7K6XdkhWctBVLTqrIYfpmhRmOgWJOY6GIrq6rocnUKpSWz8PTxOje+B22bgm4Nay94ZW9IPdzHOrtmx0ZMnQmQToCIHv04Uq7tvlxd20EsnoRdYXEtC2zEDowJ4hTmnL20z7AxC31XMW00iT1W5q686+c6rB7iehjLctdOn3l9RW6vNg3BjKfKsqADzJcfme0gkAMoYaHMQ+n86U3o50AzgZhoHWAPrMjQ8IPPmetwpGwyjpVE5jnHszHtDtEmnG+okTIJLf0f/AOxBgg+PCdRlr7Bb0dsXZc+jt8t3FkmIu6kxAiZJPCmPae+NtCQtzpDHsoCTP9kRSduvcVbe0CwBUM0g6AgAzM8BV7ZW2sPoossOwIA0+kGvlPaeRx6iSRJQUm7LZ3jv3B9laQE8TdZge/qBfnVS4+Jukh78DsT9F19TRH/b+DGjE94NtuPeIqHG4yxiUyWsX0EceqFmeQLRHka8/wB9vuF4l2MweGYatdcxyLz6/p/Ig21ibltGYNMKSuaCAYJHH+fDiQt3cdYLLtC1A1JIB94eq67mXH0THYd+7pCD86vHNFdyTxy8AFh968RdMHDYa83YcPnb0Bo4u2V6JrX1e1Ya4FLhV6NuqZEqe+pMDuZtKyfsr1pQfuXWHjpkFNO5mFvQUxdtFA1DXXtu5Y6aKrERHM61suduFKe3hY0ItPdCJj7n2T5TDZTBnnGlC323iIIW8+UjhIIgjh769+/3dwrDXD2W8baGfdVa/ujs9VzNhMOqjiciqB5iK5IOKLO2eSbJxRa2jSZKgnxohi8Y623YMZCkiSeIEiju18HgVVhhcMBAPXzXFUQP3Vza+deY3NqXCIzt7qTRqew10htw30g4lWFsIjAlQCdDrEcu+jWJvs5zOxY9/AfhHAV5rsdpuWp450HowHyr0S5VJbOheUec4jCayXT2u0EiTEwDPOm/ZjDobQB0yLrw4ga0ExWXI5Eg5THXbjGmk0cC9VdNMo08qeW1E07svMmnU60EgyQI0FWME7ISShOnIqfnQu3gV5IPSplw3iPAmq6iNB5ccOaOP7M/A1Nhr4uMEQMWbQDKw95Gg76XltMODv8AmNdPvFfwK57ZDFiAc4BMdgJGlCWSkGMLdD1a3aZVA6QSB2H9aWr24V8YlrwuWspzadYGWFvuj9w+tDdj72Yxi7G8xAuMoBhhCmOffNEn36xI0K2j4qR8DXJPM3szqhirdFbbuykt4e5av4hLJulQGIlRkbNHETIoxsfeK0iWra42wQhExk9lQoGUTObTmYpJ+kzaLXrWFZwAz53IXhoFAifGquI3Nxt62HFvDZUgFkhGJIgBpGtfSdF0ql00baq73S5OPL1ywSak0r8fL7Wel7WxSYq7hz9a+zt3TcJUgMDkYKRl1OrHSYj0oHvXhr9x7D2UF0WxcJ66oZeANWmRAngONeeXNx8cBm+rkrrqrIRoSDznkapf7LxaObYt3s4AJVMxIDaAwvbXXhx6ZpwnFtdv6/M5cXUY+079f2+4z7F2FjEe4160zRZdEBvdsABcjTpxC6DTWmI7OuZsuRspuYVSQWYZbSyxJfkDxPBSNBXm92/jbPtNibcfeNxY8c1dW95cYvDE3PMg/EV2vJ1D3qP5/UvGarYYtni9afaGIKMHCHKWU9Yu/EaDNw5VmwdoXeldoAuLBdYgOukafeHbQa1vnjV/pp8UX5CrNvfzFjj0R8UI+Bryur6XNnyvI0h1NJUemptpiJUgryPbWV5wN/r/APybPof1rK5f8DP4G1IYcZuzZt2yzXmtgR1yqnKZ0OYAHzqjY2WG/Y7UtMeUkEzMj9489aZdubAx1+09pTbyMIgHz1JWqOx/or6OHum7dYQRbt5UkjUAFuPqKMet6hfiG94yC1sp8Pgsd0l225u22IZTxJUjmBrJoDulijkkGGXQxx0puxW5633KfVfqw5lndrmuuqzlB586Vt5djNssKbF3pEdpYkAFSsAKYkZTJ104Vw5c3vcmqXJSnVkW2rpfGlu20pbvaSAT5AelBNpuwuESYZJGvNDJjymiuxtj4nat641h0tEIJnNk6sKFzAGDz9av4j6LNpkgl7Dx2XW58faQVCda7bGi3ppIUFvvyZvU0Y2ffLW1Y6mBPzq7d+jraSf9WzfhuWz8WBqlc2LjcJbm/h3tpMAsBGp01BpJpSWxSDae4QtGo9pXyltmXiBPpQ1dqZeIHrXN3auYMsLB051FYnZVzVDDa+kLG2oVbkqAMshTpAgaqaZcFtW7jLa3bzEnkvBRpxygAT5V5TYuyqyRIAH5dPlXpW6pnDL/ADyFPOKRNO0X740PgfhXndrE3mVSbSNMAk21OswfZbuPKvR7o0NeX7O2hlzAPHWJ9et/mNNiSdk8ja4CeEwWa6qiVCMLpHR5OLyFJIkiQ3OOFODikzZmPJvk5pzZE8RJP+angpWycghdCdjthuqTmmWUcDPWYL86Zdn4Dqrm4KAO8kCjlvBmBIqX6v3U73Jp0DmsDkK0MPRP6vU+Cs2s6i9cW2nMsYmOQ76z2AtzrYu6pvIXZ8g/d6sz2niNKg2/9HNy8gVL6AhgesrAGOWhNXtub/W8PiVsWRaup0YY5W4akQGEjgBpFW8Nv9hm9tbiHwDD1Bn3VzSyOzojj7oU8F9HeLtKQWstLM0q7fvMTzUdtVcZuXjBMWgfB1+Zr0JN7sE39OB4q4+VbfefB/8A3Fv1P6VN03ZROSPFd/rDdJhLEdYWwpHYzMFI9RTTa2Xi0sHqXWudJ1b/AEsrkyibeRuJkEzS7vsTc2raC8Ytx452b503Xb+KSyCFu5gWJY5GtMo4ZREg9s19t066iHT41i0/SV+nHbxRHBj6PK3HqJQu9lJrjx389jlMHjkVM1jFNKgnItoqZ6xgKsnjznxNQ7m4tRjcY+JlGXolUMjZxlDEdUEQ2oozZ21ZcW+j2gpdBlHXSQCFzAQdQSo8Y1oRuohZ8bfN1WK4hoNyW6To1A8Dw51LIlolKUVBv8SW/P7ngZep6Gm8WJOSq1Wnb68HH0sbVR8OEGVmdkhsuV4nMQwBM8KU8MFGItBrVhgtkwhNooeqx+2MKGuAE8etKrRT6SNoB7dmRbXO4uHomDZeqZUgRlYZuFJm0tqFnzW2ZRABiV4ciMx8ePE16/s/HLDgcZu278vL7no4oe7T149Dv5btvzvzOsBhA632yFsgHIEKCwEk5hry4HjyojZ2KufCh7NzLdhjlS4HupMsLYgyYEAqI1E1DstlGEu5i+ZnGSNEkR0mY5CDKkaBhEcDpR2zeVcVZK4hl6OzJdykJcCnSyFZNCcvMNqa9Fu4vbx7eX3ZaMLQqY/DWhccW1ITMcoYnMFnqhpA6wGh041lE7WAu3BnFpWBJM5uOpnUtJ1rVdSjgSppfkBxPerW0RztXB4BG/wtQjevaOONlvqaC3wAEqbzAkT1ictrSeEnvFL1vfeP6E/n/wBKmXfkc7H9/wD0r8mfUzOtdPEq7D2XtNiue50KDiCwus2stPESddZnWni/sy0VANpSOwqD8aE4TfDCkDMzISOBUmPNQaK294cIw0vp5mD6HWoym5DqGktYCwqaKAo7AIHoKtYjEW7a5nZVHafl2mlTaG9mpXDrJ++3DyX9fSl++z3Wz3XLt3nQdwFKrC0Mm0d7ZlcOn/aMPgv6+lKO8Vhr9p+kcsxjVjoOsNB2VdUcKobyOVw11gSMoDSND1WU6d+lPFboD2QotseSQmQkGCAdQYmOHZrUDbvXDwX0M13hMQGvM1vEX8rIHBypmzJmQhswI0BXXTj4Ua2cbjABMSfO2jRMnWAI1nnXQ8bXcl76+wmvgGDdFkbpS4VRGnWiCT2fpXpG6tkpYyNEoSpjgcpiR3aUPu2bv1nCi5dR1LuerbyEZbTRJzGeI5UwYNIa4B96fUAmlycI0HbJWFKV3cj7reo/Sm80UtWe6hjBkPMtkbrtnZ9T0d2IA45Msx769M2bs4LDvx5L2d57+7+RatWQOVTXCFBZiAAJJPACqNW7J6nVEVxZrg2amw2JsOARiLMn91nCn+9Vi7ZC2zcLJkXiwdSvGOIPaRTaGJqRR6Cl/fdCMKfH4Bj8qZrN5HEowYTGhnXs99L+/wBphT4n/A9JLgfH8yPKNjMxxKkkmFOpM+Gp8abXOlI9rEFHzKYMevdRK1vG40ZAfDSoZsUpO0deOSQed4qNDmdV7WA9SBQPFbwDLKoc08+EeVEdmYsnEYJSATeKPpplBciO/RJnvpYdPPkMs0VsEMWwfbgzTlV1HVBY6WwdAJJMmnnbO0bS2MVlu3B0dtujRhGuQkq2YDK3d3UlbY3cxy4x8TZVTLkqVdAwEQNHI105VBtHHbTFm5ZazdKXTNzqM8kxqXUkToO+vuMePHmxQ05EqS2tep8/1vs/F1C1u9afHavvYjxTruxvlawuEfDPYLM2frjKYz8IBjhSjcEHK4Kt3iPVT8q6sIFMtBHISDJ8uVepn6bF1MdE+OTtxTlCVxDm+O3rWMNvobPR5ZBEAFpgAwPA+tL3QNMZT6VOWcklUA/CoEeBAqFUPAtHcZ+FUhgWOKjHgbLkllnqlyMeDRfqltMyF3vaoMuqiQDcYOD7RYAEDQyDRXEYhxiMQ/7QLa6POQygJlChQGzmSOEnlxrMJbYjAWc1ph+0yHMq2yTOa65DdUhVcwIAJ0qricepOLfo7RN0wDlELLEk2SCsDQ/unQjtqkVqdVfP5yS/Rf8ApeK2SLOyrgW0g6BTodWFkkySZ69smNdJPCK1THsqyq2bQbZV66cinpOmZc4YBlbKLvVlSNPhWVw5Opjrfw9/GP8A3F0oVhXOKUlGCmDBg9/KqVjaqkhcrZjyEGreIxWQS1twO3q/+qvzrRJb0dmpcC+l8vaViTmRipPOG6y+moqWzi3BHXb8xqsbwFy6ADluCRPbOYe+a0rGuhpEotnpuyv2SeHwJq0DQ/Y9ybQ8/wBfnVlrtc5RljNVXbizhrw7bbfCuumHbVgYY30e1bAZihHEAaggak08Yu9hG1R5Bh7pUoRMqSvbpy+Aoph9qMpnN7qNYncjEICWsXBGpgBoHacpPZQv/ZA5E10y8yCRh203S2mkdUP/AHgB8qed2sSbtsueJPw0+VeePs/LeVeMqT6EV6FubaOQqBJmABzmall4VFMfLDVuwWIVRJOgFMgwUVNsvZ4siTBcjU8h/CP51qdta0I0JOVlB1CgsSABqSeAA7aStvbZN85VkWwdO1iP3j3dg/kQb2b22muvhxcCrbYqwMjMynWSdIB4Chti8riVdGH8LqT6AzXVjh3ZCT7HQFaYcABJOgAEns0HOunMCTTf9Huws5+t3BoP2QPMjQ3PAageZ7K2bIoIOOGpjTulsL6thwlwAuxztIBgtHV74jj2zVvamwsNiEKXbYZTyBZeRHFSDwNXgT21hNeY5N7nXpoRcX9Euzm1UXrZ/huk/wDiBqE4r6HbX9HinH40VvepWvTiK1NHXIZHzvv9uK+zrSXGvJcV3yCAytOVmkgyI6vbSrYvXrt2wqk9IMlq1k6rDrQgBEay3GvpHfXdxdoYfoHdkAYNKhZkcAcwMDwivP8AA/RU9i/bupezBGDQV1kagzOhmDwrox5ko0+SU4NysXVbbNgkOuJyjmydIPWGqZd78WnthD+JCp9xFew2bhiCVBHKaV333wLyrXYjQh0aOMdhFZZJPgdxS5E8b6X8oN7A3MhEqwD5WU8GXMkEEd9Vf95Nm3J6TCBe09Eg18bZmvV9m7xYS5CLibGUKAqrdVeAGmWQfKvLfpWsq+KGUBQba6rEGC4mRxrvjKcVcZM5XJeBDabZVzg/Rzw69xT/AP1kV2+62Eu628WfzW3+GWkK5hyKd93NiYO/ZU3bbq2oLo54g81aRwiuiPX9UlSm/V3+ptmtzTbi3F1t4lZ5SrJ71JqC5uzj1UqtwMpMlVunKT2lXgE1Y2hufdUj6piXnse4UkaRkKiJ4yD3VFZ2dthDC3MxH7pdSfRxMd9VXtjqIOm0ZQvgqnZW0P8AkjyWx8q1RE39sjToQe/IPkayq/8AO5fL++odMvFgVNjBBpmL6HpQxWNZhFHEHtPbyqTEKzGWJJ76g2XtoKttCYCqQSwJzMWYgg8lC5R5GiuG2hZe6bQZDwKvMKxMSNeBGvpXzs1ks6McoJC7j7UQ3YamVeymHaODQucOQA7IWU/uwJ1B7RHDuoPZS4iFGw9zOkycsWwBrmLeHrRWprgOqKlyNuw7v2I8vgKnuXNaFbAv/YBj2TwjTWDHhVZ9s27hgOsd5A9ZilhjcnQZzS3CWIxnIev6UPuXJqM3Qefpr7xVS/iZ0X1/SuuMVFbHNKTZYu491BRXaDxAY5fMcDTNufgFuWSzCTnI9y/rSWor0b6O1nDv/WH/AArS5LaMi3ht2LPTdMZJyZMpjKNZJGkzTHsrZ9qySbaAE8Tx+PDyraLVi0tSSCWi9ckVoLXRFMA+bN7v+m4n+uf/ABGg8Ub3yH/H4oD/AJz/ABoNFVQr5HX6L9gXcdiCpZhYQA3WkxrwROx21EjgJPZX0PZshVCqAFUAAAQABoAOwRXz9uPvTewtprVslQpLsCikHNOuup0EeVeh7M3/ACVU3F4gGVXt14ZtK4c7bkdWOPw2egxXJWlzD72KwlbbXBz6Ih2Xva2crjxgjvqbDb4YR/6XKf41ZffEVGh6YcM1wSahw+0bVz2LqN+FlPwNTMaxiNm7qjJqQmuawQTtqwvRu5HsqxnwBNfPN+yew89eXGa+l7qAgggEHQg8weVLmL3MwLz/AMMintSUP92K6MOVQ5J5Meo+f3HhXAEcNPCvZ8Z9G2Fb2Wur/bzf4waB4v6L/uX/AM9v5qRXQuogyTwyPNc57TRLAbfv2VyKVKzMFQdSNTPHl20wYr6OsUvsm0/9plPvB+NCcVuljE44djz6hVvgZ91OssH3E93Jdi3h987yjW2h8JHlqTRWxvtbIi5ZYdhRhp3gGAD30m38BdTR7Nxe9rbD3xFVy44aT4/LyotRluzJyiekpvkkaOY/jtgt5lXAPpWq81JPL4VlL7qI3vJBDZ7oLahrasIB1k+ccKj2stk5WW1lAIzhdAy8/A9/fXOGEKPAV1ecEEdoodzVsdY6yiBbuHe51NQGM5R/BIqbG7UxPQOGvo4cDN1QHjTKVIiQdATx7aq2F6kd0VVv24tgTOtEDQ6XGXocqMCOjRdO5ApHupBpu2XqjAknXSTPZpS6cLbOgvqDzDq6wewMoYHxMUmPlj5OERYPRxRlaEpayvEgwRqplYPf50WWqkiVa9G+jU/YXB/+T/ItecrXo30aWW6G4xBCl9D2woBjt1pZcBQ621qYLXCGuppAkk1grkVsGsY+fd8NqXRjcSmYMgvPlW4iXVXrfui4rZfKONBb+NV1I6G0rH99A6nv6ufoxPcg7oq7vmf+PxX9c/xoVdw7KAWUjxiefEcRwPHsNWEDO7yjLdj7qz49erP15hdtJPVyj5/pVfdlZW94D/NWY1Mt6z4Af3m/WuaSTmzpi6ghqtuRBBgjmOI7weVX22qzftlS93uCH/71CrnzJHdQ+2NKxjXLdFy2ww7cGvWj3hL6/wDlsB5tVmziLifssco7i1+16gqV99CIrgmtfkHcarO8ONX+nsv43LB/zBqIWt7cSBL4ZXHM220/u5qQGNVmxwRwJgnhGnvrKN8GvxPTbG/tg+0lxfDKw+M+6iFjerCPwvAfiBX3kRXie0nJusxYyY1nU6DUnnVa3i7gYwxgCO3Xjz8qdY7Qrkj6Fs422/sXEb8LA/A101eJjC4pQD0YbSeqyM3ojEg90Vibw37TZS11D2ZmH900uh9g2j2dlFRtaFeXYffi+ONwn8Sg+8a0Sw+/7fvLbbwJU++aDizbD02HFUsTsm0/tW0b8Sg/EUFsb72zxtsPwkMPlV6zvXhm4uV/Ep+U0N0Zogbc/Bkz9WtflFZREbcw5/prf5hWU2tg0+R4dBIHZWZaPW8BpXL7Prr1nNQETSq+L5eNHG2fQ3aGFKtbHafhFGMlZmti/sh9G8v591LuKX7Rh/EfjTJg7WSZ5il/HSLrEaGZoQ+ZhyfKiO1IYA6aijqUCthmObUxEnjHITTtuxsB8XcgSttfbfs/hH8R/wBasyKLW6O7jYt8zSLKnrNzY/cXv7Tyr1jD2VRQigKqiABwAHKocHhUtItu2oVVEADl2+J76nmpt2MSJXU1GDXS0DEsGuhUYNbrGPm/eozjMT/XXP8AGaGvdZtCzEDgCSQPAGnP6WFA2g0ACbaEwAJJzST2nvpMHhVUK+Q/ukNLn9n51Y28o6awe0gf3l/Wud3b5fpWIE9XgIHPlW94n1st91p9Cp+VS/Gyr+RB29iLdvR7iqSCVBmWy8QIB18a1avq4lWB8D8RSnma/ca8QYOiDsUVvIQZBIPdpUJwjdIvjtq2NZqJ6AptK6v70/iE++phtg809DU9DHCT0v7U/bW/L4miQ2kD+6fdQraVzNdtkfzBmqYlTEycE2Mudc/zyqLZ41WebAnzM0T2NhRfvsIkBWPjplUa9rMtMG08Fh7Vq0Ra67r1WGkEKCS0d1Nfwit/EBv9oKXKc6uriWIyk5l+6wDr6NIFLGD62JY9k/pTGlSnFRHhKzi9hLLcbZQ9ttjH5WkekVSv7GB9i8v9tSh9RI99EHqMmgpNBpMDXdh3wSVUHQQUdDwnkDPZUgweLHC3d9CaJVo0/vH3F0JcAxvrg/orn/dn9KyiWbvrVHX5IGl+IQStnn41qsokjYFBtt/t7Pn8RWVlNHkDL20dMsdp+FGr1hCsFVIjgQCPSsrKMQvhCRtu0qXIVQo7gB8K9n3JtgYKzAAlZMDiSTJPaaysqr4Jhp6xOVZWUrCdL/PuqUfz6VqsrAOlrf8APwrKysY8T+lf/p5/qrfwNJT1lZVVwLLkPbr+zd8vnXW3/YT8XyrKyo/jZX8CCGDUdEug9kfCoMQKysrk/Edq4KF0VwtarKqKTCqWK/aJ51lZTY+SeX5Rq3C/bt+H9T8QPSi+8o+xwv4f/LFZWUHwI/nETYn7S5/PM0xpWVlLm5HxfKafhULVlZUihlctWVlEBo1lZWURT//Z",
-            description: "223 is a laboratory with a capacity of 40 people",
-        };
-        this.toggleSearch = false;
-
-        this.shapes = [];
-        this.roomTypes = [];
-        this.loaded = false;
-        this.mainLayer = new Konva.Layer();
-        this.routeLayer = new Konva.Layer();
-        this.textLayer = new Konva.Layer();
-        this.stage.add(this.mainLayer);
-        this.stage.add(this.routeLayer);
-        this.stage.add(this.textLayer);
-
-
-        this.cachedCanvases = [];
-
-        this.floorNum = floorNum;
-
-        this.navArrow = new Konva.Arrow({
-            stroke: "#bb0000",
-            strokeWidth: 3,
-            dash: [12, 7],
-            lineCap: "round",
-            tension: 10,
-            pointerLength: 2,
-            pointerWidth: 3,
-        });
-
-        this.navArrow.cache();
-
-        this.stage.on("resize", () => {
-            this.stage.width = window.innerWidth;
-            this.stage.height = window.innerHeight;
-        });
-
-        this.stage.on("wheel", (e) => {
-            zoomStage(e, this.stage);
-        });
-    }
-
-    clearMap() {
-        this.mainLayer.removeChildren();
-        this.shapes.forEach(shape => shape.clearText())
-        this.shapes = [];
-    }
-
-    deserializeMap(data) {
-        this.clearMap();
-
-        let dsrData = JSON.parse(data);
-        dsrData.forEach((shape) => {
-            if (shape.className !== "InfoPin") {
-                console.log("SHAPE ATTRS CREATE: " + JSON.stringify(shape.attrs));
-                const renderedShape = Factory.createRenderedShape(shape.className, shape.attrs);
-                addEventHandling(renderedShape, this, "click");
-                this.shapes.push(renderedShape);
-                console.log(renderedShape)
-            }
-        });
-    }
-
-    displayRoomNames() {
-        this.shapes.forEach((shape) => {
-            shape.displayName(this.textLayer);
-        });
-
-    }
-
-    loadMapN(floorData) {
-        if (floorData == null || floorData === "") return;
-
-        this.deserializeMap(floorData);
-        this.shapes.forEach((shape) => {
-            this.mainLayer.add(shape);
-        });
-        this.displayRoomNames();
-        this.initializeRoomTypes();
-
-    }
-
-    clearRoute() {
-        this.routeLayer.removeChildren();
-    }
-
-
-
-    drawRouteNEW(nodes, offset = 0) {
-
-        this.clearRoute();
-        console.log("====PATH====");
-        nodes.forEach((node) => console.log("NODE", node));
-
-        let idx = offset;
-        let buff = [nodes[idx].coordinates.x, nodes[idx].coordinates.y];
-
-        ++idx;
-
-        console.log("INIT BUFFER", buff);
-        console.log("INIT IDX", idx);
-
-        const drawNextSegment = () => {
-
-            if (idx >= nodes.length){
-                console.log("FLOOR NUM DISPLAY: " + this.floorNum)
-                let stageInfo = {stage:this.stage.clone(),floor:this.floorNum};
-                this.cachedCanvases.push(stageInfo);
-                dispatchCustomEvent("navend",this.downloadURI)
-                return;
-            }
-
-            const currentNode = nodes[idx - 1];
-            const nextNode = nodes[idx];
-
-            if (nextNode.floorNumber !== currentNode.floorNumber) {
-                let stageInfo = {stage:this.stage.clone(),floor:this.floorNum};
-                this.cachedCanvases.push(stageInfo);
-                triggerNavigate(nodes, idx, nextNode.floorNumber, nextNode);
-                return;
-            }
-
-            const startX = currentNode.coordinates.x;
-            const startY = currentNode.coordinates.y;
-            const endX = nextNode.coordinates.x;
-            const endY = nextNode.coordinates.y;
-
-            const numSegments = 10;
-
-            const deltaX = (endX - startX) / numSegments;
-            const deltaY = (endY - startY) / numSegments;
-
-            const drawSegment = (i) => {
-                const segmentX = startX + deltaX * i;
-                const segmentY = startY + deltaY * i;
-
-                buff.push(segmentX, segmentY);
-
-                let line = this.navArrow.clone({ points: [...buff] });
-                this.routeLayer.add(line);
-                this.routeLayer.draw();
-
-                buff = [segmentX, segmentY];
-            };
-
-            let segmentIdx = 1;
-            const interval = setInterval(() => {
-                drawSegment(segmentIdx);
-                segmentIdx++;
-
-                if (segmentIdx > numSegments) {
-                    clearInterval(interval);
-                    idx++;
-                    setTimeout(drawNextSegment, 60);
-                }
-            }, 30);
-        };
-
-        drawNextSegment();
-    }
-
-    initializeRoomTypes() {
-        this.roomTypes = this.shapes
-            .filter((shape) => shape.class === "Room" && shape.info.type !== "")
-            .map((shape) => shape.info.type);
-    }
-
-    getShapeByType(type) {
-        return this.shapes.filter((shape) => shape.class === type)
-    }
-
-    //ova e loso ne trebit vaka
-    highlightShape(roomName) {
-        let foundShape = this.shapes.filter((shape) => shape.info.name === roomName)[0];
-        foundShape.highlight();
-    }
-
-     downloadURI(uri, name) {
-        let link = document.createElement('a');
-        link.download = name;
-        link.href = uri;
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-    }
-
-
-    getRouteImages(mapDetails = { mapName: "mapName", from: "from", to: "to" }) {
-
-        const pdf = new jsPDF("p", "mm", "a4");
-        const pageWidth = pdf.internal.pageSize.getWidth();
-        const pageHeight = pdf.internal.pageSize.getHeight();
-        const margin = 10;
-        let yOffset = margin;
-
-        const imagesData = [];
-
-        let minWidth = 800;
-
-        this.cachedCanvases.forEach((canvas, index) => {
-            console.log("CANVASL " + JSON.stringify(canvas.stage))
-            let dsrStage = Konva.Node.create(canvas.stage, document.createElement("div"));
-
-            let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
-
-            dsrStage.getLayers().forEach(layer => {
-                layer.getChildren().forEach(shape => {
-                    const shapeX = shape.x();
-                    const shapeY = shape.y();
-                    const width = shape.width() * shape.scaleX();
-                    const height = shape.height() * shape.scaleY();
-
-                    minX = Math.min(minX, shapeX - shape.offsetX() * shape.scaleX());
-                    minY = Math.min(minY, shapeY - shape.offsetY() * shape.scaleY());
-                    maxX = Math.max(maxX, shapeX + width - shape.offsetX() * shape.scaleX());
-                    maxY = Math.max(maxY, shapeY + height - shape.offsetY() * shape.scaleY());
-                });
-            });
-
-            let padding = 50;
-
-            const virtualWidth = maxX - minX + padding;
-            const virtualHeight = maxY - minY + padding;
-
-            const scaleDownFactor = Math.min(pageWidth / virtualWidth, pageHeight / virtualHeight);
-
-            dsrStage.size({ width: virtualWidth, height: virtualHeight });
-            dsrStage.position({ x: -minX, y: -minY });
-            dsrStage.batchDraw();
-
-            let canvasImageURI = dsrStage.toDataURL({
-                pixelRatio: 1
-            });
-
-            imagesData.push(canvasImageURI);
-            console.log(`Generated Image ${index + 1}`);
-        });
-
-
-
-        imagesData.forEach((imageURI, index) => {
-            const text = `Floor: ${this.cachedCanvases[index].floor}`;
-            pdf.text(text, margin, yOffset + 5);
-
-            const img = new Image();
-            img.src = imageURI;
-
-            const maxWidth = pageWidth - 2 * margin;
-            const maxHeight = pageHeight - 2 * margin;
-            let imgWidth = maxWidth;
-            let imgHeight = maxHeight / 2
-
-            if (imgHeight > maxHeight) {
-                imgHeight = maxHeight;
-                imgWidth = (pageWidth * maxHeight) / pageHeight;
-            }
-
-            if (yOffset + imgHeight > pageHeight - margin) {
-                pdf.addPage();
-                yOffset = margin;
-            }
-
-            pdf.addImage(imageURI, "PNG", margin, yOffset, imgWidth, imgHeight);
-            yOffset += imgHeight + 10;
-        });
-
-        pdf.save(`${mapDetails.mapName}-${mapDetails.from}-->${mapDetails.to}.route.pdf`);
-    }
-
-
-
-setFilter(filter) {
-        let rooms = this.getShapeByType("Room")
-        if (filter === "All") {
-            rooms.forEach((shape) => {
-                shape.unHighlight()
-            })
-        } else {
-            rooms.filter((shape) => shape.info.type === filter).forEach((shape) => {
-                shape.highlight()
-            })
-            rooms.filter((shape) => shape.info.type !== filter).forEach((shape) => {
-                shape.unHighlight()
-            })
-        }
-
-    }
+  search() {
+    console.log("VLEZE VO SEARCH");
+  }
 }
Index: imaps-frontend/src/scripts/net/HttpService.js
===================================================================
--- imaps-frontend/src/scripts/net/HttpService.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/net/HttpService.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -3,7 +3,7 @@
 
 class HttpService {
-    constructor(auth = false) {
+    constructor(URL = config.apiBaseUrl, auth = false) {
+      this.baseURL = URL;
       this.auth = auth;
-      this.responseType = 'json';
     }
 
@@ -11,14 +11,4 @@
         this.auth = true;
     }
-    setResponseType(type){
-        if(type === 'text'){
-            this.responseType = 'text';
-        } else if (type === 'json'){
-            this.responseType = 'json'
-        } else {
-            console.error('unsupported response type in http service')
-        }
-    }
-
 
     async request(method, endpoint, data = null) {
@@ -43,5 +33,5 @@
       }
   
-      const response = await fetch(`${endpoint}`, options);
+      const response = await fetch(`${this.baseURL}${endpoint}`, options);
       
       if (!response.ok) {
@@ -64,12 +54,6 @@
 
       console.log("HTTPSERVICE: RESPONSE:",response);
-
-      if(this.responseType === 'json'){
-          return response.json();
-      } else if (this.responseType === 'text'){
-          return response.text()
-      } else{
-          console.error('bad resp type')
-      }
+  
+      return response.json();
     }
   
Index: imaps-frontend/src/scripts/net/netconfig.js
===================================================================
--- imaps-frontend/src/scripts/net/netconfig.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/net/netconfig.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,66 +1,14 @@
-export const API_BASE_URL = "http://localhost:8080/api";
-export const API_PROTECTED = `${API_BASE_URL}/protected`
-export const API_PUBLIC = `${API_BASE_URL}/public`
-export const API_AUTH = `${API_BASE_URL}/auth`
-
 
 const config = {
-    my_maps: {
-        display: `${API_PROTECTED}/my-maps`,
-        save: `${API_PROTECTED}/my-maps/save`,
-        add: `${API_PROTECTED}/my-maps/create`,
-        load: `${API_PROTECTED}/my-maps/load`,
-        delete: `${API_PROTECTED}/my-maps/delete`,
-        publish: `${API_PROTECTED}/publish/add`,
-        publish_get: `${API_PROTECTED}/publish/get`,
-        edit_map_info: `${API_PROTECTED}/my-maps/edit`,
-    },
-    room_types: {
-        display: (auth) => {
-            return auth ? `${API_PROTECTED}/room-types` : `${API_PUBLIC}/room-types`
-        },
-        add: `${API_PROTECTED}/room-types/add`,
+    apiBaseUrl: "http://localhost:8080/api",
 
-    },
-    floors: {
-        add: `${API_PROTECTED}/floors/add`,
-        load: `${API_PROTECTED}/my-maps/load`,
-        delete: `${API_PROTECTED}/floors/delete`,
-    },
-    view_maps: {
-        display: `${API_PUBLIC}/maps`,
-        load: (auth) => {
-            return auth ? `${API_PROTECTED}/load-map` : `${API_PUBLIC}/load-map`
-        },
-        navigate: `${API_PUBLIC}/navigate`,
-        add_favourite: `${API_PROTECTED}/favourites/add`,
-        add_report: `${API_PROTECTED}/reports/create`,
-    },
-    favourites: {
-        display: `${API_PROTECTED}/favourites`,
-        add: `${API_PROTECTED}/favourites/add`,
-        delete: `${API_PROTECTED}/favourites/delete`,
-    },
-    auth:{
-        login: `${API_AUTH}/login`,
-        register: `${API_AUTH}/register`,
-        verify: `${API_AUTH}/verify`,
-        oauth: {
-            github: {
-                state: `${API_BASE_URL}/oauth/state`,
-                redirectUri : `${API_BASE_URL}/oauth/callback`
-            }
-        }
-
-    },
-    admin:{
-        display: `${API_BASE_URL}/admin`,
-        load_pr: `${API_BASE_URL}/admin/load-pr`,
-        approve_pr: `${API_BASE_URL}/admin/pr/approve`,
-        deny_pr: `${API_BASE_URL}/admin/pr/deny`,
-        load_reports: `${API_BASE_URL}/admin/load-reports`
+    endpoints: {
+        login: "/auth/login",
+        register: "/auth/register",
+        verify: "/auth/verify",
+        render: "/protected/render",
+        publicMapData: "/public/mapData"
     }
 };
 
-
 export default config;
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedEntrance.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedEntrance.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedEntrance.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,44 +1,37 @@
-import RenderedMapShape from "../base/RenderedMapShape.js";
-import {_registerNode} from "konva/lib/Global";
-import RenderedRoom from "./RenderedRoom.js";
+import RenderedMapShape from "./RenderedMapShape.js";
 
-export default class RenderedEntrance extends RenderedMapShape {
-  constructor(attrs, scaleX, scaleY) {
-    super({
-      x: attrs.x,
-      y: attrs.y,
-      width: attrs.width,
-      height: attrs.height,
-      fill: "#7fef83",
-      stroke: "black",
-      strokeWidth: 1,
-      draggable: false,
-      rotation: attrs.rotation,
-      cornerRadius: 3,
-      zIndex: 0,
-    });
+export default class RenderedEntrance extends RenderedMapShape{
+    constructor(attrs,scaleX,scaleY){
+        super({
+            x: attrs.x,
+            y: attrs.y,
+            width: attrs.width * scaleX,
+            height: attrs.height * scaleY,
+            fill: '#1c3cff',
+            stroke: 'black',
+            strokeWidth: 1,
+            draggable: false,
+            rotation: attrs.rotation,
+            cornerRadius:3,
+            zIndex: 0
+        });
 
-    this.info.name = attrs.obj_name;
-    this.info.description = attrs.description;
-    this.info.isMainEntrance = attrs.is_main_entrance;
+        this.info.name = attrs.obj_name;
+        this.info.description = attrs.description;
+        
+    
+        this.on("mouseenter",() => {
+        console.log("HOVER ROOM IN", this.x());
+        console.log(this.info.name,"NAME");
+        this.stroke('purple');
+        })
+        this.on("mouseleave", () => {
+            console.log("HOVER ROOM OUT");
+            this.opacity(1);
+            this.stroke('black')
 
-    this.floorNum = attrs.floor_num
+        })
 
-    this.class = "Entrance";
-
-    console.log("ATTRS VIEW:  " + attrs)
-
-    this.on("mouseenter", () => {
-      this.stroke("purple");
-    });
-    this.on("mouseleave", () => {
-      this.opacity(1);
-      this.stroke("black");
-    });
-
-    //this.initText();
-  }
+        this.initText()
+    }
 }
-
-RenderedEntrance.prototype.className = "RenderedEntrance";
-_registerNode(RenderedEntrance);
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedMapShape.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedMapShape.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedMapShape.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,45 @@
+import Konva from "konva";
+
+export default class RenderedMapShape extends Konva.Rect{
+    constructor(config){
+        if (new.target === RenderedMapShape) {
+            throw new Error("Cannot instantiate abstract class RenderedMapShape directly.");
+          }
+
+          super(config);
+
+          this.info = {
+            name: "",
+            description: "",
+          }
+          this.infoText = null;
+          this.textOffsetX = 0;
+          this.textOffsetY = 0;
+    }
+
+    initText() {
+      this.infoText = new Konva.Text({
+        x: this.x() + this.textOffsetX,
+        y: this.y() + this.textOffsetY,
+        text: this.info.name || "no name",
+        fontSize: 12,
+        fontFamily: 'Verdana',
+        fill: 'black',
+      });
+    }
+  
+    updateTextPosition() {
+      if(this.infoText){
+        this.infoText.x(this.x() + this.textOffsetX);
+        this.infoText.y(this.y() + this.textOffsetY);
+      }
+    }
+  
+    displayName(layer) {
+        if(this.infoText != null){
+            layer.add(this.infoText);
+        }
+
+    }
+    
+}
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedRoom.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedRoom.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedRoom.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,62 +1,41 @@
-import RenderedMapShape from "../base/RenderedMapShape.js";
-import {_registerNode} from "konva/lib/Global";
+import RenderedMapShape from "./RenderedMapShape.js";
 
-export default class RenderedRoom extends RenderedMapShape {
-  constructor(attrs, scaleX, scaleY) {
-    super({
-      x: attrs.x,
-      y: attrs.y,
-      width: attrs.width,
-      height: attrs.height,
-      fill: "#A2D9FF",
-      stroke: "black",
-      strokeWidth: 1,
-      draggable: false,
-      rotation: attrs.rotation,
-      cornerRadius: 3
-    });
+export default class RenderedRoom extends RenderedMapShape{
+    constructor(attrs,scaleX,scaleY){
+        super({
+            x: attrs.x,
+            y: attrs.y,
+            width: attrs.width * scaleX,
+            height: attrs.height * scaleY,
+            fill: 'white',
+            stroke: 'black',
+            strokeWidth: 1,
+            draggable: false,
+            rotation: attrs.rotation,
+            cornerRadius:3,
+            zIndex: 0
+        });
 
-    console.info("FNUM RENDER:",attrs.floor_num)
+        this.info.name = attrs.obj_name;
+        this.info.description = attrs.description;
 
-    this.floorNum = attrs.floor_num
+        this.textOffsetX = -50
+        
+    
+        this.on("mouseenter",() => {
+        console.log("HOVER ROOM IN", this.x());
+        console.log(this.info.name,"NAME");
+        this.opacity(0.7);
+        this.fill("pink");
+        })
+        this.on("mouseleave", () => {
+            console.log("HOVER ROOM OUT");
+            this.opacity(1);
+            this.fill("white");
+        })
 
-    this.info.name = attrs.obj_name;
-    this.info.type = attrs.room_type;
-    this.info.description = attrs.description;
-    this.class = "Room";
-    this.textOffsetX = -50;
+        this.initText()
+    }
 
-    this.eventName = "openRoomInfoPanel"
-
-    this.on("mouseenter", () => {
-      console.log(this.info.name, "NAME");
-      this.fill("#65c3f8");
-    });
-    this.on("mouseleave", () => {
-      this.fill("#A2D9FF");
-    });
-
-
-
-    // searched(){
-    //   this.fill("#b92d39")
-    // }
-    // unsearched(){
-    //   this.fill("#A2D9FF");
-    // }
-
-    // console.log("ATTRS: " + attrs);
-
-    this.initText();
-  }
-  highlight(){
-    this.fill("rgba(29,238,78,0.49)");
-    this.strokeWidth(2)
-  }
-  unHighlight(){
-    this.fill("#A2D9FF");
-    this.strokeWidth(1);
-  }
+   
 }
-RenderedRoom.prototype.className = "RenderedRoom";
-_registerNode(RenderedRoom);
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedStairs.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedStairs.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,43 +1,0 @@
-import RenderedMapShape from "../base/RenderedMapShape.js";
-import Stairs from "../shapes/Stairs.js";
-import {_registerNode} from "konva/lib/Global";
-import Konva from "konva";
-export default class RenderedStairs extends RenderedMapShape{
-    constructor(attrs,scaleX,scaleY) {
-        super({
-            x: attrs.x,
-            y: attrs.y,
-            width: attrs.width ,
-            height: attrs.height,
-            fill: "rgb(199,190,133)",
-            stroke: "rgb(16,15,15)",
-            strokeWidth: 1,
-            name: "mapObj",
-            rotation: attrs.rotation,
-        });
-
-
-        this.floorNum = attrs.floor_num;
-        this.info.name = attrs.obj_name;
-        //this.initText()
-    }
-
-
-
-
-    _sceneFunc(context, shape) {
-        const { width, height} = this.attrs;
-
-        let steps = 5;
-        let offset = 10;
-        context.beginPath()
-        for(let i = 0; i < steps; i++){
-            context.rect((-offset) * i,(offset * 0.6) * i,width * 0.86,height/2)
-            context.fillStrokeShape(shape);
-        }
-        context.closePath()
-    }
-}
-
-RenderedStairs.prototype.className = "RenderedStairs";
-_registerNode(RenderedStairs);
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedWall.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedWall.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedWall.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,3 @@
-import RenderedMapShape from "../base/RenderedMapShape.js";
-import {_registerNode} from "konva/lib/Global";
+import RenderedMapShape from "./RenderedMapShape.js";
 
 export default class RenderedWall extends RenderedMapShape{
@@ -7,7 +6,7 @@
             x: attrs.x,
             y: attrs.y,
-            width: attrs.width,
-            height: attrs.height,
-            fill: '#4B4B4B',
+            width: attrs.width * scaleX,
+            height: attrs.height * scaleY,
+            fill: 'grey',
             stroke: 'black',
             strokeWidth: 1,
@@ -19,5 +18,2 @@
     }
 }
-
-RenderedWall.prototype.className = "RenderedWall";
-_registerNode(RenderedWall);
Index: imaps-frontend/src/scripts/shapes/Entrance.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Entrance.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/shapes/Entrance.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,109 +1,58 @@
-import {_registerNode} from "konva/lib/Global";
-import MapNode from "../base/MapNode.js";
-import {node} from "prop-types";
-import ShapeRegistry from "../util/ShapeRegistry.js";
-import ShapeQuery from "../util/ShapeQuery.js";
 import Konva from "konva";
+import MapShape from "./MapShape";
+import { _registerNode } from "konva/lib/Global";
+export default class Entrance extends MapShape {
+  constructor(mousePos, blockSize, layer, rotation, snap,id,scaleX = 1, scaleY = 1) {
+    super(
+      {
+        x: mousePos.x,
+        y: mousePos.y,
+        width: blockSize * scaleX,
+        height: blockSize * 2 * scaleY,
+        fill: "#0051ff",
+        stroke: "grey",
+        strokeWidth: 1,
+        opacity: 0.7,
+        name: "mapObj",
+        draggable: true,
+        rotation: rotation,
+        zIndex: 1,
+      },
+      layer,
+      blockSize,
+      snap
+    );
+    this.type = "Entrance";
+    this.modalEventName = "openEntranceModalEvent";
 
-export default class Entrance extends MapNode {
+    this.id = id;
 
-    constructor(attrs, id) {
+    this._info = {
+      name: `Entrance ${id}`,
+      connectedRoom: "",
+      description: "",
+      isMainEntrance: false,
+      selectedPin: "",
+      selectedPins: [],
+    };
 
-        if (!attrs.fromLoad) {
-            attrs.height *= 2;
-        }
-        super(
-            {
-                x: attrs.position.x,
-                y: attrs.position.y,
-                width: attrs.width * attrs.scaleX,
-                height: attrs.height * attrs.scaleY,
-                fill: "rgb(126,238,167)",
-                stroke: "#252627",
-                strokeWidth: 1,
-                opacity: 0.9,
-                name: "mapObj",
-                draggable: true,
-                rotation: attrs.rotation,
-                zIndex: 1,
-            },
-            attrs.layer,
-            attrs.blockSize,
-            attrs.snap
-        );
-        this.type = "Entrance";
-        this.eventName = "openEntranceModalEvent";
-        this.floorNum = attrs.floorNum
+    this.initText();
+  }
 
-        this.id = id;
+  loadInfo(attrs) {
+    this.info.name = attrs.obj_name;
+    this.info.connectedRoom = attrs.connected_room;
+    this.info.description = attrs.description;
+    this.info.isMainEntrance = attrs.is_main_entrance;
+    this.info.selectedPins = attrs.connected_pins;
+  }
 
-        this._info = {
-            name: `Entrance${id} [${this.floorNum}F]`,
-            connectedRoom: "",
-            description: "",
-            isMainEntrance: false,
-            selectedPin: "",
-            selectedPins: [],
-        };
-
-        this.initText();
-        this.moveToTop();
-
-        console.log("room CONNECT: " + attrs.connected_room,this.info.connectedRoom + "CON")
-        console.log("entrance: " + this.info.name)
-    }
-
-    loadInfo(attrs) {
-        this.info.name = attrs.obj_name ?? `Entrance${this.id} [${this.floorNum}F]`;
-        this.info.connectedRoom = attrs.connected_room ?? ``;
-        this.info.description = attrs.description ?? ``;
-        this.info.isMainEntrance = attrs.is_main_entrance ?? false;
-        this.info.selectedPins = attrs.connected_pins ?? [];
-    }
-
-
-    saveShapeDetails() {
-        console.info("fnum entrance",this.attrs.floorNum)
-        this.setAttr("connected_pins", this.info.selectedPins);
-        this.setAttr("obj_name", this.info.name);
-        this.setAttr("description", this.info.description);
-        this.setAttr("is_main_entrance", this.info.isMainEntrance);
-        this.setAttr("connected_room", this.info.connectedRoom);
-        this.setAttr("floor_num",this.floorNum);
-    }
-
-    connect(node, draw = true) {
-        if(this.floorNum !== node.floorNum) return;
-
-        super.connect(node)
-    }
-
-    setInfo(infoObj) {
-        this.info = infoObj;
-        this.setHighlight();
-    }
-
-    setHighlight(){
-        console.log("info room: " + this.info.connectedRoom)
-        if(this.info.connectedRoom == null || this.info.connectedRoom === "" ){
-            console.log("vleze if")
-            this.strokeWidth(2);
-            this.stroke("#8a000d")
-        }else{
-            this.strokeWidth(1)
-            this.stroke("black")
-        }
-    }
-
-    onPlace() {
-        ShapeQuery
-            .findAllByTypeAndFloor(this.floorNum,"Room")
-            .forEach(room => {
-                if(Konva.Util.haveIntersection(room.getClientRect(),this.getClientRect())){
-                    this.info.connectedRoom = room.info.name;
-                }
-            })
-        this.setHighlight()
-    }
+  saveShapeDetails() {
+    this.setAttr("connected_pins", this.info.selectedPins);
+    this.setAttr("obj_name", this.info.name);
+    this.setAttr("description", this.info.description);
+    this.setAttr("is_main_entrance", this.info.isMainEntrance);
+    this.setAttr("connected_room", this.info.connectedRoom);
+  }
 }
 
Index: imaps-frontend/src/scripts/shapes/InfoPin.js
===================================================================
--- imaps-frontend/src/scripts/shapes/InfoPin.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/shapes/InfoPin.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,35 +1,32 @@
-
+import Konva from "konva";
+import MapShape from "./MapShape";
+import Factory from "../util/Factory";
 import { _registerNode } from "konva/lib/Global";
-import MapNode from "../base/MapNode.js";
-import {node} from "prop-types";
-import draw from "../../pages/Draw/Draw.jsx";
-export default class InfoPin extends MapNode {
-  constructor(attrs,id) {
-    attrs.snap = false;
+export default class InfoPin extends MapShape {
+  constructor(mousePos, blockSize, layer, snappable,id) {
     super(
       {
-        x: attrs.position.x,
-        y: attrs.position.y,
-        radiusX: attrs.blockSize * 0.5,
-        radiusY: attrs.blockSize * 0.7,
-        tailHeight: attrs.blockSize * 1.2,
-        fill: "#f60000",
+        x: mousePos.x,
+        y: mousePos.y,
+        radiusX: blockSize * 0.5,
+        radiusY: blockSize * 0.7,
+        tailHeight: blockSize * 1.2,
+        fill: "#d70113",
         stroke: "#1b1b1b",
-        strokeWidth: 1,
+        strokeWidth: 0.2,
         draggable: true,
         name: "mapObj",
       },
-      attrs.layer,
-      attrs.blockSize,
-      attrs.snap
+      layer,
+      blockSize,
+      snappable
     );
 
     this.id = id;
-    this.eventName = "openPinModalEvent";
-    this.floorNum = attrs.floorNum;
 
+    this.modalEventName = "openPinModalEvent";
     this.type = "InfoPin";
     this._info = {
-      name: `Pin${id} [${this.floorNum}F]`,
+      name: `Pin ${id}`,
       selectedPins: [],
       description: "",
@@ -37,15 +34,14 @@
 
     this.on("mouseover", () => {
-      this.fill("#FFD700");
+      this.fill("yellow");
     });
     this.on("mouseout", () => {
-      this.fill("#f60000");
+      this.fill("red");
     });
-
 
     this.initText();
   }
   _sceneFunc(context, shape) {
-    const { radiusX, radiusY, tailHeight } = this.attrs; // attrs od konva
+    const { radiusX, radiusY, tailHeight } = this.attrs;
 
     context.beginPath();
@@ -63,10 +59,8 @@
   }
 
-
   loadInfo(attrs) {
     this.info.name = attrs.obj_name;
     this.info.selectedPins = attrs.connected_pins;
     this.info.description = attrs.description;
-    this.floorNum = attrs.floor_num
   }
 
@@ -75,11 +69,5 @@
     this.setAttr("connected_pins", this.info.selectedPins);
     this.setAttr("description", this.info.description);
-    this.setAttr("floor_num",this.floorNum)
     console.log(this.info, "vnatre vo info");
-  }
-
-  connect(node, draw = true) {
-    if(this.floorNum !== node.floorNum) return;
-    super.connect(node)
   }
 }
Index: imaps-frontend/src/scripts/shapes/MapShape.js
===================================================================
--- imaps-frontend/src/scripts/shapes/MapShape.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/scripts/shapes/MapShape.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -0,0 +1,123 @@
+import Konva from "konva";
+
+export default class MapShape extends Konva.Shape {
+    constructor(config, layer, blockSize, snap) {
+        if (new.target === MapShape) {
+            throw new Error("Cannot instantiate abstract class BaseShape directly.");
+        }
+        super(config);
+        this.layer = layer;
+        this.blockSize = blockSize;
+        this._type = "";
+        this.snappable = snap;
+        this._info = {};
+        this.modalEventName = "";
+        this.infoText = null;
+
+        this.shadowForStrokeEnabled(false);
+        this.on("mouseover", () => (document.body.style.cursor = "pointer"));
+        this.on("mouseout", () => (document.body.style.cursor = "default"));
+        // this.on("dblclick", (e) => {
+        //   this.moveToTop();
+        //   this.getLayer()
+        //     .find("Transformer")
+        //     .forEach((t) => t.moveToTop());
+        // });
+
+        if (snap) {
+            this.on("dragend", this.snapToGrid.bind(this));
+            this.on('dblclick', this.snapToGrid.bind(this))
+        }
+
+        this.on("transform", () => {
+            const scaleX = this.scaleX();
+            const scaleY = this.scaleY();
+            this.strokeWidth(1 / Math.max(scaleX, scaleY));
+        });
+
+        this.on('dragend', () => {
+            if (this.infoText) {
+                this.updateTextPosition();
+            }
+        });
+
+    }
+
+    loadInfo(attrs) {
+        console.log("Abstract function");
+    }
+
+
+    initText() {
+        this.textOffsetX = 0;
+        this.textOffsetY = -30;
+        this.infoText = new Konva.Text({
+            x: this.x() + this.textOffsetX,
+            y: this.y() + this.textOffsetY,
+            text: this._info.name,
+            fontSize: 12,
+            fontFamily: 'Verdana',
+            fill: 'white',
+        });
+    }
+
+    updateTextPosition() {
+        if (this.infoText) {
+            this.infoText.x(this.x() + this.textOffsetX);
+            this.infoText.y(this.y() + this.textOffsetY);
+        }
+    }
+
+    displayName(layer) {
+        if (this.infoText) {
+            this.infoText.text(this._info.name);
+            layer.add(this.infoText);
+        }
+    }
+
+    _sceneFunc(context) {
+        let width = this.width();
+        let height = this.height();
+        context.beginPath();
+        context.rect(0, 0, width, height)
+        context.closePath();
+        context.fillStrokeShape(this);
+    }
+
+    clearText() {
+        if (this.infoText !== null) {
+            this.infoText.remove()
+            console.log("cleared text")
+        }
+
+    }
+
+    snapToGrid() {
+        this.position({
+            x: Math.round(this.x() / this.blockSize) * this.blockSize,
+            y: Math.round(this.y() / this.blockSize) * this.blockSize,
+        });
+    }
+
+    saveShapeDetails() {
+        console.log("This shape does not contain information");
+    }
+
+
+    get info() {
+        return this._info;
+    }
+
+    set info(formData) {
+        this._info = formData;
+    }
+
+    get type() {
+        return this._type;
+    }
+
+    set type(type) {
+        this._type = type
+    }
+
+}
Index: imaps-frontend/src/scripts/shapes/Room.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Room.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/shapes/Room.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,36 +1,27 @@
 import Konva from "konva";
-import MapShape from "../base/MapShape.js";
+import MapShape from "./MapShape";
 import { _registerNode } from "konva/lib/Global";
 export default class Room extends MapShape {
-  constructor(attrs,id){
-
-      if(!attrs.fromLoad){
-          attrs.width *= 12;
-          attrs.height *= 8;
-      }
-
-      console.log(attrs.position,"hehe")
+  constructor(mousePos, blockSize, layer, rotation, snap, id, scaleX = 1, scaleY = 1){
     super(
       {
-        x: attrs.position.x,
-        y: attrs.position.y,
-        width: attrs.width * attrs.scaleX,
-        height: attrs.height * attrs.scaleY,
-        fill: "rgb(86,168,253)",
+        x: mousePos.x,
+        y: mousePos.y,
+        width: blockSize * 8 * scaleX,
+        height: blockSize * 4 * scaleY,
+        fill: "#DDE0F8",
         stroke: "grey",
         strokeWidth: 1,
         name: "mapObj",
-        rotation: attrs.rotation,
+        rotation: rotation,
         draggable: true,
       },
-        attrs.layer,
-        attrs.blockSize,
-        attrs.snap
+      layer,
+      blockSize,
+      snap
     );
 
-      this.floorNum = attrs.floorNum;
-
     this._info = {
-      name: `Room${id} [${this.floorNum}F]`,
+      name: `Room ${id}`,
       type: "",
       description: "",
@@ -38,5 +29,5 @@
 
     this.type = "Room";
-    this.eventName = "openRoomModalEvent";
+    this.modalEventName = "openRoomModalEvent";
     this.id = id;
 
@@ -48,5 +39,4 @@
     this.info.type = attrs.room_type;
     this.info.description = attrs.description;
-    this.floorNum = attrs.floor_num;
   }
 
@@ -55,5 +45,4 @@
     this.setAttr("room_type", this.info.type);
     this.setAttr("description", this.info.description);
-    this.setAttr("floor_num",this.floorNum);
   }
 }
Index: imaps-frontend/src/scripts/shapes/Stairs.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Stairs.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/shapes/Stairs.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,78 +1,4 @@
 import Konva from "konva";
-import MapNode from "../base/MapNode.js";
-import {_registerNode} from "konva/lib/Global.js";
-import Room from "./Room.js";
-export default class Stairs extends MapNode{
-    constructor(attrs,id) {
+import { MapShape } from "./MapShape";
 
-        if(!attrs.fromLoad){
-            attrs.width *= 4;
-        }
-
-        super({
-                x: attrs.position.x,
-                y: attrs.position.y,
-                width: attrs.width * attrs.scaleX,
-                height: attrs.height * attrs.scaleY,
-                fill: "rgb(225,213,124)",
-                stroke: "rgb(16,15,15)",
-                strokeWidth: 1,
-                name: "mapObj",
-                rotation: attrs.rotation,
-                draggable: true
-            },
-            attrs.layer,
-            attrs.blockSize,
-            attrs.snap
-        );
-
-        this.floorNum = attrs.floorNum;
-
-        this.type = "Stairs"
-        this._info = {
-            name: `Stairs${id} [${this.floorNum}F]`,
-            description: "",
-            selectedPins: []
-        };
-
-        this.id = id;
-        this.eventName = "openStairsModalEvent";
-        this.initText();
-    }
-
-
-    _sceneFunc(context, shape) {
-        const { width, height} = this.attrs;
-
-        let steps = 5;
-        context.beginPath()
-        for(let i = 0; i < steps; i++){
-            context.rect((-this.blockSize) * i,(this.blockSize * 0.6) * i,width * 0.86,height/2)
-            context.fillStrokeShape(shape);
-        }
-        context.closePath()
-    }
-
-    loadInfo(attrs) {
-        this.info.name = attrs.obj_name;
-        this.info.description = attrs.description;
-        this.info.selectedPins = attrs.connected_pins;
-        this.floorNum = attrs.floor_num;
-    }
-
-    saveShapeDetails() {
-        this.setAttr("connected_pins", this.info.selectedPins);
-        this.setAttr("obj_name", this.info.name);
-        this.setAttr("description", this.info.description);
-        this.setAttr("floor_num",this.floorNum)
-    }
-    connect(node,draw = true) {
-        let canDraw = this.floorNum === node.floorNum;
-        super.connect(node,canDraw);
-    }
-
-}
-
-Stairs.prototype.className = "Stairs";
-_registerNode(Stairs);
 //TODO
Index: imaps-frontend/src/scripts/shapes/Wall.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Wall.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/shapes/Wall.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,43 +1,29 @@
 import Konva from "konva";
-import MapShape from "../base/MapShape.js";
+import MapShape from "./MapShape";
 import { _registerNode } from 'konva/lib/Global';
 export default class Wall extends MapShape {
-    constructor(attrs){
-        if(!attrs.fromLoad){
-            attrs.height *= 8;
-        }
-
-
+    constructor(mousePos, blockSize, layer, rotation,snap, draggable = true,scaleX = 1, scaleY = 1){
       super(
         {
-          x: attrs.position.x,
-          y: attrs.position.y,
-          width: attrs.width * attrs.scaleX,
-          height: attrs.height * attrs.scaleY,
-          fill: "#d3d3d3",
+          x: mousePos.x,
+          y: mousePos.y,
+          width: blockSize * scaleX,
+          height: blockSize * 8 * scaleY,
+          fill: "#DDE0F8",
           stroke: "grey",
           strokeWidth: 1,
           name: "mapObj",
-          draggable: true,
-          rotation: attrs.rotation,
+          draggable: draggable,
+          rotation: rotation,
           zIndex: 0,
         },
-        attrs.layer,
-        attrs.blockSize,
-        attrs.snap,
+        layer,
+        blockSize,
+        snap,
       );
+  
       this.type = "Wall";
-
-        this.floorNum = attrs.floorNum;
     }
-
-    loadInfo(attrs) {
-        this.floorNum = attrs.floor_num;
-    }
-
-    saveShapeDetails() {
-        this.setAttr("floor_num",this.floorNum)
-    }
-}
+  }
 
   Wall.prototype.className = 'Wall'
Index: imaps-frontend/src/scripts/util/Factory.js
===================================================================
--- imaps-frontend/src/scripts/util/Factory.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/util/Factory.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -6,35 +6,24 @@
 import RenderedEntrance from "../rendered_shapes/RenderedEntrance";
 import RenderedWall from "../rendered_shapes/RenderedWall.js";
-import Stairs from "../shapes/Stairs.js";
-import RenderedStairs from "../rendered_shapes/RenderedStairs.js";
-import {updateShapeCount, getShapeCount} from "./ShapeCount.js";
 export default class Factory {
-  // BUG KO KE NAPRES REFRESH SA RESETVAT COUNTS!
 
-  static createShape(shapeType,attrs) {
-    console.log(attrs,"attrs in factory")
-    console.log("position in factory: " + attrs.position.x)
+  static infoPinCount = 0;
+  static wallCount = 0;
+  static entranceCount = 0;
+  static roomCount = 0;
 
-    let scaleX = (attrs.scaleX ? parseFloat(attrs.scaleX) : 1);
-    let scaleY =  (attrs.scaleY ? parseFloat(attrs.scaleY) : 1);
-
-    attrs.scaleX = scaleX;
-    attrs.scaleY = scaleY;
-
+  static createShape(shapeType, position, blockSize, layer, rotation,scaleX = 1, scaleY = 1, increment = false) {
     switch (shapeType) {
       case "Entrance":
-        if(attrs.increment) updateShapeCount("entrance")
-        return new Entrance(attrs,getShapeCount("entrance"));
+        if(increment) this.entranceCount++;
+        return new Entrance(position, blockSize, layer, rotation,true,this.entranceCount,scaleX,scaleY);
       case "Room":
-        if(attrs.increment) updateShapeCount("room");
-        return new Room(attrs,getShapeCount("room"));
-       case "Wall":
-         return new Wall(attrs);
-       case "InfoPin":
-        if(attrs.increment) updateShapeCount("infoPin")
-          return new InfoPin(attrs,getShapeCount("infoPin"));
-      case "Stairs":
-        if(attrs.increment) updateShapeCount("stairs")
-        return new Stairs(attrs,getShapeCount("stairs"))
+        if(increment) this.roomCount++;
+        return new Room(position, blockSize, layer, rotation,true, this.roomCount,scaleX,scaleY);
+      case "Wall":
+        return new Wall(position, blockSize, layer, rotation,true,scaleX,scaleY);
+      case "InfoPin":
+        if(increment) this.infoPinCount++;
+        return new InfoPin(position, blockSize, layer, false,this.infoPinCount);
       default:
         throw new Error("Invalid shape type: " + shapeType);
@@ -45,10 +34,4 @@
     let scaleX = (attrs.scaleX ? parseFloat(attrs.scaleX) : 1);
     let scaleY =  (attrs.scaleY ? parseFloat(attrs.scaleY) : 1);
-
-    attrs.width *= scaleX;
-    attrs.height *= scaleY
-
-    console.log("SCALEX " + scaleX)
-    console.log("SCALEY " + scaleY)
     switch (shapeType) {
       case "Entrance":
@@ -58,6 +41,4 @@
       case "Wall":
         return new RenderedWall(attrs,scaleX,scaleY);
-      case "Stairs":
-        return new RenderedStairs(attrs,scaleX,scaleY)
       default:
         throw new Error("Invalid shape type." + shapeType);
Index: imaps-frontend/src/scripts/util/ShapeCount.js
===================================================================
--- imaps-frontend/src/scripts/util/ShapeCount.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,18 +1,0 @@
-const shapeCount = {
-    infoPin: 0,
-    wall: 0,
-    entrance: 0,
-    room: 0,
-    stairs: 0
-};
-
-const updateShapeCount = (key) => {
-    shapeCount[key]++;
-}
-const getShapeCount = (key) => {
-    return shapeCount[key];
-}
-
-export {updateShapeCount, getShapeCount};
-
-// todo za da sa incrementvit i posle restart na browwser, trebit vo baza nova tabela za broenje
Index: imaps-frontend/src/scripts/util/ShapeQuery.js
===================================================================
--- imaps-frontend/src/scripts/util/ShapeQuery.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,19 +1,0 @@
-import MapNode from "../base/MapNode.js";
-import ShapeRegistry from "./ShapeRegistry.js";
-
-export default class ShapeQuery{
-    static findAllByType(...types) {
-        return ShapeRegistry.getShapes().filter(shape => types.includes(shape.className));
-    }
-
-    static findNodeByName(shapes, name){
-        return shapes.filter(shape => shape instanceof MapNode && shape.info.name === name)[0];
-    }
-    static findAllByTypeAndFloor(floor,...types){
-        return ShapeRegistry.getShapes().filter(shape => types.includes(shape.className) && shape.floorNum === floor);
-    }
-
-    static getAllNodes(floor = null){
-        return ShapeRegistry.getShapes(floor).filter(shape => shape instanceof MapNode);
-    }
-}
Index: imaps-frontend/src/scripts/util/ShapeRegistry.js
===================================================================
--- imaps-frontend/src/scripts/util/ShapeRegistry.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,165 +1,0 @@
-import MapNode from "../base/MapNode.js";
-import ShapeQuery from "./ShapeQuery.js";
-// TODO abstraktna klasa ova da stanit i za da napram za view registry, za da mozis search na floors globalno
-
-class ShapeRegistry {
-    constructor() {
-        if (!ShapeRegistry.instance) {
-            this.store = {
-                floors: {} // key brojka 0: shappes arr
-            };
-            ShapeRegistry.instance = this;
-        }
-
-        return ShapeRegistry.instance;
-    }
-
-    /**
-     * @description Get all the shapes from a floor if floorNumber is specified.
-     * @description If floorNumber is not specified, returns all the shapes from every floor.
-     * @param floorNumber
-     * @returns {[{}]} [shapes]
-     */
-    getShapes(floorNumber = null) {
-        if (!this.store.floors[floorNumber]) {
-            this.store.floors[floorNumber] = [];
-        }
-
-        if (floorNumber != null) {
-            return this.store.floors[floorNumber];
-        } else {
-            return Object.values(this.store.floors).flat();
-        }
-
-
-    }
-
-    /**
-     * Adds a shape to a floor that corresponds the shape's internally stored floor number.
-     * @param shape
-     */
-    add(shape) {
-        console.log("floor: " + shape.floorNum)
-        if (!this.store.floors[shape.floorNum]) {
-            this.store.floors[shape.floorNum] = [];
-        }
-        this.store.floors[shape.floorNum].push(shape);
-    }
-
-    /**
-     * Deletes a shape from the floor corresponds the shape's internally stored floor number
-     * @param shape
-     */
-    delete(shape) {
-        const floorShapes = this.store.floors[shape.floorNum];
-        if (floorShapes) {
-            const index = floorShapes.indexOf(shape);
-            if (index !== -1) {
-                floorShapes.splice(index, 1);
-            }
-        }
-    }
-
-    /**
-     * @param floorNumber Clears all shapes from the specified floor
-     */
-    clear(floorNumber = null) {
-
-        if(floorNumber != null){
-            const floor = this.store.floors[floorNumber];
-            if (Array.isArray(floor)) {
-                floor.forEach(shape => shape.destroy());
-                this.store.floors[floorNumber] = [];
-            }
-        } else {
-           Object.keys(this.store.floors).forEach(floorNumber => {
-               const floor = this.store.floors[floorNumber];
-               if (Array.isArray(floor)) {
-                   floor.forEach(shape => shape.destroy());
-                   this.store.floors[floorNumber] = [];
-               }
-           })
-        }
-
-
-
-    }
-
-    // ova mozit optimizacija da ne pret na site spratoj update celo vreme, samo ko ke povrzvis stairs da pret na site
-    updateConnections() {
-        Object.values(this.store.floors).forEach(floorShapes => {
-            floorShapes.forEach(shape => {
-                if (shape.className === "InfoPin" || shape.className === "Entrance" || shape.className === "Stairs") {
-                    shape.info.selectedPins.forEach((connectedShapeName) => {
-                        const connectedShape = floorShapes.find(s => s.info.name === connectedShapeName);
-                        if (
-                            connectedShape &&
-                            (connectedShape.className === "InfoPin" || connectedShape.className === "Entrance" || connectedShape.className === "Stairs")
-                        ) {
-                            if (!connectedShape.info.selectedPins.includes(shape.info.name)) {
-                                connectedShape.info.selectedPins.push(shape.info.name);
-                            }
-                        }
-                    });
-                }
-            });
-        });
-    }
-
-    drawConnection(node1Name, node2Name) {
-        const node1 = Object.values(this.store.floors).flat()
-            .find(shape => shape instanceof MapNode && shape.info.name === node1Name);
-        const node2 = Object.values(this.store.floors).flat()
-            .find(shape => shape instanceof MapNode && shape.info.name === node2Name);
-
-        console.log("NODE1: " + JSON.stringify(node1))
-        console.log("NODE2: " + JSON.stringify(node2));
-
-        if (node1 && node2) {
-            node1.connect(node2);
-            console.log("N1",node1.info.selectedPins,"N2",node2.info.selectedPins)
-        } else {
-            console.error("Cant find node1 or node 2.","Node1: " + node1,"Node2: " + node2);
-        }
-    }
-
-
-    removeConnection(from, to) {
-        let shapes = Object.values(this.store.floors).flat();
-
-        let node1 = ShapeQuery.findNodeByName(shapes, from);
-        let node2 = ShapeQuery.findNodeByName(shapes, to);
-
-        if(node1.floorNum === node2.floorNum)
-            node1.removeConnectionLine(node2);
-
-        //node1.removeConnection(node2);
-
-        Object.values(this.store.floors).flat().filter(s => s.info.name === from || s.info.name === to)
-            .forEach(s => {
-                if(s.info.name  === from){
-                    s.info.selectedPins = s.info.selectedPins.filter(pin =>  pin !== to);
-                } else {
-                    s.info.selectedPins = s.info.selectedPins.filter(pin =>  pin !== from);
-                }
-
-            });
-        console.log("Remove");
-    }
-
-    saveDetails() {
-        Object.values(this.store.floors).flat().forEach(shape => {
-            shape.saveShapeDetails();
-            console.log(shape.info);
-        });
-    }
-}
-
-/**
- * A singleton instance that holds all the shapes for all the floors in the map builder.
- * Every operation of adding, removing or updating drawn shapes should reference this instance.
- */
-const instance = new ShapeRegistry();
-Object.freeze(instance);
-
-export default instance;
Index: imaps-frontend/src/scripts/util/addEventHandling.js
===================================================================
--- imaps-frontend/src/scripts/util/addEventHandling.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,13 +1,0 @@
-export const addEventHandling = (shape, map, action) => {
-    shape.on(action, () => {
-        const eventName = shape.eventName;
-        if (eventName) {
-            const data = {
-                room: shape,
-                map: map,
-            };
-            const event = new CustomEvent(eventName, { detail: data });
-            window.dispatchEvent(event);
-        }
-    });
-}
Index: imaps-frontend/src/scripts/util/dispatchCustomEvent.js
===================================================================
--- imaps-frontend/src/scripts/util/dispatchCustomEvent.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,6 +1,0 @@
-export const dispatchCustomEvent = (eventName,data) => {
-    let event = new CustomEvent(eventName,{
-        detail : data
-    })
-    window.dispatchEvent(event)
-}
Index: imaps-frontend/src/scripts/util/parseMapData.js
===================================================================
--- imaps-frontend/src/scripts/util/parseMapData.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,28 +1,0 @@
-import Factory from "./Factory.js";
-import shapeRegistry from "./ShapeRegistry.js";
-
-export default function parseMapData(data, predicate, rendered) {
-    if (data == null || data === "") return [];
-    const dsrData = JSON.parse(data);
-
-    console.log("VLEZE use")
-
-    let result = [];
-
-    dsrData.filter(predicate)
-        .forEach(s => {
-            console.log(s.attrs, "Sattrs pls")
-            s.attrs.position = {x: s.attrs.x, y: s.attrs.y}
-            const shape = rendered ? Factory.createRenderedShape(s.className, s.attrs) : Factory.createShape(s.className, s.attrs);
-
-            if (!rendered) {
-                shape.loadInfo(s.attrs);
-                shapeRegistry.add(shape)
-            }
-
-            result.push(shape)
-
-        })
-
-    return result;
-}
Index: imaps-frontend/src/scripts/util/queryShapes.js
===================================================================
--- imaps-frontend/src/scripts/util/queryShapes.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,8 +1,0 @@
-export const queryShapeInfo = (map,type) => {
-    return map.shapes.filter(shape => shape.className === type).map(shape => shape.info);
-}
-
-export const queryRenderedShapes = (map,type) => {
-
-}
-
Index: imaps-frontend/src/scripts/util/triggerMapSave.js
===================================================================
--- imaps-frontend/src/scripts/util/triggerMapSave.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,21 +1,0 @@
-let canSave = true;
-const mapSaveEvent = new CustomEvent("mapsave",{});
-const setCanSave = (value) => {
-    canSave = value;
-}
-/**
- * Triggers a save event for the floor you are currently on with a debounce time of 3s;
- * @example triggerMapSave() - will save the floor once, and after 3s again.
- */
-const triggerMapSave = () => {
-    if(!canSave) return;
-
-    window.dispatchEvent(mapSaveEvent)
-    setCanSave(false);
-    setTimeout(() => {
-        setCanSave(true);
-        window.dispatchEvent(mapSaveEvent)
-    },2000)
-}
-
-export default triggerMapSave;
Index: imaps-frontend/src/scripts/util/triggerNavigate.js
===================================================================
--- imaps-frontend/src/scripts/util/triggerNavigate.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,14 +1,0 @@
-const triggerNavigate = (nodes,idx,changeFloorTo,shape) => {
-    const event = new CustomEvent("navigate",{
-        detail: {
-            nodes: nodes,
-            offset: idx,
-            changeFloorTo: changeFloorTo,
-            shape:shape
-        }
-    })
-
-    window.dispatchEvent(event);
-}
-
-export default triggerNavigate;
Index: imaps-frontend/src/scripts/util/verifyToken.js
===================================================================
--- imaps-frontend/src/scripts/util/verifyToken.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ 	(revision )
@@ -1,23 +1,0 @@
-import HttpService from "../net/HttpService.js";
-import config from "../net/netconfig.js";
-
-export const verifyToken = async (setIsAuthenticated,setUsername,setLoading) => {
-    const token = localStorage.getItem("token");
-    const httpService = new HttpService();
-
-    try {
-        const response = await httpService.get(`${config.auth.verify}?token=${token}`);
-        if (response.username) {
-            setIsAuthenticated(true);
-            setUsername(response.username)
-            console.log("/verify resp: ",response.username);
-        } else {
-            setIsAuthenticated(false);
-            setLoading(false);
-        }
-    } catch (error) {
-        setIsAuthenticated(false);
-    } finally {
-        setLoading(false);
-    }
-}
Index: imaps-frontend/src/scripts/util/zoomStage.js
===================================================================
--- imaps-frontend/src/scripts/util/zoomStage.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/util/zoomStage.js	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
@@ -1,4 +1,4 @@
-export const zoomStage = (e,stage,shift=false) => {
-    if (shift && !e.evt.shiftKey) return;
+export const zoomStage = (e,stage) => {
+    if (!e.evt.shiftKey) return;
 
     e.evt.preventDefault();
