diff --git a/.gitignore b/.gitignore
index dd3f26e42..e3909401d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,4 @@
-congifKey.ts
+
 
 
 # Logs
@@ -43,3 +43,4 @@ firebase-debug.log
 firebase-debug.log*
 ./firestore.indexes.json
 firestore.rules
+
diff --git a/firebas.json b/firebas.json
deleted file mode 100644
index 970fdcf22..000000000
--- a/firebas.json
+++ /dev/null
@@ -1,83 +0,0 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{
-    "firestore": {
-      "rules": "firestore.rules",
-      "indexes": "firestore.indexes.json"
-    },
-    "functions": [{
-      "runtime": "nodejs20",
-      "source": "functions",
-      "codebase": "default",
-      "ignore": [
-        "node_modules",
-        ".git",
-        "firebase-debug.log",
-        "firebase-debug.*.log"
-      ],
-      "predeploy": [
-        "npm --prefix \"$RESOURCE_DIR\" run build"
-      ]
-    }],
-    "hosting": {
-      "site": "delib-5",
-      "public": "dist",
-      "ignore": [
-        "firebase.json",
-        "**/.*",
-        "**/node_modules/**"
-      ],
-      "rewrites": [{
-          "source": "/getRandomStatements2",
-          "function": {
-            "functionId": "getRandomStatements2",
-            "region": "us-central1"
-          }
-        },
-        {
-          "source": "**",
-          "destination": "/index.html"
-        }
-      ]
-    },
-    "emulators": {
-      "auth": {
-        "port": 9099
-      },
-      "functions": {
-        "port": 5001
-      },
-      "firestore": {
-        "port": 8080
-      },
-      "storage": {
-        "port": 9199
-      },
-      "ui": {
-        "enabled": true,
-        "port": 5002
-      },
-      "singleProjectMode": true,
-      "hosting": {
-        "port": 5000
-      }
-    },
-    "storage": {
-      "rules": "storage.rules"
-    }
-  }
-
diff --git a/firestore.rules b/firestore.rules
index 6e311281e..e28a558d0 100644
--- a/firestore.rules
+++ b/firestore.rules
@@ -81,7 +81,19 @@ service cloud.firestore {
       allow read: if request.auth.uid != null;
       allow write: if request.auth.uid != null;
     }
