diff --git a/web/ASC.Web.Client/src/components/pages/About/i18n.js b/web/ASC.Web.Client/src/components/pages/About/i18n.js
new file mode 100644
index 0000000000..9da7cbdbb3
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/About/i18n.js
@@ -0,0 +1,57 @@
+import i18n from "i18next";
+import Backend from "i18next-xhr-backend";
+
+const newInstance = i18n.createInstance();
+
+if (process.env.NODE_ENV === "production") {
+  newInstance
+    .use(Backend)
+    .init({
+      lng: 'en',
+      fallbackLng: "en",
+      debug: true,
+
+      interpolation: {
+        escapeValue: false, // not needed for react as it escapes by default
+        format: function (value, format) {
+          if (format === 'lowercase') return value.toLowerCase();
+          return value;
+        }
+      },
+
+      react: {
+        useSuspense: true
+      },
+      backend: {
+        loadPath: `/locales/About/{{lng}}/{{ns}}.json`
+      }
+    });
+} else if (process.env.NODE_ENV === "development") {
+
+  const resources = {
+    en: {
+      translation: require("./locales/en/translation.json")
+    }
+  };
+
+  newInstance.init({
+    resources: resources,
+    lng: 'en',
+    fallbackLng: "en",
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+      format: function (value, format) {
+        if (format === 'lowercase') return value.toLowerCase();
+        return value;
+      }
+    },
+
+    react: {
+      useSuspense: true
+    }
+  });
+}
+
+export default newInstance;
\ No newline at end of file
diff --git a/web/ASC.Web.Client/src/components/pages/About/index.js b/web/ASC.Web.Client/src/components/pages/About/index.js
index 5b8b767b35..e65d471c04 100644
--- a/web/ASC.Web.Client/src/components/pages/About/index.js
+++ b/web/ASC.Web.Client/src/components/pages/About/index.js
@@ -1,22 +1,179 @@
-import React from 'react';
+import React from "react";
+import { PageLayout, Text, Link } from "asc-web-components";
+import { useTranslation } from "react-i18next";
+import i18n from "./i18n";
+import version from "../../../../package.json";
+import styled from "styled-components";
 
