diff --git a/components/Demo/DemoComp.js b/components/Demo/DemoComp.js
new file mode 100644
index 0000000..4c9a9ab
--- /dev/null
+++ b/components/Demo/DemoComp.js
@@ -0,0 +1,364 @@
+import React, { Component } from 'react';
+import { Row, Button, Container } from 'reactstrap';
+import Chart from 'react-apexcharts';
+import ApexCharts from 'apexcharts';
+import { Colxx, Separator } from '../common/CustomBootstrap';
+import Breadcrumb from '../../containers/navs/Breadcrumb';
+import IconCard from '../cards/IconCard';
+import Logs from '../../containers/dashboards/Logs'
+
+
+
+class DemoComp extends Component {    
+  constructor(props) {
+      super(props);
+
+      this.state = {
+          balance: 10000,
+          stocks: 0,
+          maxBuyStocks: 40,
+          lastStockPrice: 0,
+          commission: 0.05,
+          logs: [],
+
+          series: [{
+              data: [],
+          }],
+          options: {
+              chart: {
+                  id: 'ticks_chart',
+                  type: 'candlestick',
+                  height: 350,
+              },
+              title: {
+                  text: 'CandleStick Chart',
+                  align: 'left',
+              },
+              xaxis: {
+                  // type: 'datetime',
+                  type: 'numeric'
+              },
+              yaxis: {
+                  tooltip: {
+                      enabled: true,
+                  },
+              },
+          },
+          // Берём данные из LS, чтобы при возврате рисовался интересующий график.
+          currentTicks:  window?.localStorage.getItem('ticks') || '5min',
+      };
+      
+  }
+
+  resetState() {
+      this.setState({
+          balance: 10000,
+          stocks: 0,
+          maxBuyStocks: 40,
+          lastStockPrice: 0,
+          commission: 0.05,
+          logs: [],
+      });
+  }
+
+  // lastDate = 1538884800000
+  // [Timestamp, O, H, L, C]
+  // lastTick = [6604.98, 6606, 6604.07, 6606]
+
+  componentDidMount() {
+      this.getChartData();
+      this.resetState();
+  }
+
+  componentDidUpdate() {
+      if(!this.state.interactive) {
+          this.getChartData();
+      }
+  }
+
+  getHost(postfix) {
+      // Костыль для локальной разработки, чтобы порты сервера и клиента разнести.
+      // TODO: сделать в едином месте
+      let host = `https://${window?.location.host}/api/stocks/${postfix}`;
+      if (host.indexOf('3000') !== -1) {
+          // TODO: сделать в едином месте
+          host = host.replace('3000', '3001').replace('https', 'http');
+      }
+
+      return host;
+  }
+
+  getChartData() {
+      this.loadedData || (this.loadedData = {});
+      const current = this.loadedData[this.state.currentTicks];
+      if (this.loadedData[this.state.currentTicks] === true) {
+          return;
+      } else if (current) {
+          ApexCharts.exec('ticks_chart', 'updateSeries', [{
+              data: this.loadedData[this.state.currentTicks].series[0].data,
+          }]);
+          this.setState(this.loadedData[this.state.currentTicks]);
+          return;
+      } else {
+          this.loadedData[this.state.currentTicks] = true;
+      }
+
+      /*
+      {
+          x: new Date(1538874000000),
+          y: [6600.55, 6605, 6589.14, 6593.01],
+      },
+      */
+      const x = new XMLHttpRequest();
+      x.open('GET', this.getHost(`ticks/${this.state.currentTicks}`), true);
+      x.onload = () => {
+          const res = x.responseText && JSON.parse(x.responseText);
+
+          const series = this.state.series.slice(0);
+          let name;
+
+          series[0].data = !res || !Object.keys(res).length ? [] : res.map((t, i) => {
+              // ticker, per, date, time, open, hight, low, close, vol (объём торгов)
+              // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370
+              const tick = t.split(',');
+
+              if (!name) {
+                  name = tick[0];
+              }
+
+              if (!tick[2] || !tick[3]) {
+                  return false;
+              }
+
+              // console.log(`${tick[2]} ${tick[3]}`, [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])]);
+              // [Timestamp, O, H, L, C]
+              return {
+                  x: `${tick[2]} ${tick[3]}`,
+                  y: [parseFloat(tick[4]), parseFloat(tick[5]), parseFloat(tick[6]), parseFloat(tick[7])],
+                  
+              };
+          })
+          .filter(Boolean);
+
+          this.loadedData[this.state.currentTicks] = {
+              series,
+              options: {
+                  ...this.state.options,
+                  title: {
+                      ...this.state.options.title,
+                      text: name,
+                  },
+              },
+              stocksData: res.map(r => {
+                  const tick = r.split(',');
+                  if (!tick[2] || !tick[3]) {
+                      return false;
+                  }
+  
+                  // SBER,5,08/07/20,12:30:00,210.6100000,210.6800000,210.4700000,210.6000000,73370
+                  // Для упрощения наблюдений увеличиваем стоимость акций, чтобы следить за целыми числами
+                  return [tick[2] + ' ' + tick[3], parseInt(tick[5] * 10, 10), tick[8]];
+              }).filter(Boolean)
+          };
+
+          this.setState(this.loadedData[this.state.currentTicks]);
+
+          // ApexCharts.exec('ticks_chart', 'updateSeries', [{
+          //     data: series[0].data,
+          // }]);
+      };
+      x.withCredentials = true;
+      x.send();
+  }
+
+  render() {
+      const stockPrice = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].y[1];
+      const time = this.state.series[0].data.length && this.state.series[0].data[this.state.series[0].data.length-1].x;
+
+      return (
+          <Container>
+              <Row>
+                  <Colxx xxs="12">
+                      {this.props.match && <Breadcrumb heading="menu.start" match={this.props.match} />}
+                      <Separator className="mb-5" />
+                </Colxx>
+            </Row>
+              <Row>
+                  {/* <Colxx xxs="12" className="mb-4">
+                      <p><IntlMessages id="menu.start" /></p>
+                      {[
+                          '5min',
+                      ].map((t, i) => 
+                          <Button
+                              variant="secondary"
+                              key={i}
+                              onClick={() => {
+                                  window.localStorage.setItem('ticks', t);
+                                  this.setState({
+                                      currentTicks: t,
+                                      interactive: false,
+                                      dataBuff: undefined,
+                                  });
+                              }}
+                              size="lg"
+                          >
+                              {t}
+                          </Button>
+                      )}
+                </Colxx> */}
+            </Row>
+              <Row>
+                  <Colxx xxs="12" className="mb-34">
+                      {Boolean(this.state.series[0].data.length) && (
+                    <Chart
+                              options={this.state.options}
+                              series={this.state.series}
+                              type="candlestick"
+                              height={350}
+                          />
+                      )}
+                </Colxx>
+            </Row>
+
+            <Row>
+            <IconCard
+                  title="Balance"
+                  icon=""
+                  value={this.state.balance.toFixed(2)}
+                />
+            <IconCard
+                  title="Balance with stocks"
+                  icon=""
+                  value={(this.state.balance + this.state.stocks * stockPrice).toFixed(2)}
+                />
+            <IconCard
+                  title="Stocks delta"
+                  icon=""
+                  value={(this.state.stocks * stockPrice - this.state.stocks * this.state.lastStockPrice).toFixed(2)}
+                />
+            <IconCard
+                  title="Current price"
+                  icon=""
+                  value={stockPrice}
+                />
+              <IconCard
+                  title="Stocks count"
+                  icon=""
+                  value={this.state.stocks}
+                />
+              <IconCard
+                  title="Commission"
+                  icon=""
+                  value={this.state.commission}
+                />
+              </Row>
+              <Row><br/></Row>
+              <Row>
+            {!this.state.inProgress && <Button
+                  variant="secondary"
+                  onClick={() => {
+                      let data;
+
+                      this._savedData = data = this.state.series[0].data.slice(0);
+                      let i = 1;
+                      this._interval = window?.setInterval(() => {
+                          let slicedData = data.slice(0, i);
+                          let inProgress = slicedData.length !== data.length;
+
+                          if (!inProgress) {
+                              window?.clearInterval(this._interval);
+                          }
+
+                          this.setState({
+                              series: [
+                                  {
+                                      data: slicedData
+                                  }
+                              ],
+                              inProgress
+                          })
+                          ++i;
+                      }, 500);
+                  }}
+                  size="lg"
+              >
+                  Start
+              </Button>}
+              {this.state.inProgress && <Button
+                  variant="secondary"
+                  onClick={() => {
+                      window?.clearInterval(this._interval);
+                      this.setState({
+                          series: [
+                              {
+                                  data: this._savedData
+                              }
+                          ],
+                          inProgress: false
+                      })
+                      // ApexCharts.exec('ticks_chart', 'updateSeries', [{
+                      //     data: this.state.series[0].data
+                      // }]);
+                  }}
+                  size="lg"
+              >
+                  Stop
+              </Button>}
+             
+              {(this.state.balance >= stockPrice + this.state.commission || this.state.stocks) && (!this.state.stocks ? <Button
+                  variant="secondary"
+                  onClick={() => {
+                     const buyStocks = parseInt(Math.min(this.state.maxBuyStocks, this.state.balance / stockPrice), 10);
+
+                     const balance = this.state.balance - buyStocks * (stockPrice - this.state.commission);
+                     const log = {
+                          label: `Buy ${this.state.stocks} stock, price: ${stockPrice}`,
+                          time: time
+                     };
+
+                     this.setState({
+                          balance,
+                          stocks: buyStocks,
+                          lastStockPrice: stockPrice,
+                          logs: [].concat(this.state.logs, log)
+                     });
+                  }}
+                  size="lg"
+              >
+                  Buy
+              </Button> :
+              <Button
+                  variant="secondary"
+                  onClick={() => {
+                      const balance = this.state.balance + this.state.stocks * (stockPrice - this.state.commission);
+                      const log = {
+                           label: `Sell ${this.state.stocks} stock, price: ${stockPrice}`,
+                           time: time
+                      };
+
+                      this.setState({
+                           balance,
+                           stocks: 0,
+                           lastStockPrice: stockPrice,
+                           logs: [].concat(this.state.logs, log)
+                      });
+                  }}
+                  size="lg"
+              >
+                  Sell
+              </Button>)}
+            </Row>
+            <Row><br/></Row>
+            {/* from here */}
+            {/* to here */}
+            <Row><br/></Row>
+            <Row><br/></Row>
+            <Row>
+             <Logs logsData={this.state.logs} />
+            </Row>
+        </Container>
+      );
+  }
+}
+
+export default DemoComp
\ No newline at end of file
diff --git a/components/cards/IconCard.js b/components/cards/IconCard.js
new file mode 100644
index 0000000..469eb5e
--- /dev/null
+++ b/components/cards/IconCard.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { Card, CardBody } from 'reactstrap';
+import IntlMessages from "../../helpers/tensorflow/IntlMessages"
+
+const IconCard = ({
+    className = 'mb-4', icon, title, value,
+}) => (
+    <div className={`icon-row-item ${className}`}>
+    <Card>
+          <CardBody className="text-center">
+              <i className={icon} />
+              <p className="card-text font-weight-semibold mb-0">
+                  <IntlMessages id={title} />
+                </p>
+              <p className="lead text-center">{value}</p>
+            </CardBody>
+        </Card>
+  </div>
+);
+
+export default IconCard;
diff --git a/components/common/CustomBootstrap.js b/components/common/CustomBootstrap.js
new file mode 100644
index 0000000..48fb8a3
--- /dev/null
+++ b/components/common/CustomBootstrap.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { Col } from 'reactstrap';
+
+const Colxx = props => (
+  <Col {...props} widths={['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl']} />
+);
+const Separator = props => (
+  <div className={`separator ${props.className}`} />
+);
+export { Colxx, Separator };
diff --git a/containers/dashboards/Logs.js b/containers/dashboards/Logs.js
new file mode 100644
index 0000000..1ef1860
--- /dev/null
+++ b/containers/dashboards/Logs.js
@@ -0,0 +1,48 @@
+import React from 'react';
+import PerfectScrollbar from 'react-perfect-scrollbar';
+import { Card, CardBody, CardTitle } from 'reactstrap';
+
+import IntlMessages from '../../helpers/tensorflow/IntlMessages';
+
+
+const Logs = (params = [{ logsData: []}]) => (
+    <div>
+    <Card>
+          <CardBody>
+              <CardTitle>
+                  <IntlMessages id="dashboards.logs" />
+                </CardTitle>
+              <div className="dashboard-logs">
+                  <PerfectScrollbar
+                      options={{ suppressScrollX: true, wheelPropagation: false }}
+                    >
+                      <table className="table table-sm table-borderless">
+                          <tbody>
+                              {params && params.logsData.map((log, index) => (
+                                    <tr key={index}>
+                                        <td>
+                                            <span
+                                                className={`log-indicator align-middle ${
+                              log.color
+                            }`}
+                                          />
+                                      </td>
+                                        <td>
+                                            <span className="font-weight-medium">
+                                                {log.label}
+                                          </span>
+                                      </td>
+                                        <td className="text-right">
+                                            <span className="text-muted">{log.time}</span>
+                                      </td>
+                                </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </PerfectScrollbar>
+                </div>
+            </CardBody>
+        </Card>
+  </div>
+);
+export default Logs;
diff --git a/containers/navs/Breadcrumb.js b/containers/navs/Breadcrumb.js
new file mode 100644
index 0000000..c9c5997
--- /dev/null
+++ b/containers/navs/Breadcrumb.js
@@ -0,0 +1,47 @@
+import React from 'react';
+import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import NavLink from "next/link"
+import IntlMessages from '../../helpers/tensorflow/IntlMessages';
+
+const getMenuTitle = sub => <IntlMessages id={`menu.${sub}`} />;
+
+const getUrl = (path, sub, index) => {
+    if (index === 0) {
+        return '';
+    }
+    return path.split(sub)[0] + sub;
+};
+
+const BreadcrumbContainer = ({ heading, match }) => (
+    <>
+        {heading && <h1><IntlMessages id={heading} /></h1>}
+        <BreadcrumbItems match={match} />
+  </>
+);
+
+export const BreadcrumbItems = ({ match }) => {
+    const path = match.path.substr(1);
+    let paths = path.split('/');
+    if (paths[paths.length - 1].indexOf(':') > -1) {
+        paths = paths.filter(x => x.indexOf(':') === -1);
+    }
+    return (
+        <>
+        <Breadcrumb className="pt-0 breadcrumb-container d-none d-sm-block d-lg-inline-block">
+              {paths.map((sub, index) => (
+                    <BreadcrumbItem key={index} active={paths.length === index + 1}>
+                        {paths.length !== index + 1 ? (
+                            <NavLink href={`/${ getUrl(path, sub, index)}`}>
+                                {getMenuTitle(sub)}
+                          </NavLink>
+                        ) : (
+                            getMenuTitle(sub)
+                        )}
+                </BreadcrumbItem>
+                ))}
+            </Breadcrumb>
+      </>
+    );
+};
+
+export default BreadcrumbContainer;
diff --git a/helpers/tensorflow/IntlMessages.js b/helpers/tensorflow/IntlMessages.js
new file mode 100644
index 0000000..ea6833a
--- /dev/null
+++ b/helpers/tensorflow/IntlMessages.js
@@ -0,0 +1,8 @@
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+const InjectMassage = props => <FormattedMessage {...props} />;
+
+export default injectIntl(InjectMassage, {
+    withRef: false,
+});
diff --git a/package-lock.json b/package-lock.json
index 1da75aa..b9c1c0a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -363,11 +363,11 @@
       }
     },
     "@formatjs/ecma402-abstract": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.10.0.tgz",
-      "integrity": "sha512-WNkcUHC6xw12rWY87TUw6KXzb1LnOooYBLLqtyn1kW2j197rcwpqmUOJMBED56YcLzaJPfVw1L2ShiDhL5pVnQ==",
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.1.tgz",
+      "integrity": "sha512-tgtNODZUGuUI6PAcnvaLZpGrZLVkXnnAvgzOiueYMzFdOdcOw4iH1WKhCe3+r6VR8rHKToJ2HksUGNCB+zt/bg==",
       "requires": {
-        "@formatjs/intl-localematcher": "0.2.21",
+        "@formatjs/intl-localematcher": "0.2.22",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -379,9 +379,9 @@
       }
     },
     "@formatjs/fast-memoize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.0.tgz",
