Index: imaps-frontend/src/pages/Draw/Draw.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.jsx	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Draw/Draw.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -1,116 +1,153 @@
-import { useEffect, useState } from "react";
-import { MapBuilder } from "../../scripts/main/MapBuilder.js";
+import { useContext, useEffect, useState } from "react";
 import styles from "./Draw.module.css";
-import RoomModal from "../../components/RoomModal/RoomModal.jsx";
-import SideBar from "../../components/SideBar/SideBar.jsx";
-import EntranceModal from "../../components/EntranceModal/EntranceModal.jsx";
+import RoomModal from "../../components/Modals/RoomModal/RoomModal.jsx";
+import EntranceModal from "../../components/Modals/EntranceModal/EntranceModal.jsx";
 import DrawGuide from "../../components/DrawGuide/DrawGuide.jsx";
-import RoomTypeModal from "../../components/RoomTypeModal/RoomTypeModal.jsx";
-import InfoPinModal from "../../components/InfoPinModal/InfoPinModal.jsx";
+import RoomTypeModal from "../../components/Modals/RoomTypeModal/RoomTypeModal.jsx";
+import InfoPinModal from "../../components/Modals/InfoPinModal/InfoPinModal.jsx";
+import SaveMap from "../../components/SaveMap/SaveMap.jsx";
+import Logo from "../../components/Logo/Logo.jsx";
+import { Link, useNavigate, useParams, useSearchParams } from "react-router-dom";
+import Profile from "../../components/Profile/Profile.jsx";
 import HttpService from "../../scripts/net/HttpService.js";
-import SaveMap from "../../components/SaveMap/SaveMap.jsx";
-import logo from "../../assets/logo_icon.png";
-import MapTemplateSelector from "../../components/MapTemplateSelector/LoadMap.jsx";
-import KeymapPanel from "../../components/KeyMappingsGuidePanel/KeymapPanel.jsx";
-import { Link } from "react-router-dom";
+import StairsModal from "../../components/Modals/StairsModal/StairsModal.jsx";
+import useMapLoader from "./Hooks/useMapLoader.js";
+import {FloorSelector} from "./FloorSelector.jsx";
+import {useRoomTypesLoader} from "./Hooks/useRoomTypesLoader.js";
+import {useAppContext} from "../../components/AppContext/AppContext.jsx";
+import config from "../../scripts/net/netconfig.js";
+import ShapeRegistry from "../../scripts/util/ShapeRegistry.js";
 
 function Draw() {
-  const [selectedFloor, setSelectedFloor] = useState(1);
-  const [app, setApp] = useState(null);
+  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[roomTypes,setRoomTypes] = useState([]);
+
+  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 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);
+    }
+  };
+
+  const deleteFloorHandler = async (floorNum) => {
+    if(floorNum === 0) return
+
+    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))
+
+      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(() => {
-    const app = new MapBuilder("container");
-    setApp(app);
-    // fpsCounterLoop();
+    return () => {
+      ShapeRegistry.clear();
+    }
   }, []);
 
-  const handleFloorChange = (event) => {
-    setSelectedFloor(event.target.value);
-    console.log(`Floor changed to: ${event.target.value}`);
-  };
 
