Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomModal/RoomModal.jsx	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,35 @@
+import React, {useState, useEffect} from "react";
+import ModalNameField from "../Components/ModalNameField.jsx";
+import ModalDescriptionField from "../Components/ModalDescriptionField.jsx";
+import ModalSaveButton from "../Components/ModalSaveButton.jsx";
+import Modal from "../Components/Modal.jsx";
+import ModalRoomTypes from "../Components/ModalRoomTypes.jsx";
+import useModalState from "../Hooks/useModalState.jsx";
+import {useModalEvent} from "../Hooks/useModalEvent.jsx";
+
+export default function RoomModal({map,roomTypes}) {
+    const {
+        modalState: {isOpen,setIsOpen,setShape,shapeInfo,setShapeInfo},
+        handlers: {toggleModal,updateModalData,saveDetails}
+    } = useModalState(map);
+
+
+    useModalEvent((event) => {
+        const shape = event.detail.room;
+        setShape(shape);
+        setShapeInfo(shape.info);
+        setIsOpen(true);
+
+    },"openRoomModalEvent")
+
+
+
+    return (
+        <Modal isOpen={isOpen} toggleModal={toggleModal} title={"Enter Room Details"}>
+            <ModalNameField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalRoomTypes updateModalData={updateModalData} shapeInfo={shapeInfo} roomTypes={roomTypes}/>
+            <ModalDescriptionField shapeInfo={shapeInfo} updateModalData={updateModalData}/>
+            <ModalSaveButton saveDetails={saveDetails}/>
+        </Modal>
+    );
+}
Index: imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css
===================================================================
--- imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
+++ imaps-frontend/src/components/Modals/RoomModal/RoomModal.module.css	(revision 0c6b92add4cfaedcb91bcd37b45849f142f7d152)
@@ -0,0 +1,121 @@
+/* Modal.module.css */
+
+.activeModal {
+  overflow-y: hidden; /* Disable scrolling */
+}
+
+.modal,
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}
+
+.overlay {
+  background: rgba(0, 0, 0, 0.7); /* Darken the background */
+  backdrop-filter: blur(5px); /* Optional blur effect */
+  z-index: 999;
+}
+
+.modalContent {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: #2c2f33; /* Darker background for modal content */
+  color: #ffffff; /* White text for contrast */
+  padding: 20px;
+  border-radius: 8px;
+  max-width: 600px;
+  width: 100%;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  z-index: 1000;
+}
+
+h2 {
+  margin-bottom: 15px;
+  color: #ffffff; /* White text for the heading */
+}
+
+.btnModal {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  margin: 20px;
+  display: block;
+}
+
+.btnModal:hover {
+  background-color: #0056b3;
+}
+
+.closeModal {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 5px 10px;
+  background-color: #dc3545;
+  color: white;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.closeModal:hover {
+  background-color: #c82333;
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+}
+
+.formGroup {
+  margin-bottom: 15px;
+}
+
+.formGroup label {
+  display: block;
+  margin-bottom: 5px;
+  color: #ffffff; /* White text for labels */
+}
+
+.formGroup input,
+.formGroup select,
+.formGroup textarea {
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: 1px solid #ccc;
+  background-color: #23272a; /* Darker input background */
+  color: #ffffff; /* White text inside the input fields */
+}
+
+.formGroup input::placeholder,
+.formGroup textarea::placeholder {
+  color: #888888; /* Slightly lighter color for placeholder text */
+}
+
+.formGroup input[type="checkbox"] {
+  width: auto;
+  margin-right: 10px;
+}
+
+.submitButton {
+  background-color: #28a745;
+  color: white;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  background-color: #218838;
+}