-      "integrity": "sha512-fObitP9Tlc31SKrPHgkPgQpGo4+4yXfQQITTCNH8AZdEqB7Mq4nPrjpUL/tNGN3lEeJcFxDbi0haX8HM7QvQ8w==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-1.2.1.tgz",
+      "integrity": "sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==",
       "requires": {
         "tslib": "^2.1.0"
       },
@@ -394,12 +394,12 @@
       }
     },
     "@formatjs/icu-messageformat-parser": {
-      "version": "2.0.14",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.14.tgz",
-      "integrity": "sha512-M79MdUMLnfLK8eMrznUwke6afH9G/eOQeYvMUJ7uElXIL+//PyyjOzb42hAYfDAGYsAcKA2TsUo33Yuy2lE4AQ==",
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.0.16.tgz",
+      "integrity": "sha512-sYg0ImXsAqBbjU/LotoCD9yKC5nUpWVy3s4DwWerHXD4sm62FcjMF8mekwudRk3eZLHqSO+M21MpFUUjDQ+Q5Q==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.10.0",
-        "@formatjs/icu-skeleton-parser": "1.3.1",
+        "@formatjs/ecma402-abstract": "1.11.1",
+        "@formatjs/icu-skeleton-parser": "1.3.3",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -411,11 +411,11 @@
       }
     },
     "@formatjs/icu-skeleton-parser": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.1.tgz",