-  const handleRenderClick = () => {
-    setIsPopupVisible(true);
+  const handleSaveClick = async () => {
+    saveFloor().then(r => {
+     floors.forEach(flr => {
+       setIsPopupVisible(true);
+       setTimeout(() => {
+         setIsPopupVisible(false);},
+           3000);
+       console.log("floor after save: " + JSON.stringify(flr))
+     })
+    });
 
-    setTimeout(() => {
-      setIsPopupVisible(false);
-    }, 3000);
-  };
 
-  const handleSaveClick = async (mapName) => {
-    const resp = await app.saveMap(mapName);
-  };
-  const handleLoadMapClick = (data) => {
-    app.deserializeMap(data);
   };
 
   return (
     <div className={styles.wrapper} id="wrapper">
-      <SideBar></SideBar>
+      {/* <SideBar></SideBar> */}
+      <Logo></Logo>
       <div id="container" className={styles.cont}></div>
       <div className={styles.panel}>
-        <Link to="/">
-          <img src={logo} alt="Finki Logo" className={styles.logo} />
+        <div className={styles.topPanelH}>
+          <Profile position="inline"></Profile>
+        </div>
+        <Link to={`/myMaps/${mapName}/View`} className={styles.titleLink}>
+          <h1 className={styles.title}>{mapName}</h1>
         </Link>
-        <h1 className={styles.title}>Map Builder</h1>
-        {/* <div id="fpscont" className={styles.fpscounter}>
-          <p id="fpsCounter"></p>
-        </div> */}
         <div className={styles.guideWrapper}>
-          <DrawGuide />
+          <DrawGuide/>
         </div>
-
-        {/* <div className={styles.floorSelector}>
-          <label htmlFor="floorSelect">Select Floor:</label>
-          <select
-            id="floorSelect"
-            value={selectedFloor}
-            onChange={handleFloorChange}
-            className={styles.floorDropdown}
-          >
-            <option value={1}>1st Floor</option>
-            <option value={2}>2nd Floor</option>
-            <option value={3}>3rd Floor</option>
-            <option value={4}>4th Floor</option>
-          </select>
-        </div> */}
-        {/* <h2 className={styles.paragraph}>Objects:</h2> */}
+        <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>
-        <br />
-        <RoomTypeModal map={app}></RoomTypeModal>
+        <RoomTypeModal map={app} roomTypes={roomTypes} addRoomTypeDB={addRoomType}></RoomTypeModal>
+        <br/>
+        <hr/>
+        <br/>
+        <FloorSelector floorConfig={{
+          floors,searchParams,
+          setSearchParams,addFloorHandler,
+          deleteFloorHandler
+        }}></FloorSelector>
 
-        <div id="render" className={styles.buttonContainer}>
-          <button
-            id="render-button"
-            type="button"
-            className={styles.renderButton}
-            onClick={handleRenderClick}
-          >
-            Render
-          </button>
-        </div>
+        <br/>
+
+        <hr/>
+        <br/>
+        {hasError && <p style={{color: "red", textAlign: "center"}}>{errorMessage}</p>}
         <div className={styles.templateCont}>
           <SaveMap submitHandler={handleSaveClick}></SaveMap>
-          <MapTemplateSelector loadHandler={handleLoadMapClick}></MapTemplateSelector>
         </div>
 
         <div className={styles.hide}>
-          <RoomModal map={app}></RoomModal>
+          <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 Rendered!</h2>
-            <p>Your map has been successfully rendered.</p>
+          <div className={styles.popup}>
+            <div className={styles.popupContent}>
+              <h2>Map Saved!</h2>
+              <p>Your map has been successfully saved.</p>
+            </div>
           </div>
-        </div>
       )}
     </div>
Index: imaps-frontend/src/pages/Draw/Draw.module.css
===================================================================
--- imaps-frontend/src/pages/Draw/Draw.module.css	(revision d56544918790c0c3bc50f2f0a98c99f3d2988ccf)
+++ imaps-frontend/src/pages/Draw/Draw.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -4,18 +4,36 @@
   padding: 0;
   height: 100%;
-  overflow: hidden;
+  overflow-x: hidden;
   background-color: #141414;
 }
 
+.topPanelH {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
 .logo {
-  width: 100px;
-  margin: 10px;
-  align-self: center;
+  width: 80px;
 }
 
 .title {
-  margin-top: 20px;
-  color: #804047;
-  font-size: 120%;
+  text-align: center;
+  font-size: 2.5em;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: #333333;
+  font-family: "Oswald", sans-serif;
+  margin-bottom: 0;
+  text-decoration: none;
+}
+
+.titleLink {
+  text-decoration: none;
+}
+.titleLink:hover{
+  text-decoration: none;
 }
 
@@ -23,4 +41,5 @@
   color: #cccccc;
 }
+
 .guideWrapper {
   display: flex;
@@ -28,4 +47,5 @@
   align-items: center;
   margin: 0;
+  width: 100%;
 }
 
