diff --git a/src/components/molecules/AddWhereCondModal.tsx b/src/components/molecules/AddWhereCondModal.tsx
new file mode 100644
index 00000000..182a8dd6
--- /dev/null
+++ b/src/components/molecules/AddWhereCondModal.tsx
@@ -0,0 +1,151 @@
+import { Dropdown as MuiDropdown } from "../atoms/DropdownMui";
+import {
+  Button,
+  MenuItem,
+  Typography
+} from "@mui/material";
+import React, { useRef } from "react";
+import { GenericModal } from "../atoms/GenericModal";
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import { SelectChangeEvent } from "@mui/material/Select/Select";
+import { DisplayConditionSettings } from "./DisplayWhereConditionSettings";
+import { useSocketStore } from "../../context/socket";
+
+interface AddWhereCondModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  pair: WhereWhatPair;
+  index: number;
+}
+
+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 {socket} = useSocketStore();
+
+  const handlePropSelect = (event: SelectChangeEvent<string>) => {
+    setWhereProp(event.target.value);
+    switch (event.target.value) {
+      case 'url': setNewValue(''); break;
+      case 'selectors': setNewValue(['']); break;
+      case 'default': return;
+    }
+  }
+
+  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]);
+              }
+            }
+          }
+          // @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});
+  }
+
+  return (
+    <GenericModal isOpen={isOpen} onClose={() => {
+      setWhereProp('');
+      setAdditionalSettings('');
+      setNewValue('');
+      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>
+        {whereProp ?
+          <div style={{margin: '8px'}}>
+            <DisplayConditionSettings
+              whereProp={whereProp} additionalSettings={additionalSettings} setAdditionalSettings={setAdditionalSettings}
+              newValue={newValue} setNewValue={setNewValue} checked={checked} setChecked={setChecked}
+              keyValueFormRef={keyValueFormRef} whereKeys={Object.keys(pair.where)}
+            />
+            <Button
+              onClick={handleSubmit}
+              variant="outlined"
+              sx={{
+                display: "table-cell",
+                float: "right",
+                marginRight: "15px",
+                marginTop: "20px",
+              }}
+            >
+              {"Add Condition"}
+            </Button>
+          </div>
+          : null}
+      </div>
+    </GenericModal>
+  )
+}
+
+export const modalStyle = {
+  top: '40%',
+  left: '50%',
+  transform: 'translate(-50%, -50%)',
+  width: '30%',
+  backgroundColor: 'background.paper',
+  p: 4,
+  height:'fit-content',
+  display:'block',
+  padding: '20px',
+};