-      "integrity": "sha512-WdPNjhv9e7EfyrIVYk6hN6/mC9YF+PcfFViDI2kATwoi1uKHr+AkQCMoNrWyCDdUQ+Dn50mQOlrEkCBXoLrkPQ==",
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.3.tgz",
+      "integrity": "sha512-ifWnzjmHPHUF89UpCvClTP66sXYFc8W/qg7Qt+qtTUB9BqRWlFeUsevAzaMYDJsRiOy4S2WJFrJoZgRKUFfPGQ==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.10.0",
+        "@formatjs/ecma402-abstract": "1.11.1",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -427,16 +427,16 @@
       }
     },
     "@formatjs/intl": {
-      "version": "1.15.2",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.15.2.tgz",
-      "integrity": "sha512-QYk0lUSrYprn2Lyui6iDhmHnSiXFTqKAMiveYOJPYQtcaWRwkCbcB0SALTZDc2kITrYxiP4/AS7ESF/0+SYSLQ==",
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.10.0",
-        "@formatjs/fast-memoize": "1.2.0",
-        "@formatjs/icu-messageformat-parser": "2.0.14",
-        "@formatjs/intl-displaynames": "5.2.5",
-        "@formatjs/intl-listformat": "6.3.5",
-        "intl-messageformat": "9.9.6",
+      "version": "1.18.3",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl/-/intl-1.18.3.tgz",
+      "integrity": "sha512-eMdU2FBAvC2vMeQRjvBhJeRNsftZ2VXdB4jW1KKbP72O4JWB9lv2KqEdS2jo6DfhDvm0EAMZXMNEEK8ybTxfyA==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.1",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.0.16",
+        "@formatjs/intl-displaynames": "5.4.0",
+        "@formatjs/intl-listformat": "6.5.0",
+        "intl-messageformat": "9.11.2",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -448,12 +448,12 @@
       }
     },
     "@formatjs/intl-displaynames": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.2.5.tgz",
