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>
+    )
+}
