Index: imaps-frontend/src/App.jsx
===================================================================
--- imaps-frontend/src/App.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/App.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -19,4 +19,7 @@
 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";
 
 
@@ -30,12 +33,15 @@
 
                     <Route element={<ProtectedRoute/>}>
-                        <Route path="/myMaps/:mapName/Draw" element={<Draw/>}/>
+                        <Route path="/myMaps/Draw/:mapName" element={<Draw/>}/>
                         <Route path="/myMaps" element={<MyMaps/>}/>
-                        <Route path="/myMaps/:mapName/View" element={<MapView isPrivate={true}/>}/>
+                        <Route path="/myMaps/View/:mapName" element={<MapView isPrivate={true}/>}/>
                         <Route path="/Admin" element={<AdminPage/>}/>
                     </Route>
                     <Route path="/" element={<IMaps/>}/>
-                    <Route path="/Maps/:mapName/View" element={<MapView isPrivate={false}/>}/>
+                    <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/>}/>
 
 
Index: imaps-frontend/src/TODO.txt
===================================================================
--- imaps-frontend/src/TODO.txt	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/TODO.txt	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,19 +1,4 @@
-PRIORITY HIGH
-
-- Id fix na shapes vo Draw
-
-PRIORITY MEDIUM
-
-- Detach event na draw (keys: e, r)
-- Text na shape vo Draw da e top layer
-
-PRIORITY LOW
-
-- Admin Page
-
-
-- KO KE SMENIS IME VO MODAL,TREBIT VO GRAFOT DA SA UPDATE TOJ ENTRY // got
-- VO room da sa cuvat entrances, za ko ke mrdas room isto entrance da sa mrdnit
-
-
-bug: selectiras eden shape pa drug, pa celo vreme sa klavat posle shape
+-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
Index: imaps-frontend/src/components/DrawGuide/DrawGuide.jsx
===================================================================
--- imaps-frontend/src/components/DrawGuide/DrawGuide.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/DrawGuide/DrawGuide.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -18,6 +18,6 @@
           <div onClick={toggleModal} className={styles.overlay}></div>
           <div className={styles.modalContent}>
-            <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>
+            <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>
             <br></br>
             <ul>
@@ -35,5 +35,5 @@
             </ul>
             <br></br>
-            <p>After completing your map, click the render button and go to the View page to see your full featured map!</p>
+            <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>
 
             <button className={styles.closeModal} onClick={toggleModal}>
Index: imaps-frontend/src/components/DrawGuide/DrawGuide.module.css
===================================================================
--- imaps-frontend/src/components/DrawGuide/DrawGuide.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/DrawGuide/DrawGuide.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -18,4 +18,13 @@
   backdrop-filter: blur(5px); /* Optional blur effect */
   z-index: 999;
+
+}
+
+.title{
+  color: white;
+}
+
+.paragraph{
+  color: #ababab;
 }
 
@@ -25,5 +34,5 @@
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: #2c2f33; /* Darker background for modal content */
+  background-color: #2c2f33;
   color: #ffffff; /* White text for contrast */
   padding: 20px;
@@ -35,8 +44,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/FilterBar/FilterBar.module.css
===================================================================
--- imaps-frontend/src/components/FilterBar/FilterBar.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/FilterBar/FilterBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,3 +1,3 @@
-/* FilterBar.module.css */
+/* FilterMaps.module.css */
 * {
   font-family: "Poppins", sans-serif;
@@ -18,12 +18,13 @@
   padding: 0px 0; /* Adds some space around the buttons */
   width: 100%;
+  overflow-y: hidden;
 }
 
 .buttonValue {
-  border: 2px solid #6759ff;
+  border: 2px solid rgb(37,111,123);
   padding: 0.5em 1.5em;
   border-radius: 3em;
   background-color: transparent;
-  color: #6759ff;
+  color: rgb(37,111,123);
   cursor: pointer;
   transition: background-color 0.3s, color 0.3s;
@@ -33,10 +34,10 @@
 .buttonValue:hover,
 .buttonValue:focus {
-  background-color: #6759ff;
+  background-color: rgb(33, 98, 108);
   color: #ffffff;
 }
 
 .active {
-  background-color: #6759ff;
+  background-color: rgb(37,111,123);
   color: #ffffff;
 }
@@ -47,5 +48,5 @@
 
 .scrollableContainer::-webkit-scrollbar-thumb {
-  background-color: #6759ff;
+  background-color: rgb(37,111,123);
   border-radius: 3px;
 }
Index: imaps-frontend/src/components/FilterMaps/FilterMaps.jsx
===================================================================
--- imaps-frontend/src/components/FilterMaps/FilterMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/FilterMaps/FilterMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,37 @@
+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)
+++ imaps-frontend/src/components/FilterMaps/FilterMaps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,52 @@
+/* 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/ListReports/ListReports.jsx
===================================================================
--- imaps-frontend/src/components/ListReports/ListReports.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/ListReports/ListReports.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,77 @@
+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)
+++ imaps-frontend/src/components/ListReports/ListReports.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,101 @@
+.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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/LoadingContainer/LoadingContainer.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,3 +1,4 @@
 import React from "react";
+import styles from "./LoadingContainer.module.css"
 
 export const LoadingContainer = () => {
@@ -5,5 +6,4 @@
         <div className="loading-container">
             <div className="spinner"></div>
-            <p>Loading, please wait...</p>
         </div>
     );
Index: imaps-frontend/src/components/LoadingContainer/LoadingContainer.module.css
===================================================================
--- imaps-frontend/src/components/LoadingContainer/LoadingContainer.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/LoadingContainer/LoadingContainer.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,39 @@
+.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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Logo/Logo.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,5 +1,5 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-import logoImage from "../../assets/logo_icon.png";
+import novo_logo from "../../assets/novo_logo_nobg_cropped.png";
 import styles from "./Logo.module.css";
 
@@ -16,5 +16,5 @@
       onClick={handleClick}
     >
-      <img src={logoImage} alt="Logo" className={styles.logoImage} />
+      <img src={novo_logo} alt="Logo" className={styles.logoImage} />
     </div>
   );
Index: imaps-frontend/src/components/Logo/Logo.module.css
===================================================================
--- imaps-frontend/src/components/Logo/Logo.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Logo/Logo.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -8,7 +8,8 @@
 
 .logoImage {
-  width: 50px; /* Adjust the size as needed */
+  width: 80px;
   height: auto;
   transition: opacity 0.2s ease;
+  border-radius: 20px;
 }
 
@@ -30,10 +31,4 @@
 }
 