-      "integrity": "sha512-iYlce/hG31ohJOwpv3yhOiEIwEBMqOt2kzA2BQTx1ra8ferBn4WlTxkouoDNiAKEBD1LFYZBIC25jsSJUJOEbg==",
+      "version": "5.4.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-displaynames/-/intl-displaynames-5.4.0.tgz",
+      "integrity": "sha512-zWmTkq9eGOeJCmw22KPXW6rlnx3Z3CIV+rc/jh9ytEfm1Ps/OgOITe4h6ZTDrQC+nXVACvLO1Kpes4jMWcjWuQ==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.10.0",
-        "@formatjs/intl-localematcher": "0.2.21",
+        "@formatjs/ecma402-abstract": "1.11.1",
+        "@formatjs/intl-localematcher": "0.2.22",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -465,12 +465,12 @@
       }
     },
     "@formatjs/intl-listformat": {
-      "version": "6.3.5",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.3.5.tgz",
-      "integrity": "sha512-GtiMMx5RB/gID7ydGr+i1lRbGu728plTfT196X151cE2PYEqC05BEuHQFlE1rcUGC2+RfFqlvmipYcbOqJTQug==",
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-listformat/-/intl-listformat-6.5.0.tgz",
+      "integrity": "sha512-gVyAV5QWWtq84MK4cAyJITW+Wb74c2+FT+wa8jhSPxXUky9B5z/k/Ff7or4Vb3KV0YYZuVBQ/vMIoD8Gr182ww==",
       "requires": {
-        "@formatjs/ecma402-abstract": "1.10.0",
-        "@formatjs/intl-localematcher": "0.2.21",
+        "@formatjs/ecma402-abstract": "1.11.1",
+        "@formatjs/intl-localematcher": "0.2.22",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -482,9 +482,9 @@
       }
     },
     "@formatjs/intl-localematcher": {
-      "version": "0.2.21",
-      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.21.tgz",
-      "integrity": "sha512-JTJeLiNwexN4Gy0cMxoUPvJbKhXdnSuo5jPrDafEZpnDWlJ5VDYta8zUVVozO/pwzEmFVHEUpgiEDj+39L4oMg==",
+      "version": "0.2.22",
+      "resolved": "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.22.tgz",
+      "integrity": "sha512-z+TvbHW8Q/g2l7/PnfUl0mV9gWxV4d0HT6GQyzkO5QI6QjCvCZGiztnmLX7zoyS16uSMvZ2PoMDfSK9xvZkRRA==",
       "requires": {
         "tslib": "^2.1.0"
       },
@@ -736,6 +736,11 @@
         "fastq": "^1.6.0"
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.2.tgz",
+      "integrity": "sha512-92FRmppjjqz29VMJ2dn+xdyXZBrMlE42AV6Kq6BwjWV7CNUW1hs2FtxSNLQE+gJhaZ6AAmYuO9y8dshhcBl7vA=="
+    },
     "@rushstack/eslint-patch": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.0.tgz",
