diff --git a/src/components/molecules/PairDetail.tsx b/src/components/molecules/PairDetail.tsx
new file mode 100644
index 00000000..9d37bb6d
--- /dev/null
+++ b/src/components/molecules/PairDetail.tsx
@@ -0,0 +1,310 @@
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { WhereWhatPair } from "@wbr-project/wbr-interpret";
+import { Box, Button, IconButton, MenuItem, Stack, TextField, Tooltip, Typography } from "@mui/material";
+import { Close, KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
+import TreeView from '@mui/lab/TreeView';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import TreeItem from '@mui/lab/TreeItem';
+import { AddButton } from "../atoms/buttons/AddButton";
+import { WarningText } from "../atoms/texts";
+import NotificationImportantIcon from '@mui/icons-material/NotificationImportant';
+import { RemoveButton } from "../atoms/buttons/RemoveButton";
+import { AddWhereCondModal } from "./AddWhereCondModal";
+import { UpdatePair } from "../../api/workflow";
+import { useSocketStore } from "../../context/socket";
+import { AddWhatCondModal } from "./AddWhatCondModal";
+
+interface PairDetailProps {
+  pair: WhereWhatPair | null;
+  index: number;
+}
+
+export const PairDetail = ({ pair, index }: PairDetailProps) => {
+  const [pairIsSelected, setPairIsSelected] = useState(false);
+  const [collapseWhere, setCollapseWhere] = useState(true);
+  const [collapseWhat, setCollapseWhat] = useState(true);
+  const [rerender, setRerender] = useState(false);
+  const [expanded, setExpanded] = React.useState<string[]>(
+    pair ? Object.keys(pair.where).map((key, index) => `${key}-${index}`) : []
+  );
+  const [addWhereCondOpen, setAddWhereCondOpen] = useState(false);
+  const [addWhatCondOpen, setAddWhatCondOpen] = useState(false);
+
+  const { socket } = useSocketStore();
+
+  const handleCollapseWhere = () => {
+      setCollapseWhere(!collapseWhere);
+  }
+
+  const handleCollapseWhat = () => {
+    setCollapseWhat(!collapseWhat);
+  }
+
+  const handleToggle = (event: React.SyntheticEvent, nodeIds: string[]) => {
+    setExpanded(nodeIds);
+  };
+
+  useLayoutEffect(() => {
+    if (pair) {
+      setPairIsSelected(true);
+    }
+  }, [pair])
+
+  const handleChangeValue = (value: any, where: boolean, keys: (string|number)[]) => {
+    // a moving reference to internal objects within pair.where or pair.what
+    let schema: any = where ? pair?.where : pair?.what;
+    const length = keys.length;
+    for(let i = 0; i < length-1; i++) {
+      const elem = keys[i];
+      if( !schema[elem] ) schema[elem] = {}
+      schema = schema[elem];
+    }
+
+    schema[keys[length-1]] = value;
+    if (pair && socket) {
+      socket.emit('updatePair', {index: index-1, pair: pair});
+    }
+    setRerender(!rerender);
+  }
+
+
+    const DisplayValueContent = (value: any, keys: (string|number)[], where: boolean = true) => {
+    switch (typeof(value)) {
+      case 'string':
+        return <TextField
+          size='small'
+          type="string"
+          onChange={(e) => {
+            try {
+              const obj = JSON.parse(e.target.value);
+              handleChangeValue(obj, where, keys);
+            } catch (error) {
+              const num = Number(e.target.value);
+              if (!isNaN(num)) {
+                handleChangeValue(num, where, keys);
+              }
+              handleChangeValue(e.target.value, where, keys)
+            }
+          }}
+          defaultValue={value}
+          key={`text-field-${keys.join('-')}-${where}`}
+        />
+      case 'number':
+        return <TextField
+          size='small'
+          type="number"
+          onChange={(e) => handleChangeValue(Number(e.target.value), where, keys)}
+          defaultValue={value}
+          key={`text-field-${keys.join('-')}-${where}`}
+        />
+      case 'object':
+        if (value) {
+          if (Array.isArray(value)) {
+            return (
+              <React.Fragment>
+                {
+                  value.map((element, index) => {
+                  return DisplayValueContent(element, [...keys, index], where);
+                  })
+                }
+                <AddButton handleClick={()=> {
+                  let prevValue:any = where ? pair?.where : pair?.what;
+                  for (const key of keys) {
+                    prevValue = prevValue[key];
+                  }
+                  handleChangeValue([...prevValue, ''], where, keys);
+                  setRerender(!rerender);
+                }} hoverEffect={false}/>
+                <RemoveButton handleClick={()=> {
+                  let prevValue:any = where ? pair?.where : pair?.what;
+                  for (const key of keys) {
+                    prevValue = prevValue[key];
+                  }
+                  prevValue.splice(-1);
+                  handleChangeValue(prevValue, where, keys);
+                  setRerender(!rerender);
+                }}/>
+              </React.Fragment>
+            )
+          } else {
+            return (
+              <TreeView
+                defaultCollapseIcon={<ExpandMoreIcon />}
+                defaultExpandIcon={<ChevronRightIcon />}
+                sx={{ flexGrow: 1, overflowY: 'auto' }}
+                key={`tree-view-nested-${keys.join('-')}-${where}`}
+              >
+                {
+                  Object.keys(value).map((key2, index) =>
+                  {
+                    return (
+                      <TreeItem nodeId={`${key2}-${index}`} label={`${key2}:`} key={`${key2}-${index}`}>
+                        { DisplayValueContent(value[key2], [...keys, key2], where) }
+                      </TreeItem>
+                    )
+                  })
+                }
+              </TreeView>
+            )
+          }
+        }
+        break;
+      default:
+        return null;
+    }
+  }
+
+  return (
+    <React.Fragment>
+      { pair &&
+        <React.Fragment>
+          <AddWhatCondModal isOpen={addWhatCondOpen} onClose={() => setAddWhatCondOpen(false)}
+                            pair={pair} index={index}/>
+          <AddWhereCondModal isOpen={addWhereCondOpen} onClose={() => setAddWhereCondOpen(false)}
+                         pair={pair} index={index}/>
+        </React.Fragment>
+      }
+    {
+      pairIsSelected
+        ? (
+          <div style={{padding: '10px', overflow: 'hidden'}}>
+            <Typography>Pair number: {index}</Typography>
+             <TextField
+              size='small'
+              label='id'
+              onChange={(e) => {
+                if (pair && socket) {
+                  socket.emit('updatePair', {index: index-1, pair: pair});
+                  pair.id = e.target.value;
+                }
+              }}
+              value={pair ? pair.id ? pair.id : '' : ''}
+            />
+            <Stack spacing={0} direction='row' sx={{
+              display: 'flex',
+              alignItems: 'center',
+              background: 'lightGray',
+            }}>
+              <CollapseButton
+                handleClick={handleCollapseWhere}
+                isCollapsed={collapseWhere}
+              />
+              <Typography>Where</Typography>
+              <Tooltip title='Add where condition' placement='right'>
+                <div>
+                  <AddButton handleClick={()=> {
+                    setAddWhereCondOpen(true);
+                  }} style={{color:'rgba(0, 0, 0, 0.54)', background:'transparent'}}/>
+                </div>
+              </Tooltip>
+            </Stack>
+              {(collapseWhere && pair && pair.where)
+                ?
+                <React.Fragment>
+                    { Object.keys(pair.where).map((key, index) => {
+                  return (
+                    <TreeView
+                      expanded={expanded}
+                      defaultCollapseIcon={<ExpandMoreIcon />}
+                      defaultExpandIcon={<ChevronRightIcon />}
+                      sx={{ flexGrow: 1, overflowY: 'auto' }}
+                      onNodeToggle={handleToggle}
+                      key={`tree-view-${key}-${index}`}
+                    >
+                      <TreeItem nodeId={`${key}-${index}`} label={`${key}:`} key={`${key}-${index}`}>
+                        {
+                          // @ts-ignore
+                          DisplayValueContent(pair.where[key], [key])
+                        }
+                      </TreeItem>
+                    </TreeView>
+                    );
+                })}
+                </React.Fragment>
+                : null
+              }
+            <Stack spacing={0} direction='row' sx={{
+              display: 'flex',
+              alignItems: 'center',
+              background: 'lightGray',
+            }}>
+              <CollapseButton
+                handleClick={handleCollapseWhat}
+                isCollapsed={collapseWhat}
+              />
+              <Typography>What</Typography>
+
+              <Tooltip title='Add what condition' placement='right'>
+                <div>
+                  <AddButton handleClick={()=> {
+                    setAddWhatCondOpen(true);
+                  }} style={{color:'rgba(0, 0, 0, 0.54)', background:'transparent'}}/>
+                </div>
+              </Tooltip>
+            </Stack>
+            {(collapseWhat && pair && pair.what)
+              ?(
+              <React.Fragment>
+              { Object.keys(pair.what).map((key, index) => {
+                return (
+                  <TreeView
+                    defaultCollapseIcon={<ExpandMoreIcon />}
+                    defaultExpandIcon={<ChevronRightIcon />}
+                    sx={{ flexGrow: 1, overflowY: 'auto' }}
+                    key={`tree-view-2-${key}-${index}`}
+                  >
+                    <TreeItem nodeId={`${key}-${index}`} label={`${pair.what[index].action}`}>
+                      {
+                        // @ts-ignore
+                        DisplayValueContent(pair.what[key], [key], false)
+                      }
+                      <Tooltip title='remove action' placement='left'>
+                      <div style={{float:'right'}}>
+                      <CloseButton handleClick={() => {
+                        //@ts-ignore
+                        pair.what.splice(key, 1);
+                        setRerender(!rerender);
+                      }}/>
+                      </div>
+                      </Tooltip>
+                    </TreeItem>
+                  </TreeView>
+                );
+              })}
+              </React.Fragment>
+              )
+              : null
+            }
+          </div>
+        )
+        : <WarningText>
+          <NotificationImportantIcon color="warning"/>
+          No pair from the left side panel was selected.
+          </WarningText>
+    }
+    </React.Fragment>
+  );
+}
+
+interface CollapseButtonProps {
+  handleClick: () => void;
+  isCollapsed?: boolean;
+}
+
+const CollapseButton = ({handleClick, isCollapsed } : CollapseButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={"small"} onClick={handleClick}>
+      { isCollapsed ?  <KeyboardArrowDown/> : <KeyboardArrowUp/>}
+    </IconButton>
+  );
+}
+
+const CloseButton = ({handleClick } : CollapseButtonProps) => {
+  return (
+    <IconButton aria-label="add" size={"small"} onClick={handleClick}
+                sx={{'&:hover': { color: '#1976d2', backgroundColor: 'white' }}}>
+      <Close/>
+    </IconButton>
+  );
+}