diff --git a/package.json b/package.json
index 43bdd422f7..77b05e63f2 100644
--- a/package.json
+++ b/package.json
@@ -210,6 +210,7 @@
     "@babel/preset-env": "^7.10.2",
     "@babel/preset-react": "^7.10.1",
     "@babel/preset-typescript": "^7.10.1",
+    "@emeraldpay/hashicon-react": "^0.4.0",
     "@lingui/babel-preset-react": "^2.9.1",
     "@lingui/cli": "^3.0.0-13",
     "@lingui/loader": "^3.0.0-13",
@@ -268,7 +269,6 @@
     "file-loader": "^6.0.0",
     "flex.box": "^3.4.4",
     "fork-ts-checker-webpack-plugin": "^5.0.0",
-    "hashicon": "^0.3.0",
     "hoist-non-react-statics": "^3.3.2",
     "html-webpack-plugin": "^4.3.0",
     "identity-obj-proxy": "^3.0.0",
diff --git a/src/renderer/components/+clusters/add-cluster.scss b/src/renderer/components/+clusters/add-cluster.scss
new file mode 100644
index 0000000000..686eaa9896
--- /dev/null
+++ b/src/renderer/components/+clusters/add-cluster.scss
@@ -0,0 +1,3 @@
+.AddCluster {
+  
+}
\ No newline at end of file
diff --git a/src/renderer/components/+clusters/add-cluster.tsx b/src/renderer/components/+clusters/add-cluster.tsx
index 6f5307013f..b076c6bb06 100644
--- a/src/renderer/components/+clusters/add-cluster.tsx
+++ b/src/renderer/components/+clusters/add-cluster.tsx
@@ -1,3 +1,4 @@
+import "./add-cluster.scss"
 import React from "react";
 
 interface Props {
@@ -5,6 +6,6 @@ interface Props {
 
 export class AddCluster extends React.Component {
   render() {
-    return "";
+    return "AddCluster";
   }
 }
diff --git a/src/renderer/components/+clusters/cluster-settings.scss b/src/renderer/components/+clusters/cluster-settings.scss
new file mode 100644
index 0000000000..743c0079ec
--- /dev/null
+++ b/src/renderer/components/+clusters/cluster-settings.scss
@@ -0,0 +1,3 @@
+.ClusterSettings {
+  
+}
\ No newline at end of file
diff --git a/src/renderer/components/+clusters/cluster-settings.tsx b/src/renderer/components/+clusters/cluster-settings.tsx
index 2596dd6752..c5aedb4017 100644
--- a/src/renderer/components/+clusters/cluster-settings.tsx
+++ b/src/renderer/components/+clusters/cluster-settings.tsx
@@ -1,3 +1,4 @@
+import "./cluster-settings.scss"
 import React from "react";
 
 interface Props {
@@ -5,6 +6,10 @@ interface Props {
 
 export class ClusterSettings extends React.Component {
   render() {
-    return "";
+    return (
+      <div className="ClusterSettings">
+        ClusterSettings
+      </div>
+    );
   }
 }
diff --git a/src/renderer/components/+clusters/clusters-menu.scss b/src/renderer/components/+clusters/clusters-menu.scss
new file mode 100644
index 0000000000..e9acb4e50d
--- /dev/null
+++ b/src/renderer/components/+clusters/clusters-menu.scss
@@ -0,0 +1,3 @@
+.ClustersMenu {
+  
+}
\ No newline at end of file
diff --git a/src/renderer/components/+clusters/clusters-menu.tsx b/src/renderer/components/+clusters/clusters-menu.tsx
index 2596dd6752..9548286f9a 100644
--- a/src/renderer/components/+clusters/clusters-menu.tsx
+++ b/src/renderer/components/+clusters/clusters-menu.tsx
@@ -1,10 +1,15 @@
+import "./clusters-menu.scss"
 import React from "react";
 
 interface Props {
 }
 
-export class ClusterSettings extends React.Component {
+export class ClustersMenu extends React.Component {
   render() {
-    return "";
+    return (
+      <div className="ClustersMenu">
+        ClustersMenu
+      </div>
+    );
   }
 }
diff --git a/src/renderer/components/+clusters/clusters.scss b/src/renderer/components/+clusters/clusters.scss
new file mode 100644
index 0000000000..f09d9b15b1
--- /dev/null
+++ b/src/renderer/components/+clusters/clusters.scss
@@ -0,0 +1,3 @@
+.Clusters {
+
+}
\ No newline at end of file
diff --git a/src/renderer/components/+clusters/clusters.tsx b/src/renderer/components/+clusters/clusters.tsx
index 6ae275fe09..c7fb7e84ca 100644
--- a/src/renderer/components/+clusters/clusters.tsx
+++ b/src/renderer/components/+clusters/clusters.tsx
@@ -1,25 +1,14 @@
+import "./clusters.scss"
 import React from "react";
-import { userStore } from "../../../common/user-store";
-import { workspaceStore } from "../../../common/workspace-store";
-import { clusterStore } from "../../../common/cluster-store";
 
 interface Props {
 }
 
 export class Clusters extends React.Component {
-  static async init(){
-    // todo: move to App.init()
-    await Promise.all([
-      userStore.load(),
-      workspaceStore.load(),
-      clusterStore.load(),
-    ]);
-  }
-
   render() {
     return (
       <div className="Clusters">
-        Clusters page
+        Clusters
       </div>
     );
   }
diff --git a/src/renderer/components/+landing-page/landing-page.scss b/src/renderer/components/+landing-page/landing-page.scss
new file mode 100644
index 0000000000..84e1ac2517
--- /dev/null
+++ b/src/renderer/components/+landing-page/landing-page.scss
@@ -0,0 +1,3 @@
+.LandingPage {
+
+}
\ No newline at end of file
diff --git a/src/renderer/components/+landing-page/landing-page.tsx b/src/renderer/components/+landing-page/landing-page.tsx
new file mode 100644
index 0000000000..775f5cfcb9
--- /dev/null
+++ b/src/renderer/components/+landing-page/landing-page.tsx
@@ -0,0 +1,15 @@
+import "./landing-page.scss"
+import React from "react";
+
+interface Props {
+}
+
+export class LandingPage extends React.Component {
+  render() {
+    return (
+      <div className="LandingPage">
+        LandingPage
+      </div>
+    )
+  }
+}
diff --git a/src/renderer/components/+preferences/preferences.scss b/src/renderer/components/+preferences/preferences.scss
new file mode 100644
index 0000000000..ef6fe71a8b
--- /dev/null
+++ b/src/renderer/components/+preferences/preferences.scss
@@ -0,0 +1,3 @@
+.Preferences {
+
+}
\ No newline at end of file
diff --git a/src/renderer/components/+preferences/preferences.tsx b/src/renderer/components/+preferences/preferences.tsx
new file mode 100644
index 0000000000..cac9241f1b
--- /dev/null
+++ b/src/renderer/components/+preferences/preferences.tsx
@@ -0,0 +1,15 @@
+import "./preferences.scss"
+import React from "react";
+
+interface Props {
+}
+
+export class Preferences extends React.Component {
+  render() {
+    return (
+      <div className="Preferences">
+        Preferences
+      </div>
+    )
+  }
+}
diff --git a/src/renderer/components/+whats-new/whats-new.scss b/src/renderer/components/+whats-new/whats-new.scss
new file mode 100644
index 0000000000..89d12cf108
--- /dev/null
+++ b/src/renderer/components/+whats-new/whats-new.scss
@@ -0,0 +1,3 @@
+.WhatsNew {
+
+}
\ No newline at end of file
diff --git a/src/renderer/components/+whats-new/whats-new.tsx b/src/renderer/components/+whats-new/whats-new.tsx
new file mode 100644
index 0000000000..f08ecf7693
--- /dev/null
+++ b/src/renderer/components/+whats-new/whats-new.tsx
@@ -0,0 +1,15 @@
+import "./whats-new.scss"
+import React from "react";
+
+interface Props {
+}
+
+export class WhatsNew extends React.Component {
+  render() {
+    return (
+      <div className="WhatsNew">
+        WhatsNew
+      </div>
+    );
+  }
+}
diff --git a/src/renderer/components/+workspaces/workspaces.scss b/src/renderer/components/+workspaces/workspaces.scss
new file mode 100644
index 0000000000..7b636036db
--- /dev/null
+++ b/src/renderer/components/+workspaces/workspaces.scss
@@ -0,0 +1,3 @@
+.Workspaces {
+
+}
\ No newline at end of file
diff --git a/src/renderer/components/+workspaces/workspaces.tsx b/src/renderer/components/+workspaces/workspaces.tsx
index e69de29bb2..7c6c0ba2f0 100644
--- a/src/renderer/components/+workspaces/workspaces.tsx
+++ b/src/renderer/components/+workspaces/workspaces.tsx
@@ -0,0 +1,15 @@
+import "./workspaces.scss"
+import React from "react";
+
+interface Props {
+}
+
+export class Workspaces extends React.Component {
+  render() {
+    return (
+      <div className="Workspaces">
+        Workspaces
+      </div>
+    )
+  }
+}
diff --git a/src/renderer/index.tsx b/src/renderer/index.tsx
index b7a6f9c093..27fbc73fbf 100644
--- a/src/renderer/index.tsx
+++ b/src/renderer/index.tsx
@@ -1,11 +1,18 @@
 import React from "react";
 import ReactDOM from "react-dom";
 import "../common/system-ca"
-import { Clusters } from "./components/+clusters";
+import { userStore } from "../common/user-store";
+import { workspaceStore } from "../common/workspace-store";
+import { clusterStore } from "../common/cluster-store";
+import { Workspaces } from "./components/+workspaces/workspaces";
 
 async function render() {
-  await Clusters.init();
-  ReactDOM.render(<Clusters/>, document.getElementById("app"),)
+  await Promise.all([
+    userStore.load(),
+    workspaceStore.load(),
+    clusterStore.load(),
+  ]);
+  ReactDOM.render(<Workspaces/>, document.getElementById("app"),)
 }
 
 window.addEventListener("load", render);
diff --git a/yarn.lock b/yarn.lock
index 0731caede6..61196f3bc0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -966,6 +966,21 @@
     global-agent "^2.0.2"
     global-tunnel-ng "^2.7.1"
 
+"@emeraldpay/hashicon-react@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emeraldpay/hashicon-react/-/hashicon-react-0.4.0.tgz#a05a1c9af23721a81450978fad816908fa3246b7"
+  integrity sha512-n+84V9R4g84B62NneYg5mz9Vf1xEBURZoyC4G1K9Rs9C7949D3SxgLhuXYyFKkNO5F5qzms5Qr3LGE5QNEdqJg==
+  dependencies:
+    "@emeraldpay/hashicon" "^0.4.0"
+    react "^16.8.0"
+
+"@emeraldpay/hashicon@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@emeraldpay/hashicon/-/hashicon-0.4.0.tgz#0dcd4db6d589b4eb30495b9995ff66fc9e57f833"
+  integrity sha512-2EB6Z8gS/DK36+SslIuoHE8wdU6pBqljMTjIYxLC8hBN8n2yhhE+xdmifPjqfqOvF/7Wb5HmoNaPX6RGuBrasg==
+  dependencies:
+    js-sha3 "^0.8.0"
+
 "@emotion/cache@^10.0.27", "@emotion/cache@^10.0.9":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -5881,13 +5896,6 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hashicon@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/hashicon/-/hashicon-0.3.0.tgz#e7dcd69b8e30dd9d67929f87be4d06e2fdef0951"
-  integrity sha512-rgwUbayXUspgn4Lgmw1FGLvGoqYxesRYwQPuG3sRhyqB5RQ2E1rz97MpmO+raOK9yoVZqVElarc/AzZTnAAadw==
-  dependencies:
-    js-sha3 "^0.8.0"
-
 he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
@@ -9481,7 +9489,7 @@ react-zlib-js@^1.0.4:
   resolved "https://registry.yarnpkg.com/react-zlib-js/-/react-zlib-js-1.0.4.tgz#dd2b9fbf56d5ab224fa7a99affbbedeba9aa3dc7"
   integrity sha512-ynXD9DFxpE7vtGoa3ZwBtPmZrkZYw2plzHGbanUjBOSN4RtuXdektSfABykHtTiWEHMh7WdYj45LHtp228ZF1A==
 
-react@^16.13.1:
+react@^16.13.1, react@^16.8.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==