@@ -790,9 +795,9 @@
       "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
     },
     "@types/react": {
-      "version": "17.0.35",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.35.tgz",
-      "integrity": "sha512-r3C8/TJuri/SLZiiwwxQoLAoavaczARfT9up9b4Jr65+ErAUX3MIkU0oMOQnrpfgHme8zIqZLX7O5nnjm5Wayw==",
+      "version": "17.0.38",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.38.tgz",
+      "integrity": "sha512-SI92X1IA+FMnP3qM5m4QReluXzhcmovhZnLNm3pyeQlooi02qI7sLiepEYqT678uNiyc25XfCqxREFpy3W7YhQ==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -956,6 +961,19 @@
         "picomatch": "^2.0.4"
       }
     },
+    "apexcharts": {
+      "version": "3.33.0",
+      "resolved": "https://registry.npmjs.org/apexcharts/-/apexcharts-3.33.0.tgz",
+      "integrity": "sha512-gOc0qZijuomtXTThLbb0sKn+mZJkVQADyK/Zw9vQ0JjKVbMYxzek61xk40hT49i1Sq6/MUqsz0WgUXYpqqf8Mg==",
+      "requires": {
+        "svg.draggable.js": "^2.2.2",
+        "svg.easing.js": "^2.0.0",
+        "svg.filter.js": "^2.0.2",
+        "svg.pathmorphing.js": "^0.1.3",
+        "svg.resize.js": "^1.4.3",
+        "svg.select.js": "^3.0.1"
+      }
+    },
     "argparse": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
