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;
 }
 