-.logoImage {
-  width: 50px; /* Adjust size as needed */
-  height: auto;
-  transition: opacity 0.2s ease;
-}
-
 .logoImage:hover {
   opacity: 0.8; /* Hover effect */
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/MapInfoModal/MapInfoModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,38 +1,53 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./MapInfoModal.module.css";
-import {json, useNavigate} from "react-router-dom";
 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";
-
-export default function MapInfoModal({isOpen, onClose, map, onDelete, onUpdate, onPublish, published=false}) {
+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(map?.mapName || "");
-    const [editedGmapsUrl, setEditedGmapsUrl] = useState(map?.gmaps_url || "");
-    const [publishFormOpen,setPublishFormOpen] = 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 [loadedFormData, setLoadedFormData] = useState(null);
+    const { setLoading } = useAppContext();
+    const { loading } = useAppContext();
+    const { username } = useAppContext();
 
     useEffect(() => {
-        console.log("GMAPS: " + JSON.stringify(map))
-    }, []);
-
-    const {username} = useAppContext();
+        if (map) {
+            setEditedName(map.mapName || "");
+            setEditedGmapsUrl(map.gmaps_url || "");
+            setEditedType(map.mapType || "");
+        }
+    }, [map, isEditPopupOpen]);
 
     if (!isOpen || !map) return null;
 
     const handleView = () => {
-        navigate(`/myMaps/${map.mapName}/View`)
+        navigate(`/myMaps/View/${map.mapName}`);
     };
 
     const handleEdit = () => {
-        navigate(`/myMaps/${map.mapName}/Draw`)
+        navigate(`/myMaps/Draw/${map.mapName}`);
     };
 
     const handleDelete = () => {
-        if (window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`)) {
+        if (
+            window.confirm(`Are you sure you want to delete the map "${map.mapName}"?`)
+        ) {
             onDelete(map.mapName);
             onClose();
@@ -40,5 +55,4 @@
     };
 
-
     const openEditPopup = () => {
         setEditPopupOpen(true);
@@ -51,117 +65,134 @@
     const handleEditSubmit = async () => {
         const updatedMap = {
-            ...map,
-            mapName: editedName,
-            gmaps_url: editedGmapsUrl,
+            initialName: map.mapName,
+            name: editedName,
+            gmapsUrl: editedGmapsUrl,
+            type: editedType,
         };
-
-        try {
-            //await onUpdate(updatedMap);
-            setEditPopupOpen(false);
-        } catch (error) {
-            console.error("Error updating map:", error);
-        }
-    };
-
-    const openPublishModal = async () => {
-        const httpService = new HttpService(true);
-        const respForm = await httpService.get(`${config.my_maps.publish_get}?mapName=${map.mapName}`)
-        setLoadedFormData(respForm);
-        setPublishFormOpen(true)
-    };
-
-    const sendPublishRequest = async (formData) => {
-        const httpService = new HttpService(true);
-        formData.mapName = map.mapName;
-        console.log("FORMDATA: "+JSON.stringify(formData))
-        await httpService.post(`${config.my_maps.publish}?username=${username}`,formData);
-        setPublishFormOpen(false)
-        onPublish()
-    }
+        onUpdate(updatedMap);
+        closeEditPopup()
+    };
 
     return (
         <div className={styles.modalOverlay} onClick={onClose}>
-            <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
-                {publishFormOpen && (
-                    <PublishForm mapName={map.mapName} formData={loadedFormData} onSubmit={sendPublishRequest} onCancel={() => setPublishFormOpen(false)}/>
-                )}
-
-                <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.gMapsUrl}  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={openPublishModal}>
-                            Publish
+            <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>
-                    )}
-                </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)}
-                                />
+
+                        {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 className={styles.editField}>
-                                <label>Google Maps URL:</label>
-                                <input
-                                    type="text"
-                                    value={editedGmapsUrl}
-                                    onChange={(e) => setEditedGmapsUrl(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>
Index: imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css
===================================================================
--- imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/MapInfoModal/MapInfoModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -14,4 +14,5 @@
 
 .modalContent {
+    position: relative;
     background-color: white;
     padding: 20px;
@@ -22,4 +23,5 @@
     text-align: center;
     animation: fadeIn 0.3s ease-out;
+
 }
 
Index: imaps-frontend/src/components/Modals/Components/ModalUploadRoomImage.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Components/ModalUploadRoomImage.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/Modals/Components/ModalUploadRoomImage.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,31 @@
+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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -10,5 +10,4 @@
         const mapDetails = {
             name: mapName,
-            type: mapType,
         };
 
@@ -34,13 +33,4 @@
                         />
                     </label>
-                    <label>
-                        Map Type:
-                        <input
-                            type="text"
-                            value={mapType}
-                            onChange={(e) => setMapType(e.target.value)}
-                            required
-                        />
-                    </label>
                     <div className={styles.modalButtons}>
                         <button type="submit" className={styles.modalSubmitButton}>
Index: imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/CreateMapModal/CreateMapModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -36,5 +36,4 @@
 /* Modal Buttons Container */
 .modalButtons {
-    margin-top: 1.5rem;
     display: flex;
     justify-content: space-between;
Index: imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -42,4 +42,5 @@
         setConnections(connections);
         setIsOpen(true);
+        event.detail.map.detachKeyPressEventListeners();
         console.log(connections, "Loaded pins on modal open");
     },"openEntranceModalEvent")
@@ -52,5 +53,5 @@
             <ModalSelectRoom shapeInfo={shapeInfo} availableRooms={ShapeQuery.findAllByTypeAndFloor(shape?.floorNum,"Room")} updateModalData={updateModalData}/>
             <ModalSelectConnections2
-                availableShapes={ShapeQuery.findAllByType("InfoPin","Entrance")} // najubo ke e entrance samo so room da mozit
+                availableShapes={ShapeQuery.findAllByTypeAndFloor(map?.floorNum,"Entrance","InfoPin")} // najubo ke e entrance samo so room da mozit
                 addConnection={addConnection}
                 updateModalData={updateModalData}
Index: imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/EntranceModal/EntranceModal.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -34,5 +34,5 @@
   left: 50%;
   transform: translate(-50%, -50%);
-  background-color: #2c2f33;
+  background-color: #2c2f33f7;
   color: #ffffff !important;
   padding: 20px;
@@ -90,4 +90,42 @@
   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 {
Index: imaps-frontend/src/components/Modals/Hooks/useConnections.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useConnections.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -5,5 +5,4 @@
 
     const addConnection = () => {
-        console.log("TOSKA",shapeInfo)
         if (!shapeInfo.selectedPin || connections.includes(shapeInfo.selectedPin)) return;
 
Index: imaps-frontend/src/components/Modals/Hooks/useModalState.jsx
===================================================================
--- imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/Hooks/useModalState.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -13,5 +13,5 @@
             map.updateRoomNames();
             triggerMapSave();
-            console.log("SHAPE BEF CLOSE:",shape.info)
+            map.attachKeyPressEventListeners();
         }
         setIsOpen(!isOpen);
Index: imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/InfoPinModal/InfoPinModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -37,4 +37,5 @@
         setConnections(shape.info.selectedPins || []);
         setIsOpen(true);
+        event.detail.map.detachKeyPressEventListeners();
 
         console.log(shape.info.selectedPins, "Loaded pins on modal open");
Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -7,4 +7,5 @@
 import useModalState from "../Hooks/useModalState.jsx";
 import {useModalEvent} from "../Hooks/useModalEvent.jsx";
+import ModalUploadRoomImage from "../Components/ModalUploadRoomImage.jsx";
 
 export default function RoomModal({map,roomTypes}) {
@@ -20,4 +21,5 @@
         setShapeInfo(shape.info);
         setIsOpen(true);
+        event.detail.map.detachKeyPressEventListeners();
 
     },"openRoomModalEvent")
@@ -30,4 +32,5 @@
             <ModalRoomTypes updateModalData={updateModalData} shapeInfo={shapeInfo} roomTypes={roomTypes}/>
             <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalUploadRoomImage></ModalUploadRoomImage>
             <ModalSaveButton saveDetails={saveDetails}/>
         </Modal>
Index: imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomTypeModal/RoomTypeModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -31,5 +31,5 @@
           <div onClick={toggleModal} className={styles.overlay}></div>
           <div className={styles.modalContent}>
-            <h2>Manage Room Types</h2>
+            <h2 style={{color: 'white'}}>Manage Room Types</h2>
 
             <form className={styles.form}>
Index: imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/StairsModal/StairsModal.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -33,4 +33,5 @@
         setIsOpen(true);
         console.log(roomObj.info.selectedPins, "Loaded pins on modal open");
+        event.detail.map.detachKeyPressEventListeners();
     },"openStairsModalEvent")
 
Index: imaps-frontend/src/components/Profile/Profile.jsx
===================================================================
--- imaps-frontend/src/components/Profile/Profile.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Profile/Profile.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect, useContext } from "react";
-import { useNavigate, Link } from "react-router-dom";
+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";
@@ -8,5 +9,5 @@
     const { username, isAuthenticated } = useAppContext();
     const [open, setOpen] = useState(false);
-    const menuRef = useRef(null);
+    const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
     const imgRef = useRef(null);
     const navigate = useNavigate();
@@ -16,8 +17,6 @@
     useEffect(() => {
         const handleClickOutside = (e) => {
-            if (menuRef.current && imgRef.current) {
-                if (!menuRef.current.contains(e.target) && !imgRef.current.contains(e.target)) {
-                    setOpen(false);
-                }
+            if (imgRef.current && !imgRef.current.contains(e.target)) {
+                setOpen(false);
             }
         };
@@ -30,4 +29,15 @@
     }, []);
 
+    const toggleMenu = () => {
+        if (imgRef.current) {
+            const rect = imgRef.current.getBoundingClientRect();
+            setMenuPosition({
+                top: rect.bottom + window.scrollY,
+                left: rect.left + window.scrollX,
+            });
+        }
+        setOpen(!open);
+    };
+
     const handleMenuClick = (menu) => {
         if (menu === "My Maps") {
@@ -36,32 +46,54 @@
             localStorage.removeItem("token");
             window.location.reload();
+        } else if (menu === "Login") {
+            navigate("/Login");
         }
         setOpen(false);
     };
 
+    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={
+                position === "fixed" ? styles.fixedProfileContainer : styles.inlineProfileContainer
+            }
+        >
             <div className={styles.profileWrapper}>
-                <div className={styles.profileIconContainer} onClick={() => setOpen(!open)}>
-                    <img src={profile} alt="profile" className={styles.profileImage} ref={imgRef} />
+                <div
+                    className={styles.profileIconContainer}
+                    onClick={toggleMenu}
+                    ref={imgRef}
+                >
+                    <img src={profile} alt="profile" className={styles.profileImage} />
                 </div>
-                {open && (
-                    <div ref={menuRef} className={styles.dropdownMenu}>
-                        {isAuthenticated && <div className={styles.username}>{username}</div>}
-                        <ul className={styles.menuList}>
-                            {menus.map((menu) =>
-                                menu === "Login" ? (
-                                    <li key={menu} className={styles.menuItem}>
-                                        <Link to="/login" className={styles.linkStyle}>{menu}</Link>
-                                    </li>
-                                ) : (
-                                    <li key={menu} onClick={() => handleMenuClick(menu)} className={styles.menuItem}>
-                                        {menu}
-                                    </li>
-                                )
-                            )}
-                        </ul>
-                    </div>
-                )}
+                {renderDropdown()}
             </div>
         </div>
Index: imaps-frontend/src/components/PublishForm/PublishForm.jsx
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/PublishForm/PublishForm.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -15,4 +15,6 @@
     );
     const [errors, setErrors] = useState({});
+    const [denyReason, setDenyReason] = useState('');
+    const [isDenying, setIsDenying] = useState(false);
 
     const mapTypeOptions = ['Hospital', 'Faculty', 'House', 'Other'];
@@ -42,4 +44,13 @@
             onSubmit(form);
         }
+    };
+
+    const handleDeny = () => {
+        if (!denyReason.trim()) {
+            alert('Please provide a reason for denial.');
+            return;
+        }
+        onDeny(form.id, form.mapName, denyReason);
+        setIsDenying(false);
     };
 
@@ -130,5 +141,8 @@
                                 <button
                                     className={styles.cancelButton}
-                                    onClick={onCancel}
+                                    onClick={() => {
+                                        setIsDenying(false);
+                                        onCancel();
+                                    }}
                                 >
                                     Cancel
@@ -136,5 +150,5 @@
                                 <button
                                     className={styles.approveButton}
-                                    onClick={() => onApprove(form.id,form.mapName)}
+                                    onClick={() => onApprove(form.id, form.mapName)}
                                 >
                                     Approve
@@ -142,9 +156,26 @@
                                 <button
                                     className={styles.denyButton}
-                                    onClick={() => onDeny(form.id,form.mapName,"Reason")}
+                                    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>
                     )}
Index: imaps-frontend/src/components/PublishForm/PublishForm.module.css
===================================================================
--- imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/PublishForm/PublishForm.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -10,4 +10,20 @@
     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 */
Index: imaps-frontend/src/components/Report/Report.jsx
===================================================================
--- imaps-frontend/src/components/Report/Report.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/components/Report/Report.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,80 @@
+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)
+++ imaps-frontend/src/components/Report/Report.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,93 @@
+.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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/RoomInfoPanel/RoomInfoPanel.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -56,4 +56,5 @@
                 Navigate
               </button>
+              <p style={{fontSize: '0.8em'}}><i>From Main Entrance</i></p>
             </>
         ) : (
Index: imaps-frontend/src/components/SearchBar/SearchBar.jsx
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/SearchBar/SearchBar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -6,5 +6,12 @@
 import styles from "./SearchBar.module.css";
 
-function SearchBar({ map, handleDirectionsSubmit, setIsPanelOpen, setSelectedRoom, availableShapes,handleFloorChange }) {
+function SearchBar({
+                     map,
+                     handleDirectionsSubmit,
+                     setIsPanelOpen,
+                     setSelectedRoom,
+                     availableShapes,
+                     handleFloorChange,
+                   }) {
   const [isExpanded, setIsExpanded] = useState(false);
   const [from, setFrom] = useState("");
@@ -14,25 +21,40 @@
   const [dropdownVisible, setDropdownVisible] = useState(false);
   const [inputFieldType, setInputFieldType] = useState("");
-  const dropdownRef = useRef(null);
-
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
-
-  function searchRoom() {
-    let foundRoom = availableShapes.find(sh => sh.info.name === from)
-    console.log("map fnum",map.floorNum)
-    if(foundRoom.floorNum !== map.floorNum){
+
+  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);
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  const searchRoom = () => {
+    const foundRoom = availableShapes.find((sh) => sh.info.name === from);
+    if (foundRoom && foundRoom.floorNum !== map.floorNum) {
       handleFloorChange(foundRoom.floorNum);
     }
-
-
-    console.log("FOUND ROOM: " + foundRoom)
     map.highlightShape(from);
     setSelectedRoom(foundRoom);
     setIsPanelOpen(true);
-  }
-
-  const handleInputFocus = (field) => {
+  };
+
+  const handleInputFocus = (field, inputRef) => {
     if (availableOptions.length === 0 && map) {
       setAvailableOptions(
@@ -42,6 +64,7 @@
       );
     }
+    setInputFieldType(field);
     setDropdownVisible(true);
-    setInputFieldType(field);
+    activeInputRef.current = inputRef; // Set the active input ref
   };
 
@@ -69,13 +92,18 @@
     if (!dropdownVisible || filteredOptions.length === 0) return null;
 
-    const position = dropdownRef.current?.getBoundingClientRect() || { top: 0, left: 0, width: 0 };
+    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,
-              left: position.left,
+              top: position.top + position.height + window.scrollY,
+              left: position.left + window.scrollX,
               width: position.width,
             }}
@@ -91,10 +119,10 @@
           ))}
         </ul>,
-        document.body // Portal renders outside the parent hierarchy
+        document.body
     );
   };
 
   return (
-      <div className={styles.wrapper}>
+      <div className={styles.wrapper} ref={wrapperRef}>
         {!isExpanded ? (
             <div className={styles.searchBar}>
@@ -104,6 +132,5 @@
                   placeholder="Search location"
                   aria-label="Search"
-                  ref={dropdownRef} // Attach the input to calculate dropdown position
-                  onFocus={() => handleInputFocus("from")}
+                  onFocus={(e) => handleInputFocus("from", e.target)}
                   onChange={handleInputChange(setFrom)}
                   value={from}
@@ -111,8 +138,16 @@
               {renderDropdown()}
               <div className={styles.buttons}>
-                <button type="button" className={styles.iconButton} onClick={searchRoom}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={searchRoom}
+                >
                   <img src={searchIcon} alt="Search Icon" />
                 </button>
-                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={toggleExpanded}
+                >
                   <img src={routeIcon} alt="Route Icon" />
                 </button>
@@ -127,8 +162,7 @@
                     aria-label="From"
                     value={from}
-                    onFocus={() => handleInputFocus("from")}
+                    onFocus={(e) => handleInputFocus("from", e.target)}
                     onChange={handleInputChange(setFrom)}
                     className={styles.inputField}
-                    ref={inputFieldType === "from" ? dropdownRef : null}
                 />
                 <input
@@ -137,8 +171,7 @@
                     aria-label="To"
                     value={to}
-                    onFocus={() => handleInputFocus("to")}
+                    onFocus={(e) => handleInputFocus("to", e.target)}
                     onChange={handleInputChange(setTo)}
                     className={styles.inputField}
-                    ref={inputFieldType === "to" ? dropdownRef : null}
                 />
                 {renderDropdown()}
@@ -152,5 +185,9 @@
                   <img src={searchIcon} alt="Submit Directions" />
                 </button>
-                <button type="button" className={styles.iconButton} onClick={toggleExpanded}>
+                <button
+                    type="button"
+                    className={styles.iconButton}
+                    onClick={toggleExpanded}
+                >
                   <img src={closeIcon} alt="Close Icon" />
                 </button>
Index: imaps-frontend/src/components/SearchBar/SearchBar.module.css
===================================================================
--- imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/SearchBar/SearchBar.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -26,5 +26,5 @@
 .inputField {
   flex-grow: 1;
-  padding: 10px 15px;
+  /*padding: 10px 15px;*/
   font-size: 16px;
   border: 1px solid #ddd;
@@ -33,5 +33,5 @@
   margin-right: 10px;
   min-width: 0;
-
+  margin-top: 12px;
 }
 
Index: imaps-frontend/src/main.jsx
===================================================================
--- imaps-frontend/src/main.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/main.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -4,4 +4,9 @@
 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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/AdminPage/AdminPage.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -11,4 +11,5 @@
 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) => (
@@ -82,5 +83,5 @@
                 gmaps_url: elem.gmaps_url,
                 image_url: card,
-            })).filter((tile) => tile.status === "INVALID");
+            })).filter((tile) => tile.status === "PENDING");
 
             setPendingMaps(mapTiles);
@@ -145,5 +146,5 @@
 
         try {
-            await httpService.post(url, formData); // Assuming formData contains all required fields
+            await httpService.post(url, formData);
             setPendingMaps((prev) => prev.filter((map) => map.mapName !== formData.mapName));
             alert(`Map "${formData.mapName}" published successfully.`);
@@ -187,4 +188,5 @@
             <Profile></Profile>
             <h1>Pending Maps for Approval</h1>
+            <hr/>
 
             {publishFormMap && (
@@ -210,4 +212,5 @@
                 />
             </div>
+            <hr/>
             {isMapInfoModalOpen && (
                 <MapInfoModal
@@ -223,5 +226,6 @@
             )}
             {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
-
+        <hr/>
+            <ListReports></ListReports>
         </div>
     );
Index: imaps-frontend/src/pages/AuthCallback.jsx
===================================================================
--- imaps-frontend/src/pages/AuthCallback.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/AuthCallback.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,18 @@
+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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/BrowseMaps/BrowseMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,27 +1,28 @@
 import styles from "./Maps.module.css";
 import "react-tiles-dnd/esm/index.css";
-import { TilesContainer } from "react-tiles-dnd";
-import { Link } from "react-router-dom";
+import {TilesContainer} from "react-tiles-dnd";
+import {Link} from "react-router-dom";
 import card from "../../assets/card-map.png";
 import star_icon from "../../assets/star_icon.png"; // Unfilled star icon
 import star_filled_icon from "../../assets/star_filled_icon.png"; // Filled star icon
-import { useEffect, useState } from "react";
+import {useEffect, useState} from "react";
 import HttpService from "../../scripts/net/HttpService.js";
 import Logo from "../../components/Logo/Logo.jsx";
 import Profile from "../../components/Profile/Profile.jsx";
 import config from "../../scripts/net/netconfig.js";
-import { useAppContext } from "../../components/AppContext/AppContext.jsx";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import FilterMaps from "../../components/FilterMaps/FilterMaps.jsx";
 
 let loadedTiles = [];
 
-const renderTile = ({ data, isDragging, toggleFavorite }) => (
-    <div style={{ padding: "1rem", width: "100%", position: "relative" }}>
-        <Link to={`/Maps/${data.text}/View`} className={styles.linkStyle}>
+const renderTile = ({data, isDragging, toggleFavorite}) => (
+    <div style={{padding: "1rem", width: "100%", position: "relative"}}>
+        <Link to={`/Maps/View/${data.text}`} className={styles.linkStyle}>
             <div
                 className={`${styles.tile} ${isDragging ? styles.dragging : ""}`}
-                style={{ width: "100%", height: "100%" }}
+                style={{width: "100%", height: "100%"}}
             >
-                <img src={card} className={styles.imgStyle} alt="Map Thumbnail" />
-                <div style={{ fontFamily: "exo" }}>
+                <img src={card} className={styles.imgStyle} alt="Map Thumbnail"/>
+                <div style={{fontFamily: "exo"}}>
                     {data.text} {isDragging ? "DRAGGING" : null}
                 </div>
@@ -32,5 +33,5 @@
                 src={data.isFavorite ? star_filled_icon : star_icon}
                 alt="Favorite Icon"
-                style={{ width: "20px", height: "20px" }}
+                style={{width: "20px", height: "20px"}}
             />
         </div>
@@ -46,5 +47,7 @@
     const [searchTerm, setSearchTerm] = useState("");
     const [tiles, setTiles] = useState([]);
-    const { username, isAuthenticated } = useAppContext();
+    const {username, isAuthenticated} = useAppContext();
+    const [filter, setFilter] = useState("all")
+    const [mapFilters, setMapFilters] = useState([])
 
     useEffect(() => {
@@ -52,5 +55,5 @@
             const httpService = new HttpService();
             let mapTiles = [];
-
+            let mapTypes = ['Hospital', 'Faculty', 'House', 'Other'];
             if (isAuthenticated) {
                 // :D
@@ -63,9 +66,14 @@
                     rows: 1,
                     isFavorite: true,
+                    type: elem.mapType,
                 }));
 
+                console.log("TUKA")
                 // Load all maps
                 const allResp = await httpService.get(config.view_maps.display);
                 console.log("RESPONSE MAPS PUBLIC", allResp);
+
+                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
+
 
                 const nonFavMapTiles = allResp
@@ -76,5 +84,7 @@
                         rows: 1,
                         isFavorite: false,
+                        type: elem.mapType,
                     }));
+
 
                 mapTiles = [...favMapTiles, ...nonFavMapTiles];
@@ -82,4 +92,5 @@
                 const allResp = await httpService.get(config.view_maps.display);
                 console.log("RESPONSE MAPS PUBLIC", allResp);
+                // mapTypes = allResp.filter(elem => elem.mapType != null && elem.mapType !== "").map(elem => elem.mapType);
 
                 mapTiles = allResp.map((elem) => ({
@@ -88,6 +99,10 @@
                     rows: 1,
                     isFavorite: false,
+                    type: elem.mapType,
                 }));
             }
+
+            console.log("TYPES:", mapTypes);
+            setMapFilters(mapTypes);
 
             loadedTiles = [...mapTiles];
@@ -114,5 +129,5 @@
 
         const updatedTiles = tiles.map((tile) =>
-            tile.text === tileName ? { ...tile, isFavorite: !tile.isFavorite } : tile
+            tile.text === tileName ? {...tile, isFavorite: !tile.isFavorite} : tile
         );
 
@@ -140,4 +155,18 @@
     };
 
+    const onFilter = (selectedFilter) => {
+        setFilter(selectedFilter);
+
+        if (selectedFilter === "all") {
+            // Show all tiles
+            setTiles(loadedTiles);
+        } else {
+            // Filter tiles by selected type
+            const filteredTiles = loadedTiles.filter((tile) => tile.type === selectedFilter);
+            setTiles(filteredTiles);
+        }
+    };
+
+
     return (
         <div className={styles.container}>
@@ -152,12 +181,16 @@
                     onChange={handleSearchChange}
                 />
+
             </div>
-
+            <div className={styles.filterBar}>
+            <FilterMaps mapTypes={mapFilters} setFilter={onFilter}></FilterMaps>
+            </div>
+            {filter !== "all" && tiles.length === 0 && <p>No maps of type {filter} found</p>}
             <TilesContainer
                 data={tiles}
-                renderTile={(props) => renderTile({ ...props, toggleFavorite })}
+                renderTile={(props) => renderTile({...props, toggleFavorite})}
                 tileSize={tileSize}
-                forceTileWidth={150}
-                forceTileHeight={170}
+                forceTileWidth={170}
+                forceTileHeight={200}
             />
         </div>
Index: imaps-frontend/src/pages/BrowseMaps/Maps.module.css
===================================================================
--- imaps-frontend/src/pages/BrowseMaps/Maps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/BrowseMaps/Maps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -19,8 +19,10 @@
   margin-bottom: 30px;
   text-align: center;
+  margin-top: 5em;
 }
 
 .searchBar input {
-  width: 300px;
+  /*width: 300px;*/
+  width: 33vw;
   padding: 10px;
   font-size: 16px;
@@ -34,4 +36,8 @@
   border-color: #1e90ff;
   box-shadow: 0 0 8px rgba(30, 144, 255, 0.5);
+}
+
+.filterBar{
+  margin-left: 6vw;
 }
 
Index: imaps-frontend/src/pages/Draw/Draw.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/Draw.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,3 +1,3 @@
-import { useContext, useEffect, useState } from "react";
+import {useContext, useEffect, useState} from "react";
 import styles from "./Draw.module.css";
 import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
@@ -8,5 +8,5 @@
 import SaveMap from "../../components/SaveMap/SaveMap.jsx";
 import Logo from "../../components/Logo/Logo.jsx";
-import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import {Link, useNavigate, useParams, useSearchParams} from "react-router-dom";
 import Profile from "../../components/Profile/Profile.jsx";
 import HttpService from "../../scripts/net/HttpService.js";
@@ -18,139 +18,135 @@
 import config from "../../scripts/net/netconfig.js";
 import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
+import {TopPanel} from "./TopPanel/TopPanel.jsx";
 
 function Draw() {
-  const { mapName } = useParams();
-  const { username } = useAppContext();
+    const {mapName} = useParams();
+    const {username} = useAppContext();
 
-  const [isPopupVisible, setIsPopupVisible] = useState(false);
-  const [errorMessage, setErrorMessage] = useState("Error");
-  const [hasError, setHasError] = useState(false);
-  const [searchParams, setSearchParams] = useSearchParams();
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+    const [errorMessage, setErrorMessage] = useState("Error");
+    const [hasError, setHasError] = useState(false);
+    const [searchParams, setSearchParams] = useSearchParams();
 
-  const[roomTypes,setRoomTypes] = useState([]);
+    const [roomTypes, setRoomTypes] = useState([]);
 
-  const {app,floors,saveFloor,setFloors} = useMapLoader(mapName,username,searchParams,setSearchParams)
-  const {addRoomType} = useRoomTypesLoader(setRoomTypes,mapName,username);
+    const {app, floors, saveFloor, setFloors} = useMapLoader(mapName, username, searchParams, setSearchParams)
+    const {addRoomType} = useRoomTypesLoader(setRoomTypes, mapName, username);
 
-  const addFloorHandler = async (newFloorNum) => {
-    const httpService = new HttpService();
-    httpService.setAuthenticated();
+    const addFloorHandler = async (newFloorNum) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
 
-    const payload = {
-      num: newFloorNum,
-      mapName: mapName,
+        const payload = {
+            num: newFloorNum,
+            mapName: mapName,
+        };
+
+        try {
+            await httpService.put(`${config.floors.add}`, payload);
+            console.log(`Added floor ${newFloorNum}`);
+            setFloors((prevFloors) => [...prevFloors, {num: newFloorNum}]);
+        } catch (error) {
+            console.error("Error adding floor:", error);
+        }
     };
 
-    try {
-      await httpService.put(`${config.floors.add}`, payload);
-      console.log(`Added floor ${newFloorNum}`);
-      setFloors((prevFloors) => [...prevFloors, { num: newFloorNum }]);
-    } catch (error) {
-      console.error("Error adding floor:", error);
-    }
-  };
+    const deleteFloorHandler = async (floorNum) => {
+        if (floorNum === 0) return
 
-  const deleteFloorHandler = async (floorNum) => {
-    if(floorNum === 0) return
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
 
-    const httpService = new HttpService();
-    httpService.setAuthenticated();
+        try {
+            await httpService.delete(`${config.floors.delete}?floorNum=${floorNum}&mapName=${mapName}`);
+            setFloors((prevFloors) => prevFloors.filter(f => f.num !== floorNum))
 
-    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);
+        }
+    };
 
-      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();
-    }
-  }, []);
+    useEffect(() => {
+        return () => {
+            ShapeRegistry.clear();
+        }
+    }, []);
 
 
-  const handleSaveClick = async () => {
-    saveFloor().then(r => {
-     floors.forEach(flr => {
-       setIsPopupVisible(true);
-       setTimeout(() => {
-         setIsPopupVisible(false);},
-           3000);
-       console.log("floor after save: " + JSON.stringify(flr))
-     })
-    });
+    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/>
 
-  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>
+                <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>
+            )}
         </div>
-        <Link to={`/myMaps/${mapName}/View`} 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>
-      )}
-    </div>
-  );
+    );
 }
 
Index: imaps-frontend/src/pages/Draw/Draw.module.css
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/Draw.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -25,5 +25,5 @@
   font-weight: 700;
   text-transform: uppercase;
-  color: #333333;
+  color: #c0c0c0;
   font-family: "Oswald", sans-serif;
   margin-bottom: 0;
Index: imaps-frontend/src/pages/Draw/TopPanel/TopPanel.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/TopPanel/TopPanel.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/Draw/TopPanel/TopPanel.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,10 @@
+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/IMaps/components/Button.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Button.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/Button.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -20,8 +20,9 @@
 
 .btn--outline {
-  background-color: transparent;
+  background-color: #ffffffc2;
 
-  color: #fff;
+  color: #252627;
   padding: 8px 20px;
+  border: 1px solid #252627 ;
   /* border: 1px solid var(--primary); */
   transition: all 0.3s ease-out;
@@ -37,4 +38,9 @@
   font-size: 24px;
 }
+.btn--outline:hover{
+  transition: all 0.3s ease-out;
+  background: #000000;
+  color:#ffffffc2;
+}
 
 .btn--large:hover,
@@ -43,4 +49,3 @@
   background: #ffffffc2;
   color: #000000;
-  transition: 250ms;
 }
Index: imaps-frontend/src/pages/IMaps/components/Cards.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Cards.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/Cards.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -19,5 +19,5 @@
               text="Create intricate floor plans for your building with precision and ease."
               label="Create"
-              path="/services"
+              path="#"
             />
             <CardItem
@@ -25,5 +25,5 @@
               text="Explore and navigate through complex building layouts seamlessly."
               label="Explore"
-              path="/services"
+              path="#"
             />
           </ul>
@@ -33,5 +33,5 @@
               text="Add custom icons, labels, and markers to personalize your indoor maps."
               label="Customize"
-              path="/services"
+              path="#"
             />
             <CardItem
@@ -39,5 +39,5 @@
               text="Ensure accessibility by mapping out routes and facilities for all users."
               label="Accessibility"
-              path="/products"
+              path="#"
             />
             <CardItem
@@ -45,5 +45,5 @@
               text="Share your maps with others and collaborate in real-time for efficient space planning."
               label="Collaboration"
-              path="/sign-up"
+              path="#"
             />
           </ul>
Index: imaps-frontend/src/pages/IMaps/components/Footer.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Footer.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/Footer.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -47,17 +47,19 @@
 .footer-links {
   width: 100%;
-  max-width: 1000px;
   display: flex;
-  justify-content: center;
+  justify-content: space-evenly;
+}
+.footer-link-wrapper a {
+  margin-top: 1em;
+}
+.footer-link-wrapper h2 {
+  width: 100%;
 }
 
-.footer-link-wrapper {
-  display: flex;
-}
 
 .footer-link-items {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   margin: 16px;
   text-align: left;
@@ -100,15 +102,10 @@
 
 .social-media {
-  max-width: 1000px;
-  width: 100%;
 }
 
 .social-media-wrap {
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
   align-items: center;
-  width: 90%;
-  max-width: 1000px;
-  margin: 40px auto 0 auto;
 }
 
@@ -123,5 +120,4 @@
   color: #fff;
   justify-self: start;
-  margin-left: 20px;
   cursor: pointer;
   text-decoration: none;
@@ -131,8 +127,13 @@
   margin-bottom: 16px;
 }
+.social-media-wrap img {
+  width: 25%;
+}
 
 .website-rights {
   color: #fff;
-  margin-bottom: 16px;
+  align-content: flex-end;
+  width: 50%;
+  margin-top: 2em;
 }
 
Index: imaps-frontend/src/pages/IMaps/components/Footer.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Footer.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/Footer.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -2,10 +2,11 @@
 import "./Footer.css";
 import { Button } from "./Button";
-import logo from "../../../assets/logo_icon.png";
+import logo from "../../../assets/novo_logo_nobg_cropped.png";
+import {Link} from "react-router-dom";
 
 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">
@@ -13,45 +14,26 @@
             <a href="#">Contact</a>
             <a href="#">Support</a>
-            <a href="#">Destinations</a>
-            <a href="#">Sponsorships</a>
           </div>
         </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 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>
         </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>
+
     </div>
   );
Index: imaps-frontend/src/pages/IMaps/components/Navbar.css
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,15 +1,4 @@
 .modern-navbar {
-  /*background-color: #ffffff;*/
-  /*background: linear-gradient(*/
-  /*        90deg,*/
-  /*        #fafafa 0%,*/
-  /*        #c07e7e 25%,*/
-  /*        #af2525 50%,*/
-  /*        #443a3a 75%,*/
-  /*        #8d1010 100%*/
-  /*);*/
-  /*background: linear-gradient(to right, #ffffff, #c12c2c);*/
-  /*background: linear-gradient(90deg, #3b3131, #ffffff);*/
-  background: linear-gradient(90deg, #9b1818, #efefef);
+  background: linear-gradient(90deg, #ffffff, #fffefe);
   color: #ffffff;
   /*color: #333333;*/
@@ -24,4 +13,6 @@
   border-radius: 8px;
   margin: 5px;
+  height: 70px;
+  overflow: hidden;
 }
 
Index: imaps-frontend/src/pages/IMaps/components/Navbar.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/Navbar.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -10,8 +10,4 @@
 function Navbar() {
   const [click, setClick] = useState(false);
-  const [button, setButton] = useState(true);
-
-  const handleClick = () => setClick(!click);
-  const closeMobileMenu = () => setClick(false);
 
   const { isAuthenticated } = useAppContext();
@@ -23,5 +19,4 @@
                 <div className="navbar-left">
                     <Logo position="relative"/>
-                    <h1 className="navbar-title">iMaps</h1>
                 </div>
 
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.jsx
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -14,12 +14,12 @@
         <h2 className="description">Create and explore detailed indoor maps.</h2>
         <div className="hero-btns">
-          <Link to="/myMaps">
-            <Button className="btns" buttonSize="btn--large">
-              Create Maps
+          <Link to="/Maps">
+            <Button buttonSize="btn--large" >
+              Browse Maps <i className="far fa-play-circle" />
             </Button>
           </Link>
-          <Link to="/Maps">
-            <Button className="btns" buttonSize="btn--large">
-              Browse Maps <i className="far fa-play-circle" />
+          <Link to="/myMaps">
+            <Button buttonSize="btn--large" buttonStyle="btn--outline">
+              Create Maps
             </Button>
           </Link>
Index: imaps-frontend/src/pages/IMaps/components/pages/Home.scss
===================================================================
--- imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/IMaps/components/pages/Home.scss	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -50,5 +50,8 @@
   width: 100vw;
   /* img size is 50x50 */
-  background: url($bg-url) repeat 0 0;
+  /* 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+ */
@@ -98,6 +101,4 @@
 
   font-size: 6em;
-
-
 
 
Index: imaps-frontend/src/pages/Login/Login.jsx
===================================================================
--- imaps-frontend/src/pages/Login/Login.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Login/Login.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -6,5 +6,8 @@
 import HttpService from "../../scripts/net/HttpService.js";
 import {useAppContext} from "../../components/AppContext/AppContext.jsx";
-import config from "../../scripts/net/netconfig.js";
+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 = () => {
@@ -26,8 +29,6 @@
     const handleLogin = async () => {
         const httpService = new HttpService();
-        return httpService.post(config.auth.login, payload)
-
+        return httpService.post(config.auth.login, payload);
     };
-
 
     const login = async (e) => {
@@ -37,9 +38,9 @@
             .then(resp => {
                 if (resp.token) {
-                    navigate(targetPath)
+                    navigate(targetPath);
                     localStorage.setItem("token", resp.token);
                     setUsername(resp.username);
                     setIsAuthenticated(true);
-                    console.log("ROLES",resp.roles)
+                    console.log("ROLES", resp.roles);
                 } else {
                     setError("Invalid username or password.");
@@ -47,32 +48,31 @@
             }).catch(reason => {
             console.error("Login failed", reason);
-            setError("Login failed. Please try again.")
-        })
+            setError("Login failed. Please try again.");
+        });
+    };
 
-        // fetch("http://localhost:8080/api/auth/login", {
-        //   method: "POST",
-        //   headers: {
-        //     "Content-Type": "application/json",
-        //   },
-        //   body: JSON.stringify(payload),
-        // })
-        //   .then((response) => {
-        //     if (!response.ok) {
-        //       throw new Error("Login failed: resp = " + response.statusText);
-        //     }
-        //     return response.json();
-        //   })
-        //   .then((data) => {
-        //     if (data.token) {
-        //       navigate(targetPath);
-        //       handleLogin(data);
-        //     } else {
-        //       setError("Invalid username or password.");
-        //     }
-        //   })
-        //   .catch((error) => {
-        //     console.error("Login failed", error);
-        //     setError("Login failed. Please try again.");
-        //   });
+    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
     };
 
@@ -111,4 +111,15 @@
                     <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>
Index: imaps-frontend/src/pages/Login/Login.module.css
===================================================================
--- imaps-frontend/src/pages/Login/Login.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Login/Login.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -13,32 +13,39 @@
 
 .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;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.wrapper p {
-  font-size: 0.85rem;
-  margin-top: 1rem;
-}
+  margin-left: 30%;
+  padding: 2rem;
+}
+
+
 
 .form {
-  padding: 1.5rem;
-  -ms-flex-preferred-size: 100vw;
-  flex-basis: 100vw;
+  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 */
 }
 
 .form .heading {
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   font-weight: bold;
   text-align: center;
+  margin-bottom: 1.5rem; /* Spacing between heading and form */
 }
 
 .or {
-  margin: 1rem 0;
+  margin-top: 1em;
+  text-align: center;
+  font-weight: bold;
+  color: #666;
 }
 
@@ -46,4 +53,6 @@
   display: block;
   margin: 1.25rem 0 1rem 0;
+  font-size: 0.95rem;
+  color: #333;
 }
 
@@ -51,8 +60,11 @@
   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 */
 }
 
@@ -60,4 +72,6 @@
   height: 40px;
   width: 100%;
+  max-width: 350px;
+  margin-top: 1.5rem;
   background-color: #258de6;
   color: white;
@@ -65,42 +79,89 @@
   letter-spacing: 1px;
   border: none;
-  display: block;
-  margin: 0 auto;
-  font-weight: bold;
-  margin-top: 1.5rem;
+  font-weight: bold;
   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;
-    -ms-flex-pack: distribute;
-    justify-content: space-around;
-    padding: 1.5rem;
+    justify-content: flex-end; /* Keep the form to the right */
+    padding: 2rem;
     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: 250px;
-  }
+    width: 100%; /* Ensures the input expands fully */
+    max-width: 350px;
+  }
+
+  .illustration{
+    margin-right: 40%;
+  }
+
   .illustration img {
-    max-width: 80%;
+    max-width: 100%;
     height: auto;
   }
@@ -108,13 +169,25 @@
 
 @media (max-width: 680px) {
+  .wrapper {
+    flex-direction: column; /* Stack form and illustration vertically */
+    align-items: center; /* Center content horizontally */
+    padding: 1rem;
+  }
+
   .illustration {
-    display: none;
-  }
-}
-
-.signUp .illustration {
-  order: 2;
-  justify-self: flex-end;
-  margin-left: 2rem;
+    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 */
+  }
 }
 
@@ -126,2 +199,8 @@
   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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MapView/MapView.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -14,8 +14,11 @@
 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);
@@ -28,4 +31,7 @@
     const [searchParams, setSearchParams] = useSearchParams();
     const [mainEntrance, setMainEntrance] = useState({});
+    const [canDisplayNavDownload,setCanDisplayNavDownload] = useState(false);
+    const [from,setFrom] = useState("");
+    const [to,setTo] = useState("");
 
     const defaultNavObj = {
@@ -115,4 +121,6 @@
                 setFloors(respFloors);
 
+                console.log("FLOOR DATA: " + tlFloor?.mapData)
+
                 appInstance.loadMapN(tlFloor?.mapData)
                 setApp(appInstance);
@@ -163,6 +171,11 @@
         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)
@@ -185,4 +198,16 @@
     }
 
+    useEffect(() => {
+        const handleNavigateEnd = (event) => {
+            console.log("DETAIL END",event.detail)
+            setCanDisplayNavDownload(true);
+        }
+
+        window.addEventListener("navend",handleNavigateEnd)
+        return () => {
+            window.removeEventListener("navend",handleNavigateEnd)
+        }
+    }, [app]);
+
 
     useEffect(() => {
@@ -216,5 +241,4 @@
         app.loadMapN(chFloor.mapData)
         app.floorNum = floorNum;
-
 
         console.log(`Floor changed to: ${floorNum}`);
@@ -257,7 +281,20 @@
                                 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"/>
@@ -265,4 +302,5 @@
                 </div>
             </div>
+            <div id="temp"></div>
 
             <div className={styles.floorSelectorContainer}>
@@ -283,4 +321,5 @@
             </div>
 
+
         </div>
     );
Index: imaps-frontend/src/pages/MyMaps/CreateMaps.module.css
===================================================================
--- imaps-frontend/src/pages/MyMaps/CreateMaps.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MyMaps/CreateMaps.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -55,8 +55,11 @@
   margin-bottom: 30px;
   text-align: center;
+  margin-top: 5em;
+
 }
 
 .searchBar input {
-  width: 300px;
+  /*width: 300px;*/
+  width: 33vw;
   padding: 10px;
   font-size: 16px;
@@ -83,11 +86,14 @@
   display: flex;
   flex-direction: column;
-  align-items: center; /* Center items horizontally */
-  justify-content: flex-start; /* Ensure tiles stack from the top */
+  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 {
@@ -127,4 +133,64 @@
 }
 
+.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 {
Index: imaps-frontend/src/pages/MyMaps/MyMaps.jsx
===================================================================
--- imaps-frontend/src/pages/MyMaps/MyMaps.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/MyMaps/MyMaps.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -10,6 +10,6 @@
 import {useAppContext} from "../../components/AppContext/AppContext.jsx";
 import config from "../../scripts/net/netconfig.js";
-import {element} from "prop-types";
 import Toast from "../../components/Toast/Toast.jsx";
+import plus_icon from "../../assets/plus_icon.png";
 
 const renderTile = ({data, isDragging}, openMapInfo) => (
@@ -65,10 +65,21 @@
         setToastMessage(message);
         setToastType(type);
-        setTimeout(() => setToastMessage(null), 3000); // Automatically hide the toast after 3 seconds
-    };
-
+        setTimeout(() => setToastMessage(null), 3000);
+    };
 
     const handleUpdate = async (updatedMap) => {
-        // Placeholder for map update logic
+        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()
+        }
     };
 
@@ -83,10 +94,9 @@
                 setTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
                 setAllTiles((prevTiles) => prevTiles.filter((tile) => tile.mapName !== mapName));
-                showToast("Map deleted", 1)
+                showToast("Map deleted", 1);
             })
             .catch((error) => {
                 const errorMessage = error.response?.data?.error || error.message || "Unknown error";
-                // alert(`Error deleting the map: ${errorMessage}`);
-                showToast(`Error deleting the map: ${errorMessage}`, 0)
+                showToast(`Error deleting the map: ${errorMessage}`, 0);
             });
     };
@@ -97,7 +107,6 @@
 
         httpService
-            .put(`${config.my_maps.add}?username=${username}`, mapDetails)
+            .put(`${config.my_maps.add}?username=${encodeURI(username)}`, mapDetails)
             .then((respMap) => {
-                console.log("RESP NEW MAP: " + respMap)
                 const mapTile = {
                     mapName: respMap.mapName,
@@ -108,7 +117,8 @@
                     modified_at: respMap.modifiedAt,
                     published_at: respMap.published_at,
-                    gmaps_url: respMap.gmaps_url,
+                    gmaps_url: respMap.gmapsUrl,
                     image_url: card,
                     is_published: respMap.is_published,
+                    mapType: respMap.mapType
                 };
 
@@ -116,9 +126,7 @@
                 setTiles((prevTiles) => [...prevTiles, mapTile]);
                 showToast("Map added successfully!");
-
-
             })
             .catch((error) => {
-                showToast("Map name already taken", 0)
+                showToast("Map name already taken", 0);
             });
     };
@@ -129,5 +137,7 @@
             httpService.setAuthenticated();
 
-            const respMaps = await httpService.get(`${config.my_maps.display}?username=${username}`);
+            const respMaps = await httpService.get(
+                `${config.my_maps.display}?username=${encodeURI(username)}`
+            );
 
             const mapTiles = respMaps.map((elem) => ({
@@ -139,9 +149,8 @@
                 modified_at: elem.modifiedAt,
                 published_at: elem.published_at,
-                gmaps_url: elem.gMapsUrl,
+                gmaps_url: elem.gmapsUrl,
                 image_url: card,
                 numFavourites: elem.numFavourites,
             }));
-
 
             setTiles(mapTiles);
@@ -154,5 +163,5 @@
         setPublicMaps(tiles.filter((tile) => tile.status === "PUBLIC"));
         setPrivateMaps(tiles.filter((tile) => tile.status === "PRIVATE"));
-        setPendingMaps(tiles.filter((tile) => tile.status === "INVALID"));
+        setPendingMaps(tiles.filter((tile) => tile.status === "PENDING"));
     }, [tiles]);
 
@@ -164,16 +173,20 @@
     return (
         <div className={styles.container}>
-            <Logo/>
-            <Profile/>
+
+            <div className={`${styles.logoWrapper}`}>
+                <Logo/>
+            </div>
             <h1>Your Maps</h1>
-
-            <div className={styles.actionButtons}>
-                <button className={styles.createMapsButton} onClick={openCreateModal}>
-                    Create Map
-                </button>
-            </div>
+            <div className={`${styles.profileWrapper}`}>
+                <Profile/>
+            </div>
+
 
             <div className={styles.searchBar}>
-                <input type="text" placeholder="Search for maps..." onChange={handleSearch}/>
+                <input
+                    type="text"
+                    placeholder="Search for maps..."
+                    onChange={handleSearch}
+                />
             </div>
 
@@ -201,4 +214,7 @@
                         forceTileHeight={170}
                     />
+                    <button className={styles.plusButton} onClick={openCreateModal}>
+                        <img src={plus_icon} alt="Add Map"/>
+                    </button>
                 </div>
 
@@ -222,8 +238,21 @@
                 onDelete={deleteMap}
                 onUpdate={handleUpdate}
-                onPublish={() => {
+                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,allTiles.find(m => m.mapName = selectedMap.mapName)])
+                    setPendingMaps((prevMaps) => [...prevMaps, updatedTile])
                     closeMapInfoModal()
                 }}
@@ -236,5 +265,11 @@
             />
 
-            {toastMessage && <Toast message={toastMessage} type={toastType} onClose={() => setToastMessage(null)}/>}
+            {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)
+++ imaps-frontend/src/pages/PrivacyPolicy/PrivacyPolicy.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,39 @@
+.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)
+++ imaps-frontend/src/pages/PrivacyPolicy/PrivacyPolicy.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,82 @@
+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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Signup/Signup.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -4,4 +4,5 @@
 import styles from "./Signup.module.css";
 import Logo from "../../components/Logo/Logo";
+import netconfig from "../../scripts/net/netconfig.js";
 
 export default function Signup() {
@@ -9,10 +10,17 @@
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [message, setMessage] = useState("");
-  const [messageType, setMessageType] = useState(""); // New state to manage message type
+  const [messageType, setMessageType] = useState("");
   const navigate = useNavigate();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+
+    if (password !== confirmPassword) {
+      setMessageType("error");
+      setMessage("Passwords do not match.");
+      return;
+    }
 
     const payload = {
@@ -23,5 +31,5 @@
 
     try {
-      const response = await fetch("http://localhost:8080/api/auth/register", {
+      const response = await fetch(netconfig.auth.register, {
         method: "POST",
         headers: {
@@ -35,8 +43,7 @@
         setMessage("User registered successfully!");
 
-        // Wait 3 seconds and then redirect to login page
         setTimeout(() => {
           navigate("/login");
-        }, 3000);
+        }, 1000);
       } else if (response.status === 409) {
         setMessageType("error");
@@ -54,62 +61,68 @@
 
   return (
-    <div className={styles.wrapper}>
-      <Logo></Logo>
-      <div className={styles.illustration}>
-        <img src={illustration} alt="illustration" />
+      <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>
-      <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 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Signup/Signup.module.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -1,49 +1,35 @@
-* {
-  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;
-  height: 100vh;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.wrapper p {
-  font-size: 0.85rem;
-  margin-top: 1rem;
+  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 */
 }
 
 .form {
-  padding: 1.5rem;
-  -ms-flex-preferred-size: 100vw;
-  flex-basis: 100vw;
+  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 */
 }
 
 .form .heading {
-  font-size: 1.5rem;
+  font-size: 1.8rem;
   font-weight: bold;
-  text-align: center;
-}
-
-.or {
-  margin: 1rem 0;
+  color: #258de6;
+  margin-bottom: 1rem;
 }
 
 .form label {
   display: block;
-  margin: 1.25rem 0 1rem 0;
+  margin: 1.25rem 0 0.5rem 0;
+  font-size: 0.9rem;
+  font-weight: bold;
+  color: #555;
 }
 
@@ -51,12 +37,19 @@
   height: 40px;
   width: 100%;
-  padding: 15px;
+  padding: 10px 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: 40px;
+  height: 45px;
   width: 100%;
   background-color: #258de6;
@@ -65,89 +58,97 @@
   letter-spacing: 1px;
   border: none;
+  margin-top: 1.5rem;
+  font-weight: bold;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.form button:hover {
+  filter: brightness(90%);
+}
+
+.form button:active {
+  transform: scale(0.96);
+}
+
+.form p {
+  text-align: center;
+  margin-top: 1rem;
+  font-size: 0.9rem;
+}
+
+.form p a {
+  color: #258de6;
+  text-decoration: none;
+  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;
+  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,
+.successMessage {
+  font-size: 0.9rem;
   font-weight: bold;
-  margin-top: 1.5rem;
+  text-align: center;
+  margin-top: 1rem;
+  padding: 10px;
   border-radius: 8px;
 }
 
-@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;
-  }
+.errorMessage {
+  color: #e74c3c;
+  background-color: #fbeaea;
+  border: 1px solid #e74c3c;
 }
 
-@media (max-width: 680px) {
-  .illustration {
-    display: none;
-  }
+.successMessage {
+  color: #2ecc71;
+  background-color: #ebf9f1;
+  border: 1px solid #2ecc71;
 }
-
-.signUp .illustration {
-  order: 2;
-  justify-self: flex-end;
-  margin-left: 2rem;
-}
-
-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;
-}
-
-/* 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;
-}
Index: imaps-frontend/src/pages/TermsOfService/TermsOfService.css
===================================================================
--- imaps-frontend/src/pages/TermsOfService/TermsOfService.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/pages/TermsOfService/TermsOfService.css	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,42 @@
+.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)
+++ imaps-frontend/src/pages/TermsOfService/TermsOfService.jsx	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,81 @@
+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/MapShape.js
===================================================================
--- imaps-frontend/src/scripts/base/MapShape.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/base/MapShape.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -7,5 +7,4 @@
         }
 
-        console.log(config.x,"FFF");
         super(config);
         this.layer = layer;
@@ -64,5 +63,5 @@
             text: this._info.name,
             fontSize: 12,
-            fontFamily: 'Verdana',
+            fontFamily: 'Exo',
             fill: 'white',
         });
@@ -134,4 +133,8 @@
     }
 
+    onPlace(){
+        //this.snapToGrid();
+    }
+
 
     get info() {
Index: imaps-frontend/src/scripts/main/MapBuilder.js
===================================================================
--- imaps-frontend/src/scripts/main/MapBuilder.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/main/MapBuilder.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -21,5 +21,4 @@
 
         // 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)
         // TODO text na top layer sekogas
@@ -35,4 +34,6 @@
         this.textLayer = new Konva.Layer();
         this.gridLayer.listening(false);
+
+        this.isDrawEventBound = false;
 
 
@@ -96,8 +97,8 @@
     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("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));
 
@@ -107,5 +108,5 @@
         this.boundEfficientDrawingModeEventListener = this.toggleEfficientDrawingMode.bind(this);
 
-        //this.attachKeyPressEventListeners();
+        this.attachKeyPressEventListeners();
 
         this.stage.on("mousedown touchstart", this.handleMouseDown.bind(this));
@@ -119,4 +120,5 @@
 
     detachKeyPressEventListeners() {
+        console.log("DETACH")
         window.removeEventListener("keydown", this.boundEscapeEventListener);
         window.removeEventListener("keydown", this.boundDeleteEventListener);
@@ -126,4 +128,5 @@
 
     attachKeyPressEventListeners() {
+        console.log("ATTACH")
         window.addEventListener("keydown", this.boundEscapeEventListener);
         window.addEventListener("keydown", this.boundDeleteEventListener);
@@ -269,5 +272,4 @@
         let infoPin = Factory.createShape("InfoPin", attrs);
         addEventHandling(infoPin, this, "dblclick");
-        //this.shapes.push(infoPin);
         ShapeRegistry.add(infoPin)
         this.mainLayer.add(infoPin);
@@ -307,4 +309,5 @@
 
         const placedObj = Factory.createShape(this.hoverObj.type, attrs);
+
         if (!placedObj) return;
 
@@ -312,14 +315,12 @@
 
         this.mainLayer.add(placedObj);
-        //this.shapes.push(placedObj);
-        console.log("VO PLACED SHAEPS WALL ZITI SE: " + placedObj.className);
         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();
@@ -328,12 +329,17 @@
             this.stopDrawing();
         }
+        this.mainTransformer.nodes([])
     }
 
     stopDrawing() {
-        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);
+        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;
+        }
+
     }
 
@@ -365,6 +371,9 @@
         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);
@@ -374,7 +383,8 @@
     selectShape(e) {
         if (e.target.tagName === "LI") {
+          this.stopDrawing()
             const shapeType = e.target.getAttribute("data-info");
             this.startDrawing(shapeType);
-            this.mainTransformer.nodes([]);
+            this.mainTransformer.nodes([])
         }
     }
@@ -464,8 +474,4 @@
 
     saveShapeDetails() {
-        // this.shapes.forEach(shape => {
-        //     shape.saveShapeDetails();
-        //     console.log(shape.info);
-        // });
         ShapeRegistry.saveDetails();
         console.log("thisflornum",this.floorNum)
@@ -478,21 +484,14 @@
     }
 
-    getPayload(){
-        this.saveShapeDetails();
-        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;
@@ -500,4 +499,5 @@
 
         if (!e.target.hasName("mapObj")) {
+            console.log("STAGECLICK3")
             return;
         }
@@ -505,4 +505,5 @@
         const metaPressed = e.evt.shiftKey || e.evt.ctrlKey || e.evt.metaKey;
         const isSelected = this.mainTransformer.nodes().indexOf(e.target) >= 0;
+
 
         if (!metaPressed && !isSelected) {
@@ -527,34 +528,8 @@
     }
 
-    getRoomTypes() {
-        return this.roomTypes;
-    }
-
-    getRooms() {
-        return this.getShapeInfoByType("Room");
-    }
-
-    getPins() {
-        return this.getShapeInfoByType("InfoPin");
-    }
-
-    getEntrances() {
-        return this.getShapeInfoByType("Entrance");
-    }
-
-
-
-    getShapeInfoByType(type) {
-        return ShapeRegistry.getShapes(this.floorNum).filter((shape) => shape.className === type).map((shape) => shape.info);
-    }
-
 
     drawConnection(node1Name, node2Name) {
 
         ShapeRegistry.drawConnection(node1Name,node2Name);
-    }
-
-    getNodeByName(name) {
-        return ShapeRegistry.getShapes(this.floorNum).filter(shape => shape instanceof MapNode && shape.info.name === name)[0];
     }
 
@@ -571,16 +546,4 @@
     }
 
-    isMainEntranceSelected() {
-        console.log(this.getEntrances().forEach((en) => console.log(en.isMainEntrance, "asdsad")));
-
-        let hasMainEntrance = false;
-
-        this.getEntrances().forEach((entrance) => {
-            if (entrance.isMainEntrance === true) hasMainEntrance = true;
-        });
-
-        return hasMainEntrance;
-
-    }
 
     clearMap() {
@@ -653,5 +616,10 @@
         this.mainLayer.add(this.selectionRectangle);
 
-        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => shape.displayName(this.textLayer));
+        ShapeRegistry.getShapes(this.floorNum).forEach((shape) => {
+            shape.displayName(this.textLayer);
+            if(shape.className === "Entrance"){
+                shape.setHighlight();
+            }
+        });
     }
 
Index: imaps-frontend/src/scripts/main/MapDisplay.js
===================================================================
--- imaps-frontend/src/scripts/main/MapDisplay.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/main/MapDisplay.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -4,6 +4,10 @@
 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 {
@@ -18,4 +22,14 @@
         });
 
+        this.selectedRoom = {
+            id: 1,
+            name: "223",
+            type: "Laboratory",
+            image:
+                "data:image/jpeg;base64,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",
+            description: "223 is a laboratory with a capacity of 40 people",
+        };
+        this.toggleSearch = false;
+
         this.shapes = [];
         this.roomTypes = [];
@@ -28,4 +42,7 @@
         this.stage.add(this.textLayer);
 
+
+        this.cachedCanvases = [];
+
         this.floorNum = floorNum;
 
@@ -64,7 +81,9 @@
         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)
             }
         });
@@ -78,6 +97,4 @@
     }
 
-
-
     loadMapN(floorData) {
         if (floorData == null || floorData === "") return;
@@ -97,4 +114,5 @@
 
 
+
     drawRouteNEW(nodes, offset = 0) {
 
@@ -106,5 +124,4 @@
         let buff = [nodes[idx].coordinates.x, nodes[idx].coordinates.y];
 
-
         ++idx;
 
@@ -115,4 +132,8 @@
 
             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;
             }
@@ -122,4 +143,6 @@
 
             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;
@@ -131,5 +154,5 @@
             const endY = nextNode.coordinates.y;
 
-            const numSegments = 12;
+            const numSegments = 10;
 
             const deltaX = (endX - startX) / numSegments;
@@ -157,13 +180,11 @@
                     clearInterval(interval);
                     idx++;
-                    setTimeout(drawNextSegment, 150);
+                    setTimeout(drawNextSegment, 60);
                 }
-            }, 50);
+            }, 30);
         };
 
         drawNextSegment();
     }
-
-
 
     initializeRoomTypes() {
@@ -173,19 +194,6 @@
     }
 
-    getRoomTypes() {
-        return this.roomTypes;
-    }
-
-
-    getShapeByName(name){
-        return this.shapes.find(shape => shape.info.name === name)
-    }
-
     getShapeByType(type) {
         return this.shapes.filter((shape) => shape.class === type)
-    }
-
-    toggleSearchRoom() {
-        this.toggleSearch = !this.toggleSearch;
     }
 
@@ -196,9 +204,99 @@
     }
 
-    getMainEntrance() {
-        return this.shapes.filter(shape => shape.class === "Entrance").filter(el => el.info.isMainEntrance === true)[0];
-    }
-
-    setFilter(filter) {
+     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") {
Index: imaps-frontend/src/scripts/net/HttpService.js
===================================================================
--- imaps-frontend/src/scripts/net/HttpService.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/net/HttpService.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -5,4 +5,5 @@
     constructor(auth = false) {
       this.auth = auth;
+      this.responseType = 'json';
     }
 
@@ -10,4 +11,14 @@
         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) {
@@ -53,6 +64,12 @@
 
       console.log("HTTPSERVICE: RESPONSE:",response);
-  
-      return response.json();
+
+      if(this.responseType === 'json'){
+          return response.json();
+      } else if (this.responseType === 'text'){
+          return response.text()
+      } else{
+          console.error('bad resp type')
+      }
     }
   
Index: imaps-frontend/src/scripts/net/netconfig.js
===================================================================
--- imaps-frontend/src/scripts/net/netconfig.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/net/netconfig.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -14,4 +14,5 @@
         publish: `${API_PROTECTED}/publish/add`,
         publish_get: `${API_PROTECTED}/publish/get`,
+        edit_map_info: `${API_PROTECTED}/my-maps/edit`,
     },
     room_types: {
@@ -34,4 +35,5 @@
         navigate: `${API_PUBLIC}/navigate`,
         add_favourite: `${API_PROTECTED}/favourites/add`,
+        add_report: `${API_PROTECTED}/reports/create`,
     },
     favourites: {
@@ -43,5 +45,11 @@
         login: `${API_AUTH}/login`,
         register: `${API_AUTH}/register`,
-        verify: `${API_AUTH}/verify`
+        verify: `${API_AUTH}/verify`,
+        oauth: {
+            github: {
+                state: `${API_BASE_URL}/oauth/state`,
+                redirectUri : `${API_BASE_URL}/oauth/callback`
+            }
+        }
 
     },
@@ -50,5 +58,6 @@
         load_pr: `${API_BASE_URL}/admin/load-pr`,
         approve_pr: `${API_BASE_URL}/admin/pr/approve`,
-        deny_pr: `${API_BASE_URL}/admin/pr/deny`
+        deny_pr: `${API_BASE_URL}/admin/pr/deny`,
+        load_reports: `${API_BASE_URL}/admin/load-reports`
     }
 };
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedEntrance.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedEntrance.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedEntrance.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -8,6 +8,6 @@
       x: attrs.x,
       y: attrs.y,
-      width: attrs.width * scaleX,
-      height: attrs.height * scaleY,
+      width: attrs.width,
+      height: attrs.height,
       fill: "#7fef83",
       stroke: "black",
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedRoom.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedRoom.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedRoom.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -7,6 +7,6 @@
       x: attrs.x,
       y: attrs.y,
-      width: attrs.width * scaleX,
-      height: attrs.height * scaleY,
+      width: attrs.width,
+      height: attrs.height,
       fill: "#A2D9FF",
       stroke: "black",
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedStairs.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedStairs.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedStairs.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -8,6 +8,6 @@
             x: attrs.x,
             y: attrs.y,
-            width: attrs.width * scaleX,
-            height: attrs.height * scaleY,
+            width: attrs.width ,
+            height: attrs.height,
             fill: "rgb(199,190,133)",
             stroke: "rgb(16,15,15)",
Index: imaps-frontend/src/scripts/rendered_shapes/RenderedWall.js
===================================================================
--- imaps-frontend/src/scripts/rendered_shapes/RenderedWall.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/rendered_shapes/RenderedWall.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -7,6 +7,6 @@
             x: attrs.x,
             y: attrs.y,
-            width: attrs.width * scaleX,
-            height: attrs.height * scaleY,
+            width: attrs.width,
+            height: attrs.height,
             fill: '#4B4B4B',
             stroke: 'black',
Index: imaps-frontend/src/scripts/shapes/Entrance.js
===================================================================
--- imaps-frontend/src/scripts/shapes/Entrance.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/shapes/Entrance.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -2,4 +2,7 @@
 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";
 
 export default class Entrance extends MapNode {
@@ -14,6 +17,6 @@
                 x: attrs.position.x,
                 y: attrs.position.y,
-                width: attrs.width,
-                height: attrs.height,
+                width: attrs.width * attrs.scaleX,
+                height: attrs.height * attrs.scaleY,
                 fill: "rgb(126,238,167)",
                 stroke: "#252627",
@@ -46,18 +49,20 @@
         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;
-        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.floorNum = attrs.floor_num;
+        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);
@@ -75,9 +80,14 @@
 
     setInfo(infoObj) {
-        console.log("SA VIKNA SETINFO")
         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("#a10114")
+            this.stroke("#8a000d")
         }else{
             this.strokeWidth(1)
@@ -85,4 +95,15 @@
         }
     }
+
+    onPlace() {
+        ShapeQuery
+            .findAllByTypeAndFloor(this.floorNum,"Room")
+            .forEach(room => {
+                if(Konva.Util.haveIntersection(room.getClientRect(),this.getClientRect())){
+                    this.info.connectedRoom = room.info.name;
+                }
+            })
+        this.setHighlight()
+    }
 }
 
Index: imaps-frontend/src/scripts/util/Factory.js
===================================================================
--- imaps-frontend/src/scripts/util/Factory.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/scripts/util/Factory.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -45,4 +45,10 @@
     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":
Index: imaps-frontend/src/scripts/util/dispatchCustomEvent.js
===================================================================
--- imaps-frontend/src/scripts/util/dispatchCustomEvent.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
+++ imaps-frontend/src/scripts/util/dispatchCustomEvent.js	(revision 79a03170cdde4e801d12257ee86723774970427b)
@@ -0,0 +1,6 @@
+export const dispatchCustomEvent = (eventName,data) => {
+    let event = new CustomEvent(eventName,{
+        detail : data
+    })
+    window.dispatchEvent(event)
+}