@@ -1116,6 +1134,11 @@
       "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-5.2.0.tgz",
       "integrity": "sha512-D7iWRBvnZE8ecXiLj/9wbxH7Tk79fAh8IHaTNq1RWRixsS02W+5qS+iE9yq6RYl0asXx5tw0bLhmT5pIfbSquw=="
     },
+    "bootstrap": {
+      "version": "5.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
+      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1564,6 +1587,15 @@
         "esutils": "^2.0.2"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "domain-browser": {
       "version": "4.19.0",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
@@ -2599,12 +2631,13 @@
       }
     },
     "intl-messageformat": {
-      "version": "9.9.6",
-      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.9.6.tgz",
-      "integrity": "sha512-xgoBydnw9zGUtgCiUcxNTzrRLzAbBIgWyKvMjL2jFNCx7H0148GGQWNVOpoiON5SlcFr8lyMWdbb0m+HjydanQ==",
+      "version": "9.11.2",
+      "resolved": "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-9.11.2.tgz",
+      "integrity": "sha512-4wsinP2ObVK1Rz5C4121lgVeHeOCW32FOsqcVXtJNdlow+NypJKmnrije9rOc0bKxPwtto9IkXdgakXUmYXVHw==",
       "requires": {
-        "@formatjs/fast-memoize": "1.2.0",
-        "@formatjs/icu-messageformat-parser": "2.0.14",
+        "@formatjs/ecma402-abstract": "1.11.1",
+        "@formatjs/fast-memoize": "1.2.1",
+        "@formatjs/icu-messageformat-parser": "2.0.16",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -3343,6 +3376,11 @@
         "sha.js": "^2.4.8"
       }
     },
+    "perfect-scrollbar": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/perfect-scrollbar/-/perfect-scrollbar-1.5.5.tgz",
+      "integrity": "sha512-dzalfutyP3e/FOpdlhVryN4AJ5XDVauVWxybSkLZmakFE2sS3y3pc4JnSprw8tGmHvkaG5Edr5T7LBTZ+WWU2g=="
+    },
     "picomatch": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
@@ -3404,7 +3442,6 @@
       "version": "15.7.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
       "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -3414,8 +3451,7 @@
         "react-is": {
           "version": "16.13.1",
           "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-          "dev": true
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
         }
       }
     },
@@ -3510,6 +3546,14 @@
         "object-assign": "^4.1.1"
       }
     },
+    "react-apexcharts": {
+      "version": "1.3.9",
+      "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.3.9.tgz",
+      "integrity": "sha512-KPonT5uQPHOHSVgTNEzpB0HhCkZtoicQYGjR9P+3DRDSgTsC+DM2vDUfo/B2Fn1m+wdgVeDXWL0VJYDc6JD/tw==",
+      "requires": {
+        "prop-types": "^15.5.7"
+      }
+    },
     "react-dom": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz",
