diff --git a/src/components/molecules/AddWhereCondModal.tsx b/src/components/molecules/AddWhereCondModal.tsx
index e5c34015..c8948844 100644
--- a/src/components/molecules/AddWhereCondModal.tsx
+++ b/src/components/molecules/AddWhereCondModal.tsx
@@ -18,15 +18,15 @@ interface AddWhereCondModalProps {
   index: number;
 }
 
-export const AddWhereCondModal = ({isOpen, onClose, pair, index}: AddWhereCondModalProps) => {
+export const AddWhereCondModal = ({ isOpen, onClose, pair, index }: AddWhereCondModalProps) => {
   const [whereProp, setWhereProp] = React.useState<string>('');
   const [additionalSettings, setAdditionalSettings] = React.useState<string>('');
   const [newValue, setNewValue] = React.useState<any>('');
   const [checked, setChecked] = React.useState<boolean[]>(new Array(Object.keys(pair.where).length).fill(false));
 
-  const keyValueFormRef = useRef<{getObject: () => object}>(null);
+  const keyValueFormRef = useRef<{ getObject: () => object }>(null);
 
-  const {socket} = useSocketStore();
+  const { socket } = useSocketStore();
 
   const handlePropSelect = (event: SelectChangeEvent<string>) => {
     setWhereProp(event.target.value);
@@ -38,55 +38,56 @@ export const AddWhereCondModal = ({isOpen, onClose, pair, index}: AddWhereCondMo
   }
 
   const handleSubmit = () => {
-      switch (whereProp) {
-        case 'url':
-          if (additionalSettings === 'string'){
-            pair.where.url = newValue;
-          } else {
-            pair.where.url = { $regex: newValue };
-          }
-          break;
-        case 'selectors':
-          pair.where.selectors = newValue;
-          break;
-        case 'cookies':
-          pair.where.cookies = keyValueFormRef.current?.getObject() as Record<string,string>
-          break;
-        case 'before':
-          pair.where.$before = newValue;
-          break;
-        case 'after':
-          pair.where.$after = newValue;
-          break;
-        case 'boolean':
-          const booleanArr = [];
-          const deleteKeys: string[] = [];
-          for (let i = 0; i < checked.length; i++) {
-            if (checked[i]) {
-              if (Object.keys(pair.where)[i]) {
-                //@ts-ignore
-                if (pair.where[Object.keys(pair.where)[i]]) {
-                  booleanArr.push({
-                    //@ts-ignore
-                    [Object.keys(pair.where)[i]]: pair.where[Object.keys(pair.where)[i]]});
-                }
-                deleteKeys.push(Object.keys(pair.where)[i]);
+    switch (whereProp) {
+      case 'url':
+        if (additionalSettings === 'string') {
+          pair.where.url = newValue;
+        } else {
+          pair.where.url = { $regex: newValue };
+        }
+        break;
+      case 'selectors':
+        pair.where.selectors = newValue;
+        break;
+      case 'cookies':
+        pair.where.cookies = keyValueFormRef.current?.getObject() as Record<string, string>
+        break;
+      case 'before':
+        pair.where.$before = newValue;
+        break;
+      case 'after':
+        pair.where.$after = newValue;
+        break;
+      case 'boolean':
+        const booleanArr = [];
+        const deleteKeys: string[] = [];
+        for (let i = 0; i < checked.length; i++) {
+          if (checked[i]) {
+            if (Object.keys(pair.where)[i]) {
+              //@ts-ignore
+              if (pair.where[Object.keys(pair.where)[i]]) {
+                booleanArr.push({
+                  //@ts-ignore
+                  [Object.keys(pair.where)[i]]: pair.where[Object.keys(pair.where)[i]]
+                });
               }
+              deleteKeys.push(Object.keys(pair.where)[i]);
             }
           }
-          // @ts-ignore
-          deleteKeys.forEach((key: string) => delete pair.where[key]);
-          //@ts-ignore
-          pair.where[`$${additionalSettings}`] = booleanArr;
-          break;
-        default:
-          return;
-      }
+        }
+        // @ts-ignore
+        deleteKeys.forEach((key: string) => delete pair.where[key]);
+        //@ts-ignore
+        pair.where[`$${additionalSettings}`] = booleanArr;
+        break;
+      default:
+        return;
+    }
     onClose();
     setWhereProp('');
     setAdditionalSettings('');
     setNewValue('');
-    socket?.emit('updatePair', {index: index-1, pair: pair});
+    socket?.emit('updatePair', { index: index - 1, pair: pair });
   }
 
   return (
@@ -97,23 +98,23 @@ export const AddWhereCondModal = ({isOpen, onClose, pair, index}: AddWhereCondMo
       onClose();
     }} modalStyle={modalStyle}>
       <div>
-        <Typography sx={{margin: '20px 0px'}}>Add where condition:</Typography>
-      <div style={{margin:'8px'}}>
-        <MuiDropdown
-          id="whereProp"
-          label="Condition"
-          value={whereProp}
-          handleSelect={handlePropSelect}>
-          <MenuItem value="url">url</MenuItem>
-          <MenuItem value="selectors">selectors</MenuItem>
-          <MenuItem value="cookies">cookies</MenuItem>
-          <MenuItem value="before">before</MenuItem>
-          <MenuItem value="after">after</MenuItem>
-          <MenuItem value="boolean">boolean logic</MenuItem>
-        </MuiDropdown>
-      </div>
+        <Typography sx={{ margin: '20px 0px' }}>Add where condition:</Typography>
+        <div style={{ margin: '8px' }}>
+          <MuiDropdown
+            id="whereProp"
+            label="Condition"
+            value={whereProp}
+            handleSelect={handlePropSelect}>
+            <MenuItem value="url">url</MenuItem>
+            <MenuItem value="selectors">selectors</MenuItem>
+            <MenuItem value="cookies">cookies</MenuItem>
+            <MenuItem value="before">before</MenuItem>
+            <MenuItem value="after">after</MenuItem>
+            <MenuItem value="boolean">boolean logic</MenuItem>
+          </MuiDropdown>
+        </div>
         {whereProp ?
-          <div style={{margin: '8px'}}>
+          <div style={{ margin: '8px' }}>
             <DisplayConditionSettings
               whereProp={whereProp} additionalSettings={additionalSettings} setAdditionalSettings={setAdditionalSettings}
               newValue={newValue} setNewValue={setNewValue} checked={checked} setChecked={setChecked}
@@ -145,7 +146,7 @@ export const modalStyle = {
   width: '30%',
   backgroundColor: 'background.paper',
   p: 4,
-  height:'fit-content',
-  display:'block',
+  height: 'fit-content',
+  display: 'block',
   padding: '20px',
 };