From ea0e8b48008eb352ceecb66435c722b67948c223 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 14:22:45 +0700
Subject: [PATCH 01/19] + Implement ui kit & basic redesign + Create identity
 list and single pages

---
 packages/frontend/package.json                |   3 +-
 .../frontend/src/components/Identifier.js     |  19 ++
 .../frontend/src/components/RootComponent.js  |  80 ++------
 .../src/components/blocks/BlocksList.js       |  32 +++
 .../src/components/blocks/BlocksList.scss     |   3 +
 .../src/components/blocks/BlocksListItem.js   |  47 +++++
 .../src/components/blocks/BlocksListItem.scss |  68 +++++++
 .../dataContracts/DataContractsList.js        |  26 +++
 .../dataContracts/DataContractsListItem.js    |  31 +++
 .../dataContracts/DataContractsListItem.scss  |  10 +
 .../src/components/documents/DocumentsList.js |  24 +++
 .../components/documents/DocumentsList.scss   |   6 +
 .../components/documents/DocumentsListItem.js |  19 ++
 .../documents/DocumentsListItem.scss          |  18 ++
 .../goToHeightForm/GoToHeightForm.js          |  10 +-
 .../goToHeightForm/GoToHeightForm.scss        |  55 ++++++
 .../goToHeightForm/go_to_height_form.css      |  49 -----
 .../components/identities/IdentitiesList.js   |  18 ++
 .../identities/IdentitiesListItem.js          |  28 +++
 .../identities/IdentitiesListItem.scss        |  13 ++
 .../frontend/src/components/navbar/Navbar.js  |  91 +++++++++
 .../src/components/navbar/Navbar.scss         |   6 +
 .../pageSizeSelector/PageSizeSelector.js      |   6 +-
 .../pageSizeSelector/PageSizeSelector.scss    |  14 ++
 .../pageSizeSelector/page_size_selector.css   |  14 --
 .../components/search/GlobalSearchInput.js    |  99 ++++++++++
 .../transactions/TransactionsListItem.js      |  37 ++++
 .../transactions/TransactionsListItem.scss    |  45 +++++
 .../transactions/transactionsList.js          |  36 ++++
 packages/frontend/src/index.css               |   5 +-
 packages/frontend/src/index.js                |  15 ++
 packages/frontend/src/routes/block/block.css  |  58 ------
 .../frontend/src/routes/block/block.route.js  |  63 ------
 .../frontend/src/routes/blocks/blocks.css     | 166 ----------------
 .../src/routes/blocks/blocks.route.js         |  77 +++++++-
 .../src/routes/dataContract/DataContract.scss |  23 +++
 .../dataContract/data.contract.route.js       | 181 ++++++++++-------
 .../routes/dataContract/data_contract.scss    | 145 --------------
 .../dataContract/documents_list_item.scss     |  33 ----
 .../dataContracts/data.contracts.route.js     |  52 ++---
 .../routes/dataContracts/data_contracts.css   |  33 ----
 .../src/routes/document/document.route.js     |  82 ++++++--
 .../src/routes/document/document.scss         |  40 +---
 packages/frontend/src/routes/home/home.css    |  87 ---------
 .../frontend/src/routes/home/home.route.js    | 176 ++++++++++++-----
 .../src/routes/identities/identities.route.js |  71 +++++++
 .../src/routes/identities/identities.scss     |   3 +
 .../src/routes/identity/identity.route.js     | 183 ++++++++++++++++++
 .../src/routes/identity/identity.scss         |   3 +
 .../routes/transaction/transaction.route.js   |  73 ++++---
 packages/frontend/src/styles/mixins.scss      |  19 ++
 packages/frontend/src/styles/theme.js         |  49 +++++
 packages/frontend/src/styles/theme.scss       |  16 ++
 packages/frontend/src/styles/variables.scss   |   0
 packages/frontend/src/util/Api.js             |   7 +-
 55 files changed, 1617 insertions(+), 950 deletions(-)
 create mode 100644 packages/frontend/src/components/Identifier.js
 create mode 100644 packages/frontend/src/components/blocks/BlocksList.js
 create mode 100644 packages/frontend/src/components/blocks/BlocksList.scss
 create mode 100644 packages/frontend/src/components/blocks/BlocksListItem.js
 create mode 100644 packages/frontend/src/components/blocks/BlocksListItem.scss
 create mode 100644 packages/frontend/src/components/dataContracts/DataContractsList.js
 create mode 100644 packages/frontend/src/components/dataContracts/DataContractsListItem.js
 create mode 100644 packages/frontend/src/components/dataContracts/DataContractsListItem.scss
 create mode 100644 packages/frontend/src/components/documents/DocumentsList.js
 create mode 100644 packages/frontend/src/components/documents/DocumentsList.scss
 create mode 100644 packages/frontend/src/components/documents/DocumentsListItem.js
 create mode 100644 packages/frontend/src/components/documents/DocumentsListItem.scss
 create mode 100644 packages/frontend/src/components/goToHeightForm/GoToHeightForm.scss
 delete mode 100644 packages/frontend/src/components/goToHeightForm/go_to_height_form.css
 create mode 100644 packages/frontend/src/components/identities/IdentitiesList.js
 create mode 100644 packages/frontend/src/components/identities/IdentitiesListItem.js
 create mode 100644 packages/frontend/src/components/identities/IdentitiesListItem.scss
 create mode 100644 packages/frontend/src/components/navbar/Navbar.js
 create mode 100644 packages/frontend/src/components/navbar/Navbar.scss
 create mode 100644 packages/frontend/src/components/pageSizeSelector/PageSizeSelector.scss
 delete mode 100644 packages/frontend/src/components/pageSizeSelector/page_size_selector.css
 create mode 100644 packages/frontend/src/components/search/GlobalSearchInput.js
 create mode 100644 packages/frontend/src/components/transactions/TransactionsListItem.js
 create mode 100644 packages/frontend/src/components/transactions/TransactionsListItem.scss
 create mode 100644 packages/frontend/src/components/transactions/transactionsList.js
 delete mode 100644 packages/frontend/src/routes/block/block.css
 delete mode 100644 packages/frontend/src/routes/block/block.route.js
 delete mode 100644 packages/frontend/src/routes/blocks/blocks.css
 create mode 100644 packages/frontend/src/routes/dataContract/DataContract.scss
 delete mode 100644 packages/frontend/src/routes/dataContract/data_contract.scss
 delete mode 100644 packages/frontend/src/routes/dataContract/documents_list_item.scss
 delete mode 100644 packages/frontend/src/routes/dataContracts/data_contracts.css
 create mode 100644 packages/frontend/src/routes/identities/identities.route.js
 create mode 100644 packages/frontend/src/routes/identities/identities.scss
 create mode 100644 packages/frontend/src/routes/identity/identity.route.js
 create mode 100644 packages/frontend/src/routes/identity/identity.scss
 create mode 100644 packages/frontend/src/styles/mixins.scss
 create mode 100644 packages/frontend/src/styles/theme.js
 create mode 100644 packages/frontend/src/styles/theme.scss
 create mode 100644 packages/frontend/src/styles/variables.scss

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index 45632dc07..cb3bbc845 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -3,6 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.8.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -14,7 +16,6 @@
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.12.1",
     "react-scripts": "5.0.1",
-    "react-tabs": "^6.0.2",
     "sass": "^1.69.2",
     "web-vitals": "^2.1.4"
   },
diff --git a/packages/frontend/src/components/Identifier.js b/packages/frontend/src/components/Identifier.js
new file mode 100644
index 000000000..278722653
--- /dev/null
+++ b/packages/frontend/src/components/Identifier.js
@@ -0,0 +1,19 @@
+
+function Identifier ({value, maxSymbols = -1}) {
+
+    if (maxSymbols > 0 && maxSymbols < value.length) {
+        return (
+            <>
+                {value.slice(0, maxSymbols)}...{value.slice(value.length - maxSymbols, value.length)}
+            </>
+        );
+    } else {
+        return (
+            <>
+                {value}
+            </>
+        );
+    }
+}
+
+export default Identifier;
\ No newline at end of file
diff --git a/packages/frontend/src/components/RootComponent.js b/packages/frontend/src/components/RootComponent.js
index b307c8b62..5c7e6d600 100644
--- a/packages/frontend/src/components/RootComponent.js
+++ b/packages/frontend/src/components/RootComponent.js
@@ -1,79 +1,21 @@
 import {Outlet, Link} from "react-router-dom";
 import "./root.css";
 import React, {useState} from 'react';
-import * as Api from '../util/Api'
-import {useNavigate} from "react-router-dom";
-import ModalWindow from "./ModalWindow";
+import Navbar from "../components/navbar/Navbar";
+import theme from "../styles/theme";
+import "../styles/theme.scss";
+import { ChakraProvider} from '@chakra-ui/react'
 
