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;