-const About = () => (
-    <div>
-        <h1>Hello, world!</h1>
-        <p>Welcome to your new single-page application, built with:</p>
-        <ul>
-            <li><a href='https://get.asp.net/'>ASP.NET Core</a> and <a href='https://msdn.microsoft.com/en-us/library/67ef8sbd.aspx'>C#</a> for cross-platform server-side code</li>
-            <li><a href='https://facebook.github.io/react/'>React</a> and <a href='https://redux.js.org/'>Redux</a> for client-side code</li>
-            <li><a href='http://getbootstrap.com/'>Bootstrap</a> for layout and styling</li>
-        </ul>
-        <p>To help you get started, we've also set up:</p>
-        <ul>
-            <li><strong>Client-side navigation</strong>. For example, click <em>Counter</em> then <em>Back</em> to return here.</li>
-            <li><strong>Development server integration</strong>. In development mode, the development server from <code>create-react-app</code> runs in the background automatically, so your client-side resources are dynamically built on demand and the page refreshes when you modify any file.</li>
-            <li><strong>Efficient production builds</strong>. In production mode, development-time features are disabled, and your <code>dotnet publish</code> configuration produces minified, efficiently bundled JavaScript files.</li>
-        </ul>
-        <p>The <code>ClientApp</code> subdirectory is a standard React application based on the <code>create-react-app</code> template. If you open a command prompt in that directory, you can run <code>npm</code> commands such as <code>npm test</code> or <code>npm install</code>.</p>
-    </div>
-);
+const BodyStyle = styled.div`
+  .text_p {
+    text-align: center;
+  }
+  .text_span {
+    text-align: center;
+  }
+
+  .logo-img {
+    text-align: center;
+    max-width: 216px;
+    max-height: 35px;
+  }
+
+  .copyright-line {
+    padding-bottom: 15px;
+    text-align: center;
+
+    :before {
+      background-color: #e1e1e1;
+      content: "";
+      height: 2px;
+      margin-top: 9px;
+      width: 36%;
+      float: right;
+    }
+
+    :after {
+      background-color: #e1e1e1;
+      content: "";
+      height: 2px;
+      margin-top: 9px;
+      width: 36%;
+      float: left;
+    }
+  }
+`;
+
+const TitleStyle = styled.div`
+  padding: 8px;
+`;
+
+const Style = styled.div`
+  margin-top: 8px;
+  text-align: center;
+`;
+
+const VersionStyle = styled.div`
+  padding: 8px 0px 20px 0px;
+`;
+
+const Title = () => {
+  const { t } = useTranslation("translation", { i18n });
+  return (
+    <TitleStyle>
+      <Text.Body isBold={true} fontSize={18}>
+        {t("AboutCompanyTitle")}
+      </Text.Body>
+    </TitleStyle>
+  );
+};
+
+const Body = () => {
+  const { t } = useTranslation("translation", { i18n });
+
+  return (
+    <BodyStyle>
+      <p style={{ textAlign: "center", margin: "0px" }}>
+        <img
+          className="logo-img"
+          src="images/dark_general.png"
+          width="320"
+          height="181"
+          alt="Logo"
+        ></img>
+      </p>
+
+      <VersionStyle>
+        <Text.Body className="text_p" fontSize={14} color="#A3A9AE">
+          {`${t("AboutCompanyVersion")}: ${version.version}`}
+        </Text.Body>
+      </VersionStyle>
+
+      <Text.Body className="copyright-line" fontSize={14}>
+        {t("AboutCompanyLicensor")}
+      </Text.Body>
+
+      <Text.Body className="text_p" fontSize={16} isBold={true}>
+        Ascensio System SIA
+      </Text.Body>
+
+      <Style>
+        <Text.Body className="text_p" fontSize={12}>
+          <Text.Body
+            className="text_span"
+            fontSize={12}
+            as="span"
+            color="#A3A9AE"
+          >
+            {t("AboutCompanyAddressTitle")}:
+          </Text.Body>
+          20A-12 Ernesta Birznieka-Upisha street, Riga, Latvia, EU, LV-1050
+        </Text.Body>
+
+        <Text.Body
+          fontSize={12}
+          className="text_span"
+          as="span"
+          color="#A3A9AE"
+        >
+          {t("AboutCompanyEmailTitle")}:
+          <Link href="mailto:support@onlyoffice.com" fontSize={12}>
+            support@onlyoffice.com
+          </Link>
+        </Text.Body>
+
+        <div style={{ marginTop: "4px" }}>
+          <Text.Body className="text_p" fontSize={12}>
+            <Text.Body
+              fontSize={12}
+              className="text_span"
+              as="span"
+              color="#A3A9AE"
+            >
+              {t("AboutCompanyTelTitle")}:
+            </Text.Body>
+            +371 660-16425
+          </Text.Body>
+        </div>
+
+        <Link href="http://www.onlyoffice.com" fontSize={12}>
+          www.onlyoffice.com
+        </Link>
+
+        <div style={{ marginTop: "20px" }}>
+          <Text.Body className="text_p" fontSize={12}>
+            {t("LicensedUnder")}:{" "}
+            <Link
+              href="https://www.gnu.org/licenses/gpl-3.0.html"
+              isHovered={true}
+              fontSize={12}
+            >
+              GNU GPL v.3
+            </Link>{" "}
+          </Text.Body>
+
+          <Text.Body className="text_p" fontSize={12}>
+            {t("SourceCode")}:{" "}
+            <Link
+              href="https://github.com/ONLYOFFICE/CommunityServer"
+              isHovered={true}
+              fontSize={12}
+            >
+              GitHub
+            </Link>
+          </Text.Body>
+        </div>
+      </Style>
+    </BodyStyle>
+  );
+};
+
+const About = () => {
+  return (
+    <PageLayout
+      sectionHeaderContent={<Title />}
+      sectionBodyContent={<Body />}
+    />
+  );
+};
 
 export default About;
diff --git a/web/ASC.Web.Client/src/components/pages/About/locales/en/translation.json b/web/ASC.Web.Client/src/components/pages/About/locales/en/translation.json
new file mode 100644
index 0000000000..17bdd79d28
--- /dev/null
+++ b/web/ASC.Web.Client/src/components/pages/About/locales/en/translation.json
@@ -0,0 +1,14 @@
+{
+  "AboutCompanyTitle": "About this program",
+  "AboutCompanyVersion": "Version",
+  "AboutCompanyLicensor": "Copyright",
+  "AboutCompanyAddressTitle": "address",
+  "AboutCompanyEmailTitle": "email",
+  "AboutCompanyTelTitle": "tel.",
+  "LicensedUnder": "This software is licensed under ", "_comment": "{0}GNU GPL v.3{1}",
+
+
+
+
+  "SourceCode": "Source code is available on ", "_comment": "{0}GNU GPL v.3{1}"
+}
\ No newline at end of file
diff --git a/web/ASC.Web.Client/src/resourceConfig.json b/web/ASC.Web.Client/src/resourceConfig.json
index 7fffdf64ef..743666a7af 100644
--- a/web/ASC.Web.Client/src/resourceConfig.json
+++ b/web/ASC.Web.Client/src/resourceConfig.json
@@ -1,6 +1,17 @@
 {
   "pages": {
     "About": {
+      "Resource": [
+        "AboutCompanyTitle",
+        "AboutCompanyVersion",
+        "AboutCompanyLicensor",
+        "AboutCompanyAddressTitle",
+        "AboutCompanyEmailTitle",
+        "AboutCompanyTelTitle"
+      ],
+      "UserControlsCommonResource": [
+        "LicensedUnder"
+      ]
     },
     "Home": {
     },