@@ -51,4 +71,5 @@
   display: flex;
   flex-direction: column;
+  align-items: center; /* Center elements horizontally */
   padding: 20px;
   background-color: #1c1c1c;
@@ -58,17 +79,15 @@
   margin-right: 10px;
   border-radius: 20px;
+  overflow-x: hidden;
 }
 
 .buttonContainer {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   align-items: center;
   margin-top: 2rem;
   gap: 10px;
-}
-
-/* .hide {
-  visibility: hidden;
-} */
+  width: 100%;
+}
 
 .renderButton {
@@ -104,8 +123,9 @@
   list-style: none;
   padding: 0;
-  margin: 0 0;
-  display: flex;
-  flex-direction: column;
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
   gap: 15px;
+  justify-items: center;
   align-items: center;
 }
@@ -127,9 +147,4 @@
 }
 
-.templateCont {
-  display: flex;
-  flex-direction: column;
-}
-
 .shapeOption:hover {
   background-color: #94183b;
@@ -137,7 +152,16 @@
 }
 
+.templateCont {
+  display: flex;
+  flex-direction: column;
+  align-items: center; /* Center section horizontally */
+  width: 100%;
+}
+
 .fpscounter {
   border: 1px solid #00b822;
   margin: 20px 0;
+  text-align: center;
+  width: 100%;
 }
 
@@ -145,37 +169,8 @@
   color: #00740c;
   font-weight: bold;
-  text-align: center;
   margin: 0;
   padding: 5px 0;
 }
 
-.floorSelector {
-  margin-bottom: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  color: #ffffff;
-}
-
-.floorSelector label {
-  font-size: 14px;
-}
-
-.floorDropdown {
-  padding: 8px;
-  font-size: 14px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #3a3a3a;
-  color: #ffffff;
-  cursor: pointer;
-  width: 100%;
-  transition: border-color 0.3s;
-}
-
-.floorDropdown:focus {
-  outline: none;
-  border-color: #1e90ff;
-}
 
 .popup {
@@ -226,2 +221,173 @@
   background-image: url("./shapeImages/room_icon.png");
 }