-export default function RootComponent() {
-    let navigate = useNavigate();
 
-    const [showModal, setShowModal] = useState(false)
-    const [modalText, setModalText] = useState("false")
-
-    const showModalWindow = (text, timeout) => {
-        setShowModal(true)
-        setModalText(text)
-
-        if (timeout) {
-            setTimeout(() => {
-                setShowModal(false)
-                setModalText("")
-            }, timeout)
-        }
-    }
-
-    const handleKeyPress = async (event) => {
-        if (event.key === 'Enter') {
-            try {
-                const searchResult = await Api.search(searchQuery)
-
-                if (searchResult?.block) {
-                    // redirect to blocks
-                    console.log(searchResult?.block.header.hash)
-                    setSearchQuery("")
-                    return navigate(`/block/${searchResult?.block.header.hash}`)
-                }
-
-                if (searchResult?.transaction) {
-                    setSearchQuery("")
-                    return navigate(`/transaction/${searchResult?.transaction.hash}`)
-                }
-
-                if (searchResult?.dataContract) {
-                    setSearchQuery("")
-                    return navigate(`/dataContract/${searchResult?.dataContract.identifier}`)
-                }
-
-                if (searchResult?.document) {
-                    setSearchQuery("")
-                    return navigate(`/document/${searchResult?.document.identifier}`)
-                }
-
-                showModalWindow('Not found', 6000)
-            } catch (e) {
-                showModalWindow('Not found', 6000)
-            }
-        }
-    }
-
-    const handleSearchInput = (event) => {
-        setSearchQuery(event.target.value)
-    }
-
-    const [searchQuery, setSearchQuery] = useState("");
+export default function RootComponent({cookies}) {
 
     return (
-        <div>
-            <div className="topnav">
-                <Link to="/">Home</Link>
-                <Link to="/blocks">Blocks</Link>
-                <Link to="/dataContracts">Data Contracts</Link>
-                <input value={searchQuery} type="text" placeholder="Search..." onChange={handleSearchInput}
-                       onKeyPress={handleKeyPress}/>
-                <ModalWindow open={showModal} text={modalText} setShowModal={setShowModal}/>
-            </div>
+        <ChakraProvider theme={theme}>
+            
+            <Navbar/>
+
             <Outlet/>
-        </div>
+
+        </ChakraProvider>
     );
 }
diff --git a/packages/frontend/src/components/blocks/BlocksList.js b/packages/frontend/src/components/blocks/BlocksList.js
new file mode 100644
index 000000000..2e9471e2b
--- /dev/null
+++ b/packages/frontend/src/components/blocks/BlocksList.js
@@ -0,0 +1,32 @@
+import {Link} from "react-router-dom";
+import BlocksListItem from './BlocksListItem'
+import './BlocksList.scss'
+
+
+function BlocksList ({items = [], columnsCount = -1, size = 'l'}) {
+    return( 
+        <div 
+            className='BlocksList'
+            style={{
+                columnCount: items.length > 1 ? columnsCount : 1,
+            }}
+        >
+            {items.map((block) =>
+                <BlocksListItem
+                    key={block.hash}
+                    hash={block.header.hash}
+                    height={block.header.height}
+                    timestamp={block.header.timestamp}
+                    txsLength={block.txs.length}
+                    size={size}
+                />
+            )}
+
+            {items.length === 0 &&
+                <div className='documents_list__empty_message'>There are no documents created yet.</div>
+            }
+        </div>
+    )
+}
+
+export default BlocksList;
\ No newline at end of file
diff --git a/packages/frontend/src/components/blocks/BlocksList.scss b/packages/frontend/src/components/blocks/BlocksList.scss
new file mode 100644
index 000000000..1f6642800
--- /dev/null
+++ b/packages/frontend/src/components/blocks/BlocksList.scss
@@ -0,0 +1,3 @@
+.BlocksList {
+    
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js
new file mode 100644
index 000000000..d39bc85f1
--- /dev/null
+++ b/packages/frontend/src/components/blocks/BlocksListItem.js
@@ -0,0 +1,47 @@
+import {Link} from "react-router-dom";
+import './BlocksListItem.scss'
+import Identifier from '../Identifier'
+
+
+function BlocksListItem ({ hash, height = '', timestamp, txsLength, size = 'l' }) {
+    let hashMaxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            hashMaxSymbols = 6;
+            break;
+        case 's':
+            hashMaxSymbols = 6;
+            break;
+    }
+
+    return(
+        <Link to={`/block/${hash}`} className={"BlocksListItem"}>
+            {(size === 'l' && 
+                <span className={"BlocksListItem__Height"}>{height}</span>
+            )}
+
+            {typeof timestamp === 'string' &&
+                <span className={"BlocksListItem__Timestamp"}>
+                    {new Date(timestamp).toLocaleString()}
+                </span>
+            }
+
+
+            {typeof hash === 'string' &&
+                <span className={"BlocksListItem__Hash"}>
+                    <Identifier value={hash} maxSymbols={hashMaxSymbols}/>
+                </span>
+            }
+
+            {(typeof txsLength === 'number' || typeof txsLength === 'string') &&
+                <span className={"BlocksListItem__Txs"}>
+                    ({txsLength} txs)
+                </span>
+            }
+            
+        </Link>
+    )
+}
+
+export default BlocksListItem;
\ No newline at end of file
diff --git a/packages/frontend/src/components/blocks/BlocksListItem.scss b/packages/frontend/src/components/blocks/BlocksListItem.scss
new file mode 100644
index 000000000..f9191eb56
--- /dev/null
+++ b/packages/frontend/src/components/blocks/BlocksListItem.scss
@@ -0,0 +1,68 @@
+@use '../../styles/mixins.scss';
+
+.BlocksListItem {
+    @include mixins.def_list_item;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &__Hash {
+        color: var(--chakra-colors-gray-200);
+        flex-grow: 1;
+
+        text-overflow: ellipsis;
+        overflow: hidden;
+        line-height: 24px;
+        white-space: nowrap;
+    }
+
+    &__Height {
+        font-weight: bold;
+        margin-right: 8px;
+        word-break: keep-all;
+    }
+    
+    &__Timestamp {
+        margin-right: 16px;
+        text-wrap: nowrap;
+    }
+
+    &__Txs {
+        margin-left: 12px;
+        text-wrap: nowrap;
+    } 
+
+
+    @media screen and (max-width: 620px) {
+        flex-wrap: wrap;
+    
+        &__Height {
+            order: 1;
+            margin-right: 4px;
+        }
+
+        &__Txs {
+            order: 2;
+            margin-left: 0;
+            margin-right: 6px;
+        }
+
+        &__Timestamp {
+            order: 3;
+        }
+
+        &__Hash {
+            order: 4;
+            flex-grow: unset;
+            margin-top: 2px;
+        }
+    }
+
+    @media screen and (max-width: 400px) {
+        &__Timestamp {
+            text-wrap: wrap;
+        }
+    }
+
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/dataContracts/DataContractsList.js b/packages/frontend/src/components/dataContracts/DataContractsList.js
new file mode 100644
index 000000000..e63b3c074
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractsList.js
@@ -0,0 +1,26 @@
+import DataContractsListItem from './DataContractsListItem'
+
+
+function DataContractsList ({items = [], size = 'l'}) {
+    return (
+
+        <div className='DataContractsList'>
+
+            {items.map((dataContract, key) =>
+                <DataContractsListItem
+                    key={key}
+                    identifier={dataContract.identifier}
+                    size={size}
+                />
+            )}
+
+            {items.length === 0 &&
+                <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
+            }
+
+        </div>
+
+    );
+}
+
+export default DataContractsList;
\ No newline at end of file
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
new file mode 100644
index 000000000..dc7e12e6e
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
@@ -0,0 +1,31 @@
+import {Link} from "react-router-dom";
+import Identifier from '../Identifier'
+import './DataContractsListItem.scss'
+
+
+function DataContractsListItem ({identifier, size = 'l'}) {
+    let maxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            maxSymbols = 6;
+        break;
+        case 's':
+            maxSymbols = 3;
+        break;
+    }
+
+    return (
+        <>
+            {typeof identifier === 'string' &&
+                <Link to={`/dataContract/${identifier}`} className="DataContractsListItem">
+                <div className="DataContractsListItem__Identifier">
+                    <Identifier value={identifier} maxSymbols={maxSymbols}/>
+                </div>
+            </Link>
+            }
+        </>
+    );
+}
+
+export default DataContractsListItem;
\ No newline at end of file
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
new file mode 100644
index 000000000..5466a7a9d
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
@@ -0,0 +1,10 @@
+@use '../../styles/mixins.scss';
+
+.DataContractsListItem {
+    
+    @include mixins.def_list_item;
+
+    &__Identifier {
+
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/documents/DocumentsList.js b/packages/frontend/src/components/documents/DocumentsList.js
new file mode 100644
index 000000000..136274ee3
--- /dev/null
+++ b/packages/frontend/src/components/documents/DocumentsList.js
@@ -0,0 +1,24 @@
+import DocumentsListItem from "./DocumentsListItem";
+import './DocumentsList.scss'
+
+export default function DocumentsList({items = [], columnsCount = 1}) {
+    return (
+        <div 
+            className='DocumentsList'
+            style={{
+                columnCount: items.length > 1 ? columnsCount : 1,
+            }}
+        >
+            {items.map((document, key) =>
+                <DocumentsListItem
+                    key={key}
+                    identifier={document.identifier}
+                />
+            )}
+
+            {items.length === 0 &&
+                <div className='DocumentsList__EmptyMessage'>There are no documents created yet.</div>
+            }
+        </div>
+    );
+}
diff --git a/packages/frontend/src/components/documents/DocumentsList.scss b/packages/frontend/src/components/documents/DocumentsList.scss
new file mode 100644
index 000000000..484a63454
--- /dev/null
+++ b/packages/frontend/src/components/documents/DocumentsList.scss
@@ -0,0 +1,6 @@
+.DocumentsList {
+    
+    @media screen and (max-width: 580px) {
+        column-count: 1 !important;
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js
new file mode 100644
index 000000000..635b9c046
--- /dev/null
+++ b/packages/frontend/src/components/documents/DocumentsListItem.js
@@ -0,0 +1,19 @@
+import {Link} from "react-router-dom";
+import Identifier from '../Identifier'
+import './DocumentsListItem.scss'
+
+
+export default function DocumentsListItem({identifier}) {
+    return (
+        <Link 
+            to={`/document/${identifier}`}
+            className='DocumentsListItem'
+        >
+
+            <div className='DocumentsListItem__Identifier'>
+                <Identifier value={identifier}/>
+            </div>
+
+        </Link>
+    )
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.scss b/packages/frontend/src/components/documents/DocumentsListItem.scss
new file mode 100644
index 000000000..02119bd47
--- /dev/null
+++ b/packages/frontend/src/components/documents/DocumentsListItem.scss
@@ -0,0 +1,18 @@
+@use '../../styles/mixins.scss';
+
+.DocumentsListItem {
+    @include mixins.def_list_item;
+
+    &__Identifier {
+        word-wrap: break-word;
+        text-wrap: wrap;
+        word-break: break-all;
+        font-family: monospace;
+        font-size: 12pt;
+
+        flex-grow: 1;
+        text-overflow: ellipsis;
+        overflow: hidden; 
+        white-space: nowrap;
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
index c2bce8451..843b43bb4 100644
--- a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
+++ b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
@@ -1,19 +1,19 @@
-import "./go_to_height_form.css";
+import "./GoToHeightForm.scss";
 
 // import React, {useState} from 'react';
 
 export default function GoToHeightForm({goToHeightHandler, goToHeightChangeHandle, heightCorrection}) {
 
     return (
-        <form className='go_to_height_form' onSubmit={goToHeightHandler}>
-            <div className='go_to_height_form__title'>Go to height</div>
+        <form className='GoToHeightForm' onSubmit={goToHeightHandler}>
+            <div className='GoToHeightForm__Title'>Go to height</div>
             <input 
-                className={heightCorrection ? 'go_to_height_form__input' : 'go_to_height_form__input  go_to_height_form__input--incorrect'}
+                className={heightCorrection ? 'GoToHeightForm__Input' : 'GoToHeightForm__Input  GoToHeightForm__Input--Incorrect'}
                 onInput={goToHeightChangeHandle}
                 type='number'
                 placeholder='Height'
             />
-            <button className='go_to_height_form__button' disabled={!heightCorrection}>go</button>
+            <button className='GoToHeightForm__Button' disabled={!heightCorrection}>go</button>
         </form>
     );
 }
diff --git a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.scss b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.scss
new file mode 100644
index 000000000..7daeb7794
--- /dev/null
+++ b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.scss
@@ -0,0 +1,55 @@
+
+.GoToHeightForm {
+    width: 115px;
+
+    &__Title {
+        margin-bottom: 8px;
+    }
+
+    &__Input {
+        &, &:focus {
+            width: 80px;
+            padding: 0 8px;
+            margin-right: 6px;
+            height: 29px;
+            box-sizing: border-box;
+            border: 1px solid var(--chakra-colors-whiteAlpha-400);
+            border-radius: 5px;
+            -webkit-appearance: none;
+            -moz-appearance: textfield;
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+        }
+    
+        &--Incorrect {
+            border: 1px solid var(--chakra-colors-whiteAlpha-200);;
+
+            color: gray;
+        }
+    }
+
+    &__Button {
+        background-color: transparent;
+        border: 1px solid var(--chakra-colors-whiteAlpha-400);
+        border-radius: 5px;
+        height: 29px;
+        color: #fff;
+        padding: 0 4px;
+        
+        &:disabled {
+            color: gray;
+            cursor: default;
+        }
+
+        &:hover:not(:disabled) {
+            // border-color: var(--chakra-colors-whiteAlpha-400);
+            background-color: #ffffff15;
+            cursor: pointer;
+        }
+    }
+
+}
+
diff --git a/packages/frontend/src/components/goToHeightForm/go_to_height_form.css b/packages/frontend/src/components/goToHeightForm/go_to_height_form.css
deleted file mode 100644
index a6117171a..000000000
--- a/packages/frontend/src/components/goToHeightForm/go_to_height_form.css
+++ /dev/null
@@ -1,49 +0,0 @@
-.go_to_height_form {
-    width: 115px;
-}
-
-.go_to_height_form__title {
-    margin-bottom: 4px;
-}
-
-.go_to_height_form__input,
-.go_to_height_form__input:focus {
-    width: 80px;
-    padding: 0 8px;
-    margin-right: 6px;
-    height: 29px;
-    box-sizing: border-box;
-    border: 1px solid #fff;
-    border-radius: 5px;
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-}
-
-.go_to_height_form__input::-webkit-outer-spin-button,
-.go_to_height_form__input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-}
-
-.go_to_height_form__input--incorrect {
-    /* border-color: #ffa1a1;
-    background-color: #ffa1a1; */
-    color: gray;
-}
-
-.go_to_height_form__button {
-    background-color: transparent;
-    border: 1px solid #ffffff75;
-    border-radius: 5px;
-    height: 29px;
-    color: #fff;
-}
-
-.go_to_height_form__button:disabled {
-    color: gray;
-}
-
-.go_to_height_form__button:hover:not(:disabled) {
-    border: 1px solid #ffffff;
-    background-color: #ffffff15;
-    cursor: pointer;
-}
\ No newline at end of file
diff --git a/packages/frontend/src/components/identities/IdentitiesList.js b/packages/frontend/src/components/identities/IdentitiesList.js
new file mode 100644
index 000000000..989ba7201
--- /dev/null
+++ b/packages/frontend/src/components/identities/IdentitiesList.js
@@ -0,0 +1,18 @@
+import {Link} from "react-router-dom";
+import IdentitiesListItem from "./IdentitiesListItem";
+
+
+function IdentitiesList({ items }) {
+    return (
+        <div className="identity_list">
+            {items.map((identity, key) =>
+                <IdentitiesListItem
+                    key={key}
+                    identifier={identity.identifier}
+                />
+            )}
+        </div>
+    );
+}
+
+export default IdentitiesList;
\ No newline at end of file
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
new file mode 100644
index 000000000..aef9eb40a
--- /dev/null
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -0,0 +1,28 @@
+import {Link} from "react-router-dom";
+import './IdentitiesListItem.scss'
+import Identifier from '../Identifier'
+
+
+function IdentitiesListItem ({identifier, size = 'l'}) {
+    let maxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            maxSymbols = 12;
+        break;
+        case 's':
+            maxSymbols = 6;
+        break;
+    }
+    
+    return (
+        <Link to={`/identity/${identifier}`} className="IdentitiesListItem">
+            <div className="IdentitiesListItem__Identifier">
+                <Identifier value={identifier} maxSymbols={maxSymbols}/>
+            </div>
+            <div className="IdentitiesListItem__Balance">120</div>
+        </Link>
+    );
+}
+
+export default IdentitiesListItem;
\ No newline at end of file
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.scss b/packages/frontend/src/components/identities/IdentitiesListItem.scss
new file mode 100644
index 000000000..6e02926af
--- /dev/null
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.scss
@@ -0,0 +1,13 @@
+@use '../../styles/mixins.scss';
+
+.IdentitiesListItem {
+    @include mixins.def_list_item;
+
+    justify-content: space-between;
+
+    &__Identifier {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }    
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/navbar/Navbar.js b/packages/frontend/src/components/navbar/Navbar.js
new file mode 100644
index 000000000..ad779baed
--- /dev/null
+++ b/packages/frontend/src/components/navbar/Navbar.js
@@ -0,0 +1,91 @@
+import { HamburgerIcon, CloseIcon } from '@chakra-ui/icons'
+import GlobalSearchInput from '../search/GlobalSearchInput'
+
+import {
+  Box,
+  Flex,
+  HStack,
+  IconButton,
+  useDisclosure,
+  useColorModeValue,
+  Stack,
+} from '@chakra-ui/react'
+
+import './Navbar.scss'
+
+
+const links = [
+    {title:'Home', href:'/'}, 
+    {title:'Blocks', href:'/Blocks'}, 
+    {title:'Data Contracts', href:'/dataContracts'}, 
+    {title:'Identities', href:'/Identities'}, 
+]
+
+const NavLink = (props) => {
+  const { children, to } = props
+
+  return (
+    <Box
+      as="a"
+      px={2}
+      py={1}
+      rounded={'md'}
+      _hover={{
+        textDecoration: 'none',
+        bg: useColorModeValue('brand.deep', 'brand.deep'),
+      }}
+      href={to}>
+      {children}
+    </Box>
+  )
+}
+
+function Navbar() {
+  const { isOpen, onOpen, onClose } = useDisclosure()
+
+  return (
+    <Box  px={4}>
+        <Flex 
+          className='Navbar' 
+          maxW='1980px' 
+          ml='auto' 
+          mr='auto' 
+          h={16} 
+          alignItems={'center'} 
+          justifyContent={'space-between'}
+        >
+          <IconButton
+            size={'md'}
+            icon={isOpen ? <CloseIcon /> : <HamburgerIcon />}
+            aria-label={'Open Menu'}
+            display={{ md: 'none' }}
+            onClick={isOpen ? onClose : onOpen}
+          />
+
+            <HStack spacing={8} alignItems={'center'}>
+                <HStack as={'nav'} spacing={4} display={{ base: 'none', md: 'flex' }}>
+                {links.map((link) => (
+                    <NavLink to={link.href} key={link.title}>{link.title}</NavLink>
+                ))}
+                </HStack>
+
+            </HStack>
+            <Box ml={2}>
+              <GlobalSearchInput />
+            </Box>
+        </Flex>
+
+        {isOpen ? (
+          <Box pb={4} display={{ md: 'none' }}>
+            <Stack as={'nav'} spacing={4}>
+              {links.map((link) => (
+                <NavLink to={link.href} key={link.title}>{link.title}</NavLink>
+              ))}
+            </Stack>
+          </Box>
+        ) : null}
+    </Box>
+  )
+}
+
+export default Navbar;
diff --git a/packages/frontend/src/components/navbar/Navbar.scss b/packages/frontend/src/components/navbar/Navbar.scss
new file mode 100644
index 000000000..7ce56c9ba
--- /dev/null
+++ b/packages/frontend/src/components/navbar/Navbar.scss
@@ -0,0 +1,6 @@
+.Navbar {
+    padding: 0 16px;
+    border-top: none;
+    border-radius: 0 0 10px 10px;
+    background-color: var(--chakra-colors-whiteAlpha-50);
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js
index 59eed2ba4..ec885632a 100644
--- a/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js
+++ b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js
@@ -1,9 +1,9 @@
-import "./page_size_selector.css";
+import "./PageSizeSelector.scss";
 
 export default function PageSizeSelector({PageSizeSelectHandler, defaultValue, items}) {
     return (
-        <div className='items_on_page_selector'>
-            <div className='items_on_page_selector__title'>Items on page</div>
+        <div className='PageSizeSelector'>
+            <div className='PageSizeSelector__Title'>Items on page</div>
             <select onChange={PageSizeSelectHandler} defaultValue={defaultValue}>
                 {items.map(item => {
                     return <option value={item} key={'PSS' + item}>{item}</option>;
diff --git a/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.scss b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.scss
new file mode 100644
index 000000000..0502f6d37
--- /dev/null
+++ b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.scss
@@ -0,0 +1,14 @@
+.PageSizeSelector {
+    &__Title {
+        margin-bottom: 8px;
+    }
+
+    select {
+        width: 80px;
+        height: 29px;
+        box-sizing: border-box;
+        border: 1px solid var(--chakra-colors-whiteAlpha-200);
+        border-radius: 5px;
+        padding: 0 4px;
+    }
+}
diff --git a/packages/frontend/src/components/pageSizeSelector/page_size_selector.css b/packages/frontend/src/components/pageSizeSelector/page_size_selector.css
deleted file mode 100644
index f6ded8232..000000000
--- a/packages/frontend/src/components/pageSizeSelector/page_size_selector.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.items_on_page_selector {}
-
-.items_on_page_selector__title {
-    margin-bottom: 4px;
-}
-
-.items_on_page_selector select {
-    width: 80px;
-    height: 29px;
-    box-sizing: border-box;
-    border: 1px solid #fff;
-    border-radius: 5px;
-    padding: 0 4px;
-}
diff --git a/packages/frontend/src/components/search/GlobalSearchInput.js b/packages/frontend/src/components/search/GlobalSearchInput.js
new file mode 100644
index 000000000..e5ef09aa6
--- /dev/null
+++ b/packages/frontend/src/components/search/GlobalSearchInput.js
@@ -0,0 +1,99 @@
+import React, {useState} from 'react';
+import {useNavigate} from "react-router-dom";
+import ModalWindow from "../ModalWindow";
+import * as Api from '../../util/Api'
+import { Input, InputGroup, InputRightElement, Button } from '@chakra-ui/react'
+import { SearchIcon } from '@chakra-ui/icons'
+
+
+function GlobalSearchInput () {
+    let navigate = useNavigate();
+        
+    const [showModal, setShowModal] = useState(false)
+    const [modalText, setModalText] = useState("false")
+
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const showModalWindow = (text, timeout) => {
+        setShowModal(true)
+        setModalText(text)
+
+        if (timeout) {
+            setTimeout(() => {
+                setShowModal(false)
+                setModalText("")
+            }, timeout)
+        }
+    }
+
+    const goSearch = async () => {
+        try {
+            const searchResult = await Api.search(searchQuery)
+
+            if (searchResult?.block) {
+                // redirect to blocks
+                setSearchQuery("")
+                return navigate(`/block/${searchResult?.block.header.hash}`)
+            }
+
+            if (searchResult?.transaction) {
+                setSearchQuery("")
+                return navigate(`/transaction/${searchResult?.transaction.hash}`)
+            }
+
+            if (searchResult?.dataContract) {
+                setSearchQuery("")
+                return navigate(`/dataContract/${searchResult?.dataContract.identifier}`)
+            }
+            
+            if (searchResult?.document) {
+                setSearchQuery("")
+                return navigate(`/document/${searchResult?.document.identifier}`)
+            }
+            
+            showModalWindow('Not found', 6000)
+        } catch (e) {
+            showModalWindow('Not found', 6000)
+        }
+    }
+
+    const handleKeyPress = (event) => {
+        if (event.key === 'Enter') {
+            goSearch();
+        }
+    }
+
+    const handleSearchInput = (event) => {
+        setSearchQuery(event.target.value)
+    }
+
+
+    return (
+        <div>
+            <InputGroup size='md'>
+                <Input
+                    pr='4.5rem'
+                    value={searchQuery} 
+                    type="text" 
+                    placeholder="Search..." 
+                    onChange={handleSearchInput}
+                    onKeyPress={handleKeyPress}
+                    bg='gray.900'
+                />
+                <InputRightElement width='4.5rem'>
+                    <Button h='1.75rem' size='sm' onClick={goSearch}>
+                        <SearchIcon/>
+                    </Button>
+                </InputRightElement>
+            </InputGroup>
+
+            <ModalWindow 
+                open={showModal} 
+                text={modalText} 
+                setShowModal={setShowModal}
+            />
+        </div>
+    )
+}
+
+export default GlobalSearchInput;
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
new file mode 100644
index 000000000..82d291bbd
--- /dev/null
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -0,0 +1,37 @@
+import './TransactionsListItem.scss'
+import {Link} from "react-router-dom";
+import Identifier from '../Identifier'
+
+
+function TransactionsListItem({hash = '', timestamp, type}) {
+    
+    return (
+        <Link 
+            to={`/transaction/${hash}`}
+            className='TransactionsListItem'
+
+        >
+
+            {typeof timestamp === 'string' &&
+                <div className='TransactionsListItem__Timestamp'>
+                    {new Date(timestamp).toLocaleString()}
+                </div>
+            }
+            
+            {typeof hash === 'string' &&
+                <div className='TransactionsListItem__Identifier'>
+                    <Identifier value={hash}/>
+                </div>
+            }
+
+            {typeof type === 'string' &&
+                <div className='TransactionsListItem__Type'>
+                    ({type})
+                </div>
+            }
+
+        </Link>
+    )
+}
+
+export default TransactionsListItem;
\ No newline at end of file
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.scss b/packages/frontend/src/components/transactions/TransactionsListItem.scss
new file mode 100644
index 000000000..8814cbdcd
--- /dev/null
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.scss
@@ -0,0 +1,45 @@
+@use '../../styles/mixins.scss';
+
+.TransactionsListItem {
+    @include mixins.def_list_item;
+    
+    align-items: baseline;
+    flex-wrap: wrap;
+
+    &:last-child {
+        border-bottom: none;
+    }
+
+    &__Timestamp {
+        margin-right: 16px;
+    }
+
+    &__Identifier {
+        font-family: monospace;
+        font-size: 12pt;
+        flex-grow: 1;
+
+        text-overflow: ellipsis;
+        overflow: hidden; 
+        width: 160px; 
+        line-height: 24px;
+        white-space: nowrap;
+        margin-right: 16px;
+        
+    }
+
+    &__Type {
+
+    }
+
+    @media screen and (max-width: 600px) {
+        &__Type {
+            order: 2;
+        }
+
+        &__Identifier {
+            order: 3;
+            width: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/transactions/transactionsList.js b/packages/frontend/src/components/transactions/transactionsList.js
new file mode 100644
index 000000000..f2742448a
--- /dev/null
+++ b/packages/frontend/src/components/transactions/transactionsList.js
@@ -0,0 +1,36 @@
+import TransactionsListItem from './TransactionsListItem'
+
+
+export default function TransactionsList({items = []}) {
+    return (
+        <div 
+            className='transactions-list'
+        >
+
+            {items.map((transaction, key) => {
+                if (typeof transaction === 'string') {
+                    return (
+                        <TransactionsListItem
+                            key={key}
+                            hash={transaction}
+                        />
+                    )
+                } else {
+                    return (
+                        <TransactionsListItem
+                            key={key}
+                            hash={transaction.hash}
+                            type={'Doument Batch'}
+                            timestamp={transaction.timestamp}
+                        />
+                    )
+                }
+            })}
+
+            {items.length === 0 &&
+                <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
+            }
+
+        </div>
+    );
+}
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index f1b0caaf4..e84501f29 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -31,6 +31,7 @@ code {
   right: 0;
   top: 0;
   left: 0;
+  z-index: 9999;
 }
 
 .modal_container {
@@ -112,7 +113,9 @@ code {
 }
 
 .active, .active:hover {
-  background-color: rgba(57, 175, 159, 0.55);
+  /* background-color: rgba(57, 175, 159, 0.55); */
+  /* background-color: var(--chakra-colors-brand-deep); */
+  background-color: var(--chakra-colors-gray-800);
 }
 
 .page-item.active:hover {
diff --git a/packages/frontend/src/index.js b/packages/frontend/src/index.js
index b6edabb4b..cc3ed186b 100644
--- a/packages/frontend/src/index.js
+++ b/packages/frontend/src/index.js
@@ -19,6 +19,9 @@ import TransactionRoute, {
 import DataContractRoute, {loader as dataContractLoader} from "./routes/dataContract/data.contract.route";
 import DataContractsRoute from "./routes/dataContracts/data.contracts.route";
 import DocumentRoute, {loader as documentLoader} from "./routes/document/document.route";
+import IdentityRoute, {loader as identityLoader} from "./routes/identity/identity.route";
+import IdentitiesRoute, {loader as identitiesLoader} from "./routes/identities/identities.route";
+
 
 const router = createBrowserRouter([
     {
@@ -60,6 +63,16 @@ const router = createBrowserRouter([
                 element: <DocumentRoute/>,
                 loader: documentLoader,
             },
+            {
+                path: "identities",
+                element: <IdentitiesRoute/>,
+                // loader: identitiesLoader,
+            },
+            {
+                path: "identity/:identifier",
+                element: <IdentityRoute/>,
+                // loader: identityLoader,
+            },
         ]
     }
 ]);
@@ -67,6 +80,8 @@ const router = createBrowserRouter([
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <React.StrictMode>
+         {/* {localStorage.setItem('chakra-ui-color-mode', 'dark')} */}
+         
         <RouterProvider router={router}/>
     </React.StrictMode>
 );
diff --git a/packages/frontend/src/routes/block/block.css b/packages/frontend/src/routes/block/block.css
deleted file mode 100644
index e109668ca..000000000
--- a/packages/frontend/src/routes/block/block.css
+++ /dev/null
@@ -1,58 +0,0 @@
-.block_details {
-    background-color: #1a4049;
-    padding: 20px;
-    display: flex;
-    flex-flow: column;
-    justify-content: space-between;
-}
-
-.block_details_item {
-    display: flex;
-    justify-content: space-between;
-}
-
-.block_details_item__title {
-  margin-right: 8px;
-}
-
-.block_details_item__value {
-  word-break: break-all;
-  text-align: right;
-}
-
-.block_transactions_list {
-    margin: 20px;
-    border: 3px groove black;
-    word-break: break-all;
-}
-
-.block_transactions_list:hover {
-}
-
-.block_transactions_list > ul {
-    list-style: none;
-    padding-left: 0;
-    text-align: center;
-    margin: 0 auto;
-}
-
-.block_transactions_list > ul > li {
-    padding: 10px;
-}
-
-.block_transactions_list > ul > li:hover {
-    background-color: rgb(41, 102, 117);
-}
-
-.block_transactions_list > ul:hover {
-}
-
-.block_transaction_link {
-    cursor: pointer;
-    color: white;
-    text-decoration: none;
-}
-
-/*.block_transaction_link:hover {*/
-/*    background-color: rgba(26, 64, 73, 0.41);*/
-/*}*/
diff --git a/packages/frontend/src/routes/block/block.route.js b/packages/frontend/src/routes/block/block.route.js
deleted file mode 100644
index 9c291a196..000000000
--- a/packages/frontend/src/routes/block/block.route.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from 'react';
-import { Link, useLoaderData} from "react-router-dom";
-import * as Api from "../../util/Api";
-import './block.css'
-
-export async function loader({params}) {
-    const {hash} = params
-    const block = await Api.getBlockByHash(hash);
-    return {block};
-}
-
-function BlockRoute() {
-    const {block} = useLoaderData();
-
-    const txHashes = block?.txs || [];
-
-    return (
-        <div className="container">
-            <div className={"block_details"}>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>Hash:</span>
-                    <span className={"block_details_item__value"}>{block.header.hash}</span>
-                </div>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>Height:</span>
-                    <span className={"block_details_item__value"}>{block.header.height}</span>
-                </div>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>Timestamp:</span>
-                    <span className={"block_details_item__value"}>{block.header.timestamp}</span>
-                </div>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>Block Version:</span>
-                    <span className={"block_details_item__value"}>{block.header.blockVersion}</span>
-                </div>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>App Version:</span>
-                    <span className={"block_details_item__value"}>{block.header.appVersion}</span>
-                </div>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>L1 Locked Height:</span>
-                    <span className={"block_details_item__value"}>{block.header.l1LockedHeight}</span>
-                </div>
-                <div className={"block_details_item"}>
-                    <span className={"block_details_item__title"}>Transactions count:</span>
-                    <span className={"block_details_item__value"}>{txHashes.length}</span>
-                </div>
-
-                {txHashes.length ? <div className={"block_transactions_list"}>
-                    <ul>
-                        {txHashes.map((hash) =>
-                            <li key={hash}>
-                                <Link className={"block_transaction_link"} to={`/transaction/${hash}`}>{hash}</Link>
-                            </li>)}
-
-                    </ul>
-                </div> : null}
-            </div>
-        </div>
-    );
-}
-
-export default BlockRoute;
diff --git a/packages/frontend/src/routes/blocks/blocks.css b/packages/frontend/src/routes/blocks/blocks.css
deleted file mode 100644
index 3c66e3262..000000000
--- a/packages/frontend/src/routes/blocks/blocks.css
+++ /dev/null
@@ -1,166 +0,0 @@
-.block_list {
-    background-color: #1a4049;
-    box-sizing: border-box;
-    border-radius: 16px;
-    padding: 14px 20px;
-    margin-top: 20px;
-}
-
-.block_list__title {
-    margin-bottom: 6px;
-    display: block;
-    color: #ade4ff;
-}
-
-.block_list_item {
-    margin-bottom: 2px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #ffffff14;
-}
-
-.block_list_item:last-child {
-    border-bottom: none;
-}
-
-.block_list_item a {
-    text-decoration: none;
-    color: white;
-    word-break: break-all;
-
-    display: flex;
-    flex-wrap: nowrap;
-    width: 100%;
-    font-family: monospace;
-    font-size: 12pt;
-}
-
-.block_list_item a:hover,
-.block_list_item a:hover .block_list_item__hash {
-    text-decoration: none;
-    color: gray;
-}
-
-
-.block_list_item__height {
-    font-weight: bold;
-    margin-right: 8px;
-    word-break: keep-all;
-}
-
-.block_list_item__timestamp {
-    margin-right: 16px;
-    text-wrap: nowrap;
-}
-
-.block_list_item__hash {
-    color: #dbdbdb;
-    flex-grow: 1;
-}
-
-.block_list_item__txs {
-    margin-left: 12px;
-    text-wrap: nowrap;
-}
-
-.list-navigation {
-    display: flex;
-    justify-content: space-between;
-    align-items: end;
-    margin-top: 10px;
-    flex-wrap: wrap;
-}
-
-.pagination {
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.items_on_page_selector {
-    text-align: right;
-    width: 115px;
-}
-
-@media screen and (max-width: 720px) {
-    .go_to_height_form {
-        margin-right: 14px;
-    }
-
-    .pagination {
-        order: 3;
-        flex-grow: 1;
-        justify-content: flex-end;
-    }
-
-    .items_on_page_selector {
-        text-align: left;
-    }
-}
-
-@media screen and (max-width: 680px) {
-    .list-navigation {
-        justify-content: center;
-        margin-top: 14px;
-    }
-
-    .items_on_page_selector {
-        width: auto;
-    }
-
-    .pagination {
-        order: -1;
-        width: 100%;
-        justify-content: center;
-        margin-bottom: 8px;
-    }
-}
-
-@media screen and (max-width: 620px) {
-    .block_list_item a {
-        flex-wrap: wrap;
-    }
-
-    .block_list_item__height {
-        order: 1;
-        margin-right: 4px;
-    }
-
-    .block_list_item__txs {
-        order: 2;
-        margin-left: 0;
-        margin-right: 6px;
-    }
-
-    .block_list_item__timestamp {
-        order: 3;
-    }
-
-    .block_list_item__hash {
-        order: 4;
-        flex-grow: unset;
-        margin-top: 2px;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .block_list_item__timestamp {
-        text-wrap: wrap;
-    }
-}
-
-@media screen and (max-width: 310px) {
-    .go_to_height_form {
-        margin: 0;
-        width: 100%;
-    }
-
-    .items_on_page_selector {
-        width: 100%;
-        text-align: center;
-        margin: 0 auto;
-    }
-
-    .go_to_height_form {
-        text-align: center;
-        margin-bottom: 4px;
-    }
-}
diff --git a/packages/frontend/src/routes/blocks/blocks.route.js b/packages/frontend/src/routes/blocks/blocks.route.js
index 29802ee56..5844a60c9 100644
--- a/packages/frontend/src/routes/blocks/blocks.route.js
+++ b/packages/frontend/src/routes/blocks/blocks.route.js
@@ -4,7 +4,12 @@ import * as Api from "../../util/Api";
 import ReactPaginate from "react-paginate";
 import GoToHeightForm from "./../../components/goToHeightForm/GoToHeightForm";
 import PageSizeSelector from "./../../components/pageSizeSelector/PageSizeSelector";
-import './blocks.css'
+import BlocksList from '../../components/blocks/BlocksList'
+
+import { 
+    Container,
+    Heading, 
+} from "@chakra-ui/react";
 
 
 const paginateConfig = { 
@@ -68,7 +73,70 @@ function BlocksRoute() {
     }, [pageSize]);
 
     return (
-        <div className="container">
+        <>
+
+
+        <Container 
+            maxW='container.xl' 
+            color='white'
+            mt={8}
+            mb={8}
+            className='BlocksPage'
+        >
+            <Container 
+                maxW='container.xl' 
+                _dark={{ color: "white" }}
+                borderWidth='1px' borderRadius='lg'
+                className='InfoBlock'
+            >
+                <Heading className='InfoBlock__Title' as='h1' size='sm'>Blocks</Heading>
+                <BlocksList items={blocks}/>
+
+
+                <div className='ListNavigation'>
+                    <GoToHeightForm
+                        goToHeightHandler={goToHeight}
+                        goToHeightChangeHandle={(e) => setBlockHeightToSearch(e.target.value)}
+                        heightCorrection={(blockHeightToSearch.length > 0 &&
+                                           Number(blockHeightToSearch) <= total && 
+                                           Number(blockHeightToSearch) > 0)}
+                    />
+
+                    <ReactPaginate 
+                        breakLabel="..."
+                        nextLabel=">"
+                        onPageChange={handlePageClick}
+                        pageRangeDisplayed={2}
+                        marginPagesDisplayed={1}
+                        pageCount={pageCount}
+                        previousLabel="<"
+                        pageClassName="page-item"
+                        pageLinkClassName="page-link"
+                        previousClassName="page-item page-item--previous"
+                        previousLinkClassName="page-link"
+                        nextClassName="page-item page-item--next"
+                        nextLinkClassName="page-link"
+                        breakClassName="page-item  page-item--break-link"
+                        containerClassName="pagination"
+                        activeClassName="active"
+                        renderOnZeroPageCount={true}
+                        forcePage={currentPage} 
+                    />
+                
+                    <PageSizeSelector
+                        PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
+                        defaultValue={paginateConfig.pageSize.default}
+                        items={paginateConfig.pageSize.values}
+                    />
+                </div>
+
+            </Container>
+        </Container>
+
+
+
+
+        {/* <div className="container">
             <div className={"block_list"}>
                 <span className="block_list__title">Last blocks</span>
 
@@ -111,7 +179,10 @@ function BlocksRoute() {
                     />
                 </div>
             </div>
-        </div>
+        </div> */}
+
+
+        </>
     );
 }
 
diff --git a/packages/frontend/src/routes/dataContract/DataContract.scss b/packages/frontend/src/routes/dataContract/DataContract.scss
new file mode 100644
index 000000000..5756d43d8
--- /dev/null
+++ b/packages/frontend/src/routes/dataContract/DataContract.scss
@@ -0,0 +1,23 @@
+.DataContractSchema {
+    white-space: break-spaces;
+    height: 80%;
+    padding: 0 10px;
+    word-wrap: break-word;
+    box-sizing: border-box;
+    width: 100%;
+    max-height: 400px;
+    overflow-y: auto;
+
+    &__Code {
+        padding: 10px;
+        font-family: monospace;
+        font-size: 12pt;
+        width: 100%;
+    }
+}
+
+@media screen and (max-width: 1020px) {
+    .DataContractSchema {
+        width: 100%;
+    }
+}
diff --git a/packages/frontend/src/routes/dataContract/data.contract.route.js b/packages/frontend/src/routes/dataContract/data.contract.route.js
index 59cf2a4e9..b37c89064 100644
--- a/packages/frontend/src/routes/dataContract/data.contract.route.js
+++ b/packages/frontend/src/routes/dataContract/data.contract.route.js
@@ -1,11 +1,18 @@
 import React, {useState} from 'react';
 import {useLoaderData} from "react-router-dom";
 import * as Api from "../../util/Api";
-import {Link} from "react-router-dom";
-import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import ReactPaginate from "react-paginate";
-import './data_contract.scss'
-import './documents_list_item.scss'
+import DocumentsList from "../../components/documents/DocumentsList";
+import './DataContract.scss'
+
+import { 
+    Box, 
+    Container,
+    TableContainer, Table, Thead, Tbody, Tfoot, Tr, Th, Td,
+    Tabs, TabList, TabPanels, Tab, TabPanel,
+    Code 
+} from "@chakra-ui/react";
+
 
 const pagintationConfig = {
     itemsOnPage: {
@@ -44,72 +51,110 @@ function DataContractRoute() {
     }
 
     return (
-        <div className="container">
-            <div className='data_contract'>
-                <div className={"data_contract_identifier"}>
-                    <div className='data_contract_identifier__info_item'>
-                        <span className={"data_contract_identifier__info_title"}>Identifier:</span>
-                        <span className={"data_contract_identifier__info_value"}>{dataContract.identifier}</span>
-                    </div>
-
-                    <div className={'data_contract_identifier__info_item'}>
-                        <span className={"data_contract_identifier__info_title"}>Version:</span>
-                        <span className={"data_contract_identifier__info_value"}>{dataContract.version}</span>
-                    </div>
-                </div>
-
-
-                <Tabs
-                    selectedTabClassName="data_contract__tab--selected"
-                    className='data_contract__info_tabs'
-                >
-                    <TabList className='data_contract__tabs-container'>
-                        <Tab className='data_contract__tab noselect'>Schema</Tab>
-                        <Tab className='data_contract__tab noselect'>Documents</Tab>
+        <Container 
+            maxW='container.xl' 
+            padding={3}
+            mt={8}
+            className='DataContract'
+        >
+            <TableContainer 
+                maxW='none'
+                borderWidth='1px' borderRadius='lg'
+            >
+                <Table variant='simple'>
+                    <Thead>
+                        <Tr>
+                            <Th>Data contract info</Th>
+                            <Th></Th>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                        <Tr>
+                            <Td>Identifier</Td>
+                            <Td isNumeric>{dataContract.identifier}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Created</Td>
+                            <Td isNumeric>12.10.2023</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Last update</Td>
+                            <Td isNumeric>13.10.2023</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Revision</Td>
+                            <Td isNumeric>{dataContract.version}</Td>
+                        </Tr>
+
+                    </Tbody>
+                </Table>
+            </TableContainer>
+
+            <Container 
+                width='100%'
+                maxW='none'
+                mt={5}
+                borderWidth='1px' borderRadius='lg'
+                className='InfoBlock'
+            >
+                <Tabs>
+                    <TabList>
+                        <Tab>Documents</Tab>
+                        <Tab>Schema</Tab>
                     </TabList>
-                    <TabPanel>
-                        <div className={'data_contract_schema'}>
-                            <div
-                                className={'data_contract_schema__info'}>{JSON.stringify(dataContract.schema, null, 2)}</div>
-                        </div>
-                    </TabPanel>
-                    <TabPanel>
-                        <div className='documents_list'>
-                            {documents.map((document, key) =>
-                                <Link to={`/document/${document.identifier}`} key={key}
-                                      className='documents_list_item'>
-                                    <span className='documents_list_item__identifier'>{document.identifier}</span>
-                                </Link>
-                            )}
-
-                            {documents.length === 0 &&
-                                <div className='documents_list__empty_message'>There are no documents created yet.</div>
-                            }
-
-                            <ReactPaginate
-                                breakLabel="..."
-                                nextLabel=">"
-                                onPageChange={handlePageClick}
-                                pageRangeDisplayed={2}
-                                marginPagesDisplayed={1}
-                                pageCount={pageCount}
-                                previousLabel="<"
-                                pageClassName="page-item"
-                                pageLinkClassName="page-link"
-                                previousClassName="page-item page-item--previous"
-                                previousLinkClassName="page-link"
-                                nextClassName="page-item page-item--next"
-                                nextLinkClassName="page-link"
-                                breakClassName="page-item  page-item--break-link"
-                                containerClassName="pagination"
-                                activeClassName="active"
-                                renderOnZeroPageCount={false}
-                            />
-                        </div>
-                    </TabPanel>
+
+                    <TabPanels>
+                        <TabPanel>
+                            <Box>
+                                <Box m={4}>
+                                    <DocumentsList 
+                                        items={documents}
+                                        columnsCount={2}
+                                    />
+                                </Box>
+                                <ReactPaginate
+                                    breakLabel="..."
+                                    nextLabel=">"
+                                    onPageChange={handlePageClick}
+                                    pageRangeDisplayed={2}
+                                    marginPagesDisplayed={1}
+                                    pageCount={pageCount}
+                                    previousLabel="<"
+                                    pageClassName="page-item"
+                                    pageLinkClassName="page-link"
+                                    previousClassName="page-item page-item--previous"
+                                    previousLinkClassName="page-link"
+                                    nextClassName="page-item page-item--next"
+                                    nextLinkClassName="page-link"
+                                    breakClassName="page-item  page-item--break-link"
+                                    containerClassName="pagination"
+                                    activeClassName="active"
+                                    renderOnZeroPageCount={false}
+                                />
+                            </Box>
+                        </TabPanel>
+
+                        <TabPanel>
+                            <Box>
+                                <div className={'DataContractSchema'}>
+                                    <Code 
+                                        className={'DataContractSchema__Code'}
+                                        borderRadius='lg'
+                                        p={4}
+                                        w='100%'
+                                    >
+                                        {JSON.stringify(dataContract.schema, null, 2)}
+                                    </Code>
+                                </div>
+                            </Box>
+                        </TabPanel>
+                    </TabPanels>
                 </Tabs>
-            </div>
-        </div>
+            </Container>
+
+        </Container>
+
+                
     );
 }
 
diff --git a/packages/frontend/src/routes/dataContract/data_contract.scss b/packages/frontend/src/routes/dataContract/data_contract.scss
deleted file mode 100644
index 33b42532e..000000000
--- a/packages/frontend/src/routes/dataContract/data_contract.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-.data_contract_identifier {
-    margin-top: 20px;
-    background-color: #1a491c;
-    padding: 20px;
-    word-wrap: break-word;
-    max-width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    width: max-content;
-    margin: 0 auto;
-    max-width: 100%;
-
-
-    &__info_item {
-        display: flex;
-        margin-bottom: 6px;
-
-        &:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    &__info_title {
-        margin-right: 6px;
-    }
-
-    &__info_value {
-        word-break: break-all;
-    }
-}
-
-
-.data_contract_identifier span {
-    // padding: 10px;
-}
-
-.data_contract_schema {
-    background-color: #1a491c;
-    padding: 10px;
-    white-space: break-spaces;
-    height: 80%;
-    border-radius: 16px;
-    padding: 14px 20px;
-    word-wrap: break-word;
-    max-width: 100%;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 12pt;
-    width: 100%;
-}
-
-.data_contract {
-    width: 1000px;
-
-    &__info_tabs {
-        margin-top: 20px;
-    }
-
-    &__tabs-container {
-        display: flex;
-        margin: 0;
-        padding-left: 0;
-        width: max-content;
-        margin: 0 auto;
-        overflow: hidden;
-    }
-
-    &__tab {
-        display: block;
-        background-color: #123513;
-        padding: 10px;
-        border-radius: 4px 4px 0 0;
-        
-        &:hover {
-            cursor: pointer;
-        }
-
-        &:not(&--selected):hover {
-            background-color:#1b451c;
-        }
-
-        &:focus-visible {
-            border: none;
-            outline: none;
-          }
-
-        &--selected {
-            background-color: #1a491c;
-            box-shadow: -1px 5px 6px #0000004a;
-            z-index: 1;
-        }
-    } 
-
-    &__info_tabs {
-        margin-top: 20px;
-    }
-}
-
-.documents_list {
-    height: max-content;
-    width: max-content;
-    min-width: 360px;
-    margin: 0 auto;
-
-    &__title {
-        margin-bottom: 6px;
-    }
-
-    &__empty_message {
-        padding: 10px 0;
-    }
-}
-
-
-
-@media screen and (max-width: 1020px) {
-    .data_contract {
-        width: 100%;
-
-        &__info_container {
-            flex-wrap: wrap;
-        }
-    }
-
-
-    .documents_list {
-        width: 100%;
-    }
-
-    .data_contract_schema {
-        width: 100%;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .documents_list {
-        min-width: auto;
-    }
-
-    .data_contract_identifier__info_item {
-        flex-wrap: wrap;
-    }
-}
\ No newline at end of file
diff --git a/packages/frontend/src/routes/dataContract/documents_list_item.scss b/packages/frontend/src/routes/dataContract/documents_list_item.scss
deleted file mode 100644
index cdce9bf73..000000000
--- a/packages/frontend/src/routes/dataContract/documents_list_item.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.documents_list {
-    background-color: #1a491c;
-    padding: 14px 20px;
-    border-radius: 16px;
-}
-
-.documents_list_item {
-    display: flex;
-    width: 100%;
-    color: #fff;
-    border-bottom: 1px solid #ffffff14;
-    padding: 4px 0;
-    margin-bottom: 2px;
-    padding-bottom: 6px;
-    text-decoration: none;
-
-    &:hover {
-        text-decoration: none;
-        color: gray;
-    }
-
-    &:last-child {
-        border-bottom: none;
-    }
-
-    &__identifier {
-        word-wrap: break-word;
-        text-wrap: wrap;
-        word-break: break-all;
-        font-family: monospace;
-        font-size: 12pt;
-    }
-}
diff --git a/packages/frontend/src/routes/dataContracts/data.contracts.route.js b/packages/frontend/src/routes/dataContracts/data.contracts.route.js
index edd2eb7a1..1392031a8 100644
--- a/packages/frontend/src/routes/dataContracts/data.contracts.route.js
+++ b/packages/frontend/src/routes/dataContracts/data.contracts.route.js
@@ -1,24 +1,11 @@
 import React, {useEffect, useState} from 'react';
-import './data_contracts.css'
 import * as Api from '../../util/Api'
-import {Link} from "react-router-dom";
-
-function DataContracts({dataContracts}) {
-    return <div className={"data_contracts_list"}>
-        {
-            dataContracts.map((dataContract) =>
-                <DataContract
-                    key={dataContract.identifier}
-                    dataContract={dataContract}/>)
-        }
-    </div>
-}
+import DataContractsList from '../../components/dataContracts/DataContractsList'
 
-function DataContract({dataContract}) {
-    return <div className={"data_contracts_item"}>
-        <Link to={`/dataContract/${dataContract.identifier}`}>{dataContract.identifier}</Link>
-    </div>
-}
+import { 
+    Container,
+    Heading, 
+} from "@chakra-ui/react"
 
 function DataContractsRoute() {
     const [dataContracts, setDataContracts] = useState(null)
@@ -34,11 +21,30 @@ function DataContractsRoute() {
             .finally(() => setLoading(false))
     }, [])
 
-    return (<div className="container">
-        {error && <div>Error {error}</div>}
-        {loading && <div>Loading data contracts from API</div>}
-        {dataContracts && <DataContracts dataContracts={dataContracts}/>}
-    </div>);
+    return (
+        <div className="container">
+            {error && <div>Error {error}</div>}
+            {loading && <div>Loading data contracts from API</div>}
+
+            {dataContracts && 
+                <Container 
+                    maxW='container.xl' 
+                    padding={3}
+                    mt={8}
+                    mb={4}
+                    borderWidth='1px' borderRadius='lg'
+                    className='InfoBlock'
+                > 
+
+                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Data contracts</Heading>
+
+                    <DataContractsList items={dataContracts} size='l'/>
+
+                </Container>
+            }
+
+        </div>
+    );
 }
 
 export default DataContractsRoute;
diff --git a/packages/frontend/src/routes/dataContracts/data_contracts.css b/packages/frontend/src/routes/dataContracts/data_contracts.css
deleted file mode 100644
index 97ad3319e..000000000
--- a/packages/frontend/src/routes/dataContracts/data_contracts.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.data_contracts_list {
-    color: white;
-    text-decoration: none;
-    background-color: #1a491c;
-    padding: 10px 5px;
-
-    border-radius: 16px;
-    padding: 14px 20px;
-    max-width: 100%;
-    box-sizing: border-box;
-    font-family: monospace;
-    font-size: 12pt;
-}
-
-.data_contracts_item {
-    text-decoration: none;
-    padding: 4px 0;
-    text-align: left;
-    margin-bottom: 2px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #ffffff14;
-}
-
-.data_contracts_item a {
-    text-decoration: none;
-    word-wrap: break-word;
-    color: white;
-}
-
-.data_contracts_item a:hover {
-    text-decoration: none;
-    color: gray;
-}
diff --git a/packages/frontend/src/routes/document/document.route.js b/packages/frontend/src/routes/document/document.route.js
index 1c2ca5b8b..f0be98aa9 100644
--- a/packages/frontend/src/routes/document/document.route.js
+++ b/packages/frontend/src/routes/document/document.route.js
@@ -3,6 +3,15 @@ import {useLoaderData} from "react-router-dom";
 import * as Api from "../../util/Api";
 import './document.scss'
 
+import { 
+    Box, 
+    Container,
+    TableContainer, Table, Thead, Tbody, Tr, Th, Td,
+    Heading, 
+    Flex,
+    Code 
+} from "@chakra-ui/react";
+
 export async function loader({params}) {
     const {identifier} = params
 
@@ -13,25 +22,68 @@ function DocumentRoute() {
     const document = useLoaderData()
 
     return (
-        <div className="container">
-
-            <div className='document'>
-            <div className='document__info_item'>
-                    <div className='document__info_title'>Identifier:</div>
-                    <div className='document__info_value'>{document.identifier}</div>
-                </div>
+        <Container 
+            maxW='container.xl' 
+            bg='gray.600' 
+            color='white'
+            _dark={{ bg: "gray.900" }}
+            mt={8}
+            mb={8}
+            className='DocumentPage'
+        >
+            <Flex 
+                w='100%' 
+                justifyContent='space-between'
+                wrap={["wrap", , , 'nowrap']}
+            >
 
-                <div className='document__info_item'>
-                    <div className='document__info_title'>Revision:</div>
-                    <div className='document__info_value'>{document.revision}</div>
-                </div>
+                <TableContainer 
+                    maxW='none'
+                    borderWidth='1px' borderRadius='lg'
+                    width={["100%", , , "50%"]}
+                    m={0}
+                >
+                    <Table variant='simple'>
+                        <Thead>
+                            <Tr>
+                                <Th>Document info</Th>
+                                <Th></Th>
+                            </Tr>
+                        </Thead>
+                        <Tbody>
+                            <Tr>
+                                <Td>Identifier</Td>
+                                <Td isNumeric>{document.identifier}</Td>
+                            </Tr>
+                            <Tr>
+                                <Td>Revision</Td>
+                                <Td isNumeric>{document.revision}</Td>
+                            </Tr>
+                        </Tbody>
+                    </Table>
+                </TableContainer>
 
-                <div className='document__data_title'>Data:</div>
-                <span className='document__data'>{JSON.stringify(document.data, null, 2)}</span>
+                <Box w={5} h={5} />
+            
+                <Container 
+                    width={["100%", , ,"50%"]}
+                    maxW='none'
+                    borderWidth='1px' borderRadius='lg'
+                    className='InfoBlock'
+                >
+                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Data</Heading>
 
-            </div>
+                    <Code 
+                        borderRadius='lg'
+                        className='DocumentPage__Code'
+                        w='100%'
+                    >
+                        {JSON.stringify(document.data, null, 2)}
+                    </Code>   
 
-        </div>
+                </Container>
+            </Flex>
+        </Container>
     );
 }
 
diff --git a/packages/frontend/src/routes/document/document.scss b/packages/frontend/src/routes/document/document.scss
index 76aad961e..fdc284327 100644
--- a/packages/frontend/src/routes/document/document.scss
+++ b/packages/frontend/src/routes/document/document.scss
@@ -1,39 +1,5 @@
-.document {
-    background-color: #1a493e;
-    padding: 14px 20px;
-    border-radius: 16px;
-
-    &__info_item {
-        margin-bottom: 6px;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    &__info_value {
-        word-break: break-all;
-    }
-
-    &__info_title {
-        margin-right: 6px;
-    }
-
-    &__data_title {
-        margin-top: 14px;
-    }
-
-    &__data {
-        display: block;
-        margin-top: 10px;
-        padding: 15px;
-        white-space: break-spaces;
-        height: 80%;
-        border-radius: 4px;
-        word-wrap: break-word;
-        word-break: break-all;
-        max-width: 100%;
-        box-sizing: border-box;
-        font-family: monospace;
-        font-size: 12pt;
-        background: #00000055;
+.DocumentPage {
+    &__Code {
+        width: 100%;
     }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/routes/home/home.css b/packages/frontend/src/routes/home/home.css
index db9572401..8822fc30c 100644
--- a/packages/frontend/src/routes/home/home.css
+++ b/packages/frontend/src/routes/home/home.css
@@ -11,93 +11,6 @@
     justify-content: space-between;
 }
 
-.last_transactions {
-    margin-top: 20px;
-    display: flex;
-    flex-flow: column;
-    background-color: #492f1a;
-    padding: 10px;
-    color: wheat;
-
-    border-radius: 16px;
-    padding: 14px 20px;
-}
-
-.last_transactions__title {
-    margin-bottom: 6px;
-}
-
-.last_transactions_item {
-    padding-top: 5px;
-    color: black;
-    word-break: break-all;
-
-    margin-bottom: 2px;
-    padding-bottom: 6px;
-    border-bottom: 1px solid #ffffff14;
-    font-family: monospace;
-    font-size: 12pt;
-}
-
-.last_transactions_item:last-child {
-    border-bottom: none;
-}
-
-.last_transactions_item a {
-    color: white;
-    text-decoration: none;
-    width: 100%;
-    display: flex;
-    flex-wrap: nowrap;
-}
-
-.last_transactions_item a:hover,
-.last_transactions_item a:hover .last_transactions_item__hash, 
-.last_transactions_item a:hover .last_transactions_item__type {
-    text-decoration: none;
-    color: gray;
-}
-
-.last_transactions_item__timestamp {
-    font-style: normal;
-    margin-right: 16px;
-    display: inline-block;
-    text-wrap: nowrap;
-}
-
-.last_transactions_item__hash {
-    color: #dbdbdb;
-    flex-grow: 1;
-}
-
-.last_transactions_item__type {
-    color: white;
-    margin-left: 12px;
-    text-wrap: nowrap;
-}
-
-@media screen and (max-width: 620px) {
-    .last_transactions_item a {
-        flex-wrap: wrap;
-    }
-
-    .last_transactions_item__timestamp {
-        order: 1;
-        width: auto;
-    }
-
-    .last_transactions_item__type {
-        order: 2;
-        margin-left: 0;
-    }
-
-    .last_transactions_item__hash {
-        order: 3;
-        width: 100%;
-        margin-top: 2px;
-    }
-}
-
 @media screen and (max-width: 350px) {
   .status {
       width: calc(100% - 20px);
diff --git a/packages/frontend/src/routes/home/home.route.js b/packages/frontend/src/routes/home/home.route.js
index 7b24fa4d7..48db31b72 100644
--- a/packages/frontend/src/routes/home/home.route.js
+++ b/packages/frontend/src/routes/home/home.route.js
@@ -1,69 +1,143 @@
 import React from 'react';
 import * as Api from "../../util/Api";
 import './home.css'
-import {Link, useLoaderData} from "react-router-dom";
-import {getTransitionTypeString} from '../../util/index'
+import {useLoaderData} from "react-router-dom";
+import TransactionsList from '../../components/transactions/TransactionsList'
+import BlocksList from '../../components/blocks/BlocksList'
 
-export async function loader({}) {
-    const [status, paginatedTransactions] = await Promise.all([Api.getStatus(), Api.getTransactions(1, 30, 'desc')])
+import { 
+    Box, 
+    Text, 
+    Container,
+    Heading, 
+    Flex,
+    Stack,
+    StackDivider
+} from "@chakra-ui/react";
 
-    const {resultSet} = paginatedTransactions
 
-    return {status, transactions: resultSet}
-}
+export async function loader({}) {
+    const [status, paginatedTransactions, paginatedBlocks] = await Promise.all([
+        Api.getStatus(), 
+        Api.getTransactions(1, 10, 'desc'),
+        Api.getBlocks(1, 10, 'desc')
+    ])
 
+    const transactions = paginatedTransactions.resultSet
+    const blocks = paginatedBlocks.resultSet
 
-function Transactions({transactions}) {
-    return transactions.map((tx) =>
-        <div key={tx.hash} className={"last_transactions_item"}>
-            <Link to={`transaction/${tx.hash}`}>
-                <span className="last_transactions_item__timestamp">{new Date(tx.timestamp).toLocaleString()}</span>
-                <span className="last_transactions_item__hash">{tx.hash}</span>
-                <span className="last_transactions_item__type">({getTransitionTypeString(tx.type)})</span>
-            </Link>
-        </div>
-    )
+    return {status, transactions, blocks}
 }
 
 function HomeRoute() {
-    const {status, transactions} = useLoaderData();
+    const {status, transactions, blocks} = useLoaderData();
 
     const {tenderdashVersion, network, appVersion, p2pVersion, blockVersion, blocksCount} = status
 
     return (
-        <div className="container">
-            <div className="status">
-                <div className="status_item">
-                    <span>Network</span>
-                    <span>{network}</span>
-                </div>
-                <div className="status_item">
-                    <span>App Version</span>
-                    <span>{appVersion}</span>
-                </div>
-                <div className="status_item">
-                    <span>P2P version</span>
-                    <span>{p2pVersion}</span>
-                </div>
-                <div className="status_item">
-                    <span>Block version</span>
-                    <span>{blockVersion}</span>
-                </div>
-                <div className="status_item">
-                    <span>Tenderdash Version</span>
-                    <span style={{['padding-left']: '10px'}}>{tenderdashVersion}</span>
-                </div>
-                <div className="status_item">
-                    <span>Blocks</span>
-                    <span>{blocksCount}</span>
-                </div>
-            </div>
-
-            <div className="last_transactions">
-                <span className="last_transactions__title">Last transactions</span>
-                <Transactions transactions={transactions}/>
-            </div>
-        </div>
+        <Container 
+            maxW='container.xl' 
+            _dark={{ color: "white" }}
+            padding={3}
+            mt={8}
+            className='data_contract'
+        >
+            <Container 
+                width='100%'
+                maxW='none'
+                mt={5}
+                mb={[10,,16]}
+                borderWidth={['1px' , , '0']} 
+                borderRadius='lg'
+
+            >
+                <Stack 
+                    direction={['column', , 'row']} 
+                    spacing='24px'
+                    divider={<StackDivider borderColor='gray.200' />}
+                >
+                    <Box w={['100%', , '33%']}>
+
+                        <Flex wrap={'wrap'}>
+                            <Text as={'b'} mr={4}>Network: </Text>
+                            <Box>{network}</Box>
+                        </Flex>
+
+                        <Flex wrap={'wrap'}>
+                            <Text as={'b'} mr={4}>Blocks:</Text>
+                            <Box>{blocksCount}</Box>
+                        </Flex>
+
+                    </Box>
+
+                    <Box w={['100%', , '33%']}>
+
+                        <Flex wrap={'wrap'}>
+                            <Text as={'b'} mr={4}>Block version:</Text>
+                            <Box>{blockVersion}</Box>
+                        </Flex>
+
+                        <Flex wrap={'wrap'}>
+                            <Text as={'b'} mr={4}>P2P version:</Text>
+                            <Box>{p2pVersion}</Box>
+                        </Flex>
+
+                    </Box>
+
+                    <Box w={['100%', , '33%']}>
+
+                        <Flex wrap={'wrap'}>
+                            <Text as={'b'} mr={4}>Tenderdash Version:</Text>
+                            <Box>{tenderdashVersion}</Box>
+                        </Flex>
+
+                        <Flex wrap={'wrap'}>
+                            <Text as={'b'} mr={4}>App Version:</Text>
+                            <Box>{appVersion}</Box>
+                        </Flex>
+
+                    </Box>
+
+                </Stack>
+            </Container>
+
+            <Flex 
+                w='100%' 
+                justifyContent='space-between'
+                wrap={["wrap", , , 'nowrap']}
+                mt={4}
+            >
+
+                <Container
+                    width={["100%", , ,"50%"]}
+                    maxW='none'
+                    m={0}
+                    borderWidth='1px' borderRadius='lg'
+                    className='InfoBlock'
+                >
+                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Last blocks</Heading>
+
+                    <BlocksList items={blocks} size='s'/>
+
+                </Container>
+
+                <Box w={5} h={5} />
+
+                <Container
+                    width={["100%", , ,"50%"]}
+                    maxW='none'
+                    m={0}
+                    borderWidth='1px' borderRadius='lg'
+                    className='InfoBlock'
+                >
+                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Last transaction</Heading>
+
+                    <TransactionsList items={transactions}/>
+
+                </Container>
+            
+            </Flex>
+        </Container>
     );
 }
 
diff --git a/packages/frontend/src/routes/identities/identities.route.js b/packages/frontend/src/routes/identities/identities.route.js
new file mode 100644
index 000000000..3ef2fb94d
--- /dev/null
+++ b/packages/frontend/src/routes/identities/identities.route.js
@@ -0,0 +1,71 @@
+import {useLoaderData} from "react-router-dom";
+import * as Api from "../../util/Api";
+import './identities.scss'
+import {Link} from "react-router-dom";
+import IdentitiesList from "../../components/identities/IdentitiesList";
+
+import { 
+    Container,
+    Heading, 
+} from "@chakra-ui/react"
+
+
+const identities = [
+    {
+        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
+        balance: 5582
+    },
+    {
+        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
+        balance: 5582
+    },
+    {
+        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
+        balance: 5582
+    },
+    {
+        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
+        balance: 5582
+    },
+    {
+        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
+        balance: 5582
+    },
+    {
+        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
+        balance: 5582
+    },
+]
+
+export async function loader({params}) {
+    const {identifier} = params
+
+    // const identity = await Api.getDocumentsByDataContract('BJ3WqMH4HyvZZAPW8srpq41ne6qhR1e4VMaU6HbSW7Dg');
+
+    return await Api.getIdentity('BJ3WqMH4HyvZZAPW8srpq41ne6qhR1e4VMaU6HbSW7Dg');
+}
+
+function IdentitiesRoute({ cookies, children }) {
+    // const identities = useLoaderData();
+
+    return (
+        <Container 
+            maxW='container.xl' 
+            mt={8}
+            className='IdentitiesPage'
+        >
+            <Container 
+                maxW='container.xl' 
+                borderWidth='1px' borderRadius='lg'
+                className='InfoBlock'
+            >
+                <Heading className='InfoBlock__Title' as='h1' size='sm' >Identitys list</Heading>
+
+                <IdentitiesList items={identities}/>
+
+            </Container>
+        </Container>
+    );
+}
+
+export default IdentitiesRoute;
diff --git a/packages/frontend/src/routes/identities/identities.scss b/packages/frontend/src/routes/identities/identities.scss
new file mode 100644
index 000000000..8c6dfbeaf
--- /dev/null
+++ b/packages/frontend/src/routes/identities/identities.scss
@@ -0,0 +1,3 @@
+.identity {
+    
+}
\ No newline at end of file
diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
new file mode 100644
index 000000000..54cb5607b
--- /dev/null
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -0,0 +1,183 @@
+import {useLoaderData} from "react-router-dom";
+import * as Api from "../../util/Api";
+import './identity.scss'
+import TransactionsList from "../../components/transactions/TransactionsList";
+import DocumentsList from "../../components/documents/DocumentsList";
+import DataContractsList from "../../components/dataContracts/DataContractsList";
+
+import { 
+    Box, 
+    Container,
+    TableContainer, Table, Thead, Tbody, Tr, Th, Td,
+    Tabs, TabList, TabPanels, Tab, TabPanel,
+    Flex, 
+} from "@chakra-ui/react"
+
+
+const documents = [
+    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
+    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
+    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
+    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
+    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
+    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
+]
+
+const dataContracts = [
+    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
+    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
+    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
+    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
+    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
+    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
+]
+
+const transactions = [
+    {
+        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
+        type: 'Documents batch',
+        timestamp: '10/23/2023, 10:52:29 PM'
+    },
+    {
+        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
+        type: 'Transfer',
+        timestamp: '10/23/2023, 10:52:29 PM'
+    },
+    {
+        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
+        type: 'Documents batch',
+        timestamp: '10/23/2023, 10:52:29 PM'
+    },
+    {
+        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
+        type: 'Documents batch',
+        timestamp: '10/23/2023, 10:52:29 PM'
+    },
+    {
+        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
+        type: 'Transfer',
+        timestamp: '10/23/2023, 10:52:29 PM'
+    },
+]
+
+
+export async function loader({params}) {
+    const {identifier} = params
+
+    return await Api.getIdentity('BJ3WqMH4HyvZZAPW8srpq41ne6qhR1e4VMaU6HbSW7Dg');
+}
+
+function IdentityRoute({ cookies, children }) {
+    const identity = useLoaderData();
+
+    return (
+        <div className="block identity">
+            <Container 
+                maxW='container.xl' 
+                padding={3}
+                mt={8}
+            >
+                <Flex 
+                    w='100%' 
+                    justifyContent='space-between'
+                    wrap={["wrap", , , 'nowrap']}
+                >
+                    <TableContainer 
+                        width={["100%", , , "50%"]}
+                        maxW='none'
+                        borderWidth='1px' borderRadius='lg'
+                        m={0}
+                    >
+                        <Table variant='simple'>
+                            <Thead>
+                                <Tr>
+                                    <Th>Identity info</Th>
+                                    <Th></Th>
+                                </Tr>
+                            </Thead>
+                            <Tbody>
+                                <Tr>
+                                    <Td>Balance</Td>
+                                    <Td isNumeric>1000 Credits</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Created</Td>
+                                    <Td isNumeric>12.10.2023</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Updated</Td>
+                                    <Td isNumeric>13.10.2023</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Revision</Td>
+                                    <Td isNumeric>1</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Transactions</Td>
+                                    <Td isNumeric>213</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Documents</Td>
+                                    <Td isNumeric>123</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Data contracts</Td>
+                                    <Td isNumeric>1233</Td>
+                                </Tr>
+                            </Tbody>
+                        </Table>
+                    </TableContainer>
+
+                    <Box w={5} h={5} />
+
+                    <Container
+                        width={["100%", , ,"50%"]}
+                        maxW='none'
+                        m={0}
+                        borderWidth='1px' borderRadius='lg'
+                        className="InfoBlock"
+                    >
+                        <Tabs>
+                            <TabList>
+                                <Tab>Transactions</Tab>
+                                <Tab>Documents</Tab>
+                                <Tab>Data contracts</Tab>
+                            </TabList>
+
+                            <TabPanels>
+
+                                <TabPanel>
+                                    <Box>
+                                        <TransactionsList items={transactions}/>
+                                    </Box>
+                                </TabPanel>
+
+                                <TabPanel>
+                                    <Box>
+                                        <DocumentsList items={documents}/>
+                                    </Box>
+
+                                </TabPanel>
+
+                                <TabPanel>
+                                    <Box>
+                                        <DataContractsList items={dataContracts}/>
+                                    </Box>
+                                </TabPanel>
+
+                                <TabPanel>
+                                    <Box>
+                                        credit transfers related to this identity (topup + transfer + withdrawals)
+                                    </Box>
+                                </TabPanel>
+
+                            </TabPanels>
+                        </Tabs>
+                    </Container>
+                </Flex>
+            </Container>
+        </div>
+    );
+}
+
+export default IdentityRoute;
diff --git a/packages/frontend/src/routes/identity/identity.scss b/packages/frontend/src/routes/identity/identity.scss
new file mode 100644
index 000000000..8c6dfbeaf
--- /dev/null
+++ b/packages/frontend/src/routes/identity/identity.scss
@@ -0,0 +1,3 @@
+.identity {
+    
+}
\ No newline at end of file
diff --git a/packages/frontend/src/routes/transaction/transaction.route.js b/packages/frontend/src/routes/transaction/transaction.route.js
index 1ae1b4af1..58b47afb9 100644
--- a/packages/frontend/src/routes/transaction/transaction.route.js
+++ b/packages/frontend/src/routes/transaction/transaction.route.js
@@ -3,7 +3,12 @@ import * as Api from "../../util/Api";
 import './transaction.css'
 import {useState} from "react";
 import {getTransitionTypeString} from "../../util";
-import {StateTransitionEnum} from "../enums/state.transition.type";
+
+import { 
+    Container,
+    TableContainer, Table, Thead, Tbody, Tr, Th, Td
+} from "@chakra-ui/react"
+
 
 export async function loader({params}) {
     const {txHash} = params
@@ -41,30 +46,48 @@ function TransactionRoute() {
     const [decodedST, setDecodedST] = useState(null)
 
     return (
-        <div className={"container"}>
-            <div className={"transaction_details"}>
-                <div className={"transaction_details_item"}>
-                    <span className={"transaction_details_item__title"}>Hash:</span>
-                    <span className={"transaction_details_item__value"}>{transaction.hash}</span>
-                </div>
-                <div className={"transaction_details_item"}>
-                    <span className={"transaction_details_item__title"}>Height:</span>
-                    <span className={"transaction_details_item__value"}>{transaction.blockHeight}</span>
-                </div>
-                <div className={"transaction_details_item"}>
-                    <span className={"transaction_details_item__title"}>Index:</span>
-                    <span className={"transaction_details_item__value"}>{transaction.index}</span>
-                </div>
-                <div className={"transaction_details_item"}>
-                    <span className={"transaction_details_item__title"}>Type:</span>
-                    <span className={"transaction_details_item__value"}>{getTransitionTypeString(transaction.type)}</span>
-                </div>
-                <div className={"transaction_details_item"}>
-                    <span className={"transaction_details_item__title"}>Timestamp:</span>
-                    <span className={"transaction_details_item__value"}>{transaction.timestamp}</span>
-                </div>
-            </div>
-        </div>
+        <Container 
+            maxW='container.xl' 
+            p={3}
+            mt={8}
+        >
+            <TableContainer 
+                maxW='none'
+                borderWidth='1px' borderRadius='lg'
+            >
+                <Table variant='simple'>
+                    <Thead>
+                        <Tr>
+                            <Th>transaction info</Th>
+                            <Th></Th>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                        <Tr>
+                            <Td>Hash</Td>
+                            <Td >{transaction.hash}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Height</Td>
+                            <Td >{transaction.blockHeight}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Index</Td>
+                            <Td >{transaction.index}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Type</Td>
+                            <Td >{getTransitionTypeString(transaction.type)}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Timestamp</Td>
+                            <Td >{transaction.timestamp}</Td>
+                        </Tr>
+
+                    </Tbody>
+                </Table>
+            </TableContainer>
+        </Container>
     );
 }
 
diff --git a/packages/frontend/src/styles/mixins.scss b/packages/frontend/src/styles/mixins.scss
new file mode 100644
index 000000000..9d6ae9ff0
--- /dev/null
+++ b/packages/frontend/src/styles/mixins.scss
@@ -0,0 +1,19 @@
+
+@mixin def_list_item {
+    display: flex;
+    width: 100%;
+    text-decoration: none;
+    padding: 6px 8px;
+    margin-bottom: 1px;
+    line-height: 24px;
+    border-bottom: 1px solid var(--chakra-colors-chakra-border-color);
+    color:  var(--chakra-colors-gray-100);
+    font-family: monospace;
+    font-size: 12pt;
+
+    &:hover {
+        background: var(--chakra-colors-whiteAlpha-50);
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/styles/theme.js b/packages/frontend/src/styles/theme.js
new file mode 100644
index 000000000..c3b8f025f
--- /dev/null
+++ b/packages/frontend/src/styles/theme.js
@@ -0,0 +1,49 @@
+import { extendTheme } from '@chakra-ui/react'
+
+export const theme = extendTheme( {
+    initialColorMode: 'light',
+    useSystemColorMode: false,
+    colors: {
+      brand: {
+        normal: '#008DE4',
+        deep: '#0E75B5'
+      },
+      gray: {
+        50: "#f0f1f2",
+        100: "#e0e3e5",
+        200: "#c6cacd",
+        300: "#acb1b4",
+        400: "#94999c",
+        500: "#7b7f83",
+        600: "#62676a",
+        700: "#494e51",
+        800: "#313639",
+        900: "#181d20"
+      },
+    },
+    styles: {
+      global: {
+        'html, body': {
+          background: '#181d20',
+        },
+      },
+    },
+    components: {
+      Container: {
+        baseStyle: {
+          p: 3,
+        }
+      },
+      Code: {
+        baseStyle: {
+          whiteSpace: 'break-spaces',
+          p: 4,
+          borderRadius: 'lg'
+        }
+      }
+    }
+});
+
+localStorage.setItem('chakra-ui-color-mode', 'dark');
+
+export default theme;
\ No newline at end of file
diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss
new file mode 100644
index 000000000..ab2591494
--- /dev/null
+++ b/packages/frontend/src/styles/theme.scss
@@ -0,0 +1,16 @@
+.InfoBlock {
+    position: relative;
+    padding: var(--chakra-space-3);
+    background-color: var(--chakra-colors-blackAlpha-200);
+    box-shadow: 3px 3px var(--chakra-colors-brand-deep);
+
+    &__Title {
+        background-color: var(--chakra-colors-brand-deep);
+        width: max-content;
+        padding: 8px 18px;
+        border-radius: 7px 0;
+        position: relative;
+        left: -12px;
+        top: -12px;
+    }
+}
diff --git a/packages/frontend/src/styles/variables.scss b/packages/frontend/src/styles/variables.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/frontend/src/util/Api.js b/packages/frontend/src/util/Api.js
index 152465314..d5ef3e1ac 100644
--- a/packages/frontend/src/util/Api.js
+++ b/packages/frontend/src/util/Api.js
@@ -78,6 +78,10 @@ const getDocumentsByDataContract = (dataContractIdentifier, page = 1, limit = 30
     return call(`dataContract/${dataContractIdentifier}/documents?page=${page}&limit=${limit}&order=${order}`, 'GET')
 }
 
+const getIdentity = (identity_id) => {
+    return call(`identity/${identity_id}`, 'GET')
+}
+
 const getStatus = () => {
     return call(`status`, 'GET')
 }
@@ -101,5 +105,6 @@ export {
     getDocumentsByDataContract,
     getDocumentByIdentifier,
     getDataContractByIdentifier,
-    getDataContracts
+    getDataContracts,
+    getIdentity
 }

From 816cdef07b0c2ba4793e18cd3d543c2b76a48d79 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 14:43:26 +0700
Subject: [PATCH 02/19] upload block.route.js

---
 .../frontend/src/routes/block/block.route.js  | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 packages/frontend/src/routes/block/block.route.js

diff --git a/packages/frontend/src/routes/block/block.route.js b/packages/frontend/src/routes/block/block.route.js
new file mode 100644
index 000000000..4b70c7208
--- /dev/null
+++ b/packages/frontend/src/routes/block/block.route.js
@@ -0,0 +1,102 @@
+import React from 'react';
+import { useLoaderData} from "react-router-dom";
+import * as Api from "../../util/Api";
+import TransactionsList from "../../components/transactions/TransactionsList";
+
+import { 
+    Container,
+    TableContainer, Table, Thead, Tbody, Tr, Th, Td, 
+    Heading, 
+} from "@chakra-ui/react"
+
+
+export async function loader({params}) {
+    const {hash} = params
+    const block = await Api.getBlockByHash(hash);
+    return {block};
+}
+
+function BlockRoute() {
+    const {block} = useLoaderData();
+
+    const txHashes = block?.txs || [];
+
+    return (
+        <Container 
+            maxW='container.xl' 
+            bg='gray.600' 
+            color='white'
+            _dark={{ bg: "gray.900" }}
+            mt={8}
+        >
+
+            <TableContainer 
+                maxW='none'
+                borderWidth='1px' borderRadius='lg'
+            >
+                <Table variant='simple'>
+                    <Thead>
+                        <Tr>
+                            <Th><div className='Table__Title'>Block info</div></Th>
+                            <Th></Th>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                        <Tr>
+                            <Td>Hash</Td>
+                            <Td>{block.header.hash}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Height</Td>
+                            <Td>{block.header.height}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Timestamp</Td>
+                            <Td>{new Date(block.header.timestamp).toLocaleString()}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Block Version</Td>
+                            <Td>{block.header.blockVersion}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>App Version</Td>
+                            <Td>{block.header.appVersion}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>L1 Locked Height</Td>
+                            <Td>{block.header.l1LockedHeight}</Td>
+                        </Tr>
+                        <Tr>
+                            <Td>Transactions count</Td>
+                            <Td>{txHashes.length}</Td>
+                        </Tr>
+
+                    </Tbody>
+                </Table>
+            </TableContainer>
+
+
+            {txHashes.length ?  
+                <Container 
+                    width='100%'
+                    maxW='none'
+                    mt={5}
+                    borderWidth='1px' borderRadius='lg'
+                    className='InfoBlock'
+                >
+
+                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Transactions</Heading>
+
+                    <div>
+
+                        <TransactionsList items={txHashes}/>
+
+                    </div> 
+                </Container>
+           : null}
+
+        </Container>
+    );
+}
+
+export default BlockRoute;

From 83ba205a1423863c527d48e57faa8a6e97ea8f6c Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 14:52:41 +0700
Subject: [PATCH 03/19] rename TransactionsList file

---
 .../transactions/{transactionsList.js => TransactionsList.js} | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)
 rename packages/frontend/src/components/transactions/{transactionsList.js => TransactionsList.js} (93%)

diff --git a/packages/frontend/src/components/transactions/transactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
similarity index 93%
rename from packages/frontend/src/components/transactions/transactionsList.js
rename to packages/frontend/src/components/transactions/TransactionsList.js
index f2742448a..f9fa4fce1 100644
--- a/packages/frontend/src/components/transactions/transactionsList.js
+++ b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -3,9 +3,7 @@ import TransactionsListItem from './TransactionsListItem'
 
 export default function TransactionsList({items = []}) {
     return (
-        <div 
-            className='transactions-list'
-        >
+        <div>
 
             {items.map((transaction, key) => {
                 if (typeof transaction === 'string') {

From 883c6f99c8e042e41fb034364e7e850871afd530 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 15:04:43 +0700
Subject: [PATCH 04/19] package.json update

---
 packages/frontend/package.json | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/frontend/package.json b/packages/frontend/package.json
index cb3bbc845..91014b3b5 100644
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -5,11 +5,14 @@
   "dependencies": {
     "@chakra-ui/icons": "^2.1.1",
     "@chakra-ui/react": "^2.8.1",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "dash": "^3.24.15",
     "express": "^4.18.2",
+    "framer-motion": "^10.16.4",
     "node-fetch": "^3.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

From 8a2339617be92ec3abebf6f8b532ac6be9cf8a59 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 15:11:01 +0700
Subject: [PATCH 05/19] Fix data-contracts list styles bug

---
 .../src/components/dataContracts/DataContractsListItem.scss  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
index 5466a7a9d..870902701 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
@@ -5,6 +5,9 @@
     @include mixins.def_list_item;
 
     &__Identifier {
-
+        text-overflow: ellipsis;
+        overflow: hidden;
+        line-height: 24px;
+        white-space: nowrap;
     }
 }
\ No newline at end of file

From e9782986db9ac5d87ef0c2ea52c6aad6502c1c12 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 15:13:43 +0700
Subject: [PATCH 06/19] fix navbar padding offset

---
 packages/frontend/src/components/navbar/Navbar.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/navbar/Navbar.js b/packages/frontend/src/components/navbar/Navbar.js
index ad779baed..724377728 100644
--- a/packages/frontend/src/components/navbar/Navbar.js
+++ b/packages/frontend/src/components/navbar/Navbar.js
@@ -44,7 +44,7 @@ function Navbar() {
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   return (
-    <Box  px={4}>
+    <Box px={3}>
         <Flex 
           className='Navbar' 
           maxW='1980px' 

From a340d811d781af6900f5cf12d52b8370d01b12c3 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 15:18:40 +0700
Subject: [PATCH 07/19] Update Navbar styles

---
 packages/frontend/src/components/navbar/Navbar.js           | 3 ++-
 packages/frontend/src/components/navbar/Navbar.scss         | 1 -
 .../frontend/src/components/navbar/NavbarMobileMenu.scss    | 6 ++++++
 3 files changed, 8 insertions(+), 2 deletions(-)
 create mode 100644 packages/frontend/src/components/navbar/NavbarMobileMenu.scss

diff --git a/packages/frontend/src/components/navbar/Navbar.js b/packages/frontend/src/components/navbar/Navbar.js
index 724377728..7b74a90fb 100644
--- a/packages/frontend/src/components/navbar/Navbar.js
+++ b/packages/frontend/src/components/navbar/Navbar.js
@@ -12,6 +12,7 @@ import {
 } from '@chakra-ui/react'
 
 import './Navbar.scss'
+import './NavbarMobileMenu.scss'
 
 
 const links = [
@@ -76,7 +77,7 @@ function Navbar() {
         </Flex>
 
         {isOpen ? (
-          <Box pb={4} display={{ md: 'none' }}>
+          <Box className='NavbarMobileMenu' pb={4} display={{ md: 'none' }}>
             <Stack as={'nav'} spacing={4}>
               {links.map((link) => (
                 <NavLink to={link.href} key={link.title}>{link.title}</NavLink>
diff --git a/packages/frontend/src/components/navbar/Navbar.scss b/packages/frontend/src/components/navbar/Navbar.scss
index 7ce56c9ba..7a570e911 100644
--- a/packages/frontend/src/components/navbar/Navbar.scss
+++ b/packages/frontend/src/components/navbar/Navbar.scss
@@ -1,6 +1,5 @@
 .Navbar {
     padding: 0 16px;
-    border-top: none;
     border-radius: 0 0 10px 10px;
     background-color: var(--chakra-colors-whiteAlpha-50);
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/navbar/NavbarMobileMenu.scss b/packages/frontend/src/components/navbar/NavbarMobileMenu.scss
new file mode 100644
index 000000000..146262ae2
--- /dev/null
+++ b/packages/frontend/src/components/navbar/NavbarMobileMenu.scss
@@ -0,0 +1,6 @@
+.NavbarMobileMenu {
+    background-color: var(--chakra-colors-whiteAlpha-50);
+    border-radius: 10px;
+    margin-top: 6px;
+    padding: 14px;
+}
\ No newline at end of file

From 96d91687b5fa1ee0bc0a29da2a7aa5032fc185fa Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 15:29:15 +0700
Subject: [PATCH 08/19] Blocks page styles update

---
 .../frontend/src/routes/blocks/Blocks.scss    | 73 +++++++++++++++++++
 .../src/routes/blocks/BlocksPage.scss         | 73 +++++++++++++++++++
 .../src/routes/blocks/blocks.route.js         | 69 +-----------------
 3 files changed, 148 insertions(+), 67 deletions(-)
 create mode 100644 packages/frontend/src/routes/blocks/Blocks.scss
 create mode 100644 packages/frontend/src/routes/blocks/BlocksPage.scss

diff --git a/packages/frontend/src/routes/blocks/Blocks.scss b/packages/frontend/src/routes/blocks/Blocks.scss
new file mode 100644
index 000000000..e8661ec16
--- /dev/null
+++ b/packages/frontend/src/routes/blocks/Blocks.scss
@@ -0,0 +1,73 @@
+.Blocks {
+    .ListNavigation {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+        margin-top: 10px;
+        flex-wrap: wrap;
+    }
+    
+    .pagination {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    
+    .PageSizeSelector {
+        text-align: right;
+        width: 115px;
+    }
+    
+    @media screen and (max-width: 720px) {
+        .GoToHeightForm {
+            margin-right: 14px;
+        }
+    
+        .pagination {
+            order: 3;
+            flex-grow: 1;
+            justify-content: flex-end;
+        }
+    
+        .PageSizeSelector {
+            text-align: left;
+        }
+    }
+    
+    @media screen and (max-width: 680px) {
+        .list-navigation {
+            justify-content: center;
+            margin-top: 14px;
+        }
+    
+        .PageSizeSelector {
+            width: auto;
+        }
+    
+        .pagination {
+            order: -1;
+            width: 100%;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+    }
+    
+    
+    @media screen and (max-width: 310px) {
+        .GoToHeightForm {
+            margin: 0;
+            width: 100%;
+        }
+    
+        .PageSizeSelector {
+            width: 100%;
+            text-align: center;
+            margin: 0 auto;
+        }
+    
+        .GoToHeightForm {
+            text-align: center;
+            margin-bottom: 4px;
+        }
+    }
+    
+}
diff --git a/packages/frontend/src/routes/blocks/BlocksPage.scss b/packages/frontend/src/routes/blocks/BlocksPage.scss
new file mode 100644
index 000000000..e8661ec16
--- /dev/null
+++ b/packages/frontend/src/routes/blocks/BlocksPage.scss
@@ -0,0 +1,73 @@
+.Blocks {
+    .ListNavigation {
+        display: flex;
+        justify-content: space-between;
+        align-items: end;
+        margin-top: 10px;
+        flex-wrap: wrap;
+    }
+    
+    .pagination {
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+    
+    .PageSizeSelector {
+        text-align: right;
+        width: 115px;
+    }
+    
+    @media screen and (max-width: 720px) {
+        .GoToHeightForm {
+            margin-right: 14px;
+        }
+    
+        .pagination {
+            order: 3;
+            flex-grow: 1;
+            justify-content: flex-end;
+        }
+    
+        .PageSizeSelector {
+            text-align: left;
+        }
+    }
+    
+    @media screen and (max-width: 680px) {
+        .list-navigation {
+            justify-content: center;
+            margin-top: 14px;
+        }
+    
+        .PageSizeSelector {
+            width: auto;
+        }
+    
+        .pagination {
+            order: -1;
+            width: 100%;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+    }
+    
+    
+    @media screen and (max-width: 310px) {
+        .GoToHeightForm {
+            margin: 0;
+            width: 100%;
+        }
+    
+        .PageSizeSelector {
+            width: 100%;
+            text-align: center;
+            margin: 0 auto;
+        }
+    
+        .GoToHeightForm {
+            text-align: center;
+            margin-bottom: 4px;
+        }
+    }
+    
+}
diff --git a/packages/frontend/src/routes/blocks/blocks.route.js b/packages/frontend/src/routes/blocks/blocks.route.js
index 5844a60c9..4a7c6ba4e 100644
--- a/packages/frontend/src/routes/blocks/blocks.route.js
+++ b/packages/frontend/src/routes/blocks/blocks.route.js
@@ -5,6 +5,7 @@ import ReactPaginate from "react-paginate";
 import GoToHeightForm from "./../../components/goToHeightForm/GoToHeightForm";
 import PageSizeSelector from "./../../components/pageSizeSelector/PageSizeSelector";
 import BlocksList from '../../components/blocks/BlocksList'
+import './Blocks.scss'
 
 import { 
     Container,
@@ -20,18 +21,6 @@ const paginateConfig = {
     defaultPage: 1
 }
 
-function Blocks({blocks}) {
-    return blocks.map((block) =>
-        <div key={block.header.hash} className={"block_list_item"}>
-            <Link to={`/block/${block.header.hash}`}>
-                <span className={"block_list_item__height"}>{block.header.height} </span>
-                <span className={"block_list_item__timestamp"}>{new Date(block.header.timestamp).toLocaleString()}</span>
-                <span className={"block_list_item__hash"}>{block.header.hash}</span>
-                <span className={"block_list_item__txs"}>({block.txs.length} txs)</span>
-            </Link>
-        </div>
-    )
-}
 
 export async function loader() {
     const paginatedBlocks = await Api.getBlocks(paginateConfig.defaultPage, paginateConfig.pageSize.default, 'desc')
@@ -73,15 +62,12 @@ function BlocksRoute() {
     }, [pageSize]);
 
     return (
-        <>
-
-
         <Container 
             maxW='container.xl' 
             color='white'
             mt={8}
             mb={8}
-            className='BlocksPage'
+            className='Blocks'
         >
             <Container 
                 maxW='container.xl' 
@@ -132,57 +118,6 @@ function BlocksRoute() {
 
             </Container>
         </Container>
-
-
-
-
-        {/* <div className="container">
-            <div className={"block_list"}>
-                <span className="block_list__title">Last blocks</span>
-
-                <Blocks blocks={blocks}/>
-
-                <div className='list-navigation'>
-                    <GoToHeightForm
-                        goToHeightHandler={goToHeight}
-                        goToHeightChangeHandle={(e) => setBlockHeightToSearch(e.target.value)}
-                        heightCorrection={(blockHeightToSearch.length > 0 &&
-                                           Number(blockHeightToSearch) <= total && 
-                                           Number(blockHeightToSearch) > 0)}
-                    />
-
-                    <ReactPaginate 
-                        breakLabel="..."
-                        nextLabel=">"
-                        onPageChange={handlePageClick}
-                        pageRangeDisplayed={2}
-                        marginPagesDisplayed={1}
-                        pageCount={pageCount}
-                        previousLabel="<"
-                        pageClassName="page-item"
-                        pageLinkClassName="page-link"
-                        previousClassName="page-item page-item--previous"
-                        previousLinkClassName="page-link"
-                        nextClassName="page-item page-item--next"
-                        nextLinkClassName="page-link"
-                        breakClassName="page-item  page-item--break-link"
-                        containerClassName="pagination"
-                        activeClassName="active"
-                        renderOnZeroPageCount={true}
-                        forcePage={currentPage} 
-                    />
-                
-                    <PageSizeSelector
-                        PageSizeSelectHandler={(e) => setPageSize(Number(e.target.value))}
-                        defaultValue={paginateConfig.pageSize.default}
-                        items={paginateConfig.pageSize.values}
-                    />
-                </div>
-            </div>
-        </div> */}
-
-
-        </>
     );
 }
 

From d27489ffa1ca76f11025c789ef26aa93968ca220 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 15:29:42 +0700
Subject: [PATCH 09/19] remove unused file

---
 .../src/routes/blocks/BlocksPage.scss         | 73 -------------------
 1 file changed, 73 deletions(-)
 delete mode 100644 packages/frontend/src/routes/blocks/BlocksPage.scss

diff --git a/packages/frontend/src/routes/blocks/BlocksPage.scss b/packages/frontend/src/routes/blocks/BlocksPage.scss
deleted file mode 100644
index e8661ec16..000000000
--- a/packages/frontend/src/routes/blocks/BlocksPage.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-.Blocks {
-    .ListNavigation {
-        display: flex;
-        justify-content: space-between;
-        align-items: end;
-        margin-top: 10px;
-        flex-wrap: wrap;
-    }
-    
-    .pagination {
-        margin-top: 0;
-        margin-bottom: 0;
-    }
-    
-    .PageSizeSelector {
-        text-align: right;
-        width: 115px;
-    }
-    
-    @media screen and (max-width: 720px) {
-        .GoToHeightForm {
-            margin-right: 14px;
-        }
-    
-        .pagination {
-            order: 3;
-            flex-grow: 1;
-            justify-content: flex-end;
-        }
-    
-        .PageSizeSelector {
-            text-align: left;
-        }
-    }
-    
-    @media screen and (max-width: 680px) {
-        .list-navigation {
-            justify-content: center;
-            margin-top: 14px;
-        }
-    
-        .PageSizeSelector {
-            width: auto;
-        }
-    
-        .pagination {
-            order: -1;
-            width: 100%;
-            justify-content: center;
-            margin-bottom: 8px;
-        }
-    }
-    
-    
-    @media screen and (max-width: 310px) {
-        .GoToHeightForm {
-            margin: 0;
-            width: 100%;
-        }
-    
-        .PageSizeSelector {
-            width: 100%;
-            text-align: center;
-            margin: 0 auto;
-        }
-    
-        .GoToHeightForm {
-            text-align: center;
-            margin-bottom: 4px;
-        }
-    }
-    
-}

From 19263d8477e90349e4e6f376524e48f1aeb3168e Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 21:20:33 +0700
Subject: [PATCH 10/19] Code refactoring

---
 .../frontend/src/components/Identifier.js     | 17 ++---------
 .../src/components/blocks/BlocksList.js       | 13 ++++----
 .../src/components/blocks/BlocksListItem.js   | 18 ++++++-----
 .../src/components/blocks/BlocksListItem.scss |  2 --
 .../dataContracts/DataContractsList.js        |  8 ++---
 .../dataContracts/DataContractsListItem.js    | 23 +++++++++-----
 .../dataContracts/DataContractsListItem.scss  |  4 ++-
 .../src/components/documents/DocumentsList.js | 10 +++----
 .../components/documents/DocumentsListItem.js |  4 ++-
 .../goToHeightForm/GoToHeightForm.js          |  6 ++--
 .../components/identities/IdentitiesList.js   | 13 +++++---
 .../components/identities/IdentitiesList.scss |  5 ++++
 .../identities/IdentitiesListItem.js          | 12 ++++++--
 .../identities/IdentitiesListItem.scss        |  4 +++
 .../components/search/GlobalSearchInput.js    |  6 ++--
 .../transactions/TransactionsList.js          | 30 +++++++------------
 .../transactions/TransactionsListItem.js      | 25 ++++++++++++----
 .../transactions/TransactionsListItem.scss    |  9 ++----
 .../frontend/src/routes/block/block.route.js  |  2 +-
 .../src/routes/blocks/blocks.route.js         | 16 ++++++----
 .../dataContract/data.contract.route.js       | 15 ++++++----
 .../dataContracts/data.contracts.route.js     |  4 +--
 .../frontend/src/routes/home/home.route.js    |  4 +--
 .../src/routes/identities/identities.route.js |  4 +--
 .../src/routes/identity/identity.route.js     |  6 ++--
 .../routes/transaction/transaction.route.js   |  2 +-
 26 files changed, 146 insertions(+), 116 deletions(-)
 create mode 100644 packages/frontend/src/components/identities/IdentitiesList.scss

diff --git a/packages/frontend/src/components/Identifier.js b/packages/frontend/src/components/Identifier.js
index 278722653..19c7649eb 100644
--- a/packages/frontend/src/components/Identifier.js
+++ b/packages/frontend/src/components/Identifier.js
@@ -1,19 +1,8 @@
 
 function Identifier ({value, maxSymbols = -1}) {
-
-    if (maxSymbols > 0 && maxSymbols < value.length) {
-        return (
-            <>
-                {value.slice(0, maxSymbols)}...{value.slice(value.length - maxSymbols, value.length)}
-            </>
-        );
-    } else {
-        return (
-            <>
-                {value}
-            </>
-        );
-    }
+    return maxSymbols === -1 && maxSymbols / 2 < value.length ? 
+        value : 
+        value.slice(0, Math.floor(maxSymbols / 2)) + '...' + value.slice(value.length - Math.floor(maxSymbols / 2), value.length);
 }
 
 export default Identifier;
\ No newline at end of file
diff --git a/packages/frontend/src/components/blocks/BlocksList.js b/packages/frontend/src/components/blocks/BlocksList.js
index 2e9471e2b..42422a8f9 100644
--- a/packages/frontend/src/components/blocks/BlocksList.js
+++ b/packages/frontend/src/components/blocks/BlocksList.js
@@ -3,26 +3,23 @@ import BlocksListItem from './BlocksListItem'
 import './BlocksList.scss'
 
 
-function BlocksList ({items = [], columnsCount = -1, size = 'l'}) {
+function BlocksList ({blocks = [], columnsCount = 1, size = 'l'}) {
     return( 
         <div 
             className='BlocksList'
             style={{
-                columnCount: items.length > 1 ? columnsCount : 1,
+                columnCount: blocks.length > 1 ? columnsCount : 1,
             }}
         >
-            {items.map((block) =>
+            {blocks.map((block) =>
                 <BlocksListItem
                     key={block.hash}
-                    hash={block.header.hash}
-                    height={block.header.height}
-                    timestamp={block.header.timestamp}
-                    txsLength={block.txs.length}
+                    block={block}
                     size={size}
                 />
             )}
 
-            {items.length === 0 &&
+            {blocks.length === 0 &&
                 <div className='documents_list__empty_message'>There are no documents created yet.</div>
             }
         </div>
diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js
index d39bc85f1..02d13bfc7 100644
--- a/packages/frontend/src/components/blocks/BlocksListItem.js
+++ b/packages/frontend/src/components/blocks/BlocksListItem.js
@@ -3,15 +3,20 @@ import './BlocksListItem.scss'
 import Identifier from '../Identifier'
 
 
-function BlocksListItem ({ hash, height = '', timestamp, txsLength, size = 'l' }) {
-    let hashMaxSymbols = -1;
+function BlocksListItem ({ block, size = 'l' }) {
+    const hash = block.header.hash
+    const height = block.header.height
+    const timestamp = block.header.timestamp
+    const txsLength = block.txs.length
+
+    let maxSymbols = -1;
 
     switch (size) {
         case 'm':
-            hashMaxSymbols = 6;
+            maxSymbols = 16;
             break;
         case 's':
-            hashMaxSymbols = 6;
+            maxSymbols = 12;
             break;
     }
 
@@ -27,14 +32,13 @@ function BlocksListItem ({ hash, height = '', timestamp, txsLength, size = 'l' }
                 </span>
             }
 
-
             {typeof hash === 'string' &&
                 <span className={"BlocksListItem__Hash"}>
-                    <Identifier value={hash} maxSymbols={hashMaxSymbols}/>
+                    <Identifier value={hash} maxSymbols={maxSymbols}/>
                 </span>
             }
 
-            {(typeof txsLength === 'number' || typeof txsLength === 'string') &&
+            {(typeof txsLength === 'number') &&
                 <span className={"BlocksListItem__Txs"}>
                     ({txsLength} txs)
                 </span>
diff --git a/packages/frontend/src/components/blocks/BlocksListItem.scss b/packages/frontend/src/components/blocks/BlocksListItem.scss
index f9191eb56..5968396d5 100644
--- a/packages/frontend/src/components/blocks/BlocksListItem.scss
+++ b/packages/frontend/src/components/blocks/BlocksListItem.scss
@@ -10,10 +10,8 @@
     &__Hash {
         color: var(--chakra-colors-gray-200);
         flex-grow: 1;
-
         text-overflow: ellipsis;
         overflow: hidden;
-        line-height: 24px;
         white-space: nowrap;
     }
 
diff --git a/packages/frontend/src/components/dataContracts/DataContractsList.js b/packages/frontend/src/components/dataContracts/DataContractsList.js
index e63b3c074..272602be4 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsList.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsList.js
@@ -1,20 +1,20 @@
 import DataContractsListItem from './DataContractsListItem'
 
 
-function DataContractsList ({items = [], size = 'l'}) {
+function DataContractsList ({dataContracts = [], size = 'l'}) {
     return (
 
         <div className='DataContractsList'>
 
-            {items.map((dataContract, key) =>
+            {dataContracts.map((dataContract, key) =>
                 <DataContractsListItem
                     key={key}
-                    identifier={dataContract.identifier}
                     size={size}
+                    dataContract={dataContract}
                 />
             )}
 
-            {items.length === 0 &&
+            {dataContracts.length === 0 &&
                 <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
             }
 
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
index dc7e12e6e..6c3e0b004 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
@@ -3,15 +3,18 @@ import Identifier from '../Identifier'
 import './DataContractsListItem.scss'
 
 
-function DataContractsListItem ({identifier, size = 'l'}) {
+function DataContractsListItem ({dataContract, size = 'l'}) {
+    const identifier = dataContract.identifier
+    const timestamp = dataContract.timestamp
+    
     let maxSymbols = -1;
 
     switch (size) {
         case 'm':
-            maxSymbols = 6;
+            maxSymbols = 16;
         break;
         case 's':
-            maxSymbols = 3;
+            maxSymbols = 12;
         break;
     }
 
@@ -19,10 +22,16 @@ function DataContractsListItem ({identifier, size = 'l'}) {
         <>
             {typeof identifier === 'string' &&
                 <Link to={`/dataContract/${identifier}`} className="DataContractsListItem">
-                <div className="DataContractsListItem__Identifier">
-                    <Identifier value={identifier} maxSymbols={maxSymbols}/>
-                </div>
-            </Link>
+                    <div className="DataContractsListItem__Identifier">
+                        <Identifier value={identifier} maxSymbols={maxSymbols}/>
+                    </div>
+
+                    {(size !== 's' && typeof timestamp === 'string') && 
+                        <div className="DataContractsListItem__Timestamp">
+                            {new Date(timestamp).toLocaleString()}
+                        </div>
+                    }
+                </Link>
             }
         </>
     );
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
index 870902701..ec4b0d151 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
@@ -1,9 +1,11 @@
 @use '../../styles/mixins.scss';
 
 .DataContractsListItem {
-    
     @include mixins.def_list_item;
 
+    width: 100%;
+    justify-content: space-between;
+
     &__Identifier {
         text-overflow: ellipsis;
         overflow: hidden;
diff --git a/packages/frontend/src/components/documents/DocumentsList.js b/packages/frontend/src/components/documents/DocumentsList.js
index 136274ee3..bb2893167 100644
--- a/packages/frontend/src/components/documents/DocumentsList.js
+++ b/packages/frontend/src/components/documents/DocumentsList.js
@@ -1,22 +1,22 @@
 import DocumentsListItem from "./DocumentsListItem";
 import './DocumentsList.scss'
 
-export default function DocumentsList({items = [], columnsCount = 1}) {
+export default function DocumentsList({documents = [], columnsCount = 1, size='l'}) {
     return (
         <div 
             className='DocumentsList'
             style={{
-                columnCount: items.length > 1 ? columnsCount : 1,
+                columnCount: documents.length > 1 ? columnsCount : 1,
             }}
         >
-            {items.map((document, key) =>
+            {documents.map((document, key) =>
                 <DocumentsListItem
                     key={key}
-                    identifier={document.identifier}
+                    document={document}
                 />
             )}
 
-            {items.length === 0 &&
+            {documents.length === 0 &&
                 <div className='DocumentsList__EmptyMessage'>There are no documents created yet.</div>
             }
         </div>
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js
index 635b9c046..197795d4c 100644
--- a/packages/frontend/src/components/documents/DocumentsListItem.js
+++ b/packages/frontend/src/components/documents/DocumentsListItem.js
@@ -3,7 +3,9 @@ import Identifier from '../Identifier'
 import './DocumentsListItem.scss'
 
 
-export default function DocumentsListItem({identifier}) {
+export default function DocumentsListItem({document}) {
+    const identifier = document.identifier
+
     return (
         <Link 
             to={`/document/${identifier}`}
diff --git a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
index 843b43bb4..1c352c65c 100644
--- a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
+++ b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
@@ -2,18 +2,18 @@ import "./GoToHeightForm.scss";
 
 // import React, {useState} from 'react';
 
-export default function GoToHeightForm({goToHeightHandler, goToHeightChangeHandle, heightCorrection}) {
+export default function GoToHeightForm({isValid, goToHeightHandler, goToHeightChangeHandle}) {
 
     return (
         <form className='GoToHeightForm' onSubmit={goToHeightHandler}>
             <div className='GoToHeightForm__Title'>Go to height</div>
             <input 
-                className={heightCorrection ? 'GoToHeightForm__Input' : 'GoToHeightForm__Input  GoToHeightForm__Input--Incorrect'}
+                className={isValid() ? 'GoToHeightForm__Input' : 'GoToHeightForm__Input  GoToHeightForm__Input--Incorrect'}
                 onInput={goToHeightChangeHandle}
                 type='number'
                 placeholder='Height'
             />
-            <button className='GoToHeightForm__Button' disabled={!heightCorrection}>go</button>
+            <button className='GoToHeightForm__Button' disabled={!isValid()}>go</button>
         </form>
     );
 }
diff --git a/packages/frontend/src/components/identities/IdentitiesList.js b/packages/frontend/src/components/identities/IdentitiesList.js
index 989ba7201..3d4881bc8 100644
--- a/packages/frontend/src/components/identities/IdentitiesList.js
+++ b/packages/frontend/src/components/identities/IdentitiesList.js
@@ -1,16 +1,21 @@
 import {Link} from "react-router-dom";
 import IdentitiesListItem from "./IdentitiesListItem";
+import './IdentitiesList.scss'
 
 
-function IdentitiesList({ items }) {
+function IdentitiesList({ identities }) {
     return (
-        <div className="identity_list">
-            {items.map((identity, key) =>
+        <div className="IdentitiesList">
+            {identities.map((identity, key) =>
                 <IdentitiesListItem
                     key={key}
-                    identifier={identity.identifier}
+                    identity={identity}
                 />
             )}
+            
+            {identities.length === 0 &&
+                <div className='IdentitiesList__EmptyMessage'>There are no identities created yet.</div>
+            }
         </div>
     );
 }
diff --git a/packages/frontend/src/components/identities/IdentitiesList.scss b/packages/frontend/src/components/identities/IdentitiesList.scss
new file mode 100644
index 000000000..27b4057ea
--- /dev/null
+++ b/packages/frontend/src/components/identities/IdentitiesList.scss
@@ -0,0 +1,5 @@
+.IdentitiesList {
+    &__EmptyMessage {
+        text-align: center;
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
index aef9eb40a..bdebb995a 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.js
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -3,7 +3,10 @@ import './IdentitiesListItem.scss'
 import Identifier from '../Identifier'
 
 
-function IdentitiesListItem ({identifier, size = 'l'}) {
+function IdentitiesListItem ({identity, size = 'l'}) {
+    const identifier = identity.identifier
+    const timestamp = identity.timestamp
+
     let maxSymbols = -1;
 
     switch (size) {
@@ -20,7 +23,12 @@ function IdentitiesListItem ({identifier, size = 'l'}) {
             <div className="IdentitiesListItem__Identifier">
                 <Identifier value={identifier} maxSymbols={maxSymbols}/>
             </div>
-            <div className="IdentitiesListItem__Balance">120</div>
+
+            {(size !== 's' && typeof timestamp === 'string') && 
+                <div className="IdentitiesListItem__Timestamp">
+                    {new Date(timestamp).toLocaleString()}
+                </div>
+            }
         </Link>
     );
 }
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.scss b/packages/frontend/src/components/identities/IdentitiesListItem.scss
index 6e02926af..324ce680f 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.scss
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.scss
@@ -10,4 +10,8 @@
         overflow: hidden;
         white-space: nowrap;
     }    
+
+    &__Timestamp {
+        
+    }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/search/GlobalSearchInput.js b/packages/frontend/src/components/search/GlobalSearchInput.js
index e5ef09aa6..efe35d765 100644
--- a/packages/frontend/src/components/search/GlobalSearchInput.js
+++ b/packages/frontend/src/components/search/GlobalSearchInput.js
@@ -26,7 +26,7 @@ function GlobalSearchInput () {
         }
     }
 
-    const goSearch = async () => {
+    const search = async () => {
         try {
             const searchResult = await Api.search(searchQuery)
 
@@ -59,7 +59,7 @@ function GlobalSearchInput () {
 
     const handleKeyPress = (event) => {
         if (event.key === 'Enter') {
-            goSearch();
+            search();
         }
     }
 
@@ -81,7 +81,7 @@ function GlobalSearchInput () {
                     bg='gray.900'
                 />
                 <InputRightElement width='4.5rem'>
-                    <Button h='1.75rem' size='sm' onClick={goSearch}>
+                    <Button h='1.75rem' size='sm' onClick={search}>
                         <SearchIcon/>
                     </Button>
                 </InputRightElement>
diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
index f9fa4fce1..a829cb9e7 100644
--- a/packages/frontend/src/components/transactions/TransactionsList.js
+++ b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -1,31 +1,21 @@
 import TransactionsListItem from './TransactionsListItem'
 
 
-export default function TransactionsList({items = []}) {
+export default function TransactionsList({transactions = [], size='l'}) {
     return (
         <div>
 
-            {items.map((transaction, key) => {
-                if (typeof transaction === 'string') {
-                    return (
-                        <TransactionsListItem
-                            key={key}
-                            hash={transaction}
-                        />
-                    )
-                } else {
-                    return (
-                        <TransactionsListItem
-                            key={key}
-                            hash={transaction.hash}
-                            type={'Doument Batch'}
-                            timestamp={transaction.timestamp}
-                        />
-                    )
-                }
+            {transactions.map((transaction, key) => {
+                return (
+                    <TransactionsListItem
+                        key={key}
+                        size={size}
+                        transaction={transaction}
+                    />
+                )
             })}
 
-            {items.length === 0 &&
+            {transactions.length === 0 &&
                 <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
             }
 
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index 82d291bbd..d434c69c5 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -1,10 +1,25 @@
 import './TransactionsListItem.scss'
 import {Link} from "react-router-dom";
 import Identifier from '../Identifier'
+import {getTransitionTypeString} from '../../util/index'
 
 
-function TransactionsListItem({hash = '', timestamp, type}) {
-    
+function TransactionsListItem({transaction, size='l'}) {
+    const hash = typeof transaction === 'object' ? transaction.hash : transaction;
+    const timestamp = transaction.timestamp;
+    const type = transaction.type;
+
+    let maxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            maxSymbols = 16;
+        break;
+        case 's':
+            maxSymbols = 12;
+        break;
+    }
+
     return (
         <Link 
             to={`/transaction/${hash}`}
@@ -20,13 +35,13 @@ function TransactionsListItem({hash = '', timestamp, type}) {
             
             {typeof hash === 'string' &&
                 <div className='TransactionsListItem__Identifier'>
-                    <Identifier value={hash}/>
+                    <Identifier value={hash} maxSymbols={maxSymbols}/>
                 </div>
             }
 
-            {typeof type === 'string' &&
+            {typeof type === 'number' &&
                 <div className='TransactionsListItem__Type'>
-                    ({type})
+                    ({getTransitionTypeString(type)})
                 </div>
             }
 
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.scss b/packages/frontend/src/components/transactions/TransactionsListItem.scss
index 8814cbdcd..1f60f8367 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.scss
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.scss
@@ -2,9 +2,7 @@
 
 .TransactionsListItem {
     @include mixins.def_list_item;
-    
-    align-items: baseline;
-    flex-wrap: wrap;
+
 
     &:last-child {
         border-bottom: none;
@@ -15,17 +13,14 @@
     }
 
     &__Identifier {
+        color: var(--chakra-colors-gray-200);
         font-family: monospace;
         font-size: 12pt;
         flex-grow: 1;
-
         text-overflow: ellipsis;
         overflow: hidden; 
-        width: 160px; 
-        line-height: 24px;
         white-space: nowrap;
         margin-right: 16px;
-        
     }
 
     &__Type {
diff --git a/packages/frontend/src/routes/block/block.route.js b/packages/frontend/src/routes/block/block.route.js
index 4b70c7208..0345d4f32 100644
--- a/packages/frontend/src/routes/block/block.route.js
+++ b/packages/frontend/src/routes/block/block.route.js
@@ -89,7 +89,7 @@ function BlockRoute() {
 
                     <div>
 
-                        <TransactionsList items={txHashes}/>
+                        <TransactionsList transactions={txHashes}/>
 
                     </div> 
                 </Container>
diff --git a/packages/frontend/src/routes/blocks/blocks.route.js b/packages/frontend/src/routes/blocks/blocks.route.js
index 4a7c6ba4e..8343915a9 100644
--- a/packages/frontend/src/routes/blocks/blocks.route.js
+++ b/packages/frontend/src/routes/blocks/blocks.route.js
@@ -63,29 +63,33 @@ function BlocksRoute() {
 
     return (
         <Container 
-            maxW='container.xl' 
+            maxW='container.lg' 
             color='white'
             mt={8}
             mb={8}
             className='Blocks'
         >
             <Container 
-                maxW='container.xl' 
+                maxW='container.lg' 
                 _dark={{ color: "white" }}
                 borderWidth='1px' borderRadius='lg'
                 className='InfoBlock'
             >
                 <Heading className='InfoBlock__Title' as='h1' size='sm'>Blocks</Heading>
-                <BlocksList items={blocks}/>
+                <BlocksList blocks={blocks}/>
 
 
                 <div className='ListNavigation'>
                     <GoToHeightForm
                         goToHeightHandler={goToHeight}
                         goToHeightChangeHandle={(e) => setBlockHeightToSearch(e.target.value)}
-                        heightCorrection={(blockHeightToSearch.length > 0 &&
-                                           Number(blockHeightToSearch) <= total && 
-                                           Number(blockHeightToSearch) > 0)}
+                        isValid = {()=> {
+                            return (
+                                blockHeightToSearch.length > 0 &&
+                                Number(blockHeightToSearch) <= total && 
+                                Number(blockHeightToSearch) > 0
+                            )}
+                        }
                     />
 
                     <ReactPaginate 
diff --git a/packages/frontend/src/routes/dataContract/data.contract.route.js b/packages/frontend/src/routes/dataContract/data.contract.route.js
index b37c89064..c48014b80 100644
--- a/packages/frontend/src/routes/dataContract/data.contract.route.js
+++ b/packages/frontend/src/routes/dataContract/data.contract.route.js
@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import {Link} from "react-router-dom";
 import {useLoaderData} from "react-router-dom";
 import * as Api from "../../util/Api";
 import ReactPaginate from "react-paginate";
@@ -75,16 +76,18 @@ function DataContractRoute() {
                         </Tr>
                         <Tr>
                             <Td>Created</Td>
-                            <Td isNumeric>12.10.2023</Td>
-                        </Tr>
-                        <Tr>
-                            <Td>Last update</Td>
-                            <Td isNumeric>13.10.2023</Td>
+                            <Td isNumeric>{new Date(dataContract.timestamp).toLocaleString()}</Td>
                         </Tr>
                         <Tr>
                             <Td>Revision</Td>
                             <Td isNumeric>{dataContract.version}</Td>
                         </Tr>
+                        <Tr>
+                            <Td>Transaction</Td>
+                            <Td isNumeric>
+                                <Link to={`/transaction/${dataContract.txHash}`}>{dataContract.txHash}</Link>
+                            </Td>
+                        </Tr>
 
                     </Tbody>
                 </Table>
@@ -108,7 +111,7 @@ function DataContractRoute() {
                             <Box>
                                 <Box m={4}>
                                     <DocumentsList 
-                                        items={documents}
+                                        documents={documents}
                                         columnsCount={2}
                                     />
                                 </Box>
diff --git a/packages/frontend/src/routes/dataContracts/data.contracts.route.js b/packages/frontend/src/routes/dataContracts/data.contracts.route.js
index 1392031a8..b549de0d5 100644
--- a/packages/frontend/src/routes/dataContracts/data.contracts.route.js
+++ b/packages/frontend/src/routes/dataContracts/data.contracts.route.js
@@ -28,7 +28,7 @@ function DataContractsRoute() {
 
             {dataContracts && 
                 <Container 
-                    maxW='container.xl' 
+                    maxW='container.md' 
                     padding={3}
                     mt={8}
                     mb={4}
@@ -38,7 +38,7 @@ function DataContractsRoute() {
 
                     <Heading className='InfoBlock__Title' as='h1' size='sm'>Data contracts</Heading>
 
-                    <DataContractsList items={dataContracts} size='l'/>
+                    <DataContractsList dataContracts={dataContracts} size='l'/>
 
                 </Container>
             }
diff --git a/packages/frontend/src/routes/home/home.route.js b/packages/frontend/src/routes/home/home.route.js
index 48db31b72..dc0b1e446 100644
--- a/packages/frontend/src/routes/home/home.route.js
+++ b/packages/frontend/src/routes/home/home.route.js
@@ -117,7 +117,7 @@ function HomeRoute() {
                 >
                     <Heading className='InfoBlock__Title' as='h1' size='sm'>Last blocks</Heading>
 
-                    <BlocksList items={blocks} size='s'/>
+                    <BlocksList blocks={blocks} size='m'/>
 
                 </Container>
 
@@ -132,7 +132,7 @@ function HomeRoute() {
                 >
                     <Heading className='InfoBlock__Title' as='h1' size='sm'>Last transaction</Heading>
 
-                    <TransactionsList items={transactions}/>
+                    <TransactionsList transactions={transactions} size='m'/>
 
                 </Container>
             
diff --git a/packages/frontend/src/routes/identities/identities.route.js b/packages/frontend/src/routes/identities/identities.route.js
index 3ef2fb94d..3d78c7c59 100644
--- a/packages/frontend/src/routes/identities/identities.route.js
+++ b/packages/frontend/src/routes/identities/identities.route.js
@@ -59,9 +59,9 @@ function IdentitiesRoute({ cookies, children }) {
                 borderWidth='1px' borderRadius='lg'
                 className='InfoBlock'
             >
-                <Heading className='InfoBlock__Title' as='h1' size='sm' >Identitys list</Heading>
+                <Heading className='InfoBlock__Title' as='h1' size='sm' >Identities</Heading>
 
-                <IdentitiesList items={identities}/>
+                <IdentitiesList identities={identities}/>
 
             </Container>
         </Container>
diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
index 54cb5607b..31d432e7c 100644
--- a/packages/frontend/src/routes/identity/identity.route.js
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -148,20 +148,20 @@ function IdentityRoute({ cookies, children }) {
 
                                 <TabPanel>
                                     <Box>
-                                        <TransactionsList items={transactions}/>
+                                        <TransactionsList transactions={transactions} size='m'/>
                                     </Box>
                                 </TabPanel>
 
                                 <TabPanel>
                                     <Box>
-                                        <DocumentsList items={documents}/>
+                                        <DocumentsList documents={documents} size='m'/>
                                     </Box>
 
                                 </TabPanel>
 
                                 <TabPanel>
                                     <Box>
-                                        <DataContractsList items={dataContracts}/>
+                                        <DataContractsList dataContracts={dataContracts} size='m'/>
                                     </Box>
                                 </TabPanel>
 
diff --git a/packages/frontend/src/routes/transaction/transaction.route.js b/packages/frontend/src/routes/transaction/transaction.route.js
index 58b47afb9..4a9e55e4d 100644
--- a/packages/frontend/src/routes/transaction/transaction.route.js
+++ b/packages/frontend/src/routes/transaction/transaction.route.js
@@ -81,7 +81,7 @@ function TransactionRoute() {
                         </Tr>
                         <Tr>
                             <Td>Timestamp</Td>
-                            <Td >{transaction.timestamp}</Td>
+                            <Td >{new Date(transaction.timestamp).toLocaleString()}</Td>
                         </Tr>
 
                     </Tbody>

From 6ce2707ba36f99e5386727aaaa930ba7f34e1659 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Mon, 30 Oct 2023 23:14:38 +0700
Subject: [PATCH 11/19] Connect api to identity pages

---
 .../src/components/documents/DocumentsList.js |   6 +-
 .../components/documents/DocumentsListItem.js |  20 +++-
 .../transactions/TransactionsListItem.js      |   3 +-
 packages/frontend/src/index.js                |   4 +-
 .../src/routes/identities/identities.route.js |  35 +-----
 .../src/routes/identity/identity.route.js     | 109 ++++++++----------
 packages/frontend/src/util/Api.js             |  31 ++++-
 7 files changed, 102 insertions(+), 106 deletions(-)

diff --git a/packages/frontend/src/components/documents/DocumentsList.js b/packages/frontend/src/components/documents/DocumentsList.js
index bb2893167..2b33a0e0a 100644
--- a/packages/frontend/src/components/documents/DocumentsList.js
+++ b/packages/frontend/src/components/documents/DocumentsList.js
@@ -1,17 +1,15 @@
 import DocumentsListItem from "./DocumentsListItem";
 import './DocumentsList.scss'
 
-export default function DocumentsList({documents = [], columnsCount = 1, size='l'}) {
+export default function DocumentsList({documents = [], size='l'}) {
     return (
         <div 
             className='DocumentsList'
-            style={{
-                columnCount: documents.length > 1 ? columnsCount : 1,
-            }}
         >
             {documents.map((document, key) =>
                 <DocumentsListItem
                     key={key}
+                    size={size}
                     document={document}
                 />
             )}
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js
index 197795d4c..7c9aa4ab1 100644
--- a/packages/frontend/src/components/documents/DocumentsListItem.js
+++ b/packages/frontend/src/components/documents/DocumentsListItem.js
@@ -3,8 +3,20 @@ import Identifier from '../Identifier'
 import './DocumentsListItem.scss'
 
 
-export default function DocumentsListItem({document}) {
+export default function DocumentsListItem({document, size='l'}) {
     const identifier = document.identifier
+    const timestamp = document.timestamp
+
+    let maxSymbols = -1;
+
+    switch (size) {
+        case 'm':
+            maxSymbols = 16;
+        break;
+        case 's':
+            maxSymbols = 12;
+        break;
+    }
 
     return (
         <Link 
@@ -13,7 +25,11 @@ export default function DocumentsListItem({document}) {
         >
 
             <div className='DocumentsListItem__Identifier'>
-                <Identifier value={identifier}/>
+                <Identifier value={identifier} maxSymbols={maxSymbols}/>
+            </div>
+
+            <div className='DocumentsListItem__Timestamp'>
+                {new Date(timestamp).toLocaleString()}
             </div>
 
         </Link>
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index d434c69c5..08b8a0f19 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -16,7 +16,7 @@ function TransactionsListItem({transaction, size='l'}) {
             maxSymbols = 16;
         break;
         case 's':
-            maxSymbols = 12;
+            maxSymbols = 8;
         break;
     }
 
@@ -24,7 +24,6 @@ function TransactionsListItem({transaction, size='l'}) {
         <Link 
             to={`/transaction/${hash}`}
             className='TransactionsListItem'
-
         >
 
             {typeof timestamp === 'string' &&
diff --git a/packages/frontend/src/index.js b/packages/frontend/src/index.js
index cc3ed186b..7b6e17ac4 100644
--- a/packages/frontend/src/index.js
+++ b/packages/frontend/src/index.js
@@ -66,12 +66,12 @@ const router = createBrowserRouter([
             {
                 path: "identities",
                 element: <IdentitiesRoute/>,
-                // loader: identitiesLoader,
+                loader: identitiesLoader,
             },
             {
                 path: "identity/:identifier",
                 element: <IdentityRoute/>,
-                // loader: identityLoader,
+                loader: identityLoader,
             },
         ]
     }
diff --git a/packages/frontend/src/routes/identities/identities.route.js b/packages/frontend/src/routes/identities/identities.route.js
index 3d78c7c59..5364cd0fb 100644
--- a/packages/frontend/src/routes/identities/identities.route.js
+++ b/packages/frontend/src/routes/identities/identities.route.js
@@ -10,43 +10,14 @@ import {
 } from "@chakra-ui/react"
 
 
-const identities = [
-    {
-        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
-        balance: 5582
-    },
-    {
-        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
-        balance: 5582
-    },
-    {
-        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
-        balance: 5582
-    },
-    {
-        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
-        balance: 5582
-    },
-    {
-        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
-        balance: 5582
-    },
-    {
-        identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR',
-        balance: 5582
-    },
-]
-
 export async function loader({params}) {
     const {identifier} = params
 
-    // const identity = await Api.getDocumentsByDataContract('BJ3WqMH4HyvZZAPW8srpq41ne6qhR1e4VMaU6HbSW7Dg');
-
-    return await Api.getIdentity('BJ3WqMH4HyvZZAPW8srpq41ne6qhR1e4VMaU6HbSW7Dg');
+    return await Api.getIdentities(identifier);
 }
 
-function IdentitiesRoute({ cookies, children }) {
-    // const identities = useLoaderData();
+function IdentitiesRoute() {
+    const identities = useLoaderData().resultSet;
 
     return (
         <Container 
diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
index 31d432e7c..fd131f81b 100644
--- a/packages/frontend/src/routes/identity/identity.route.js
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -1,9 +1,11 @@
 import {useLoaderData} from "react-router-dom";
 import * as Api from "../../util/Api";
-import './identity.scss'
+import {Link} from "react-router-dom";
 import TransactionsList from "../../components/transactions/TransactionsList";
 import DocumentsList from "../../components/documents/DocumentsList";
 import DataContractsList from "../../components/dataContracts/DataContractsList";
+import Identifier from '../../components/Identifier'
+import './identity.scss'
 
 import { 
     Box, 
@@ -14,61 +16,34 @@ import {
 } from "@chakra-ui/react"
 
 
-const documents = [
-    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
-    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
-    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
-    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
-    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
-    {identifier: 'G6qfN3v5EsQG2UkAyLAbj7HhiD3CWQYcLx58sZ9ZXUuR'},
-]
-
-const dataContracts = [
-    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
-    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
-    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
-    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
-    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
-    {identifier: 'H8nrKtTQcGAa8xXobuzyV31h3GjxrSzMtqPkWe2P927n'},
-]
-
-const transactions = [
-    {
-        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
-        type: 'Documents batch',
-        timestamp: '10/23/2023, 10:52:29 PM'
-    },
-    {
-        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
-        type: 'Transfer',
-        timestamp: '10/23/2023, 10:52:29 PM'
-    },
-    {
-        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
-        type: 'Documents batch',
-        timestamp: '10/23/2023, 10:52:29 PM'
-    },
-    {
-        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
-        type: 'Documents batch',
-        timestamp: '10/23/2023, 10:52:29 PM'
-    },
-    {
-        hash: 'BF240D753F5878FFD7A8AD224B148936BB666C17433CACD4B11E1B2B4142E934', 
-        type: 'Transfer',
-        timestamp: '10/23/2023, 10:52:29 PM'
-    },
-]
-
-
 export async function loader({params}) {
     const {identifier} = params
 
-    return await Api.getIdentity('BJ3WqMH4HyvZZAPW8srpq41ne6qhR1e4VMaU6HbSW7Dg');
+    const [identity, dataContracts, documents, transactions, transfers] = await Promise.all([
+        Api.getIdentity(identifier),
+        Api.getDataContractsByIdentity(identifier),
+        Api.getDocumentsByIdentity(identifier),
+        Api.getTransactionsByIdentity(identifier),
+        Api.getTransfersByIdentity(identifier),
+    ])
+
+    return {
+        identity,
+        dataContracts,
+        documents,
+        transactions,
+        transfers
+    };
 }
 
 function IdentityRoute({ cookies, children }) {
-    const identity = useLoaderData();
+    const {
+        identity, 
+        dataContracts,
+        documents, 
+        transactions,
+        transfers
+    } = useLoaderData();
 
     return (
         <div className="block identity">
@@ -96,33 +71,45 @@ function IdentityRoute({ cookies, children }) {
                                 </Tr>
                             </Thead>
                             <Tbody>
+                                <Tr>
+                                    <Td>Identifier</Td>
+                                    <Td isNumeric>{identity.identifier}</Td>
+                                </Tr>
                                 <Tr>
                                     <Td>Balance</Td>
-                                    <Td isNumeric>1000 Credits</Td>
+                                    <Td isNumeric>{identity.balance} Credits</Td>
                                 </Tr>
                                 <Tr>
                                     <Td>Created</Td>
-                                    <Td isNumeric>12.10.2023</Td>
+                                    <Td isNumeric>{new Date(identity.timestamp).toLocaleString()}</Td>
                                 </Tr>
                                 <Tr>
-                                    <Td>Updated</Td>
-                                    <Td isNumeric>13.10.2023</Td>
+                                    <Td>Transaction</Td>
+                                    <Td isNumeric>
+                                        <Link to={`/transaction/${identity.txHash}`}>
+                                            <Identifier value={identity.txHash} maxSymbols={16}/>
+                                        </Link>
+                                    </Td>
                                 </Tr>
                                 <Tr>
                                     <Td>Revision</Td>
-                                    <Td isNumeric>1</Td>
+                                    <Td isNumeric>{identity.revision}</Td>
                                 </Tr>
                                 <Tr>
                                     <Td>Transactions</Td>
-                                    <Td isNumeric>213</Td>
+                                    <Td isNumeric>{identity.totalTxs}</Td>
+                                </Tr>
+                                <Tr>
+                                    <Td>Transfers</Td>
+                                    <Td isNumeric>{identity.totalTransfers}</Td>
                                 </Tr>
                                 <Tr>
                                     <Td>Documents</Td>
-                                    <Td isNumeric>123</Td>
+                                    <Td isNumeric>{identity.totalDocuments}</Td>
                                 </Tr>
                                 <Tr>
                                     <Td>Data contracts</Td>
-                                    <Td isNumeric>1233</Td>
+                                    <Td isNumeric>{identity.totalDataContracts}</Td>
                                 </Tr>
                             </Tbody>
                         </Table>
@@ -148,20 +135,20 @@ function IdentityRoute({ cookies, children }) {
 
                                 <TabPanel>
                                     <Box>
-                                        <TransactionsList transactions={transactions} size='m'/>
+                                        <TransactionsList transactions={transactions.resultSet} size='s'/>
                                     </Box>
                                 </TabPanel>
 
                                 <TabPanel>
                                     <Box>
-                                        <DocumentsList documents={documents} size='m'/>
+                                        <DocumentsList documents={documents.resultSet} size='m'/>
                                     </Box>
 
                                 </TabPanel>
 
                                 <TabPanel>
                                     <Box>
-                                        <DataContractsList dataContracts={dataContracts} size='m'/>
+                                        <DataContractsList dataContracts={dataContracts.resultSet} size='m'/>
                                     </Box>
                                 </TabPanel>
 
diff --git a/packages/frontend/src/util/Api.js b/packages/frontend/src/util/Api.js
index d5ef3e1ac..73069b61a 100644
--- a/packages/frontend/src/util/Api.js
+++ b/packages/frontend/src/util/Api.js
@@ -78,8 +78,28 @@ const getDocumentsByDataContract = (dataContractIdentifier, page = 1, limit = 30
     return call(`dataContract/${dataContractIdentifier}/documents?page=${page}&limit=${limit}&order=${order}`, 'GET')
 }
 
-const getIdentity = (identity_id) => {
-    return call(`identity/${identity_id}`, 'GET')
+const getTransactionsByIdentity = (identifier) => {
+    return call(`identity/${identifier}/transactions`, 'GET')
+}
+
+const getDataContractsByIdentity = (identifier) => {
+    return call(`identity/${identifier}/dataContracts`, 'GET')
+}
+
+const getDocumentsByIdentity = (identifier) => {
+    return call(`identity/${identifier}/documents`, 'GET')
+}
+
+const getTransfersByIdentity = (identifier) => {
+    return call(`identity/${identifier}/documents`, 'GET')
+}
+
+const getIdentity = (identifier) => {
+    return call(`identity/${identifier}`, 'GET')
+}
+
+const getIdentities = () => {
+    return call(`identities`, 'GET')
 }
 
 const getStatus = () => {
@@ -106,5 +126,10 @@ export {
     getDocumentByIdentifier,
     getDataContractByIdentifier,
     getDataContracts,
-    getIdentity
+    getIdentities,
+    getIdentity,
+    getTransactionsByIdentity,
+    getDataContractsByIdentity,
+    getDocumentsByIdentity,
+    getTransfersByIdentity
 }

From 077b9224b3dd76c34f29d640c38844c577b4d7e6 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Tue, 31 Oct 2023 22:01:18 +0700
Subject: [PATCH 12/19] Update lists styles

---
 .../dataContracts/DataContractsList.js        |  3 +-
 .../dataContracts/DataContractsListItem.js    | 14 +---
 .../dataContracts/DataContractsListItem.scss  | 25 +++++++
 .../src/components/documents/DocumentsList.js |  9 ++-
 .../components/documents/DocumentsListItem.js | 16 +----
 .../documents/DocumentsListItem.scss          | 23 +++++++
 .../identities/IdentitiesListItem.scss        | 17 ++++-
 .../transactions/TransactionsList.js          | 10 +--
 .../transactions/TransactionsList.scss        |  3 +
 .../transactions/TransactionsListItem.js      | 18 +----
 .../transactions/TransactionsListItem.scss    | 22 +++++-
 .../frontend/src/routes/home/home.route.js    | 69 +++++--------------
 .../src/routes/identities/identities.route.js |  4 +-
 .../src/routes/identity/identity.route.js     | 14 ++--
 packages/frontend/src/styles/theme.scss       | 16 +++++
 packages/frontend/src/styles/variables.scss   |  5 ++
 16 files changed, 155 insertions(+), 113 deletions(-)
 create mode 100644 packages/frontend/src/components/transactions/TransactionsList.scss

diff --git a/packages/frontend/src/components/dataContracts/DataContractsList.js b/packages/frontend/src/components/dataContracts/DataContractsList.js
index 272602be4..74455d1de 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsList.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsList.js
@@ -1,10 +1,11 @@
 import DataContractsListItem from './DataContractsListItem'
+import './DataContractsList.scss'
 
 
 function DataContractsList ({dataContracts = [], size = 'l'}) {
     return (
 
-        <div className='DataContractsList'>
+        <div  className={'DataContractsList ' + 'DataContractsList--Size' + size.toUpperCase()}>
 
             {dataContracts.map((dataContract, key) =>
                 <DataContractsListItem
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
index 6c3e0b004..786a65e45 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
@@ -1,5 +1,4 @@
 import {Link} from "react-router-dom";
-import Identifier from '../Identifier'
 import './DataContractsListItem.scss'
 
 
@@ -7,23 +6,12 @@ function DataContractsListItem ({dataContract, size = 'l'}) {
     const identifier = dataContract.identifier
     const timestamp = dataContract.timestamp
     
-    let maxSymbols = -1;
-
-    switch (size) {
-        case 'm':
-            maxSymbols = 16;
-        break;
-        case 's':
-            maxSymbols = 12;
-        break;
-    }
-
     return (
         <>
             {typeof identifier === 'string' &&
                 <Link to={`/dataContract/${identifier}`} className="DataContractsListItem">
                     <div className="DataContractsListItem__Identifier">
-                        <Identifier value={identifier} maxSymbols={maxSymbols}/>
+                        {identifier}
                     </div>
 
                     {(size !== 's' && typeof timestamp === 'string') && 
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
index ec4b0d151..df4ef82a8 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.scss
@@ -1,4 +1,5 @@
 @use '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
 
 .DataContractsListItem {
     @include mixins.def_list_item;
@@ -11,5 +12,29 @@
         overflow: hidden;
         line-height: 24px;
         white-space: nowrap;
+        margin-right: 16px;
+    }
+
+    &__Timestamp {
+        text-wrap: nowrap;
+    }
+
+    .DataContractsList--SizeS &,
+    .DataContractsList--SizeM & {
+        &__Identifier {
+            margin-right: 16px;
+        }
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+        flex-wrap: wrap;
+
+        &__Identifier {
+            width: 100%;
+        }
+
+        &__Timestamp {
+            text-wrap: wrap;
+        }
     }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/documents/DocumentsList.js b/packages/frontend/src/components/documents/DocumentsList.js
index 2b33a0e0a..195ac1b0b 100644
--- a/packages/frontend/src/components/documents/DocumentsList.js
+++ b/packages/frontend/src/components/documents/DocumentsList.js
@@ -1,11 +1,12 @@
 import DocumentsListItem from "./DocumentsListItem";
 import './DocumentsList.scss'
 
+
 export default function DocumentsList({documents = [], size='l'}) {
     return (
-        <div 
-            className='DocumentsList'
-        >
+
+        <div className={'DocumentsList ' + 'DocumentsList--Size' + size.toUpperCase()}>
+            
             {documents.map((document, key) =>
                 <DocumentsListItem
                     key={key}
@@ -17,6 +18,8 @@ export default function DocumentsList({documents = [], size='l'}) {
             {documents.length === 0 &&
                 <div className='DocumentsList__EmptyMessage'>There are no documents created yet.</div>
             }
+
         </div>
+
     );
 }
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js
index 7c9aa4ab1..4534788a0 100644
--- a/packages/frontend/src/components/documents/DocumentsListItem.js
+++ b/packages/frontend/src/components/documents/DocumentsListItem.js
@@ -1,23 +1,11 @@
 import {Link} from "react-router-dom";
-import Identifier from '../Identifier'
 import './DocumentsListItem.scss'
 
 
-export default function DocumentsListItem({document, size='l'}) {
+export default function DocumentsListItem({document}) {
     const identifier = document.identifier
     const timestamp = document.timestamp
 
-    let maxSymbols = -1;
-
-    switch (size) {
-        case 'm':
-            maxSymbols = 16;
-        break;
-        case 's':
-            maxSymbols = 12;
-        break;
-    }
-
     return (
         <Link 
             to={`/document/${identifier}`}
@@ -25,7 +13,7 @@ export default function DocumentsListItem({document, size='l'}) {
         >
 
             <div className='DocumentsListItem__Identifier'>
-                <Identifier value={identifier} maxSymbols={maxSymbols}/>
+                {identifier}
             </div>
 
             <div className='DocumentsListItem__Timestamp'>
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.scss b/packages/frontend/src/components/documents/DocumentsListItem.scss
index 02119bd47..51ab0afc6 100644
--- a/packages/frontend/src/components/documents/DocumentsListItem.scss
+++ b/packages/frontend/src/components/documents/DocumentsListItem.scss
@@ -1,4 +1,5 @@
 @use '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
 
 .DocumentsListItem {
     @include mixins.def_list_item;
@@ -15,4 +16,26 @@
         overflow: hidden; 
         white-space: nowrap;
     }
+
+    &__Timestamp {
+        text-wrap: nowrap;
+    }
+
+    .DocumentsList--SizeM & {
+        &__Identifier {
+            margin-right: 16px;
+        }
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+        flex-wrap: wrap;
+
+        &__Identifier {
+            width: 100%;
+        }
+
+        &__Timestamp {
+            text-wrap: wrap;
+        }
+    }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.scss b/packages/frontend/src/components/identities/IdentitiesListItem.scss
index 324ce680f..8c875f249 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.scss
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.scss
@@ -1,4 +1,5 @@
 @use '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
 
 .IdentitiesListItem {
     @include mixins.def_list_item;
@@ -9,9 +10,23 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
+        margin-right: 16px;
     }    
 
     &__Timestamp {
-        
+        text-wrap: nowrap;
+    }
+
+    @media screen and (max-width: $breakpoint-sm) {
+        flex-wrap: wrap;
+
+        &__Identifier {
+            width: 100%;
+            margin-right: 0;
+        }
+
+        &__Timestamp {
+            text-wrap: wrap;
+        }
     }
 }
\ No newline at end of file
diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
index a829cb9e7..20525c33f 100644
--- a/packages/frontend/src/components/transactions/TransactionsList.js
+++ b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -1,24 +1,26 @@
 import TransactionsListItem from './TransactionsListItem'
+import './TransactionsList.scss'
 
 
 export default function TransactionsList({transactions = [], size='l'}) {
     return (
-        <div>
 
-            {transactions.map((transaction, key) => {
-                return (
+        <div className={'TransactionsList ' + 'TransactionsList--Size' + size.toUpperCase()}>
+
+            {transactions.map((transaction, key) => 
                     <TransactionsListItem
                         key={key}
                         size={size}
                         transaction={transaction}
                     />
                 )
-            })}
+            }
 
             {transactions.length === 0 &&
                 <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
             }
 
         </div>
+
     );
 }
diff --git a/packages/frontend/src/components/transactions/TransactionsList.scss b/packages/frontend/src/components/transactions/TransactionsList.scss
new file mode 100644
index 000000000..8842bd43f
--- /dev/null
+++ b/packages/frontend/src/components/transactions/TransactionsList.scss
@@ -0,0 +1,3 @@
+.TransactionsList {
+    
+}
\ No newline at end of file
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index 08b8a0f19..db904a26f 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -1,25 +1,13 @@
-import './TransactionsListItem.scss'
 import {Link} from "react-router-dom";
-import Identifier from '../Identifier'
 import {getTransitionTypeString} from '../../util/index'
+import './TransactionsListItem.scss'
 
 
-function TransactionsListItem({transaction, size='l'}) {
+function TransactionsListItem({transaction}) {
     const hash = typeof transaction === 'object' ? transaction.hash : transaction;
     const timestamp = transaction.timestamp;
     const type = transaction.type;
 
-    let maxSymbols = -1;
-
-    switch (size) {
-        case 'm':
-            maxSymbols = 16;
-        break;
-        case 's':
-            maxSymbols = 8;
-        break;
-    }
-
     return (
         <Link 
             to={`/transaction/${hash}`}
@@ -34,7 +22,7 @@ function TransactionsListItem({transaction, size='l'}) {
             
             {typeof hash === 'string' &&
                 <div className='TransactionsListItem__Identifier'>
-                    <Identifier value={hash} maxSymbols={maxSymbols}/>
+                    {hash}
                 </div>
             }
 
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.scss b/packages/frontend/src/components/transactions/TransactionsListItem.scss
index 1f60f8367..9d7d506e6 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.scss
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.scss
@@ -1,4 +1,5 @@
 @use '../../styles/mixins.scss';
+@import '../../styles/variables.scss';
 
 .TransactionsListItem {
     @include mixins.def_list_item;
@@ -10,6 +11,7 @@
 
     &__Timestamp {
         margin-right: 16px;
+        text-wrap: nowrap;
     }
 
     &__Identifier {
@@ -23,11 +25,29 @@
         margin-right: 16px;
     }
 
+    .TransactionsList--SizeS &,
+    .TransactionsList--SizeM & {
+        flex-wrap: wrap;
+
+        &__Timestamp {
+            flex-grow: 1;
+        }
+
+        &__Identifier {
+            order: 3;
+            width: 100%;
+            margin-right: 0;
+            margin-top: 2px;
+        }
+    }
+
     &__Type {
 
     }
 
-    @media screen and (max-width: 600px) {
+    @media screen and (max-width: $breakpoint-md) {
+        flex-wrap: wrap;
+        
         &__Type {
             order: 2;
         }
diff --git a/packages/frontend/src/routes/home/home.route.js b/packages/frontend/src/routes/home/home.route.js
index dc0b1e446..b449934de 100644
--- a/packages/frontend/src/routes/home/home.route.js
+++ b/packages/frontend/src/routes/home/home.route.js
@@ -19,18 +19,16 @@ import {
 export async function loader({}) {
     const [status, paginatedTransactions, paginatedBlocks] = await Promise.all([
         Api.getStatus(), 
-        Api.getTransactions(1, 10, 'desc'),
-        Api.getBlocks(1, 10, 'desc')
+        Api.getTransactions(1, 25, 'desc')
     ])
 
     const transactions = paginatedTransactions.resultSet
-    const blocks = paginatedBlocks.resultSet
 
-    return {status, transactions, blocks}
+    return {status, transactions}
 }
 
 function HomeRoute() {
-    const {status, transactions, blocks} = useLoaderData();
+    const {status, transactions} = useLoaderData();
 
     const {tenderdashVersion, network, appVersion, p2pVersion, blockVersion, blocksCount} = status
 
@@ -40,6 +38,7 @@ function HomeRoute() {
             _dark={{ color: "white" }}
             padding={3}
             mt={8}
+            mb={4}
             className='data_contract'
         >
             <Container 
@@ -54,7 +53,7 @@ function HomeRoute() {
                 <Stack 
                     direction={['column', , 'row']} 
                     spacing='24px'
-                    divider={<StackDivider borderColor='gray.200' />}
+                    divider={<StackDivider borderColor='gray.700' />}
                 >
                     <Box w={['100%', , '33%']}>
 
@@ -64,8 +63,8 @@ function HomeRoute() {
                         </Flex>
 
                         <Flex wrap={'wrap'}>
-                            <Text as={'b'} mr={4}>Blocks:</Text>
-                            <Box>{blocksCount}</Box>
+                            <Text as={'b'} mr={4}>Tenderdash Version:</Text>
+                            <Box>{tenderdashVersion}</Box>
                         </Flex>
 
                     </Box>
@@ -73,24 +72,19 @@ function HomeRoute() {
                     <Box w={['100%', , '33%']}>
 
                         <Flex wrap={'wrap'}>
-                            <Text as={'b'} mr={4}>Block version:</Text>
-                            <Box>{blockVersion}</Box>
+                            <Text as={'b'} mr={4}>Blocks:</Text>
+                            <Box>{blocksCount}</Box>
                         </Flex>
 
                         <Flex wrap={'wrap'}>
-                            <Text as={'b'} mr={4}>P2P version:</Text>
-                            <Box>{p2pVersion}</Box>
+                            <Text as={'b'} mr={4}>Block version:</Text>
+                            <Box>{blockVersion}</Box>
                         </Flex>
 
                     </Box>
 
                     <Box w={['100%', , '33%']}>
 
-                        <Flex wrap={'wrap'}>
-                            <Text as={'b'} mr={4}>Tenderdash Version:</Text>
-                            <Box>{tenderdashVersion}</Box>
-                        </Flex>
-
                         <Flex wrap={'wrap'}>
                             <Text as={'b'} mr={4}>App Version:</Text>
                             <Box>{appVersion}</Box>
@@ -101,42 +95,17 @@ function HomeRoute() {
                 </Stack>
             </Container>
 
-            <Flex 
-                w='100%' 
-                justifyContent='space-between'
-                wrap={["wrap", , , 'nowrap']}
-                mt={4}
+            <Container
+                maxW='none'
+                m={0}
+                borderWidth='1px' borderRadius='lg'
+                className='InfoBlock'
             >
+                <Heading className='InfoBlock__Title' as='h1' size='sm'>Last transaction</Heading>
 
-                <Container
-                    width={["100%", , ,"50%"]}
-                    maxW='none'
-                    m={0}
-                    borderWidth='1px' borderRadius='lg'
-                    className='InfoBlock'
-                >
-                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Last blocks</Heading>
-
-                    <BlocksList blocks={blocks} size='m'/>
+                <TransactionsList transactions={transactions} />
 
-                </Container>
-
-                <Box w={5} h={5} />
-
-                <Container
-                    width={["100%", , ,"50%"]}
-                    maxW='none'
-                    m={0}
-                    borderWidth='1px' borderRadius='lg'
-                    className='InfoBlock'
-                >
-                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Last transaction</Heading>
-
-                    <TransactionsList transactions={transactions} size='m'/>
-
-                </Container>
-            
-            </Flex>
+            </Container>
         </Container>
     );
 }
diff --git a/packages/frontend/src/routes/identities/identities.route.js b/packages/frontend/src/routes/identities/identities.route.js
index 5364cd0fb..3af967dba 100644
--- a/packages/frontend/src/routes/identities/identities.route.js
+++ b/packages/frontend/src/routes/identities/identities.route.js
@@ -21,12 +21,12 @@ function IdentitiesRoute() {
 
     return (
         <Container 
-            maxW='container.xl' 
+            maxW='container.md' 
             mt={8}
             className='IdentitiesPage'
         >
             <Container 
-                maxW='container.xl' 
+                maxW='container.md' 
                 borderWidth='1px' borderRadius='lg'
                 className='InfoBlock'
             >
diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
index fd131f81b..63ddc8319 100644
--- a/packages/frontend/src/routes/identity/identity.route.js
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -4,7 +4,6 @@ import {Link} from "react-router-dom";
 import TransactionsList from "../../components/transactions/TransactionsList";
 import DocumentsList from "../../components/documents/DocumentsList";
 import DataContractsList from "../../components/dataContracts/DataContractsList";
-import Identifier from '../../components/Identifier'
 import './identity.scss'
 
 import { 
@@ -62,8 +61,9 @@ function IdentityRoute({ cookies, children }) {
                         maxW='none'
                         borderWidth='1px' borderRadius='lg'
                         m={0}
+                        className="IdentityInfo"
                     >
-                        <Table variant='simple'>
+                        <Table variant='simple' className="Table">
                             <Thead>
                                 <Tr>
                                     <Th>Identity info</Th>
@@ -81,13 +81,9 @@ function IdentityRoute({ cookies, children }) {
                                 </Tr>
                                 <Tr>
                                     <Td>Created</Td>
-                                    <Td isNumeric>{new Date(identity.timestamp).toLocaleString()}</Td>
-                                </Tr>
-                                <Tr>
-                                    <Td>Transaction</Td>
-                                    <Td isNumeric>
+                                    <Td isNumeric> 
                                         <Link to={`/transaction/${identity.txHash}`}>
-                                            <Identifier value={identity.txHash} maxSymbols={16}/>
+                                            {new Date(identity.timestamp).toLocaleString()}
                                         </Link>
                                     </Td>
                                 </Tr>
@@ -135,7 +131,7 @@ function IdentityRoute({ cookies, children }) {
 
                                 <TabPanel>
                                     <Box>
-                                        <TransactionsList transactions={transactions.resultSet} size='s'/>
+                                        <TransactionsList transactions={transactions.resultSet} size='m'/>
                                     </Box>
                                 </TabPanel>
 
diff --git a/packages/frontend/src/styles/theme.scss b/packages/frontend/src/styles/theme.scss
index ab2591494..09b321ce8 100644
--- a/packages/frontend/src/styles/theme.scss
+++ b/packages/frontend/src/styles/theme.scss
@@ -14,3 +14,19 @@
         top: -12px;
     }
 }
+
+.Table {
+    a {
+        position: relative;
+        display: inline-block;
+        margin-bottom: -1px;
+        // color: var(--chakra-colors-brand-normal);
+        border-bottom: 1px solid;
+
+        &:hover {
+            // color: var(--chakra-colors-brand-deep);
+            color: var(--chakra-colors-gray-200);
+            border-bottom: none;
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/frontend/src/styles/variables.scss b/packages/frontend/src/styles/variables.scss
index e69de29bb..9cb2d3ea8 100644
--- a/packages/frontend/src/styles/variables.scss
+++ b/packages/frontend/src/styles/variables.scss
@@ -0,0 +1,5 @@
+$breakpoint-sm: '30em';
+$breakpoint-md: '48em';
+$breakpoint-lg: '62em';
+$breakpoint-xl: '80em';
+$breakpoint-2xl: '96em';
\ No newline at end of file

From 69449bef14a1144f51f59718982a47dedc6d766c Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Tue, 31 Oct 2023 22:04:37 +0700
Subject: [PATCH 13/19] upload DataContractsList.scss

---
 .../src/components/dataContracts/DataContractsList.scss        | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/frontend/src/components/dataContracts/DataContractsList.scss

diff --git a/packages/frontend/src/components/dataContracts/DataContractsList.scss b/packages/frontend/src/components/dataContracts/DataContractsList.scss
new file mode 100644
index 000000000..ee651bcb6
--- /dev/null
+++ b/packages/frontend/src/components/dataContracts/DataContractsList.scss
@@ -0,0 +1,3 @@
+.DataContractsList {
+    
+}
\ No newline at end of file

From 7306312c5e625612666ec1825a6aaa7652931b40 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Tue, 31 Oct 2023 22:09:41 +0700
Subject: [PATCH 14/19] Change content container size on home page

---
 packages/frontend/src/routes/home/home.route.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/routes/home/home.route.js b/packages/frontend/src/routes/home/home.route.js
index b449934de..d2467647f 100644
--- a/packages/frontend/src/routes/home/home.route.js
+++ b/packages/frontend/src/routes/home/home.route.js
@@ -34,7 +34,7 @@ function HomeRoute() {
 
     return (
         <Container 
-            maxW='container.xl' 
+            maxW='container.lg' 
             _dark={{ color: "white" }}
             padding={3}
             mt={8}
@@ -96,7 +96,7 @@ function HomeRoute() {
             </Container>
 
             <Container
-                maxW='none'
+                maxW='container.lg'
                 m={0}
                 borderWidth='1px' borderRadius='lg'
                 className='InfoBlock'

From b38a9e2d45685704b952becf9bd63219df66d85e Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Tue, 31 Oct 2023 22:22:34 +0700
Subject: [PATCH 15/19] Update paddings on identity page

---
 .../frontend/src/routes/identity/identity.route.js     | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
index 63ddc8319..ba23fae13 100644
--- a/packages/frontend/src/routes/identity/identity.route.js
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -129,28 +129,28 @@ function IdentityRoute({ cookies, children }) {
 
                             <TabPanels>
 
-                                <TabPanel>
+                                <TabPanel px={0}>
                                     <Box>
                                         <TransactionsList transactions={transactions.resultSet} size='m'/>
                                     </Box>
                                 </TabPanel>
 
-                                <TabPanel>
+                                <TabPanel px={0}>
                                     <Box>
                                         <DocumentsList documents={documents.resultSet} size='m'/>
                                     </Box>
 
                                 </TabPanel>
 
-                                <TabPanel>
+                                <TabPanel px={0}>
                                     <Box>
                                         <DataContractsList dataContracts={dataContracts.resultSet} size='m'/>
                                     </Box>
                                 </TabPanel>
 
-                                <TabPanel>
+                                <TabPanel px={0}>
                                     <Box>
-                                        credit transfers related to this identity (topup + transfer + withdrawals)
+                                        Credit transfers
                                     </Box>
                                 </TabPanel>
 

From f8ac2cd9f1590c21cbecfc4523d814954b665259 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Tue, 31 Oct 2023 23:28:38 +0700
Subject: [PATCH 16/19] Fix offsets on identity page

---
 packages/frontend/.env                                  | 2 +-
 packages/frontend/src/routes/identity/identity.route.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/.env b/packages/frontend/.env
index 0d6e37cb2..939a43cf8 100644
--- a/packages/frontend/.env
+++ b/packages/frontend/.env
@@ -1 +1 @@
-REACT_APP_API_BASE_URL=http://127.0.0.1:3005
+REACT_APP_API_BASE_URL=https://platform-explorer-api.rd.dash.org
\ No newline at end of file
diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
index ba23fae13..a8d7c2eea 100644
--- a/packages/frontend/src/routes/identity/identity.route.js
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -57,7 +57,7 @@ function IdentityRoute({ cookies, children }) {
                     wrap={["wrap", , , 'nowrap']}
                 >
                     <TableContainer 
-                        width={["100%", , , "50%"]}
+                        width={["100%", , , "calc(50% - 10px)"]}
                         maxW='none'
                         borderWidth='1px' borderRadius='lg'
                         m={0}
@@ -114,7 +114,7 @@ function IdentityRoute({ cookies, children }) {
                     <Box w={5} h={5} />
 
                     <Container
-                        width={["100%", , ,"50%"]}
+                        width={["100%", , ,"calc(50% - 10px)"]}
                         maxW='none'
                         m={0}
                         borderWidth='1px' borderRadius='lg'

From 831f423b12542415b96e6f55a1db626230192ce2 Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Wed, 1 Nov 2023 00:30:30 +0700
Subject: [PATCH 17/19] Fix code style and remove unused component. Restore
 default .env file.

---
 packages/frontend/.env                        |  2 +-
 .../frontend/src/components/Identifier.js     |  8 ------
 .../frontend/src/components/RootComponent.js  |  2 +-
 .../src/components/blocks/BlocksList.js       |  4 +--
 .../src/components/blocks/BlocksListItem.js   | 26 +++++--------------
 .../dataContracts/DataContractsList.js        |  2 +-
 .../dataContracts/DataContractsListItem.js    | 24 ++++++++---------
 .../src/components/documents/DocumentsList.js |  2 +-
 .../components/documents/DocumentsListItem.js |  8 +++---
 .../goToHeightForm/GoToHeightForm.js          |  9 +++----
 .../components/identities/IdentitiesList.js   |  7 +++--
 .../identities/IdentitiesListItem.js          | 20 +++-----------
 .../frontend/src/components/navbar/Navbar.js  |  4 +--
 .../pageSizeSelector/PageSizeSelector.js      |  6 ++---
 .../transactions/TransactionsList.js          |  2 +-
 .../transactions/TransactionsListItem.js      | 10 +++----
 packages/frontend/src/index.css               |  2 --
 packages/frontend/src/index.js                |  2 --
 .../frontend/src/routes/block/block.route.js  | 16 ++++++------
 .../src/routes/blocks/blocks.route.js         | 22 ++++++++--------
 .../dataContract/data.contract.route.js       | 18 ++++++-------
 .../dataContracts/data.contracts.route.js     | 10 +++----
 .../src/routes/document/document.route.js     |  8 +++---
 .../frontend/src/routes/home/home.route.js    | 17 ++++++------
 .../src/routes/identities/identities.route.js | 15 +++++------
 .../src/routes/identity/identity.route.js     | 10 +++----
 26 files changed, 107 insertions(+), 149 deletions(-)
 delete mode 100644 packages/frontend/src/components/Identifier.js

diff --git a/packages/frontend/.env b/packages/frontend/.env
index 939a43cf8..bd557b412 100644
--- a/packages/frontend/.env
+++ b/packages/frontend/.env
@@ -1 +1 @@
-REACT_APP_API_BASE_URL=https://platform-explorer-api.rd.dash.org
\ No newline at end of file
+REACT_APP_API_BASE_URL=http://127.0.0.1:3005
\ No newline at end of file
diff --git a/packages/frontend/src/components/Identifier.js b/packages/frontend/src/components/Identifier.js
deleted file mode 100644
index 19c7649eb..000000000
--- a/packages/frontend/src/components/Identifier.js
+++ /dev/null
@@ -1,8 +0,0 @@
-
-function Identifier ({value, maxSymbols = -1}) {
-    return maxSymbols === -1 && maxSymbols / 2 < value.length ? 
-        value : 
-        value.slice(0, Math.floor(maxSymbols / 2)) + '...' + value.slice(value.length - Math.floor(maxSymbols / 2), value.length);
-}
-
-export default Identifier;
\ No newline at end of file
diff --git a/packages/frontend/src/components/RootComponent.js b/packages/frontend/src/components/RootComponent.js
index 5c7e6d600..42cdccd2f 100644
--- a/packages/frontend/src/components/RootComponent.js
+++ b/packages/frontend/src/components/RootComponent.js
@@ -7,7 +7,7 @@ import "../styles/theme.scss";
 import { ChakraProvider} from '@chakra-ui/react'
 
 
-export default function RootComponent({cookies}) {
+export default function RootComponent() {
 
     return (
         <ChakraProvider theme={theme}>
diff --git a/packages/frontend/src/components/blocks/BlocksList.js b/packages/frontend/src/components/blocks/BlocksList.js
index 42422a8f9..0e3eb2ebb 100644
--- a/packages/frontend/src/components/blocks/BlocksList.js
+++ b/packages/frontend/src/components/blocks/BlocksList.js
@@ -6,7 +6,7 @@ import './BlocksList.scss'
 function BlocksList ({blocks = [], columnsCount = 1, size = 'l'}) {
     return( 
         <div 
-            className='BlocksList'
+            className={'BlocksList'}
             style={{
                 columnCount: blocks.length > 1 ? columnsCount : 1,
             }}
@@ -20,7 +20,7 @@ function BlocksList ({blocks = [], columnsCount = 1, size = 'l'}) {
             )}
 
             {blocks.length === 0 &&
-                <div className='documents_list__empty_message'>There are no documents created yet.</div>
+                <div className={'documents_list__empty_message'}>There are no documents created yet.</div>
             }
         </div>
     )
diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js
index 02d13bfc7..21f6d8157 100644
--- a/packages/frontend/src/components/blocks/BlocksListItem.js
+++ b/packages/frontend/src/components/blocks/BlocksListItem.js
@@ -1,6 +1,5 @@
-import {Link} from "react-router-dom";
+import {Link} from 'react-router-dom';
 import './BlocksListItem.scss'
-import Identifier from '../Identifier'
 
 
 function BlocksListItem ({ block, size = 'l' }) {
@@ -9,37 +8,26 @@ function BlocksListItem ({ block, size = 'l' }) {
     const timestamp = block.header.timestamp
     const txsLength = block.txs.length
 
-    let maxSymbols = -1;
-
-    switch (size) {
-        case 'm':
-            maxSymbols = 16;
-            break;
-        case 's':
-            maxSymbols = 12;
-            break;
-    }
-
     return(
-        <Link to={`/block/${hash}`} className={"BlocksListItem"}>
+        <Link to={`/block/${hash}`} className={'BlocksListItem'}>
             {(size === 'l' && 
-                <span className={"BlocksListItem__Height"}>{height}</span>
+                <span className={'BlocksListItem__Height'}>{height}</span>
             )}
 
             {typeof timestamp === 'string' &&
-                <span className={"BlocksListItem__Timestamp"}>
+                <span className={'BlocksListItem__Timestamp'}>
                     {new Date(timestamp).toLocaleString()}
                 </span>
             }
 
             {typeof hash === 'string' &&
-                <span className={"BlocksListItem__Hash"}>
-                    <Identifier value={hash} maxSymbols={maxSymbols}/>
+                <span className={'BlocksListItem__Hash'}>
+                    {hash}
                 </span>
             }
 
             {(typeof txsLength === 'number') &&
-                <span className={"BlocksListItem__Txs"}>
+                <span className={'BlocksListItem__Txs'}>
                     ({txsLength} txs)
                 </span>
             }
diff --git a/packages/frontend/src/components/dataContracts/DataContractsList.js b/packages/frontend/src/components/dataContracts/DataContractsList.js
index 74455d1de..2e429e342 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsList.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsList.js
@@ -16,7 +16,7 @@ function DataContractsList ({dataContracts = [], size = 'l'}) {
             )}
 
             {dataContracts.length === 0 &&
-                <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
+                <div className={'DataContractsList__EmptyMessage'}>There are no data contracts created yet.</div>
             }
 
         </div>
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
index 786a65e45..02750bebe 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
@@ -1,4 +1,4 @@
-import {Link} from "react-router-dom";
+import {Link} from 'react-router-dom';
 import './DataContractsListItem.scss'
 
 
@@ -8,19 +8,17 @@ function DataContractsListItem ({dataContract, size = 'l'}) {
     
     return (
         <>
-            {typeof identifier === 'string' &&
-                <Link to={`/dataContract/${identifier}`} className="DataContractsListItem">
-                    <div className="DataContractsListItem__Identifier">
-                        {identifier}
-                    </div>
+            <Link to={`/dataContract/${identifier}`} className={'DataContractsListItem'}>
+                <div className={'DataContractsListItem__Identifier'}>
+                    {identifier}
+                </div>
 
-                    {(size !== 's' && typeof timestamp === 'string') && 
-                        <div className="DataContractsListItem__Timestamp">
-                            {new Date(timestamp).toLocaleString()}
-                        </div>
-                    }
-                </Link>
-            }
+                {(size !== 's' && typeof timestamp === 'string') && 
+                    <div className={'DataContractsListItem__Timestamp'}>
+                        {new Date(timestamp).toLocaleString()}
+                    </div>
+                }
+            </Link>
         </>
     );
 }
diff --git a/packages/frontend/src/components/documents/DocumentsList.js b/packages/frontend/src/components/documents/DocumentsList.js
index 195ac1b0b..607417526 100644
--- a/packages/frontend/src/components/documents/DocumentsList.js
+++ b/packages/frontend/src/components/documents/DocumentsList.js
@@ -16,7 +16,7 @@ export default function DocumentsList({documents = [], size='l'}) {
             )}
 
             {documents.length === 0 &&
-                <div className='DocumentsList__EmptyMessage'>There are no documents created yet.</div>
+                <div className={'DocumentsList__EmptyMessage'}>There are no documents created yet.</div>
             }
 
         </div>
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js
index 4534788a0..31c36f72a 100644
--- a/packages/frontend/src/components/documents/DocumentsListItem.js
+++ b/packages/frontend/src/components/documents/DocumentsListItem.js
@@ -1,4 +1,4 @@
-import {Link} from "react-router-dom";
+import {Link} from 'react-router-dom';
 import './DocumentsListItem.scss'
 
 
@@ -9,14 +9,14 @@ export default function DocumentsListItem({document}) {
     return (
         <Link 
             to={`/document/${identifier}`}
-            className='DocumentsListItem'
+            className={'DocumentsListItem'}
         >
 
-            <div className='DocumentsListItem__Identifier'>
+            <div className={'DocumentsListItem__Identifier'}>
                 {identifier}
             </div>
 
-            <div className='DocumentsListItem__Timestamp'>
+            <div className={'DocumentsListItem__Timestamp'}>
                 {new Date(timestamp).toLocaleString()}
             </div>
 
diff --git a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
index 1c352c65c..91e9a1546 100644
--- a/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
+++ b/packages/frontend/src/components/goToHeightForm/GoToHeightForm.js
@@ -1,19 +1,18 @@
-import "./GoToHeightForm.scss";
+import './GoToHeightForm.scss'
 
-// import React, {useState} from 'react';
 
 export default function GoToHeightForm({isValid, goToHeightHandler, goToHeightChangeHandle}) {
 
     return (
-        <form className='GoToHeightForm' onSubmit={goToHeightHandler}>
-            <div className='GoToHeightForm__Title'>Go to height</div>
+        <form className={'GoToHeightForm'} onSubmit={goToHeightHandler}>
+            <div className={'GoToHeightForm__Title'}>Go to height</div>
             <input 
                 className={isValid() ? 'GoToHeightForm__Input' : 'GoToHeightForm__Input  GoToHeightForm__Input--Incorrect'}
                 onInput={goToHeightChangeHandle}
                 type='number'
                 placeholder='Height'
             />
-            <button className='GoToHeightForm__Button' disabled={!isValid()}>go</button>
+            <button className={'GoToHeightForm__Button'} disabled={!isValid()}>go</button>
         </form>
     );
 }
diff --git a/packages/frontend/src/components/identities/IdentitiesList.js b/packages/frontend/src/components/identities/IdentitiesList.js
index 3d4881bc8..81d9aadaa 100644
--- a/packages/frontend/src/components/identities/IdentitiesList.js
+++ b/packages/frontend/src/components/identities/IdentitiesList.js
@@ -1,11 +1,10 @@
-import {Link} from "react-router-dom";
-import IdentitiesListItem from "./IdentitiesListItem";
+import IdentitiesListItem from './IdentitiesListItem'
 import './IdentitiesList.scss'
 
 
 function IdentitiesList({ identities }) {
     return (
-        <div className="IdentitiesList">
+        <div className={'IdentitiesList'}>
             {identities.map((identity, key) =>
                 <IdentitiesListItem
                     key={key}
@@ -14,7 +13,7 @@ function IdentitiesList({ identities }) {
             )}
             
             {identities.length === 0 &&
-                <div className='IdentitiesList__EmptyMessage'>There are no identities created yet.</div>
+                <div className={'IdentitiesList__EmptyMessage'}>There are no identities created yet.</div>
             }
         </div>
     );
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
index bdebb995a..470a844b0 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.js
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -1,31 +1,19 @@
 import {Link} from "react-router-dom";
 import './IdentitiesListItem.scss'
-import Identifier from '../Identifier'
 
 
 function IdentitiesListItem ({identity, size = 'l'}) {
     const identifier = identity.identifier
     const timestamp = identity.timestamp
 
-    let maxSymbols = -1;
-
-    switch (size) {
-        case 'm':
-            maxSymbols = 12;
-        break;
-        case 's':
-            maxSymbols = 6;
-        break;
-    }
-    
     return (
-        <Link to={`/identity/${identifier}`} className="IdentitiesListItem">
-            <div className="IdentitiesListItem__Identifier">
-                <Identifier value={identifier} maxSymbols={maxSymbols}/>
+        <Link to={`/identity/${identifier}`} className={'IdentitiesListItem'}>
+            <div className={'IdentitiesListItem__Identifier'}>
+                {identifier}
             </div>
 
             {(size !== 's' && typeof timestamp === 'string') && 
-                <div className="IdentitiesListItem__Timestamp">
+                <div className={'IdentitiesListItem__Timestamp'}>
                     {new Date(timestamp).toLocaleString()}
                 </div>
             }
diff --git a/packages/frontend/src/components/navbar/Navbar.js b/packages/frontend/src/components/navbar/Navbar.js
index 7b74a90fb..91dd8339d 100644
--- a/packages/frontend/src/components/navbar/Navbar.js
+++ b/packages/frontend/src/components/navbar/Navbar.js
@@ -47,7 +47,7 @@ function Navbar() {
   return (
     <Box px={3}>
         <Flex 
-          className='Navbar' 
+          className={'Navbar'}
           maxW='1980px' 
           ml='auto' 
           mr='auto' 
@@ -77,7 +77,7 @@ function Navbar() {
         </Flex>
 
         {isOpen ? (
-          <Box className='NavbarMobileMenu' pb={4} display={{ md: 'none' }}>
+          <Box className={'NavbarMobileMenu'} pb={4} display={{ md: 'none' }}>
             <Stack as={'nav'} spacing={4}>
               {links.map((link) => (
                 <NavLink to={link.href} key={link.title}>{link.title}</NavLink>
diff --git a/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js
index ec885632a..ae1a6b3b9 100644
--- a/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js
+++ b/packages/frontend/src/components/pageSizeSelector/PageSizeSelector.js
@@ -1,9 +1,9 @@
-import "./PageSizeSelector.scss";
+import './PageSizeSelector.scss';
 
 export default function PageSizeSelector({PageSizeSelectHandler, defaultValue, items}) {
     return (
-        <div className='PageSizeSelector'>
-            <div className='PageSizeSelector__Title'>Items on page</div>
+        <div className={'PageSizeSelector'}>
+            <div className={'PageSizeSelector__Title'}>Items on page</div>
             <select onChange={PageSizeSelectHandler} defaultValue={defaultValue}>
                 {items.map(item => {
                     return <option value={item} key={'PSS' + item}>{item}</option>;
diff --git a/packages/frontend/src/components/transactions/TransactionsList.js b/packages/frontend/src/components/transactions/TransactionsList.js
index 20525c33f..b0590211b 100644
--- a/packages/frontend/src/components/transactions/TransactionsList.js
+++ b/packages/frontend/src/components/transactions/TransactionsList.js
@@ -17,7 +17,7 @@ export default function TransactionsList({transactions = [], size='l'}) {
             }
 
             {transactions.length === 0 &&
-                <div className='DataContractsList__EmptyMessage'>There are no data contracts created yet.</div>
+                <div className={'DataContractsList__EmptyMessage'}>There are no data contracts created yet.</div>
             }
 
         </div>
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index db904a26f..11b38fa93 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -1,4 +1,4 @@
-import {Link} from "react-router-dom";
+import {Link} from 'react-router-dom'
 import {getTransitionTypeString} from '../../util/index'
 import './TransactionsListItem.scss'
 
@@ -11,23 +11,23 @@ function TransactionsListItem({transaction}) {
     return (
         <Link 
             to={`/transaction/${hash}`}
-            className='TransactionsListItem'
+            className={'TransactionsListItem'}
         >
 
             {typeof timestamp === 'string' &&
-                <div className='TransactionsListItem__Timestamp'>
+                <div className={'TransactionsListItem__Timestamp'}>
                     {new Date(timestamp).toLocaleString()}
                 </div>
             }
             
             {typeof hash === 'string' &&
-                <div className='TransactionsListItem__Identifier'>
+                <div className={'TransactionsListItem__Identifier'}>
                     {hash}
                 </div>
             }
 
             {typeof type === 'number' &&
-                <div className='TransactionsListItem__Type'>
+                <div className={'TransactionsListItem__Type'}>
                     ({getTransitionTypeString(type)})
                 </div>
             }
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index e84501f29..5221317ce 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -113,8 +113,6 @@ code {
 }
 
 .active, .active:hover {
-  /* background-color: rgba(57, 175, 159, 0.55); */
-  /* background-color: var(--chakra-colors-brand-deep); */
   background-color: var(--chakra-colors-gray-800);
 }
 
diff --git a/packages/frontend/src/index.js b/packages/frontend/src/index.js
index 7b6e17ac4..d4c711f6d 100644
--- a/packages/frontend/src/index.js
+++ b/packages/frontend/src/index.js
@@ -80,8 +80,6 @@ const router = createBrowserRouter([
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
     <React.StrictMode>
-         {/* {localStorage.setItem('chakra-ui-color-mode', 'dark')} */}
-         
         <RouterProvider router={router}/>
     </React.StrictMode>
 );
diff --git a/packages/frontend/src/routes/block/block.route.js b/packages/frontend/src/routes/block/block.route.js
index 0345d4f32..b036d3e05 100644
--- a/packages/frontend/src/routes/block/block.route.js
+++ b/packages/frontend/src/routes/block/block.route.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import { useLoaderData} from "react-router-dom";
-import * as Api from "../../util/Api";
-import TransactionsList from "../../components/transactions/TransactionsList";
+import React from 'react'
+import { useLoaderData} from 'react-router-dom'
+import * as Api from '../../util/Api'
+import TransactionsList from '../../components/transactions/TransactionsList'
 
 import { 
     Container,
     TableContainer, Table, Thead, Tbody, Tr, Th, Td, 
     Heading, 
-} from "@chakra-ui/react"
+} from '@chakra-ui/react'
 
 
 export async function loader({params}) {
@@ -37,7 +37,7 @@ function BlockRoute() {
                 <Table variant='simple'>
                     <Thead>
                         <Tr>
-                            <Th><div className='Table__Title'>Block info</div></Th>
+                            <Th><div className={'Table__Title'}>Block info</div></Th>
                             <Th></Th>
                         </Tr>
                     </Thead>
@@ -82,10 +82,10 @@ function BlockRoute() {
                     maxW='none'
                     mt={5}
                     borderWidth='1px' borderRadius='lg'
-                    className='InfoBlock'
+                    className={'InfoBlock'}
                 >
 
-                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Transactions</Heading>
+                    <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Transactions</Heading>
 
                     <div>
 
diff --git a/packages/frontend/src/routes/blocks/blocks.route.js b/packages/frontend/src/routes/blocks/blocks.route.js
index 8343915a9..8c5b0babc 100644
--- a/packages/frontend/src/routes/blocks/blocks.route.js
+++ b/packages/frontend/src/routes/blocks/blocks.route.js
@@ -1,16 +1,16 @@
-import React, {useState, useEffect} from 'react';
-import {Link, useLoaderData} from "react-router-dom";
-import * as Api from "../../util/Api";
-import ReactPaginate from "react-paginate";
-import GoToHeightForm from "./../../components/goToHeightForm/GoToHeightForm";
-import PageSizeSelector from "./../../components/pageSizeSelector/PageSizeSelector";
+import React, {useState, useEffect} from 'react'
+import {Link, useLoaderData} from 'react-router-dom'
+import * as Api from '../../util/Api'
+import ReactPaginate from 'react-paginate'
+import GoToHeightForm from './../../components/goToHeightForm/GoToHeightForm'
+import PageSizeSelector from './../../components/pageSizeSelector/PageSizeSelector'
 import BlocksList from '../../components/blocks/BlocksList'
 import './Blocks.scss'
 
 import { 
     Container,
     Heading, 
-} from "@chakra-ui/react";
+} from '@chakra-ui/react'
 
 
 const paginateConfig = { 
@@ -67,19 +67,19 @@ function BlocksRoute() {
             color='white'
             mt={8}
             mb={8}
-            className='Blocks'
+            className={'Blocks'}
         >
             <Container 
                 maxW='container.lg' 
                 _dark={{ color: "white" }}
                 borderWidth='1px' borderRadius='lg'
-                className='InfoBlock'
+                className={'InfoBlock'}
             >
-                <Heading className='InfoBlock__Title' as='h1' size='sm'>Blocks</Heading>
+                <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Blocks</Heading>
                 <BlocksList blocks={blocks}/>
 
 
-                <div className='ListNavigation'>
+                <div className={'ListNavigation'}>
                     <GoToHeightForm
                         goToHeightHandler={goToHeight}
                         goToHeightChangeHandle={(e) => setBlockHeightToSearch(e.target.value)}
diff --git a/packages/frontend/src/routes/dataContract/data.contract.route.js b/packages/frontend/src/routes/dataContract/data.contract.route.js
index c48014b80..efa781f70 100644
--- a/packages/frontend/src/routes/dataContract/data.contract.route.js
+++ b/packages/frontend/src/routes/dataContract/data.contract.route.js
@@ -1,9 +1,9 @@
-import React, {useState} from 'react';
-import {Link} from "react-router-dom";
-import {useLoaderData} from "react-router-dom";
-import * as Api from "../../util/Api";
-import ReactPaginate from "react-paginate";
-import DocumentsList from "../../components/documents/DocumentsList";
+import React, {useState} from 'react'
+import {Link} from 'react-router-dom'
+import {useLoaderData} from 'react-router-dom'
+import * as Api from '../../util/Api'
+import ReactPaginate from 'react-paginate'
+import DocumentsList from '../../components/documents/DocumentsList'
 import './DataContract.scss'
 
 import { 
@@ -12,7 +12,7 @@ import {
     TableContainer, Table, Thead, Tbody, Tfoot, Tr, Th, Td,
     Tabs, TabList, TabPanels, Tab, TabPanel,
     Code 
-} from "@chakra-ui/react";
+} from '@chakra-ui/react';
 
 
 const pagintationConfig = {
@@ -56,7 +56,7 @@ function DataContractRoute() {
             maxW='container.xl' 
             padding={3}
             mt={8}
-            className='DataContract'
+            className={'DataContract'}
         >
             <TableContainer 
                 maxW='none'
@@ -98,7 +98,7 @@ function DataContractRoute() {
                 maxW='none'
                 mt={5}
                 borderWidth='1px' borderRadius='lg'
-                className='InfoBlock'
+                className={'InfoBlock'}
             >
                 <Tabs>
                     <TabList>
diff --git a/packages/frontend/src/routes/dataContracts/data.contracts.route.js b/packages/frontend/src/routes/dataContracts/data.contracts.route.js
index b549de0d5..7965066e1 100644
--- a/packages/frontend/src/routes/dataContracts/data.contracts.route.js
+++ b/packages/frontend/src/routes/dataContracts/data.contracts.route.js
@@ -1,11 +1,11 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useState} from 'react'
 import * as Api from '../../util/Api'
 import DataContractsList from '../../components/dataContracts/DataContractsList'
 
 import { 
     Container,
     Heading, 
-} from "@chakra-ui/react"
+} from '@chakra-ui/react'
 
 function DataContractsRoute() {
     const [dataContracts, setDataContracts] = useState(null)
@@ -22,7 +22,7 @@ function DataContractsRoute() {
     }, [])
 
     return (
-        <div className="container">
+        <div className={'container'}>
             {error && <div>Error {error}</div>}
             {loading && <div>Loading data contracts from API</div>}
 
@@ -33,10 +33,10 @@ function DataContractsRoute() {
                     mt={8}
                     mb={4}
                     borderWidth='1px' borderRadius='lg'
-                    className='InfoBlock'
+                    className={'InfoBlock'}
                 > 
 
-                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Data contracts</Heading>
+                    <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Data contracts</Heading>
 
                     <DataContractsList dataContracts={dataContracts} size='l'/>
 
diff --git a/packages/frontend/src/routes/document/document.route.js b/packages/frontend/src/routes/document/document.route.js
index f0be98aa9..00f4ebf51 100644
--- a/packages/frontend/src/routes/document/document.route.js
+++ b/packages/frontend/src/routes/document/document.route.js
@@ -29,7 +29,7 @@ function DocumentRoute() {
             _dark={{ bg: "gray.900" }}
             mt={8}
             mb={8}
-            className='DocumentPage'
+            className={'DocumentPage'}
         >
             <Flex 
                 w='100%' 
@@ -69,13 +69,13 @@ function DocumentRoute() {
                     width={["100%", , ,"50%"]}
                     maxW='none'
                     borderWidth='1px' borderRadius='lg'
-                    className='InfoBlock'
+                    className={'InfoBlock'}
                 >
-                    <Heading className='InfoBlock__Title' as='h1' size='sm'>Data</Heading>
+                    <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Data</Heading>
 
                     <Code 
                         borderRadius='lg'
-                        className='DocumentPage__Code'
+                        className={'DocumentPage__Code'}
                         w='100%'
                     >
                         {JSON.stringify(document.data, null, 2)}
diff --git a/packages/frontend/src/routes/home/home.route.js b/packages/frontend/src/routes/home/home.route.js
index d2467647f..4eca9a598 100644
--- a/packages/frontend/src/routes/home/home.route.js
+++ b/packages/frontend/src/routes/home/home.route.js
@@ -1,9 +1,8 @@
-import React from 'react';
-import * as Api from "../../util/Api";
+import React from 'react'
+import * as Api from '../../util/Api'
 import './home.css'
-import {useLoaderData} from "react-router-dom";
+import {useLoaderData} from 'react-router-dom'
 import TransactionsList from '../../components/transactions/TransactionsList'
-import BlocksList from '../../components/blocks/BlocksList'
 
 import { 
     Box, 
@@ -13,11 +12,11 @@ import {
     Flex,
     Stack,
     StackDivider
-} from "@chakra-ui/react";
+} from '@chakra-ui/react'
 
 
 export async function loader({}) {
-    const [status, paginatedTransactions, paginatedBlocks] = await Promise.all([
+    const [status, paginatedTransactions] = await Promise.all([
         Api.getStatus(), 
         Api.getTransactions(1, 25, 'desc')
     ])
@@ -39,7 +38,7 @@ function HomeRoute() {
             padding={3}
             mt={8}
             mb={4}
-            className='data_contract'
+            className={'data_contract'}
         >
             <Container 
                 width='100%'
@@ -99,9 +98,9 @@ function HomeRoute() {
                 maxW='container.lg'
                 m={0}
                 borderWidth='1px' borderRadius='lg'
-                className='InfoBlock'
+                className={'InfoBlock'}
             >
-                <Heading className='InfoBlock__Title' as='h1' size='sm'>Last transaction</Heading>
+                <Heading className={'InfoBlock__Title'} as='h1' size='sm'>Last transaction</Heading>
 
                 <TransactionsList transactions={transactions} />
 
diff --git a/packages/frontend/src/routes/identities/identities.route.js b/packages/frontend/src/routes/identities/identities.route.js
index 3af967dba..7ad0cdbd3 100644
--- a/packages/frontend/src/routes/identities/identities.route.js
+++ b/packages/frontend/src/routes/identities/identities.route.js
@@ -1,13 +1,12 @@
-import {useLoaderData} from "react-router-dom";
-import * as Api from "../../util/Api";
+import {useLoaderData} from 'react-router-dom'
+import * as Api from '../../util/Api'
 import './identities.scss'
-import {Link} from "react-router-dom";
-import IdentitiesList from "../../components/identities/IdentitiesList";
+import IdentitiesList from '../../components/identities/IdentitiesList'
 
 import { 
     Container,
     Heading, 
-} from "@chakra-ui/react"
+} from '@chakra-ui/react'
 
 
 export async function loader({params}) {
@@ -23,14 +22,14 @@ function IdentitiesRoute() {
         <Container 
             maxW='container.md' 
             mt={8}
-            className='IdentitiesPage'
+            className={'IdentitiesPage'}
         >
             <Container 
                 maxW='container.md' 
                 borderWidth='1px' borderRadius='lg'
-                className='InfoBlock'
+                className={'InfoBlock'}
             >
-                <Heading className='InfoBlock__Title' as='h1' size='sm' >Identities</Heading>
+                <Heading className={'InfoBlock__Title'} as='h1' size='sm' >Identities</Heading>
 
                 <IdentitiesList identities={identities}/>
 
diff --git a/packages/frontend/src/routes/identity/identity.route.js b/packages/frontend/src/routes/identity/identity.route.js
index a8d7c2eea..70c975d86 100644
--- a/packages/frontend/src/routes/identity/identity.route.js
+++ b/packages/frontend/src/routes/identity/identity.route.js
@@ -35,7 +35,7 @@ export async function loader({params}) {
     };
 }
 
-function IdentityRoute({ cookies, children }) {
+function IdentityRoute() {
     const {
         identity, 
         dataContracts,
@@ -45,7 +45,7 @@ function IdentityRoute({ cookies, children }) {
     } = useLoaderData();
 
     return (
-        <div className="block identity">
+        <div className={'identity'}>
             <Container 
                 maxW='container.xl' 
                 padding={3}
@@ -61,9 +61,9 @@ function IdentityRoute({ cookies, children }) {
                         maxW='none'
                         borderWidth='1px' borderRadius='lg'
                         m={0}
-                        className="IdentityInfo"
+                        className={'IdentityInfo'}
                     >
-                        <Table variant='simple' className="Table">
+                        <Table variant='simple' className={'Table'}>
                             <Thead>
                                 <Tr>
                                     <Th>Identity info</Th>
@@ -118,7 +118,7 @@ function IdentityRoute({ cookies, children }) {
                         maxW='none'
                         m={0}
                         borderWidth='1px' borderRadius='lg'
-                        className="InfoBlock"
+                        className={'InfoBlock'}
                     >
                         <Tabs>
                             <TabList>

From 0d91f1f1c6c44c64666edbac9b7cb5423f5d2cfa Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Wed, 1 Nov 2023 02:14:15 +0700
Subject: [PATCH 18/19] refactoring code

---
 .../src/components/blocks/BlocksListItem.js    | 18 ++++++++----------
 .../dataContracts/DataContractsListItem.js     |  7 +++----
 .../components/documents/DocumentsListItem.js  |  3 +--
 .../identities/IdentitiesListItem.js           |  7 +++----
 .../transactions/TransactionsListItem.js       |  3 +--
 5 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js
index 21f6d8157..a133bcee6 100644
--- a/packages/frontend/src/components/blocks/BlocksListItem.js
+++ b/packages/frontend/src/components/blocks/BlocksListItem.js
@@ -1,16 +1,14 @@
-import {Link} from 'react-router-dom';
+import {Link} from 'react-router-dom'
 import './BlocksListItem.scss'
 
 
-function BlocksListItem ({ block, size = 'l' }) {
-    const hash = block.header.hash
-    const height = block.header.height
-    const timestamp = block.header.timestamp
-    const txsLength = block.txs.length
+function BlocksListItem ({ block }) {
+    const {header, txs} = block
+    const {hash, height, timestamp} = header
 
     return(
         <Link to={`/block/${hash}`} className={'BlocksListItem'}>
-            {(size === 'l' && 
+            {(typeof height === 'number' && 
                 <span className={'BlocksListItem__Height'}>{height}</span>
             )}
 
@@ -22,13 +20,13 @@ function BlocksListItem ({ block, size = 'l' }) {
 
             {typeof hash === 'string' &&
                 <span className={'BlocksListItem__Hash'}>
-                    {hash}
+                    {hash}  
                 </span>
             }
 
-            {(typeof txsLength === 'number') &&
+            {(typeof txs.length === 'number') &&
                 <span className={'BlocksListItem__Txs'}>
-                    ({txsLength} txs)
+                    ({txs.length} txs)
                 </span>
             }
             
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
index 02750bebe..26ca0d199 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
@@ -2,9 +2,8 @@ import {Link} from 'react-router-dom';
 import './DataContractsListItem.scss'
 
 
-function DataContractsListItem ({dataContract, size = 'l'}) {
-    const identifier = dataContract.identifier
-    const timestamp = dataContract.timestamp
+function DataContractsListItem ({ dataContract }) {
+    const {identifier, timestamp} = dataContract
     
     return (
         <>
@@ -13,7 +12,7 @@ function DataContractsListItem ({dataContract, size = 'l'}) {
                     {identifier}
                 </div>
 
-                {(size !== 's' && typeof timestamp === 'string') && 
+                {(typeof timestamp === 'string') && 
                     <div className={'DataContractsListItem__Timestamp'}>
                         {new Date(timestamp).toLocaleString()}
                     </div>
diff --git a/packages/frontend/src/components/documents/DocumentsListItem.js b/packages/frontend/src/components/documents/DocumentsListItem.js
index 31c36f72a..caa673e47 100644
--- a/packages/frontend/src/components/documents/DocumentsListItem.js
+++ b/packages/frontend/src/components/documents/DocumentsListItem.js
@@ -3,8 +3,7 @@ import './DocumentsListItem.scss'
 
 
 export default function DocumentsListItem({document}) {
-    const identifier = document.identifier
-    const timestamp = document.timestamp
+    const {identifier, timestamp} = document
 
     return (
         <Link 
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
index 470a844b0..5eb6e519c 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.js
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -2,9 +2,8 @@ import {Link} from "react-router-dom";
 import './IdentitiesListItem.scss'
 
 
-function IdentitiesListItem ({identity, size = 'l'}) {
-    const identifier = identity.identifier
-    const timestamp = identity.timestamp
+function IdentitiesListItem ({identity}) {
+    const {identifier, timestamp} = identity
 
     return (
         <Link to={`/identity/${identifier}`} className={'IdentitiesListItem'}>
@@ -12,7 +11,7 @@ function IdentitiesListItem ({identity, size = 'l'}) {
                 {identifier}
             </div>
 
-            {(size !== 's' && typeof timestamp === 'string') && 
+            {(typeof timestamp === 'string') && 
                 <div className={'IdentitiesListItem__Timestamp'}>
                     {new Date(timestamp).toLocaleString()}
                 </div>
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index 11b38fa93..8340ca610 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -5,8 +5,7 @@ import './TransactionsListItem.scss'
 
 function TransactionsListItem({transaction}) {
     const hash = typeof transaction === 'object' ? transaction.hash : transaction;
-    const timestamp = transaction.timestamp;
-    const type = transaction.type;
+    const {timestamp, type} = transaction
 
     return (
         <Link 

From aee62d885c52f388a57d85f5306986ce599ac4fe Mon Sep 17 00:00:00 2001
From: alexeyandreevsky <andreewsky.alexey@gmail.com>
Date: Wed, 1 Nov 2023 02:16:38 +0700
Subject: [PATCH 19/19] Refactoring code

---
 .../src/components/blocks/BlocksListItem.js   |  5 +++-
 .../dataContracts/DataContractsListItem.js    | 25 ++++++++++---------
 .../identities/IdentitiesListItem.js          |  5 +++-
 .../transactions/TransactionsListItem.js      |  2 +-
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/frontend/src/components/blocks/BlocksListItem.js b/packages/frontend/src/components/blocks/BlocksListItem.js
index a133bcee6..d17b887c0 100644
--- a/packages/frontend/src/components/blocks/BlocksListItem.js
+++ b/packages/frontend/src/components/blocks/BlocksListItem.js
@@ -7,7 +7,10 @@ function BlocksListItem ({ block }) {
     const {hash, height, timestamp} = header
 
     return(
-        <Link to={`/block/${hash}`} className={'BlocksListItem'}>
+        <Link 
+            to={`/block/${hash}`} 
+            className={'BlocksListItem'}
+        >
             {(typeof height === 'number' && 
                 <span className={'BlocksListItem__Height'}>{height}</span>
             )}
diff --git a/packages/frontend/src/components/dataContracts/DataContractsListItem.js b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
index 26ca0d199..b90c8d333 100644
--- a/packages/frontend/src/components/dataContracts/DataContractsListItem.js
+++ b/packages/frontend/src/components/dataContracts/DataContractsListItem.js
@@ -6,19 +6,20 @@ function DataContractsListItem ({ dataContract }) {
     const {identifier, timestamp} = dataContract
     
     return (
-        <>
-            <Link to={`/dataContract/${identifier}`} className={'DataContractsListItem'}>
-                <div className={'DataContractsListItem__Identifier'}>
-                    {identifier}
-                </div>
+        <Link 
+            to={`/dataContract/${identifier}`} 
+            className={'DataContractsListItem'}
+        >
+            <div className={'DataContractsListItem__Identifier'}>
+                {identifier}
+            </div>
 
-                {(typeof timestamp === 'string') && 
-                    <div className={'DataContractsListItem__Timestamp'}>
-                        {new Date(timestamp).toLocaleString()}
-                    </div>
-                }
-            </Link>
-        </>
+            {(typeof timestamp === 'string') && 
+                <div className={'DataContractsListItem__Timestamp'}>
+                    {new Date(timestamp).toLocaleString()}
+                </div>
+            }
+        </Link>
     );
 }
 
diff --git a/packages/frontend/src/components/identities/IdentitiesListItem.js b/packages/frontend/src/components/identities/IdentitiesListItem.js
index 5eb6e519c..806b7c6ff 100644
--- a/packages/frontend/src/components/identities/IdentitiesListItem.js
+++ b/packages/frontend/src/components/identities/IdentitiesListItem.js
@@ -6,7 +6,10 @@ function IdentitiesListItem ({identity}) {
     const {identifier, timestamp} = identity
 
     return (
-        <Link to={`/identity/${identifier}`} className={'IdentitiesListItem'}>
+        <Link 
+            to={`/identity/${identifier}`} 
+            className={'IdentitiesListItem'}
+        >
             <div className={'IdentitiesListItem__Identifier'}>
                 {identifier}
             </div>
diff --git a/packages/frontend/src/components/transactions/TransactionsListItem.js b/packages/frontend/src/components/transactions/TransactionsListItem.js
index 8340ca610..0025bfb59 100644
--- a/packages/frontend/src/components/transactions/TransactionsListItem.js
+++ b/packages/frontend/src/components/transactions/TransactionsListItem.js
@@ -3,7 +3,7 @@ import {getTransitionTypeString} from '../../util/index'
 import './TransactionsListItem.scss'
 
 
-function TransactionsListItem({transaction}) {
+function TransactionsListItem({ transaction }) {
     const hash = typeof transaction === 'object' ? transaction.hash : transaction;
     const {timestamp, type} = transaction