-    
+     match /rooms/{roomId=**}{
+      allow read: if request.auth.uid != null;
+      allow write: if request.auth.uid != null;
+    }
+     match /participants/{participantId=**}{
+      allow read: if request.auth.uid != null;
+      allow write: if request.auth.uid != null;
+    }
+     match /roomsSettings/{roomSettingsId=**}{
+      allow read: if request.auth.uid != null;
+      allow write: if request.auth.uid != null;
+    }
+
     match /timers-rooms/{timerIdx=**}{
       allow read: if request.auth.uid != null;
       allow write: if request.auth.uid != null;
diff --git a/functions/package-lock.json b/functions/package-lock.json
index 6e7b4cbe9..ef729789f 100644
--- a/functions/package-lock.json
+++ b/functions/package-lock.json
@@ -7,7 +7,7 @@
             "name": "functions",
             "dependencies": {
                 "@google/generative-ai": "^0.15.0",
-                "delib-npm": "^1.3.33",
+                "delib-npm": "^1.3.44",
                 "dotenv": "^16.4.5",
                 "firebase-admin": "^11.8.0",
                 "firebase-functions": "^5.1.0",
@@ -3288,9 +3288,9 @@
             }
         },
         "node_modules/delib-npm": {
-            "version": "1.3.33",
-            "resolved": "https://registry.npmjs.org/delib-npm/-/delib-npm-1.3.33.tgz",
-            "integrity": "sha512-jrj08L+dGy80PGyMymi6rDXWNKcHtOepcdVxdDZv3to/Qc9zp5PSf/C77MXokFq8aiuryqvT9Gpl+gI2/y9Tbg==",
+            "version": "1.3.44",
+            "resolved": "https://registry.npmjs.org/delib-npm/-/delib-npm-1.3.44.tgz",
+            "integrity": "sha512-6/5LMhuJ4lekGRVc4sChA6SRgEOxaXUySdswrkENlBMi1htrL8+6aM9zlX/ExJgjfzpOo8cgpibKKyKpENipOQ==",
             "dependencies": {
                 "react": "^18.3.1",
                 "sass": "^1.77.6",
diff --git a/functions/package.json b/functions/package.json
index f8cee3009..b3da16abc 100644
--- a/functions/package.json
+++ b/functions/package.json
@@ -16,7 +16,7 @@
     "main": "lib/index.js",
     "dependencies": {
         "@google/generative-ai": "^0.15.0",
-        "delib-npm": "^1.3.33",
+        "delib-npm": "^1.3.44",
         "dotenv": "^16.4.5",
         "firebase-admin": "^11.8.0",
         "firebase-functions": "^5.1.0",
diff --git a/functions/src/fn_agree.ts b/functions/src/fn_agree.ts
index 88bd7ad9b..74bfef5e2 100644
--- a/functions/src/fn_agree.ts
+++ b/functions/src/fn_agree.ts
@@ -1,7 +1,7 @@
 import { AgreeDisagree, AgreeDisagreeEnum, AgreeDocument, Collections } from "delib-npm";
 import { logger } from "firebase-functions/v1";
 import { db } from ".";
-import { getAction } from "./fn_approval";
+import { Action, getAction } from "./fn_approval";
 
 
 export async function updateAgrees(event: any) {
@@ -14,17 +14,17 @@ export async function updateAgrees(event: any) {
         const action = getAction(event);
         let results: AgreeDocument = { agree: 0, disagree: 0 };
 
-        if (action === "create") {
+        if (action === Action.create) {
             if (!agreeAfterData) throw new Error("No agreement data found");
             const { agree } = agreeAfterData;
 
             results = getUpdateCreateAgree(combinedAgreement.statementId, agree);
-        } else if (action === "delete") {
+        } else if (action === Action.delete) {
             if (!agreeBeforeData) throw new Error("No agreement data found");
             const { agree } = agreeBeforeData;
 
             results = getUpdateDeleteAgree(combinedAgreement.statementId, agree);
-        } else if (action === "update") {
+        } else if (action === Action.update) {
             if (!agreeAfterData) throw new Error("No agreement data found");
             const { agree: agreeAfter } = agreeAfterData;
             const { agree: agreeBefore } = agreeBeforeData || { agree: undefined };
@@ -44,7 +44,7 @@ export async function updateAgrees(event: any) {
             const { agree, disagree } = statement.data()?.documentAgree || { agree: 0, disagree: 0 } as AgreeDocument;
             const { agree: updateAgree, disagree: updateDisagree } = results;
 
-            
+
 
             const newAgree = agree + updateAgree;
             const newDisagree = disagree + updateDisagree;
@@ -52,7 +52,7 @@ export async function updateAgrees(event: any) {
 
             const updateAgrees: AgreeDocument = {
                 agree: newAgree,
-                disagree:newDisagree,
+                disagree: newDisagree,
                 avgAgree: totalAgree !== 0 ? (newAgree - newDisagree) / totalAgree : 0,
             }
 
@@ -90,7 +90,7 @@ function getUpdateDeleteAgree(statementId: string, agree: AgreeDisagreeEnum): Ag
 
 function getUpdateUpdateAgree(statementId: string, agreeAfter: AgreeDisagreeEnum, agreeBefore: AgreeDisagreeEnum): AgreeDocument {
     try {
-    
+
         const { Agree, Disagree, NoOpinion } = AgreeDisagreeEnum;
 
 
diff --git a/functions/src/fn_approval.ts b/functions/src/fn_approval.ts
index 9e42069e0..6ff0a0e3e 100644
--- a/functions/src/fn_approval.ts
+++ b/functions/src/fn_approval.ts
@@ -5,101 +5,124 @@ import { db } from ".";
 
 export async function updateApprovalResults(event: any) {
     try {
-        const action = getAction(event);
+        const action: Action = getAction(event);
         const eventData = event.data.after.data() as Approval || event.data.before.data() as Approval;
         const { statementId, documentId, userId } = eventData;
         const approveAfterData = event.data.after.data() as Approval;
         const approveBeforeData = event.data.before.data() as Approval;
 
-        
+
 
         let approvedDiff = 0;
         let approvingUserDiff = 0;
 
-        if (action === "create") {
-            //  await newApproval(eventData);
+        if (action === Action.create) {
+           
             const { approval } = approveAfterData;
             approvingUserDiff = 1;
             approvedDiff = approval ? 1 : 0;
 
-        } else if (action === "delete") {
+        } else if (action === Action.delete) {
             const { approval } = approveBeforeData;
             approvingUserDiff = -1;
             approvedDiff = approval ? -1 : 0;
 
-        } else if (action === "update") {
-            const { approval } = approveAfterData;
-            approvedDiff = approval ? 1 : -1;
+        } else if (action === Action.update) {
+            const { approval: approvalAfter } = approveAfterData;
+            const { approval: approvalBefore } = approveBeforeData;
+            approvedDiff = (() => {
+                if (approvalAfter && !approvalBefore) {
+                    return 1;
+                } else if (approvalBefore && !approvalAfter) {
+                    return -1;
+                }
+                return 0;
+
+            })()
 
         }
 
-    
 
         //update paragraph
         db.runTransaction(async (transaction) => {
-            const statementRef = db.collection(Collections.statements).doc(statementId);
-            const statementDB = await transaction.get(statementRef);
-            const { documentApproval } = statementDB.data() as Statement;
+            try {
+                const statementRef = db.collection(Collections.statements).doc(statementId);
+                const statementDB = await transaction.get(statementRef);
+                const { documentApproval } = statementDB.data() as Statement;
+
+
 
-            let newApprovalResults: DocumentApproval = {
-                approved: approvedDiff,
-                totalVoters: approvingUserDiff,
-                averageApproval: approvedDiff
-            };
+                if (!documentApproval) {
+                    const newApprovalResults = {
+                        approved: approvedDiff,
+                        totalVoters: approvingUserDiff,
+                        averageApproval: approvingUserDiff !== 0 ? approvedDiff / approvingUserDiff : 0
+                    };
+
+                    transaction.set(statementRef, { documentApproval: newApprovalResults }, { merge: true });
+                    return;
+                }
 
-            if (documentApproval) {
                 const newApproved = documentApproval.approved + approvedDiff;
-                const totalVoters = documentApproval.totalVoters + approvingUserDiff;
+                const totalVoters = documentApproval.totalVoters + approvingUserDiff;               
                 
 
-                newApprovalResults = {
+                const newApprovalResults = {
                     approved: newApproved,
                     totalVoters,
-                    averageApproval: newApproved / totalVoters
+                    averageApproval: totalVoters !== 0 ? newApproved / totalVoters:0
                 };
-            } else {
-               
+
+                transaction.set(statementRef, { documentApproval: newApprovalResults }, { merge: true });
+                return;
+            } catch (error) {
+                logger.error(error);
+                return;
             }
 
 
-            transaction.set(statementRef, { documentApproval: newApprovalResults }, { merge: true });
         });
 
         //update document
         db.runTransaction(async (transaction) => {
-            const statementRef = db.collection(Collections.statements).doc(documentId);
-            const statementDB = await transaction.get(statementRef);
-            const { documentApproval } = statementDB.data() as Statement;
+            try {
+                const statementRef = db.collection(Collections.statements).doc(documentId);
+                const statementDB = await transaction.get(statementRef);
+                const { documentApproval } = statementDB.data() as Statement;
+
+                const userApprovalsDB = await db.collection(Collections.approval).where("documentId", "==", documentId).where("userId", "==", userId).get();
+                const numberOfUserApprovals = userApprovalsDB.size;
+                const addUser = (numberOfUserApprovals === 1 && action === "create") ? 1 : 0;
+
+                /**
+                 * Represents the results of a document approval.
+                 */
+                let newApprovalResults: DocumentApproval = {
+                    approved: approvedDiff,
+                    totalVoters: addUser,
+                    averageApproval: approvedDiff
+                };
 
-            const userApprovalsDB = await db.collection(Collections.approval).where("documentId", "==", documentId).where("userId", "==", userId).get();
-            const numberOfUserApprovals = userApprovalsDB.size;
-            const addUser = (numberOfUserApprovals === 1 && action === "create") ? 1 : 0;
 
-            /**
-             * Represents the results of a document approval.
-             */
-            let newApprovalResults: DocumentApproval = {
-                approved: approvedDiff,
-                totalVoters: addUser,
-                averageApproval: approvedDiff
-            };
 
+                if (documentApproval) {
 
+                    const newApproved = documentApproval.approved + approvedDiff;
+                    const newTotalVoters = documentApproval.totalVoters + addUser;
 
-            if (documentApproval) {
 
-                const newApproved = documentApproval.approved + approvedDiff;
-                const newTotalVoters = documentApproval.totalVoters + addUser;
+                    newApprovalResults = {
+                        approved: newApproved,
+                        totalVoters: newTotalVoters,
+                        averageApproval: newTotalVoters !== 0 ?newApproved / newTotalVoters:0
+                    };
+                }
 
-
-                newApprovalResults = {
-                    approved: newApproved,
-                    totalVoters: newTotalVoters,
-                    averageApproval: newApproved / newTotalVoters
-                };
+                transaction.update(statementRef, { documentApproval: newApprovalResults });
+                return;
+            } catch (error) {
+                logger.error(error);
             }
-
-            transaction.update(statementRef, { documentApproval: newApprovalResults });
         });
 
 
@@ -108,16 +131,24 @@ export async function updateApprovalResults(event: any) {
     }
 }
 
-export function getAction(event: any): "create" | "delete" | "update" {
+
+export enum Action {
+    create = "create",
+    delete = "delete",
+    update = "update",
+}
+
+
+export function getAction(event: any): Action {
 
     if (event.data.after.data() && event.data.before.data()) {
-        return "update";
+        return Action.update;
     } else if (event.data.after.data() && event.data.before.data() === undefined) {
-        return "create";
+        return Action.create;
     } else if (event.data.after.data() === undefined && event.data.before.data()) {
-        return "delete";
+        return Action.delete;
     }
 
-    return "update";
+    return Action.update;
 }
 
diff --git a/functions/src/fn_rooms.ts b/functions/src/fn_rooms.ts
deleted file mode 100644
index 238acf055..000000000
--- a/functions/src/fn_rooms.ts
+++ /dev/null
@@ -1,130 +0,0 @@
-import { Collections, Participant } from "delib-npm";
-import { logger } from "firebase-functions/v1";
-import { db } from "./index";
-import { FieldValue } from "firebase-admin/firestore";
-
-//count room joiners
-export async function countRoomJoiners(ev: any) {
-    try {
-        //on change of room joiners, update the room with the new count
-        //get the room id
-        const previouseRequest = ev.data.before.data() as Participant;
-        const newRequest = ev.data.after.data() as Participant;
-       
-        if (previouseRequest === undefined)
-            return;
-        if (newRequest === undefined)
-            throw new Error("New Request is undefined");
-
-        if (!newRequest.statementId || !previouseRequest.statementId)
-            return;
-
-        //if new request
-        if (previouseRequest === undefined) {
-            //get the room
-            const lobbyRoomRef = db
-                .collection(Collections.statementLobbyRooms)
-                .doc(newRequest.statementId);
-
-            //update the room with the new count
-            const lobbyRoom = await lobbyRoomRef.get();
-            if (lobbyRoom.exists) {
-                return lobbyRoomRef.update({
-                    joinersCount: FieldValue.increment(1),
-                });
-            } else {
-                return lobbyRoomRef.set({
-                    joinersCount: 1,
-                    parentId: newRequest.parentId,
-                    statementId: newRequest.statementId,
-                });
-            }
-        } else if (newRequest === undefined) {
-            logger.info("request deleted");
-            const previousLoobyRoomRef = db
-                .collection(Collections.statementLobbyRooms)
-                .doc(previouseRequest.statementId);
-            await previousLoobyRoomRef.update({
-                joinersCount: FieldValue.increment(-1),
-            });
-        } else {
-            //if request uppdated
-
-            const newLobbyRoomRef = db
-                .collection(Collections.statementLobbyRooms)
-                .doc(newRequest.statementId);
-            const previousLoobyRoomRef = db
-                .collection(Collections.statementLobbyRooms)
-                .doc(previouseRequest.statementId);
-
-            //update the room with the new count
-
-            const newLobbyRoom = await newLobbyRoomRef.get();
-            const previousLoobyRoom = await previousLoobyRoomRef.get();
-
-            await updateNewRoom(
-                newLobbyRoom,
-                newLobbyRoomRef,
-                newRequest.parentId,
-                newRequest.statementId,
-            );
-
-            await updatePreviuosRoom(
-                previousLoobyRoom,
-                previousLoobyRoomRef,
-                previouseRequest.parentId,
-                previouseRequest.statementId,
-            );
-        }
-    } catch (error) {
-        logger.error(error);
-    }
-
-    async function updatePreviuosRoom(
-        previousLoobyRoom: any,
-        previousLoobyRoomRef: any,
-        parentId: string,
-        statementId: string | undefined,
-    ) {
-        try {
-            if (previousLoobyRoom.exists) {
-                await previousLoobyRoomRef.update({
-                    joinersCount: FieldValue.increment(-1),
-                });
-            } else {
-                await previousLoobyRoomRef.set({
-                    joinersCount: 0,
-                    parentId,
-                    statementId,
-                });
-            }
-        } catch (error) {
-            logger.error(error);
-        }
-    }
-
-    async function updateNewRoom(
-        newLobbyRoom: any,
-        newLobbyRoomRef: any,
-        parentId: string,
-        statementId: string | undefined,
-    ) {
-        try {
-            if (newLobbyRoom.exists) {
-                await newLobbyRoomRef.update({
-                    joinersCount: FieldValue.increment(1),
-                });
-            } else {
-                await newLobbyRoomRef.set({
-                    joinersCount: 1,
-                    parentId,
-                    statementId,
-                });
-            }
-        } catch (error) {
-            logger.error(error);
-        }
-    }
-
-    return;
-}
diff --git a/functions/src/fn_signatures.ts b/functions/src/fn_signatures.ts
index f806d83ae..c9e3260f1 100644
--- a/functions/src/fn_signatures.ts
+++ b/functions/src/fn_signatures.ts
@@ -1,48 +1,8 @@
-import { FieldValue } from "firebase-admin/firestore";
 import { db } from "./index";
 import { logger } from "firebase-functions/v1";
 import { getAction } from "./fn_approval";
 import { Collections, DocumentSigns, Signature } from "delib-npm";
 
-export enum SignatureStatus {
-    signed = "signed",
-    unsigned = "unsigned",
-    rejected = "rejected",
-}
-
-export async function addSignature(event: any) {
-    try {
-        const signature = event.data.data();
-        if (!signature) throw new Error("signature is not defined");
-        if (signature.statementId === undefined)
-            throw new Error("statementId is not defined");
-
-        const statementRef = db
-            .collection("statements")
-            .doc(signature.statementId);
-        await statementRef.update({ signaturesCount: FieldValue.increment(1) });
-    } catch (error) {
-        logger.error(error);
-    }
-}
-
-export async function removeSignature(event: any) {
-    try {
-        const signature = event.data.data();
-        if (!signature) throw new Error("signature is not defined");
-        if (signature.statementId === undefined)
-            throw new Error("statementId is not defined");
-
-        const statementRef = db
-            .collection("statements")
-            .doc(signature.statementId);
-        await statementRef.update({
-            signaturesCount: FieldValue.increment(-1),
-        });
-    } catch (error) {
-        logger.error(error);
-    }
-}
 
 
 //functions for FreeDi Sign
@@ -85,12 +45,14 @@ async function onCreateSignature(signature: Signature) {
 
             const documentSignatureDB = await transaction.get(documentSignatureRef);
             if (!documentSignatureDB.exists) {
+                //in case the document signature do not exists yet
                 const documentSignature: DocumentSigns = {
-                    documentId, viewed: 1,
+                    documentId,
+                    viewed: 1,
                     signed: signed ? 1 : 0,
                     rejected: signed ? 0 : 1,
                     avgSignatures: signed ? levelOfSignature : 0,
-                    totalSignaturesLevel:signed ? levelOfSignature : 0
+                    totalSignaturesLevel: signed ? levelOfSignature : 0
                 };
                 transaction.set(documentSignatureRef, documentSignature);
             } else {
@@ -99,7 +61,7 @@ async function onCreateSignature(signature: Signature) {
                 documentSignature.signed += signed ? 1 : 0;
                 documentSignature.rejected += signed ? 0 : 1;
                 documentSignature.totalSignaturesLevel += signed ? levelOfSignature : 0;
-                documentSignature.avgSignatures = documentSignature.totalSignaturesLevel/documentSignature.viewed;
+                documentSignature.avgSignatures = documentSignature.totalSignaturesLevel / documentSignature.viewed;
                 transaction.update(documentSignatureRef, documentSignature);
 
             }
@@ -125,7 +87,7 @@ async function onDeleteSignature(signature: Signature) {
                 documentSignature.signed -= signed ? 1 : 0;
                 documentSignature.rejected -= signed ? 0 : 1;
                 documentSignature.totalSignaturesLevel -= signed ? levelOfSignature : 0;
-                documentSignature.avgSignatures = documentSignature.totalSignaturesLevel/documentSignature.viewed;
+                documentSignature.avgSignatures = documentSignature.totalSignaturesLevel / documentSignature.viewed;
                 transaction.update(documentSignatureRef, documentSignature);
             }
         });
@@ -137,9 +99,13 @@ async function onDeleteSignature(signature: Signature) {
 
 async function onUpdateSignature(signatureBeforeData: Signature, signatureAfterData: Signature) {
     try {
-        const { levelOfSignature: levelOfSignatureBefore } = signatureBeforeData;
-        const { documentId, signed, levelOfSignature: levelOfSignatureAfter } = signatureAfterData;
-     
+        const { signed: signedBefore, levelOfSignature: levelOfSignatureBefore } = signatureBeforeData;
+        const { documentId, signed: signedAfter, levelOfSignature: levelOfSignatureAfter } = signatureAfterData;
+
+        const diffSigned = (signedAfter ? 1 : 0) - (signedBefore ? 1 : 0);
+        const diffRejected = (signedAfter ? 0 : 1) - (signedBefore ? 0 : 1);
+        const diffSignatureLevel = levelOfSignatureAfter - levelOfSignatureBefore;
+
 
 
         await db.runTransaction(async (transaction) => {
@@ -147,24 +113,15 @@ async function onUpdateSignature(signatureBeforeData: Signature, signatureAfterD
                 .doc(documentId)
 
             const documentSignatureDB = await transaction.get(documentSignatureRef);
-            if (documentSignatureDB.exists) {
-                const documentSignature = documentSignatureDB.data() as DocumentSigns;
-                documentSignature.signed += signed ? 1 : -1;
-                documentSignature.rejected += signed ? -1 : 1;
-                documentSignature.totalSignaturesLevel += signed ? levelOfSignatureAfter : -levelOfSignatureBefore;
-                documentSignature.avgSignatures = documentSignature.totalSignaturesLevel/documentSignature.viewed;
-                transaction.update(documentSignatureRef, documentSignature);
-            } else {
+            if (!documentSignatureDB.exists) throw new Error("Document signature not found");
+
+            const documentSignature = documentSignatureDB.data() as DocumentSigns;
+            documentSignature.signed += diffSigned;
+            documentSignature.rejected += diffRejected;
+            documentSignature.totalSignaturesLevel += diffSignatureLevel;
+            documentSignature.avgSignatures = documentSignature.totalSignaturesLevel / documentSignature.viewed;
+            transaction.update(documentSignatureRef, documentSignature);
 
-                const documentSignature: DocumentSigns = {
-                    documentId, viewed: 1,
-                    signed: signed ? 1 : 0,
-                    rejected: signed ? 0 : 1,
-                    avgSignatures: signed ? levelOfSignatureAfter : 0,
-                    totalSignaturesLevel:signed ? levelOfSignatureAfter : 0
-                };
-                transaction.set(documentSignatureRef, documentSignature);
-            }
         });
 
     } catch (error) {
diff --git a/functions/src/index.ts b/functions/src/index.ts
index 4d752bacc..d181b08e0 100644
--- a/functions/src/index.ts
+++ b/functions/src/index.ts
@@ -5,8 +5,7 @@ import {
 	updateEvaluation,
 } from './fn_evaluation';
 import { updateResultsSettings } from './fn_results';
-import { countRoomJoiners } from './fn_rooms';
-import { addSignature, removeSignature, updateDocumentSignatures } from './fn_signatures';
+import { updateDocumentSignatures } from './fn_signatures';
 import {
 	updateParentWithNewMessageCB,
 
@@ -101,21 +100,9 @@ exports.addVote = onDocumentWritten('/votes/{voteId}', updateVote);
 
 // exports.removeVote = onDocumentDeleted('/votes/{voteId}', removeVote);
 
-//signatures (part of delib-signatures)
-exports.changeSignature = onDocumentCreated(
-	'/statementsSignatures/{signatureId}',
-	addSignature
-);
-exports.deleteSignature = onDocumentDeleted(
-	'/statementsSignatures/{signatureId}',
-	removeSignature
-);
 
-//rooms
-exports.countRoomJoiners = onDocumentWritten(
-	`${Collections.statementRoomsAsked}/{requestId}`,
-	countRoomJoiners
-);
+
+
 
 //timers
 exports.cleanTimers = onSchedule('every day 00:00', cleanOldTimers);
diff --git a/index.html b/index.html
index 2bbf1d33d..e62f82d9f 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
 <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.ico" />
-    <meta name="viewport" content="width=device-width, maximum-scale=1" />
+    <meta name="viewport" content="width=device-width, maximum-scale=2, user-scalable=yes" />
     <title>FreeDi App</title>
     <script>
         if ("serviceWorker" in navigator) {
diff --git a/package-lock.json b/package-lock.json
index cdf94282e..df19d7431 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,7 @@
             "dependencies": {
                 "@dagrejs/dagre": "^1.0.4",
                 "@reduxjs/toolkit": "^1.9.5",
-                "delib-npm": "^1.3.34",
+                "delib-npm": "^1.3.44",
                 "eslint-plugin-import": "^2.29.1",
                 "eslint-plugin-sonarjs": "^1.0.3",
                 "firebase": "^10.0.0",
@@ -5486,9 +5486,9 @@
             }
         },
         "node_modules/delib-npm": {
-            "version": "1.3.34",
-            "resolved": "https://registry.npmjs.org/delib-npm/-/delib-npm-1.3.34.tgz",
-            "integrity": "sha512-8sMTXMHT1Jjl3Nt1r64UnNq6oL230JjZ5Qvb4Xr+uFCcQ9iCg4rGh7GPBLyqZnS70nkCGwRTcQerDzqZPUJyiw==",
+            "version": "1.3.44",
+            "resolved": "https://registry.npmjs.org/delib-npm/-/delib-npm-1.3.44.tgz",
+            "integrity": "sha512-6/5LMhuJ4lekGRVc4sChA6SRgEOxaXUySdswrkENlBMi1htrL8+6aM9zlX/ExJgjfzpOo8cgpibKKyKpENipOQ==",
             "dependencies": {
                 "react": "^18.3.1",
                 "sass": "^1.77.6",
diff --git a/package.json b/package.json
index f9871c86f..476edb640 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "dependencies": {
         "@dagrejs/dagre": "^1.0.4",
         "@reduxjs/toolkit": "^1.9.5",
-        "delib-npm": "^1.3.34",
+        "delib-npm": "^1.3.44",
         "eslint-plugin-import": "^2.29.1",
         "eslint-plugin-sonarjs": "^1.0.3",
         "firebase": "^10.0.0",
diff --git a/src/assets/Languages/ar.json b/src/assets/Languages/ar.json
index 88fb5d20b..7f34fe8ab 100644
--- a/src/assets/Languages/ar.json
+++ b/src/assets/Languages/ar.json
@@ -28,6 +28,9 @@
     "Sign up with": "سجل مع",
     "Conversations": "المحادثات",
     "Creating Agreements": "إنشاء الاتفاقيات",
+    "Create new room": "إنشاء غرفة جديدة",
+    "Number of participants per room": "عدد المشاركين في الغرفة",
+    "Divide participants into rooms": "تقسيم المشاركين إلى غرف",
     "Delib": "الشورى ٥",
     "Delib: We create agreements together": "دليب: نحن ننشئ الاتفاقيات معاً",
     "Description": "الوصف",
diff --git a/src/assets/Languages/de.json b/src/assets/Languages/de.json
index 6becec1ca..cce142f38 100644
--- a/src/assets/Languages/de.json
+++ b/src/assets/Languages/de.json
@@ -25,6 +25,9 @@
     "Sign up with": "Anmelden mit",
     "Conversations": "Gespräche",
     "Creating Agreements": "Vereinbarungen erstellen",
+    "Create new room": "Neuen Raum erstellen",
+    "Number of participants per room": "Anzahl der Teilnehmer pro Raum",
+    "Divide participants into rooms": "Teilnehmer in Räume aufteilen",
     "Delib": "Delib",
     "Delib: We create agreements together": "Delib: Wir erstellen gemeinsam Vereinbarungen",
     "Description": "Beschreibung",
diff --git a/src/assets/Languages/en.json b/src/assets/Languages/en.json
index 4c1e4364f..637055aa7 100644
--- a/src/assets/Languages/en.json
+++ b/src/assets/Languages/en.json
@@ -23,6 +23,9 @@
     "Sign up with": "Sign up with",
     "Conversations": "Conversations",
     "Creating Agreements": "Forming Collaborations",
+    "Create new room": "Create new room",
+    "Number of participants per room": "Number of participants per room",
+    "Divide participants into rooms": "Divide participants into rooms",
     "Delib": "Delib",
     "Delib: We create agreements together": "Delib: We are forming Collaboration",
     "Description": "Description",
diff --git a/src/assets/Languages/es.json b/src/assets/Languages/es.json
index 1580b4b4a..137efb15e 100644
--- a/src/assets/Languages/es.json
+++ b/src/assets/Languages/es.json
@@ -24,6 +24,9 @@
     "Sign up with": "Registrarte con",
     "Conversations": "Conversaciones",
     "Creating Agreements": "Creando Acuerdos",
+    "Create new room": "Crear nueva sala",
+    "Number of participants per room": "Número de participantes por sala",
+    "Divide participants into rooms": "Dividir a los participantes en salas",
     "Delib": "Delib",
     "Delib: We create agreements together": "Delib: Creamos acuerdos juntos",
     "Description": "Descripción",
diff --git a/src/assets/Languages/he.json b/src/assets/Languages/he.json
index 0362ceeec..597ff2ca4 100644
--- a/src/assets/Languages/he.json
+++ b/src/assets/Languages/he.json
@@ -23,6 +23,9 @@
     "Sign up with": "הרשם עם",
     "Conversations": "שיחות",
     "Creating Agreements": "יוצרים הסכמות",
+    "Create new room": "יצירת חדר חדש",
+    "Divide participants into rooms": "חלק/י משתתפים לחדרים",
+    "Number of participants per room": "מספר משתתפים לחדר",
     "Delib": "המועצה",
     "Delib: We create agreements together": "דליב: אנחנו יוצרים הסכמות ביחד",
     "Description": "תיאור",
diff --git a/src/assets/Languages/nl.json b/src/assets/Languages/nl.json
index c179f57a7..49bd7e178 100644
--- a/src/assets/Languages/nl.json
+++ b/src/assets/Languages/nl.json
@@ -25,6 +25,9 @@
     "Sign up with": "Meld aan met",
     "Conversations": "Gesprekken",
     "Creating Agreements": "Overeenkomsten Creëren",
+    "Create new room": "Nieuwe kamer maken",
+    "Divide participants into rooms": "Deelnemers verdelen in kamers",
+    "Number of participants per room": "Aantal deelnemers per kamer",
     "Delib": "Delib",
     "Delib: We create agreements together": "Delib: We creëren samen overeenkomsten",
     "Description": "Beschrijving",
diff --git a/src/assets/images/roomImage.png b/src/assets/images/roomImage.png
new file mode 100644
index 000000000..f917746d3
Binary files /dev/null and b/src/assets/images/roomImage.png differ
diff --git a/src/controllers/db/rooms/getRooms.ts b/src/controllers/db/rooms/getRooms.ts
index 246ee6e90..eac0a8762 100644
--- a/src/controllers/db/rooms/getRooms.ts
+++ b/src/controllers/db/rooms/getRooms.ts
@@ -1,92 +1,80 @@
 import {
 	Collections,
-	Participant,
-	Statement,
-	StatementSchema,
-	StatementType,
+	ParticipantInRoom,
+	RoomSettings,
+	Statement
 } from 'delib-npm';
 import {
-	and,
 	collection,
+	doc,
 	onSnapshot,
-	or,
 	query,
 	where,
 } from 'firebase/firestore';
 import { DB } from '../config';
-import { setRoomRequests } from '@/model/rooms/roomsSlice';
+import { deleteRoom, setRoom, setRooms, setRoomSettings } from '@/model/rooms/roomsSlice';
 import { Unsubscribe } from 'firebase/auth';
-import { AppDispatch } from '@/model/store';
+import { store } from '@/model/store';
 
-export function listenToAllRoomsRequest(
+
+export function listenToParticipants(
 	statement: Statement,
-	dispatch: AppDispatch
 ): Unsubscribe {
 	try {
-		const requestRef = collection(DB, Collections.statementRoomsAsked);
-		const q = query(requestRef, where('parentId', '==', statement.statementId));
+		const dispatch = store.dispatch;
+		const requestRef = collection(DB, Collections.participants);
+		const q = query(requestRef, where('statement.parentId', '==', statement.statementId));
 
-		return onSnapshot(q, (requestsDB) => {
+		return onSnapshot(q, (roomsDB) => {
 			try {
-				const requests = requestsDB.docs.map(
-					(requestDB) => requestDB.data() as Participant
-				);
+				roomsDB.docChanges().forEach((change) => {
+
+					const room = change.doc.data() as ParticipantInRoom;
+
+					switch (change.type) {
+					case 'added':
+						dispatch(setRoom(room));
+						break;
+					case 'modified':
+						dispatch(setRoom(room));
+						break;
+					case 'removed':
+						dispatch(deleteRoom(room));
+						break;
+					default:
+						break;
+					}
+				});
 
-				dispatch(setRoomRequests(requests));
 			} catch (error) {
 				console.error(error);
-				dispatch(setRoomRequests([]));
+				dispatch(setRooms([]));
 			}
 		});
 	} catch (error) {
 		console.error(error);
 
 		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		return () => {};
+		return () => { };
 	}
 }
 
 // TODO: this function is not used. Delete it?
-export function listenToRoomSolutions(
-	statementId: string,
-	cb: (rooms: Statement | null) => void
-) {
-	try {
-		const statementSolutionsRef = collection(DB, Collections.statements);
-		const q = query(
-			statementSolutionsRef,
-			and(
-				where('parentId', '==', statementId),
-				or(
-					where('statementType', '==', StatementType.option),
-					where('statementType', '==', StatementType.result)
-				)
-			)
-		);
 
-		return onSnapshot(q, (roomSolutionsDB) => {
-			try {
-				roomSolutionsDB.forEach((roomSolutionDB) => {
-					try {
-						const roomSolution = roomSolutionDB.data() as Statement;
-						const { success } = StatementSchema.safeParse(roomSolution);
 
-						if (!success)
-							throw new Error(
-								'roomSolution is not valid in listenToRoomSolutions()'
-							);
+export function listenToRoomsSettings(statementId: string): Unsubscribe {
+	try {
+		const roomSettingRef = doc(DB, Collections.roomsSettings, statementId);
 
-						cb(roomSolution);
-					} catch (error) {
-						console.error(error);
-					}
-				});
-			} catch (error) {
-				console.error(error);
-				cb(null);
-			}
+		return onSnapshot(roomSettingRef, (doc) => {
+			if (!doc.exists()) return;
+			const roomSettings = doc.data() as RoomSettings;
+			store.dispatch(setRoomSettings(roomSettings));
 		});
 	} catch (error) {
 		console.error(error);
+		
+		// eslint-disable-next-line @typescript-eslint/no-empty-function
+		return () => { };
 	}
 }
diff --git a/src/controllers/db/rooms/setRooms.ts b/src/controllers/db/rooms/setRooms.ts
index 912a8d1ba..3b50b208e 100644
--- a/src/controllers/db/rooms/setRooms.ts
+++ b/src/controllers/db/rooms/setRooms.ts
@@ -1,214 +1,197 @@
 import {
 	Collections,
 	Statement,
-	Participant,
-	getRequestIdToJoinRoom,
-	RoomsStateSelection,
-	User,
+	ParticipantInRoom,
+	getStatementSubscriptionId,
+	RoomSettings,
 } from "delib-npm";
-import {
-	DocumentData,
-	DocumentReference,
-	doc,
-	getDoc,
-	setDoc,
-	updateDoc,
-} from "firebase/firestore";
+import { deleteDoc, doc, getDoc, runTransaction, setDoc, updateDoc, writeBatch } from "firebase/firestore";
 import { DB } from "../config";
-import { getUserFromFirebase } from "../users/usersGeneral";
-import { ParticipantInRoom } from "@/view/pages/statement/components/rooms/components/adminArrange/AdminArrange";
+
+
 import { store } from "@/model/store";
 
-export function enterRoomsDB(parentStatement: Statement) {
+
+
+export function setParticipantToDB(
+	statement: Statement,
+	roomNumber?: number
+): void {
 	try {
-		const userId = getUserFromFirebase()?.uid;
-		if (!userId) throw new Error("User not logged in");
-
-		const requestId = getRequestIdToJoinRoom(
-			userId,
-			parentStatement.statementId,
-		);
-		if (!requestId) throw new Error("Request-id is undefined");
-
-		const statementRef = doc(
-			DB,
-			Collections.statementRoomsAsked,
-			requestId,
-		);
-		const user = getUserFromFirebase();
+		const user = store.getState().user.user;
 		if (!user) throw new Error("User not logged in");
-		const room: Participant = {
-			participant: user,
-			parentId: parentStatement.statementId,
-			requestId: requestId,
-			lastUpdate: new Date().getTime(),
+
+		const participantInRoomId = getStatementSubscriptionId(statement.parentId, user);
+		if (!participantInRoomId) throw new Error("Participant in room id is undefined");
+
+		const participantInRoom: ParticipantInRoom = {
+			user: user,
+			statement,
+			participantInRoomId
 		};
-		setDoc(statementRef, room, { merge: true });
+		if (roomNumber) participantInRoom.roomNumber = roomNumber;
+
+		const roomRef = doc(DB, Collections.participants, participantInRoomId);
+
+		setDoc(roomRef, participantInRoom, { merge: true });
+	
 	} catch (error) {
 		console.error(error);
 	}
 }
 
-export async function setRoomJoinToDB(
-	statement: Statement,
-	participant?: User,
-	roomNumber?: number,
-): Promise<boolean> {
+export function deleteParticipantToDB(
+	statement: Statement
+): void {
 	try {
-		const { requestDB, user, requestId, requestRef } =
-            await getRequestFromDB(statement, participant);
+		const user = store.getState().user.user;
+		if (!user) throw new Error("User not logged in");
 
-		if (!requestDB.exists()) {
-			// If there is no request, create one
-			await saveToDB({ requestId, requestRef, statement, user });
+		const roomId = getStatementSubscriptionId(statement.parentId, user);
+		if (!roomId) throw new Error("Room id is undefined");
 
-			return true;
-		} else {
-			//if there is a request
-			const request = requestDB.data() as Participant;
+		const roomRef = doc(DB, Collections.participants, roomId);
 
-			return await updateRequestToDB(request, requestRef);
-		}
+		deleteDoc(roomRef);
 	} catch (error) {
 		console.error(error);
+	}
+}
 
-		return false;
+
+export async function toggleRoomEditingInDB(statementId: string): Promise<void> {
+	try {
+		const roomSettingsRef = doc(DB, Collections.roomsSettings, statementId);
+
+		//use transaction
+		await runTransaction(DB, async (transaction) => {
+			try {
+				const roomSettings = (await transaction.get(roomSettingsRef)).data() as RoomSettings;
+				if (!roomSettings) {
+					transaction.set(roomSettingsRef, {
+						statementId,
+						isEdit: false,
+						timers: []
+
+					});
+				} else {
+
+					transaction.update(roomSettingsRef, { isEdit: !roomSettings.isEdit });
+				}
+			} catch (error) {
+				console.error(error);
+			}
+		});
+
+	} catch (error) {
+		console.error(error);
 	}
+}
+
+export async function setNewRoomSettingsToDB(statementId: string): Promise<void> {
+	try {
+		const roomSettingsRef = doc(DB, Collections.roomsSettings, statementId);
+
+		const roomSettingsDB = await getDoc(roomSettingsRef);
+		if (roomSettingsDB.exists()) return;
 
-    interface SaveToDB {
-        requestId: string;
-        requestRef: DocumentReference<DocumentData, DocumentData>;
-        statement: Statement;
-        user?: User;
-        approved?: boolean;
-        newRoomNumber?: number;
-    }
-
-    //helpers functions
-    async function saveToDB({
-    	requestId,
-    	requestRef,
-    	statement,
-    	user,
-    	approved,
-    	newRoomNumber,
-    }: SaveToDB) {
-    	const _user = user || store.getState().user.user;
-    	if (!_user) throw new Error("User not logged in");
-    	const request: Participant = {
-    		statementId: statement.statementId,
-    		participant: _user,
-    		parentId: statement.parentId,
-    		requestId: requestId,
-    		statement,
-    	};
-    	if (typeof newRoomNumber === "number")
-    		request.roomNumber = newRoomNumber;
-    	if (typeof approved === "boolean") request.approved = approved;
-
-    	await setDoc(requestRef, request);
-    }
-    async function getRequestFromDB(statement: Statement, participant?: User) {
-    	const user = participant ? participant : store.getState().user.user;
-    	if (!user) throw new Error("User not logged in");
-    	const userId = user.uid;
-    	if (!userId) throw new Error("User not logged in");
-
-    	const requestId = getRequestIdToJoinRoom(userId, statement.parentId);
-    	if (!requestId) throw new Error("Request id is undefined");
-
-    	const requestRef = doc(DB, Collections.statementRoomsAsked, requestId);
-
-    	const requestDB = await getDoc(requestRef);
-
-    	return { requestDB, user, requestId, requestRef };
-    }
-
-    async function updateRequestToDB(
-    	request: Participant,
-    	requestRef: DocumentReference<DocumentData, DocumentData>,
-    ) {
-    	try {
-    		const user = store.getState().user.user;
-    		if (!user) throw new Error("User not logged in");
-    		if (request.statement === undefined) {
-    			// If the user is not in a room
-    			await saveToDB({
-    				requestId: request.requestId,
-    				requestRef,
-    				statement,
-    				user,
-    				approved: request.approved,
-    			});
-
-    			return true;
-    		} else if (
-    			request.statement.statementId !== statement.statementId
-    		) {
-    			// If the user is already in a room and wants to join another room
-    			await saveToDB({
-    				requestId: request.requestId,
-    				requestRef,
-    				statement,
-    				user,
-    				approved: request.approved,
-    				newRoomNumber: roomNumber,
-    			});
-
-    			return true;
-    		} else {
-    			// If the user is already in the same room, remove the user from the room
-    			const { parentId, participant, requestId } = request;
-    			const updatedRequest = {
-    				parentId,
-    				participant,
-    				requestId,
-    				lastUpdate: new Date().getTime(),
-    			};
-    			await setDoc(requestRef, updatedRequest);
-
-    			return false;
-    		}
-    	} catch (error) {
-    		console.error(error);
-
-    		return false;
-    	}
-    }
+		const roomSettings: RoomSettings = {
+			statementId,
+			isEdit: true,
+			timers: [],
+			participantsPerRoom: 7,
+		};
+		setDoc(roomSettingsRef, roomSettings, { merge: true });
+	} catch (error) {
+		console.error(error);
+	}
 }
 
-export async function setRoomsStateToDB(
-	statement: Statement,
-	roomsState: RoomsStateSelection,
-) {
+export async function setParticipantsPerRoom({ statementId, add, number }: { statementId: string, add?: number, number?: number }): Promise<void> {
 	try {
-		//get timers settings from DB
-
-		const statementRef = doc(
-			DB,
-			Collections.statements,
-			statement.statementId,
-		);
-		await setDoc(statementRef, { roomsState }, { merge: true });
+		if (!number && !add) throw new Error("number or add must be defined");
+
+		const roomSettingsRef = doc(DB, Collections.roomsSettings, statementId);
+
+		if (number && number >= 1) {
+			updateDoc(roomSettingsRef, { participantsPerRoom: number });
+
+			return;
+		}
+
+		if (typeof add !== "number") throw new Error("add is not a number");
+
+		//use transaction
+		await runTransaction(DB, async (transaction) => {
+			try {
+				const roomSettings = (await transaction.get(roomSettingsRef)).data() as RoomSettings;
+				if (!roomSettings) throw new Error("Room settings not found");
+				const participantsPerRoom = roomSettings.participantsPerRoom || 7;
+
+				if (participantsPerRoom + add < 1) return;
+
+				transaction.update(roomSettingsRef, { participantsPerRoom: participantsPerRoom + add });
+
+			} catch (error) {
+				console.error(error);
+			}
+		});
+
 	} catch (error) {
-		roomsState;
 		console.error(error);
 	}
 }
 
-export function setParticipantInRoomToDB(participant: ParticipantInRoom) {
+export async function divideParticipantIntoRoomsToDB(topics: Statement[], participants: ParticipantInRoom[], participantsPerRoom: number): Promise<void> {
+	try {
+		const _topics = [...topics];
+		const _participants = [...participants];
+
+		const batch = writeBatch(DB);
+		let roomNumber = 1;
+
+		_topics.forEach((topic) => {
+			const participantsInTopic = _participants.filter((participant) => participant.statement.statementId === topic.statementId);
+			participantsInTopic.sort(() => Math.random() - 0.5);
+			const numberOfRooms = Math.ceil(participantsInTopic.length / participantsPerRoom);
+			const topRoomNumber = roomNumber + (numberOfRooms - 1);
+			const initialRoomNumber = roomNumber;
+			let localRoomNumber = roomNumber;
+
+
+			participantsInTopic.forEach((participant) => {
+
+				const participantRef = doc(DB, Collections.participants, participant.participantInRoomId);
+
+				batch.update(participantRef, { roomNumber: localRoomNumber });
+
+				localRoomNumber++;
+
+				if (localRoomNumber > topRoomNumber) localRoomNumber = initialRoomNumber;
+			});
+			roomNumber = topRoomNumber + 1;
+
+		});
+
+		await batch.commit();
+
+	} catch (error) {
+		console.error(error)
+	}
+
+}
+
+export async function clearRoomsToDB(participants: ParticipantInRoom[]): Promise<void> {
 	try {
-		const { uid, topic, roomNumber } = participant;
-		
-		if (!topic) return;
 
-		const requestId = getRequestIdToJoinRoom(uid, topic.parentId);
-		if (!requestId) throw new Error("Request id is undefined");
+		const batch = writeBatch(DB);
+		participants.forEach((participant) => {
+			const participantRef = doc(DB, Collections.participants, participant.participantInRoomId);
+			batch.update(participantRef, { roomNumber: 0 });
+		});
+
+		await batch.commit();
 
-		const requestRef = doc(DB, Collections.statementRoomsAsked, requestId);
-		if (topic.statementId)
-			updateDoc(requestRef, { approved: true, roomNumber });
-		else updateDoc(requestRef, { approved: false, roomNumber });
 	} catch (error) {
 		console.error(error);
 	}
diff --git a/src/controllers/db/statements/setStatements.ts b/src/controllers/db/statements/setStatements.ts
index d60a62332..e858748e6 100644
--- a/src/controllers/db/statements/setStatements.ts
+++ b/src/controllers/db/statements/setStatements.ts
@@ -13,6 +13,7 @@ import {
 	StatementType,
 	UserSchema,
 	isAllowedStatementType,
+	writeZodError,
 } from "delib-npm";
 import { Collections, Role } from "delib-npm";
 import { DB } from "../config";
@@ -25,6 +26,7 @@ import {
 	getSiblingOptionsByParentId,
 } from "@/view/pages/statement/components/vote/statementVoteCont";
 import { allowedScreens } from "@/controllers/general/screens";
+import { setNewRoomSettingsToDB } from "../rooms/setRooms";
 
 
 
@@ -63,6 +65,34 @@ export const updateStatementParents = async (
 };
 
 const TextSchema = z.string().min(2);
+
+export function setSubStatementToDB(statement: Statement, title: string, description?: string) {
+	try {
+		const newSubStatement = createStatement({
+			text: title,
+			description: description,
+			parentStatement: statement,
+			statementType: StatementType.option,
+			enableAddEvaluationOption: true,
+			enableAddVotingOption: true,
+			enhancedEvaluation: true,
+			showEvaluation: true,
+			resultsBy: ResultsBy.topOptions,
+			numberOfResults: 1,
+			hasChildren: true,
+			membership: statement.membership,
+		});
+
+		if(!newSubStatement) throw new Error("New newSubStatement is undefined");
+
+		const newSubStatementRef = doc(DB, Collections.statements, newSubStatement.statementId);
+		setDoc(newSubStatementRef, newSubStatement);
+	} catch (error) {
+		console.error(error);
+		
+	}
+}
+
 interface SetStatementToDBParams {
 	statement: Statement;
 	parentStatement?: Statement | "top";
@@ -159,6 +189,9 @@ export const setStatementToDB = async ({
 
 		statementPromises.push(statementPromise);
 
+		//add roomSettings
+		setNewRoomSettingsToDB(statement.statementId);
+
 		//add subscription
 
 		if (addSubscription) {
@@ -294,7 +327,10 @@ export function createStatement({
 
 		newStatement.subScreens = allowedScreens(newStatement, newStatement.subScreens);
 
-		StatementSchema.parse(newStatement);
+		const results = StatementSchema.safeParse(newStatement);
+		if(results.success === false) {
+			writeZodError(results.error, newStatement);
+		}
 
 		return newStatement;
 	} catch (error) {
@@ -387,7 +423,10 @@ export function updateStatement({
 					Screen.VOTE,
 				];
 
-		StatementSchema.parse(newStatement);
+		const results = StatementSchema.safeParse(newStatement);
+		if(results.success === false) {
+			writeZodError(results.error, newStatement);
+		}
 
 		return newStatement;
 	} catch (error) {
@@ -454,16 +493,12 @@ function updateStatementSettings({
 export async function updateStatementText(
 	statement: Statement | undefined,
 	title: string,
-	description?: string,
+	description: string,
 ) {
 	try {
 		if (!title) throw new Error("New title is undefined");
 		if (!statement) throw new Error("Statement is undefined");
-
-		// console.log(statement.statement);
-		// console.log(newText);
-		const _statement = title;
-		const _description = description ? description.split("\n").slice(1).join("\n").trim() : "";
+		
 
 		if (statement.statement === title && statement.description === description) return;
 
@@ -475,8 +510,8 @@ export async function updateStatementText(
 		);
 
 		const newStatement = {
-			statement: _statement,
-			description: _description,
+			statement:title,
+			description,
 			lastUpdate: Timestamp.now().toMillis(),
 		};
 		await updateDoc(statementRef, newStatement);
diff --git a/src/controllers/db/timer/setTimer.ts b/src/controllers/db/timer/setTimer.ts
index ee0c60f15..082ebe85f 100644
--- a/src/controllers/db/timer/setTimer.ts
+++ b/src/controllers/db/timer/setTimer.ts
@@ -12,7 +12,6 @@ import {
 import { DB } from "../config";
 import {
 	Collections,
-	RoomDivied,
 	RoomTimer,
 	RoomTimerSchema,
 	SetTimer,
@@ -183,7 +182,7 @@ export async function setTimersInitTimeDB({
 
 interface InitializeTimersDBParams {
     statementId: string;
-    rooms: RoomDivied[];
+    rooms: Array<{ roomNumber: number }>;
 }
 
 export async function initializeTimersDB({
diff --git a/src/controllers/db/waitingList/SetWaitingList.tsx b/src/controllers/db/waitingList/SetWaitingList.tsx
index 815165847..fdde547ce 100644
--- a/src/controllers/db/waitingList/SetWaitingList.tsx
+++ b/src/controllers/db/waitingList/SetWaitingList.tsx
@@ -8,6 +8,7 @@ import { SetWaitingListCont } from "./SetWaitingListCont";
 
 //Styles
 import styles from "./setWaitingList.module.scss"
+import VisuallyHidden from "@/view/components/accessibility/toScreenReaders/VisuallyHidden";
 
 	interface Props {
 		statement: Statement
@@ -30,7 +31,11 @@ const SetWaitingList: FC<Props> = ({ statement }) => {
 
 	return (
 		<div>
+			<label htmlFor="uploadFile">
+				<VisuallyHidden labelName={"uploadFile"} />
+			</label>
 			<input
+				id="uploadFile"
 				className={styles.uploadInput}
 				type="file"
 				accept=".xlsx, .xls"
diff --git a/src/model/rooms/roomsSlice.ts b/src/model/rooms/roomsSlice.ts
index fd1031776..5553db4c1 100644
--- a/src/model/rooms/roomsSlice.ts
+++ b/src/model/rooms/roomsSlice.ts
@@ -1,150 +1,113 @@
 import { createSelector, createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { LobbyRooms, Participant, Statement } from "delib-npm";
+import { ParticipantInRoom, RoomSettings } from "delib-npm";
 import { updateArray } from "@/controllers/general/helpers";
-import { z } from "zod";
 import { RootState } from "../store";
 
-export interface RoomAdmin {
-	room: Array<Participant>;
-	roomNumber: number;
-	statement: Statement;
-}
+
 interface RoomsState {
-	rooms: Participant[];
-	askToJoinRooms: Participant[];
-	lobbyRooms: LobbyRooms[];
+	participants: ParticipantInRoom[];
+	roomsSettings: RoomSettings[];
 }
 
 const initialState: RoomsState = {
-	rooms: [],
-	askToJoinRooms: [],
-	lobbyRooms: [],
+	participants: [],
+	roomsSettings: [],
 };
 
 export const roomsSlice = createSlice({
 	name: "rooms",
 	initialState,
 	reducers: {
-		setAskToJoinRooms: (
+		setRoom: (
 			state,
-			action: PayloadAction<{
-				request: Participant | undefined;
-				parentId: string;
-			}>,
+			action: PayloadAction<ParticipantInRoom>,
 		) => {
 			try {
-				const { request, parentId } = action.payload;
-
-				if (!request) {
-					//remove previous room request
-
-					state.askToJoinRooms = state.askToJoinRooms.filter(
-						(room) => room.parentId !== parentId,
-					);
-
-					return;
-				}
-
-				//set request to join room
-				state.askToJoinRooms = updateArray(
-					state.askToJoinRooms,
-					request,
-					"requestId",
-				);
+				state.participants = updateArray(state.participants, action.payload, "participantInRoomId");
 			} catch (error) {
 				console.error(error);
 			}
 		},
-		setRoomRequests: (state, action: PayloadAction<Participant[]>) => {
+		setRooms: (
+			state,
+			action: PayloadAction<ParticipantInRoom[]>,
+		) => {
 			try {
-				const requests = action.payload;
-				z.array(z.any()).parse(requests);
-
-				state.askToJoinRooms = requests;
+				const participants = action.payload;
+				participants.forEach((room) => {
+					state.participants = updateArray(state.participants, room, "participantInRoomId");
+				});
 			} catch (error) {
 				console.error(error);
 			}
 		},
-		removeFromAskToJoinRooms: (state, action: PayloadAction<string>) => {
+		deleteRoom: (
+			state,
+			action: PayloadAction<ParticipantInRoom>,
+		) => {
 			try {
-				const requestId = action.payload;
-				state.askToJoinRooms = state.askToJoinRooms.filter(
-					(room) => room.requestId !== requestId,
+				state.participants = state.participants.filter(
+					(room) => room.participantInRoomId !== action.payload.participantInRoomId,
 				);
 			} catch (error) {
 				console.error(error);
 			}
 		},
+		setRoomSettings: (
+			state,
+			action: PayloadAction<RoomSettings>,
+		) => {
+			try {
+				state.roomsSettings = updateArray(state.roomsSettings, action.payload, "statementId");
+			} catch (error) {
+				console.error(error);
+			}
+		}
 	},
 });
 
-export const { setAskToJoinRooms, setRoomRequests, removeFromAskToJoinRooms } =
+export const { setRoom, setRooms, deleteRoom, setRoomSettings } =
 	roomsSlice.actions;
 
-export const participantsSelector =
+export const participantByIdSelector = (participantId: string | undefined) => createSelector(
+	(state: RootState) => state.rooms.participants,
+	(prt) => prt.find(
+		(prt) => prt.user.uid === participantId,
+	)
+);
+
+export const participantsByTopicId =
+	(topicId: string | undefined) => createSelector(
+		(state: RootState) => state.rooms.participants,
+		(prt) => prt.filter(
+			(prt) => prt.statement.statementId === topicId,
+		)
+	);
+export const participantsByStatementId =
 	(statementId: string | undefined) => createSelector(
-		(state: RootState) => state.rooms.askToJoinRooms,
-		(askToJoinRooms) => askToJoinRooms.filter(
-			(room) => room.parentId === statementId,
+		(state: RootState) => state.rooms.participants,
+		(prt) => prt.filter(
+			(prt) => prt.statement.parentId === statementId,
 		)
 	);
 
-export const askToJoinRoomsSelector = (state: RootState) =>
-	state.rooms.askToJoinRooms;
-export const askToJoinRoomSelector =
-	(statementId: string | undefined) => (state: RootState) =>
-		state.rooms.askToJoinRooms.find(
-			(room) => room.statementId === statementId,
-		);
-export const userSelectedRoomSelector =
-	(statementId: string | undefined) => (state: RootState) =>
-		state.rooms.askToJoinRooms.find(
-			(room) =>
-				room.participant.uid === state.user.user?.uid &&
-				room.parentId === statementId,
-		);
-export const topicParticipantsSelector = (statementId: string | undefined) => createSelector(
-	(state: RootState) => state.rooms.askToJoinRooms,
-	(askToJoinRooms) =>
-		askToJoinRooms.filter((room) => room.statementId === statementId)
-);
-
-// export const topicParticipantsSelector = createSelector(
-// 	(statementId: string | undefined) => statementId,
-// 	(state: RootState) => state.rooms.askToJoinRooms,
-// 	(statementId, askToJoinRooms) =>
-// 		askToJoinRooms.filter((room) => room.statementId === statementId)
-// );
-export const participantSelector =
-	(userId: string | undefined) => (state: RootState) =>
-		state.rooms.askToJoinRooms.filter(
-			(room) => room.participant.uid === userId,
-		);
-
-//find the user selected topic
-export const userSelectedTopicSelector =
-	(parentId: string | undefined) => (state: RootState) =>
-		state.rooms.askToJoinRooms.find(
-			(room) =>
-				room.participant.uid === state.user.user?.uid &&
-				room.parentId === parentId,
-		);
-
-//find all user in room number
-
+export const participantsByStatementIdAndRoomNumber =
+	(statementId: string | undefined, roomNumber: number) => createSelector(
+		(state: RootState) => state.rooms.participants,
+		(prt) => prt.filter(
+			(prt) => prt.statement.parentId === statementId && prt.roomNumber === roomNumber,
+		)
+	);
 
-export const participantsInRoomSelector =
-	(roomNumber: number | undefined, parentId: string) => createSelector(
-		(state: RootState) => state.rooms.askToJoinRooms,
-		(askToJoinRooms) => askToJoinRooms.filter(
-			(room) => room.roomNumber === roomNumber && room.parentId === parentId,
+export const roomSettingsByStatementId =
+	(statementId: string | undefined) => createSelector(
+		(state: RootState) => state.rooms.roomsSettings,
+		(roomsSettings) => roomsSettings.find(
+			(rs) => rs.statementId === statementId,
 		)
 	);
 
-//lobby rooms
-export const lobbyRoomsSelector = (state: RootState) => state.rooms.lobbyRooms;
-export const lobbyRoomSelector =
-	(statementId: string | undefined) => (state: RootState) =>
-		state.rooms.lobbyRooms.find((room) => room.statementId === statementId);
+
+
 
 export default roomsSlice.reducer;
diff --git a/src/view/components/accessibility/Accessibility.tsx b/src/view/components/accessibility/Accessibility.tsx
index 27ab16661..6ce008e9f 100644
--- a/src/view/components/accessibility/Accessibility.tsx
+++ b/src/view/components/accessibility/Accessibility.tsx
@@ -74,7 +74,7 @@ const Accessibility = () => {
 				>
                     +
 				</IconButton>
-				<div className="accessibility__fonts__size">
+				<div className="accessibility__fonts__size" role="status">
 					{user ? fontSize : _fontSize}px
 				</div>
 				<IconButton
diff --git a/src/view/components/accessibility/toScreenReaders/VisuallyHidden.tsx b/src/view/components/accessibility/toScreenReaders/VisuallyHidden.tsx
new file mode 100644
index 000000000..0a5f4c267
--- /dev/null
+++ b/src/view/components/accessibility/toScreenReaders/VisuallyHidden.tsx
@@ -0,0 +1,26 @@
+import { FC } from "react";
+
+interface VisuallyHiddenProps {
+  labelName: string;
+}
+
+const VisuallyHidden: FC<VisuallyHiddenProps> = ({ labelName }) => {
+	return (
+		<span
+			style={{
+				position: "absolute",
+				width: "1px",
+				height: "1px",
+				margin: "-1px",
+				padding: "0",
+				overflow: "hidden",
+				clip: "rect(0, 0, 0, 0)",
+				border: "0",
+			}}
+		>
+			{labelName}
+		</span>
+	);
+};
+
+export default VisuallyHidden;
diff --git a/src/view/components/askPermission/AskPermission.tsx b/src/view/components/askPermission/AskPermission.tsx
index 2aedc2a84..e18aec384 100644
--- a/src/view/components/askPermission/AskPermission.tsx
+++ b/src/view/components/askPermission/AskPermission.tsx
@@ -5,7 +5,7 @@ import styles from "./AskPermission.module.scss";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
 
 interface Props {
-    showFn: React.Dispatch<React.SetStateAction<boolean>>;
+	showFn: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const AskPermission: FC<Props> = ({ showFn }) => {
diff --git a/src/view/components/buttons/button/Button.scss b/src/view/components/buttons/button/Button.module.scss
similarity index 87%
rename from src/view/components/buttons/button/Button.scss
rename to src/view/components/buttons/button/Button.module.scss
index 9726eabe4..a56dd768e 100644
--- a/src/view/components/buttons/button/Button.scss
+++ b/src/view/components/buttons/button/Button.module.scss
@@ -3,6 +3,10 @@
   display: flex;
   width: fit-content;
   align-items: center;
+  background-color: var(--btn-primary);
+  padding: .5rem 1.5rem;
+  border-radius: var(--radius);
+  color:var(--white);
 
   &__text {
     font-size: 1rem;
diff --git a/src/view/components/buttons/button/Button.tsx b/src/view/components/buttons/button/Button.tsx
index 4d6a81133..0687d655b 100644
--- a/src/view/components/buttons/button/Button.tsx
+++ b/src/view/components/buttons/button/Button.tsx
@@ -1,5 +1,5 @@
 import { FC } from "react";
-import "./Button.scss";
+import styles from "./Button.module.scss";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
 
 interface Props {
@@ -28,13 +28,13 @@ const Button: FC<Props> = ({
 		}
 	}
 
-	const buttonClassName = `button ${iconOnRight ? "" : "button--right"} ${Icon ? "button--with-icon" : ""} ${className}`.trim();
+	// const buttonClassName = `button ${iconOnRight ? "" : "button--right"} ${Icon ? "button--with-icon" : ""} ${className}`.trim();
 
 	return (
-		<button className={buttonClassName} onClick={onClick}>
-			<div className="button__text">{text}</div>
+		<button className={`${styles.button} ${className}`} onClick={onClick}>
+			<div className={styles["button__text"]}>{text}</div>
 			{Icon && (
-				<div className="button__icon-wrapper">
+				<div className={styles["button__icon-wrapper"]}>
 					<div
 						className={
 							dir === "rtl" ? "button__icon button__icon--right" : "button__icon"
diff --git a/src/view/components/checkbox/Checkbox.tsx b/src/view/components/checkbox/Checkbox.tsx
index a80e20726..9cb0944bb 100644
--- a/src/view/components/checkbox/Checkbox.tsx
+++ b/src/view/components/checkbox/Checkbox.tsx
@@ -1,16 +1,15 @@
-import { FC } from "react";
-import { useLanguage } from "@/controllers/hooks/useLanguages";
 import CheckboxCheckedIcon from "@/assets/icons/checkboxCheckedIcon.svg?react";
 import CheckboxEmptyIcon from "@/assets/icons/checkboxEmptyIcon.svg?react";
+import { useLanguage } from "@/controllers/hooks/useLanguages";
+import { FC } from "react";
 import "./Checkbox.scss";
-
-import { ChangeEventHandler } from "react";
+import VisuallyHidden from "../accessibility/toScreenReaders/VisuallyHidden";
 
 interface CheckboxProps {
 	name?: string;
 	label: string;
 	isChecked: boolean;
-	toggleSelection: ChangeEventHandler<HTMLInputElement>;
+	toggleSelection: () => void;
 }
 
 const Checkbox: FC<CheckboxProps> = ({
@@ -23,9 +22,21 @@ const Checkbox: FC<CheckboxProps> = ({
 
 	return (
 		<label className={`checkbox ${isChecked ? "checked" : ""}`} htmlFor={`checkbox-${label}`}>
-			<div className="checkbox-icon">
+			 <VisuallyHidden labelName={t(label)} /> 
+			<button
+				type="button"
+				className="checkbox-icon"
+				onClick={toggleSelection}
+				onKeyDown={(e: React.KeyboardEvent<HTMLButtonElement>) => {
+					if (e.key === 'Enter') {
+						e.preventDefault(); 
+						toggleSelection();
+					}
+				}}
+				aria-label={isChecked ? "Uncheck" : "Check"}
+			>
 				{isChecked ? <CheckboxCheckedIcon /> : <CheckboxEmptyIcon />}
-			</div>
+			</button>
 
 			<input
 				type="checkbox"
diff --git a/src/view/components/edit/EditTitle.tsx b/src/view/components/edit/EditTitle.tsx
index 668fdf176..ef01c703c 100644
--- a/src/view/components/edit/EditTitle.tsx
+++ b/src/view/components/edit/EditTitle.tsx
@@ -30,7 +30,7 @@ const EditTitle: FC<Props> = ({
 	isTextArea,
 
 }) => {
-	const [description, setText] = useState(statement?.description || "");
+	const [description, setDescription] = useState(statement?.description || "");
 	const [title, setTitle] = useState(statement?.statement || "");
 	const textareaRef = useAutoFocus(isEdit);
 
@@ -41,10 +41,12 @@ const EditTitle: FC<Props> = ({
 	const align = direction === "ltr" ? "left" : "right";
 
 	function handleChange(
-		e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>,
-		setState: Dispatch<SetStateAction<string>>
+		e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
 	) {
-		setState(e.target.value);
+		const _title = e.target.value.split("\n")[0].trim();
+		const _description = e.target.value.split("\n").slice(1).join("\n").trim();
+		setTitle(_title);
+		setDescription(_description);
 	}
 
 	function handleSave() {
@@ -53,7 +55,7 @@ const EditTitle: FC<Props> = ({
 			if (!statement) throw new Error("Statement is undefined");
 
 
-			updateStatementText(statement, title.trim(), description.trim());
+			updateStatementText(statement, title, description);
 			setEdit(false);
 		} catch (error) {
 			console.error(error);
@@ -76,7 +78,7 @@ const EditTitle: FC<Props> = ({
 						style={{ direction: direction, textAlign: align }}
 						className={styles.textarea}
 						defaultValue={`${title}\n${description}`}
-						onChange={(e) => handleChange(e, setText)}
+						onChange={handleChange}
 						autoFocus={true}
 						placeholder="Add text"
 					></textarea>
@@ -91,7 +93,7 @@ const EditTitle: FC<Props> = ({
 						className={styles.input}
 						type="text"
 						value={title}
-						onChange={(e) => handleChange(e, setTitle)}
+						onChange={handleChange}
 						autoFocus={true}
 						data-cy="edit-title-input"
 					></input>
diff --git a/src/view/components/iconButton/IconButton.tsx b/src/view/components/iconButton/IconButton.tsx
index 8dd3d17da..68e2f427d 100644
--- a/src/view/components/iconButton/IconButton.tsx
+++ b/src/view/components/iconButton/IconButton.tsx
@@ -5,7 +5,7 @@ const IconButton: FC<ComponentProps<"button">> = ({
 	className = "",
 	...props
 }) => {
-	return <button className={`icon-button ${className}`} {...props} />;
+	return <button className={`icon-button ${className}`} aria-label="Icon button" {...props} />;
 };
 
 export default IconButton;
diff --git a/src/view/components/passwordUi/PasswordUi.tsx b/src/view/components/passwordUi/PasswordUi.tsx
index df3ec673d..071cd0f17 100644
--- a/src/view/components/passwordUi/PasswordUi.tsx
+++ b/src/view/components/passwordUi/PasswordUi.tsx
@@ -1,102 +1,102 @@
-import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-//styles
-import styles from './passwordUi.module.scss';
-
-//images
-import passwordUiImgBlue from '../../../assets/images/passwordUiImgBlue.png';
-import passwordUiImgRed from '../../../assets/images/passwordUiImgRed.png';
-import passwordUiImgGreen from '../../../assets/images/passwordUiImgGreen.png';
-
-//custom components
-import Button from '../buttons/button/Button';
-import PasswordInput from './PasswordInput.tsx';
-import { useLanguage } from '@/controllers/hooks/useLanguages';
-
-export default function PasswordUi({
-	setPasswordCheck,
-}: {
-	setPasswordCheck: React.Dispatch<React.SetStateAction<boolean>>;
-}) {
-	const navigate = useNavigate();
-	const { t } = useLanguage();
-
-	const PASSWORD_CODE = 7538;
-	const PASSWORD_LENGTH = 4;
-	const MAX_TRIES = 3;
-
-	const [triesCounter, setTriesCounter] = useState(MAX_TRIES);
-	const [values, setValues] = useState(Array(PASSWORD_LENGTH).fill(''));
-	const [passwordState, setPasswordState] = useState({
-		img: passwordUiImgBlue,
-		text: t('Enter your 4-digit passcode to unlock group access'),
-		textStyle: styles.passwordUi__statusSection__passwordTextDefault,
-	});
-
-	function handleSubmit() {
-		const enteredCode = Number(values.join(''));
-
-		try {
-			if (enteredCode === PASSWORD_CODE) {
-				setPasswordState({
-					img: passwordUiImgGreen,
-					text: t(`Bravo! Your password is correct. Welcome aboard!`),
-					textStyle: styles.passwordUi__statusSection__passwordTextCorrect,
-				});
-
-				setTimeout(() => {
-					setPasswordCheck(true);
-				}, 1000);
-			} else {
-				setPasswordState({
-					img: passwordUiImgRed,
-					text: t(`Something went wrong. Please try again!`),
-					textStyle: styles.passwordUi__statusSection__passwordTextIncorrect,
-				});
-
-				setTriesCounter((prev) => {
-					const newTriesCounter = prev - 1;
-					if (newTriesCounter <= 0) {
-						navigate('/401');
-					}
-
-					return newTriesCounter;
-				});
-			}
-		} catch (err) {
-			console.error(err);
-		}
-	}
-
-	return (
-		<div className={styles.passwordUi}>
-			<img src={passwordState.img} />
-
-			<div className={styles.passwordUi__statusSection}>
-				<p className={passwordState.textStyle}>{passwordState.text}</p>
-			</div>
-
-			<div className={styles.passwordUi__inputSection}>
-				<PasswordInput
-					handleSubmit={handleSubmit}
-					passwordLength={PASSWORD_LENGTH}
-					values={values}
-					setValues={setValues}
-				/>
-			</div>
-
-			<div className={styles.passwordUi__triesLeft}>
-				<p>Tries Left = {triesCounter}</p>
-			</div>
-
-			<div className={styles.passwordUi__buttonSection}>
-				<Button
-					text={t('Submit')}
-					onClick={() => handleSubmit()}
-					className='btn btn--affirmation'
-				/>
-			</div>
-		</div>
-	);
-}
+// import { useState } from 'react';
+// import { useNavigate } from 'react-router-dom';
+
+// //styles
+// import styles from './passwordUi.module.scss';
+
+// //images
+// import passwordUiImgBlue from '../../../assets/images/passwordUiImgBlue.png';
+// import passwordUiImgRed from '../../../assets/images/passwordUiImgRed.png';
+// import passwordUiImgGreen from '../../../assets/images/passwordUiImgGreen.png';
+
+// //custom components
+// import Button from '../buttons/button/Button';
+// import PasswordInput from './PasswordInput.tsx';
+// import { useLanguage } from '@/controllers/hooks/useLanguages';
+
+// export default function PasswordUi({
+// 	setPasswordCheck,
+// }: {
+// 	setPasswordCheck: React.Dispatch<React.SetStateAction<boolean>>;
+// }) {
+// 	const navigate = useNavigate();
+// 	const { t } = useLanguage();
+
+// 	const PASSWORD_CODE = 7538;
+// 	const PASSWORD_LENGTH = 4;
+// 	const MAX_TRIES = 3;
+
+// 	const [triesCounter, setTriesCounter] = useState(MAX_TRIES);
+// 	const [values, setValues] = useState(Array(PASSWORD_LENGTH).fill(''));
+// 	const [passwordState, setPasswordState] = useState({
+// 		img: passwordUiImgBlue,
+// 		text: t('Enter your 4-digit passcode to unlock group access'),
+// 		textStyle: styles.passwordUi__statusSection__passwordTextDefault,
+// 	});
+
+// 	function handleSubmit() {
+// 		const enteredCode = Number(values.join(''));
+
+// 		try {
+// 			if (enteredCode === PASSWORD_CODE) {
+// 				setPasswordState({
+// 					img: passwordUiImgGreen,
+// 					text: t(`Bravo! Your password is correct. Welcome aboard!`),
+// 					textStyle: styles.passwordUi__statusSection__passwordTextCorrect,
+// 				});
+
+// 				setTimeout(() => {
+// 					setPasswordCheck(true);
+// 				}, 1000);
+// 			} else {
+// 				setPasswordState({
+// 					img: passwordUiImgRed,
+// 					text: t(`Something went wrong. Please try again!`),
+// 					textStyle: styles.passwordUi__statusSection__passwordTextIncorrect,
+// 				});
+
+// 				setTriesCounter((prev) => {
+// 					const newTriesCounter = prev - 1;
+// 					if (newTriesCounter <= 0) {
+// 						navigate('/401');
+// 					}
+
+// 					return newTriesCounter;
+// 				});
+// 			}
+// 		} catch (err) {
+// 			console.error(err);
+// 		}
+// 	}
+
+// 	return (
+// 		<div className={styles.passwordUi}>
+// 			<img src={passwordState.img} />
+
+// 			<div className={styles.passwordUi__statusSection}>
+// 				<p className={passwordState.textStyle}>{passwordState.text}</p>
+// 			</div>
+
+// 			<div className={styles.passwordUi__inputSection}>
+// 				<PasswordInput
+// 					handleSubmit={handleSubmit}
+// 					passwordLength={PASSWORD_LENGTH}
+// 					values={values}
+// 					setValues={setValues}
+// 				/>
+// 			</div>
+
+// 			<div className={styles.passwordUi__triesLeft}>
+// 				<p>Tries Left = {triesCounter}</p>
+// 			</div>
+
+// 			<div className={styles.passwordUi__buttonSection}>
+// 				<Button
+// 					text={t('Submit')}
+// 					onClick={() => handleSubmit()}
+// 					className='btn btn--affirmation'
+// 				/>
+// 			</div>
+// 		</div>
+// 	);
+// }
diff --git a/src/view/components/switch/customSwitch/CustomSwitch.tsx b/src/view/components/switch/customSwitch/CustomSwitch.tsx
index 553adfd8b..6b75106b4 100644
--- a/src/view/components/switch/customSwitch/CustomSwitch.tsx
+++ b/src/view/components/switch/customSwitch/CustomSwitch.tsx
@@ -1,7 +1,8 @@
 // CustomSwitch.js
-import { FC } from "react";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
+import { FC } from "react";
 import "./CustomSwitch.scss";
+import VisuallyHidden from "../../accessibility/toScreenReaders/VisuallyHidden";
 
 interface Props {
     label: string;
@@ -26,9 +27,9 @@ const CustomSwitch: FC<Props> = ({
 
 	return (
 		<div className={`custom-switch ${checked ? "checked" : ""}`}>
-			<div className="tag" onClick={handleChange}>
+			<button className="tag" onClick={handleChange} aria-label="custom switch">
 				{children}
-			</div>
+			</button>
 			<div
 				className="label"
 				onClick={handleChange}
@@ -36,6 +37,9 @@ const CustomSwitch: FC<Props> = ({
 			>
 				{t(label)}
 			</div>
+			<label htmlFor={`toggleSwitch-${name}`}>
+				<VisuallyHidden labelName={label} />
+			</label>
 			<input
 				type="checkbox"
 				name={name}
diff --git a/src/view/components/switch/customSwitchSmall/CustomSwitchSmall.tsx b/src/view/components/switch/customSwitchSmall/CustomSwitchSmall.tsx
index 4f72dbff9..1e16462af 100644
--- a/src/view/components/switch/customSwitchSmall/CustomSwitchSmall.tsx
+++ b/src/view/components/switch/customSwitchSmall/CustomSwitchSmall.tsx
@@ -2,9 +2,10 @@ import { FC } from "react";
 import "./CustomSwitchSmall.scss";
 import background from "./customSwitchSmallBackground.svg";
 
-import StepsNoIcon from "@/assets/icons/stepsNoIcon.svg?react";
 import StepsIcon from "@/assets/icons/stepsIcon.svg?react";
+import StepsNoIcon from "@/assets/icons/stepsNoIcon.svg?react";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
+import VisuallyHidden from "../../accessibility/toScreenReaders/VisuallyHidden";
 
 interface Props {
   label: string;
@@ -44,14 +45,25 @@ const CustomSwitchSmall: FC<Props> = ({
 				<div className="ball ball-background ball-background-off">
 					<StepsIcon />
 				</div>
-				<div
+				<button
 					className={`ball ball-switch ball-switch--${checked ? "checked" : "unchecked"}`}
+					type="button"
 					style={{ left: `${checked ? 0 : 4.15}rem` }}
+					aria-label={checked ? "Turn off" : "Turn on"}
+					onKeyDown={(e) => {
+						if (e.key === 'Enter' || e.key === ' ') { 
+							e.preventDefault(); 
+							handleChange(); 
+						}
+					}}
 				>
 					{checked ? <StepsIcon /> : <StepsNoIcon />}
-				</div>
+				</button>
 			</div>
 			<div className="text">{checked ? textChecked : textUnchecked}</div>
+			<label htmlFor={`toggleSwitchSimple-${label}`}>
+				<VisuallyHidden labelName={label} />
+			</label>
 			<input
 				type="checkbox"
 				name={label}
diff --git a/src/view/pages/home/main/HomeMain.tsx b/src/view/pages/home/main/HomeMain.tsx
index 111165c7f..0ea74ffc2 100644
--- a/src/view/pages/home/main/HomeMain.tsx
+++ b/src/view/pages/home/main/HomeMain.tsx
@@ -45,7 +45,7 @@ const HomeMain = () => {
 	return (
 		<ScreenSlide className="home-page__main slide-in">
 			<div className="heroImg"></div>
-			<img className="bikeImg" src={bike} />
+			<img className="bikeImg" alt="Bike image" src={bike} />
 
 			<div
 				className="wrapper main-wrap"
diff --git a/src/view/pages/home/main/addStatement/AddStatement.tsx b/src/view/pages/home/main/addStatement/AddStatement.tsx
index 63a69b822..40cf51923 100644
--- a/src/view/pages/home/main/addStatement/AddStatement.tsx
+++ b/src/view/pages/home/main/addStatement/AddStatement.tsx
@@ -18,6 +18,7 @@ export const AddStatement = () => {
 					to={"/home"}
 					state={{ from: window.location.pathname }}
 					className="back-arrow-icon"
+					aria-label="Back to Home page"
 				>
 					<BackArrowIcon />
 				</Link>
diff --git a/src/view/pages/statement/StatementMain.tsx b/src/view/pages/statement/StatementMain.tsx
index 09fcd8f9c..40f1ac945 100644
--- a/src/view/pages/statement/StatementMain.tsx
+++ b/src/view/pages/statement/StatementMain.tsx
@@ -1,48 +1,47 @@
-import { FC, useEffect, useState } from 'react';
-import { createSelector } from 'reselect';
+import { FC, useEffect, useState } from "react";
+import { createSelector } from "reselect";
 
 // Third party imports
-import { useNavigate, useParams } from 'react-router-dom';
-import { User, Role, Screen } from 'delib-npm';
+import { useNavigate, useParams } from "react-router-dom";
+import { User, Role, Screen } from "delib-npm";
 
 // firestore
-import { getIsSubscribed } from '@/controllers/db/subscriptions/getSubscriptions';
+import { getIsSubscribed } from "@/controllers/db/subscriptions/getSubscriptions";
 import {
 	listenToSubStatements,
 	listenToStatement,
 	listenToStatementSubscription,
-} from '@/controllers/db/statements/listenToStatements';
+} from "@/controllers/db/statements/listenToStatements";
 import {
 	updateSubscriberForStatementSubStatements,
 	setStatementSubscriptionToDB,
-} from '@/controllers/db/subscriptions/setSubscriptions';
+} from "@/controllers/db/subscriptions/setSubscriptions";
 
-import { listenToEvaluations } from '@/controllers/db/evaluation/getEvaluation';
+import { listenToEvaluations } from "@/controllers/db/evaluation/getEvaluation";
 
 // Redux Store
-import { useAppDispatch, useAppSelector } from '@/controllers/hooks/reduxHooks';
-import { statementNotificationSelector } from '@/model/statements/statementsSlice';
-import { RootState } from '@/model/store';
-import { userSelector } from '@/model/users/userSlice';
-import { useSelector } from 'react-redux';
+import { useAppDispatch, useAppSelector } from "@/controllers/hooks/reduxHooks";
+import { statementNotificationSelector } from "@/model/statements/statementsSlice";
+import { RootState } from "@/model/store";
+import { userSelector } from "@/model/users/userSlice";
+import { useSelector } from "react-redux";
 
 // Hooks & Helpers
-import { MapProvider } from '@/controllers/hooks/useMap';
-import { statementTitleToDisplay } from '@/controllers/general/helpers';
-import { availableScreen } from './StatementCont';
-import { useIsAuthorized } from '@/controllers/hooks/authHooks';
+import { MapProvider } from "@/controllers/hooks/useMap";
+import { statementTitleToDisplay } from "@/controllers/general/helpers";
+import { availableScreen } from "./StatementCont";
+import { useIsAuthorized } from "@/controllers/hooks/authHooks";
 
 // Custom components
-import LoadingPage from '../loadingPage/LoadingPage';
-import Page404 from '../page404/Page404';
-import UnAuthorizedPage from '../unAuthorizedPage/UnAuthorizedPage';
-import ProfileImage from '../../components/profileImage/ProfileImage';
-import StatementHeader from './components/header/StatementHeader';
-import SwitchScreens from './components/SwitchScreens';
-import EnableNotifications from '../../components/enableNotifications/EnableNotifications';
-import AskPermission from '@/view/components/askPermission/AskPermission';
-import FollowMeToast from './components/followMeToast/FollowMeToast';
-
+import LoadingPage from "../loadingPage/LoadingPage";
+import Page404 from "../page404/Page404";
+import UnAuthorizedPage from "../unAuthorizedPage/UnAuthorizedPage";
+import ProfileImage from "../../components/profileImage/ProfileImage";
+import StatementHeader from "./components/header/StatementHeader";
+import SwitchScreens from "./components/SwitchScreens";
+import EnableNotifications from "../../components/enableNotifications/EnableNotifications";
+import AskPermission from "@/view/components/askPermission/AskPermission";
+import FollowMeToast from "./components/followMeToast/FollowMeToast";
 
 // Create selectors
 export const subStatementsSelector = createSelector(
@@ -87,7 +86,8 @@ const StatementMain: FC = () => {
 	const [showAskPermission, setShowAskPermission] = useState<boolean>(false);
 	const [askNotifications, setAskNotifications] = useState(false);
 	const [isStatementNotFound, setIsStatementNotFound] = useState(false);
-	const [_, setPasswordCheck] = useState<boolean>(false)
+
+	// const [_, setPasswordCheck] = useState<boolean>(false)
 
 	// Constants
 	const screen = availableScreen(statement, statementSubscription, page);
@@ -169,7 +169,10 @@ const StatementMain: FC = () => {
 			return;
 		};
 		if (statement?.topParentId) {
-			unSubscribe = listenToStatement(statement?.topParentId, setIsStatementNotFound);
+			unSubscribe = listenToStatement(
+				statement?.topParentId,
+				setIsStatementNotFound
+			);
 		}
 
 		return () => {
@@ -196,10 +199,9 @@ const StatementMain: FC = () => {
 
 	useEffect(() => {
 		if (user?.uid === statement?.creatorId) {
-			setPasswordCheck(true);
-		}
-		else {
-			setPasswordCheck(false);
+			// setPasswordCheck(true);
+		} else {
+			// setPasswordCheck(false);
 		}
 	}, []);
 
@@ -212,7 +214,7 @@ const StatementMain: FC = () => {
 			<>
 				{/* {passwordCheck ?
 					( */}
-				<div className='page'>
+				<div className="page">
 					{showAskPermission && <AskPermission showFn={setShowAskPermission} />}
 					{talker && (
 						<button
@@ -246,6 +248,7 @@ const StatementMain: FC = () => {
 						<SwitchScreens
 							screen={screen}
 							statement={statement}
+							statementSubscription={statementSubscription}
 							subStatements={subStatements}
 							handleShowTalker={handleShowTalker}
 							setShowAskPermission={setShowAskPermission}
@@ -262,8 +265,6 @@ const StatementMain: FC = () => {
 			</>
 		);
 
-
-
 	return <UnAuthorizedPage />;
 };
 
diff --git a/src/view/pages/statement/components/SwitchScreens.tsx b/src/view/pages/statement/components/SwitchScreens.tsx
index af4b1eaa5..b34271f82 100644
--- a/src/view/pages/statement/components/SwitchScreens.tsx
+++ b/src/view/pages/statement/components/SwitchScreens.tsx
@@ -1,7 +1,7 @@
 // This file contains the SwitchScreens component which is used to switch between the different tabs whithin statement
 
 // Third party imports
-import { Screen, Statement, User } from "delib-npm";
+import { Screen, Statement, StatementSubscription, User } from "delib-npm";
 
 // Custom components
 // import Rooms from "./rooms/Rooms";
@@ -11,13 +11,14 @@ import StatementEvaluationPage from "./solutions/StatementSolutionsPage";
 import StatementVote from "./vote/StatementVote";
 import MassQuestions from "./massQuestions/MassQuestions";
 import StatementSettings from "./settings/StatementSettings";
-import Rooms from "./rooms/StatementRooms";
+import Rooms from "./rooms/Rooms";
 import Info from "./info/Info";
 
 interface SwitchScreensProps {
     screen: string | undefined;
     statement: Statement | undefined;
     subStatements: Statement[];
+	statementSubscription:StatementSubscription | undefined;
     handleShowTalker: (statement: User | null) => void;
     setShowAskPermission: React.Dispatch<React.SetStateAction<boolean>>;
     toggleAskNotifications: () => void;
@@ -27,6 +28,7 @@ export default function SwitchScreens({
 	screen,
 	statement,
 	subStatements,
+	statementSubscription,
 	handleShowTalker,
 	setShowAskPermission,
 	toggleAskNotifications,
@@ -73,7 +75,7 @@ export default function SwitchScreens({
 		);
 	case Screen.GROUPS:
 		return (
-			<Rooms statement={statement} subStatements={subStatements} />
+			<Rooms statement={statement} subStatements={subStatements} statementSubscription={statementSubscription} />
 		);
 	case Screen.SETTINGS:
 		return <StatementSettings />;
diff --git a/src/view/pages/statement/components/chat/components/StatementChatMore.tsx b/src/view/pages/statement/components/chat/components/StatementChatMore.tsx
index 7790c0026..4df39d590 100644
--- a/src/view/pages/statement/components/chat/components/StatementChatMore.tsx
+++ b/src/view/pages/statement/components/chat/components/StatementChatMore.tsx
@@ -44,8 +44,9 @@ const StatementChatMore: FC<Props> = ({ statement }) => {
 		: t("Conversations");
 
 	return (
-		<div
+		<button
 			className="statementChatMore"
+			aria-label="Chat more button"
 			onClick={() =>
 				navigate(`/statement/${statement.statementId}/chat`, {
 					state: { from: window.location.pathname },
@@ -63,7 +64,7 @@ const StatementChatMore: FC<Props> = ({ statement }) => {
 				<ChatIcon />
 			</div>
 			<div className="text">{messageToDisplay}</div>
-		</div>
+		</button>
 	);
 };
 
diff --git a/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.tsx b/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.tsx
index 34da0a870..b2e649e11 100644
--- a/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.tsx
+++ b/src/view/pages/statement/components/chat/components/chatMessageCard/ChatMessageCard.tsx
@@ -126,8 +126,10 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 		try {
 			if (!text.trim()) return;
 			if (!statement) throw new Error("Statement is undefined");
+			const title = text.split("\n")[0].trim();
+			const description = text.split("\n").slice(1).join("\n").trim()	;
 
-			updateStatementText(statement, text.trim());
+			updateStatementText(statement, title, description);
 			setIsEdit(false);
 		} catch (error) {
 			console.error(error);
@@ -168,10 +170,9 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 									autoFocus={true}
 									style={{ direction: dir }}
 								/>
-								<button>
+								<button onClick={handleSave}>
 									<img
 										src={SaveTextIcon}
-										onClick={handleSave}
 										className="save-icon"
 										alt="Save Icon"
 									/>
@@ -236,6 +237,7 @@ const ChatMessageCard: FC<ChatMessageCardProps> = ({
 					{shouldLinkToChildren && (
 						<button
 							className="add-question-btn"
+							aria-label="Add question button"
 							onClick={() => setIsNewStatementModalOpen(true)}
 						>
 							<AddQuestionIcon />
diff --git a/src/view/pages/statement/components/chat/components/input/StatementInput.tsx b/src/view/pages/statement/components/chat/components/input/StatementInput.tsx
index d27f3319a..fcb422fc0 100644
--- a/src/view/pages/statement/components/chat/components/input/StatementInput.tsx
+++ b/src/view/pages/statement/components/chat/components/input/StatementInput.tsx
@@ -67,6 +67,7 @@ const StatementInput: FC<Props> = ({ statement, toggleAskNotifications }) => {
 			<button
 				type="submit"
 				className="page__footer__form__sendBtnBox"
+				aria-label="Submit Button"
 				style={statementColor}
 				data-cy="statement-chat-send-btn"
 			>
@@ -76,6 +77,7 @@ const StatementInput: FC<Props> = ({ statement, toggleAskNotifications }) => {
 				data-cy="statement-chat-input"
 				style={{ height: "4rem" }}
 				className="page__footer__form__input"
+				aria-label="Form Input"
 				name="newStatement"
 				onKeyUp={(e) => handleKeyUp(e)}
 				autoFocus={false}
diff --git a/src/view/pages/statement/components/header/Back.tsx b/src/view/pages/statement/components/header/Back.tsx
index c4d041907..ec53fda23 100644
--- a/src/view/pages/statement/components/header/Back.tsx
+++ b/src/view/pages/statement/components/header/Back.tsx
@@ -73,6 +73,7 @@ const Back: FC<Props> = ({ parentStatement, statement, headerColor }) => {
 	return (
 		<button
 			className='page__header__wrapper__actions__iconButton'
+			aria-label="Back Button"
 			onClick={handleBack}
 			style={{ cursor: 'pointer' }}
 			data-cy='back-icon-header'
diff --git a/src/view/pages/statement/components/header/HomeButton.tsx b/src/view/pages/statement/components/header/HomeButton.tsx
index 5642081af..bf3a6f8fe 100644
--- a/src/view/pages/statement/components/header/HomeButton.tsx
+++ b/src/view/pages/statement/components/header/HomeButton.tsx
@@ -12,6 +12,7 @@ const HomeButton: FC<Props> = ({ headerColor }) => {
 			className="page__header__wrapper__actions__iconButton"
 			state={{ from: window.location.pathname }}
 			to={"/home"}
+			aria-label="Back to Home page"
 			data-cy="home-link-icon"
 		>
 			<HomeIcon style={{ color: headerColor.color }} />
diff --git a/src/view/pages/statement/components/header/StatementHeader.tsx b/src/view/pages/statement/components/header/StatementHeader.tsx
index 0cddfe059..389f84acd 100644
--- a/src/view/pages/statement/components/header/StatementHeader.tsx
+++ b/src/view/pages/statement/components/header/StatementHeader.tsx
@@ -157,14 +157,16 @@ const StatementHeader: FC<Props> = ({
 				)}
 
 				{!editHeader ? (
-					<h1
-						className={isAdmin ? "clickable" : ""}
-						onClick={handleEditTitle}
-						style={{ fontSize: titleFontSize, padding: "0 2rem" }}
-						data-cy="statement-header-title"
-					>
-						{title}
-					</h1>
+					<button onClick={handleEditTitle}>
+						<h1
+							className={isAdmin ? 'clickable' : ''}
+							onClick={handleEditTitle}
+							style={{ fontSize: titleFontSize, padding: '0 2rem', color:'white' }}
+							data-cy='statement-header-title'
+						>
+							{title}
+						</h1>
+					</button>
 				) : (
 					<EditTitle
 						isEdit={editHeader}
diff --git a/src/view/pages/statement/components/map/StatementMap.tsx b/src/view/pages/statement/components/map/StatementMap.tsx
index e842ec39f..c084ac5d4 100644
--- a/src/view/pages/statement/components/map/StatementMap.tsx
+++ b/src/view/pages/statement/components/map/StatementMap.tsx
@@ -91,6 +91,7 @@ const StatementMap: FC<Props> = ({ statement }) => {
 		<ScreenFadeIn className="page__main">
 			<ReactFlowProvider>
 				<select
+					aria-label="Select filter type for results"
 					onChange={(ev) => handleFilter(ev.target.value as FilterType)}
 					defaultValue={FilterType.questionsResultsOptions}
 					style={{
diff --git a/src/view/pages/statement/components/massQuestions/components/massQuestion/MassQuestionCardCont.ts b/src/view/pages/statement/components/massQuestions/components/massQuestion/MassQuestionCardCont.ts
index ae6e82b7d..a498ae15d 100644
--- a/src/view/pages/statement/components/massQuestions/components/massQuestion/MassQuestionCardCont.ts
+++ b/src/view/pages/statement/components/massQuestions/components/massQuestion/MassQuestionCardCont.ts
@@ -22,10 +22,13 @@ export const handleSetQuestionFromMassCard = ({
 		const user: User | null = store.getState().user.user;
 		if (!user) throw new Error("user not found");
 		if (!text) return;
+		const title = text.split("\n")[0];
+		const description = text.split("\n").slice(1).join("\n");
+
 
 		if (answer) {
 			//update statement
-			updateStatementText(answer, text);
+			updateStatementText(answer, title, description);
 
 			return undefined;
 		} else {
diff --git a/src/view/pages/statement/components/nav/top/StatementTopNav.tsx b/src/view/pages/statement/components/nav/top/StatementTopNav.tsx
index 6834b8103..44525bc8e 100644
--- a/src/view/pages/statement/components/nav/top/StatementTopNav.tsx
+++ b/src/view/pages/statement/components/nav/top/StatementTopNav.tsx
@@ -27,8 +27,8 @@ const StatementTopNav: FC<Props> = ({ statement, statementSubscription, screen }
 			{_navArray.map((screenInfo: NavObject) => (
 				<Link
 					key={screenInfo.id}
-					to={`/statement/${statement.statementId}/${screenInfo.link}${screenInfo.link === Screen.VOTE ? "/votes-voted" : ""
-					}`}
+					aria-label={screenInfo.name}
+					to={`/statement/${statement.statementId}/${screenInfo.link}${screenInfo.link === Screen.VOTE ? "/votes-voted" : ""}`}
 					className={`page__header__nav__button ${screen === screenInfo.link
 						? "page__header__nav__button--selected"
 						: ""
diff --git a/src/view/pages/statement/components/rooms/Rooms.tsx b/src/view/pages/statement/components/rooms/Rooms.tsx
new file mode 100644
index 000000000..9f0a473c5
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/Rooms.tsx
@@ -0,0 +1,79 @@
+import {
+	Statement,
+	StatementSubscription,
+	isOptionFn,
+} from "delib-npm";
+import  { FC, useEffect } from "react";
+
+
+// Custom components
+import RoomsAdmin from "./components/roomsAdmin/RoomsAdmin";
+import ChooseRoom from "./components/choose/ChooseRoom";
+import InRoom from "./components/inRoom/InRoom";
+
+// database
+import {
+	listenToParticipants,
+	listenToRoomsSettings,
+} from "@/controllers/db/rooms/getRooms";
+import { isAdmin } from "@/controllers/general/helpers";
+import { useSelector } from "react-redux";
+import { roomSettingsByStatementId } from "@/model/rooms/roomsSlice";
+
+
+interface RoomsProps {
+  statement: Statement;
+  subStatements: Statement[];
+  statementSubscription: StatementSubscription | undefined;
+}
+
+const Rooms: FC<RoomsProps> = ({
+	statement,
+	subStatements,
+	statementSubscription,
+}) => {
+	const roomSettings = useSelector(
+		roomSettingsByStatementId(statement.statementId)
+	);
+	const isEditingRoom = roomSettings?.isEdit !== undefined ? roomSettings?.isEdit : true;
+  
+
+	useEffect(() => {
+		const unsubscribe = listenToParticipants(statement);
+		const unsubSettings = listenToRoomsSettings(statement.statementId);
+
+		return () => {
+			unsubscribe();
+			unsubSettings();
+		};
+	}, []);
+
+	const topics = subStatements.filter((subStatement: Statement) =>
+		isOptionFn(subStatement)
+	);
+
+	const _isAdmin = isAdmin(statementSubscription?.role);
+
+	return (
+		<div className="page__main">
+			{switchRoomScreens(isEditingRoom, topics, statement)}
+
+			{_isAdmin ? <RoomsAdmin statement={statement} /> : null}
+		</div>
+	);
+};
+
+export default Rooms;
+
+function switchRoomScreens(
+	isEditingRoom: boolean,
+	topics: Statement[],
+	statement: Statement
+) {
+
+	if (isEditingRoom) {
+		return <ChooseRoom topics={topics} statement={statement} />;
+	} else {
+		return <InRoom topic={statement} />;
+	}
+}
diff --git a/src/view/pages/statement/components/rooms/StatementRooms.tsx b/src/view/pages/statement/components/rooms/StatementRooms.tsx
deleted file mode 100644
index ada577153..000000000
--- a/src/view/pages/statement/components/rooms/StatementRooms.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { RoomsStateSelection, Statement, isOptionFn } from "delib-npm";
-import React, { FC, useState, useEffect } from "react";
-import CreateStatementModal from "../createStatementModal/CreateStatementModal";
-import { listenToAllRoomsRequest } from "@/controllers/db/rooms/getRooms";
-import { useAppDispatch } from "@/controllers/hooks/reduxHooks";
-
-import RoomsAdmin from "./components/roomsAdmin/RoomsAdmin";
-import ChooseRoom from "./components/choose/ChooseRoom";
-
-// import InRoom from "./user/inRoom/InRoom";
-import { store } from "@/model/store";
-import { enterRoomsDB } from "@/controllers/db/rooms/setRooms";
-import InRoom from "./components/inRoom/InRoom";
-
-interface StatementRoomsProps {
-  statement: Statement;
-  subStatements: Statement[];
-}
-
-const StatementRooms: FC<StatementRoomsProps> = ({
-	statement,
-	subStatements,
-}) => {
-	const dispatch = useAppDispatch();
-
-	const [showModal, setShowModal] = useState(false);
-
-	useEffect(() => {
-		enterRoomsDB(statement);
-
-		const unsubscribe = listenToAllRoomsRequest(statement, dispatch);
-
-		return unsubscribe;
-	}, []);
-
-	const __subStatements = subStatements.filter((subStatement: Statement) =>
-		isOptionFn(subStatement)
-	);
-
-	const isAdmin = store.getState().user.user?.uid === statement.creatorId;
-
-	return (
-		<div className="page__main">
-      
-			{switchRoomScreens(
-				statement.roomsState,
-				__subStatements,
-				statement,
-				setShowModal
-			)}
-
-			{isAdmin ? <RoomsAdmin statement={statement} /> : null}
-
-			{showModal ? (
-				<CreateStatementModal
-					parentStatement={statement}
-					isOption={true}
-					setShowModal={setShowModal}
-				/>
-			) : null}
-   
-		</div>
-	);
-};
-
-export default StatementRooms;
-
-function switchRoomScreens(
-	roomState: RoomsStateSelection | undefined,
-	subStatements: Statement[],
-	statement: Statement,
-	setShowModal: React.Dispatch<React.SetStateAction<boolean>>
-) {
-	switch (roomState) {
-	case RoomsStateSelection.chooseRoom:
-		return (
-			<ChooseRoom subStatements={subStatements} setShowModal={setShowModal} />
-		);
-	case RoomsStateSelection.inRoom:
-		return <InRoom statement={statement} />;
-
-	default:
-		return (
-			<ChooseRoom subStatements={subStatements} setShowModal={setShowModal} />
-		);
-	}
-}
diff --git a/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrange.scss b/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrange.scss
deleted file mode 100644
index 31044685a..000000000
--- a/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrange.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-.admin-arrange {
-    .room-wrapper {
-        display: grid;
-        grid-template-columns: repeat(2, 1fr);
-        padding: 0.5rem;
-        grid-auto-rows: max-content;
-        gap: 0.5rem;
-        overflow-y: hidden;
-
-        /* on mobile */
-
-        @media only screen and (max-width: 600px) {
-            grid-template-columns: repeat(1, 1fr);
-        }
-    }
-}
diff --git a/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrange.tsx b/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrange.tsx
deleted file mode 100644
index 4846e2946..000000000
--- a/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrange.tsx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { FC, useState } from "react";
-
-// Custom components
-import RoomParticipantBadge from "../roomParticipantBadge/RoomParticipantBadge";
-
-// Redux
-import { useAppSelector } from "@/controllers/hooks/reduxHooks";
-
-// Third party libraries
-import { RoomDivied, RoomsStateSelection, Statement } from "delib-npm";
-
-// Statements functions
-import {
-	setParticipantInRoomToDB,
-	setRoomsStateToDB,
-} from "@/controllers/db/rooms/setRooms";
-import { setRoomSizeInStatementDB } from "@/controllers/db/statements/setStatements";
-
-import { divideIntoTopics } from "./AdminArrangeCont";
-import { participantsSelector } from "@/model/rooms/roomsSlice";
-import Room from "../room/Room";
-import {
-	initializeTimersDB,
-	updateTimersSettingDB,
-} from "@/controllers/db/timer/setTimer";
-import { selectStatementSettingTimers } from "@/model/timers/timersSlice";
-import { useLanguage } from "@/controllers/hooks/useLanguages";
-import "./AdminArrange.scss";
-
-interface Props {
-    statement: Statement;
-    setRooms: boolean;
-    setSetRooms: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-export interface ParticipantInRoom {
-    uid: string;
-    room: number;
-    roomNumber?: number;
-    topic?: Statement;
-    statementId?: string;
-}
-
-const AdminSeeAllGroups: FC<Props> = ({ statement, setRooms, setSetRooms }) => {
-	const { t } = useLanguage();
-
-	const roomsState = statement.roomsState || RoomsStateSelection.chooseRoom;
-	const participants = useAppSelector(
-		participantsSelector(statement.statementId),
-	);
-	const timers = useAppSelector(
-		selectStatementSettingTimers(statement.statementId),
-	);
-
-	const [maxParticipantsPerRoom, setMaxParticipantsPerRoom] =
-        useState<number>(statement.roomSize || 5);
-
-	const { rooms: roomsAdmin } = divideIntoTopics(
-		participants,
-		maxParticipantsPerRoom,
-	);
-
-	async function handleDivideIntoRooms() {
-		try {
-			const { rooms } = divideIntoTopics(
-				participants,
-				maxParticipantsPerRoom,
-			);
-
-			rooms.forEach((room) => {
-				room.participants.forEach((participant) => {
-					const participantInRoom: ParticipantInRoom = {
-						uid: participant.participant.uid,
-						room: room.roomNumber,
-						roomNumber: room.roomNumber,
-						topic: room.statement,
-						statementId: room.statement.statementId,
-					};
-					setParticipantInRoomToDB(participantInRoom);
-				});
-			});
-
-			//set timers settings to db
-			await updateTimersSettingDB(timers);
-
-			//set rooms timers
-			initializeTimersDB({
-				statementId: statement.statementId,
-				rooms,
-			});
-
-			const roomsState = setRooms
-				? RoomsStateSelection.chooseRoom
-				: RoomsStateSelection.inRoom;
-			setSetRooms((state) => !state);
-
-			setRoomsStateToDB(statement, roomsState);
-		} catch (error) {
-			console.error(error);
-		}
-	}
-
-	function handleRangeChange(ev: React.ChangeEvent<HTMLInputElement>) {
-		setMaxParticipantsPerRoom(Number(ev.target.value));
-	}
-
-	function handleRangeBlur() {
-		setMaxParticipantsPerRoom(maxParticipantsPerRoom);
-		setRoomSizeInStatementDB(statement, maxParticipantsPerRoom);
-	}
-
-	return (
-		<div className="admin-arrange">
-			<div>
-				<div className="btns">
-					{roomsState === RoomsStateSelection.chooseRoom ? (
-						<button
-							className="btn btn--agree btn--large"
-							onClick={handleDivideIntoRooms}
-						>
-							{t("Divide into rooms")}
-						</button>
-					) : (
-						<button
-							className="btn btn--cancel btn--large"
-							onClick={handleDivideIntoRooms}
-						>
-							{t("Cancellation of division")}
-						</button>
-					)}
-				</div>
-				{roomsState === RoomsStateSelection.chooseRoom ? (
-					<div>
-						<h3>{t("Participants")}</h3>
-						<p>
-							{
-								(t(
-									"Maximum number of participants in the room ",
-								),
-								maxParticipantsPerRoom)
-							}
-						</p>
-
-						<div
-							className="btns"
-							style={{
-								padding: "1.5rem",
-								boxSizing: "border-box",
-							}}
-						>
-							<input
-								className="range"
-								type="range"
-								name="numberOfResults"
-								value={maxParticipantsPerRoom || 7}
-								min="2"
-								max="30"
-								onChange={handleRangeChange}
-								onMouseUp={handleRangeBlur}
-								onTouchEnd={handleRangeBlur}
-							/>
-						</div>
-						<br />
-						<br />
-						<div className="badge__wrapper">
-							{participants.map((request) => (
-								<RoomParticipantBadge
-									key={request.participant.uid}
-									participant={request.participant}
-								/>
-							))}
-						</div>
-					</div>
-				) : (
-					<>
-						<h3>{t("Division into rooms")}</h3>
-						<div className="room-wrapper">
-							{roomsAdmin.map((room: RoomDivied) => {
-								return (
-									<Room
-										key={room.roomNumber}
-										room={room}
-										maxParticipantsPerRoom={
-											maxParticipantsPerRoom
-										}
-									/>
-								);
-							})}
-						</div>
-					</>
-				)}
-			</div>
-		</div>
-	);
-};
-
-export default AdminSeeAllGroups;
diff --git a/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrangeCont.ts b/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrangeCont.ts
deleted file mode 100644
index 74acc624b..000000000
--- a/src/view/pages/statement/components/rooms/components/adminArrange/AdminArrangeCont.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Participant, RoomDivied, Statement } from "delib-npm";
-
-interface Topic {
-    [key: string]: {
-        statementId: string;
-        statement: Statement | string | undefined;
-        participants: Participant[];
-        rooms?: Array<Array<Participant>>;
-    };
-}
-
-export function divideIntoTopics(
-	participants: Participant[],
-	maxPerRoom = 7,
-): { rooms: RoomDivied[]; topicsParticipants: Topic } {
-	try {
-	
-		const topicsParticipants: Topic = {};
-
-		//build topicsParticipantsObject
-		participants.forEach((participant) => {
-			try {
-				if (!participant.statementId) {
-					topicsParticipants["general"] = {
-						statementId: "general",
-						statement: "General",
-						participants: [participant],
-					};
-				} else if (!(participant.statementId in topicsParticipants)) {
-					topicsParticipants[participant.statementId] = {
-						statementId: participant.statementId,
-						statement: participant.statement,
-						participants: [participant],
-					};
-				} else {
-					topicsParticipants[
-						participant.statementId
-					].participants.push(participant);
-				}
-			} catch (error) {
-				console.error(error);
-
-				return undefined;
-			}
-		});
-
-		//divide participents according to topics and rooms
-		// let rooms: Array<ParticipantInRoom> = [];
-		for (const topic in topicsParticipants) {
-			const patricipantsInTopic = topicsParticipants[topic].participants;
-			topicsParticipants[topic].rooms =
-                divideParticipantsIntoRoomsRandomly(
-                	patricipantsInTopic,
-                	maxPerRoom,
-                );
-		}
-
-		const rooms = divideIntoGeneralRooms(topicsParticipants);
-
-		return { rooms, topicsParticipants };
-	} catch (error) {
-		console.error(error);
-
-		return { rooms: [], topicsParticipants: {} };
-	}
-}
-
-function divideParticipantsIntoRoomsRandomly(
-	participants: Participant[],
-	maxPerRoom: number,
-): Array<Array<Participant>> {
-	try {
-		const numberOfRooms = Math.ceil(participants.length / maxPerRoom);
-
-		//randomize participants
-		participants.sort(() => Math.random() - 0.5);
-
-		let roomNumber = 0;
-
-		const rooms: Array<Array<Participant>> = [[]];
-		participants.forEach((participant: Participant) => {
-			if (!rooms[roomNumber]) rooms[roomNumber] = [];
-			rooms[roomNumber].push(participant);
-			if (roomNumber < numberOfRooms - 1) roomNumber++;
-			else roomNumber = 0;
-		});
-
-		return rooms;
-	} catch (error) {
-		console.error(error);
-
-		return [];
-	}
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function divideIntoGeneralRooms(topics: any): Array<RoomDivied> {
-	try {
-		let roomNumber = 1;
-		const rooms: Array<RoomDivied> = [];
-		for (const topic in topics) {
-			const topicRooms = topics[topic].rooms;
-			topicRooms.forEach((participants: Array<Participant>) => {
-				rooms.push({
-					participants,
-					roomNumber,
-					statement: topics[topic].statement,
-				});
-				roomNumber++;
-			});
-		}
-
-		return rooms;
-	} catch (error) {
-		console.error(error);
-
-		return [];
-	}
-}
diff --git a/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.module.scss b/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.module.scss
index f4b42aa3b..e8b48a06e 100644
--- a/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.module.scss
+++ b/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.module.scss
@@ -1,19 +1,4 @@
-.fav{
-    background-color: var(--blue);
-    color:white;
-    height:13rem;
-    width:3rem;   
-    border-radius: 6rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position:relative;
-    right:50%;
-    transform: translateX(50%);
-    cursor:pointer;
-    transition: all 0.3s;
-    box-shadow: 4px 4px 10px rgba(0,0,0,0.2);
-    &:hover{
-        background-color: var(--blue-dark);
-    }
+.wrapper{
+    padding: 1rem;
+    margin: auto;
 }
\ No newline at end of file
diff --git a/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.tsx b/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.tsx
index cfd957ef0..43839e6db 100644
--- a/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.tsx
+++ b/src/view/pages/statement/components/rooms/components/choose/ChooseRoom.tsx
@@ -1,4 +1,4 @@
-import { FC } from "react";
+import { FC, useState } from "react";
 
 // Third party
 import { Statement } from "delib-npm";
@@ -6,40 +6,47 @@ import { Statement } from "delib-npm";
 // Custom components
 import RoomChoosingCard from "./roomChoosingCard/RoomChoosingCard";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
-
 import styles from "./ChooseRoom.module.scss";
 
+import Button from "@/view/components/buttons/button/Button";
+
+import CreateStatementModal from "../../../createStatementModal/CreateStatementModal";
+
+
 interface Props {
-  subStatements: Statement[];
-  setShowModal: React.Dispatch<React.SetStateAction<boolean>>;
+  statement: Statement;
+  topics: Statement[];
 }
 
-const ChooseRoom: FC<Props> = ({ subStatements, setShowModal }) => {
+const ChooseRoom: FC<Props> = ({ statement, topics }) => {
 	const { t } = useLanguage();
+	const [showModal, setShowModal] = useState(false);
 
 	return (
-		<>
-			<h2>{t("Division into rooms")}</h2>
+		<div className={`${styles.wrapper} wrapper`}>
+    
+			<div className="btns">
+				<Button text={t("Create new room")} onClick={() => handleAddRoom()} />
+			</div>
 			<div className="roomsCards__wrapper">
-				{subStatements.map((subStatement: Statement) => {
-					return (
-						<RoomChoosingCard
-							key={subStatement.statementId}
-							statement={subStatement}
-						/>
-					);
+				{topics.map((topic: Statement) => {
+					return <RoomChoosingCard key={topic.statementId} topic={topic} />;
 				})}
-				<div
-					className={styles.fav}
-					style={{ height: "3rem" }}
-					onClick={() => setShowModal(true)}
-				>
-          +
-				</div>
+       
 			</div>
-	  
-		</>
+			{showModal && (
+				<CreateStatementModal
+					parentStatement={statement}
+					isOption={true}
+					setShowModal={setShowModal}
+				/>
+			)}
+		</div>
 	);
+
+	function handleAddRoom() {
+		setShowModal(true);
+	}
 };
 
 export default ChooseRoom;
diff --git a/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.module.scss b/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.module.scss
index 7fa95e158..5299ee6b8 100644
--- a/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.module.scss
+++ b/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.module.scss
@@ -14,7 +14,18 @@
     transform: scale(0.9);
     border: 1px solid rgba(0, 0, 0, 0.2);
 
-    &__fill {
+    .title{
+        font-size: 1.1rem;
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+    }
+    .amount{
+        font-size: 1.2rem;
+        font-weight: 500;
+        margin-bottom: 0.5rem;
+    }
+
+    .fill {
         transition: all 100ms ease-in-out;
         background-color: rgba(2, 197, 2, 0.294);
         position: absolute;
diff --git a/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.tsx b/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.tsx
index 7fc567ff2..5b0cca639 100644
--- a/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.tsx
+++ b/src/view/pages/statement/components/rooms/components/choose/roomChoosingCard/RoomChoosingCard.tsx
@@ -1,89 +1,43 @@
-import { Participant, Statement } from "delib-npm";
+import { Statement } from "delib-npm";
 import { FC } from "react";
-import Text from "@/view/components/text/Text";
-import { setRoomJoinToDB } from "@/controllers/db/rooms/setRooms";
-import { useAppSelector } from "@/controllers/hooks/reduxHooks";
-import { statementSelector } from "@/model/statements/statementsSlice";
-import {
-	topicParticipantsSelector,
-	userSelectedTopicSelector,
-} from "@/model/rooms/roomsSlice";
 import styles from "./RoomChoosingCard.module.scss";
+import { useSelector } from "react-redux";
+import { participantsByTopicId, roomSettingsByStatementId } from "@/model/rooms/roomsSlice";
+import { userSelector } from "@/model/users/userSlice";
+import {
+	deleteParticipantToDB,
+	setParticipantToDB,
+} from "@/controllers/db/rooms/setRooms";
 
 interface Props {
-    statement: Statement;
+  topic: Statement;
 }
-
-const RoomChoosingCard: FC<Props> = ({ statement }) => {
-	const request = useAppSelector(
-		userSelectedTopicSelector(statement.parentId),
-	);
-	const roomSize =
-        useAppSelector(statementSelector(statement.parentId))?.roomSize || 5;
-	const requestStatementId = request?.statement?.statementId;
-
-	const topicJoiners = useAppSelector(
-		topicParticipantsSelector(statement.statementId),
-	) as Participant[];
-
-	function handleAskToJoinRoom() {
-		setRoomJoinToDB(statement);
+const RoomChoosingCard: FC<Props> = ({ topic }) => {
+	const user = useSelector(userSelector);
+	const participants = useSelector(participantsByTopicId(topic.statementId));
+	const participant = participants.find((prt) => prt.user.uid === user?.uid);
+	const roomSettings = useSelector(roomSettingsByStatementId(topic.parentId));
+	const participantsPerRoom = roomSettings?.participantsPerRoom || 7;
+
+	function handleJoinRoom() {
+		if (participant) {
+      
+			deleteParticipantToDB(topic);
+		} else {
+      
+			setParticipantToDB(topic);
+		}
 	}
-
-	const fill = fillHeight(topicJoiners, roomSize);
-	const borderRadius = fill > 0.9 ? `1rem` : "0px 0px 1rem 1rem";
+	let fill = (participants.length / participantsPerRoom) * 100;
+	if(fill > 100) fill = 100;
 
 	return (
-		<div
-			className={
-				requestStatementId === statement.statementId
-					? `${styles.roomCard} ${styles["roomCard--selected"]}`
-					: `${styles.roomCard}`
-			}
-			onClick={handleAskToJoinRoom}
-		>
-			<div className={styles.roomCard__title}>
-				<Text statement={statement.statement} />
-			</div>
-			<div className={styles.roomCard__count}>
-				<span>{topicJoiners ? topicJoiners.length : 0}</span>/
-				{roomSize || 7}
-			</div>
-			<div
-				className={styles.roomCard__fill}
-				style={{
-					height: `${fill * 100}%`,
-					borderRadius,
-					backgroundColor: fillColor(fill),
-				}}
-			></div>
+		<div className={`${styles.roomCard} ${participant && styles["roomCard--selected"]}`} onClick={handleJoinRoom}>
+			<div className={styles.title}>{topic.statement}</div>
+			<div className={styles.amount}>{participants.length}/{participantsPerRoom}</div>
+			<div className={styles.fill} style={{height:`${fill}%`, borderRadius:fill>90?"1rem":"0px 0px 1rem 1rem"}}></div>
 		</div>
 	);
 };
 
 export default RoomChoosingCard;
-
-function fillHeight(topicJoiners: Participant[], maxRoomJoiners = 5) {
-	try {
-		if (!topicJoiners) return 0;
-
-		const joinersCount = topicJoiners.length;
-		const fill = joinersCount / maxRoomJoiners;
-		if (fill > 1) return 1;
-
-		return fill;
-	} catch (error) {
-		console.error(error);
-
-		return 0;
-	}
-}
-
-function fillColor(fill: number) {
-	if (fill < 0.25) return "#c502024b";
-	if (fill < 0.5) return "#c595024b";
-	if (fill < 0.75) return "#c4c5024b";
-	if (fill >= 1) return "rgba(2, 197, 2, 0.294)";
-
-	return "gray";
-}
diff --git a/src/view/pages/statement/components/rooms/components/inRoom/InRoom.module.scss b/src/view/pages/statement/components/rooms/components/inRoom/InRoom.module.scss
new file mode 100644
index 000000000..3a9754b70
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/components/inRoom/InRoom.module.scss
@@ -0,0 +1,51 @@
+.inRoom {
+
+    margin-top: 2rem;
+   max-width: 75ch;
+    margin: 0 auto;
+    width: 100%;
+   
+    padding: 0 1rem;
+    .wrapper{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        gap: 1rem;
+        margin-bottom: 2rem;
+        margin-top: 2rem;
+    }
+
+    .room{
+        color:var(--text-headline);
+        font-weight:var(--wight-medium);
+        font-size: 1.1rem;
+        line-height: 2rem;
+    }
+     .topic{
+        color:var(--text-paragraph);
+        font-weight:var(--wight-medium);
+        font-size: 1.1rem;
+        margin-bottom: 3rem;
+      
+     }
+
+    .image {
+
+        width: 100%;
+        height: 300px;
+        max-height: 30vh;
+        background-repeat: no-repeat;
+        background-size: contain;
+        background-position-x: center;
+        margin-bottom: 2rem;
+    }
+
+    .participants{
+        display: flex;
+        justify-content: start;
+        gap: .2rem;
+        margin-bottom: 2rem;
+        flex-wrap: wrap;
+    }
+}
+
diff --git a/src/view/pages/statement/components/rooms/components/inRoom/InRoom.scss b/src/view/pages/statement/components/rooms/components/inRoom/InRoom.scss
deleted file mode 100644
index 98ca475e8..000000000
--- a/src/view/pages/statement/components/rooms/components/inRoom/InRoom.scss
+++ /dev/null
@@ -1,54 +0,0 @@
-.in-room {
-
-    margin-top: 2rem;
-   max-width: 75ch;
-    margin: 0 auto;
-    width: 100%;
-    min-height: 100vh;
-    padding: 0 1rem;
-
-    .welcome {
-        margin-bottom: 3rem;
-
-        h2 {
-            color: var(--h2Color);
-
-            text-align: inherit;
-        }
-
-
-
-        h3 {
-            color: var(--subTopic);
-            text-align: inherit;
-            margin-top: 1rem;
-        }
-    }
-    .digits{
-        position:absolute;
-        font-size: 2rem;
-        transform: translateY(-50%);
-    }
-
-    .participants {
-        margin: 1rem 0;
-        display: flex;
-        gap: 0.5rem;
-        align-items: center;
-
-        .name {
-            font-size: .85rem;
-        }
-    }
-
-    .image {
-        background-image: url('../../../../../../../assets/images/teaching.png');
-        width: 100%;
-        min-height: 300px;
-        background-repeat: no-repeat;
-        background-size: contain;
-        background-position-x: center;
-        margin-bottom: 2rem;
-    }
-}
-
diff --git a/src/view/pages/statement/components/rooms/components/inRoom/InRoom.tsx b/src/view/pages/statement/components/rooms/components/inRoom/InRoom.tsx
index 65147341c..bf4be4150 100644
--- a/src/view/pages/statement/components/rooms/components/inRoom/InRoom.tsx
+++ b/src/view/pages/statement/components/rooms/components/inRoom/InRoom.tsx
@@ -1,89 +1,68 @@
-import { FC, useEffect } from "react";
-
-// // Third Party Libraries
-import { Participant, RoomTimer, Statement } from "delib-npm";
+import { FC } from "react";
+import { Statement } from "delib-npm";
+import {
+	participantByIdSelector,
+	participantsByStatementIdAndRoomNumber,
+} from "@/model/rooms/roomsSlice";
 
 // Redux
-import {
-	useAppDispatch,
-	useAppSelector,
-} from "@/controllers/hooks/reduxHooks";
-import { participantsInRoomSelector, userSelectedTopicSelector } from "@/model/rooms/roomsSlice";
+import { useSelector } from "react-redux";
+import { userSelector } from "@/model/users/userSlice";
 
 // Styles
-import "./InRoom.scss";
-import participantsIcon from '@/assets/icons/participants.svg'
+import styles from "./InRoom.module.scss";
+import RoomImage from "@/assets/images/roomImage.png";
+import { useLanguage } from "@/controllers/hooks/useLanguages";
+import RoomParticipantBadge from "../roomParticipantBadge/RoomParticipantBadge";
 
 // Custom Components
-import RoomTimers from "../roomTimer/Timers";
-import { listenToRoomTimers } from "@/controllers/db/timer/getTimer";
-import { Unsubscribe } from "firebase/firestore";
-import { selectRoomTimers } from "@/model/timers/timersSlice";
-import { useLanguage } from "@/controllers/hooks/useLanguages";
-import { getFirstName, getTitle } from "@/controllers/general/helpers";
 
 interface Props {
-  statement: Statement;
+  topic: Statement;
 }
 
-const InRoom: FC<Props> = ({ statement }) => {
-	const { t } = useLanguage();
-
-	const userTopic: Participant | undefined = useAppSelector(
-		userSelectedTopicSelector(statement.statementId)
-	);
-	const participants = useAppSelector(participantsInRoomSelector(userTopic?.roomNumber, statement.statementId)) as Participant[];
- 
-
-	const timers: RoomTimer[] = useAppSelector(selectRoomTimers);
-	
-	const dispatch = useAppDispatch();
-
-	useEffect(() => {
-		// eslint-disable-next-line @typescript-eslint/no-empty-function
-		let unsubscribe: Unsubscribe = () => {};
-		if (userTopic?.roomNumber) {
-			unsubscribe = listenToRoomTimers(
-				statement.statementId,
-				userTopic?.roomNumber,
-				dispatch
-			);
-		}
+const InRoom: FC<Props> = ({ topic }) => {
+	try {
+		const user = useSelector(userSelector);
+		const {t} = useLanguage();
 
-		return () => {
-			unsubscribe();
-		};
-	}, [userTopic?.roomNumber]);
+		if (!user) return null;
+		const participantInRoom = useSelector(participantByIdSelector(user.uid));
+		const roomNumber = participantInRoom?.roomNumber || 0;
+		const participants = useSelector(
+			participantsByStatementIdAndRoomNumber(topic.statementId, roomNumber)
+		);
 
-	try {
 		return (
-			<div className="in-room">
-				{userTopic && userTopic.statement ? (
-					<div className="welcome">
-						<h2>
-							{t("Welcome to room")} {userTopic?.roomNumber}
-						</h2>
-						<h3>{t("Room's Topic")}: {getTitle(userTopic?.statement)}</h3>
-						<div className="participants">
-							<img src={participantsIcon} alt="participants" />
-							<span>{participants.length} :</span>
-              
-							{participants.map((participant) => (
-								<span className="name" key={participant.participant.uid}>{getFirstName(participant.participant.displayName)}</span>
-							))}
-             
-						</div>
+			<div className={styles.inRoom}>
+				<div className={styles.wrapper}>
+					<div className={styles.room}>{t("Welcome to room")} {roomNumber}</div>
+					<div className={styles.topic}>
+						{t("Topic")}: {participantInRoom?.statement.statement}
+					</div>
+					<div
+						className={styles.image}
+						style={{ backgroundImage: `url(${RoomImage})` }}
+					></div>
+					<div>{t("Participants")}:</div>
+					<div className={styles.participants}>
+           
+						{participants.map((participant) => {
+							return (
+								<RoomParticipantBadge
+									key={participant.user.uid}
+									participant={participant}
+								/>
+							);
+						})}
 					</div>
-				) : (
-					<h2>{t("No Topic Chosen by You")}</h2>
-				)}
-				<div className="image"></div>
-				<RoomTimers roomNumber={userTopic?.roomNumber} timers={timers} />
+				</div>
 			</div>
 		);
-		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	} catch (error: any) {
-		return <div>error: {error.message}</div>;
+	} catch (error) {
+		console.error(error);
+		
+		return null;
 	}
 };
 
diff --git a/src/view/pages/statement/components/rooms/components/room/Room.module.scss b/src/view/pages/statement/components/rooms/components/room/Room.module.scss
new file mode 100644
index 000000000..8190d5e32
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/components/room/Room.module.scss
@@ -0,0 +1,22 @@
+.room {
+    border: 1px solid black;
+    padding: 1rem;
+    border-radius: 0.6rem;
+    word-break: break-all;
+
+    .topic {
+        font-size: 1rem;
+        font-weight:400;
+        color:var(--text-paragraph);
+    }
+    &Number{
+        font-size: 1rem;
+        font-weight: 400;
+    }
+    .participants{
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        margin-top: 1rem;
+    }
+}
diff --git a/src/view/pages/statement/components/rooms/components/room/Room.scss b/src/view/pages/statement/components/rooms/components/room/Room.scss
deleted file mode 100644
index 31c2ed6ca..000000000
--- a/src/view/pages/statement/components/rooms/components/room/Room.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.room {
-    border: 1px solid black;
-    padding: 1rem;
-    border-radius: 0.6rem;
-
-    h4 {
-        color: gray;
-        font-size: 1.3rem;
-        font-weight: bold;
-        margin: 0px 0rem 0.6rem 0px;
-    }
-
-    .room-badges {
-        display: flex;
-        gap: 0.5rem;
-        margin-bottom: 0.5rem;
-        flex-wrap: wrap;
-    }
-}
diff --git a/src/view/pages/statement/components/rooms/components/room/Room.tsx b/src/view/pages/statement/components/rooms/components/room/Room.tsx
index 047bd460a..203640017 100644
--- a/src/view/pages/statement/components/rooms/components/room/Room.tsx
+++ b/src/view/pages/statement/components/rooms/components/room/Room.tsx
@@ -1,77 +1,33 @@
 import { FC } from "react";
-import Text from "../../../../../../components/text/Text";
-import { Participant, RoomDivied } from "delib-npm";
+
+import { ParticipantInRoom, Statement } from "delib-npm";
+
+// import { useLanguage } from "@/controllers/hooks/useLanguages";
+import styles from "./Room.module.scss";
 import RoomParticipantBadge from "../roomParticipantBadge/RoomParticipantBadge";
-import { setRoomJoinToDB } from "@/controllers/db/rooms/setRooms";
-import { store } from "@/model/store";
-import { useLanguage } from "@/controllers/hooks/useLanguages";
-import "./Room.scss";
 
 interface Props {
-    room: RoomDivied;
-    maxParticipantsPerRoom: number;
+  participants: ParticipantInRoom[];
+  roomNumber: number;
+  topic: Statement;
 }
 
-const Room: FC<Props> = ({ room, maxParticipantsPerRoom }) => {
-	const { t } = useLanguage();
-
-	function handleMoveParticipantToRoom(ev: React.DragEvent<HTMLDivElement>) {
-		try {
-			ev.preventDefault();
-
-			const draggedParticipantId = ev.dataTransfer.getData("text/plain");
-
-			const participant = store
-				.getState()
-				.rooms.askToJoinRooms.find(
-					(participant: Participant) =>
-						participant.participant.uid === draggedParticipantId,
-				);
-
-			if (!participant) throw new Error("participant not found");
-
-			if (participant.roomNumber === room.roomNumber) return;
-
-			if (room.participants.length >= maxParticipantsPerRoom) {
-				alert("room is full");
-
-				return;
-			}
-			setRoomJoinToDB(
-				room.statement,
-				participant.participant,
-				room.roomNumber,
-			);
-		} catch (error) {
-			console.error(error);
-		}
-	}
+const Room: FC<Props> = ({ participants, roomNumber, topic }) => {
+	// const { t } = useLanguage();
 
 	return (
-		<div
-			className="room"
-			onDragEnter={(ev) => {
-				ev.preventDefault();
-			}}
-			onDragLeave={(ev) => {
-				ev.preventDefault();
-			}}
-			onDragOver={(ev) => {
-				ev.preventDefault();
-			}}
-			onDrop={handleMoveParticipantToRoom}
-		>
-			<h4>
-				{(t("Room"), room.roomNumber)} -{" "}
-				<Text statement={room.statement.statement}  />
-			</h4>
-			<div className="room-badges">
-				{room.participants.map((participant: Participant) => (
-					<RoomParticipantBadge
-						key={participant.participant.uid}
-						participant={participant.participant}
-					/>
-				))}
+		<div className={styles.room}>
+			<div className={styles.roomNumber}>room: {roomNumber}</div>
+			<div className={styles.topic}>topic: {topic.statement}</div>
+			<div className={styles.participants}>
+				{participants.map((participant) => {
+					return (
+						<RoomParticipantBadge
+							key={participant.user.uid}
+							participant={participant}
+						/>
+					);
+				})}
 			</div>
 		</div>
 	);
diff --git a/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.scss b/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.scss
index d0cbb3b9d..e2f1d86ad 100644
--- a/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.scss
+++ b/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.scss
@@ -3,15 +3,18 @@
     color: #7f7f7f;
 
     width: fit-content;
-    border-radius: 30px;
+    border-radius: 4rem;
     display: flex;
     align-items: center;
     height: 1.6rem;
+    padding: 0 0px 0px 4px;
+    gap:0px;
+   
 
     .badge-text {
         padding: 5px 10px 5px 5px;
-        font-size: 1rem;
-        font-weight: 500;
+        font-size: .8rem;
+        font-weight: 300;
     }
 
     .badge-image {
@@ -23,5 +26,6 @@
         background-size: cover;
         background-repeat: no-repeat;
         background-position: center;
+        transform: translateX(5px);
     }
 }
diff --git a/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.tsx b/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.tsx
index bbac1ca41..e745c8151 100644
--- a/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.tsx
+++ b/src/view/pages/statement/components/rooms/components/roomParticipantBadge/RoomParticipantBadge.tsx
@@ -1,8 +1,9 @@
-import { User } from "delib-npm";
+import { ParticipantInRoom } from "delib-npm";
 import { FC } from "react";
+import "./RoomParticipantBadge.scss";
 
 interface Props {
-    participant: User;
+    participant: ParticipantInRoom;
 }
 
 const RoomParticipantBadge: FC<Props> = ({ participant }) => {
@@ -11,14 +12,14 @@ const RoomParticipantBadge: FC<Props> = ({ participant }) => {
 			className="room-participant-badge draggable"
 			draggable={true}
 			onDragStart={(e) => {
-				e.dataTransfer.setData("text/plain", participant.uid);
+				e.dataTransfer.setData("text/plain", participant.user.uid);
 			}}
 		>
-			<div className="badge-text">{participant.displayName}</div>
-			{participant.photoURL ? (
+			<div className="badge-text">{participant.user.displayName}</div>
+			{participant.user.photoURL ? (
 				<div
 					className="badge-image"
-					style={{ backgroundImage: `url(${participant.photoURL})` }}
+					style={{ backgroundImage: `url(${participant.user.photoURL})` }}
 				/>
 			) : null}
 		</div>
diff --git a/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.module.scss b/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.module.scss
new file mode 100644
index 000000000..147cc1ab9
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.module.scss
@@ -0,0 +1,31 @@
+.participantsPerRoom{
+    display: flex;
+    justify-content: center;
+    gap: 1rem;
+    font-size: 1.5rem;
+
+ .title{
+        font-size: 1.1rem;
+        font-weight: 300;
+        margin-bottom: 0.5rem;
+    }
+
+    input{
+        width: 5rem;
+        text-align: center;
+        font-size: 1.5rem;
+    }
+
+    .add{
+        background-color: var(--btn-tertiary);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 2rem;
+        border-radius: (var(--radius));
+    }
+    
+}
+.btns{
+    margin: .6rem 0rem;
+}
diff --git a/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.scss b/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.scss
deleted file mode 100644
index b2104c557..000000000
--- a/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.rooms-admin {
-    padding-bottom: 100px;
-    width: 100%;
-
-    .title {
-        color: gray;
-        font-weight: 500;
-        text-align: center;
-        border-bottom: 1px solid gray;
-        width: 100%;
-        padding: 0.5rem;
-        font-size: 1.5rem;
-        margin-top: 2rem;
-        margin-bottom: 2rem;
-    }
-
-    .wrapper {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-    }
-
-    .nav {
-        display: flex;
-        justify-content: center;
-        gap: 1rem;
-        position: sticky;
-        width: 100%;
-        bottom: 0px;
-        left: 0px;
-        max-width: 75ch;
-        margin: auto;
-    }
-
-    .item {
-        background-color: white;
-        color: gray;
-        flex: 1;
-        border-radius: 1rem;
-        text-align: center;
-        padding: 10px;
-        cursor: pointer;
-        transition: all 0.3s ease-in-out;
-        box-sizing: border-box;
-    }
-
-    .item__selected {
-        font-weight: 700;
-        background-color: white;
-        border-radius: 1rem;
-        border: 2px solid var(--accent);
-        color: var(--accent);
-        flex: 1;
-        text-align: center;
-        padding: 10px;
-        cursor: pointer;
-        transition: all 0.3s ease-in-out;
-        box-sizing: border-box;
-    }
-}
diff --git a/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.tsx b/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.tsx
index 2232313f6..b4cc7cd5c 100644
--- a/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.tsx
+++ b/src/view/pages/statement/components/rooms/components/roomsAdmin/RoomsAdmin.tsx
@@ -1,34 +1,55 @@
 import { Statement } from "delib-npm";
-import { FC, useState } from "react";
-import AdminArrange from "../adminArrange/AdminArrange";
-import SetTimers from "../setTimers/SetTimers";
+import { FC } from "react";
+
 import { useLanguage } from "@/controllers/hooks/useLanguages";
-import "./RoomsAdmin.scss";
+
+import { setNewRoomSettingsToDB } from "@/controllers/db/rooms/setRooms";
+import {
+	participantsByStatementId,
+	roomSettingsByStatementId,
+} from "@/model/rooms/roomsSlice";
+import { useSelector } from "react-redux";
+import { statementSubsSelector } from "@/model/statements/statementsSlice";
+import RoomsDivision from "./roomsDivision/RoomsDivision";
+import RoomsView from "./roomsView/RoomsView";
 
 interface Props {
-    statement: Statement;
+  statement: Statement;
 }
 
 const RoomsAdmin: FC<Props> = ({ statement }) => {
+	const participants = useSelector(
+		participantsByStatementId(statement.statementId)
+	);
+
+	const topics = useSelector(statementSubsSelector(statement.statementId));
+
 	const { t } = useLanguage();
 
-	const [setRooms, setSetRooms] = useState<boolean>(
-		statement.roomsState === "chooseRoom" ||
-            statement.roomsState === undefined
-			? false
-			: true,
+	const roomSettings = useSelector(
+		roomSettingsByStatementId(statement.statementId)
 	);
 
+	if (!roomSettings) {
+		setNewRoomSettingsToDB(statement.statementId);
+	}
+
+	const isEditingRoom =
+    roomSettings?.isEdit !== undefined ? roomSettings?.isEdit : true;
+
 	return (
-		<div className="rooms-admin">
-			<p className="title">{t("Management board")}</p>
-
-			<AdminArrange
-				statement={statement}
-				setRooms={setRooms}
-				setSetRooms={setSetRooms}
-			/>
-			{!setRooms && <SetTimers parentStatement={statement} />}
+		<div className="rooms-admin wrapper">
+			<h2 className="title">{t("Management board")}</h2>
+			{isEditingRoom ? (
+				<RoomsDivision
+					statement={statement}
+					roomSettings={roomSettings}
+					topics={topics}
+					participants={participants}
+				/>
+			) : (
+				<RoomsView statement={statement} participants={participants} />
+			)}
 		</div>
 	);
 };
diff --git a/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsDivision/RoomsDivision.tsx b/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsDivision/RoomsDivision.tsx
new file mode 100644
index 000000000..cc4d89ff6
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsDivision/RoomsDivision.tsx
@@ -0,0 +1,89 @@
+import { FC, useEffect, useState } from "react";
+import styles from "../RoomsAdmin.module.scss";
+import {
+	divideParticipantIntoRoomsToDB,
+	setParticipantsPerRoom,
+	toggleRoomEditingInDB,
+} from "@/controllers/db/rooms/setRooms";
+import { ParticipantInRoom, RoomSettings, Statement } from "delib-npm";
+import Button from "@/view/components/buttons/button/Button";
+import { useLanguage } from "@/controllers/hooks/useLanguages";
+import _ from "node_modules/cypress/types/lodash";
+
+interface Props {
+  statement: Statement;
+  roomSettings: RoomSettings | undefined;
+  topics: Statement[];
+  participants: ParticipantInRoom[];
+}
+
+const RoomsDivision: FC<Props> = ({
+	statement,
+	roomSettings,
+	topics,
+	participants,
+}) => {
+	const { t } = useLanguage();
+	const [participantsPerRoom, _setParticipantsPerRoom] = useState(7);
+
+	useEffect(() => {
+		if (roomSettings) {
+			_setParticipantsPerRoom(roomSettings.participantsPerRoom || 7);
+		}
+	}, [roomSettings]);
+
+	function handleToggleEdit() {
+		toggleRoomEditingInDB(statement.statementId);
+
+		divideParticipantIntoRoomsToDB(
+			topics,
+			participants,
+			roomSettings?.participantsPerRoom || 7
+		);
+	}
+
+	function handleSetParticipantsPerRoom(add: number) {
+		_setParticipantsPerRoom(value=>value+add);
+		setParticipantsPerRoom({ statementId: statement.statementId, add });
+	}
+
+	function handleSetParticipantsPerRoomNumber(number: number) {
+		_setParticipantsPerRoom(number);
+		setParticipantsPerRoom({ statementId: statement.statementId, number });
+	}
+	
+	return (
+		<>
+			<div className={`btns ${styles.btns}`}>
+				<Button
+					text={t("Divide participants into rooms")}
+					onClick={handleToggleEdit}
+				/>
+			</div>
+			<div className={styles.title}>{t("Number of participants per room")}</div>
+			<div className={styles.participantsPerRoom}>
+				<div
+					className={styles.add}
+					onClick={() => handleSetParticipantsPerRoom(1)}
+				>
+          +
+				</div>
+				<input
+					type="number"
+					value={participantsPerRoom}
+					onChange={(e) =>
+						handleSetParticipantsPerRoomNumber(e.target.valueAsNumber)
+					}
+				/>
+				<div
+					className={styles.add}
+					onClick={() => handleSetParticipantsPerRoom(-1)}
+				>
+          -
+				</div>
+			</div>
+		</>
+	);
+};
+
+export default RoomsDivision;
diff --git a/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsView/RoomsView.module.scss b/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsView/RoomsView.module.scss
new file mode 100644
index 000000000..53679d624
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsView/RoomsView.module.scss
@@ -0,0 +1,9 @@
+.rooms{
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: start;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    gap:1rem;
+
+}
\ No newline at end of file
diff --git a/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsView/RoomsView.tsx b/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsView/RoomsView.tsx
new file mode 100644
index 000000000..308998f5e
--- /dev/null
+++ b/src/view/pages/statement/components/rooms/components/roomsAdmin/roomsView/RoomsView.tsx
@@ -0,0 +1,59 @@
+import { FC } from "react";
+import styles from "./RoomsView.module.scss";
+import Button from "@/view/components/buttons/button/Button";
+import { ParticipantInRoom, Statement } from "delib-npm";
+import {
+	clearRoomsToDB,
+	toggleRoomEditingInDB,
+} from "@/controllers/db/rooms/setRooms";
+import Room from "../../room/Room";
+
+interface Props {
+  statement: Statement;
+  participants: ParticipantInRoom[];
+}
+
+const RoomsView: FC<Props> = ({ statement, participants }) => {
+	function handleToggleEdit() {
+		toggleRoomEditingInDB(statement.statementId);
+		clearRoomsToDB(participants);
+	}
+
+	return (
+		<div className={styles.view}>
+			<div className="btns">
+				<Button text="Close Rooms" onClick={handleToggleEdit} />
+			</div>
+			<div className={styles.rooms}>
+				{sortIntoRooms(participants).map((roomParticipants, index) => (
+					<Room
+						key={index}
+						participants={roomParticipants}
+						roomNumber={index + 1}
+						topic={roomParticipants[0].statement}
+					/>
+				))}
+			</div>
+		</div>
+	);
+};
+
+export default RoomsView;
+
+function sortIntoRooms(
+	participants: ParticipantInRoom[]
+): ParticipantInRoom[][] {
+	const rooms: ParticipantInRoom[][] = [];
+	participants.forEach((participant) => {
+    
+		if (!participant.roomNumber) return;
+
+		const roomIndex = participant.roomNumber - 1;
+		if (!rooms[roomIndex]) {
+			rooms[roomIndex] = [];
+		}
+		rooms[roomIndex].push(participant);
+	});
+  
+	return rooms;
+}
diff --git a/src/view/pages/statement/components/rooms/roomPartitioningController.ts b/src/view/pages/statement/components/rooms/roomPartitioningController.ts
deleted file mode 100644
index 99a2763c9..000000000
--- a/src/view/pages/statement/components/rooms/roomPartitioningController.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Participant } from "delib-npm";
-
-export function partitionRooms(
-	participants: Participant[],
-	maxParticipants: number,
-	axisId: string,
-): Participant[][] {
-
-	//see documentation for more details (partitionProblem.md)
-
-	// Sort the elements in descending order.
-	const participantsSorted = getSortedPartipants(participants, axisId)
-
-	// Create X empty groups.
-	const numberOfRooms = Math.ceil(
-		participantsSorted.length / maxParticipants,
-	);
-	const rooms: Participant[][] = new Array(numberOfRooms);
-	participantsSorted.forEach((participant) => {
-		const roomIndex = getMinimalRoomIndex(rooms, axisId);
-		rooms[roomIndex].push(participant);
-	});
-
-	return rooms;
-}
-
-function getMinimalRoomIndex(rooms: Participant[][], axisId: string): number {
-	const minimalParticipantsRoom: Participant[] = [];
-	let minimalParticipantsRoomIndex = 0;
-
-	//find the room with the least amount of participants
-	for (let i = 0; i < rooms.length; i++) {
-		if (rooms[i].length < minimalParticipantsRoom.length) {
-			minimalParticipantsRoomIndex = i;
-		}
-	}
-
-	//find the room leat amount of participants paradigm value
-	const roomsValue: number[] = [];
-	rooms.forEach((room, index) => {
-		let sumValue = 0;
-		room.forEach((participant) => {
-			const paradigm = participant.paradigmAxes?.find(
-				(paradigm) => paradigm?.paradigmAxis === axisId,
-			);
-			if (paradigm?.value) {
-				sumValue += paradigm.value;
-			}
-		});
-		roomsValue[index] = sumValue;
-	});
-
-	//return the room with least value in roomsValue array
-	const minValue: number = Math.min(...roomsValue);
-	const minimalValueRoomIndex = roomsValue.indexOf(minValue);
-
-	return minimalParticipantsRoomIndex === minimalValueRoomIndex
-		? minimalParticipantsRoomIndex
-		: minimalValueRoomIndex;
-}
-
-function getSortedPartipants(participants:Participant[], axisId:string):Participant[]{
-	return  participants.sort((a, b) => {
-		try {
-			const paradigmA = a.paradigmAxes?.find(
-				(paradigm) => paradigm?.paradigmAxis === axisId,
-			);
-			const paradigmB = b.paradigmAxes?.find(
-				(paradigm) => paradigm?.paradigmAxis === axisId,
-			);
-			if (paradigmA === undefined || paradigmB === undefined)
-				throw new Error("Paradigm not found");
-			if (paradigmA.value === undefined || paradigmB.value === undefined)
-				throw new Error("Paradigm value not found");
-            
-			return paradigmA.value - paradigmB.value;
-		} catch (error) {
-			console.error(error);
-            
-			return 0;
-		}
-	});
-}
diff --git a/src/view/pages/statement/components/settings/components/GetVoters.tsx b/src/view/pages/statement/components/settings/components/GetVoters.tsx
index ee7f36f3f..061be4ed0 100644
--- a/src/view/pages/statement/components/settings/components/GetVoters.tsx
+++ b/src/view/pages/statement/components/settings/components/GetVoters.tsx
@@ -30,6 +30,7 @@ const GetVoters: FC<GetVotersProps> = ({ statementId }) => {
 				type="button"
 				className="voters-button form-button"
 				onClick={getVoters}
+				tabIndex={0}
 			>
 				{t("Get Voters")}
 			</button>
diff --git a/src/view/pages/statement/components/settings/components/resultsRange/ResultsRange.tsx b/src/view/pages/statement/components/settings/components/resultsRange/ResultsRange.tsx
index 4c6734d89..c3840b588 100644
--- a/src/view/pages/statement/components/settings/components/resultsRange/ResultsRange.tsx
+++ b/src/view/pages/statement/components/settings/components/resultsRange/ResultsRange.tsx
@@ -20,6 +20,7 @@ const ResultsRange: FC<StatementSettingsProps> = ({
 				<input
 					className="range"
 					type="range"
+					aria-label="Number Of Results"
 					name="numberOfResults"
 					value={resultsSettings.numberOfResults}
 					min="1"
diff --git a/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.scss b/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.scss
index 656eff1d6..ca0acbb04 100644
--- a/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.scss
+++ b/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.scss
@@ -15,7 +15,7 @@
         padding: 1rem;
         font-size: 1.2rem;
         width: 100%;
-        outline: none;
+        // outline: none;
         resize: none;
         background-color: #f5fcff;
         box-shadow: 0px 2px 6px 0px rgba(170, 187, 227, 0.253);
diff --git a/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.tsx b/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.tsx
index b79ab2f1a..c161582a8 100644
--- a/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.tsx
+++ b/src/view/pages/statement/components/settings/components/statementSettingsForm/StatementSettingsForm.tsx
@@ -105,6 +105,7 @@ const StatementSettingsForm: FC<StatementSettingsFormProps> = ({
 				<button
 					type='submit'
 					className='submit-button'
+					aria-label="Submit button"
 					data-cy='settings-statement-submit-btn'
 				>
 					<SaveIcon />
diff --git a/src/view/pages/statement/components/settings/components/titleAndDescription/TitleAndDescription.tsx b/src/view/pages/statement/components/settings/components/titleAndDescription/TitleAndDescription.tsx
index 72f71b1da..bb00528b3 100644
--- a/src/view/pages/statement/components/settings/components/titleAndDescription/TitleAndDescription.tsx
+++ b/src/view/pages/statement/components/settings/components/titleAndDescription/TitleAndDescription.tsx
@@ -4,6 +4,7 @@ import { FC } from "react";
 import { useLanguage } from "@/controllers/hooks/useLanguages";
 import { StatementSettingsProps } from "../../settingsTypeHelpers";
 import "./TitleAndDescription.scss";
+import VisuallyHidden from "@/view/components/accessibility/toScreenReaders/VisuallyHidden";
 
 const TitleAndDescription: FC<StatementSettingsProps> = ({
 	statement,
@@ -21,6 +22,7 @@ const TitleAndDescription: FC<StatementSettingsProps> = ({
 	return (
 		<div className="title-and-description">
 			<label htmlFor="statement-title">
+				<VisuallyHidden labelName={t("Group Title")}></VisuallyHidden>
 				<input
 					id="statement-title"
 					data-cy="statement-title"
@@ -40,6 +42,7 @@ const TitleAndDescription: FC<StatementSettingsProps> = ({
 				/>
 			</label>
 			<label htmlFor="statement-description">
+				<VisuallyHidden labelName={t("Group Description")}></VisuallyHidden>
 				<textarea
 					id="statement-description"
 					name="description"
diff --git a/src/view/pages/statement/components/solutions/StatementSolutionsPage.module.scss b/src/view/pages/statement/components/solutions/StatementSolutionsPage.module.scss
index 0798d0820..f0198ddf2 100644
--- a/src/view/pages/statement/components/solutions/StatementSolutionsPage.module.scss
+++ b/src/view/pages/statement/components/solutions/StatementSolutionsPage.module.scss
@@ -1,3 +1,3 @@
 .wrapper{
-    padding-bottom: 0px;
+    padding: .2rem;
 }
\ No newline at end of file
diff --git a/src/view/pages/statement/components/solutions/components/StatementSolutionCard.tsx b/src/view/pages/statement/components/solutions/components/StatementSolutionCard.tsx
index 9b0e0abe0..5adddffee 100644
--- a/src/view/pages/statement/components/solutions/components/StatementSolutionCard.tsx
+++ b/src/view/pages/statement/components/solutions/components/StatementSolutionCard.tsx
@@ -1,49 +1,42 @@
-import { FC, useEffect, useRef, useState } from 'react';
+import { FC, useEffect, useRef, useState } from "react";
 
 // Third Party
-import { Statement, StatementType, User, isOptionFn } from 'delib-npm';
+import { Statement, StatementType, User } from "delib-npm";
 
 // Redux Store
-import {
-	useAppDispatch,
-	useAppSelector,
-} from '@/controllers/hooks/reduxHooks';
+import { useAppDispatch, useAppSelector } from "@/controllers/hooks/reduxHooks";
 import {
 	setStatementElementHight,
 	statementSubscriptionSelector,
-} from '@/model/statements/statementsSlice';
+} from "@/model/statements/statementsSlice";
 
 // Helpers
-import {
-	isAuthorized,
-	linkToChildren,
-} from '@/controllers/general/helpers';
+import { isAuthorized, linkToChildren } from "@/controllers/general/helpers";
 
 // Hooks
 import useStatementColor, {
 	StyleProps,
-} from '@/controllers/hooks/useStatementColor';
+} from "@/controllers/hooks/useStatementColor";
 
 // Custom Components
-import EditIcon from '@/assets/icons/editIcon.svg?react';
-import LightBulbIcon from '@/assets/icons/lightBulbIcon.svg?react';
-import { setStatementIsOption } from '@/controllers/db/statements/setStatements';
-import { useLanguage } from '@/controllers/hooks/useLanguages';
-import EditTitle from '@/view/components/edit/EditTitle';
-import Menu from '@/view/components/menu/Menu';
-import MenuOption from '@/view/components/menu/MenuOption';
-import IconButton from '@/view/components/iconButton/IconButton';
-import StatementChatMore from '../../chat/components/StatementChatMore';
-import AddQuestionIcon from '@/assets/icons/addQuestion.svg?react';
-import CreateStatementModal from '../../createStatementModal/CreateStatementModal';
-import Evaluation from './evaluation/Evaluation';
-import './StatementSolutionCard.scss';
+
+import { setStatementIsOption } from "@/controllers/db/statements/setStatements";
+import { useLanguage } from "@/controllers/hooks/useLanguages";
+import EditTitle from "@/view/components/edit/EditTitle";
+
+import IconButton from "@/view/components/iconButton/IconButton";
+import StatementChatMore from "../../chat/components/StatementChatMore";
+import AddQuestionIcon from "@/assets/icons/addQuestion.svg?react";
+import CreateStatementModal from "../../createStatementModal/CreateStatementModal";
+import Evaluation from "./evaluation/Evaluation";
+import "./StatementSolutionCard.scss";
+import SolutionMenu from "./solutionMenu/SolutionMenu";
 
 interface Props {
-	statement: Statement;
-	parentStatement: Statement;
-	showImage: (talker: User | null) => void;
-	top: number;
+  statement: Statement;
+  parentStatement: Statement;
+  showImage: (talker: User | null) => void;
+  top: number;
 }
 
 const StatementSolutionCard: FC<Props> = ({
@@ -71,7 +64,7 @@ const StatementSolutionCard: FC<Props> = ({
 	const [newTop, setNewTop] = useState(top);
 	const [isEdit, setIsEdit] = useState(false);
 	const [shouldShowAddSubQuestionModal, setShouldShowAddSubQuestionModal] =
-		useState(false);
+    useState(false);
 	const [isCardMenuOpen, setIsCardMenuOpen] = useState(false);
 
 	const _isAuthorized = isAuthorized(
@@ -84,8 +77,6 @@ const StatementSolutionCard: FC<Props> = ({
 		setNewTop(top);
 	}, [top]);
 
-	
-
 	useEffect(() => {
 		dispatch(
 			setStatementElementHight({
@@ -95,12 +86,11 @@ const StatementSolutionCard: FC<Props> = ({
 		);
 	}, [statement.statement]);
 
-
 	function handleSetOption() {
 		try {
-			if (statement.statementType === 'option') {
+			if (statement.statementType === "option") {
 				const cancelOption = window.confirm(
-					'Are you sure you want to cancel this option?'
+					"Are you sure you want to cancel this option?"
 				);
 				if (cancelOption) {
 					setStatementIsOption(statement);
@@ -119,38 +109,42 @@ const StatementSolutionCard: FC<Props> = ({
 	);
 
 	const statementAge = new Date().getTime() - statement.createdAt;
-	
+
 	return (
 		<div
-			className={statementAge<10000?"statement-evaluation-card statement-evaluation-card--new":'statement-evaluation-card'}
+			className={
+				statementAge < 10000
+					? "statement-evaluation-card statement-evaluation-card--new"
+					: "statement-evaluation-card"
+			}
 			style={{
 				top: `${newTop}px`,
-				borderLeft: `8px solid ${statementColor.backgroundColor || 'wheat'}`,
+				borderLeft: `8px solid ${statementColor.backgroundColor || "wheat"}`,
 				color: statementColor.color,
-				flexDirection: dir === 'ltr' ? 'row' : 'row-reverse',
+				flexDirection: dir === "ltr" ? "row" : "row-reverse",
 			}}
 			ref={elementRef}
 		>
 			<div
-				className='selected-option'
+				className="selected-option"
 				style={{
 					backgroundColor: statement.selected
 						? statementColor.backgroundColor
-						: '',
+						: "",
 				}}
 			>
 				<div
 					style={{
 						color: statementColor.color,
-						display: statement.selected ? 'block' : 'none',
+						display: statement.selected ? "block" : "none",
 					}}
 				>
-					{t('Selected')}
+					{t("Selected")}
 				</div>
 			</div>
-			<div className='main'>
-				<div className='info'>
-					<div className='text'>
+			<div className="main">
+				<div className="info">
+					<div className="text">
 						<EditTitle
 							statement={statement}
 							isEdit={isEdit}
@@ -158,49 +152,28 @@ const StatementSolutionCard: FC<Props> = ({
 							isTextArea={true}
 						/>
 					</div>
-					<div className='more'>
-						{_isAuthorized && (
-							<Menu
-								setIsOpen={setIsCardMenuOpen}
-								isMenuOpen={isCardMenuOpen}
-								iconColor='#5899E0'
-							>
-								{_isAuthorized && (
-									<MenuOption
-										label={t('Edit Text')}
-										icon={<EditIcon />}
-										onOptionClick={() => {
-											setIsEdit(!isEdit);
-											setIsCardMenuOpen(false);
-										}}
-									/>
-								)}
-								{_isAuthorized && (
-									<MenuOption
-										isOptionSelected={isOptionFn(statement)}
-										icon={<LightBulbIcon />}
-										label={
-											isOptionFn(statement)
-												? t('Unmark as a Solution')
-												: t('Mark as a Solution')
-										}
-										onOptionClick={handleSetOption}
-									/>
-								)}
-							</Menu>
-						)}
+					<div className="more">
+						<SolutionMenu
+							statement={statement}
+							isAuthorized={_isAuthorized}
+							isCardMenuOpen={isCardMenuOpen}
+							setIsCardMenuOpen={setIsCardMenuOpen}
+							isEdit={isEdit}
+							setIsEdit={setIsEdit}
+							handleSetOption={handleSetOption}
+						/>
 					</div>
 				</div>
 				{shouldLinkToChildStatements && (
-					<div className='chat'>
+					<div className="chat">
 						<StatementChatMore statement={statement} />
 					</div>
 				)}
-				<div className='actions'>
+				<div className="actions">
 					<Evaluation parentStatement={parentStatement} statement={statement} />
 					{parentStatement.hasChildren && (
 						<IconButton
-							className='add-sub-question-button'
+							className="add-sub-question-button"
 							onClick={() => setShouldShowAddSubQuestionModal(true)}
 						>
 							<AddQuestionIcon />
diff --git a/src/view/pages/statement/components/solutions/components/solutionMenu/SolutionMenu.tsx b/src/view/pages/statement/components/solutions/components/solutionMenu/SolutionMenu.tsx
new file mode 100644
index 000000000..657bf5770
--- /dev/null
+++ b/src/view/pages/statement/components/solutions/components/solutionMenu/SolutionMenu.tsx
@@ -0,0 +1,67 @@
+import { FC } from "react";
+import Menu from '@/view/components/menu/Menu';
+import MenuOption from '@/view/components/menu/MenuOption';
+import EditIcon from '@/assets/icons/editIcon.svg?react';
+import LightBulbIcon from '@/assets/icons/lightBulbIcon.svg?react';
+import { isOptionFn, Statement } from "delib-npm";
+import { useLanguage } from "@/controllers/hooks/useLanguages";
+
+
+interface Props {
+    statement: Statement;
+    isAuthorized: boolean;
+    isCardMenuOpen: boolean;
+    setIsCardMenuOpen: (isOpen: boolean) => void;
+    isEdit: boolean;
+    setIsEdit: (isEdit: boolean) => void;
+    handleSetOption: () => void;
+
+}
+
+const SolutionMenu:FC<Props> = ({
+	statement,
+	isAuthorized,
+	isCardMenuOpen,
+	setIsCardMenuOpen,
+	isEdit,
+	setIsEdit,
+	handleSetOption
+}) => {
+
+	const {t} = useLanguage();
+
+	if(!isAuthorized) return null;
+	
+	return (
+		<Menu
+			setIsOpen={setIsCardMenuOpen}
+			isMenuOpen={isCardMenuOpen}
+			iconColor='#5899E0'
+		>
+			{isAuthorized && (
+				<MenuOption
+					label={t('Edit Text')}
+					icon={<EditIcon />}
+					onOptionClick={() => {
+						setIsEdit(!isEdit);
+						setIsCardMenuOpen(false);
+					}}
+				/>
+			)}
+			{isAuthorized && (
+				<MenuOption
+					isOptionSelected={isOptionFn(statement)}
+					icon={<LightBulbIcon />}
+					label={
+						isOptionFn(statement)
+							? t('Unmark as a Solution')
+							: t('Mark as a Solution')
+					}
+					onOptionClick={handleSetOption}
+				/>
+			)}
+		</Menu>
+	)};
+ 
+
+export default SolutionMenu;
diff --git a/src/view/pages/statement/components/vote/components/info/StatementInfo.tsx b/src/view/pages/statement/components/vote/components/info/StatementInfo.tsx
index 6c45d1c5b..ba6335789 100644
--- a/src/view/pages/statement/components/vote/components/info/StatementInfo.tsx
+++ b/src/view/pages/statement/components/vote/components/info/StatementInfo.tsx
@@ -107,9 +107,10 @@ const StatementInfo: FC<Props> = ({ statement, setShowInfo }) => {
 						<h3>
 							{formData.title}
 							{_isAuthorized && (
-								<div className="edit-icon">
-									<EditIcon onClick={() => setIsInEditMode(true)} />
-								</div>
+								<button className="edit-icon" onClick={() => setIsInEditMode(true)}>
+									<EditIcon
+									/>
+								</button>
 							)}
 						</h3>
 						<div className="text">
diff --git a/src/view/pages/statement/components/vote/components/info/StatementInfoCont.ts b/src/view/pages/statement/components/vote/components/info/StatementInfoCont.ts
index c543abce0..d1b50b680 100644
--- a/src/view/pages/statement/components/vote/components/info/StatementInfoCont.ts
+++ b/src/view/pages/statement/components/vote/components/info/StatementInfoCont.ts
@@ -18,11 +18,11 @@ export function handleSubmitInfo(
 		const description = formData.description;
 
 		//add title and description
-		const text = `${title}\n${description}`;
+		
 
 		//update statement to DB
 		if (!statement) throw new Error("No statement");
-		updateStatementText(statement, text);
+		updateStatementText(statement, title, description);
 		setEdit(false);
 		setShowInfo(false);
 	} catch (error) {
diff --git a/src/view/pages/statement/components/vote/components/optionBar/OptionBar.tsx b/src/view/pages/statement/components/vote/components/optionBar/OptionBar.tsx
index 74699ba4b..addcf48d9 100644
--- a/src/view/pages/statement/components/vote/components/optionBar/OptionBar.tsx
+++ b/src/view/pages/statement/components/vote/components/optionBar/OptionBar.tsx
@@ -105,6 +105,7 @@ export const OptionBar: FC<OptionBarExtendedProps> = ({
 			<div className="vote-button-container drop-shadow">
 				<button
 					onClick={handleVotePress}
+					aria-label="Vote button"
 					style={voteButtonStyle}
 					className={`vote-button ${
 						isOptionSelected ? "selected" : ""
@@ -119,6 +120,7 @@ export const OptionBar: FC<OptionBarExtendedProps> = ({
 			</div>
 			<button
 				className="info-icon"
+				aria-label="Info button"
 				onClick={() => {
 					setStatementInfo(option);
 					setShowInfo(true);
diff --git a/src/view/style/style.scss b/src/view/style/style.scss
index 1e9e59446..89016e59d 100644
--- a/src/view/style/style.scss
+++ b/src/view/style/style.scss
@@ -39,6 +39,7 @@
 
   //shadow
   --shadow: rgba(181, 197, 232, 0.486);
+  --radius:5px;
 
   //buttons
   --inactive: rgb(207, 207, 207);
@@ -80,7 +81,7 @@
   --settings-voting: #EA8222;
   --settings-finished: #e8749e;
 
-  //similarties colors
+  //similarities colors
   --similarities-textarea-border: #C3D0EA;
   --similarities-titleInput: #818FAD;
   --types-color: #668FD1;
@@ -100,14 +101,16 @@
   --background-color-info-text: #F5FCFF;
   --info-text-padding: 15px;
 
+//wights
+  --wight-medium: 400;
 
 
+  
 
 
 
 
-
-  //FIGMA LABRARY COLORS
+  //FIGMA LIBRARY COLORS
   //agreement-rang
   --range-positive-100: #46b4a0;
   --range-positive-60: ##78d2c2;
@@ -144,7 +147,7 @@
   //buttons
   --btn-primary: #739ee4;
   --btn-secondary: #739ee4;
-  --btn-tertiary: #739ee4;
+  --btn-tertiary: #a2c0f0;
   --btn-follow-me: #ec8aba;
   --btn-fab: #739ee4;
   //buttons-contrast
@@ -213,7 +216,7 @@
   --icon-disabled-filled-contrast: #2b4170;
   --icon-disabled-filled-secondary-contrast: #209eac;
   --icon-disabled-outline-contrast: #a1b0d1;
-  --icon-grenn-contrast: #00a89a;
+  --icon-green-contrast: #00a89a;
   --icon-red-contrast: #d1004b;