+.stairs {
+  background-image: url("./shapeImages/stairs_icon.png");
+}
+.floorSection {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  background-color: #2d2d2d;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+  width: 100%;
+}
+
+.floorLabel {
+  font-size: 16px;
+  font-weight: bold;
+  color: #ffffff;
+  margin-bottom: 10px;
+  text-align: center;
+}
+
+.floorList {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+}
+
+.floorItems {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.addFloorButton {
+  background-color: #e67e22;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.addFloorButton:hover {
+  background-color: #d2691e;
+  transform: scale(1.1);
+}
+
+.addFloorButton:active {
+  background-color: #b35418;
+  transform: scale(0.95);
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  filter: invert(1);
+}
+
+.floorButton {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  width: 100%;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.floorButton:hover {
+  background-color: #4a4a4a;
+}
+
+.floorButton.active {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.floorInput {
+  width: 60%;
+  padding: 8px;
+  font-size: 14px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #3a3a3a;
+  color: #ffffff;
+  text-align: center;
+  transition: border-color 0.3s;
+}
+
+.floorInput:focus {
+  outline: none;
+  border-color: #1e90ff;
+}
+
+.floorActions {
+  display: flex;
+  gap: 10px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+}
+
+.errorMessage {
+  color: red;
+  font-size: 12px;
+  margin-top: 10px;
+  text-align: center;
+}
+.floorItemWrapper {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.floorItem {
+  padding: 10px 15px;
+  font-size: 14px;
+  color: #ffffff;
+  background-color: #3a3a3a;
+  border: 1px solid #555555;
+  border-radius: 8px;
+  text-align: center;
+  cursor: pointer;
+  flex-grow: 1;
+  transition: background-color 0.3s;
+}
+
+.floorItem:hover {
+  background-color: #4a4a4a;
+}
+
+.activeFloor {
+  background-color: #1e90ff;
+  color: #ffffff;
+  font-weight: bold;
+}
+
+.deleteFloorButton {
+  background-color: #ff4d4d;
+  border: none;
+  border-radius: 8px;
+  padding: 10px;
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.3s, transform 0.2s;
+}
+
+.deleteFloorButton:hover {
+  background-color: #e60000;
+  transform: scale(1.1);
+}
+
+.deleteFloorButton:active {
+  background-color: #cc0000;
+  transform: scale(0.95);
+}
Index: imaps-frontend/src/pages/Draw/FloorSelector.jsx
===================================================================
--- imaps-frontend/src/pages/Draw/FloorSelector.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/FloorSelector.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,60 @@
+import styles from "./Draw.module.css";
+import plus_icon from "../../assets/plus_icon.png";
+
+export const FloorSelector = ({floorConfig}) => {
+
+    const {floors,searchParams,addFloorHandler,setSearchParams,deleteFloorHandler} = floorConfig;
+
+    return (
+        <div className={styles.floorSection}>
+            <div className={styles.floorList}>
+                <label className={styles.floorLabel}>Available Floors:</label>
+                <div className={styles.floorItems}>
+                    {/* Add new positive floor above */}
+                    <button
+                        className={styles.addFloorButton}
+                        onClick={() => {
+                            const newFloor = Math.max(...floors.map((f) => f.num)) + 1;
+                            addFloorHandler(newFloor);
+                        }}
+                    >
+                        <img src={plus_icon} alt="Add Positive Floor" className={styles.icon}/>
+                    </button>
+
+                    {/* Display editable floors */}
+                    {floors
+                        .sort((a, b) => b.num - a.num)
+                        .map((floor) => (
+                            <div key={floor.num} className={styles.floorItemWrapper}>
+                                <button
+                                    onClick={() => setSearchParams({floor: floor.num}, {replace: true})}
+                                    className={`${styles.floorItem} ${
+                                        searchParams.get("floor") == floor.num ? styles.activeFloor : ""
+                                    }`}
+                                >
+                                    Floor {floor.num}
+                                </button>
+                                <button
+                                    className={styles.deleteFloorButton}
+                                    onClick={() => deleteFloorHandler(floor.num)}
+                                >
+                                    🗑️
+                                </button>
+                            </div>
+                        ))}
+
+                    {/* Add new negative floor below */}
+                    <button
+                        className={styles.addFloorButton}
+                        onClick={() => {
+                            const newFloor = Math.min(...floors.map((f) => f.num)) - 1;
+                            addFloorHandler(newFloor);
+                        }}
+                    >
+                        <img src={plus_icon} alt="Add Negative Floor" className={styles.icon}/>
+                    </button>
+                </div>
+            </div>
+        </div>
+    )
+}
Index: imaps-frontend/src/pages/Draw/Hooks/useMapLoader.js
===================================================================
--- imaps-frontend/src/pages/Draw/Hooks/useMapLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/Hooks/useMapLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,114 @@
+import { useState, useEffect } from "react";
+import HttpService from "../../../scripts/net/HttpService.js";
+import {MapBuilder} from "../../../scripts/main/MapBuilder.js";
+import parseMapData from "../../../scripts/util/parseMapData.js";
+import ShapeRegistry from "../../../scripts/util/ShapeRegistry.js";
+import saveMap from "../../../components/SaveMap/SaveMap.jsx";
+import triggerMapSave from "../../../scripts/util/triggerMapSave.js";
+import config from "../../../scripts/net/netconfig.js";
+
+
+
+const useMapLoader = (mapName, username, searchParams, setSearchParams) => {
+    const [floors, setFloors] = useState([]);
+    const [mapLoaded, setMapLoaded] = useState(false);
+    const [app, setApp] = useState(null);
+
+    useEffect(() => {
+        if (!searchParams.has("floor")) {
+            setSearchParams({ floor: "0"},{replace:true});
+        }
+    }, [setSearchParams, searchParams]);
+
+    useEffect(() => {
+        const loadFloors = async () => {
+            const httpService = new HttpService();
+            try {
+                const respFloors = await httpService.get(`${config.my_maps.load}?mapName=${mapName}&username=${username}`);
+                console.log("Floors loaded:", respFloors);
+                setFloors(respFloors);
+                setMapLoaded(true);
+
+                respFloors.forEach(flr => {
+                    parseMapData(flr.mapData,() => true,false)
+                })
+
+            } catch (e) {
+                console.error("Can't load map:", e.message);
+            }
+        };
+
+        if (!mapLoaded) {
+            loadFloors();
+
+        }
+    }, [mapName, username]);
+
+    // floor change
+    useEffect(() => {
+        if (!mapLoaded || floors === undefined || floors.length === 0) return;
+
+        const floorNum = parseInt(searchParams.get("floor"));
+        const selectedFloor = floors.find((f) => f.num === floorNum);
+
+        if (!selectedFloor) {
+            console.error(`Floor ${floorNum} not found`);
+            return;
+        }
+
+        console.log("Changing to floor:", selectedFloor);
+
+        const appInstance = new MapBuilder("container", floorNum, mapName);
+        appInstance.loadNewFloor(selectedFloor);
+        setApp(appInstance);
+        console.log("Fchange");
+        triggerMapSave();
+
+        }, [searchParams, mapLoaded]);
+
+
+    const saveFloor = async () => {
+        const payload = app.saveShapeDetails();
+        const httpService = new HttpService(true);
+        try {
+            const responseFloor = await httpService.put(`${config.my_maps.save}?username=${username}`, payload);
+            console.log("FLOORS",floors.length)
+
+            setFloors((prevFloors) =>
+                prevFloors.map(floor => floor.num === responseFloor.num ? responseFloor : floor)
+            )
+            console.log(responseFloor, "resp in builder");
+        } catch (err) {
+            console.log("ERROR --> Could not Save map --->", err);
+        }
+    }
+
+
+    useEffect(() => {
+        if (app) {
+            const handleSaveFloor = () => {
+                console.log("mapsave event triggered");
+                saveFloor();
+            };
+
+            window.addEventListener("mapsave", handleSaveFloor);
+            return () => {
+                window.removeEventListener("mapsave", handleSaveFloor);
+            };
+        }
+    }, [app]);
+
+
+    useEffect(() => {
+        return () => {
+            if (app) {
+                app.clearMap();
+                app.stage.destroy();
+            }
+        };
+    }, [app]);
+
+    return { app, floors, saveFloor,setFloors};
+};
+
+export default useMapLoader;
Index: imaps-frontend/src/pages/Draw/Hooks/useRoomTypesLoader.js
===================================================================
--- imaps-frontend/src/pages/Draw/Hooks/useRoomTypesLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/pages/Draw/Hooks/useRoomTypesLoader.js	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,31 @@
+import {useEffect} from "react";
+import HttpService from "../../../scripts/net/HttpService.js";
+import log from "eslint-plugin-react/lib/util/log.js";
+import config from "../../../scripts/net/netconfig.js";
+
+export const useRoomTypesLoader = (setRoomTypes,mapName,username) => {
+    useEffect(() => {
+            const loadRoomTypes = async () => {
+                const httpService = new HttpService();
+                httpService.setAuthenticated();
+                const roomTypes = await httpService.get(`${config.room_types.display(true)}?mapName=${mapName}&username=${username}`)
+                console.log("loaded ROOM TYPES: " + roomTypes)
+                setRoomTypes(roomTypes);
+            }
+            loadRoomTypes()
+                .then(resp => {
+                    console.log("LOADED ROOM TYPES")
+                })
+
+    }, []);
+
+    const addRoomType = async (roomTypeName) => {
+        const httpService = new HttpService();
+        httpService.setAuthenticated();
+        await httpService.post(`${config.room_types.add}?roomTypeName=${roomTypeName}&username=${username}&mapName=${mapName}`)
+
+        setRoomTypes((prevRoomTypes) => [...prevRoomTypes,{name:roomTypeName}]);
+    }
+
+    return {addRoomType}
+}
