diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js
index 350546be..7eb76d32 100644
--- a/src/components/JoinMarkupsModal/index.js
+++ b/src/components/JoinMarkupsModal/index.js
@@ -14,6 +14,7 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
   const [typeRelation, setTypeRelation] = useState(null);
 
   const joinActive = firstTextRelation && secondTextRelation && typeRelation;
+  const [deleteActive, setDeleteActive] = useState(false);
 
   const onAddRelation = useCallback(
     /*newMetadata*/ () => {
@@ -30,6 +31,29 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
     ]
   );
 
+  const onDeleteRelation = useCallback(
+    () => {
+      console.log("onDeleteRelation!!!!!!!");
+    },
+    [
+      /*language, updateLanguageMetadata*/
+    ]
+  );
+
+  const onRelationSelect = useCallback(
+    (relation_id, checked) => {
+      console.log("onRelationSelect!!!!!!!");
+      console.log("relation_id====");
+      console.log(relation_id);
+      console.log("checked====");
+      console.log(checked);
+      setDeleteActive(true);
+    },
+    [
+      /*language, updateLanguageMetadata*/
+    ]
+  );
+
   console.log("perspectiveId====");
   console.log(perspectiveId);
 
@@ -50,8 +74,8 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
       <Modal.Header>{getTranslation("Join markups")}</Modal.Header>
       <Modal.Content /*scrolling*/>
         <div className="join-markups-content">
-          <div className="join-markups-content__table1">
-            {/* Table 1 */}
+          <div className="join-markups-content__markups">
+            {/* Table Markups */}
             <div className="block-add-relation">
               <div className="block-add-relation__column">
                 <Table celled padded className="lingvo-perspective-table">
@@ -118,10 +142,6 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 ))}
               </Form>*/}
                 <Form>
-                  {/*<div>
-                    Selected value: <b>{typeRelation}</b>
-                  </div>*/}
-
                   <Form.Radio
                     label={getTranslation("Translit")}
                     name="radioGroup"
@@ -144,7 +164,6 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 </Form>
 
                 <Button
-                  //icon={<i className="lingvo-icon lingvo-icon_check" />}
                   content={getTranslation("Join")}
                   onClick={onAddRelation}
                   className="lingvo-button-greenest"
@@ -152,19 +171,18 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 />
 
                 <Button
-                  //icon={<i className="lingvo-icon lingvo-icon_check" />}
                   content={getTranslation("Delete")}
-                  //onClick={onDeleteRelation}
+                  onClick={onDeleteRelation}
                   className="lingvo-button-redder"
-                  disabled={true}
+                  disabled={!deleteActive}
                 />
               </div>
             </div>
-            {/* /Table 1 */}
+            {/* /Table Markups */}
           </div>
 
-          <div className="join-markups-content__table2">
-            {/* Table 2 */}
+          <div className="join-markups-content__relations">
+            {/* Table Relations */}
             <Table celled padded className="lingvo-perspective-table">
               <Table.Header>
                 <Table.Row>
@@ -183,7 +201,7 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                         <Checkbox
                           className="lingvo-checkbox"
                           //checked={!!selectedEntries.find(e => isEqual(e, entry.id))}
-                          //onChange={(e, { checked }) => onEntrySelect(entry.id, checked)}
+                          onChange={(e, { checked }) => onRelationSelect(relation.id, checked)}
                         />
                       </Table.Cell>
                       <Table.Cell>Left text</Table.Cell>
@@ -195,7 +213,7 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 })}
               </Table.Body>
             </Table>
-            {/* /Table 2 */}
+            {/* /Table Relations */}
           </div>
         </div>
       </Modal.Content>
diff --git a/src/components/JoinMarkupsModal/styles.scss b/src/components/JoinMarkupsModal/styles.scss
index 242a3c3e..9c1b7270 100644
--- a/src/components/JoinMarkupsModal/styles.scss
+++ b/src/components/JoinMarkupsModal/styles.scss
@@ -4,12 +4,12 @@
   height: 65vh;
   min-height: 450px;
 
-  &__table1 {
+  &__markups {
     height: 50%;
     padding-bottom: 20px;
   }
 
-  &__table2 {
+  &__relations {
     height: 50%;
     overflow-y: auto;