diff --git a/src/Layout/Routes.js b/src/Layout/Routes.js
index 4f645908..8ad2bb3a 100644
--- a/src/Layout/Routes.js
+++ b/src/Layout/Routes.js
@@ -4,14 +4,14 @@ import { Route, Routes } from "react-router-dom";
 // eslint-disable-next-line import/no-unresolved
 import config from "config";
 import AuthorsRoute from "pages/AuthorsRoute";
+import ComplexDistance from "pages/ComplexDistance";
+import CorpImport from "pages/CorpImport";
 import { CreateCorpus, CreateDictionary } from "pages/CreateDictionary";
 import { CorpusDashboard, DictionaryDashboard, ParallelCorporaDashboard } from "pages/Dashboard";
 import DashboardRoute from "pages/DashboardRoute";
 import Desktop from "pages/Desktop";
 import DialeqtImport from "pages/DialeqtImport";
 import DictImport from "pages/DictImport";
-import ComplexDistance from "pages/ComplexDistance";
-import CorpImport from "pages/CorpImport";
 import DictionariesAll from "pages/DictionariesAll";
 import DistanceMap from "pages/DistanceMap";
 import MapSelectedLanguages from "pages/DistanceMap/map";
diff --git a/src/components/CognateAnalysisModal/index.js b/src/components/CognateAnalysisModal/index.js
index fc8d5917..37f19ec9 100644
--- a/src/components/CognateAnalysisModal/index.js
+++ b/src/components/CognateAnalysisModal/index.js
@@ -247,6 +247,26 @@ const computeMorphCognateAnalysisMutation = gql`
   }
 `;
 
