diff --git a/packages/app-council/src/index.tsx b/packages/app-council/src/index.tsx
index 320e2ce659..145768d333 100644
--- a/packages/app-council/src/index.tsx
+++ b/packages/app-council/src/index.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
-import { TabItem } from '@polkadot/react-components/Tabs';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -15,50 +14,31 @@ import translate from './translate';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-interface State {
-  tabs: TabItem[];
-}
-
-class App extends React.PureComponent<Props, State> {
-  public constructor (props: Props) {
-    super(props);
-
-    const { t } = props;
-
-    this.state = {
-      tabs: [
-        {
-          isRoot: true,
-          name: 'overview',
-          text: t('Council overview')
-        },
-        {
-          name: 'motions',
-          text: t('Motions')
-        }
-      ]
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { basePath } = this.props;
-    const { tabs } = this.state;
-
-    return (
-      <main>
-        <header>
-          <Tabs
-            basePath={basePath}
-            items={tabs}
-          />
-        </header>
-        <Switch>
-          <Route path={`${basePath}/motions`} component={Motions} />
-          <Route component={Overview} />
-        </Switch>
-      </main>
-    );
-  }
+function App ({ basePath, t }: Props): React.ReactElement<Props> {
+  return (
+    <main>
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={[
+            {
+              isRoot: true,
+              name: 'overview',
+              text: t('Council overview')
+            },
+            {
+              name: 'motions',
+              text: t('Motions')
+            }
+          ]}
+        />
+      </header>
+      <Switch>
+        <Route path={`${basePath}/motions`} component={Motions} />
+        <Route component={Overview} />
+      </Switch>
+    </main>
+  );
 }
 
 export default translate(App);
diff --git a/packages/app-democracy/src/index.tsx b/packages/app-democracy/src/index.tsx
index faa32a6de1..80b280456e 100644
--- a/packages/app-democracy/src/index.tsx
+++ b/packages/app-democracy/src/index.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
-import { TabItem } from '@polkadot/react-components/Tabs';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -17,58 +16,40 @@ import translate from './translate';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-interface State {
-  tabs: TabItem[];
-}
+const hidden = uiSettings.uiMode === 'full'
+  ? []
+  : ['propose'];
 
-class App extends React.PureComponent<Props, State> {
-  public constructor (props: Props) {
-    super(props);
-
-    const { t } = props;
-
-    this.state = {
-      tabs: [
-        {
-          isRoot: true,
-          name: 'overview',
-          text: t('Democracy overview')
-        },
-        {
-          name: 'propose',
-          text: t('Submit proposal')
-        }
-      ]
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { basePath } = this.props;
-    const { tabs } = this.state;
-    const hidden = uiSettings.uiMode === 'full'
-      ? []
-      : ['propose'];
-
-    return (
-      <main className='democracy--App'>
-        <HelpOverlay md={basicMd} />
-        <header>
-          <Tabs
-            basePath={basePath}
-            hidden={hidden}
-            items={tabs}
-          />
-        </header>
-        <Switch>
-          <Route
-            path={`${basePath}/propose`}
-            render={(): React.ReactNode => <Propose basePath={basePath} />}
-          />
-          <Route component={Overview} />
-        </Switch>
-      </main>
-    );
-  }
+function App ({ basePath, t }: Props): React.ReactElement<Props> {
+  return (
+    <main className='democracy--App'>
+      <HelpOverlay md={basicMd} />
+      <header>
+        <Tabs
+          basePath={basePath}
+          hidden={hidden}
+          items={[
+            {
+              isRoot: true,
+              name: 'overview',
+              text: t('Democracy overview')
+            },
+            {
+              name: 'propose',
+              text: t('Submit proposal')
+            }
+          ]}
+        />
+      </header>
+      <Switch>
+        <Route
+          path={`${basePath}/propose`}
+          render={(): React.ReactNode => <Propose basePath={basePath} />}
+        />
+        <Route component={Overview} />
+      </Switch>
+    </main>
+  );
 }
 
 export default translate(App);
diff --git a/packages/app-parachains/src/index.tsx b/packages/app-parachains/src/index.tsx
index 6425cea40c..6e1f056db8 100644
--- a/packages/app-parachains/src/index.tsx
+++ b/packages/app-parachains/src/index.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { AppProps, BareProps, I18nProps } from '@polkadot/react-components/types';
-import { TabItem } from '@polkadot/react-components/Tabs';
 
 import React from 'react';
 import { Route, Switch } from 'react-router';
@@ -14,45 +13,26 @@ import translate from './translate';
 
 interface Props extends AppProps, BareProps, I18nProps {}
 
-interface State {
-  tabs: TabItem[];
-}
-
-class App extends React.PureComponent<Props, State> {
-  public constructor (props: Props) {
-    super(props);
-
-    const { t } = props;
-
-    this.state = {
-      tabs: [
-        {
-          isRoot: true,
-          name: 'overview',
-          text: t('Parachains overview')
-        }
-      ]
-    };
-  }
-
-  public render (): React.ReactNode {
-    const { basePath } = this.props;
-    const { tabs } = this.state;
-
-    return (
-      <main>
-        <header>
-          <Tabs
-            basePath={basePath}
-            items={tabs}
-          />
-        </header>
-        <Switch>
-          <Route component={Overview} />
-        </Switch>
-      </main>
-    );
-  }
+function App ({ basePath, t }: Props): React.ReactElement<Props> {
+  return (
+    <main>
+      <header>
+        <Tabs
+          basePath={basePath}
+          items={[
+            {
+              isRoot: true,
+              name: 'overview',
+              text: t('Parachains overview')
+            }
+          ]}
+        />
+      </header>
+      <Switch>
+        <Route component={Overview} />
+      </Switch>
+    </main>
+  );
 }
 
 export default translate(App);
diff --git a/packages/app-settings/src/index.tsx b/packages/app-settings/src/index.tsx
index e2c73ffa2e..89d41cd0a2 100644
--- a/packages/app-settings/src/index.tsx
+++ b/packages/app-settings/src/index.tsx
@@ -21,6 +21,10 @@ interface State {
   tabs: TabItem[];
 }
 
+const hidden = uiSettings.uiMode === 'full'
+  ? []
+  : ['developer'];
+
 class App extends React.PureComponent<Props, State> {
   public constructor (props: Props) {
     super(props);
@@ -45,9 +49,6 @@ class App extends React.PureComponent<Props, State> {
   public render (): React.ReactNode {
     const { basePath } = this.props;
     const { tabs } = this.state;
-    const hidden = uiSettings.uiMode === 'full'
-      ? []
-      : ['developer'];
 
     return (
       <main className='settings--App'>
diff --git a/packages/app-storage/src/index.tsx b/packages/app-storage/src/index.tsx
index df93aef438..4140ffde1b 100644
--- a/packages/app-storage/src/index.tsx
+++ b/packages/app-storage/src/index.tsx
@@ -7,7 +7,7 @@ import { QueryTypes } from './types';
 
 import './index.css';
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import Queries from './Queries';
 import Selection from './Selection';
@@ -15,48 +15,24 @@ import translate from './translate';
 
 interface Props extends AppProps, I18nProps {}
 
-interface State {
-  queue: QueryTypes[];
-}
+function StorageApp ({ basePath }: Props): React.ReactElement<Props> {
+  const [queue, setQueue] = useState<QueryTypes[]>([]);
 
-class StorageApp extends React.PureComponent<Props, State> {
-  public state: State = {
-    queue: []
-  };
+  const _onAdd = (query: QueryTypes): void => setQueue([query].concat(queue));
+  const _onRemove = (id: number): void => setQueue(queue.filter((item): boolean => item.id !== id));
 
-  public render (): React.ReactNode {
-    const { basePath } = this.props;
-    const { queue } = this.state;
-
-    return (
-      <main className='storage--App'>
-        <Selection
-          basePath={basePath}
-          onAdd={this.onAdd}
-        />
-        <Queries
-          onRemove={this.onRemove}
-          value={queue}
-        />
-      </main>
-    );
-  }
-
-  private onAdd = (query: QueryTypes): void => {
-    this.setState(
-      (prevState: State): State => ({
-        queue: [query].concat(prevState.queue)
-      })
-    );
-  }
-
-  private onRemove = (id: number): void => {
-    this.setState(
-      (prevState: State): State => ({
-        queue: prevState.queue.filter((item): boolean => item.id !== id)
-      })
-    );
-  }
+  return (
+    <main className='storage--App'>
+      <Selection
+        basePath={basePath}
+        onAdd={_onAdd}
+      />
+      <Queries
+        onRemove={_onRemove}
+        value={queue}
+      />
+    </main>
+  );
 }
 
 export default translate(StorageApp);