diff --git a/package.json b/package.json
index 61657de..b29d888 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "tslint": "5.20.1",
     "tslint-config-standard": "8.0.1",
     "tslint-react": "4.1.0",
+    "tslint-react-hooks": "^2.2.2",
     "typescript": "3.8.3"
   },
   "workspaces": [
diff --git a/packages/ui/src/components/Account/Account.tsx b/packages/ui/src/components/Account/Account.tsx
index 125bb88..5f64e76 100644
--- a/packages/ui/src/components/Account/Account.tsx
+++ b/packages/ui/src/components/Account/Account.tsx
@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { Pen3 as EditIcon } from '@emeraldplatform/ui-icons';
-import { withStyles } from '@material-ui/core/styles';
-import { CSSProperties } from '@material-ui/core/styles/withStyles';
+import { createStyles, withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import cx from 'classnames';
 import * as React from 'react';
@@ -23,7 +22,7 @@ import * as React from 'react';
 import Address from '../Address';
 import IdentityIcon from '../IdentityIcon';
 
-export const getStyles = (theme?: any) => ({
+export const getStyles = (theme?: any) => createStyles({
   root: {
     display: 'flex',
     width: '100%',
@@ -52,7 +51,7 @@ export const getStyles = (theme?: any) => ({
     display: 'flex',
     flexDirection: 'column',
     justifyContent: 'center'
-  } as CSSProperties,
+  },
   identityIcon: {
     marginRight: '10px'
   },
diff --git a/packages/ui/src/components/ButtonGroup/ButtonGroup.tsx b/packages/ui/src/components/ButtonGroup/ButtonGroup.tsx
index 83b12b2..92ca03e 100644
--- a/packages/ui/src/components/ButtonGroup/ButtonGroup.tsx
+++ b/packages/ui/src/components/ButtonGroup/ButtonGroup.tsx
@@ -13,17 +13,17 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core';
 import * as React from 'react';
 import styles from './styles';
 
-interface Props {
+interface IButtonGroupProps {
   children?: any[];
   classes: any;
   style?: any;
 }
 
-export const ButtonGroup = ({ classes, children, style }: Props) => {
+export const ButtonGroup = ({ classes, children, style }: IButtonGroupProps) => {
   if (!children) {
     return null;
   }
@@ -34,7 +34,8 @@ export const ButtonGroup = ({ classes, children, style }: Props) => {
         const item = (
             <div key={key} className={(key === 0) ? classes.firstItem : classes.item}>
               {btn}
-            </div>);
+            </div>
+        );
         key += 1;
         return item;
       })}
diff --git a/packages/ui/src/components/Input/Input.tsx b/packages/ui/src/components/Input/Input.tsx
index 9899186..d888747 100644
--- a/packages/ui/src/components/Input/Input.tsx
+++ b/packages/ui/src/components/Input/Input.tsx
@@ -17,7 +17,7 @@ import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '@material-ui/core/TextField';
 import * as React from 'react';
 
-const getErrorProps = ({errorText}) => {
+const getErrorProps = ({ errorText }) => {
   const propsToAdd: any = {};
 
   if (errorText) {
@@ -28,7 +28,7 @@ const getErrorProps = ({errorText}) => {
   return propsToAdd;
 };
 
-const getAdornments = ({rightIcon, leftIcon}) => {
+const getAdornments = ({ rightIcon, leftIcon }) => {
   const adornments: any = {};
 
   if (leftIcon) {
@@ -43,14 +43,14 @@ const getAdornments = ({rightIcon, leftIcon}) => {
 };
 
 const getInputProps = (props) => ({
-  InputProps: {...getAdornments(props)}
+  InputProps: { ...getAdornments(props) }
 });
 
-const getMultilineProps = ({multiline, rows, rowsMax}) => {
+const getMultilineProps = ({ multiline, rows, rowsMax }) => {
   let props: any = {};
 
   if (multiline) {
-    props = {rows, rowsMax, multiline};
+    props = { rows, rowsMax, multiline };
   }
 
   return props;
@@ -73,7 +73,7 @@ interface IInputProps {
   max?: number | string;
 }
 
-export function Input(props: IInputProps) {
+export function Input (props: IInputProps) {
 
   // public static defaultProps = {
   //   value: '',
diff --git a/packages/ui/src/components/SyncWarning/SyncWarning.tsx b/packages/ui/src/components/SyncWarning/SyncWarning.tsx
index 93cfb98..7b97f30 100644
--- a/packages/ui/src/components/SyncWarning/SyncWarning.tsx
+++ b/packages/ui/src/components/SyncWarning/SyncWarning.tsx
@@ -14,12 +14,11 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 import { Spinner1 as Spinner } from '@emeraldplatform/ui-icons';
-import { withStyles } from '@material-ui/core/styles';
-import { CSSProperties } from '@material-ui/core/styles/withStyles';
+import { createStyles, withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import * as React from 'react';
 
-const getStyles = (theme?: any) => ({
+const getStyles = (theme?: any) => createStyles({
   container: {
     width: '100%',
     backgroundColor: '#F9F2F2',
@@ -30,7 +29,7 @@ const getStyles = (theme?: any) => ({
     alignItems: 'center',
     paddingLeft: '5px',
     paddingTop: '5px'
-  } as CSSProperties,
+  },
   errorText: {
     color: theme.palette.error.light
   },
@@ -38,17 +37,17 @@ const getStyles = (theme?: any) => ({
     color: '#CF3B3B',
     zIndex: 1,
     marginLeft: '5px'
-  } as CSSProperties
+  }
 });
 
-interface Props {
+interface ISyncWarningProps {
   startingBlock: number;
   currentBlock: number;
   highestBlock: number;
   classes: any;
 }
 
-class SyncWarning extends React.Component<Props> {
+class SyncWarning extends React.Component<ISyncWarningProps> {
   public static defaultProps = {};
 
   constructor (props) {
diff --git a/packages/ui/src/components/Warning/Warning.tsx b/packages/ui/src/components/Warning/Warning.tsx
index 4be33ca..17b41b7 100644
--- a/packages/ui/src/components/Warning/Warning.tsx
+++ b/packages/ui/src/components/Warning/Warning.tsx
@@ -13,31 +13,32 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-import withStyles from '@material-ui/core/styles/withStyles';
+import { withStyles } from '@material-ui/core/styles';
 import * as React from 'react';
 import styles from './styles';
 
-interface Props {
+interface IProps {
   classes?: any;
   children?: any;
 }
 
-export const WarningHeader = withStyles(styles)((props: Props) => (
+export const WarningHeader = withStyles(styles)((props: IProps) => (
   <div className={props.classes.header}>
     {props.children}
-  </div>));
+  </div>
+));
 
-export const WarningText = withStyles(styles)((props: Props) => (
+export const WarningText = withStyles(styles)((props: IProps) => (
   <div className={props.classes.text}>
     {props.children}
   </div>
 ));
 
-interface WarningProps extends Props {
+interface IWarningProps extends IProps {
   fullWidth?: any;
 }
 
-export const Warning = withStyles(styles)((props: WarningProps) => {
+export const Warning = withStyles(styles)((props: IWarningProps) => {
   const { fullWidth, classes } = props;
   const style: {width?: string, maxWidth?: string} = {};
   if (fullWidth) {
@@ -48,7 +49,8 @@ export const Warning = withStyles(styles)((props: WarningProps) => {
   return (
     <div className={classes.container} style={style}>
       {props.children}
-    </div>);
+    </div>
+  );
 });
 
 export default Warning;
diff --git a/packages/ui/stories/Page/index.tsx b/packages/ui/stories/Page/index.tsx
index 70e2d3a..278b11a 100644
--- a/packages/ui/stories/Page/index.tsx
+++ b/packages/ui/stories/Page/index.tsx
@@ -26,20 +26,28 @@ storiesOf('Page', module)
   .add('default', () => (
     <div>
       <Page title={text('title', 'Title Here')} leftIcon={<Back onClick={action('Left Icon onClick')}/>}>
-        <Typography>Im a page content supsup</Typography>
+        <Typography>Im a page content</Typography>
       </Page>
     </div>
   ))
   .add('without left icon', () => (
     <div>
       <Page title={text('title', 'Without left icon')}>
-        <Typography>Im a page content supsup</Typography>
+        <Typography>Im a page content</Typography>
       </Page>
     </div>
   ))
   .add('title component', () => (
     <Page title={(<div style={{ display: 'flex' }}><Box /><PageTitle>Title with icon</PageTitle></div>)}>
-      <Typography>Im a page content supsup</Typography>
+      <Typography>Im a page content</Typography>
+    </Page>
+  ))
+  .add('left and right icons', () => (
+    <Page
+      title={(<div>Page title component</div>)}
+      leftIcon={<Back onClick={action('onBack')}/>}
+      rightIcon={<Back />}
+    >
+      <Typography>Im a page content</Typography>
     </Page>
-
   ));
diff --git a/tslint.json b/tslint.json
index ca24936..c9ee6c5 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["tslint:latest", "tslint-react", "tslint-config-standard"],
+  "extends": ["tslint:latest", "tslint-react", "tslint-config-standard", "tslint-react-hooks"],
   "linterOptions": {
     "exclude": ["**/node_modules/**", "**/lib/**"]
   },
diff --git a/yarn.lock b/yarn.lock
index aa08f76..a76df9a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13632,6 +13632,11 @@ tslint-eslint-rules@^5.3.1:
     tslib "1.9.0"
     tsutils "^3.0.0"
 
+tslint-react-hooks@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/tslint-react-hooks/-/tslint-react-hooks-2.2.2.tgz#4dc9b3986196802d45c11cc0bf6319a8116fe2ed"
+  integrity sha512-gtwA14+WevNUtlBhvAD5Ukpxt2qMegYI7IDD8zN/3JXLksdLdEuU/T/oqlI1CtZhMJffqyNn+aqq2oUqUFXiNA==
+
 tslint-react@4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/tslint-react/-/tslint-react-4.1.0.tgz#7153b724a8cfbea52423d0ffa469e8eba3bcc834"