+const computeComplexDistanceMutation = gql`
+  mutation complexDistance (
+    $resultPool: [ObjectVal]!
+    $debugFlag: Boolean
+  ) {
+    complex_distance(
+      result_pool: $resultPool
+      debug_flag: $debugFlag
+    ) {
+      result
+      minimum_spanning_tree
+      embedding_2d
+      embedding_3d
+      language_name_list
+      message
+      triumph
+    }
+  }
+`;
+
 const SUGGESTIONS_PER_PAGE = 50;
 
 function equalIds(id_a, id_b) {
@@ -1265,6 +1285,7 @@ class CognateAnalysisModal extends React.Component {
       xlsx_url: "",
       json_url: "",
       figure_url: "",
+      fileSuite: null,
 
       minimum_spanning_tree: [],
       embedding_2d: [],
@@ -1340,6 +1361,7 @@ class CognateAnalysisModal extends React.Component {
     this.admin_section_render = this.admin_section_render.bind(this);
 
     this.suggestions_render = this.suggestions_render.bind(this);
+    this.brose_files_render = this.brose_files_render.bind(this);
 
     this.sg_connect = this.sg_connect.bind(this);
   }
@@ -1985,6 +2007,16 @@ class CognateAnalysisModal extends React.Component {
     }
   }
 
+  handleComplexDistanceResult({ data: { complex_distance }})
+  {
+    this.setState({
+      ...complex_distance,
+      /* Calculate plotly data */
+      ...this.handleResult(complex_distance),
+      computing: false
+    });
+  }
+
   handleSwadeshResult({ data: { swadesh_analysis }})
   {
     this.setState({
@@ -2103,7 +2135,13 @@ class CognateAnalysisModal extends React.Component {
   }
 
   handleCreate() {
-    const { perspectiveId, computeCognateAnalysis, computeSwadeshAnalysis, computeMorphCognateAnalysis } = this.props;
+    const {
+      perspectiveId,
+      computeCognateAnalysis,
+      computeSwadeshAnalysis,
+      computeMorphCognateAnalysis,
+      computeComplexDistance
+    } = this.props;
 
     const groupField = this.fieldDict[this.state.groupFieldIdStr];
 
@@ -2214,6 +2252,30 @@ class CognateAnalysisModal extends React.Component {
         data => this.handleMorphologyResult(data),
         error_data => this.handleError(error_data)
       );
+    } else if (this.props.mode === "complex_distance") {
+      this.setState({ computing: true });
+
+      const { fileSuite, debugFlag } = this.state;
+      const resultPool = new Array(fileSuite.length);
+
+      for (const [index, file] of fileSuite.entries()) {
+        const reader = new FileReader();
+        reader.onload = () => {
+          resultPool[index] = JSON.parse(reader.result);
+          if ((index + 1) == fileSuite.length) {
+            computeComplexDistance({
+              variables: {
+                resultPool,
+                debugFlag
+              }
+            }).then(
+              data => this.handleComplexDistanceResult(data),
+              error_data => this.handleError(error_data)
+            );
+          }
+        };
+        reader.readAsText(file);
+      }
     } else {
       /* Otherwise we will launch it as usual and then will wait for results to display them. */
       this.setState({
@@ -2784,6 +2846,40 @@ class CognateAnalysisModal extends React.Component {
     );
   }
 
+  brose_files_render() {
+
+    const { fileSuite } = this.state;
+
+    return (
+      <div className="lingvo-cognate-result-block">
+        <span>
+          { getTranslation(
+              fileSuite ? "Json file(s) for complex result:" : "Please select result file(s) for calculating."
+          )}
+        </span>
+
+        { fileSuite && fileSuite.map(({ name: fileName }) => (
+          <Label style={{ margin: "0.5em" }}>
+            <Icon name="file outline" />
+              { fileName }
+          </Label>
+        ))}
+
+        <Button style={{ marginLeft: "1em" }} onClick={() => document.getElementById("file-select").click()}>
+          {`${getTranslation("Browse")}...`}
+        </Button>
+
+        <Input
+          id="file-select"
+          type="file"
+          multiple
+          style={{ display: "none" }}
+          onChange={e => this.setState({ fileSuite: Array.from(e.target.files) })}
+        />
+      </div>
+    )
+  }
+
   render() {
     if (!this.state.initialized) {
       return (
@@ -3141,7 +3237,7 @@ class CognateAnalysisModal extends React.Component {
                   </div>
                 </div>
               )}
-              {! /swadesh$/.test(mode) && ! /morphology$/.test(mode) && (
+              {! /swadesh$/.test(mode) && ! /morphology$/.test(mode) && ! /complex_distance$/.test(mode) && (
                 <div><pre>{this.state.result}</pre></div>
               ) || (
                 <div dangerouslySetInnerHTML={{ __html: this.state.result }}></div>
@@ -3160,7 +3256,9 @@ CognateAnalysisModal.propTypes = {
   perspectiveId: PropTypes.array.isRequired,
   closeModal: PropTypes.func.isRequired,
   computeCognateAnalysis: PropTypes.func.isRequired,
-  computeSwadeshAnalysis: PropTypes.func.isRequired
+  computeSwadeshAnalysis: PropTypes.func.isRequired,
+  computeMorphCognateAnalysis: PropTypes.func.isRequired,
+  computeComplexDistance: PropTypes.func.isRequired
 };
 
 export default compose(
@@ -3173,6 +3271,7 @@ export default compose(
   graphql(computeCognateAnalysisMutation, { name: "computeCognateAnalysis" }),
   graphql(computeSwadeshAnalysisMutation, { name: "computeSwadeshAnalysis" }),
   graphql(computeMorphCognateAnalysisMutation, { name: "computeMorphCognateAnalysis" }),
+  graphql(computeComplexDistanceMutation, { name: "computeComplexDistance" }),
   graphql(connectMutation, { name: "connectGroup" }),
   withApollo
 )(CognateAnalysisModal);
diff --git a/src/pages/ToolsRoute/index.js b/src/pages/ToolsRoute/index.js
index 9eae121d..08fc86c2 100644
--- a/src/pages/ToolsRoute/index.js
+++ b/src/pages/ToolsRoute/index.js
@@ -1,7 +1,7 @@
 import React, { useContext } from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
-
+import { Button } from "semantic-ui-react";
 import Footer from "components/Footer";
 import TranslationContext from "Layout/TranslationContext";
 
@@ -13,6 +13,8 @@ import imageSearch from "../../images/location_search.svg";
 import imageTranslations from "../../images/text_field.svg";
 import imageValency from "../../images/verb_valency.svg";
 
+import { openModal as cognateAnalysisOpenModal } from "ducks/cognateAnalysis";
+
 import "./styles.scss";
 
 function ToolsRoute(props) {
@@ -77,10 +79,10 @@ function ToolsRoute(props) {
               </Link>
             )}
             {props.user.id !== undefined && (
-              <Link className="card-item" to="/complex_distance">
+              <Button className="card-item" onClick={() => cognateAnalysisOpenModal(null, "complex_distance")}>
                 <label className="card-item__label">{getTranslation("Get complex distance between languages")}</label>
                 <img className="card-item__img card-item__img_map" src={imageMap} />
-              </Link>
+              </Button>
             )}
           </div>
         </div>