@@ -3520,20 +3564,25 @@
         "scheduler": "^0.20.2"
       }
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-intl": {
-      "version": "5.21.2",
-      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.21.2.tgz",
-      "integrity": "sha512-pRKndhmjbFOq9CoJHHnUgXYf1tz9t3nIfInZg5TQ9EqYs9PPlkHBp4WtFDcFcW5UGV/QX4no6irpfXFsVKNWUA==",
-      "requires": {
-        "@formatjs/ecma402-abstract": "1.10.0",
-        "@formatjs/icu-messageformat-parser": "2.0.14",
-        "@formatjs/intl": "1.15.2",
-        "@formatjs/intl-displaynames": "5.2.5",
-        "@formatjs/intl-listformat": "6.3.5",
+      "version": "5.24.3",
+      "resolved": "https://registry.npmjs.org/react-intl/-/react-intl-5.24.3.tgz",
+      "integrity": "sha512-SrV0Qs8Rg+Mlo2u0OqGJZ3pH3cF0lv3cVtHvVPksptrjlgvt6Lbc4vfzD1nPog/CPKzSSdNlLoMs5suHFdBnTw==",
+      "requires": {
+        "@formatjs/ecma402-abstract": "1.11.1",
+        "@formatjs/icu-messageformat-parser": "2.0.16",
+        "@formatjs/intl": "1.18.3",
+        "@formatjs/intl-displaynames": "5.4.0",
+        "@formatjs/intl-listformat": "6.5.0",
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/react": "16 || 17",
         "hoist-non-react-statics": "^3.3.2",
-        "intl-messageformat": "9.9.6",
+        "intl-messageformat": "9.11.2",
         "tslib": "^2.1.0"
       },
       "dependencies": {
@@ -3549,11 +3598,53 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-perfect-scrollbar": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/react-perfect-scrollbar/-/react-perfect-scrollbar-1.5.8.tgz",
+      "integrity": "sha512-bQ46m70gp/HJtiBOF3gRzBISSZn8FFGNxznTdmTG8AAwpxG1bJCyn7shrgjEvGSQ5FJEafVEiosY+ccER11OSA==",
+      "requires": {
+        "perfect-scrollbar": "^1.5.0",
+        "prop-types": "^15.6.1"
+      }
+    },
+    "react-popper": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz",
+      "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-refresh": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
       "integrity": "sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg=="
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "reactstrap": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/reactstrap/-/reactstrap-9.0.1.tgz",
+      "integrity": "sha512-89VOv7SRlAlpS7RwXhzOQkSWkuhBR8LBsPGfNHifNL3WhtNP9y1sBdTcTYyH1ee2QtI8zRdwD0T5I/blHiwemg==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "@popperjs/core": "^2.6.0",
+        "classnames": "^2.2.3",
+        "prop-types": "^15.5.8",
+        "react-popper": "^2.2.4",
+        "react-transition-group": "^4.4.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -3982,6 +4073,70 @@
         "has-flag": "^3.0.0"
       }
     },
