diff --git a/src/components/JoinMarkupsModal/index.js b/src/components/JoinMarkupsModal/index.js
index 13021c84..350546be 100644
--- a/src/components/JoinMarkupsModal/index.js
+++ b/src/components/JoinMarkupsModal/index.js
@@ -9,10 +9,27 @@ import "./styles.scss";
 const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
   const getTranslation = useContext(TranslationContext);
 
-  //const [firstTextRelation, setFirstTextRelation] = useState(null);
-  //const [secondTextRelation, setSecondTextRelation] = useState(null);
+  const [firstTextRelation, setFirstTextRelation] = useState(null);
+  const [secondTextRelation, setSecondTextRelation] = useState(null);
   const [typeRelation, setTypeRelation] = useState(null);
 
+  const joinActive = firstTextRelation && secondTextRelation && typeRelation;
+
+  const onAddRelation = useCallback(
+    /*newMetadata*/ () => {
+      console.log("onAddRelation!!!!!!!");
+      setFirstTextRelation(null);
+      setSecondTextRelation(null);
+      setTypeRelation(null);
+      /*updateLanguageMetadata({
+        variables: { id: language.id, metadata: newMetadata }
+      }).then(() => setMetadata(newMetadata));*/
+    },
+    [
+      /*language, updateLanguageMetadata*/
+    ]
+  );
+
   console.log("perspectiveId====");
   console.log(perspectiveId);
 
@@ -25,6 +42,9 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
   console.log("relations===");
   console.log(relations);
 
+  console.log("joinActive===");
+  console.log(joinActive);
+
   return (
     <Modal className="lingvo-modal2" dimmer open closeIcon onClose={onClose} size="fullscreen">
       <Modal.Header>{getTranslation("Join markups")}</Modal.Header>
@@ -37,14 +57,21 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 <Table celled padded className="lingvo-perspective-table">
                   <Table.Header>
                     <Table.Row>
-                      <Table.HeaderCell>{getTranslation("Left text")}</Table.HeaderCell>
+                      <Table.HeaderCell>
+                        {getTranslation("Left text")}: {firstTextRelation}
+                      </Table.HeaderCell>
                     </Table.Row>
                   </Table.Header>
                   <Table.Body>
                     {relations.map(relation => {
                       return (
                         <Table.Row key={relation.id}>
-                          <Table.Cell>Left text</Table.Cell>
+                          <Table.Cell
+                            onClick={e => setFirstTextRelation(relation.id)}
+                            className={(relation.id === firstTextRelation && "selected-text-relation") || ""}
+                          >
+                            Left text Left text Left text Left text Left text
+                          </Table.Cell>
                         </Table.Row>
                       );
                     })}
@@ -56,14 +83,21 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 <Table celled padded className="lingvo-perspective-table">
                   <Table.Header>
                     <Table.Row>
-                      <Table.HeaderCell>{getTranslation("Right text")}</Table.HeaderCell>
+                      <Table.HeaderCell>
+                        {getTranslation("Right text")}: {secondTextRelation}
+                      </Table.HeaderCell>
                     </Table.Row>
                   </Table.Header>
                   <Table.Body>
                     {relations.map(relation => {
                       return (
                         <Table.Row key={relation.id}>
-                          <Table.Cell>Right text</Table.Cell>
+                          <Table.Cell
+                            onClick={e => setSecondTextRelation(relation.id)}
+                            className={(relation.id === secondTextRelation && "selected-text-relation") || ""}
+                          >
+                            Right text Right text Right text Right text
+                          </Table.Cell>
                         </Table.Row>
                       );
                     })}
@@ -112,15 +146,17 @@ const JoinMarkupsModal = ({ perspectiveId, mode, relations, onClose }) => {
                 <Button
                   //icon={<i className="lingvo-icon lingvo-icon_check" />}
                   content={getTranslation("Join")}
-                  //onClick={onJoinMarkups}
+                  onClick={onAddRelation}
                   className="lingvo-button-greenest"
+                  disabled={!joinActive}
                 />
 
                 <Button
                   //icon={<i className="lingvo-icon lingvo-icon_check" />}
                   content={getTranslation("Delete")}
-                  //onClick={onJoinMarkups}
+                  //onClick={onDeleteRelation}
                   className="lingvo-button-redder"
+                  disabled={true}
                 />
               </div>
             </div>
diff --git a/src/components/JoinMarkupsModal/styles.scss b/src/components/JoinMarkupsModal/styles.scss
index 1276d32d..242a3c3e 100644
--- a/src/components/JoinMarkupsModal/styles.scss
+++ b/src/components/JoinMarkupsModal/styles.scss
@@ -42,6 +42,15 @@
       z-index: 1;
     }
 
+    & .ui.table tr td {
+      border-radius: 8px !important;
+    }
+
+    & .ui.table .selected-text-relation {
+      background: #4e46b4 !important;
+      color: #fff !important;
+    }
+
     &:first-of-type {
       margin: 0 10px 0 0;
     }
diff --git a/src/pages/Perspective/style.scss b/src/pages/Perspective/style.scss
index cbe9b621..4fe4c87e 100644
--- a/src/pages/Perspective/style.scss
+++ b/src/pages/Perspective/style.scss
@@ -435,8 +435,11 @@
       border-radius: 0 8px 8px 0 !important;
     }
 
-    @media only screen and (max-device-width: 767px), only screen and (max-width: 767px) {
+    &:only-child {
+      border-radius: 8px !important;
+    }
 
+    @media only screen and (max-device-width: 767px), only screen and (max-width: 767px) {
       &:first-child {
         border-radius: 8px 8px 0 0 !important;
       }
@@ -449,6 +452,10 @@
         border-radius: 0 0 8px 8px !important;
       }
 
+      &:only-child {
+        border-radius: 8px !important;
+      }
+
       &:not(:last-child) {
         &::after {
           content: none;
@@ -482,6 +489,10 @@
       border-radius: 0 8px 8px 0 !important;
     }
 
+    & td:only-child {
+      border-radius: 8px !important;
+    }
+
     @media only screen and (max-device-width: 767px), only screen and (max-width: 767px) {
       & td:first-child {
         border-radius: 8px 8px 0 0 !important;
@@ -494,6 +505,10 @@
       & td:last-child {
         border-radius: 0 0 8px 8px !important;
       }
+
+      & td:only-child {
+        border-radius: 8px !important;
+      }
     }
   }
 
@@ -586,7 +601,6 @@
     }
 
     &.ui.table thead tr {
-
       & th.lingvo-dnd-headercell {
         &_hidden {
           display: none !important;
@@ -690,7 +704,6 @@
       color: #372f9d;
     }
   }
-
 }
 /* /lingvo perspective component text */