+    "svg.draggable.js": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz",
+      "integrity": "sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==",
+      "requires": {
+        "svg.js": "^2.0.1"
+      }
+    },
+    "svg.easing.js": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz",
+      "integrity": "sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=",
+      "requires": {
+        "svg.js": ">=2.3.x"
+      }
+    },
+    "svg.filter.js": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz",
+      "integrity": "sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=",
+      "requires": {
+        "svg.js": "^2.2.5"
+      }
+    },
+    "svg.js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz",
+      "integrity": "sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA=="
+    },
+    "svg.pathmorphing.js": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz",
+      "integrity": "sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==",
+      "requires": {
+        "svg.js": "^2.4.0"
+      }
+    },
+    "svg.resize.js": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz",
+      "integrity": "sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==",
+      "requires": {
+        "svg.js": "^2.6.5",
+        "svg.select.js": "^2.1.2"
+      },
+      "dependencies": {
+        "svg.select.js": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz",
+          "integrity": "sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==",
+          "requires": {
+            "svg.js": "^2.2.5"
+          }
+        }
+      }
+    },
+    "svg.select.js": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz",
+      "integrity": "sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==",
+      "requires": {
+        "svg.js": "^2.6.5"
+      }
+    },
     "table": {
       "version": "6.7.3",
       "resolved": "https://registry.npmjs.org/table/-/table-6.7.3.tgz",
@@ -4174,6 +4329,14 @@
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
       "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ=="
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.1.1.tgz",
diff --git a/package.json b/package.json
index 70aa2e6..7b8f48e 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,15 @@
   "dependencies": {
     "@stoqey/ib": "^1.2.15",
     "@tinkoff/invest-openapi-js-sdk": "^1.5.0",
+    "apexcharts": "^3.33.0",
+    "bootstrap": "^5.1.3",
     "next": "12.0.4",
     "react": "17.0.2",
+    "react-apexcharts": "^1.3.9",
     "react-dom": "17.0.2",
-    "react-intl": "^5.21.2",
+    "react-intl": "^5.24.3",
+    "react-perfect-scrollbar": "^1.5.8",
+    "reactstrap": "^9.0.1",
     "styled-components": "^5.3.3"
   },
   "devDependencies": {
diff --git a/pages/_app.js b/pages/_app.js
index 5c6c656..bab8a6a 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,5 +1,6 @@
 import HeadHTML from '../components/layout/HeadHTML'
 import '../styles/globals.css'
+import 'bootstrap/dist/css/bootstrap.min.css';
 import App from 'next/app'
 import { IntlProvider } from 'react-intl'
 import useLang from '../content/locale'
diff --git a/pages/demo.js b/pages/demo.js
index 56b8ef5..9054217 100644
--- a/pages/demo.js
+++ b/pages/demo.js
@@ -1,101 +1,16 @@
-import React, { useEffect, useState } from 'react'
-import styled from 'styled-components'
-import HeaderLayout from '../components/layout/HeaderLayout'
-import { ButtonStyled } from '../styled/Buttons'
-import { AuthenticationTitle, LinkStyled } from '../styled/Texts'
-import { AuthInput, AuthForm } from '../styled/inputs'
-import Checkbox from '../components/checkbox/Checkbox'
-import Tconnector from '../tconnector-sdk/tconnector'
-import useInputOnChange from '../hooks-utils/useInputOnChange'
-import ChangePassFinam from '../components/changePassword/finamChangePass'
-import { useRouter } from 'next/dist/client/router'
+import React, { Component } from 'react';
+import dynamic from "next/dynamic";
 
-const Main = styled.main`
-  margin-top: 45px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`
+const Editor = dynamic(
+  () => {
+      return import("../components/Demo/DemoComp");
+   },{ loading: () => null, ssr: false }
+);
 
-const CheckboxesWrapper = styled.div`
-  width: 85%;
-  max-width: 600px;
-  display: flex;
-  justify-content: space-around;
-  margin-top: 20px;
-`
-
-const ChangePassLinkStyled = styled(LinkStyled)`
-  margin-left: auto;
-  margin-top: 10px;
-`
-function FinamAuth() {
-  const [isHFT, seetIsHFT] = useState(false)
-  const [loginValue, loginOnChange] = useInputOnChange()
-  const [passValue, passOnChange] = useInputOnChange()
-  const [addresValue, addresOnChange] = useInputOnChange('tr1.finam.ru:3900')
-  const [changePassPage, setChangePassPage] = useState(false)
-  const { push } = useRouter()
-  const changePage = () => setChangePassPage((prev) => !prev)
-  const handleOnHFTchange = () => {
-    seetIsHFT((prev) => !prev)
-  }
-
-  const handleOnSubmit = async () => {
-    const [host, port] = addresValue.split(':')
-    const tconnector = await Tconnector.getTc({
-      isHFT,
-      host: '176.124.99.109',
-      port: '12345',
-    })
-
-    const res = await tconnector.api.connect({
-      login: loginValue,
-      password: passValue,
-      host,
-      port,
-    })
-    console.log(res)
-    if (!res.error) push('/')
-  }
-  if (changePassPage) return <ChangePassFinam changePage={changePage} />
-  return (
-    <>
-      <HeaderLayout />
-      <Main>
-        <AuthenticationTitle>Finam</AuthenticationTitle>
-        <AuthForm onSubmit={handleOnSubmit}>
-          <AuthInput
-            placeholder="Login"
-            value={loginValue}
-            onChange={loginOnChange}
-          />
-          <AuthInput
-            placeholder="Passowrd"
-            value={passValue}
-            onChange={passOnChange}
-          />
-          <AuthInput
-            placeholder="Addres and port"
-            value={addresValue}
-            onChange={addresOnChange}
-          />
-          <ChangePassLinkStyled onClick={changePage}>
-            change pass
-          </ChangePassLinkStyled>
-          <CheckboxesWrapper>
-            <Checkbox handleOnChange={handleOnHFTchange} checkedBox={isHFT}>
-              HFT
-            </Checkbox>
-            <Checkbox handleOnChange={handleOnHFTchange} checkedBox={!isHFT}>
-              NoHFT
-            </Checkbox>
-          </CheckboxesWrapper>
-        </AuthForm>
-        <ButtonStyled onClick={handleOnSubmit}>Submit</ButtonStyled>
-      </Main>
-    </>
-  )
+const Demo = () => {
+  return <div>
+    <Editor />
+  </div>
 }
 
-export default FinamAuth
+export default Demo