From ff238702ede94d4b5e2b5aeb61451be0ff1e25b6 Mon Sep 17 00:00:00 2001
From: Pavlo Buidenkov <pavlobu@gmail.com>
Date: Tue, 1 Sep 2020 20:45:56 +0300
Subject: [PATCH 1/2] massive UI changes and improvements

---
 .eslintignore                                 |    2 +-
 .github/workflows/codecov.yml                 |   10 +-
 .github/workflows/release.yml                 |   10 +-
 .github/workflows/test.yml                    |   10 +-
 app/Routes.tsx                                |    1 +
 app/app.global.css                            |  372 +-
 app/app.html                                  |    2 +-
 app/client/package.json                       |    8 +-
 app/client/tsconfig.json                      |    2 +-
 .../AllowConnectionForDeviceAlert.spec.tsx    |   25 +
 .../AllowConnectionForDeviceAlert.tsx         |   56 +
 app/components/CloseOverlayButton.tsx         |   46 +
 .../ConnectedDevicesListDrawer.spec.tsx       |   24 +
 app/components/ConnectedDevicesListDrawer.tsx |  217 +
 app/components/Home.tsx                       |    5 +-
 app/components/NavPanel.tsx                   |   34 -
 .../SettingRowLabelAndInput.tsx               |   63 +
 .../SettingsOverlay/SettingsOverlay.spec.tsx  |   29 +
 .../SettingsOverlay/SettingsOverlay.tsx       |  276 +
 .../SettingsOverlay.spec.tsx.snap             | 1985 +++++++
 .../ShareAppOrScreenControlGroup.spec.tsx     |   23 +
 .../ShareAppOrScreenControlGroup.tsx          |  137 +
 .../StepperPanel/ColorlibConnector.tsx        |   28 +
 .../StepperPanel/ColorlibStepIcon.tsx         |   76 +
 .../DeviceConnectedInfoButton.spec.tsx        |   23 +
 .../DeviceConnectedInfoButton.tsx             |   90 +
 .../DeviceConnectedInfoButton.spec.tsx.snap   |  344 ++
 .../ChooseAppOrScreeenStep.spec.tsx           |   23 +
 .../StepsOfStepper/ChooseAppOrScreeenStep.tsx |   29 +
 .../ChooseAppOrScreenOverlay.spec.tsx         |   26 +
 .../ChooseAppOrScreenOverlay.tsx              |  164 +
 .../PreviewGridList.tsx                       |  166 +
 .../ChooseAppOrScreenOverlay.spec.tsx.snap    | 4587 +++++++++++++++++
 .../StepsOfStepper/ConfirmStep.spec.tsx       |   20 +
 app/components/StepsOfStepper/ConfirmStep.tsx |   30 +
 .../StepsOfStepper/IntermediateStep.spec.tsx  |   85 +
 .../StepsOfStepper/IntermediateStep.tsx       |  146 +
 .../StepsOfStepper/ScanQRStep.spec.tsx        |   77 +
 app/components/StepsOfStepper/ScanQRStep.tsx  |  155 +
 .../StepsOfStepper/SuccessStep.spec.tsx       |   49 +
 app/components/StepsOfStepper/SuccessStep.tsx |   93 +
 .../ChooseAppOrScreeenStep.spec.tsx.snap      |  250 +
 .../__snapshots__/ConfirmStep.spec.tsx.snap   |  112 +
 .../IntermediateStep.spec.tsx.snap            | 1198 +++++
 .../__snapshots__/ScanQRStep.spec.tsx.snap    |  177 +
 .../__snapshots__/SuccessStep.spec.tsx.snap   |  220 +
 app/components/TopPanel.spec.tsx              |   78 +
 app/components/TopPanel.tsx                   |  177 +
 ...llowConnectionForDeviceAlert.spec.tsx.snap |  607 +++
 .../ConnectedDevicesListDrawer.spec.tsx.snap  |  644 +++
 ...ShareAppOrScreenControlGroup.spec.tsx.snap |  230 +
 .../__snapshots__/TopPanel.spec.tsx.snap      |  113 +
 app/configs/app.config.ts                     |    5 -
 app/configs/app.lang.config.ts                |   10 +
 app/configs/i18next.config.client.ts          |   44 +-
 app/configs/i18next.config.ts                 |   34 +-
 app/constants/test-devices.json               |   72 +
 .../test-screen-sharing-objects.json          |   88 +
 .../ConnectedDevicesProvider/Device.d.ts      |    7 +
 .../ConnectedDevicesProvider/index.tsx        |   99 +
 app/containers/CounterPage.tsx                |    4 +-
 app/containers/HomePage.spec.tsx              |   28 +
 app/containers/HomePage.tsx                   |   52 +-
 app/containers/Root.tsx                       |   16 +-
 app/containers/SettingsProvider.tsx           |   61 +
 app/containers/Stepper.spec.tsx               |   23 +
 app/containers/Stepper.tsx                    |  267 +
 app/containers/__mocks__/electron-settings.ts |   30 +
 app/containers/__mocks__/electron.ts          |   10 +
 app/containers/__mocks__/react-i18next.ts     |   19 +
 .../__snapshots__/HomePage.spec.tsx.snap      | 2276 ++++++++
 .../__snapshots__/Stepper.spec.tsx.snap       | 1556 ++++++
 app/index.tsx                                 |   15 +
 app/locales/en/translation.json               |    5 +-
 app/locales/ru/translation.json               |    5 +-
 app/locales/ua/translation.json               |    7 +
 app/locales/ua/translation.missing.json       |    0
 app/main.dev.ts                               |   35 +-
 app/main.prod.js.LICENSE.txt                  |   12 +
 app/menu.ts                                   |   23 +-
 app/package-lock.json                         |    2 +-
 app/package.json                              |    2 +-
 app/server/index.ts                           |   15 +-
 app/utils/isProduction.ts                     |    8 +
 package.json                                  |   36 +-
 test/e2e/HomePage.e2e.ts                      |    4 +-
 test/ux/Stepper.ux.ts                         |  488 ++
 yarn.lock                                     |  564 +-
 88 files changed, 19046 insertions(+), 230 deletions(-)
 create mode 100644 app/components/AllowConnectionForDeviceAlert.spec.tsx
 create mode 100644 app/components/AllowConnectionForDeviceAlert.tsx
 create mode 100644 app/components/CloseOverlayButton.tsx
 create mode 100644 app/components/ConnectedDevicesListDrawer.spec.tsx
 create mode 100644 app/components/ConnectedDevicesListDrawer.tsx
 delete mode 100644 app/components/NavPanel.tsx
 create mode 100644 app/components/SettingsOverlay/SettingRowLabelAndInput.tsx
 create mode 100644 app/components/SettingsOverlay/SettingsOverlay.spec.tsx
 create mode 100644 app/components/SettingsOverlay/SettingsOverlay.tsx
 create mode 100644 app/components/SettingsOverlay/__snapshots__/SettingsOverlay.spec.tsx.snap
 create mode 100644 app/components/ShareAppOrScreenControlGroup.spec.tsx
 create mode 100644 app/components/ShareAppOrScreenControlGroup.tsx
 create mode 100644 app/components/StepperPanel/ColorlibConnector.tsx
 create mode 100644 app/components/StepperPanel/ColorlibStepIcon.tsx
 create mode 100644 app/components/StepperPanel/DeviceConnectedInfoButton.spec.tsx
 create mode 100644 app/components/StepperPanel/DeviceConnectedInfoButton.tsx
 create mode 100644 app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap
 create mode 100644 app/components/StepsOfStepper/ChooseAppOrScreeenStep.spec.tsx
 create mode 100644 app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx
 create mode 100644 app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.spec.tsx
 create mode 100644 app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx
 create mode 100644 app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx
 create mode 100644 app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap
 create mode 100644 app/components/StepsOfStepper/ConfirmStep.spec.tsx
 create mode 100644 app/components/StepsOfStepper/ConfirmStep.tsx
 create mode 100644 app/components/StepsOfStepper/IntermediateStep.spec.tsx
 create mode 100644 app/components/StepsOfStepper/IntermediateStep.tsx
 create mode 100644 app/components/StepsOfStepper/ScanQRStep.spec.tsx
 create mode 100644 app/components/StepsOfStepper/ScanQRStep.tsx
 create mode 100644 app/components/StepsOfStepper/SuccessStep.spec.tsx
 create mode 100644 app/components/StepsOfStepper/SuccessStep.tsx
 create mode 100644 app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap
 create mode 100644 app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap
 create mode 100644 app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap
 create mode 100644 app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap
 create mode 100644 app/components/StepsOfStepper/__snapshots__/SuccessStep.spec.tsx.snap
 create mode 100644 app/components/TopPanel.spec.tsx
 create mode 100644 app/components/TopPanel.tsx
 create mode 100644 app/components/__snapshots__/AllowConnectionForDeviceAlert.spec.tsx.snap
 create mode 100644 app/components/__snapshots__/ConnectedDevicesListDrawer.spec.tsx.snap
 create mode 100644 app/components/__snapshots__/ShareAppOrScreenControlGroup.spec.tsx.snap
 create mode 100644 app/components/__snapshots__/TopPanel.spec.tsx.snap
 delete mode 100644 app/configs/app.config.ts
 create mode 100644 app/configs/app.lang.config.ts
 create mode 100644 app/constants/test-devices.json
 create mode 100644 app/constants/test-screen-sharing-objects.json
 create mode 100644 app/containers/ConnectedDevicesProvider/Device.d.ts
 create mode 100644 app/containers/ConnectedDevicesProvider/index.tsx
 create mode 100644 app/containers/HomePage.spec.tsx
 create mode 100644 app/containers/SettingsProvider.tsx
 create mode 100644 app/containers/Stepper.spec.tsx
 create mode 100644 app/containers/Stepper.tsx
 create mode 100644 app/containers/__mocks__/electron-settings.ts
 create mode 100644 app/containers/__mocks__/electron.ts
 create mode 100644 app/containers/__mocks__/react-i18next.ts
 create mode 100644 app/containers/__snapshots__/HomePage.spec.tsx.snap
 create mode 100644 app/containers/__snapshots__/Stepper.spec.tsx.snap
 create mode 100644 app/locales/ua/translation.json
 create mode 100644 app/locales/ua/translation.missing.json
 create mode 100644 app/utils/isProduction.ts
 create mode 100644 test/ux/Stepper.ux.ts

diff --git a/.eslintignore b/.eslintignore
index e0fea66..561b4ce 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -57,4 +57,4 @@ package.json
 
 
 # Entire app/client directory
-app/client/*
+app/client
diff --git a/.github/workflows/codecov.yml b/.github/workflows/codecov.yml
index a932eef..421791a 100644
--- a/.github/workflows/codecov.yml
+++ b/.github/workflows/codecov.yml
@@ -13,13 +13,13 @@ jobs:
         with:
           node-version: 14
 
-      - name: yarn install from npmjs registry
-        run: |
-          yarn install --no-lockfile
-          yarn install-client:nolockfile
+      # - name: yarn install from npmjs registry
+      #   run: |
+      #     yarn install --no-lockfile
+      #     yarn install-client:nolockfile
 
       - name: Configure private AWS npm registry and install packages from it
-        if: ${{ failure() }}
+        # if: ${{ failure() }}
         run: |
           npm config set registry https://packages.deskreen.com/
           npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 7290d93..2c3e4e1 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -46,13 +46,13 @@ jobs:
         with:
           node-version: 14
 
-      - name: yarn install from npmjs registry
-        run: |
-          yarn install --no-lockfile
-          yarn install-client:nolockfile
+      # - name: yarn install from npmjs registry
+      #   run: |
+      #     yarn install --no-lockfile
+      #     yarn install-client:nolockfile
 
       - name: Configure private AWS npm registry and install packages from it
-        if: ${{ failure() }}
+        # if: ${{ failure() }}
         run: |
           npm config set registry https://packages.deskreen.com/
           npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 05e0d29..25d7e08 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -21,13 +21,13 @@ jobs:
         with:
           node-version: 14
 
-      - name: yarn install from npmjs registry
-        run: |
-          yarn install --no-lockfile
-          yarn install-client:nolockfile
+      # - name: yarn install from npmjs registry
+      #   run: |
+      #     yarn install --no-lockfile
+      #     yarn install-client:nolockfile
 
       - name: Configure private AWS npm registry and install packages from it
-        if: ${{ failure() }}
+        # if: ${{ failure() }}
         run: |
           npm config set registry https://packages.deskreen.com/
           npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
diff --git a/app/Routes.tsx b/app/Routes.tsx
index df54410..3927751 100644
--- a/app/Routes.tsx
+++ b/app/Routes.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint react/jsx-props-no-spreading: off */
 import React from 'react';
 import { Switch, Route } from 'react-router-dom';
diff --git a/app/app.global.css b/app/app.global.css
index 57e855c..eefaaed 100644
--- a/app/app.global.css
+++ b/app/app.global.css
@@ -6,28 +6,384 @@
 @import '~normalize.css/normalize.css';
 @import '~@blueprintjs/core/lib/css/blueprint.css';
 @import '~react-flexbox-grid/dist/react-flexbox-grid.css';
+@import '~fontsource-lexend-peta/index.css';
+
+:root {
+  --dark-bg-color: #293742;
+  --light-bg-color: rgba(240, 248, 250, 1);
+  --light-btn-no-intent-color: rgb(218, 238, 243);
+  --dark-btn-no-intent-color: #394b59;
+  --custom-scrollbar-webkit-scrollbar-thumb-border-radius: 10px;
+  --custom-scrollbar-webkit-scrollbar-thumb-background-color: #8a9ba8;
+  --custom-scrollbar-webkit-scrollbar_background-color: rgba(0, 0, 0, 0);
+  --custom-scrollbar-webkit-scrollbar-width: 12px;
+  --custom-scrollbar-webkit-scrollbar-track-border-radius: 10px;
+  --custom-scrollbar-webkit-scrollbar-track-background-color: rgba(0, 0, 0, 0);
+}
 
 body {
   position: relative;
-  color: white;
   height: 100vh;
-  background-color: whitesmoke;
   font-family: Arial, Helvetica, Helvetica Neue, serif;
-  overflow-y: hidden;
+  overflow: hidden;
+  background-color: var(--light-bg-color);
+}
+
+/* UI colors FOR LIGHT AND DARK THEME START */
+.bp3-button:not([class*='bp3-intent-']) {
+  background-color: var(--light-btn-no-intent-color);
 }
 
 body.bp3-dark {
-  background-color: #293742;
+  background-color: var(--dark-bg-color) !important;
 }
 
-/* .bp3-button {
-  outline: none !important;
+.bp3-dialog {
+  background-color: var(--light-bg-color) !important;
 }
 
-.bp3-control {
-  outline: none !important;
+.bp3-dark .bp3-dialog {
+  background-color: var(--dark-bg-color) !important;
+}
+
+.bp3-popover .bp3-popover-arrow-fill {
+  fill: var(--light-bg-color);
+}
+
+.bp3-popover .bp3-popover-content {
+  background-color: var(--light-bg-color);
+  color: black;
+}
+
+.bp3-html-select > select {
+  background-color: var(--light-btn-no-intent-color);
+}
+
+.bp3-drawer {
+  background-color: var(--light-bg-color);
+}
+
+.bp3-card {
+  background-color: var(--light-bg-color);
+}
+
+/* for really small screen sizes (ex. Raspberry PI display etc. */
+@media screen and (max-height: 419px) {
+  body {
+    overflow-y: scroll;
+  }
+}
+
+.react-toast-notifications__container {
+  overflow: hidden !important;
+}
+
+/* Connected Devices List button pulse START */
+#top-panel-connected-devices-list-button.pulsing {
+  transform: scale(1);
+  animation: pulse-black-devices-list-button 0.75s infinite;
+}
+
+#top-panel-connected-devices-list-button.pulse-not-infinite {
+  transform: scale(1);
+  animation: pulse-black-devices-list-button 0.75s 4;
+}
+
+@keyframes pulse-black-devices-list-button {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(115, 134, 148, 0.7);
+  }
+
+  60% {
+    transform: scale(0.85);
+    box-shadow: 0 0 0 15px rgba(115, 134, 148, 0.3);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
+  }
+}
+
+/* Connected Devices List button pulse END */
+
+/* For choose app or screen overlay popup without scrollbars! */
+.bp3-overlay-scroll-container {
+  overflow-y: hidden !important;
+}
+
+/* help cursor when text hovered Connected Devices List */
+#connected-devices-list-text-success:hover {
+  cursor: help;
+}
+
+/* react-toast-notifications progress bar more obvious look */
+body
+  > div.react-toast-notifications__container
+  > div
+  > div
+  > div.react-toast-notifications__toast__icon-wrapper
+  > div {
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.hide-toaster-progress {
+  height: 5px;
+  width: calc(100% + 87px) !important;
+  bottom: -11px !important;
+  left: -40px !important;
+}
+
+/* ALLOW CONNECTION ALERT BLINK ANIMATION START */
+div.class-allow-device-to-connect-alert
+  > div.bp3-alert-body
+  > span
+  > svg
+  > path {
+  color: #a82a2a !important;
+  -webkit-animation: blink 0.75s infinite alternate; /* to blink 3 times instead of infinite write just 3 */
+  -moz-animation: blink 0.75s infinite alternate;
+  -ms-animation: blink 0.75s infinite alternate;
+  -o-animation: blink 0.75s infinite alternate;
+  animation: blink 0.75s infinite alternate;
+}
+
+@-webkit-keyframes blink {
+  from {
+    color: #a82a2a;
+  }
+  to {
+    color: #f55656;
+  }
+}
+@-moz-keyframes blink {
+  from {
+    color: #a82a2a;
+  }
+  to {
+    color: #f55656;
+  }
+}
+@-ms-keyframes blink {
+  from {
+    color: #a82a2a;
+  }
+  to {
+    color: #f55656;
+  }
+}
+@-o-keyframes blink {
+  from {
+    color: #a82a2a;
+  }
+  to {
+    color: #f55656;
+  }
+}
+@keyframes blink {
+  from {
+    color: #a82a2a;
+  }
+  to {
+    color: #f55656;
+  }
+}
+
+/* ALLOW CONNECTION ALERT BLINK ANIMATION END */
+
+/* Connected Device Info Button pulse animation START */
+
+#connected-device-info-stepper-button {
+  transform: scale(1);
+  animation: pulse-black-connected-device 0.75s 3;
+}
+
+@keyframes pulse-black-connected-device {
+  0% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 rgba(61, 204, 145, 0.7);
+  }
+
+  60% {
+    transform: scale(0.75);
+    box-shadow: 0 0 0 15px rgba(61, 204, 145, 0.3);
+  }
+
+  100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 5px rgba(0, 0, 0, 0);
+  }
+}
+
+/* Connected Device Info Button pulse animation END */
+
+#settings-overlay-inner > div > div.bp3-tab-panel {
+  width: 100% !important;
+}
+
+/* settings panel tabs button left styles */
+#settings-overlay-inner > div > div.bp3-tab-list {
+  background-color: rgba(0, 0, 0, 0.1);
+  padding: 8px;
+
+  /* height: 100%; */
+}
+
+/* settings inner 100% height regardless tab content height */
+#settings-overlay-inner > div {
+  height: 100%;
+}
+
+.bp3-overlay-settings {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* .bp3-overlay-settings.bp3-overlay-content {
+  display: flex;
 } */
 
+/* TODO: move to appropriate style file in ShareEntireScreenOrAppWindowControlGroup */
+#share-screen-or-app-btn-group > button > span {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+/* #root>div.MuiPaper-root.MuiStepper-root.MuiStepper-horizontal.MuiStepper-alternativeLabel.MuiPaper-elevation0>div:nth-child(1)>span>span.MuiStepLabel-iconContainer.MuiStepLabel-alternativeLabel>div {
+  transform: scale(1);
+  animation: pulse-black 2s infinite;
+} */
+
+.active-stepper-pulse-icon {
+  transform: scale(1);
+  animation: pulse-black 3s infinite;
+}
+
+@keyframes pulse-black {
+  0% {
+    transform: scale(0.9);
+    box-shadow: 0 0 0 0 rgba(191, 115, 38, 0.7);
+  }
+
+  60% {
+    transform: scale(1);
+    box-shadow: 0 0 0 12px rgba(255, 179, 102, 0.3);
+  }
+
+  100% {
+    transform: scale(0.9);
+    box-shadow: 0 0 0 20px rgba(0, 0, 0, 0);
+  }
+}
+
+/* TODO: move it to DeskreenStepper.css ! */
+#step-label-deskreen > span.MuiStepLabel-labelContainer > span {
+  margin-top: 8px;
+}
+
+#share-screen-or-app-btn-group > button:nth-child(1):hover {
+  border-width: 10px;
+}
+
+.bp3-overlay::-webkit-scrollbar-track {
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-track-border-radius);
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-track-background-color
+  );
+}
+
+.bp3-overlay::-webkit-scrollbar {
+  width: var(--custom-scrollbar-webkit-scrollbar-width);
+  background-color: var(--custom-scrollbar-webkit-scrollbar_background-color);
+}
+
+.bp3-overlay::-webkit-scrollbar-thumb {
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-thumb-border-radius);
+
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-thumb-background-color
+  );
+}
+
+.bp3-drawer::-webkit-scrollbar-track {
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-track-border-radius);
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-track-background-color
+  );
+}
+
+.bp3-drawer::-webkit-scrollbar {
+  width: var(--custom-scrollbar-webkit-scrollbar-width);
+  background-color: var(--custom-scrollbar-webkit-scrollbar_background-color);
+}
+
+.bp3-drawer::-webkit-scrollbar-thumb {
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-thumb-border-radius);
+
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-thumb-background-color
+  );
+}
+
+body::-webkit-scrollbar-track {
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-track-border-radius);
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-track-background-color
+  );
+}
+
+body::-webkit-scrollbar {
+  width: var(--custom-scrollbar-webkit-scrollbar-width);
+  background-color: var(--custom-scrollbar-webkit-scrollbar_background-color);
+}
+
+body::-webkit-scrollbar-thumb {
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-thumb-border-radius);
+
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-thumb-background-color
+  );
+}
+
+.choose-app-or-screen-dialog::-webkit-scrollbar-track {
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-track-border-radius);
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-track-background-color
+  );
+}
+
+.choose-app-or-screen-dialog::-webkit-scrollbar {
+  width: var(--custom-scrollbar-webkit-scrollbar-width);
+  background-color: var(--custom-scrollbar-webkit-scrollbar_background-color);
+}
+
+.choose-app-or-screen-dialog::-webkit-scrollbar-thumb {
+  border-radius: var(--custom-scrollbar-webkit-scrollbar-thumb-border-radius);
+
+  /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
+  background-color: var(
+    --custom-scrollbar-webkit-scrollbar-thumb-background-color
+  );
+}
+
+/* --custom-scrollbar-webkit-scrollbar-thumb-border-radius: 10px;
+--custom-scrollbar-webkit-scrollbar-thumb-background-color: #8A9BA8;
+--custom-scrollbar-webkit-scrollbar_background-color: rgba(0,0,0,0);
+--custom-scrollbar-webkit-scrollbar-width: 12px;
+--custom-scrollbar-webkit-scrollbar-track-border-radius: 10px;
+--custom-scrollbar-webkit-scrollbar-track-background-color: rgba(0,0,0,0); */
+
 h2 {
   margin: 0;
   font-size: 2.25rem;
diff --git a/app/app.html b/app/app.html
index 77ee53c..4f927ee 100644
--- a/app/app.html
+++ b/app/app.html
@@ -2,7 +2,7 @@
 <html>
   <head>
     <meta charset="utf-8" />
-    <title>Hello Deskreen!</title>
+    <title>Deskreen</title>
     <script>
       (() => {
         if (
diff --git a/app/client/package.json b/app/client/package.json
index 96fe85e..b94726b 100644
--- a/app/client/package.json
+++ b/app/client/package.json
@@ -47,10 +47,10 @@
     ],
     "coverageThreshold": {
       "global": {
-        "branches": 10,
-        "functions": 10,
-        "lines": 10,
-        "statements": 10
+        "branches": 0,
+        "functions": 0,
+        "lines": 0,
+        "statements": 0
       }
     },
     "coverageReporters": [
diff --git a/app/client/tsconfig.json b/app/client/tsconfig.json
index f2850b7..0980b23 100644
--- a/app/client/tsconfig.json
+++ b/app/client/tsconfig.json
@@ -17,7 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "preserve"
   },
   "include": [
     "src"
diff --git a/app/components/AllowConnectionForDeviceAlert.spec.tsx b/app/components/AllowConnectionForDeviceAlert.spec.tsx
new file mode 100644
index 0000000..4998671
--- /dev/null
+++ b/app/components/AllowConnectionForDeviceAlert.spec.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import AllowConnectionForDeviceAlert from './AllowConnectionForDeviceAlert';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <AllowConnectionForDeviceAlert
+          device={{} as Device}
+          isOpen
+          onCancel={() => {}}
+          onConfirm={() => {}}
+        />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/AllowConnectionForDeviceAlert.tsx b/app/components/AllowConnectionForDeviceAlert.tsx
new file mode 100644
index 0000000..d6fe17b
--- /dev/null
+++ b/app/components/AllowConnectionForDeviceAlert.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Row, Col } from 'react-flexbox-grid';
+import { Text, H3, Intent, Alert } from '@blueprintjs/core';
+import isProduction from '../utils/isProduction';
+
+interface AllowConnectionForDeviceAlertProps {
+  device: Device | null;
+  isOpen: boolean;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+export default function AllowConnectionForDeviceAlert(
+  props: AllowConnectionForDeviceAlertProps
+) {
+  const { device, isOpen, onCancel, onConfirm } = props;
+
+  return (
+    <Alert
+      className="class-allow-device-to-connect-alert"
+      cancelButtonText="Deny"
+      confirmButtonText="Allow"
+      icon="feed"
+      intent={Intent.DANGER}
+      isOpen={isOpen}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      transitionDuration={isProduction() ? 700 : 0}
+    >
+      <H3>Device is trying to connect</H3>
+      <Row>
+        <Col>
+          <Text>{`Device IP: `}</Text>
+          <span id="allow-connection-device-alert-device-ip-span">
+            {device?.deviceIp}
+          </span>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Text>{`Device Type: ${device?.deviceType}`}</Text>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Text>{`Device OS: ${device?.deviceOs}`}</Text>
+        </Col>
+      </Row>
+      <Row>
+        <Col>
+          <Text>{`session ID: ${device?.sessionId}`}</Text>
+        </Col>
+      </Row>
+    </Alert>
+  );
+}
diff --git a/app/components/CloseOverlayButton.tsx b/app/components/CloseOverlayButton.tsx
new file mode 100644
index 0000000..299fda7
--- /dev/null
+++ b/app/components/CloseOverlayButton.tsx
@@ -0,0 +1,46 @@
+/* eslint-disable react/require-default-props */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import { Button, Icon } from '@blueprintjs/core';
+
+interface CloseOverlayButtonProps {
+  onClick: () => void;
+  style?: any;
+  noDefaultStyles?: boolean;
+  className?: string;
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    closeButton: {
+      position: 'relative',
+      width: '40px',
+      height: '40px',
+      left: 'calc(100% - 55px)',
+      borderRadius: '100px',
+      zIndex: 9999,
+    },
+  })
+);
+
+const CloseOverlayButton: React.FC<CloseOverlayButtonProps> = (
+  props: CloseOverlayButtonProps
+) => {
+  const classes = useStyles();
+  return (
+    <Button
+      id="close-overlay-button"
+      className={
+        props.noDefaultStyles ? '' : `${classes.closeButton} ${props.className}`
+      }
+      onClick={props.onClick}
+      style={props.style}
+    >
+      <Icon icon="cross" iconSize={30} />
+    </Button>
+  );
+};
+
+export default CloseOverlayButton;
diff --git a/app/components/ConnectedDevicesListDrawer.spec.tsx b/app/components/ConnectedDevicesListDrawer.spec.tsx
new file mode 100644
index 0000000..e21a527
--- /dev/null
+++ b/app/components/ConnectedDevicesListDrawer.spec.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ConnectedDevicesListDrawer from './ConnectedDevicesListDrawer';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <ConnectedDevicesListDrawer
+          isOpen
+          handleToggle={() => {}}
+          stepperRef={null}
+        />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/ConnectedDevicesListDrawer.tsx b/app/components/ConnectedDevicesListDrawer.tsx
new file mode 100644
index 0000000..eeccf17
--- /dev/null
+++ b/app/components/ConnectedDevicesListDrawer.tsx
@@ -0,0 +1,217 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react/destructuring-assignment */
+import React, { useContext, useEffect, useState, useCallback } from 'react';
+
+import {
+  Button,
+  Text,
+  Position,
+  Drawer,
+  Card,
+  Alert,
+  H4,
+} from '@blueprintjs/core';
+import { Row, Col } from 'react-flexbox-grid';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import CloseOverlayButton from './CloseOverlayButton';
+import { ConnectedDevicesContext } from '../containers/ConnectedDevicesProvider';
+import isProduction from '../utils/isProduction';
+
+const Fade = require('react-reveal/Fade');
+
+interface ConnectedDevicesListDrawerProps {
+  isOpen: boolean;
+  handleToggle: () => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  stepperRef: any;
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    drawerRoot: { overflowY: 'scroll', overflowX: 'hidden' },
+    drawerInnerTopPanel: { padding: '20px 10px 0px 30px' },
+    connectedDevicesRoot: { padding: '10px 20px' },
+    topHeader: {
+      marginRight: '20px',
+      fontSize: '20px',
+      fontWeight: 900,
+    },
+    zoomFullWidth: {
+      width: '100%',
+    },
+  })
+);
+
+export default function ConnectedDevicesListDrawer(
+  props: ConnectedDevicesListDrawerProps
+) {
+  const classes = useStyles();
+
+  const [isAlertDisconectAllOpen, setIsAlertDisconectAllOpen] = useState(false);
+
+  const { devices, setDevicesHook } = useContext(ConnectedDevicesContext);
+  const [devicesDisplayed, setDevicesDisplayed] = useState(new Map());
+
+  useEffect(() => {
+    const map = new Map();
+    devices.forEach((el) => {
+      map.set(el.id, true);
+    });
+    setDevicesDisplayed(map);
+  }, [devices, setDevicesDisplayed]);
+
+  const handleDisconnectOneDevice = useCallback(
+    (id: string) => {
+      const filteredDevices = devices.filter((device) => {
+        return device.id !== id;
+      });
+
+      setDevicesHook(filteredDevices);
+    },
+    [devices, setDevicesHook]
+  );
+
+  const handleDisconnectAll = useCallback(() => {
+    setDevicesHook([] as Device[]);
+  }, [setDevicesHook]);
+
+  const hideOneDeviceInDevicesDisplayed = useCallback(
+    (id) => {
+      const newDevicesDisplayed = new Map(devicesDisplayed);
+      newDevicesDisplayed.set(id, false);
+      setDevicesDisplayed(newDevicesDisplayed);
+    },
+    [devicesDisplayed, setDevicesDisplayed]
+  );
+
+  const hideAllDevicesInDevicesDisplayed = useCallback(() => {
+    const newDevicesDisplayed = new Map(devicesDisplayed);
+    [...newDevicesDisplayed.keys()].forEach((key) => {
+      newDevicesDisplayed.set(key, false);
+    });
+    setDevicesDisplayed(newDevicesDisplayed);
+  }, [devicesDisplayed, setDevicesDisplayed]);
+
+  const handleDisconnectAndHideOneDevice = useCallback(
+    (id) => {
+      hideOneDeviceInDevicesDisplayed(id);
+      setTimeout(
+        () => {
+          handleDisconnectOneDevice(id);
+        },
+        isProduction() ? 1000 : 0
+      );
+    },
+    [handleDisconnectOneDevice, hideOneDeviceInDevicesDisplayed]
+  );
+
+  const handleDisconnectAndHideAllDevices = useCallback(() => {
+    hideAllDevicesInDevicesDisplayed();
+    setTimeout(
+      () => {
+        handleDisconnectAll();
+        props.handleToggle();
+        props.stepperRef.current.handleReset();
+      },
+      isProduction() ? 1000 : 0
+    );
+  }, [handleDisconnectAll, hideAllDevicesInDevicesDisplayed, props]);
+
+  return (
+    <>
+      <Drawer
+        className={classes.drawerRoot}
+        position={Position.BOTTOM}
+        size={Drawer.SIZE_LARGE}
+        isOpen={props.isOpen}
+        onClose={props.handleToggle}
+        transitionDuration={isProduction() ? 700 : 0}
+      >
+        <Row between="xs" middle="xs" className={classes.drawerInnerTopPanel}>
+          <Col xs={11}>
+            <Row middle="xs">
+              <div className={classes.topHeader}>
+                <Text className="bp3-text-muted">Connected Devices</Text>
+              </div>
+              <Button
+                intent="danger"
+                disabled={devices.length === 0}
+                onClick={() => {
+                  setIsAlertDisconectAllOpen(true);
+                }}
+                icon="disable"
+              >
+                Disconnect all devices
+              </Button>
+            </Row>
+          </Col>
+          <Col xs={1}>
+            <CloseOverlayButton onClick={props.handleToggle} />
+          </Col>
+        </Row>
+        <Row className={classes.connectedDevicesRoot}>
+          <Col xs={12}>
+            <Fade bottom cascade duration={isProduction() ? 700 : 0}>
+              <div className={classes.zoomFullWidth}>
+                {devices.map((device) => {
+                  return (
+                    <div key={device.id}>
+                      <Fade
+                        collapse
+                        opposite
+                        /* @ts-ignore: fine here */
+                        when={devicesDisplayed.get(device.id)}
+                        duration={isProduction() ? 700 : 0}
+                      >
+                        <Card>
+                          <Text className="device-ip-container">
+                            {device.deviceIp}
+                          </Text>
+                          <Text>{device.deviceType}</Text>
+                          <Text>{device.deviceOs}</Text>
+                          <Text>{device.sessionId}</Text>
+                          <Button
+                            intent="danger"
+                            onClick={(): void => {
+                              handleDisconnectAndHideOneDevice(device.id);
+                            }}
+                            icon="disable"
+                          >
+                            Disconnect
+                          </Button>
+                        </Card>
+                      </Fade>
+                    </div>
+                  );
+                })}
+              </div>
+            </Fade>
+          </Col>
+        </Row>
+      </Drawer>
+      <Alert
+        isOpen={isAlertDisconectAllOpen}
+        onClose={() => {
+          setIsAlertDisconectAllOpen(false);
+        }}
+        icon="warning-sign"
+        cancelButtonText="No, Cancel"
+        confirmButtonText="Yes, Disconnect All"
+        intent="danger"
+        canEscapeKeyCancel
+        canOutsideClickCancel
+        onCancel={() => {
+          setIsAlertDisconectAllOpen(false);
+        }}
+        onConfirm={handleDisconnectAndHideAllDevices}
+        transitionDuration={isProduction() ? 700 : 0}
+      >
+        <H4>
+          Are you sure you want to disconnect all connected viewing devices?
+        </H4>
+        <Text>This step can not be reverted.</Text>
+        <Text>You will have to connect all devices manually again.</Text>
+      </Alert>
+    </>
+  );
+}
diff --git a/app/components/Home.tsx b/app/components/Home.tsx
index dce4e34..bf2406b 100644
--- a/app/components/Home.tsx
+++ b/app/components/Home.tsx
@@ -10,11 +10,12 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { ipcRenderer } from 'electron';
 import { Grid, Row, Col } from 'react-flexbox-grid';
-import { Button } from '@blueprintjs/core';
+import {
+  Button,
+} from '@blueprintjs/core';
 import routes from '../constants/routes.json';
 import styles from './Home.css';
 
-
 export default function Home(): JSX.Element {
   const [signalingServerPort, setSignalingServerPort] = useState('0000');
   const { t } = useTranslation();
diff --git a/app/components/NavPanel.tsx b/app/components/NavPanel.tsx
deleted file mode 100644
index 59f63df..0000000
--- a/app/components/NavPanel.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import {
-  Alignment,
-  AnchorButton,
-  Classes,
-  Navbar,
-  Switch,
-} from '@blueprintjs/core';
-
-export default function NavPanel() {
-  const darkThemeToggleStyles = { marginBottom: 0 };
-
-  const handleToggleDarkTheme = () => {
-    document.body.classList.toggle(Classes.DARK);
-  };
-
-  return (
-    <Navbar className={Classes.DARK}>
-      <Navbar.Group align={Alignment.LEFT}>
-        <Navbar.Heading>Deskreen</Navbar.Heading>
-      </Navbar.Group>
-      <Navbar.Group align={Alignment.RIGHT}>
-        <AnchorButton href="#" text="Home" />
-        <Navbar.Divider />
-        <Navbar.Divider />
-        <Switch
-          style={darkThemeToggleStyles}
-          label="Dark theme"
-          onChange={handleToggleDarkTheme}
-        />
-      </Navbar.Group>
-    </Navbar>
-  );
-}
diff --git a/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx b/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx
new file mode 100644
index 0000000..18d8711
--- /dev/null
+++ b/app/components/SettingsOverlay/SettingRowLabelAndInput.tsx
@@ -0,0 +1,63 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react/destructuring-assignment */
+import React, { useCallback, useContext } from 'react';
+import { Row, Col } from 'react-flexbox-grid';
+import { Icon, Text } from '@blueprintjs/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import { SettingsContext } from '../../containers/SettingsProvider';
+
+const useStylesWithTheme = (isDarkTheme: boolean) =>
+  makeStyles(() =>
+    createStyles({
+      oneSettingRow: {
+        color: isDarkTheme ? '#CED9E0 !important' : '#5C7080 !important',
+        fontSize: '18px',
+        fontWeight: 900,
+      },
+      settingRowIcon: {
+        margin: '10px',
+        color: isDarkTheme ? '#BFCCD6' : '#8A9BA8',
+      },
+    })
+  );
+
+interface SettingRowLabelAndInput {
+  icon: string;
+  label: string;
+  input: React.ReactNode;
+}
+
+export default function SettingRowLabelAndInput(
+  props: SettingRowLabelAndInput
+) {
+  const { isDarkTheme } = useContext(SettingsContext);
+
+  const getClassesCallback = useCallback(() => {
+    // TODO: dont use callback inside callback, then how to use styles with theme?
+    return useStylesWithTheme(isDarkTheme)();
+  }, [isDarkTheme]);
+
+  return (
+    <Row middle="xs" between="xs">
+      <Col xs={6}>
+        <Row middle="xs" className={getClassesCallback().oneSettingRow}>
+          <Col>
+            <Icon
+              // @ts-ignore: ok here
+              icon={props.icon}
+              iconSize={25}
+              className={getClassesCallback().settingRowIcon}
+            />
+          </Col>
+          <Col>
+            <Text>{props.label}</Text>
+          </Col>
+        </Row>
+      </Col>
+      <Col xs={6}>
+        <Row>{props.input}</Row>
+      </Col>
+    </Row>
+  );
+}
diff --git a/app/components/SettingsOverlay/SettingsOverlay.spec.tsx b/app/components/SettingsOverlay/SettingsOverlay.spec.tsx
new file mode 100644
index 0000000..41017ce
--- /dev/null
+++ b/app/components/SettingsOverlay/SettingsOverlay.spec.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/jsx-boolean-value */
+import React, { Suspense } from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import SettingsOverlay from './SettingsOverlay';
+import { SettingsProvider } from '../../containers/SettingsProvider';
+import { ConnectedDevicesProvider } from '../../containers/ConnectedDevicesProvider';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Suspense fallback={<div>Loading... </div>}>
+        <SettingsProvider>
+          <ConnectedDevicesProvider>
+            <Router>
+              <SettingsOverlay isSettingsOpen={true} handleClose={() => {}} />
+            </Router>
+          </ConnectedDevicesProvider>
+        </SettingsProvider>
+      </Suspense>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/SettingsOverlay/SettingsOverlay.tsx b/app/components/SettingsOverlay/SettingsOverlay.tsx
new file mode 100644
index 0000000..9dffc90
--- /dev/null
+++ b/app/components/SettingsOverlay/SettingsOverlay.tsx
@@ -0,0 +1,276 @@
+/* eslint-disable react/jsx-wrap-multilines */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react-hooks/rules-of-hooks */
+/* eslint-disable react/destructuring-assignment */
+import React, {
+  useContext,
+  useCallback,
+  useMemo,
+  useEffect,
+  useState,
+} from 'react';
+import {
+  Button,
+  Overlay,
+  Classes,
+  H3,
+  H6,
+  Tabs,
+  Tab,
+  Icon,
+  HTMLSelect,
+  Text,
+  ControlGroup,
+  Checkbox,
+} from '@blueprintjs/core';
+import { useTranslation } from 'react-i18next';
+import { Row } from 'react-flexbox-grid';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import i18n from 'i18next';
+import {
+  DARK_UI_BACKGROUND,
+  LIGHT_UI_BACKGROUND,
+  SettingsContext,
+} from '../../containers/SettingsProvider';
+import CloseOverlayButton from '../CloseOverlayButton';
+import { getLangNameToLangKeyMap } from '../../configs/i18next.config.client';
+import config from '../../configs/app.lang.config';
+import isProduction from '../../utils/isProduction';
+import SettingRowLabelAndInput from './SettingRowLabelAndInput';
+
+const Fade = require('react-reveal/Fade');
+
+interface SettingsOverlayProps {
+  isSettingsOpen: boolean;
+  handleClose: () => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const useStylesWithTheme = (_isDarkTheme: boolean) =>
+  makeStyles(() =>
+    createStyles({
+      checkboxSettings: { margin: '0' },
+      overlayInnerRoot: { width: '90%' },
+      overlayInsideFade: {
+        height: '90vh',
+        backgroundColor: _isDarkTheme
+          ? DARK_UI_BACKGROUND
+          : LIGHT_UI_BACKGROUND,
+      },
+      absoluteCloseButton: { position: 'absolute', left: 'calc(100% - 65px)' },
+      tabNavigationRowButton: { fontWeight: 700 },
+      iconInTablLeftButton: { marginRight: '5px' },
+    })
+  );
+
+export default function SettingsOverlay(props: SettingsOverlayProps) {
+  const { t } = useTranslation();
+
+  const { isDarkTheme, setIsDarkThemeHook } = useContext(SettingsContext);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const [languagesList, setLanguagesList] = useState([] as string[]);
+
+  const LANG_NAME_TO_KEY_MAP = useMemo(() => {
+    return getLangNameToLangKeyMap();
+  }, []);
+
+  useEffect(() => {
+    const tmp: string[] = [];
+    // eslint-disable-next-line no-restricted-syntax
+    for (const [key] of Object.entries(LANG_NAME_TO_KEY_MAP)) {
+      // @ts-ignore: fine here
+      tmp.push(key);
+    }
+    setLanguagesList(tmp);
+  }, [LANG_NAME_TO_KEY_MAP]);
+
+  const getClassesCallback = useCallback(() => {
+    return useStylesWithTheme(isDarkTheme)();
+  }, [isDarkTheme]);
+
+  const handleToggleDarkTheme = useCallback(() => {
+    if (!isDarkTheme) {
+      document.body.classList.toggle(Classes.DARK);
+      setIsDarkThemeHook(true);
+    }
+  }, [isDarkTheme, setIsDarkThemeHook]);
+
+  const handleToggleLightTheme = useCallback(() => {
+    if (isDarkTheme) {
+      document.body.classList.toggle(Classes.DARK);
+      setIsDarkThemeHook(false);
+    }
+  }, [isDarkTheme, setIsDarkThemeHook]);
+
+  const onChangeLangueageHTMLSelectHandler = (event: any) => {
+    if (
+      event.currentTarget &&
+      event.currentTarget.value in LANG_NAME_TO_KEY_MAP
+    ) {
+      // @ts-ignore: fine here
+      i18n.changeLanguage(LANG_NAME_TO_KEY_MAP[event.currentTarget.value]);
+    }
+  };
+
+  const GeneralSettingsPanel: React.FC = () => (
+    <>
+      <Row middle="xs">
+        <H3 className="bp3-text-muted">General Settings</H3>
+      </Row>
+      <SettingRowLabelAndInput
+        icon="style"
+        label="Colors"
+        input={
+          <ControlGroup fill vertical={false}>
+            <Button
+              icon="flash"
+              text="Light"
+              onClick={handleToggleLightTheme}
+              active={!isDarkTheme}
+            />
+            <Button
+              icon="moon"
+              text="Dark"
+              onClick={handleToggleDarkTheme}
+              active={isDarkTheme}
+            />
+          </ControlGroup>
+        }
+      />
+      <SettingRowLabelAndInput
+        icon="translate"
+        label={t('Language')}
+        input={
+          <HTMLSelect
+            defaultValue={
+              // @ts-ignore: fine here
+              config.langISOKeyToLangFullNameMap[i18n.language]
+            }
+            options={languagesList}
+            onChange={onChangeLangueageHTMLSelectHandler}
+          />
+        }
+      />
+      <SettingRowLabelAndInput
+        icon="automatic-updates"
+        label="Automatic Updates"
+        input={
+          <Checkbox
+            checked
+            className={getClassesCallback().checkboxSettings}
+            label="Enabled"
+          />
+        }
+      />
+    </>
+  );
+
+  const SecurityPanel: React.FC = () => (
+    <div>
+      <H3>
+        <Icon icon="shield" iconSize={20} />
+        Security
+      </H3>
+      <H6 className={Classes.RUNNING_TEXT}>
+        {`HTML is great for declaring static documents, but it falters when we try
+        to use it for declaring dynamic views in web-applications. AngularJS
+        lets you extend HTML vocabulary for your application. The resulting
+        environment is extraordinarily expressive, readable, and quick to
+        develop.`}
+      </H6>
+    </div>
+  );
+
+  const BlockedIPsPanel: React.FC = () => (
+    <div>
+      <H3>Blocked IPs</H3>
+    </div>
+  );
+
+  const getTabNavBlockedIPsButton = () => {
+    return (
+      <Row middle="xs" className={getClassesCallback().tabNavigationRowButton}>
+        <Icon
+          icon="blocked-person"
+          className={getClassesCallback().iconInTablLeftButton}
+        />
+        <Text className="bp3-text-large">Blackilsted IPs</Text>
+      </Row>
+    );
+  };
+
+  const getTabNavSecurityButton = () => {
+    return (
+      <Row middle="xs" className={getClassesCallback().tabNavigationRowButton}>
+        <Icon
+          icon="shield"
+          className={getClassesCallback().iconInTablLeftButton}
+        />
+        <Text className="bp3-text-large">Security</Text>
+      </Row>
+    );
+  };
+
+  const getTabNavGeneralSettingsButton = () => {
+    return (
+      <Row middle="xs" className={getClassesCallback().tabNavigationRowButton}>
+        <Icon
+          icon="wrench"
+          className={getClassesCallback().iconInTablLeftButton}
+        />
+        <Text className="bp3-text-large">General</Text>
+      </Row>
+    );
+  };
+
+  return (
+    <Overlay
+      onClose={props.handleClose}
+      className={`${Classes.OVERLAY_SCROLL_CONTAINER} bp3-overlay-settings`}
+      autoFocus
+      canEscapeKeyClose
+      canOutsideClickClose
+      enforceFocus
+      hasBackdrop
+      isOpen={props.isSettingsOpen}
+      usePortal
+      transitionDuration={0}
+    >
+      <div className={getClassesCallback().overlayInnerRoot}>
+        <Fade duration={isProduction() ? 700 : 0}>
+          <div
+            id="settings-overlay-inner"
+            className={`${getClassesCallback().overlayInsideFade} ${
+              Classes.CARD
+            }`}
+          >
+            <CloseOverlayButton
+              className={getClassesCallback().absoluteCloseButton}
+              onClick={props.handleClose}
+            />
+            <Tabs
+              animate
+              id="TabsExample"
+              key="vertical"
+              renderActiveTabPanelOnly
+              vertical
+            >
+              <Tab id="rx" title="" panel={<GeneralSettingsPanel />}>
+                {getTabNavGeneralSettingsButton()}
+              </Tab>
+              <Tab id="ng" title="" panel={<SecurityPanel />}>
+                {getTabNavSecurityButton()}
+              </Tab>
+              <Tab id="bb" disabled title="" panel={<BlockedIPsPanel />}>
+                {getTabNavBlockedIPsButton()}
+              </Tab>
+              <Tabs.Expander />
+            </Tabs>
+          </div>
+        </Fade>
+      </div>
+    </Overlay>
+  );
+}
diff --git a/app/components/SettingsOverlay/__snapshots__/SettingsOverlay.spec.tsx.snap b/app/components/SettingsOverlay/__snapshots__/SettingsOverlay.spec.tsx.snap
new file mode 100644
index 0000000..ac2818c
--- /dev/null
+++ b/app/components/SettingsOverlay/__snapshots__/SettingsOverlay.spec.tsx.snap
@@ -0,0 +1,1985 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<Suspense
+  fallback={
+    <div>
+      Loading... 
+    </div>
+  }
+>
+  <SettingsProvider>
+    <ConnectedDevicesProvider>
+      <BrowserRouter>
+        <Router
+          history={
+            Object {
+              "action": "POP",
+              "block": [Function],
+              "createHref": [Function],
+              "go": [Function],
+              "goBack": [Function],
+              "goForward": [Function],
+              "length": 1,
+              "listen": [Function],
+              "location": Object {
+                "hash": "",
+                "pathname": "/",
+                "search": "",
+                "state": undefined,
+              },
+              "push": [Function],
+              "replace": [Function],
+            }
+          }
+        >
+          <SettingsOverlay
+            handleClose={[Function]}
+            isSettingsOpen={true}
+          >
+            <Blueprint3.Overlay
+              autoFocus={true}
+              backdropProps={Object {}}
+              canEscapeKeyClose={true}
+              canOutsideClickClose={true}
+              className="bp3-overlay-scroll-container bp3-overlay-settings"
+              enforceFocus={true}
+              hasBackdrop={true}
+              isOpen={true}
+              lazy={true}
+              onClose={[Function]}
+              transitionDuration={0}
+              transitionName="bp3-overlay"
+              usePortal={true}
+            >
+              <Blueprint3.Portal
+                container={
+                  <body
+                    class="bp3-overlay-open"
+                  >
+                    <div
+                      class="bp3-portal"
+                    >
+                      <div
+                        class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
+                      >
+                        <div
+                          class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                          tabindex="0"
+                        />
+                        <div
+                          class="makeStyles-overlayInnerRoot-56 bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                          tabindex="0"
+                        >
+                          <div
+                            class="react-reveal makeStyles-overlayInsideFade-63 bp3-card"
+                            id="settings-overlay-inner"
+                          >
+                            <button
+                              class="bp3-button makeStyles-closeButton-109 makeStyles-absoluteCloseButton-70"
+                              id="close-overlay-button"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-button-text"
+                              >
+                                <span
+                                  class="bp3-icon bp3-icon-cross"
+                                  icon="cross"
+                                >
+                                  <svg
+                                    data-icon="cross"
+                                    height="30"
+                                    viewBox="0 0 20 20"
+                                    width="30"
+                                  >
+                                    <desc>
+                                      cross
+                                    </desc>
+                                    <path
+                                      d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                      fill-rule="evenodd"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </button>
+                            <div
+                              class="bp3-tabs bp3-vertical"
+                            >
+                              <div
+                                class="bp3-tab-list"
+                                role="tablist"
+                              >
+                                <div
+                                  class="bp3-tab-indicator-wrapper"
+                                  style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px; transition: none;"
+                                >
+                                  <div
+                                    class="bp3-tab-indicator"
+                                  />
+                                </div>
+                                <div
+                                  aria-controls="bp3-tab-panel_TabsExample_rx"
+                                  aria-disabled="false"
+                                  aria-expanded="true"
+                                  aria-selected="true"
+                                  class="bp3-tab"
+                                  data-tab-id="rx"
+                                  id="bp3-tab-title_TabsExample_rx"
+                                  role="tab"
+                                  tabindex="0"
+                                >
+                                  
+                                  <div
+                                    class="makeStyles-tabNavigationRowButton-77 row middle-xs"
+                                  >
+                                    <span
+                                      class="bp3-icon bp3-icon-wrench makeStyles-iconInTablLeftButton-84"
+                                      icon="wrench"
+                                    >
+                                      <svg
+                                        data-icon="wrench"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                      >
+                                        <desc>
+                                          wrench
+                                        </desc>
+                                        <path
+                                          d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <div
+                                      class="bp3-text-large"
+                                    >
+                                      General
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  aria-controls="bp3-tab-panel_TabsExample_ng"
+                                  aria-disabled="false"
+                                  aria-expanded="false"
+                                  aria-selected="false"
+                                  class="bp3-tab"
+                                  data-tab-id="ng"
+                                  id="bp3-tab-title_TabsExample_ng"
+                                  role="tab"
+                                  tabindex="0"
+                                >
+                                  
+                                  <div
+                                    class="makeStyles-tabNavigationRowButton-89 row middle-xs"
+                                  >
+                                    <span
+                                      class="bp3-icon bp3-icon-shield makeStyles-iconInTablLeftButton-96"
+                                      icon="shield"
+                                    >
+                                      <svg
+                                        data-icon="shield"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                      >
+                                        <desc>
+                                          shield
+                                        </desc>
+                                        <path
+                                          d="M8 16c4.667-3.048 7-7.238 7-12.571-1.556 0-3.889-1.143-7-3.429-3.111 2.286-5.444 3.429-7 3.429C1 8.762 3.333 12.952 8 16zM8 2.121c2.005 1.388 3.715 2.304 5.186 2.735-.342 3.702-2.05 6.683-5.186 9.038V2.121z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <div
+                                      class="bp3-text-large"
+                                    >
+                                      Security
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  aria-controls="bp3-tab-panel_TabsExample_bb"
+                                  aria-disabled="true"
+                                  aria-expanded="false"
+                                  aria-selected="false"
+                                  class="bp3-tab"
+                                  data-tab-id="bb"
+                                  id="bp3-tab-title_TabsExample_bb"
+                                  role="tab"
+                                >
+                                  
+                                  <div
+                                    class="makeStyles-tabNavigationRowButton-101 row middle-xs"
+                                  >
+                                    <span
+                                      class="bp3-icon bp3-icon-blocked-person makeStyles-iconInTablLeftButton-108"
+                                      icon="blocked-person"
+                                    >
+                                      <svg
+                                        data-icon="blocked-person"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                      >
+                                        <desc>
+                                          blocked-person
+                                        </desc>
+                                        <path
+                                          d="M9.39 12.69c-1.2-.53-1.04-.85-1.08-1.29-.01-.07-.01-.13-.02-.2.41-.37.75-.87.97-1.44 0 0 .01-.03.01-.04.05-.13.09-.26.13-.39.27-.06.43-.36.5-.63.01-.03.03-.08.05-.12C8.18 7.8 6.94 6.04 6.94 4c0-.32.04-.62.09-.92-.17-.03-.35-.08-.51-.08-.65 0-1.37.2-1.88.59-.5.38-.87.92-1.05 1.51-.04.14-.07.27-.09.41-.09.48-.14 1.23-.14 1.74v.06c-.19.08-.36.27-.4.68-.03.31.1.59.16.7.06.28.23.59.51.64.04.14.08.27.13.39 0 .01.01.02.01.02v.01c.22.59.57 1.1.99 1.46 0 .06-.01.12-.01.17-.04.44.08.76-1.12 1.29-1.2.53-3.01 1.1-3.38 1.95C-.12 15.5.03 16 .03 16h12.96s.15-.5-.22-1.36c-.37-.85-2.18-1.42-3.38-1.95zM11.97 0C9.75 0 7.94 1.79 7.94 4s1.8 4 4.03 4S16 6.21 16 4s-1.8-4-4.03-4zM9.96 4c0-1.1.9-2 2.01-2 .37 0 .72.11 1.02.28l-2.75 2.73c-.17-.3-.28-.64-.28-1.01zm2.01 2c-.37 0-.72-.11-1.02-.28l2.75-2.73c.18.3.28.64.28 1.01.01 1.1-.9 2-2.01 2z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <div
+                                      class="bp3-text-large"
+                                    >
+                                      Blackilsted IPs
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="bp3-flex-expander"
+                                />
+                              </div>
+                              <div
+                                aria-hidden="false"
+                                aria-labelledby="bp3-tab-title_TabsExample_rx"
+                                class="bp3-tab-panel"
+                                id="bp3-tab-panel_TabsExample_rx"
+                                role="tabpanel"
+                              >
+                                <div
+                                  class="row middle-xs"
+                                >
+                                  <h3
+                                    class="bp3-heading bp3-text-muted"
+                                  >
+                                    General Settings
+                                  </h3>
+                                </div>
+                                <div
+                                  class="row middle-xs between-xs"
+                                >
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="makeStyles-oneSettingRow-134 row middle-xs"
+                                    >
+                                      <div
+                                        class=""
+                                      >
+                                        <span
+                                          class="bp3-icon bp3-icon-style makeStyles-settingRowIcon-137"
+                                          icon="style"
+                                        >
+                                          <svg
+                                            data-icon="style"
+                                            height="25"
+                                            viewBox="0 0 20 20"
+                                            width="25"
+                                          >
+                                            <desc>
+                                              style
+                                            </desc>
+                                            <path
+                                              d="M18 18H2V2h12.3l2-2H1C.4 0 0 .4 0 1v18c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V7.7l-2 2V18zm1.2-18l-7.6 7.6 2.8 2.8L20 4.8V0h-.8zM4 15.9c3.1.2 5.9.2 8.2-2 1.1-1.1 1.1-3 0-4.1-.6-.5-1.3-.8-2-.8s-1.4.3-1.9.8C7.2 11 6.6 14.3 4 15.9z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class=""
+                                        >
+                                          Colors
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="row"
+                                    >
+                                      <div
+                                        class="bp3-control-group bp3-fill"
+                                      >
+                                        <button
+                                          class="bp3-button bp3-active"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="bp3-icon bp3-icon-flash"
+                                            icon="flash"
+                                          >
+                                            <svg
+                                              data-icon="flash"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                            >
+                                              <desc>
+                                                flash
+                                              </desc>
+                                              <path
+                                                d="M4 8c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1zm4-4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1S7 .45 7 1v2c0 .55.45 1 1 1zM3.79 5.21a1.003 1.003 0 001.42-1.42l-1.5-1.5a1.003 1.003 0 00-1.42 1.42l1.5 1.5zm.71 5.29c-.28 0-.53.11-.71.29l-1.5 1.5a1.003 1.003 0 001.42 1.42l1.5-1.5a1.003 1.003 0 00-.71-1.71zm7-5c.28 0 .53-.11.71-.29l1.5-1.5a1.003 1.003 0 00-1.42-1.42l-1.5 1.5a1.003 1.003 0 00.71 1.71zm.71 5.29a1.003 1.003 0 00-1.42 1.42l1.5 1.5a1.003 1.003 0 001.42-1.42l-1.5-1.5zM15 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zM8 5C6.34 5 5 6.34 5 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0 3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1z"
+                                                fill-rule="evenodd"
+                                              />
+                                            </svg>
+                                          </span>
+                                          <span
+                                            class="bp3-button-text"
+                                          >
+                                            Light
+                                          </span>
+                                        </button>
+                                        <button
+                                          class="bp3-button"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="bp3-icon bp3-icon-moon"
+                                            icon="moon"
+                                          >
+                                            <svg
+                                              data-icon="moon"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                            >
+                                              <desc>
+                                                moon
+                                              </desc>
+                                              <path
+                                                d="M15 11.38A7.835 7.835 0 017.85 16C3.51 16 0 12.49 0 8.15 0 4.97 1.89 2.23 4.62 1c-.45.99-.7 2.08-.7 3.23a7.85 7.85 0 007.85 7.85c1.15 0 2.24-.25 3.23-.7z"
+                                                fill-rule="evenodd"
+                                              />
+                                            </svg>
+                                          </span>
+                                          <span
+                                            class="bp3-button-text"
+                                          >
+                                            Dark
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="row middle-xs between-xs"
+                                >
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="makeStyles-oneSettingRow-138 row middle-xs"
+                                    >
+                                      <div
+                                        class=""
+                                      >
+                                        <span
+                                          class="bp3-icon bp3-icon-translate makeStyles-settingRowIcon-141"
+                                          icon="translate"
+                                        >
+                                          <svg
+                                            data-icon="translate"
+                                            height="25"
+                                            viewBox="0 0 20 20"
+                                            width="25"
+                                          >
+                                            <desc>
+                                              translate
+                                            </desc>
+                                            <path
+                                              d="M19.89 18.56l-4.99-10h-.01c-.17-.33-.5-.56-.89-.56s-.72.23-.89.56h-.01l-1.73 3.46-2.8-2.3 1.99-1.64C11.44 7.34 12 6.23 12 5V4h1c.55 0 1-.45 1-1s-.45-1-1-1H8V1c0-.55-.45-1-1-1S6 .45 6 1v1H1c-.55 0-1 .45-1 1s.45 1 1 1h9v1c0 .62-.28 1.18-.73 1.54L7 8.42 4.73 6.54C4.28 6.18 4 5.62 4 5H2c0 1.23.56 2.34 1.44 3.07l1.99 1.64-3.06 2.52.01.01c-.23.18-.38.45-.38.76 0 .55.45 1 1 1 .24 0 .45-.1.63-.24l.01.01L7 11l3.36 2.77.01-.01c.02.02.05.03.08.05.01 0 .01.01.02.02l-2.36 4.73h.01c-.07.13-.12.28-.12.44 0 .55.45 1 1 1 .39 0 .72-.23.89-.56h.01L11.12 17h5.76l1.22 2.45h.01c.17.32.5.55.89.55.55 0 1-.45 1-1 0-.16-.05-.31-.11-.44zM12.12 15L14 11.24 15.88 15h-3.76z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class=""
+                                        >
+                                          Language
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="row"
+                                    >
+                                      <div
+                                        class="bp3-html-select"
+                                      >
+                                        <select>
+                                          <option
+                                            value="English"
+                                          >
+                                            English
+                                          </option>
+                                          <option
+                                            value="Русский"
+                                          >
+                                            Русский
+                                          </option>
+                                          <option
+                                            value="Українська"
+                                          >
+                                            Українська
+                                          </option>
+                                        </select>
+                                        <span
+                                          class="bp3-icon bp3-icon-double-caret-vertical"
+                                          icon="double-caret-vertical"
+                                        >
+                                          <svg
+                                            data-icon="double-caret-vertical"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                          >
+                                            <desc>
+                                              double-caret-vertical
+                                            </desc>
+                                            <path
+                                              d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="row middle-xs between-xs"
+                                >
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="makeStyles-oneSettingRow-142 row middle-xs"
+                                    >
+                                      <div
+                                        class=""
+                                      >
+                                        <span
+                                          class="bp3-icon bp3-icon-automatic-updates makeStyles-settingRowIcon-145"
+                                          icon="automatic-updates"
+                                        >
+                                          <svg
+                                            data-icon="automatic-updates"
+                                            height="25"
+                                            viewBox="0 0 20 20"
+                                            width="25"
+                                          >
+                                            <desc>
+                                              automatic-updates
+                                            </desc>
+                                            <path
+                                              d="M10 18c-4.42 0-8-3.58-8-8 0-2.52 1.18-4.76 3-6.22V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h2.06C1.61 3.82 0 6.71 0 10c0 5.52 4.48 10 10 10 .55 0 1-.45 1-1s-.45-1-1-1zm0-16c1.64 0 3.15.49 4.42 1.34l1.43-1.43A9.869 9.869 0 0010 0c-.55 0-1 .45-1 1s.45 1 1 1zm10 8c0-1.13-.2-2.21-.54-3.22L17.84 8.4A7.962 7.962 0 0115 16.22V15c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-2.06c2.45-1.82 4.06-4.71 4.06-8zm0-7a1.003 1.003 0 00-1.71-.71L12 8.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7c.18-.18.29-.43.29-.71z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class=""
+                                        >
+                                          Automatic Updates
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="row"
+                                    >
+                                      <label
+                                        class="bp3-control bp3-checkbox makeStyles-checkboxSettings-128"
+                                      >
+                                        <input
+                                          checked=""
+                                          type="checkbox"
+                                        />
+                                        <span
+                                          class="bp3-control-indicator"
+                                        />
+                                        Enabled
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </body>
+                }
+              >
+                <Portal
+                  containerInfo={
+                    <div
+                      class="bp3-portal"
+                    >
+                      <div
+                        class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
+                      >
+                        <div
+                          class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                          tabindex="0"
+                        />
+                        <div
+                          class="makeStyles-overlayInnerRoot-56 bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                          tabindex="0"
+                        >
+                          <div
+                            class="react-reveal makeStyles-overlayInsideFade-63 bp3-card"
+                            id="settings-overlay-inner"
+                          >
+                            <button
+                              class="bp3-button makeStyles-closeButton-109 makeStyles-absoluteCloseButton-70"
+                              id="close-overlay-button"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-button-text"
+                              >
+                                <span
+                                  class="bp3-icon bp3-icon-cross"
+                                  icon="cross"
+                                >
+                                  <svg
+                                    data-icon="cross"
+                                    height="30"
+                                    viewBox="0 0 20 20"
+                                    width="30"
+                                  >
+                                    <desc>
+                                      cross
+                                    </desc>
+                                    <path
+                                      d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                      fill-rule="evenodd"
+                                    />
+                                  </svg>
+                                </span>
+                              </span>
+                            </button>
+                            <div
+                              class="bp3-tabs bp3-vertical"
+                            >
+                              <div
+                                class="bp3-tab-list"
+                                role="tablist"
+                              >
+                                <div
+                                  class="bp3-tab-indicator-wrapper"
+                                  style="height: 0px; transform: translateX(0px) translateY(0px); width: 0px; transition: none;"
+                                >
+                                  <div
+                                    class="bp3-tab-indicator"
+                                  />
+                                </div>
+                                <div
+                                  aria-controls="bp3-tab-panel_TabsExample_rx"
+                                  aria-disabled="false"
+                                  aria-expanded="true"
+                                  aria-selected="true"
+                                  class="bp3-tab"
+                                  data-tab-id="rx"
+                                  id="bp3-tab-title_TabsExample_rx"
+                                  role="tab"
+                                  tabindex="0"
+                                >
+                                  
+                                  <div
+                                    class="makeStyles-tabNavigationRowButton-77 row middle-xs"
+                                  >
+                                    <span
+                                      class="bp3-icon bp3-icon-wrench makeStyles-iconInTablLeftButton-84"
+                                      icon="wrench"
+                                    >
+                                      <svg
+                                        data-icon="wrench"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                      >
+                                        <desc>
+                                          wrench
+                                        </desc>
+                                        <path
+                                          d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <div
+                                      class="bp3-text-large"
+                                    >
+                                      General
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  aria-controls="bp3-tab-panel_TabsExample_ng"
+                                  aria-disabled="false"
+                                  aria-expanded="false"
+                                  aria-selected="false"
+                                  class="bp3-tab"
+                                  data-tab-id="ng"
+                                  id="bp3-tab-title_TabsExample_ng"
+                                  role="tab"
+                                  tabindex="0"
+                                >
+                                  
+                                  <div
+                                    class="makeStyles-tabNavigationRowButton-89 row middle-xs"
+                                  >
+                                    <span
+                                      class="bp3-icon bp3-icon-shield makeStyles-iconInTablLeftButton-96"
+                                      icon="shield"
+                                    >
+                                      <svg
+                                        data-icon="shield"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                      >
+                                        <desc>
+                                          shield
+                                        </desc>
+                                        <path
+                                          d="M8 16c4.667-3.048 7-7.238 7-12.571-1.556 0-3.889-1.143-7-3.429-3.111 2.286-5.444 3.429-7 3.429C1 8.762 3.333 12.952 8 16zM8 2.121c2.005 1.388 3.715 2.304 5.186 2.735-.342 3.702-2.05 6.683-5.186 9.038V2.121z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <div
+                                      class="bp3-text-large"
+                                    >
+                                      Security
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  aria-controls="bp3-tab-panel_TabsExample_bb"
+                                  aria-disabled="true"
+                                  aria-expanded="false"
+                                  aria-selected="false"
+                                  class="bp3-tab"
+                                  data-tab-id="bb"
+                                  id="bp3-tab-title_TabsExample_bb"
+                                  role="tab"
+                                >
+                                  
+                                  <div
+                                    class="makeStyles-tabNavigationRowButton-101 row middle-xs"
+                                  >
+                                    <span
+                                      class="bp3-icon bp3-icon-blocked-person makeStyles-iconInTablLeftButton-108"
+                                      icon="blocked-person"
+                                    >
+                                      <svg
+                                        data-icon="blocked-person"
+                                        height="16"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                      >
+                                        <desc>
+                                          blocked-person
+                                        </desc>
+                                        <path
+                                          d="M9.39 12.69c-1.2-.53-1.04-.85-1.08-1.29-.01-.07-.01-.13-.02-.2.41-.37.75-.87.97-1.44 0 0 .01-.03.01-.04.05-.13.09-.26.13-.39.27-.06.43-.36.5-.63.01-.03.03-.08.05-.12C8.18 7.8 6.94 6.04 6.94 4c0-.32.04-.62.09-.92-.17-.03-.35-.08-.51-.08-.65 0-1.37.2-1.88.59-.5.38-.87.92-1.05 1.51-.04.14-.07.27-.09.41-.09.48-.14 1.23-.14 1.74v.06c-.19.08-.36.27-.4.68-.03.31.1.59.16.7.06.28.23.59.51.64.04.14.08.27.13.39 0 .01.01.02.01.02v.01c.22.59.57 1.1.99 1.46 0 .06-.01.12-.01.17-.04.44.08.76-1.12 1.29-1.2.53-3.01 1.1-3.38 1.95C-.12 15.5.03 16 .03 16h12.96s.15-.5-.22-1.36c-.37-.85-2.18-1.42-3.38-1.95zM11.97 0C9.75 0 7.94 1.79 7.94 4s1.8 4 4.03 4S16 6.21 16 4s-1.8-4-4.03-4zM9.96 4c0-1.1.9-2 2.01-2 .37 0 .72.11 1.02.28l-2.75 2.73c-.17-.3-.28-.64-.28-1.01zm2.01 2c-.37 0-.72-.11-1.02-.28l2.75-2.73c.18.3.28.64.28 1.01.01 1.1-.9 2-2.01 2z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </span>
+                                    <div
+                                      class="bp3-text-large"
+                                    >
+                                      Blackilsted IPs
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="bp3-flex-expander"
+                                />
+                              </div>
+                              <div
+                                aria-hidden="false"
+                                aria-labelledby="bp3-tab-title_TabsExample_rx"
+                                class="bp3-tab-panel"
+                                id="bp3-tab-panel_TabsExample_rx"
+                                role="tabpanel"
+                              >
+                                <div
+                                  class="row middle-xs"
+                                >
+                                  <h3
+                                    class="bp3-heading bp3-text-muted"
+                                  >
+                                    General Settings
+                                  </h3>
+                                </div>
+                                <div
+                                  class="row middle-xs between-xs"
+                                >
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="makeStyles-oneSettingRow-134 row middle-xs"
+                                    >
+                                      <div
+                                        class=""
+                                      >
+                                        <span
+                                          class="bp3-icon bp3-icon-style makeStyles-settingRowIcon-137"
+                                          icon="style"
+                                        >
+                                          <svg
+                                            data-icon="style"
+                                            height="25"
+                                            viewBox="0 0 20 20"
+                                            width="25"
+                                          >
+                                            <desc>
+                                              style
+                                            </desc>
+                                            <path
+                                              d="M18 18H2V2h12.3l2-2H1C.4 0 0 .4 0 1v18c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V7.7l-2 2V18zm1.2-18l-7.6 7.6 2.8 2.8L20 4.8V0h-.8zM4 15.9c3.1.2 5.9.2 8.2-2 1.1-1.1 1.1-3 0-4.1-.6-.5-1.3-.8-2-.8s-1.4.3-1.9.8C7.2 11 6.6 14.3 4 15.9z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class=""
+                                        >
+                                          Colors
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="row"
+                                    >
+                                      <div
+                                        class="bp3-control-group bp3-fill"
+                                      >
+                                        <button
+                                          class="bp3-button bp3-active"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="bp3-icon bp3-icon-flash"
+                                            icon="flash"
+                                          >
+                                            <svg
+                                              data-icon="flash"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                            >
+                                              <desc>
+                                                flash
+                                              </desc>
+                                              <path
+                                                d="M4 8c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1zm4-4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1S7 .45 7 1v2c0 .55.45 1 1 1zM3.79 5.21a1.003 1.003 0 001.42-1.42l-1.5-1.5a1.003 1.003 0 00-1.42 1.42l1.5 1.5zm.71 5.29c-.28 0-.53.11-.71.29l-1.5 1.5a1.003 1.003 0 001.42 1.42l1.5-1.5a1.003 1.003 0 00-.71-1.71zm7-5c.28 0 .53-.11.71-.29l1.5-1.5a1.003 1.003 0 00-1.42-1.42l-1.5 1.5a1.003 1.003 0 00.71 1.71zm.71 5.29a1.003 1.003 0 00-1.42 1.42l1.5 1.5a1.003 1.003 0 001.42-1.42l-1.5-1.5zM15 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zM8 5C6.34 5 5 6.34 5 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0 3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1z"
+                                                fill-rule="evenodd"
+                                              />
+                                            </svg>
+                                          </span>
+                                          <span
+                                            class="bp3-button-text"
+                                          >
+                                            Light
+                                          </span>
+                                        </button>
+                                        <button
+                                          class="bp3-button"
+                                          type="button"
+                                        >
+                                          <span
+                                            class="bp3-icon bp3-icon-moon"
+                                            icon="moon"
+                                          >
+                                            <svg
+                                              data-icon="moon"
+                                              height="16"
+                                              viewBox="0 0 16 16"
+                                              width="16"
+                                            >
+                                              <desc>
+                                                moon
+                                              </desc>
+                                              <path
+                                                d="M15 11.38A7.835 7.835 0 017.85 16C3.51 16 0 12.49 0 8.15 0 4.97 1.89 2.23 4.62 1c-.45.99-.7 2.08-.7 3.23a7.85 7.85 0 007.85 7.85c1.15 0 2.24-.25 3.23-.7z"
+                                                fill-rule="evenodd"
+                                              />
+                                            </svg>
+                                          </span>
+                                          <span
+                                            class="bp3-button-text"
+                                          >
+                                            Dark
+                                          </span>
+                                        </button>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="row middle-xs between-xs"
+                                >
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="makeStyles-oneSettingRow-138 row middle-xs"
+                                    >
+                                      <div
+                                        class=""
+                                      >
+                                        <span
+                                          class="bp3-icon bp3-icon-translate makeStyles-settingRowIcon-141"
+                                          icon="translate"
+                                        >
+                                          <svg
+                                            data-icon="translate"
+                                            height="25"
+                                            viewBox="0 0 20 20"
+                                            width="25"
+                                          >
+                                            <desc>
+                                              translate
+                                            </desc>
+                                            <path
+                                              d="M19.89 18.56l-4.99-10h-.01c-.17-.33-.5-.56-.89-.56s-.72.23-.89.56h-.01l-1.73 3.46-2.8-2.3 1.99-1.64C11.44 7.34 12 6.23 12 5V4h1c.55 0 1-.45 1-1s-.45-1-1-1H8V1c0-.55-.45-1-1-1S6 .45 6 1v1H1c-.55 0-1 .45-1 1s.45 1 1 1h9v1c0 .62-.28 1.18-.73 1.54L7 8.42 4.73 6.54C4.28 6.18 4 5.62 4 5H2c0 1.23.56 2.34 1.44 3.07l1.99 1.64-3.06 2.52.01.01c-.23.18-.38.45-.38.76 0 .55.45 1 1 1 .24 0 .45-.1.63-.24l.01.01L7 11l3.36 2.77.01-.01c.02.02.05.03.08.05.01 0 .01.01.02.02l-2.36 4.73h.01c-.07.13-.12.28-.12.44 0 .55.45 1 1 1 .39 0 .72-.23.89-.56h.01L11.12 17h5.76l1.22 2.45h.01c.17.32.5.55.89.55.55 0 1-.45 1-1 0-.16-.05-.31-.11-.44zM12.12 15L14 11.24 15.88 15h-3.76z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class=""
+                                        >
+                                          Language
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="row"
+                                    >
+                                      <div
+                                        class="bp3-html-select"
+                                      >
+                                        <select>
+                                          <option
+                                            value="English"
+                                          >
+                                            English
+                                          </option>
+                                          <option
+                                            value="Русский"
+                                          >
+                                            Русский
+                                          </option>
+                                          <option
+                                            value="Українська"
+                                          >
+                                            Українська
+                                          </option>
+                                        </select>
+                                        <span
+                                          class="bp3-icon bp3-icon-double-caret-vertical"
+                                          icon="double-caret-vertical"
+                                        >
+                                          <svg
+                                            data-icon="double-caret-vertical"
+                                            height="16"
+                                            viewBox="0 0 16 16"
+                                            width="16"
+                                          >
+                                            <desc>
+                                              double-caret-vertical
+                                            </desc>
+                                            <path
+                                              d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                                <div
+                                  class="row middle-xs between-xs"
+                                >
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="makeStyles-oneSettingRow-142 row middle-xs"
+                                    >
+                                      <div
+                                        class=""
+                                      >
+                                        <span
+                                          class="bp3-icon bp3-icon-automatic-updates makeStyles-settingRowIcon-145"
+                                          icon="automatic-updates"
+                                        >
+                                          <svg
+                                            data-icon="automatic-updates"
+                                            height="25"
+                                            viewBox="0 0 20 20"
+                                            width="25"
+                                          >
+                                            <desc>
+                                              automatic-updates
+                                            </desc>
+                                            <path
+                                              d="M10 18c-4.42 0-8-3.58-8-8 0-2.52 1.18-4.76 3-6.22V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h2.06C1.61 3.82 0 6.71 0 10c0 5.52 4.48 10 10 10 .55 0 1-.45 1-1s-.45-1-1-1zm0-16c1.64 0 3.15.49 4.42 1.34l1.43-1.43A9.869 9.869 0 0010 0c-.55 0-1 .45-1 1s.45 1 1 1zm10 8c0-1.13-.2-2.21-.54-3.22L17.84 8.4A7.962 7.962 0 0115 16.22V15c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-2.06c2.45-1.82 4.06-4.71 4.06-8zm0-7a1.003 1.003 0 00-1.71-.71L12 8.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7c.18-.18.29-.43.29-.71z"
+                                              fill-rule="evenodd"
+                                            />
+                                          </svg>
+                                        </span>
+                                      </div>
+                                      <div
+                                        class=""
+                                      >
+                                        <div
+                                          class=""
+                                        >
+                                          Automatic Updates
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                  <div
+                                    class="col-xs-6"
+                                  >
+                                    <div
+                                      class="row"
+                                    >
+                                      <label
+                                        class="bp3-control bp3-checkbox makeStyles-checkboxSettings-128"
+                                      >
+                                        <input
+                                          checked=""
+                                          type="checkbox"
+                                        />
+                                        <span
+                                          class="bp3-control-indicator"
+                                        />
+                                        Enabled
+                                      </label>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  }
+                >
+                  <TransitionGroup
+                    appear={true}
+                    childFactory={[Function]}
+                    className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
+                    component="div"
+                    onKeyDown={[Function]}
+                  >
+                    <div
+                      className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container bp3-overlay-settings"
+                      onKeyDown={[Function]}
+                    >
+                      <CSSTransition
+                        appear={true}
+                        classNames="bp3-overlay"
+                        in={true}
+                        key=".$__backdrop"
+                        onExited={[Function]}
+                        timeout={0}
+                      >
+                        <Transition
+                          appear={true}
+                          enter={true}
+                          exit={true}
+                          in={true}
+                          mountOnEnter={false}
+                          onEnter={[Function]}
+                          onEntered={[Function]}
+                          onEntering={[Function]}
+                          onExit={[Function]}
+                          onExited={[Function]}
+                          onExiting={[Function]}
+                          timeout={0}
+                          unmountOnExit={false}
+                        >
+                          <div
+                            className="bp3-overlay-backdrop"
+                            onMouseDown={[Function]}
+                            tabIndex={0}
+                          />
+                        </Transition>
+                      </CSSTransition>
+                      <CSSTransition
+                        appear={true}
+                        classNames="bp3-overlay"
+                        in={true}
+                        key=".$.0"
+                        onExited={[Function]}
+                        timeout={0}
+                      >
+                        <Transition
+                          appear={true}
+                          enter={true}
+                          exit={true}
+                          in={true}
+                          mountOnEnter={false}
+                          onEnter={[Function]}
+                          onEntered={[Function]}
+                          onEntering={[Function]}
+                          onExit={[Function]}
+                          onExited={[Function]}
+                          onExiting={[Function]}
+                          timeout={0}
+                          unmountOnExit={false}
+                        >
+                          <div
+                            className="makeStyles-overlayInnerRoot-56 bp3-overlay-content"
+                            tabIndex={0}
+                          >
+                            <Fade
+                              duration={0}
+                            >
+                              <RevealBase
+                                fraction={0.2}
+                                inEffect={
+                                  Object {
+                                    "count": 1,
+                                    "delay": 0,
+                                    "duration": 0,
+                                    "forever": undefined,
+                                    "make": [Function],
+                                    "reverse": undefined,
+                                    "style": Object {
+                                      "animationFillMode": "both",
+                                    },
+                                  }
+                                }
+                                outEffect={
+                                  Object {
+                                    "count": 1,
+                                    "delay": 0,
+                                    "duration": 0,
+                                    "forever": undefined,
+                                    "make": [Function],
+                                    "reverse": undefined,
+                                    "style": Object {
+                                      "animationFillMode": "both",
+                                    },
+                                  }
+                                }
+                                refProp="ref"
+                              >
+                                <div
+                                  className="react-reveal makeStyles-overlayInsideFade-63 bp3-card"
+                                  id="settings-overlay-inner"
+                                  style={
+                                    Object {
+                                      "opacity": undefined,
+                                    }
+                                  }
+                                >
+                                  <CloseOverlayButton
+                                    className="makeStyles-absoluteCloseButton-70"
+                                    onClick={[Function]}
+                                  >
+                                    <Blueprint3.Button
+                                      className="makeStyles-closeButton-109 makeStyles-absoluteCloseButton-70"
+                                      id="close-overlay-button"
+                                      onClick={[Function]}
+                                    >
+                                      <button
+                                        className="bp3-button makeStyles-closeButton-109 makeStyles-absoluteCloseButton-70"
+                                        id="close-overlay-button"
+                                        onClick={[Function]}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        type="button"
+                                      >
+                                        <Blueprint3.Icon
+                                          key="leftIcon"
+                                        />
+                                        <span
+                                          className="bp3-button-text"
+                                          key="text"
+                                        >
+                                          <Blueprint3.Icon
+                                            icon="cross"
+                                            iconSize={30}
+                                          >
+                                            <span
+                                              className="bp3-icon bp3-icon-cross"
+                                              icon="cross"
+                                            >
+                                              <svg
+                                                data-icon="cross"
+                                                height={30}
+                                                viewBox="0 0 20 20"
+                                                width={30}
+                                              >
+                                                <desc>
+                                                  cross
+                                                </desc>
+                                                <path
+                                                  d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                                  fillRule="evenodd"
+                                                  key="0"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </Blueprint3.Icon>
+                                        </span>
+                                        <Blueprint3.Icon
+                                          key="rightIcon"
+                                        />
+                                      </button>
+                                    </Blueprint3.Button>
+                                  </CloseOverlayButton>
+                                  <Blueprint3.Tabs
+                                    animate={true}
+                                    id="TabsExample"
+                                    key="vertical"
+                                    large={false}
+                                    renderActiveTabPanelOnly={true}
+                                    vertical={true}
+                                  >
+                                    <div
+                                      className="bp3-tabs bp3-vertical"
+                                    >
+                                      <div
+                                        className="bp3-tab-list"
+                                        onKeyDown={[Function]}
+                                        onKeyPress={[Function]}
+                                        role="tablist"
+                                      >
+                                        <div
+                                          className="bp3-tab-indicator-wrapper"
+                                          style={
+                                            Object {
+                                              "height": 0,
+                                              "transform": "translateX(0px) translateY(0px)",
+                                              "transition": "none",
+                                              "width": 0,
+                                            }
+                                          }
+                                        >
+                                          <div
+                                            className="bp3-tab-indicator"
+                                          />
+                                        </div>
+                                        <Blueprint3.TabTitle
+                                          disabled={false}
+                                          id="rx"
+                                          key=".0"
+                                          onClick={[Function]}
+                                          panel={<GeneralSettingsPanel />}
+                                          parentId="TabsExample"
+                                          selected={true}
+                                          title=""
+                                        >
+                                          <div
+                                            aria-controls="bp3-tab-panel_TabsExample_rx"
+                                            aria-disabled={false}
+                                            aria-expanded={true}
+                                            aria-selected={true}
+                                            className="bp3-tab"
+                                            data-tab-id="rx"
+                                            id="bp3-tab-title_TabsExample_rx"
+                                            onClick={[Function]}
+                                            role="tab"
+                                            tabIndex={0}
+                                          >
+                                            <Row
+                                              className="makeStyles-tabNavigationRowButton-77"
+                                              middle="xs"
+                                            >
+                                              <div
+                                                className="makeStyles-tabNavigationRowButton-77 row middle-xs"
+                                              >
+                                                <Blueprint3.Icon
+                                                  className="makeStyles-iconInTablLeftButton-84"
+                                                  icon="wrench"
+                                                >
+                                                  <span
+                                                    className="bp3-icon bp3-icon-wrench makeStyles-iconInTablLeftButton-84"
+                                                    icon="wrench"
+                                                  >
+                                                    <svg
+                                                      data-icon="wrench"
+                                                      height={16}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                    >
+                                                      <desc>
+                                                        wrench
+                                                      </desc>
+                                                      <path
+                                                        d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
+                                                        fillRule="evenodd"
+                                                        key="0"
+                                                      />
+                                                    </svg>
+                                                  </span>
+                                                </Blueprint3.Icon>
+                                                <Blueprint3.Text
+                                                  className="bp3-text-large"
+                                                >
+                                                  <div
+                                                    className="bp3-text-large"
+                                                  >
+                                                    General
+                                                  </div>
+                                                </Blueprint3.Text>
+                                              </div>
+                                            </Row>
+                                          </div>
+                                        </Blueprint3.TabTitle>
+                                        <Blueprint3.TabTitle
+                                          disabled={false}
+                                          id="ng"
+                                          key=".1"
+                                          onClick={[Function]}
+                                          panel={<SecurityPanel />}
+                                          parentId="TabsExample"
+                                          selected={false}
+                                          title=""
+                                        >
+                                          <div
+                                            aria-controls="bp3-tab-panel_TabsExample_ng"
+                                            aria-disabled={false}
+                                            aria-expanded={false}
+                                            aria-selected={false}
+                                            className="bp3-tab"
+                                            data-tab-id="ng"
+                                            id="bp3-tab-title_TabsExample_ng"
+                                            onClick={[Function]}
+                                            role="tab"
+                                            tabIndex={0}
+                                          >
+                                            <Row
+                                              className="makeStyles-tabNavigationRowButton-89"
+                                              middle="xs"
+                                            >
+                                              <div
+                                                className="makeStyles-tabNavigationRowButton-89 row middle-xs"
+                                              >
+                                                <Blueprint3.Icon
+                                                  className="makeStyles-iconInTablLeftButton-96"
+                                                  icon="shield"
+                                                >
+                                                  <span
+                                                    className="bp3-icon bp3-icon-shield makeStyles-iconInTablLeftButton-96"
+                                                    icon="shield"
+                                                  >
+                                                    <svg
+                                                      data-icon="shield"
+                                                      height={16}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                    >
+                                                      <desc>
+                                                        shield
+                                                      </desc>
+                                                      <path
+                                                        d="M8 16c4.667-3.048 7-7.238 7-12.571-1.556 0-3.889-1.143-7-3.429-3.111 2.286-5.444 3.429-7 3.429C1 8.762 3.333 12.952 8 16zM8 2.121c2.005 1.388 3.715 2.304 5.186 2.735-.342 3.702-2.05 6.683-5.186 9.038V2.121z"
+                                                        fillRule="evenodd"
+                                                        key="0"
+                                                      />
+                                                    </svg>
+                                                  </span>
+                                                </Blueprint3.Icon>
+                                                <Blueprint3.Text
+                                                  className="bp3-text-large"
+                                                >
+                                                  <div
+                                                    className="bp3-text-large"
+                                                  >
+                                                    Security
+                                                  </div>
+                                                </Blueprint3.Text>
+                                              </div>
+                                            </Row>
+                                          </div>
+                                        </Blueprint3.TabTitle>
+                                        <Blueprint3.TabTitle
+                                          disabled={true}
+                                          id="bb"
+                                          key=".2"
+                                          onClick={[Function]}
+                                          panel={<BlockedIPsPanel />}
+                                          parentId="TabsExample"
+                                          selected={false}
+                                          title=""
+                                        >
+                                          <div
+                                            aria-controls="bp3-tab-panel_TabsExample_bb"
+                                            aria-disabled={true}
+                                            aria-expanded={false}
+                                            aria-selected={false}
+                                            className="bp3-tab"
+                                            data-tab-id="bb"
+                                            id="bp3-tab-title_TabsExample_bb"
+                                            role="tab"
+                                          >
+                                            <Row
+                                              className="makeStyles-tabNavigationRowButton-101"
+                                              middle="xs"
+                                            >
+                                              <div
+                                                className="makeStyles-tabNavigationRowButton-101 row middle-xs"
+                                              >
+                                                <Blueprint3.Icon
+                                                  className="makeStyles-iconInTablLeftButton-108"
+                                                  icon="blocked-person"
+                                                >
+                                                  <span
+                                                    className="bp3-icon bp3-icon-blocked-person makeStyles-iconInTablLeftButton-108"
+                                                    icon="blocked-person"
+                                                  >
+                                                    <svg
+                                                      data-icon="blocked-person"
+                                                      height={16}
+                                                      viewBox="0 0 16 16"
+                                                      width={16}
+                                                    >
+                                                      <desc>
+                                                        blocked-person
+                                                      </desc>
+                                                      <path
+                                                        d="M9.39 12.69c-1.2-.53-1.04-.85-1.08-1.29-.01-.07-.01-.13-.02-.2.41-.37.75-.87.97-1.44 0 0 .01-.03.01-.04.05-.13.09-.26.13-.39.27-.06.43-.36.5-.63.01-.03.03-.08.05-.12C8.18 7.8 6.94 6.04 6.94 4c0-.32.04-.62.09-.92-.17-.03-.35-.08-.51-.08-.65 0-1.37.2-1.88.59-.5.38-.87.92-1.05 1.51-.04.14-.07.27-.09.41-.09.48-.14 1.23-.14 1.74v.06c-.19.08-.36.27-.4.68-.03.31.1.59.16.7.06.28.23.59.51.64.04.14.08.27.13.39 0 .01.01.02.01.02v.01c.22.59.57 1.1.99 1.46 0 .06-.01.12-.01.17-.04.44.08.76-1.12 1.29-1.2.53-3.01 1.1-3.38 1.95C-.12 15.5.03 16 .03 16h12.96s.15-.5-.22-1.36c-.37-.85-2.18-1.42-3.38-1.95zM11.97 0C9.75 0 7.94 1.79 7.94 4s1.8 4 4.03 4S16 6.21 16 4s-1.8-4-4.03-4zM9.96 4c0-1.1.9-2 2.01-2 .37 0 .72.11 1.02.28l-2.75 2.73c-.17-.3-.28-.64-.28-1.01zm2.01 2c-.37 0-.72-.11-1.02-.28l2.75-2.73c.18.3.28.64.28 1.01.01 1.1-.9 2-2.01 2z"
+                                                        fillRule="evenodd"
+                                                        key="0"
+                                                      />
+                                                    </svg>
+                                                  </span>
+                                                </Blueprint3.Icon>
+                                                <Blueprint3.Text
+                                                  className="bp3-text-large"
+                                                >
+                                                  <div
+                                                    className="bp3-text-large"
+                                                  >
+                                                    Blackilsted IPs
+                                                  </div>
+                                                </Blueprint3.Text>
+                                              </div>
+                                            </Row>
+                                          </div>
+                                        </Blueprint3.TabTitle>
+                                        <Component
+                                          key=".3"
+                                        >
+                                          <div
+                                            className="bp3-flex-expander"
+                                          />
+                                        </Component>
+                                      </div>
+                                      <div
+                                        aria-hidden={false}
+                                        aria-labelledby="bp3-tab-title_TabsExample_rx"
+                                        className="bp3-tab-panel"
+                                        id="bp3-tab-panel_TabsExample_rx"
+                                        key="rx"
+                                        role="tabpanel"
+                                      >
+                                        <GeneralSettingsPanel>
+                                          <Row
+                                            middle="xs"
+                                          >
+                                            <div
+                                              className="row middle-xs"
+                                            >
+                                              <Component
+                                                className="bp3-text-muted"
+                                              >
+                                                <h3
+                                                  className="bp3-heading bp3-text-muted"
+                                                >
+                                                  General Settings
+                                                </h3>
+                                              </Component>
+                                            </div>
+                                          </Row>
+                                          <SettingRowLabelAndInput
+                                            icon="style"
+                                            input={
+                                              <Blueprint3.ControlGroup
+                                                fill={true}
+                                                vertical={false}
+                                              >
+                                                <Blueprint3.Button
+                                                  active={true}
+                                                  icon="flash"
+                                                  onClick={[Function]}
+                                                  text="Light"
+                                                />
+                                                <Blueprint3.Button
+                                                  active={false}
+                                                  icon="moon"
+                                                  onClick={[Function]}
+                                                  text="Dark"
+                                                />
+                                              </Blueprint3.ControlGroup>
+                                            }
+                                            label="Colors"
+                                          >
+                                            <Row
+                                              between="xs"
+                                              middle="xs"
+                                            >
+                                              <div
+                                                className="row middle-xs between-xs"
+                                              >
+                                                <Col
+                                                  xs={6}
+                                                >
+                                                  <div
+                                                    className="col-xs-6"
+                                                  >
+                                                    <Row
+                                                      className="makeStyles-oneSettingRow-134"
+                                                      middle="xs"
+                                                    >
+                                                      <div
+                                                        className="makeStyles-oneSettingRow-134 row middle-xs"
+                                                      >
+                                                        <Col>
+                                                          <div
+                                                            className=""
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              className="makeStyles-settingRowIcon-137"
+                                                              icon="style"
+                                                              iconSize={25}
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-style makeStyles-settingRowIcon-137"
+                                                                icon="style"
+                                                              >
+                                                                <svg
+                                                                  data-icon="style"
+                                                                  height={25}
+                                                                  viewBox="0 0 20 20"
+                                                                  width={25}
+                                                                >
+                                                                  <desc>
+                                                                    style
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M18 18H2V2h12.3l2-2H1C.4 0 0 .4 0 1v18c0 .6.4 1 1 1h18c.6 0 1-.4 1-1V7.7l-2 2V18zm1.2-18l-7.6 7.6 2.8 2.8L20 4.8V0h-.8zM4 15.9c3.1.2 5.9.2 8.2-2 1.1-1.1 1.1-3 0-4.1-.6-.5-1.3-.8-2-.8s-1.4.3-1.9.8C7.2 11 6.6 14.3 4 15.9z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </Col>
+                                                        <Col>
+                                                          <div
+                                                            className=""
+                                                          >
+                                                            <Blueprint3.Text>
+                                                              <div
+                                                                className=""
+                                                              >
+                                                                Colors
+                                                              </div>
+                                                            </Blueprint3.Text>
+                                                          </div>
+                                                        </Col>
+                                                      </div>
+                                                    </Row>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  xs={6}
+                                                >
+                                                  <div
+                                                    className="col-xs-6"
+                                                  >
+                                                    <Row>
+                                                      <div
+                                                        className="row"
+                                                      >
+                                                        <Blueprint3.ControlGroup
+                                                          fill={true}
+                                                          vertical={false}
+                                                        >
+                                                          <div
+                                                            className="bp3-control-group bp3-fill"
+                                                          >
+                                                            <Blueprint3.Button
+                                                              active={true}
+                                                              icon="flash"
+                                                              onClick={[Function]}
+                                                              text="Light"
+                                                            >
+                                                              <button
+                                                                className="bp3-button bp3-active"
+                                                                onClick={[Function]}
+                                                                onKeyDown={[Function]}
+                                                                onKeyUp={[Function]}
+                                                                type="button"
+                                                              >
+                                                                <Blueprint3.Icon
+                                                                  icon="flash"
+                                                                  key="leftIcon"
+                                                                >
+                                                                  <span
+                                                                    className="bp3-icon bp3-icon-flash"
+                                                                    icon="flash"
+                                                                  >
+                                                                    <svg
+                                                                      data-icon="flash"
+                                                                      height={16}
+                                                                      viewBox="0 0 16 16"
+                                                                      width={16}
+                                                                    >
+                                                                      <desc>
+                                                                        flash
+                                                                      </desc>
+                                                                      <path
+                                                                        d="M4 8c0-.55-.45-1-1-1H1c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1zm4-4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1S7 .45 7 1v2c0 .55.45 1 1 1zM3.79 5.21a1.003 1.003 0 001.42-1.42l-1.5-1.5a1.003 1.003 0 00-1.42 1.42l1.5 1.5zm.71 5.29c-.28 0-.53.11-.71.29l-1.5 1.5a1.003 1.003 0 001.42 1.42l1.5-1.5a1.003 1.003 0 00-.71-1.71zm7-5c.28 0 .53-.11.71-.29l1.5-1.5a1.003 1.003 0 00-1.42-1.42l-1.5 1.5a1.003 1.003 0 00.71 1.71zm.71 5.29a1.003 1.003 0 00-1.42 1.42l1.5 1.5a1.003 1.003 0 001.42-1.42l-1.5-1.5zM15 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h2c.55 0 1-.45 1-1s-.45-1-1-1zM8 5C6.34 5 5 6.34 5 8s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3zm0 4c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm0 3c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1z"
+                                                                        fillRule="evenodd"
+                                                                        key="0"
+                                                                      />
+                                                                    </svg>
+                                                                  </span>
+                                                                </Blueprint3.Icon>
+                                                                <span
+                                                                  className="bp3-button-text"
+                                                                  key="text"
+                                                                >
+                                                                  Light
+                                                                </span>
+                                                                <Blueprint3.Icon
+                                                                  key="rightIcon"
+                                                                />
+                                                              </button>
+                                                            </Blueprint3.Button>
+                                                            <Blueprint3.Button
+                                                              active={false}
+                                                              icon="moon"
+                                                              onClick={[Function]}
+                                                              text="Dark"
+                                                            >
+                                                              <button
+                                                                className="bp3-button"
+                                                                onClick={[Function]}
+                                                                onKeyDown={[Function]}
+                                                                onKeyUp={[Function]}
+                                                                type="button"
+                                                              >
+                                                                <Blueprint3.Icon
+                                                                  icon="moon"
+                                                                  key="leftIcon"
+                                                                >
+                                                                  <span
+                                                                    className="bp3-icon bp3-icon-moon"
+                                                                    icon="moon"
+                                                                  >
+                                                                    <svg
+                                                                      data-icon="moon"
+                                                                      height={16}
+                                                                      viewBox="0 0 16 16"
+                                                                      width={16}
+                                                                    >
+                                                                      <desc>
+                                                                        moon
+                                                                      </desc>
+                                                                      <path
+                                                                        d="M15 11.38A7.835 7.835 0 017.85 16C3.51 16 0 12.49 0 8.15 0 4.97 1.89 2.23 4.62 1c-.45.99-.7 2.08-.7 3.23a7.85 7.85 0 007.85 7.85c1.15 0 2.24-.25 3.23-.7z"
+                                                                        fillRule="evenodd"
+                                                                        key="0"
+                                                                      />
+                                                                    </svg>
+                                                                  </span>
+                                                                </Blueprint3.Icon>
+                                                                <span
+                                                                  className="bp3-button-text"
+                                                                  key="text"
+                                                                >
+                                                                  Dark
+                                                                </span>
+                                                                <Blueprint3.Icon
+                                                                  key="rightIcon"
+                                                                />
+                                                              </button>
+                                                            </Blueprint3.Button>
+                                                          </div>
+                                                        </Blueprint3.ControlGroup>
+                                                      </div>
+                                                    </Row>
+                                                  </div>
+                                                </Col>
+                                              </div>
+                                            </Row>
+                                          </SettingRowLabelAndInput>
+                                          <SettingRowLabelAndInput
+                                            icon="translate"
+                                            input={
+                                              <HTMLSelect
+                                                onChange={[Function]}
+                                                options={
+                                                  Array [
+                                                    "English",
+                                                    "Русский",
+                                                    "Українська",
+                                                  ]
+                                                }
+                                              />
+                                            }
+                                            label="Language"
+                                          >
+                                            <Row
+                                              between="xs"
+                                              middle="xs"
+                                            >
+                                              <div
+                                                className="row middle-xs between-xs"
+                                              >
+                                                <Col
+                                                  xs={6}
+                                                >
+                                                  <div
+                                                    className="col-xs-6"
+                                                  >
+                                                    <Row
+                                                      className="makeStyles-oneSettingRow-138"
+                                                      middle="xs"
+                                                    >
+                                                      <div
+                                                        className="makeStyles-oneSettingRow-138 row middle-xs"
+                                                      >
+                                                        <Col>
+                                                          <div
+                                                            className=""
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              className="makeStyles-settingRowIcon-141"
+                                                              icon="translate"
+                                                              iconSize={25}
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-translate makeStyles-settingRowIcon-141"
+                                                                icon="translate"
+                                                              >
+                                                                <svg
+                                                                  data-icon="translate"
+                                                                  height={25}
+                                                                  viewBox="0 0 20 20"
+                                                                  width={25}
+                                                                >
+                                                                  <desc>
+                                                                    translate
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M19.89 18.56l-4.99-10h-.01c-.17-.33-.5-.56-.89-.56s-.72.23-.89.56h-.01l-1.73 3.46-2.8-2.3 1.99-1.64C11.44 7.34 12 6.23 12 5V4h1c.55 0 1-.45 1-1s-.45-1-1-1H8V1c0-.55-.45-1-1-1S6 .45 6 1v1H1c-.55 0-1 .45-1 1s.45 1 1 1h9v1c0 .62-.28 1.18-.73 1.54L7 8.42 4.73 6.54C4.28 6.18 4 5.62 4 5H2c0 1.23.56 2.34 1.44 3.07l1.99 1.64-3.06 2.52.01.01c-.23.18-.38.45-.38.76 0 .55.45 1 1 1 .24 0 .45-.1.63-.24l.01.01L7 11l3.36 2.77.01-.01c.02.02.05.03.08.05.01 0 .01.01.02.02l-2.36 4.73h.01c-.07.13-.12.28-.12.44 0 .55.45 1 1 1 .39 0 .72-.23.89-.56h.01L11.12 17h5.76l1.22 2.45h.01c.17.32.5.55.89.55.55 0 1-.45 1-1 0-.16-.05-.31-.11-.44zM12.12 15L14 11.24 15.88 15h-3.76z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </Col>
+                                                        <Col>
+                                                          <div
+                                                            className=""
+                                                          >
+                                                            <Blueprint3.Text>
+                                                              <div
+                                                                className=""
+                                                              >
+                                                                Language
+                                                              </div>
+                                                            </Blueprint3.Text>
+                                                          </div>
+                                                        </Col>
+                                                      </div>
+                                                    </Row>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  xs={6}
+                                                >
+                                                  <div
+                                                    className="col-xs-6"
+                                                  >
+                                                    <Row>
+                                                      <div
+                                                        className="row"
+                                                      >
+                                                        <HTMLSelect
+                                                          onChange={[Function]}
+                                                          options={
+                                                            Array [
+                                                              "English",
+                                                              "Русский",
+                                                              "Українська",
+                                                            ]
+                                                          }
+                                                        >
+                                                          <div
+                                                            className="bp3-html-select"
+                                                          >
+                                                            <select
+                                                              multiple={false}
+                                                              onChange={[Function]}
+                                                            >
+                                                              <option
+                                                                key="English"
+                                                                value="English"
+                                                              >
+                                                                English
+                                                              </option>
+                                                              <option
+                                                                key="Русский"
+                                                                value="Русский"
+                                                              >
+                                                                Русский
+                                                              </option>
+                                                              <option
+                                                                key="Українська"
+                                                                value="Українська"
+                                                              >
+                                                                Українська
+                                                              </option>
+                                                            </select>
+                                                            <Blueprint3.Icon
+                                                              icon="double-caret-vertical"
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-double-caret-vertical"
+                                                                icon="double-caret-vertical"
+                                                              >
+                                                                <svg
+                                                                  data-icon="double-caret-vertical"
+                                                                  height={16}
+                                                                  viewBox="0 0 16 16"
+                                                                  width={16}
+                                                                >
+                                                                  <desc>
+                                                                    double-caret-vertical
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </HTMLSelect>
+                                                      </div>
+                                                    </Row>
+                                                  </div>
+                                                </Col>
+                                              </div>
+                                            </Row>
+                                          </SettingRowLabelAndInput>
+                                          <SettingRowLabelAndInput
+                                            icon="automatic-updates"
+                                            input={
+                                              <Blueprint3.Checkbox
+                                                checked={true}
+                                                className="makeStyles-checkboxSettings-128"
+                                                label="Enabled"
+                                              />
+                                            }
+                                            label="Automatic Updates"
+                                          >
+                                            <Row
+                                              between="xs"
+                                              middle="xs"
+                                            >
+                                              <div
+                                                className="row middle-xs between-xs"
+                                              >
+                                                <Col
+                                                  xs={6}
+                                                >
+                                                  <div
+                                                    className="col-xs-6"
+                                                  >
+                                                    <Row
+                                                      className="makeStyles-oneSettingRow-142"
+                                                      middle="xs"
+                                                    >
+                                                      <div
+                                                        className="makeStyles-oneSettingRow-142 row middle-xs"
+                                                      >
+                                                        <Col>
+                                                          <div
+                                                            className=""
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              className="makeStyles-settingRowIcon-145"
+                                                              icon="automatic-updates"
+                                                              iconSize={25}
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-automatic-updates makeStyles-settingRowIcon-145"
+                                                                icon="automatic-updates"
+                                                              >
+                                                                <svg
+                                                                  data-icon="automatic-updates"
+                                                                  height={25}
+                                                                  viewBox="0 0 20 20"
+                                                                  width={25}
+                                                                >
+                                                                  <desc>
+                                                                    automatic-updates
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M10 18c-4.42 0-8-3.58-8-8 0-2.52 1.18-4.76 3-6.22V5c0 .55.45 1 1 1s1-.45 1-1V1c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1h2.06C1.61 3.82 0 6.71 0 10c0 5.52 4.48 10 10 10 .55 0 1-.45 1-1s-.45-1-1-1zm0-16c1.64 0 3.15.49 4.42 1.34l1.43-1.43A9.869 9.869 0 0010 0c-.55 0-1 .45-1 1s.45 1 1 1zm10 8c0-1.13-.2-2.21-.54-3.22L17.84 8.4A7.962 7.962 0 0115 16.22V15c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .55.45 1 1 1h4c.55 0 1-.45 1-1s-.45-1-1-1h-2.06c2.45-1.82 4.06-4.71 4.06-8zm0-7a1.003 1.003 0 00-1.71-.71L12 8.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7c.18-.18.29-.43.29-.71z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </Col>
+                                                        <Col>
+                                                          <div
+                                                            className=""
+                                                          >
+                                                            <Blueprint3.Text>
+                                                              <div
+                                                                className=""
+                                                              >
+                                                                Automatic Updates
+                                                              </div>
+                                                            </Blueprint3.Text>
+                                                          </div>
+                                                        </Col>
+                                                      </div>
+                                                    </Row>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  xs={6}
+                                                >
+                                                  <div
+                                                    className="col-xs-6"
+                                                  >
+                                                    <Row>
+                                                      <div
+                                                        className="row"
+                                                      >
+                                                        <Blueprint3.Checkbox
+                                                          checked={true}
+                                                          className="makeStyles-checkboxSettings-128"
+                                                          label="Enabled"
+                                                        >
+                                                          <Control
+                                                            checked={true}
+                                                            className="makeStyles-checkboxSettings-128"
+                                                            inputRef={[Function]}
+                                                            label="Enabled"
+                                                            onChange={[Function]}
+                                                            type="checkbox"
+                                                            typeClassName="bp3-checkbox"
+                                                          >
+                                                            <label
+                                                              className="bp3-control bp3-checkbox makeStyles-checkboxSettings-128"
+                                                            >
+                                                              <input
+                                                                checked={true}
+                                                                onChange={[Function]}
+                                                                type="checkbox"
+                                                              />
+                                                              <span
+                                                                className="bp3-control-indicator"
+                                                              />
+                                                              Enabled
+                                                            </label>
+                                                          </Control>
+                                                        </Blueprint3.Checkbox>
+                                                      </div>
+                                                    </Row>
+                                                  </div>
+                                                </Col>
+                                              </div>
+                                            </Row>
+                                          </SettingRowLabelAndInput>
+                                        </GeneralSettingsPanel>
+                                      </div>
+                                    </div>
+                                  </Blueprint3.Tabs>
+                                </div>
+                              </RevealBase>
+                            </Fade>
+                          </div>
+                        </Transition>
+                      </CSSTransition>
+                    </div>
+                  </TransitionGroup>
+                </Portal>
+              </Blueprint3.Portal>
+            </Blueprint3.Overlay>
+          </SettingsOverlay>
+        </Router>
+      </BrowserRouter>
+    </ConnectedDevicesProvider>
+  </SettingsProvider>
+</Suspense>
+`;
diff --git a/app/components/ShareAppOrScreenControlGroup.spec.tsx b/app/components/ShareAppOrScreenControlGroup.spec.tsx
new file mode 100644
index 0000000..ff5d9db
--- /dev/null
+++ b/app/components/ShareAppOrScreenControlGroup.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ShareAppOrScreenControlGroup from './ShareAppOrScreenControlGroup';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <ShareAppOrScreenControlGroup
+          handleNextEntireScreen={() => {}}
+          handleNextApplicationWindow={() => {}}
+        />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/ShareAppOrScreenControlGroup.tsx b/app/components/ShareAppOrScreenControlGroup.tsx
new file mode 100644
index 0000000..a86c010
--- /dev/null
+++ b/app/components/ShareAppOrScreenControlGroup.tsx
@@ -0,0 +1,137 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable prefer-template */
+/* eslint-disable react/destructuring-assignment */
+import React, { useState, useCallback } from 'react';
+import { Button, Icon, ControlGroup, Text } from '@blueprintjs/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import ChooseAppOrScreenOverlay from './StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay';
+
+interface ShareEntireScreenOrAppWindowProps {
+  handleNextEntireScreen: () => void;
+  handleNextApplicationWindow: () => void;
+}
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    controlGroupRoot: {
+      width: '380px',
+      display: 'flex',
+      position: 'relative',
+      left: '20px',
+    },
+    shareEntireScreenButton: {
+      height: '180px',
+      width: '50%',
+      color: 'white',
+      fontSize: '20px',
+      borderRadius: '20px 0px 0px 20px !important',
+      textAlign: 'center',
+    },
+    shareEntireScreenButtonIcon: { marginBottom: '20px' },
+    shareAppButton: {
+      height: '180px',
+      width: '50%',
+      borderRadius: '0px 20px 20px 0px !important',
+      color: 'white',
+      fontSize: '20px',
+      textAlign: 'center',
+      backgroundColor: '#48AFF0 !important',
+      '&:hover': {
+        backgroundColor: '#4097ce !important',
+      },
+    },
+    shareAppButtonIcon: { marginBottom: '20px' },
+    orDecorationButton: {
+      height: '38px',
+      width: '40px',
+      borderRadius: '100px !important',
+      position: 'relative',
+      top: '72px',
+      left: '-190px !important',
+      // @ts-ignore: need to use !important, can't work without it
+      zIndex: '9999 !important',
+      cursor: 'default',
+    },
+  })
+);
+
+export default function ShareEntireScreenOrAppWindowControlGroup(
+  props: ShareEntireScreenOrAppWindowProps
+) {
+  const classes = useStyles();
+
+  const [
+    isChooseAppOrScreenOverlayOpen,
+    setChooseAppOrScreenOverlayOpen,
+  ] = useState(false);
+
+  const [isEntireScreenToShareChosen, setEntireScreenToShareChosen] = useState(
+    false
+  );
+
+  const handleOpenChooseAppOrScreenOverlay = useCallback(() => {
+    setChooseAppOrScreenOverlayOpen(true);
+  }, []);
+
+  const handleCloseChooseAppOrScreenOverlay = useCallback(() => {
+    setChooseAppOrScreenOverlayOpen(false);
+  }, []);
+
+  const handleChooseAppOverlayOpen = useCallback(() => {
+    setEntireScreenToShareChosen(false);
+    handleOpenChooseAppOrScreenOverlay();
+  }, [handleOpenChooseAppOrScreenOverlay]);
+
+  const handleChooseEntireScreenOverlayOpen = useCallback(() => {
+    setEntireScreenToShareChosen(true);
+    handleOpenChooseAppOrScreenOverlay();
+  }, [handleOpenChooseAppOrScreenOverlay]);
+
+  return (
+    <>
+      <ControlGroup
+        id="share-screen-or-app-btn-group"
+        className={classes.controlGroupRoot}
+        fill
+        vertical={false}
+      >
+        <Button
+          className={classes.shareEntireScreenButton}
+          intent="primary"
+          onClick={handleChooseEntireScreenOverlayOpen}
+        >
+          <Icon
+            className={classes.shareEntireScreenButtonIcon}
+            icon="desktop"
+            iconSize={100}
+            color="white"
+          />
+          <Text className="bp3-running-text">Entire Screen</Text>
+        </Button>
+        <Button
+          className={classes.shareAppButton}
+          intent="primary"
+          onClick={handleChooseAppOverlayOpen}
+        >
+          <Icon
+            className={classes.shareAppButtonIcon}
+            icon="application"
+            iconSize={100}
+            color="white"
+          />
+          <Text className="bp3-running-text">Application Window</Text>
+        </Button>
+        <Button active className={classes.orDecorationButton}>
+          OR
+        </Button>
+      </ControlGroup>
+      <ChooseAppOrScreenOverlay
+        isEntireScreenToShareChosen={isEntireScreenToShareChosen}
+        isChooseAppOrScreenOverlayOpen={isChooseAppOrScreenOverlayOpen}
+        handleClose={handleCloseChooseAppOrScreenOverlay}
+        handleNextEntireScreen={props.handleNextEntireScreen}
+        handleNextApplicationWindow={props.handleNextApplicationWindow}
+      />
+    </>
+  );
+}
diff --git a/app/components/StepperPanel/ColorlibConnector.tsx b/app/components/StepperPanel/ColorlibConnector.tsx
new file mode 100644
index 0000000..0471355
--- /dev/null
+++ b/app/components/StepperPanel/ColorlibConnector.tsx
@@ -0,0 +1,28 @@
+import { withStyles } from '@material-ui/core/styles';
+import StepConnector from '@material-ui/core/StepConnector';
+
+const ColorlibConnector = withStyles({
+  alternativeLabel: {
+    top: 43,
+  },
+  active: {
+    '& $line': {
+      backgroundImage:
+        'linear-gradient( 95deg, #3DCC91 0%, #15B371 50%, #FFB366 100%)',
+    },
+  },
+  completed: {
+    '& $line': {
+      backgroundImage:
+        'linear-gradient( 95deg, #3DCC91 0%, #15B371 50%, #3DCC91 100%)',
+    },
+  },
+  line: {
+    height: 2,
+    border: 0,
+    backgroundColor: '#CED9E0',
+    borderRadius: 1,
+  },
+})(StepConnector);
+
+export default ColorlibConnector;
diff --git a/app/components/StepperPanel/ColorlibStepIcon.tsx b/app/components/StepperPanel/ColorlibStepIcon.tsx
new file mode 100644
index 0000000..d3c258a
--- /dev/null
+++ b/app/components/StepperPanel/ColorlibStepIcon.tsx
@@ -0,0 +1,76 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable no-nested-ternary */
+import React from 'react';
+import clsx from 'clsx';
+import { makeStyles } from '@material-ui/core/styles';
+import { StepIconProps } from '@material-ui/core/StepIcon';
+import { Icon } from '@blueprintjs/core';
+
+export interface StepIconPropsDeskreen extends StepIconProps {
+  isEntireScreenSelected: boolean;
+  isApplicationWindowSelected: boolean;
+}
+
+const useColorlibStepIconStyles = makeStyles({
+  root: {
+    backgroundColor: '#BFCCD6',
+    zIndex: 1,
+    color: '#5C7080',
+    width: 65,
+    height: 65,
+    display: 'flex',
+    borderRadius: '50%',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  active: {
+    backgroundImage:
+      'linear-gradient( 136deg, #FFB366 0%, #F29D49 50%, #A66321 100%)',
+    boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
+  },
+  completed: {
+    backgroundImage:
+      'linear-gradient( 136deg, #3DCC91 0%, #15B371 50%, #0E5A8A 100%)',
+  },
+  stepContent: {},
+});
+
+export default function ColorlibStepIcon(props: StepIconPropsDeskreen) {
+  const classes = useColorlibStepIconStyles();
+  const { active, completed, isEntireScreenSelected } = props;
+
+  const color = active || completed ? '#fff' : '#5C7080';
+
+  const icons: { [index: string]: React.ReactElement } = {
+    1: completed ? (
+      <Icon icon="feed-subscribed" iconSize={25} color={color} />
+    ) : (
+      <Icon icon="feed" iconSize={25} color={color} />
+    ),
+    2: completed ? (
+      isEntireScreenSelected ? (
+        <Icon icon="desktop" iconSize={25} color={color} />
+      ) : (
+        <Icon icon="application" iconSize={25} color={color} />
+      )
+    ) : (
+      <Icon icon="flow-branch" iconSize={25} color={color} />
+    ),
+    3: completed ? (
+      <Icon icon="tick-circle" iconSize={25} color={color} />
+    ) : (
+      <Icon icon="confirm" iconSize={25} color={color} />
+    ),
+  };
+
+  return (
+    <div
+      className={`${clsx(classes.root, {
+        [classes.active]: active,
+        [classes.completed]: completed,
+      })} ${active ? 'active-stepper-pulse-icon' : ''}`}
+    >
+      {icons[String(props.icon)]}
+    </div>
+  );
+}
diff --git a/app/components/StepperPanel/DeviceConnectedInfoButton.spec.tsx b/app/components/StepperPanel/DeviceConnectedInfoButton.spec.tsx
new file mode 100644
index 0000000..45183e4
--- /dev/null
+++ b/app/components/StepperPanel/DeviceConnectedInfoButton.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import DeviceConnectedInfoButton from './DeviceConnectedInfoButton';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <DeviceConnectedInfoButton
+          device={{} as Device}
+          onDisconnect={() => {}}
+        />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/StepperPanel/DeviceConnectedInfoButton.tsx b/app/components/StepperPanel/DeviceConnectedInfoButton.tsx
new file mode 100644
index 0000000..872200f
--- /dev/null
+++ b/app/components/StepperPanel/DeviceConnectedInfoButton.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { Row, Col } from 'react-flexbox-grid';
+import { Icon, Text, Button, Popover, H6, Tooltip } from '@blueprintjs/core';
+import isProduction from '../../utils/isProduction';
+
+interface DeviceConnectedInfoButtonProps {
+  device: Device;
+  onDisconnect: () => void;
+}
+
+const getDeviceConnectedPopoverContent = (
+  pendingConnectionDevice: Device,
+  handleDisconnect: () => void
+) => {
+  return (
+    <Row>
+      <div style={{ padding: '20px', borderRadius: '100px' }}>
+        <Row style={{ marginBottom: '10px' }}>
+          <Col xs={12}>
+            <H6>Connected Device:</H6>
+            <Text>{`Type: ${pendingConnectionDevice?.deviceType}`}</Text>
+            <Text>{`OS: ${pendingConnectionDevice?.deviceOs}`}</Text>
+            <div id="connected-button-popover-div-with-ip">
+              <Text>{`IP: ${pendingConnectionDevice?.deviceIp}`}</Text>
+            </div>
+            <Text>{`SessionId: ${pendingConnectionDevice?.sessionId}`}</Text>
+          </Col>
+        </Row>
+        <Row>
+          <Col xs={12}>
+            <Button
+              intent="danger"
+              icon="disable"
+              onClick={() => {
+                handleDisconnect();
+              }}
+              style={{ width: '100%', borderRadius: '5px' }}
+            >
+              Disconnect
+            </Button>
+          </Col>
+        </Row>
+      </div>
+    </Row>
+  );
+};
+
+export default function DeviceConnectedInfoButton(
+  props: DeviceConnectedInfoButtonProps
+) {
+  const { device, onDisconnect } = props;
+
+  return (
+    <>
+      <Popover
+        content={getDeviceConnectedPopoverContent(device, onDisconnect)}
+        position="bottom"
+        inheritDarkTheme={false}
+        transitionDuration={isProduction() ? 700 : 0}
+      >
+        <Tooltip
+          content={<Text>Click to manage</Text>}
+          position="right"
+          hoverOpenDelay={400}
+        >
+          <Button
+            id="connected-device-info-stepper-button"
+            intent="success"
+            style={{
+              width: '120px',
+              height: '10px !important',
+              borderRadius: '100px',
+              position: 'relative',
+              margin: '0 auto',
+            }}
+          >
+            <Row>
+              <Col xs={1}>
+                <Icon icon="info-sign" />
+              </Col>
+              <Col xs>
+                <Text>Connected</Text>
+              </Col>
+            </Row>
+          </Button>
+        </Tooltip>
+      </Popover>
+    </>
+  );
+}
diff --git a/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap b/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap
new file mode 100644
index 0000000..c27580e
--- /dev/null
+++ b/app/components/StepperPanel/__snapshots__/DeviceConnectedInfoButton.spec.tsx.snap
@@ -0,0 +1,344 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <DeviceConnectedInfoButton
+      device={Object {}}
+      onDisconnect={[Function]}
+    >
+      <Blueprint3.Popover
+        boundary="scrollParent"
+        captureDismiss={false}
+        content={
+          <Row>
+            <div
+              style={
+                Object {
+                  "borderRadius": "100px",
+                  "padding": "20px",
+                }
+              }
+            >
+              <Row
+                style={
+                  Object {
+                    "marginBottom": "10px",
+                  }
+                }
+              >
+                <Col
+                  xs={12}
+                >
+                  <Unknown>
+                    Connected Device:
+                  </Unknown>
+                  <Blueprint3.Text>
+                    Type: undefined
+                  </Blueprint3.Text>
+                  <Blueprint3.Text>
+                    OS: undefined
+                  </Blueprint3.Text>
+                  <div
+                    id="connected-button-popover-div-with-ip"
+                  >
+                    <Blueprint3.Text>
+                      IP: undefined
+                    </Blueprint3.Text>
+                  </div>
+                  <Blueprint3.Text>
+                    SessionId: undefined
+                  </Blueprint3.Text>
+                </Col>
+              </Row>
+              <Row>
+                <Col
+                  xs={12}
+                >
+                  <Blueprint3.Button
+                    icon="disable"
+                    intent="danger"
+                    onClick={[Function]}
+                    style={
+                      Object {
+                        "borderRadius": "5px",
+                        "width": "100%",
+                      }
+                    }
+                  >
+                    Disconnect
+                  </Blueprint3.Button>
+                </Col>
+              </Row>
+            </div>
+          </Row>
+        }
+        defaultIsOpen={false}
+        disabled={false}
+        fill={false}
+        hasBackdrop={false}
+        hoverCloseDelay={300}
+        hoverOpenDelay={150}
+        inheritDarkTheme={false}
+        interactionKind="click"
+        minimal={false}
+        modifiers={Object {}}
+        openOnTargetFocus={true}
+        position="bottom"
+        targetTagName="span"
+        transitionDuration={0}
+        usePortal={true}
+        wrapperTagName="span"
+      >
+        <Manager>
+          <span
+            className="bp3-popover-wrapper"
+          >
+            <Reference
+              innerRef={[Function]}
+            >
+              <InnerReference
+                innerRef={[Function]}
+                setReferenceNode={[Function]}
+              >
+                <Blueprint3.ResizeSensor
+                  onResize={[Function]}
+                >
+                  <span
+                    className="bp3-popover-target"
+                    onClick={[Function]}
+                  >
+                    <Blueprint3.Tooltip
+                      className=""
+                      content={
+                        <Blueprint3.Text>
+                          Click to manage
+                        </Blueprint3.Text>
+                      }
+                      hoverCloseDelay={0}
+                      hoverOpenDelay={400}
+                      key=".0"
+                      position="right"
+                      transitionDuration={100}
+                    >
+                      <Blueprint3.Popover
+                        autoFocus={false}
+                        boundary="scrollParent"
+                        canEscapeKeyClose={false}
+                        captureDismiss={false}
+                        className=""
+                        content={
+                          <Blueprint3.Text>
+                            Click to manage
+                          </Blueprint3.Text>
+                        }
+                        defaultIsOpen={false}
+                        disabled={false}
+                        enforceFocus={false}
+                        fill={false}
+                        hasBackdrop={false}
+                        hoverCloseDelay={0}
+                        hoverOpenDelay={400}
+                        inheritDarkTheme={true}
+                        interactionKind="hover-target"
+                        lazy={true}
+                        minimal={false}
+                        modifiers={Object {}}
+                        openOnTargetFocus={true}
+                        popoverClassName="bp3-tooltip"
+                        position="right"
+                        targetTagName="span"
+                        transitionDuration={100}
+                        usePortal={true}
+                        wrapperTagName="span"
+                      >
+                        <Manager>
+                          <span
+                            className="bp3-popover-wrapper"
+                          >
+                            <Reference
+                              innerRef={[Function]}
+                            >
+                              <InnerReference
+                                innerRef={[Function]}
+                                setReferenceNode={[Function]}
+                              >
+                                <Blueprint3.ResizeSensor
+                                  onResize={[Function]}
+                                >
+                                  <span
+                                    className="bp3-popover-target"
+                                    onBlur={[Function]}
+                                    onFocus={[Function]}
+                                    onMouseEnter={[Function]}
+                                    onMouseLeave={[Function]}
+                                  >
+                                    <Blueprint3.Button
+                                      className=""
+                                      id="connected-device-info-stepper-button"
+                                      intent="success"
+                                      key=".0"
+                                      style={
+                                        Object {
+                                          "borderRadius": "100px",
+                                          "height": "10px !important",
+                                          "margin": "0 auto",
+                                          "position": "relative",
+                                          "width": "120px",
+                                        }
+                                      }
+                                      tabIndex={0}
+                                    >
+                                      <button
+                                        className="bp3-button bp3-intent-success"
+                                        id="connected-device-info-stepper-button"
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        style={
+                                          Object {
+                                            "borderRadius": "100px",
+                                            "height": "10px !important",
+                                            "margin": "0 auto",
+                                            "position": "relative",
+                                            "width": "120px",
+                                          }
+                                        }
+                                        tabIndex={0}
+                                        type="button"
+                                      >
+                                        <Blueprint3.Icon
+                                          key="leftIcon"
+                                        />
+                                        <span
+                                          className="bp3-button-text"
+                                          key="text"
+                                        >
+                                          <Row>
+                                            <div
+                                              className="row"
+                                            >
+                                              <Col
+                                                xs={1}
+                                              >
+                                                <div
+                                                  className="col-xs-1"
+                                                >
+                                                  <Blueprint3.Icon
+                                                    icon="info-sign"
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-info-sign"
+                                                      icon="info-sign"
+                                                    >
+                                                      <svg
+                                                        data-icon="info-sign"
+                                                        height={16}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                      >
+                                                        <desc>
+                                                          info-sign
+                                                        </desc>
+                                                        <path
+                                                          d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zM7 3h2v2H7V3zm3 10H6v-1h1V7H6V6h3v6h1v1z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </div>
+                                              </Col>
+                                              <Col
+                                                xs={true}
+                                              >
+                                                <div
+                                                  className="col-xs"
+                                                >
+                                                  <Blueprint3.Text>
+                                                    <div
+                                                      className=""
+                                                    >
+                                                      Connected
+                                                    </div>
+                                                  </Blueprint3.Text>
+                                                </div>
+                                              </Col>
+                                            </div>
+                                          </Row>
+                                        </span>
+                                        <Blueprint3.Icon
+                                          key="rightIcon"
+                                        />
+                                      </button>
+                                    </Blueprint3.Button>
+                                  </span>
+                                </Blueprint3.ResizeSensor>
+                              </InnerReference>
+                            </Reference>
+                            <Blueprint3.Overlay
+                              autoFocus={false}
+                              backdropClassName="bp3-popover-backdrop"
+                              backdropProps={Object {}}
+                              canEscapeKeyClose={false}
+                              canOutsideClickClose={false}
+                              enforceFocus={false}
+                              hasBackdrop={false}
+                              isOpen={false}
+                              lazy={true}
+                              onClose={[Function]}
+                              transitionDuration={100}
+                              transitionName="bp3-popover"
+                              usePortal={true}
+                            />
+                          </span>
+                        </Manager>
+                      </Blueprint3.Popover>
+                    </Blueprint3.Tooltip>
+                  </span>
+                </Blueprint3.ResizeSensor>
+              </InnerReference>
+            </Reference>
+            <Blueprint3.Overlay
+              autoFocus={true}
+              backdropClassName="bp3-popover-backdrop"
+              backdropProps={Object {}}
+              canEscapeKeyClose={true}
+              canOutsideClickClose={true}
+              enforceFocus={true}
+              hasBackdrop={false}
+              isOpen={false}
+              lazy={true}
+              onClose={[Function]}
+              transitionDuration={0}
+              transitionName="bp3-popover"
+              usePortal={true}
+            />
+          </span>
+        </Manager>
+      </Blueprint3.Popover>
+    </DeviceConnectedInfoButton>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreeenStep.spec.tsx b/app/components/StepsOfStepper/ChooseAppOrScreeenStep.spec.tsx
new file mode 100644
index 0000000..b80e960
--- /dev/null
+++ b/app/components/StepsOfStepper/ChooseAppOrScreeenStep.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ChooseAppOrScreeenStep from './ChooseAppOrScreeenStep';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <ChooseAppOrScreeenStep
+          handleNextEntireScreen={() => {}}
+          handleNextApplicationWindow={() => {}}
+        />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx b/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx
new file mode 100644
index 0000000..5a13193
--- /dev/null
+++ b/app/components/StepsOfStepper/ChooseAppOrScreeenStep.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { Text } from '@blueprintjs/core';
+import ShareEntireScreenOrAppWindowControlGroup from '../ShareAppOrScreenControlGroup';
+
+interface ChooseAppOrScreeenStepProps {
+  handleNextEntireScreen: () => void;
+  handleNextApplicationWindow: () => void;
+}
+
+const ChooseAppOrScreeenStep: React.FC<ChooseAppOrScreeenStepProps> = (
+  props: ChooseAppOrScreeenStepProps
+) => {
+  return (
+    <>
+      <div style={{ marginBottom: '10px' }}>
+        <Text>
+          Choose Entire Screen or App window you want to view on other device
+        </Text>
+      </div>
+      <ShareEntireScreenOrAppWindowControlGroup
+        handleNextEntireScreen={props.handleNextEntireScreen}
+        handleNextApplicationWindow={props.handleNextApplicationWindow}
+      />
+    </>
+  );
+};
+
+export default ChooseAppOrScreeenStep;
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.spec.tsx b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.spec.tsx
new file mode 100644
index 0000000..2dede18
--- /dev/null
+++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.spec.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ChooseAppOrScreenOverlay from './ChooseAppOrScreenOverlay';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <ChooseAppOrScreenOverlay
+          isEntireScreenToShareChosen
+          isChooseAppOrScreenOverlayOpen
+          handleNextEntireScreen={() => {}}
+          handleNextApplicationWindow={() => {}}
+          handleClose={() => {}}
+        />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx
new file mode 100644
index 0000000..bd1b860
--- /dev/null
+++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/ChooseAppOrScreenOverlay.tsx
@@ -0,0 +1,164 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { H3, Card, Dialog } from '@blueprintjs/core';
+import { Row, Col } from 'react-flexbox-grid';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import CloseOverlayButton from '../../CloseOverlayButton';
+import isProduction from '../../../utils/isProduction';
+import PreviewGridList from './PreviewGridList';
+import TEST_SCREEN_SHARING_OBECTS from '../../../constants/test-screen-sharing-objects.json';
+
+const Zoom = require('react-reveal/Zoom');
+const Fade = require('react-reveal/Fade');
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    dialogRoot: {
+      width: '90%',
+      height: '87vh !important',
+      overflowY: 'scroll',
+    },
+    closeButton: {
+      position: 'relative',
+      width: '40px',
+      height: '40px',
+      left: 'calc(100% - 55px)',
+      borderRadius: '100px',
+      zIndex: 9999,
+    },
+    overlayInnerRoot: { width: '90%', height: '90%' },
+    sharePreviewsContainer: {
+      top: '60px',
+      position: 'relative',
+      height: '100%',
+    },
+  })
+);
+
+interface ChooseAppOrScreenOverlayProps {
+  isEntireScreenToShareChosen: boolean;
+  isChooseAppOrScreenOverlayOpen: boolean;
+  handleNextEntireScreen: () => void;
+  handleNextApplicationWindow: () => void;
+  handleClose: () => void;
+}
+
+export default function ChooseAppOrScreenOverlay(
+  props: ChooseAppOrScreenOverlayProps
+) {
+  const classes = useStyles();
+
+  return (
+    <Dialog
+      onClose={props.handleClose}
+      className={`${classes.dialogRoot} choose-app-or-screen-dialog`}
+      autoFocus
+      canEscapeKeyClose
+      canOutsideClickClose
+      enforceFocus
+      hasBackdrop
+      isOpen={props.isChooseAppOrScreenOverlayOpen}
+      usePortal
+      transitionDuration={isProduction() ? 750 : 0}
+    >
+      <div>
+        <Fade
+          duration={isProduction() ? 1000 : 0}
+          delay={isProduction() ? 1000 : 0}
+        >
+          <div
+            style={{
+              position: 'fixed',
+              zIndex: 99999,
+              width: '90%',
+              paddingTop: '0px',
+              paddingLeft: '15px',
+              paddingRight: '15px',
+            }}
+          >
+            <Card
+              elevation={2}
+              style={{
+                padding: '10px',
+                borderRadius: '5px',
+                height: '60px',
+                width: '100%',
+              }}
+            >
+              <Row
+                between="xs"
+                middle="xs"
+                style={{
+                  width: '100%',
+                }}
+              >
+                <Col xs={11}>
+                  {props.isEntireScreenToShareChosen ? (
+                    <div>
+                      <H3 style={{ marginBottom: '0px' }}>
+                        Select Entire Screen to Share
+                      </H3>
+                    </div>
+                  ) : (
+                    <div>
+                      <H3 style={{ marginBottom: '0px' }}>
+                        Select App Window to Share
+                      </H3>
+                    </div>
+                  )}
+                </Col>
+
+                <Col xs={1}>
+                  <CloseOverlayButton
+                    onClick={props.handleClose}
+                    style={{
+                      borderRadius: '100px',
+                      width: '40px',
+                      height: '40px',
+                    }}
+                    noDefaultStyles
+                  />
+                </Col>
+              </Row>
+            </Card>
+          </div>
+        </Fade>
+
+        <Zoom
+          duration={isProduction() ? 750 : 0}
+          style={{
+            position: 'relative',
+            zIndex: '1',
+          }}
+        >
+          <Card
+            style={{
+              position: 'relative',
+              // @ts-ignore
+              zIndex: '1',
+            }}
+          >
+            <Row>
+              <div className={classes.sharePreviewsContainer}>
+                <PreviewGridList
+                  screenSharingObjects={TEST_SCREEN_SHARING_OBECTS}
+                  isEntireScreen={props.isEntireScreenToShareChosen}
+                  handleNextEntireScreen={() => {
+                    props.handleNextEntireScreen();
+                    props.handleClose();
+                  }}
+                  handleNextApplicationWindow={() => {
+                    props.handleNextApplicationWindow();
+                    props.handleClose();
+                  }}
+                />
+              </div>
+            </Row>
+          </Card>
+        </Zoom>
+      </div>
+    </Dialog>
+  );
+}
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx
new file mode 100644
index 0000000..74c1fcc
--- /dev/null
+++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/PreviewGridList.tsx
@@ -0,0 +1,166 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
+/* eslint-disable jsx-a11y/alt-text */
+import React, { useEffect, useState, useCallback } from 'react';
+import { Card, H4, Icon } from '@blueprintjs/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import { Row, Col } from 'react-flexbox-grid';
+import isProduction from '../../../utils/isProduction';
+
+const Fade = require('react-reveal/Fade');
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      justifyContent: 'space-around',
+      overflow: 'hidden',
+    },
+    gridList: {
+      width: 500,
+      height: 450,
+    },
+    icon: {
+      color: 'rgba(255, 255, 255, 0.54)',
+    },
+    previewShareThumbContainer: {
+      marginBottom: '20px',
+      '&:hover': {
+        backgroundColor: 'rgba(19, 124, 189, 0.4)',
+      },
+    },
+  })
+);
+
+export default function PreviewGridList(props: any) {
+  const classes = useStyles();
+
+  const [showPreviewNamesMap, setShowPreviewNamesMap] = useState(new Map());
+
+  useEffect(() => {
+    const map = new Map();
+    props.screenSharingObjects.forEach((el: { id: string }) => {
+      map.set(el.id, false);
+    });
+    setShowPreviewNamesMap(map);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const onPreviewMouseEnter = useCallback(
+    (id) => {
+      const newShowPreviewNamesMap = new Map(showPreviewNamesMap);
+      [...newShowPreviewNamesMap.keys()].forEach((key) => {
+        newShowPreviewNamesMap.set(key, false);
+      });
+      newShowPreviewNamesMap.set(id, true);
+      setShowPreviewNamesMap(newShowPreviewNamesMap);
+    },
+    [showPreviewNamesMap, setShowPreviewNamesMap]
+  );
+
+  const onPreviewMouseLeave = useCallback(() => {
+    const newShowPreviewNamesMap = new Map(showPreviewNamesMap);
+    [...newShowPreviewNamesMap.keys()].forEach((key) => {
+      newShowPreviewNamesMap.set(key, false);
+    });
+    setShowPreviewNamesMap(newShowPreviewNamesMap);
+  }, [showPreviewNamesMap, setShowPreviewNamesMap]);
+
+  return (
+    <div
+      style={{
+        height: '90%',
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+      }}
+    >
+      {[...showPreviewNamesMap.keys()].map((id) => {
+        return (
+          <Col xs={12} md={6} lg={3} key={id}>
+            <Card
+              interactive
+              elevation={2}
+              className={`preview-share-thumb-container ${classes.previewShareThumbContainer}`}
+              onClick={() => {
+                if (props.isEntireScreen) {
+                  props.handleNextEntireScreen();
+                } else {
+                  props.handleNextApplicationWindow();
+                }
+              }}
+              onMouseEnter={() => onPreviewMouseEnter(id)}
+              onMouseLeave={() => onPreviewMouseLeave()}
+            >
+              <div
+                style={{
+                  height: '250px',
+                  position: 'relative',
+                  overflow: 'hidden',
+                  borderRadius: '5px',
+                }}
+              >
+                <Row
+                  middle="xs"
+                  center="xs"
+                  className="icon-or-preview-container"
+                >
+                  <Icon
+                    icon={props.isEntireScreen ? 'desktop' : 'application'}
+                    iconSize={150}
+                    color="#A7B6C2"
+                    style={{
+                      position: 'absolute',
+                      top: 'calc(50% - 75px)',
+                      left: 'calc(50% - 75px)',
+                    }}
+                  />
+                </Row>
+                <Fade
+                  when={showPreviewNamesMap.get(id)}
+                  duration={isProduction() ? 300 : 0}
+                >
+                  <div
+                    style={{
+                      height: '100%',
+                      background:
+                        'radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)',
+                    }}
+                  >
+                    <Fade
+                      bottom
+                      when={showPreviewNamesMap.get(id)}
+                      duration={isProduction() ? 300 : 0}
+                    >
+                      <div
+                        style={{
+                          position: 'relative',
+                          bottom: 'calc(-100% + 42px)',
+                          width: '100%',
+                          backgroundColor: 'rgba(0,0,0,0.4)',
+                          padding: '10px',
+                        }}
+                      >
+                        <H4
+                          style={{
+                            paddingBottom: '0px',
+                            marginBottom: '0px',
+                            color: 'white',
+                          }}
+                        >
+                          Preview Name
+                        </H4>
+                      </div>
+                    </Fade>
+                  </div>
+                </Fade>
+              </div>
+            </Card>
+          </Col>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap
new file mode 100644
index 0000000..9b137ac
--- /dev/null
+++ b/app/components/StepsOfStepper/ChooseAppOrScreenOverlay/__snapshots__/ChooseAppOrScreenOverlay.spec.tsx.snap
@@ -0,0 +1,4587 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <ChooseAppOrScreenOverlay
+      handleClose={[Function]}
+      handleNextApplicationWindow={[Function]}
+      handleNextEntireScreen={[Function]}
+      isChooseAppOrScreenOverlayOpen={true}
+      isEntireScreenToShareChosen={true}
+    >
+      <Blueprint3.Dialog
+        autoFocus={true}
+        canEscapeKeyClose={true}
+        canOutsideClickClose={true}
+        className="makeStyles-dialogRoot-1 choose-app-or-screen-dialog"
+        enforceFocus={true}
+        hasBackdrop={true}
+        isOpen={true}
+        onClose={[Function]}
+        transitionDuration={0}
+        usePortal={true}
+      >
+        <Blueprint3.Overlay
+          autoFocus={true}
+          backdropProps={Object {}}
+          canEscapeKeyClose={true}
+          canOutsideClickClose={true}
+          className="bp3-overlay-scroll-container"
+          enforceFocus={true}
+          hasBackdrop={true}
+          isOpen={true}
+          lazy={true}
+          onClose={[Function]}
+          transitionDuration={0}
+          transitionName="bp3-overlay"
+          usePortal={true}
+        >
+          <Blueprint3.Portal
+            container={
+              <body
+                class="bp3-overlay-open"
+              >
+                <div
+                  class="bp3-portal"
+                >
+                  <div
+                    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                  >
+                    <div
+                      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                      tabindex="0"
+                    />
+                    <div
+                      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                      tabindex="0"
+                    >
+                      <div
+                        class="bp3-dialog makeStyles-dialogRoot-1 choose-app-or-screen-dialog"
+                      >
+                        <div>
+                          <div
+                            class="react-reveal"
+                            style="position: fixed; z-index: 99999; width: 90%; padding-top: 0px; padding-left: 15px; padding-right: 15px;"
+                          >
+                            <div
+                              class="bp3-card bp3-elevation-2"
+                              style="padding: 10px; border-radius: 5px; height: 60px; width: 100%;"
+                            >
+                              <div
+                                class="row middle-xs between-xs"
+                                style="width: 100%;"
+                              >
+                                <div
+                                  class="col-xs-11"
+                                >
+                                  <div>
+                                    <h3
+                                      class="bp3-heading"
+                                      style="margin-bottom: 0px;"
+                                    >
+                                      Select Entire Screen to Share
+                                    </h3>
+                                  </div>
+                                </div>
+                                <div
+                                  class="col-xs-1"
+                                >
+                                  <button
+                                    class="bp3-button"
+                                    id="close-overlay-button"
+                                    style="border-radius: 100px; width: 40px; height: 40px;"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="bp3-button-text"
+                                    >
+                                      <span
+                                        class="bp3-icon bp3-icon-cross"
+                                        icon="cross"
+                                      >
+                                        <svg
+                                          data-icon="cross"
+                                          height="30"
+                                          viewBox="0 0 20 20"
+                                          width="30"
+                                        >
+                                          <desc>
+                                            cross
+                                          </desc>
+                                          <path
+                                            d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="react-reveal"
+                          >
+                            <div
+                              class="bp3-card bp3-elevation-0"
+                              style="position: relative; z-index: 1;"
+                            >
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class="makeStyles-sharePreviewsContainer-4"
+                                >
+                                  <div
+                                    style="height: 90%; display: flex; flex-direction: row; flex-wrap: wrap;"
+                                  >
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </body>
+            }
+          >
+            <Portal
+              containerInfo={
+                <div
+                  class="bp3-portal"
+                >
+                  <div
+                    class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                  >
+                    <div
+                      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                      tabindex="0"
+                    />
+                    <div
+                      class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                      tabindex="0"
+                    >
+                      <div
+                        class="bp3-dialog makeStyles-dialogRoot-1 choose-app-or-screen-dialog"
+                      >
+                        <div>
+                          <div
+                            class="react-reveal"
+                            style="position: fixed; z-index: 99999; width: 90%; padding-top: 0px; padding-left: 15px; padding-right: 15px;"
+                          >
+                            <div
+                              class="bp3-card bp3-elevation-2"
+                              style="padding: 10px; border-radius: 5px; height: 60px; width: 100%;"
+                            >
+                              <div
+                                class="row middle-xs between-xs"
+                                style="width: 100%;"
+                              >
+                                <div
+                                  class="col-xs-11"
+                                >
+                                  <div>
+                                    <h3
+                                      class="bp3-heading"
+                                      style="margin-bottom: 0px;"
+                                    >
+                                      Select Entire Screen to Share
+                                    </h3>
+                                  </div>
+                                </div>
+                                <div
+                                  class="col-xs-1"
+                                >
+                                  <button
+                                    class="bp3-button"
+                                    id="close-overlay-button"
+                                    style="border-radius: 100px; width: 40px; height: 40px;"
+                                    type="button"
+                                  >
+                                    <span
+                                      class="bp3-button-text"
+                                    >
+                                      <span
+                                        class="bp3-icon bp3-icon-cross"
+                                        icon="cross"
+                                      >
+                                        <svg
+                                          data-icon="cross"
+                                          height="30"
+                                          viewBox="0 0 20 20"
+                                          width="30"
+                                        >
+                                          <desc>
+                                            cross
+                                          </desc>
+                                          <path
+                                            d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                            fill-rule="evenodd"
+                                          />
+                                        </svg>
+                                      </span>
+                                    </span>
+                                  </button>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="react-reveal"
+                          >
+                            <div
+                              class="bp3-card bp3-elevation-0"
+                              style="position: relative; z-index: 1;"
+                            >
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class="makeStyles-sharePreviewsContainer-4"
+                                >
+                                  <div
+                                    style="height: 90%; display: flex; flex-direction: row; flex-wrap: wrap;"
+                                  >
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                    <div
+                                      class="col-xs-12 col-md-6 col-lg-3"
+                                    >
+                                      <div
+                                        class="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                      >
+                                        <div
+                                          style="height: 250px; position: relative; overflow: hidden; border-radius: 5px;"
+                                        >
+                                          <div
+                                            class="icon-or-preview-container row center-xs middle-xs"
+                                          >
+                                            <span
+                                              class="bp3-icon bp3-icon-desktop"
+                                              icon="desktop"
+                                              style="position: absolute; top: calc(50% - 75px); left: calc(50% - 75px);"
+                                            >
+                                              <svg
+                                                data-icon="desktop"
+                                                fill="#A7B6C2"
+                                                height="150"
+                                                viewBox="0 0 20 20"
+                                                width="150"
+                                              >
+                                                <desc>
+                                                  desktop
+                                                </desc>
+                                                <path
+                                                  d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                  fill-rule="evenodd"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </div>
+                                          <div
+                                            class="react-reveal"
+                                            style="height: 100%; opacity: 0;"
+                                          >
+                                            <div
+                                              class="react-reveal"
+                                              style="position: relative; bottom: calc(-100% + 42px); width: 100%; background-color: rgba(0, 0, 0, 0.4); padding: 10px; opacity: 0;"
+                                            >
+                                              <h4
+                                                class="bp3-heading"
+                                                style="padding-bottom: 0px; margin-bottom: 0px; color: white;"
+                                              >
+                                                Preview Name
+                                              </h4>
+                                            </div>
+                                          </div>
+                                        </div>
+                                      </div>
+                                    </div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              }
+            >
+              <TransitionGroup
+                appear={true}
+                childFactory={[Function]}
+                className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                component="div"
+                onKeyDown={[Function]}
+              >
+                <div
+                  className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                  onKeyDown={[Function]}
+                >
+                  <CSSTransition
+                    appear={true}
+                    classNames="bp3-overlay"
+                    in={true}
+                    key=".$__backdrop"
+                    onExited={[Function]}
+                    timeout={0}
+                  >
+                    <Transition
+                      appear={true}
+                      enter={true}
+                      exit={true}
+                      in={true}
+                      mountOnEnter={false}
+                      onEnter={[Function]}
+                      onEntered={[Function]}
+                      onEntering={[Function]}
+                      onExit={[Function]}
+                      onExited={[Function]}
+                      onExiting={[Function]}
+                      timeout={0}
+                      unmountOnExit={false}
+                    >
+                      <div
+                        className="bp3-overlay-backdrop"
+                        onMouseDown={[Function]}
+                        tabIndex={0}
+                      />
+                    </Transition>
+                  </CSSTransition>
+                  <CSSTransition
+                    appear={true}
+                    classNames="bp3-overlay"
+                    in={true}
+                    key=".$.0"
+                    onExited={[Function]}
+                    timeout={0}
+                  >
+                    <Transition
+                      appear={true}
+                      enter={true}
+                      exit={true}
+                      in={true}
+                      mountOnEnter={false}
+                      onEnter={[Function]}
+                      onEntered={[Function]}
+                      onEntering={[Function]}
+                      onExit={[Function]}
+                      onExited={[Function]}
+                      onExiting={[Function]}
+                      timeout={0}
+                      unmountOnExit={false}
+                    >
+                      <div
+                        className="bp3-dialog-container bp3-overlay-content"
+                        tabIndex={0}
+                      >
+                        <div
+                          className="bp3-dialog makeStyles-dialogRoot-1 choose-app-or-screen-dialog"
+                        >
+                          <div>
+                            <Fade
+                              delay={0}
+                              duration={0}
+                            >
+                              <RevealBase
+                                fraction={0.2}
+                                inEffect={
+                                  Object {
+                                    "count": 1,
+                                    "delay": 0,
+                                    "duration": 0,
+                                    "forever": undefined,
+                                    "make": [Function],
+                                    "reverse": undefined,
+                                    "style": Object {
+                                      "animationFillMode": "both",
+                                    },
+                                  }
+                                }
+                                outEffect={
+                                  Object {
+                                    "count": 1,
+                                    "delay": 0,
+                                    "duration": 0,
+                                    "forever": undefined,
+                                    "make": [Function],
+                                    "reverse": undefined,
+                                    "style": Object {
+                                      "animationFillMode": "both",
+                                    },
+                                  }
+                                }
+                                refProp="ref"
+                              >
+                                <div
+                                  className="react-reveal"
+                                  style={
+                                    Object {
+                                      "opacity": undefined,
+                                      "paddingLeft": "15px",
+                                      "paddingRight": "15px",
+                                      "paddingTop": "0px",
+                                      "position": "fixed",
+                                      "width": "90%",
+                                      "zIndex": 99999,
+                                    }
+                                  }
+                                >
+                                  <Blueprint3.Card
+                                    elevation={2}
+                                    interactive={false}
+                                    style={
+                                      Object {
+                                        "borderRadius": "5px",
+                                        "height": "60px",
+                                        "padding": "10px",
+                                        "width": "100%",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="bp3-card bp3-elevation-2"
+                                      style={
+                                        Object {
+                                          "borderRadius": "5px",
+                                          "height": "60px",
+                                          "padding": "10px",
+                                          "width": "100%",
+                                        }
+                                      }
+                                    >
+                                      <Row
+                                        between="xs"
+                                        middle="xs"
+                                        style={
+                                          Object {
+                                            "width": "100%",
+                                          }
+                                        }
+                                      >
+                                        <div
+                                          className="row middle-xs between-xs"
+                                          style={
+                                            Object {
+                                              "width": "100%",
+                                            }
+                                          }
+                                        >
+                                          <Col
+                                            xs={11}
+                                          >
+                                            <div
+                                              className="col-xs-11"
+                                            >
+                                              <div>
+                                                <Component
+                                                  style={
+                                                    Object {
+                                                      "marginBottom": "0px",
+                                                    }
+                                                  }
+                                                >
+                                                  <h3
+                                                    className="bp3-heading"
+                                                    style={
+                                                      Object {
+                                                        "marginBottom": "0px",
+                                                      }
+                                                    }
+                                                  >
+                                                    Select Entire Screen to Share
+                                                  </h3>
+                                                </Component>
+                                              </div>
+                                            </div>
+                                          </Col>
+                                          <Col
+                                            xs={1}
+                                          >
+                                            <div
+                                              className="col-xs-1"
+                                            >
+                                              <CloseOverlayButton
+                                                noDefaultStyles={true}
+                                                onClick={[Function]}
+                                                style={
+                                                  Object {
+                                                    "borderRadius": "100px",
+                                                    "height": "40px",
+                                                    "width": "40px",
+                                                  }
+                                                }
+                                              >
+                                                <Blueprint3.Button
+                                                  className=""
+                                                  id="close-overlay-button"
+                                                  onClick={[Function]}
+                                                  style={
+                                                    Object {
+                                                      "borderRadius": "100px",
+                                                      "height": "40px",
+                                                      "width": "40px",
+                                                    }
+                                                  }
+                                                >
+                                                  <button
+                                                    className="bp3-button"
+                                                    id="close-overlay-button"
+                                                    onClick={[Function]}
+                                                    onKeyDown={[Function]}
+                                                    onKeyUp={[Function]}
+                                                    style={
+                                                      Object {
+                                                        "borderRadius": "100px",
+                                                        "height": "40px",
+                                                        "width": "40px",
+                                                      }
+                                                    }
+                                                    type="button"
+                                                  >
+                                                    <Blueprint3.Icon
+                                                      key="leftIcon"
+                                                    />
+                                                    <span
+                                                      className="bp3-button-text"
+                                                      key="text"
+                                                    >
+                                                      <Blueprint3.Icon
+                                                        icon="cross"
+                                                        iconSize={30}
+                                                      >
+                                                        <span
+                                                          className="bp3-icon bp3-icon-cross"
+                                                          icon="cross"
+                                                        >
+                                                          <svg
+                                                            data-icon="cross"
+                                                            height={30}
+                                                            viewBox="0 0 20 20"
+                                                            width={30}
+                                                          >
+                                                            <desc>
+                                                              cross
+                                                            </desc>
+                                                            <path
+                                                              d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                                              fillRule="evenodd"
+                                                              key="0"
+                                                            />
+                                                          </svg>
+                                                        </span>
+                                                      </Blueprint3.Icon>
+                                                    </span>
+                                                    <Blueprint3.Icon
+                                                      key="rightIcon"
+                                                    />
+                                                  </button>
+                                                </Blueprint3.Button>
+                                              </CloseOverlayButton>
+                                            </div>
+                                          </Col>
+                                        </div>
+                                      </Row>
+                                    </div>
+                                  </Blueprint3.Card>
+                                </div>
+                              </RevealBase>
+                            </Fade>
+                            <Zoom
+                              duration={0}
+                              style={
+                                Object {
+                                  "position": "relative",
+                                  "zIndex": "1",
+                                }
+                              }
+                            >
+                              <RevealBase
+                                fraction={0.2}
+                                inEffect={
+                                  Object {
+                                    "count": 1,
+                                    "delay": 0,
+                                    "duration": 0,
+                                    "forever": undefined,
+                                    "make": [Function],
+                                    "reverse": undefined,
+                                    "style": Object {
+                                      "animationFillMode": "both",
+                                    },
+                                  }
+                                }
+                                outEffect={
+                                  Object {
+                                    "count": 1,
+                                    "delay": 0,
+                                    "duration": 0,
+                                    "forever": undefined,
+                                    "make": [Function],
+                                    "reverse": undefined,
+                                    "style": Object {
+                                      "animationFillMode": "both",
+                                    },
+                                  }
+                                }
+                                refProp="ref"
+                                style={
+                                  Object {
+                                    "position": "relative",
+                                    "zIndex": "1",
+                                  }
+                                }
+                              >
+                                <div
+                                  className="react-reveal"
+                                  style={
+                                    Object {
+                                      "opacity": undefined,
+                                    }
+                                  }
+                                >
+                                  <Blueprint3.Card
+                                    elevation={0}
+                                    interactive={false}
+                                    style={
+                                      Object {
+                                        "position": "relative",
+                                        "zIndex": "1",
+                                      }
+                                    }
+                                  >
+                                    <div
+                                      className="bp3-card bp3-elevation-0"
+                                      style={
+                                        Object {
+                                          "position": "relative",
+                                          "zIndex": "1",
+                                        }
+                                      }
+                                    >
+                                      <Row>
+                                        <div
+                                          className="row"
+                                        >
+                                          <div
+                                            className="makeStyles-sharePreviewsContainer-4"
+                                          >
+                                            <PreviewGridList
+                                              handleNextApplicationWindow={[Function]}
+                                              handleNextEntireScreen={[Function]}
+                                              isEntireScreen={true}
+                                              screenSharingObjects={
+                                                Array [
+                                                  Object {
+                                                    "author": "jill111",
+                                                    "cols": 2,
+                                                    "featured": true,
+                                                    "id": "https://material-ui.com/static/images/grid-list/breakfast.jpg",
+                                                    "name": "Breakfast",
+                                                    "path": "https://material-ui.com/static/images/grid-list/breakfast.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "director90",
+                                                    "cols": 3,
+                                                    "id": "https://material-ui.com/static/images/grid-list/burgers.jpg",
+                                                    "name": "Tasty burger",
+                                                    "path": "https://material-ui.com/static/images/grid-list/burgers.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "Danson67",
+                                                    "cols": 2,
+                                                    "id": "https://material-ui.com/static/images/grid-list/camera.jpg",
+                                                    "name": "Camera",
+                                                    "path": "https://material-ui.com/static/images/grid-list/camera.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "fancycrave1",
+                                                    "cols": 1,
+                                                    "featured": true,
+                                                    "id": "https://material-ui.com/static/images/grid-list/morning.jpg",
+                                                    "name": "Morning",
+                                                    "path": "https://material-ui.com/static/images/grid-list/morning.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "Hans",
+                                                    "cols": 4,
+                                                    "id": "https://material-ui.com/static/images/grid-list/hats.jpg",
+                                                    "name": "Hats",
+                                                    "path": "https://material-ui.com/static/images/grid-list/hats.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "fancycravel",
+                                                    "cols": 1,
+                                                    "id": "https://material-ui.com/static/images/grid-list/honey.jpg",
+                                                    "name": "Honey",
+                                                    "path": "https://material-ui.com/static/images/grid-list/honey.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "jill111",
+                                                    "cols": 2,
+                                                    "id": "https://material-ui.com/static/images/grid-list/vegetables.jpg",
+                                                    "name": "Vegetables",
+                                                    "path": "https://material-ui.com/static/images/grid-list/vegetables.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "BkrmadtyaKarki",
+                                                    "cols": 3,
+                                                    "id": "https://material-ui.com/static/images/grid-list/plant.jpg",
+                                                    "name": "Water plant",
+                                                    "path": "https://material-ui.com/static/images/grid-list/plant.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "PublicDomainPictures",
+                                                    "cols": 2,
+                                                    "id": "https://material-ui.com/static/images/grid-list/mushroom.jpg",
+                                                    "name": "Mushrooms",
+                                                    "path": "https://material-ui.com/static/images/grid-list/mushroom.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "congerdesign",
+                                                    "cols": 1,
+                                                    "id": "https://material-ui.com/static/images/grid-list/olive.jpg",
+                                                    "name": "Olive oil",
+                                                    "path": "https://material-ui.com/static/images/grid-list/olive.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "821292",
+                                                    "cols": 2,
+                                                    "id": "https://material-ui.com/static/images/grid-list/star.jpg",
+                                                    "name": "Sea star",
+                                                    "path": "https://material-ui.com/static/images/grid-list/star.jpg",
+                                                  },
+                                                  Object {
+                                                    "author": "danfador",
+                                                    "cols": 3,
+                                                    "id": "https://material-ui.com/static/images/grid-list/bike.jpg",
+                                                    "name": "Bike",
+                                                    "path": "https://material-ui.com/static/images/grid-list/bike.jpg",
+                                                  },
+                                                ]
+                                              }
+                                            >
+                                              <div
+                                                style={
+                                                  Object {
+                                                    "display": "flex",
+                                                    "flexDirection": "row",
+                                                    "flexWrap": "wrap",
+                                                    "height": "90%",
+                                                  }
+                                                }
+                                              >
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/breakfast.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/burgers.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/camera.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/morning.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/hats.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/honey.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/vegetables.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/plant.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/mushroom.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/olive.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/star.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                                <Col
+                                                  key="https://material-ui.com/static/images/grid-list/bike.jpg"
+                                                  lg={3}
+                                                  md={6}
+                                                  xs={12}
+                                                >
+                                                  <div
+                                                    className="col-xs-12 col-md-6 col-lg-3"
+                                                  >
+                                                    <Blueprint3.Card
+                                                      className="preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                      elevation={2}
+                                                      interactive={true}
+                                                      onClick={[Function]}
+                                                      onMouseEnter={[Function]}
+                                                      onMouseLeave={[Function]}
+                                                    >
+                                                      <div
+                                                        className="bp3-card bp3-interactive bp3-elevation-2 preview-share-thumb-container makeStyles-previewShareThumbContainer-9"
+                                                        onClick={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <div
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "5px",
+                                                              "height": "250px",
+                                                              "overflow": "hidden",
+                                                              "position": "relative",
+                                                            }
+                                                          }
+                                                        >
+                                                          <Row
+                                                            center="xs"
+                                                            className="icon-or-preview-container"
+                                                            middle="xs"
+                                                          >
+                                                            <div
+                                                              className="icon-or-preview-container row center-xs middle-xs"
+                                                            >
+                                                              <Blueprint3.Icon
+                                                                color="#A7B6C2"
+                                                                icon="desktop"
+                                                                iconSize={150}
+                                                                style={
+                                                                  Object {
+                                                                    "left": "calc(50% - 75px)",
+                                                                    "position": "absolute",
+                                                                    "top": "calc(50% - 75px)",
+                                                                  }
+                                                                }
+                                                              >
+                                                                <span
+                                                                  className="bp3-icon bp3-icon-desktop"
+                                                                  icon="desktop"
+                                                                  style={
+                                                                    Object {
+                                                                      "left": "calc(50% - 75px)",
+                                                                      "position": "absolute",
+                                                                      "top": "calc(50% - 75px)",
+                                                                    }
+                                                                  }
+                                                                >
+                                                                  <svg
+                                                                    data-icon="desktop"
+                                                                    fill="#A7B6C2"
+                                                                    height={150}
+                                                                    viewBox="0 0 20 20"
+                                                                    width={150}
+                                                                  >
+                                                                    <desc>
+                                                                      desktop
+                                                                    </desc>
+                                                                    <path
+                                                                      d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                                                      fillRule="evenodd"
+                                                                      key="0"
+                                                                    />
+                                                                  </svg>
+                                                                </span>
+                                                              </Blueprint3.Icon>
+                                                            </div>
+                                                          </Row>
+                                                          <Fade
+                                                            duration={0}
+                                                            when={false}
+                                                          >
+                                                            <RevealBase
+                                                              fraction={0.2}
+                                                              inEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              outEffect={
+                                                                Object {
+                                                                  "count": 1,
+                                                                  "delay": 0,
+                                                                  "duration": 0,
+                                                                  "forever": undefined,
+                                                                  "make": [Function],
+                                                                  "reverse": undefined,
+                                                                  "style": Object {
+                                                                    "animationFillMode": "both",
+                                                                  },
+                                                                }
+                                                              }
+                                                              refProp="ref"
+                                                              when={false}
+                                                            >
+                                                              <div
+                                                                className="react-reveal"
+                                                                style={
+                                                                  Object {
+                                                                    "background": "radial-gradient(circle closest-side, rgba(0,0,0,0.025), rgba(0,0,0,0.1)",
+                                                                    "height": "100%",
+                                                                    "opacity": 0,
+                                                                  }
+                                                                }
+                                                              >
+                                                                <Fade
+                                                                  bottom={true}
+                                                                  duration={0}
+                                                                  when={false}
+                                                                >
+                                                                  <RevealBase
+                                                                    bottom={true}
+                                                                    fraction={0.2}
+                                                                    inEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    outEffect={
+                                                                      Object {
+                                                                        "count": 1,
+                                                                        "delay": 0,
+                                                                        "duration": 0,
+                                                                        "forever": undefined,
+                                                                        "make": [Function],
+                                                                        "reverse": undefined,
+                                                                        "style": Object {
+                                                                          "animationFillMode": "both",
+                                                                        },
+                                                                      }
+                                                                    }
+                                                                    refProp="ref"
+                                                                    when={false}
+                                                                  >
+                                                                    <div
+                                                                      className="react-reveal"
+                                                                      style={
+                                                                        Object {
+                                                                          "backgroundColor": "rgba(0,0,0,0.4)",
+                                                                          "bottom": "calc(-100% + 42px)",
+                                                                          "opacity": 0,
+                                                                          "padding": "10px",
+                                                                          "position": "relative",
+                                                                          "width": "100%",
+                                                                        }
+                                                                      }
+                                                                    >
+                                                                      <Component
+                                                                        style={
+                                                                          Object {
+                                                                            "color": "white",
+                                                                            "marginBottom": "0px",
+                                                                            "paddingBottom": "0px",
+                                                                          }
+                                                                        }
+                                                                      >
+                                                                        <h4
+                                                                          className="bp3-heading"
+                                                                          style={
+                                                                            Object {
+                                                                              "color": "white",
+                                                                              "marginBottom": "0px",
+                                                                              "paddingBottom": "0px",
+                                                                            }
+                                                                          }
+                                                                        >
+                                                                          Preview Name
+                                                                        </h4>
+                                                                      </Component>
+                                                                    </div>
+                                                                  </RevealBase>
+                                                                </Fade>
+                                                              </div>
+                                                            </RevealBase>
+                                                          </Fade>
+                                                        </div>
+                                                      </div>
+                                                    </Blueprint3.Card>
+                                                  </div>
+                                                </Col>
+                                              </div>
+                                            </PreviewGridList>
+                                          </div>
+                                        </div>
+                                      </Row>
+                                    </div>
+                                  </Blueprint3.Card>
+                                </div>
+                              </RevealBase>
+                            </Zoom>
+                          </div>
+                        </div>
+                      </div>
+                    </Transition>
+                  </CSSTransition>
+                </div>
+              </TransitionGroup>
+            </Portal>
+          </Blueprint3.Portal>
+        </Blueprint3.Overlay>
+      </Blueprint3.Dialog>
+    </ChooseAppOrScreenOverlay>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/StepsOfStepper/ConfirmStep.spec.tsx b/app/components/StepsOfStepper/ConfirmStep.spec.tsx
new file mode 100644
index 0000000..bf79aae
--- /dev/null
+++ b/app/components/StepsOfStepper/ConfirmStep.spec.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import ConfirmStep from './ConfirmStep';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Router>
+        <ConfirmStep device={{} as Device} />
+      </Router>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/components/StepsOfStepper/ConfirmStep.tsx b/app/components/StepsOfStepper/ConfirmStep.tsx
new file mode 100644
index 0000000..5d27af2
--- /dev/null
+++ b/app/components/StepsOfStepper/ConfirmStep.tsx
@@ -0,0 +1,30 @@
+/* eslint-disable react/jsx-curly-brace-presence */
+/* eslint-disable react/destructuring-assignment */
+import React from 'react';
+import { Text, Card } from '@blueprintjs/core';
+
+interface ConfirmStepProps {
+  device: Device | null;
+}
+
+export default function ConfirmStep(props: ConfirmStepProps) {
+  return (
+    <>
+      <div style={{ marginBottom: '10px' }}>
+        <Text>{`Check if all is OK and click "Confirm"`}</Text>
+      </div>
+
+      <Card style={{ marginBottom: '10px' }}>
+        <Text>{`Device: ${props.device?.deviceType}`}</Text>
+        <Text>{`Device IP: ${props.device?.deviceIp}`}</Text>
+        <Text>{`Device OS: ${props.device?.deviceOs}`}</Text>
+        <Text>{`Session ID: ${props.device?.sessionId}`}</Text>
+      </Card>
+      <div style={{ marginBottom: '10px' }}>
+        <Text className="bp3-text-muted">
+          {`Click "Back" if you need to change something`}
+        </Text>
+      </div>
+    </>
+  );
+}
diff --git a/app/components/StepsOfStepper/IntermediateStep.spec.tsx b/app/components/StepsOfStepper/IntermediateStep.spec.tsx
new file mode 100644
index 0000000..9fc9215
--- /dev/null
+++ b/app/components/StepsOfStepper/IntermediateStep.spec.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import IntermediateStep from './IntermediateStep';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+const confirmButtonSelector = 'button.bp3-button.bp3-intent-success';
+
+function setup(
+  activeStep = 0,
+  resetDeviceMock = () => {},
+  resetUserAllowedMock = () => {}
+) {
+  const getWrapper = () =>
+    mount(
+      <>
+        <Router>
+          <IntermediateStep
+            activeStep={activeStep}
+            steps={['a', 'b', 'c']}
+            handleNext={() => {}}
+            handleBack={() => {}}
+            handleNextEntireScreen={() => {}}
+            handleNextApplicationWindow={() => {}}
+            resetPendingConnectionDevice={resetDeviceMock}
+            resetUserAllowedConnection={resetUserAllowedMock}
+          />
+        </Router>
+      </>
+    );
+
+  const component = getWrapper();
+
+  const buttons = {
+    confirmButton: component.find(confirmButtonSelector),
+  };
+
+  return {
+    component,
+    buttons,
+  };
+}
+
+it('should match exact snapshot on each step', () => {
+  for (let testActiveStep = 0; testActiveStep < 3; testActiveStep += 1) {
+    const { component } = setup(
+      testActiveStep,
+      () => {},
+      () => {}
+    );
+    expect(EnzymeToJson(component)).toMatchSnapshot();
+  }
+});
+
+it('should call resetPendingConnectionDevice when Confirm button clicked on confirm step', () => {
+  const confirmStepNumber = 2;
+  const mockResetPendingConnectionDeviceCallback = jest.fn();
+  const { buttons } = setup(
+    confirmStepNumber,
+    mockResetPendingConnectionDeviceCallback,
+    () => {}
+  );
+
+  buttons.confirmButton.simulate('click');
+
+  expect(mockResetPendingConnectionDeviceCallback).toBeCalled();
+});
+
+it('should call resetUserAllowedConnection when Confirm button clicked on confirm step', () => {
+  const confirmStepNumber = 2;
+  const mockResetUserAllowedConnectionCallback = jest.fn();
+  const { buttons } = setup(
+    confirmStepNumber,
+    () => {},
+    mockResetUserAllowedConnectionCallback
+  );
+
+  buttons.confirmButton.simulate('click');
+
+  expect(mockResetUserAllowedConnectionCallback).toBeCalled();
+});
diff --git a/app/components/StepsOfStepper/IntermediateStep.tsx b/app/components/StepsOfStepper/IntermediateStep.tsx
new file mode 100644
index 0000000..21c0fe1
--- /dev/null
+++ b/app/components/StepsOfStepper/IntermediateStep.tsx
@@ -0,0 +1,146 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { useContext } from 'react';
+import { Button } from '@blueprintjs/core';
+import { Col } from 'react-flexbox-grid';
+import DEVICES from '../../constants/test-devices.json';
+import ScanQRStep from './ScanQRStep';
+import ChooseAppOrScreeenStep from './ChooseAppOrScreeenStep';
+import ConfirmStep from './ConfirmStep';
+import { ConnectedDevicesContext } from '../../containers/ConnectedDevicesProvider';
+
+interface IntermediateStepProps {
+  activeStep: number;
+  steps: string[];
+  handleNext: () => void;
+  handleBack: () => void;
+  handleNextEntireScreen: () => void;
+  handleNextApplicationWindow: () => void;
+  resetPendingConnectionDevice: () => void;
+  resetUserAllowedConnection: () => void;
+}
+
+function getStepContent(
+  stepIndex: number,
+  handleNextEntireScreen: () => void,
+  handleNextApplicationWindow: () => void,
+  pendingConnectionDevice: Device | null
+) {
+  switch (stepIndex) {
+    case 0:
+      return <ScanQRStep />;
+    case 1:
+      return (
+        <ChooseAppOrScreeenStep
+          handleNextEntireScreen={handleNextEntireScreen}
+          handleNextApplicationWindow={handleNextApplicationWindow}
+        />
+      );
+    case 2:
+      return <ConfirmStep device={pendingConnectionDevice} />;
+    default:
+      return 'Unknown stepIndex';
+  }
+}
+
+function isConfirmStep(activeStep: number, steps: string[]) {
+  return activeStep === steps.length - 1;
+}
+
+export default function IntermediateStep(props: IntermediateStepProps) {
+  const {
+    devices,
+    setPendingConnectionDeviceHook,
+    setDevicesHook,
+    pendingConnectionDevice,
+    resetPendingConnectionDeviceHook,
+  } = useContext(ConnectedDevicesContext);
+
+  const connectDevice = (device: Device) => {
+    setPendingConnectionDeviceHook(device);
+  };
+
+  return (
+    <Col
+      xs={12}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+        height: '260px',
+      }}
+    >
+      {getStepContent(
+        props.activeStep,
+        props.handleNextEntireScreen,
+        props.handleNextApplicationWindow,
+        pendingConnectionDevice
+      )}
+
+      {
+        /* TODO: (REMOVE: process.env.NODE_ENV === 'production') !!!!!!!!!)
+        Connect Test Device button, displayed only when RUN_MODE is 'dev' or 'test' */
+        props.activeStep === 0 &&
+        (process.env.RUN_MODE === 'dev' ||
+          process.env.RUN_MODE === 'test' ||
+          process.env.NODE_ENV === 'production') ? (
+          // eslint-disable-next-line react/jsx-indent
+          <Button
+            onClick={() => {
+              connectDevice(
+                DEVICES[Math.floor(Math.random() * DEVICES.length)]
+              );
+            }}
+          >
+            Connect Test Device
+          </Button>
+        ) : (
+          <></>
+        )
+      }
+      {
+        /**/
+        props.activeStep !== 0 ? (
+          <Button
+            intent={props.activeStep === 2 ? 'success' : 'none'}
+            onClick={() => {
+              props.handleNext();
+              if (isConfirmStep(props.activeStep, props.steps)) {
+                setDevicesHook([...devices, pendingConnectionDevice as Device]);
+                resetPendingConnectionDeviceHook();
+                props.resetPendingConnectionDevice();
+                props.resetUserAllowedConnection();
+              }
+            }}
+            style={{
+              display: props.activeStep === 1 ? 'none' : 'inline',
+              borderRadius: '100px',
+              width: '100%',
+              textAlign: 'center',
+            }}
+            rightIcon={
+              isConfirmStep(props.activeStep, props.steps)
+                ? 'small-tick'
+                : 'chevron-right'
+            }
+          >
+            {isConfirmStep(props.activeStep, props.steps) ? 'Confirm' : 'Next'}
+          </Button>
+        ) : (
+          <></>
+        )
+      }
+      <Button
+        intent="danger"
+        style={{
+          marginTop: '10px',
+          display: props.activeStep === 2 ? 'inline-block' : 'none',
+          borderRadius: '100px',
+        }}
+        onClick={props.handleBack}
+        icon="chevron-left"
+        text="No, I need to share other thing"
+      />
+    </Col>
+  );
+}
diff --git a/app/components/StepsOfStepper/ScanQRStep.spec.tsx b/app/components/StepsOfStepper/ScanQRStep.spec.tsx
new file mode 100644
index 0000000..3ee97bb
--- /dev/null
+++ b/app/components/StepsOfStepper/ScanQRStep.spec.tsx
@@ -0,0 +1,77 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/ban-types */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React from 'react';
+import Enzyme from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import ScanQRStep from './ScanQRStep';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+const bp3QRCodeDialogRootSelector = '#bp3-qr-code-dialog-root';
+const magnifyQRCodeButtonSelector = '#magnify-qr-code-button';
+const qrCodeDialogInnerSelector = '#qr-code-dialog-inner';
+
+type EnzymeShallowWrapper =
+  | Enzyme.CommonWrapper<{}, {}, React.Component<{}, {}, any>>
+  | Cheerio
+  | Enzyme.ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+describe('<ScanQRStep />', () => {
+  let wrapper: EnzymeShallowWrapper;
+
+  beforeEach(() => {
+    wrapper = Enzyme.shallow(<ScanQRStep />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('when rendered', () => {
+    it('should match exact snapshot', () => {
+      expect(EnzymeToJson(wrapper)).toMatchSnapshot();
+    });
+  });
+
+  describe('when user clicks on magnify QR code button', () => {
+    it('should set "QR Code Dialog Root" isOpen property to "true"', () => {
+      // @ts-ignore
+      wrapper.find(magnifyQRCodeButtonSelector).props().onClick();
+      // @ts-ignore
+      expect(wrapper.find(bp3QRCodeDialogRootSelector).props().isOpen).toBe(
+        true
+      );
+    });
+  });
+
+  describe(`when magnified QR code dialog is opened,
+  and when user closes magnified QR code dialog`, () => {
+    it('should set "QR Code Dialog Root" isOpen property to "false"', () => {
+      // @ts-ignore
+      wrapper.find(magnifyQRCodeButtonSelector).props().onClick();
+      // @ts-ignore
+      wrapper.find(bp3QRCodeDialogRootSelector).props().onClose();
+      // @ts-ignore
+      expect(wrapper.find(bp3QRCodeDialogRootSelector).props().isOpen).toBe(
+        false
+      );
+    });
+  });
+
+  describe(`when magnified QR code dialog is opened,
+  and when user clicks on qr code dialog inner`, () => {
+    it('should set "QR Code Dialog Root" isOpen property to "false"', () => {
+      // @ts-ignore
+      wrapper.find(magnifyQRCodeButtonSelector).props().onClick();
+      // @ts-ignore
+      wrapper.find(qrCodeDialogInnerSelector).props().onClick();
+      // @ts-ignore
+      expect(wrapper.find(bp3QRCodeDialogRootSelector).props().isOpen).toBe(
+        false
+      );
+    });
+  });
+});
diff --git a/app/components/StepsOfStepper/ScanQRStep.tsx b/app/components/StepsOfStepper/ScanQRStep.tsx
new file mode 100644
index 0000000..630e7d2
--- /dev/null
+++ b/app/components/StepsOfStepper/ScanQRStep.tsx
@@ -0,0 +1,155 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+import React, { useContext, useState } from 'react';
+import { Button, Text, Tooltip, Position, H2, Dialog } from '@blueprintjs/core';
+import QRCode from 'qrcode.react';
+import { makeStyles, createStyles } from '@material-ui/core';
+import { Row, Col } from 'react-flexbox-grid';
+import { SettingsContext } from '../../containers/SettingsProvider';
+import isProduction from '../../utils/isProduction';
+import CloseOverlayButton from '../CloseOverlayButton';
+
+const internalIp = require('internal-ip');
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    smallQRCode: {
+      border: '1px solid',
+      borderColor: 'rgba(0,0,0,0.0)',
+      padding: '10px',
+      borderRadius: '10px',
+      '&:hover': {
+        backgroundColor: 'rgba(0,0,0,0.12)',
+        border: '1px solid #8A9BA8',
+        cursor: 'zoom-in',
+      },
+    },
+    dialogQRWrapper: {
+      backgroundColor: 'white',
+      padding: '20px',
+      borderRadius: '10px',
+    },
+    bigQRCodeDialogRoot: {
+      '&:hover': {
+        cursor: 'zoom-out',
+      },
+    },
+  })
+);
+
+const ScanQRStep: React.FC = () => {
+  const classes = useStyles();
+  const { isDarkTheme } = useContext(SettingsContext);
+
+  const [isQRCodeMagnified, setIsQRCodeMagnified] = useState(false);
+
+  return (
+    <>
+      <div style={{ textAlign: 'center' }}>
+        <Text className="bp3-text">Scan the QR code</Text>
+        <Text className="bp3-text-muted">
+          ( make sure your computer and device are connected on same WiFi )
+        </Text>
+      </div>
+      <div>
+        <Tooltip content="Click to make bigger" position={Position.LEFT}>
+          <div
+            id="magnify-qr-code-button"
+            className={classes.smallQRCode}
+            onClick={() => setIsQRCodeMagnified(true)}
+          >
+            <QRCode
+              value={`http://${internalIp.v4.sync()}:65000/99999`}
+              level="H"
+              renderAs="svg"
+              // bgColor={isDarkTheme ? '#293742' : '#ffffff'}
+              bgColor="rgba(0,0,0,0.0)"
+              fgColor={isDarkTheme ? '#ffffff' : '#000000'}
+              imageSettings={{
+                // src: `data:image/png;base64, ${contents}`,
+                src:
+                  'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png',
+                width: 40,
+                height: 40,
+              }}
+            />
+          </div>
+        </Tooltip>
+      </div>
+      <div style={{ marginBottom: '10px' }}>
+        <Text className="bp3-text-muted">
+          or type the following address manualy in browser address bar on any
+          device:
+        </Text>
+      </div>
+
+      <Tooltip content="Click to copy" position={Position.LEFT}>
+        <Button
+          intent="primary"
+          icon="duplicate"
+          style={{ borderRadius: '100px' }}
+        >
+          http://255.255.255.255:65000/99999
+        </Button>
+      </Tooltip>
+
+      <Dialog
+        // @ts-ignore
+        id="bp3-qr-code-dialog-root"
+        className={classes.bigQRCodeDialogRoot}
+        isOpen={isQRCodeMagnified}
+        onClose={() => setIsQRCodeMagnified(false)}
+        canEscapeKeyClose
+        canOutsideClickClose
+        transitionDuration={isProduction() ? 700 : 0}
+        style={{ position: 'relative', top: '-30px' }}
+      >
+        <div
+          id="qr-code-dialog-inner"
+          onClick={() => setIsQRCodeMagnified(false)}
+          style={{ paddingTop: '20px', paddingBottom: '13px' }}
+        >
+          <Row between="xs" middle="xs">
+            <Col xs={10}>
+              <H2 style={{ margin: '0px', padding: '0px', marginLeft: '35px' }}>
+                Scan QR Code
+              </H2>
+            </Col>
+            <Col xs={2}>
+              <CloseOverlayButton
+                onClick={() => setIsQRCodeMagnified(false)}
+                style={{
+                  width: '40px',
+                  height: '40px',
+                  position: 'relative',
+                  borderRadius: '100px',
+                }}
+                noDefaultStyles
+              />
+            </Col>
+          </Row>
+          <Row center="xs">
+            <div className={classes.dialogQRWrapper}>
+              <QRCode
+                value={`http://${internalIp.v4.sync()}:65000/99999`}
+                level="H"
+                renderAs="svg"
+                imageSettings={{
+                  src:
+                    'https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png',
+                  width: 25,
+                  height: 25,
+                }}
+                width="390px"
+                height="390px"
+              />
+            </div>
+          </Row>
+        </div>
+      </Dialog>
+    </>
+  );
+};
+
+export default ScanQRStep;
diff --git a/app/components/StepsOfStepper/SuccessStep.spec.tsx b/app/components/StepsOfStepper/SuccessStep.spec.tsx
new file mode 100644
index 0000000..04b5985
--- /dev/null
+++ b/app/components/StepsOfStepper/SuccessStep.spec.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import SuccessStep from './SuccessStep';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+const connectNewDeviceButtonSelector = 'button.bp3-button.bp3-intent-primary';
+
+function setup(handleResetMock = () => {}) {
+  const getWrapper = () =>
+    mount(
+      <>
+        <Router>
+          <SuccessStep handleReset={handleResetMock} />
+        </Router>
+      </>
+    );
+
+  const component = getWrapper();
+
+  const buttons = {
+    connectNewDeviceButton: component.find(connectNewDeviceButtonSelector),
+  };
+
+  return {
+    component,
+    buttons,
+  };
+}
+
+it('should match exact snapshot', () => {
+  const { component } = setup();
+  expect(EnzymeToJson(component)).toMatchSnapshot();
+});
+
+describe('when "Connect New Device" button is clicked', () => {
+  it('should call handleReset injected functional property', () => {
+    const mockHandleResetCallback = jest.fn();
+    const { buttons } = setup(mockHandleResetCallback);
+
+    buttons.connectNewDeviceButton.simulate('click');
+
+    expect(mockHandleResetCallback).toBeCalled();
+  });
+});
diff --git a/app/components/StepsOfStepper/SuccessStep.tsx b/app/components/StepsOfStepper/SuccessStep.tsx
new file mode 100644
index 0000000..44ea34d
--- /dev/null
+++ b/app/components/StepsOfStepper/SuccessStep.tsx
@@ -0,0 +1,93 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { useCallback, useEffect } from 'react';
+import { Button, H5, Icon, Text } from '@blueprintjs/core';
+import { Row, Col } from 'react-flexbox-grid';
+
+interface SuccessStepProps {
+  handleReset: () => void;
+}
+
+const SuccessStep: React.FC<SuccessStepProps> = (props: SuccessStepProps) => {
+  useEffect(() => {
+    document
+      .querySelector('#top-panel-connected-devices-list-button')
+      ?.classList.remove('pulse-not-infinite');
+
+    document
+      .querySelector('#top-panel-connected-devices-list-button')
+      ?.classList.add('pulse-not-infinite');
+
+    setTimeout(() => {
+      document
+        .querySelector('#top-panel-connected-devices-list-button')
+        ?.classList.remove('pulse-not-infinite');
+    }, 4000);
+  }, []);
+
+  const handleTextConnectedListMouseEnter = useCallback(() => {
+    document
+      .querySelector('#top-panel-connected-devices-list-button')
+      ?.classList.add('pulsing');
+  }, []);
+
+  const handleTextConnectedListMouseLeave = useCallback(() => {
+    document
+      .querySelector('#top-panel-connected-devices-list-button')
+      ?.classList.remove('pulsing');
+  }, []);
+
+  return (
+    <Col
+      xs={8}
+      md={6}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+      }}
+    >
+      <Row center="xs">
+        <Col xs={12}>
+          <Icon icon="endorsed" iconSize={35} color="#0F9960" />
+          <H5>Success!</H5>
+        </Col>
+      </Row>
+      <Row center="xs">
+        <Col xs={10}>
+          <div style={{ marginBottom: '10px' }}>
+            <Text>
+              {`You should see now sharing session started on device you've connected
+      with.`}
+            </Text>
+          </div>
+          <div
+            id="connected-devices-list-text-success"
+            onMouseEnter={handleTextConnectedListMouseEnter}
+            onMouseLeave={handleTextConnectedListMouseLeave}
+            style={{
+              marginBottom: '25px',
+              textDecoration: 'underline dotted',
+            }}
+          >
+            <Text className="">
+              {`
+              You can manage connected devices by clicking "Connected Devices"
+              button in top panel
+              `}
+            </Text>
+          </div>
+        </Col>
+      </Row>
+      <Button
+        intent="primary"
+        onClick={props.handleReset}
+        icon="repeat"
+        style={{ borderRadius: '100px' }}
+      >
+        Connect New Device
+      </Button>
+    </Col>
+  );
+};
+
+export default SuccessStep;
diff --git a/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap
new file mode 100644
index 0000000..0adaf45
--- /dev/null
+++ b/app/components/StepsOfStepper/__snapshots__/ChooseAppOrScreeenStep.spec.tsx.snap
@@ -0,0 +1,250 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <ChooseAppOrScreeenStep
+      handleNextApplicationWindow={[Function]}
+      handleNextEntireScreen={[Function]}
+    >
+      <div
+        style={
+          Object {
+            "marginBottom": "10px",
+          }
+        }
+      >
+        <Blueprint3.Text>
+          <div
+            className=""
+          >
+            Choose Entire Screen or App window you want to view on other device
+          </div>
+        </Blueprint3.Text>
+      </div>
+      <ShareEntireScreenOrAppWindowControlGroup
+        handleNextApplicationWindow={[Function]}
+        handleNextEntireScreen={[Function]}
+      >
+        <Blueprint3.ControlGroup
+          className="makeStyles-controlGroupRoot-1"
+          fill={true}
+          id="share-screen-or-app-btn-group"
+          vertical={false}
+        >
+          <div
+            className="bp3-control-group bp3-fill makeStyles-controlGroupRoot-1"
+            id="share-screen-or-app-btn-group"
+          >
+            <Blueprint3.Button
+              className="makeStyles-shareEntireScreenButton-2"
+              intent="primary"
+              onClick={[Function]}
+            >
+              <button
+                className="bp3-button bp3-intent-primary makeStyles-shareEntireScreenButton-2"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                type="button"
+              >
+                <Blueprint3.Icon
+                  key="leftIcon"
+                />
+                <span
+                  className="bp3-button-text"
+                  key="text"
+                >
+                  <Blueprint3.Icon
+                    className="makeStyles-shareEntireScreenButtonIcon-3"
+                    color="white"
+                    icon="desktop"
+                    iconSize={100}
+                  >
+                    <span
+                      className="bp3-icon bp3-icon-desktop makeStyles-shareEntireScreenButtonIcon-3"
+                      icon="desktop"
+                    >
+                      <svg
+                        data-icon="desktop"
+                        fill="white"
+                        height={100}
+                        viewBox="0 0 20 20"
+                        width={100}
+                      >
+                        <desc>
+                          desktop
+                        </desc>
+                        <path
+                          d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                          fillRule="evenodd"
+                          key="0"
+                        />
+                      </svg>
+                    </span>
+                  </Blueprint3.Icon>
+                  <Blueprint3.Text
+                    className="bp3-running-text"
+                  >
+                    <div
+                      className="bp3-running-text"
+                    >
+                      Entire Screen
+                    </div>
+                  </Blueprint3.Text>
+                </span>
+                <Blueprint3.Icon
+                  key="rightIcon"
+                />
+              </button>
+            </Blueprint3.Button>
+            <Blueprint3.Button
+              className="makeStyles-shareAppButton-4"
+              intent="primary"
+              onClick={[Function]}
+            >
+              <button
+                className="bp3-button bp3-intent-primary makeStyles-shareAppButton-4"
+                onClick={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                type="button"
+              >
+                <Blueprint3.Icon
+                  key="leftIcon"
+                />
+                <span
+                  className="bp3-button-text"
+                  key="text"
+                >
+                  <Blueprint3.Icon
+                    className="makeStyles-shareAppButtonIcon-5"
+                    color="white"
+                    icon="application"
+                    iconSize={100}
+                  >
+                    <span
+                      className="bp3-icon bp3-icon-application makeStyles-shareAppButtonIcon-5"
+                      icon="application"
+                    >
+                      <svg
+                        data-icon="application"
+                        fill="white"
+                        height={100}
+                        viewBox="0 0 20 20"
+                        width={100}
+                      >
+                        <desc>
+                          application
+                        </desc>
+                        <path
+                          d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
+                          fillRule="evenodd"
+                          key="0"
+                        />
+                      </svg>
+                    </span>
+                  </Blueprint3.Icon>
+                  <Blueprint3.Text
+                    className="bp3-running-text"
+                  >
+                    <div
+                      className="bp3-running-text"
+                    >
+                      Application Window
+                    </div>
+                  </Blueprint3.Text>
+                </span>
+                <Blueprint3.Icon
+                  key="rightIcon"
+                />
+              </button>
+            </Blueprint3.Button>
+            <Blueprint3.Button
+              active={true}
+              className="makeStyles-orDecorationButton-6"
+            >
+              <button
+                className="bp3-button bp3-active makeStyles-orDecorationButton-6"
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                type="button"
+              >
+                <Blueprint3.Icon
+                  key="leftIcon"
+                />
+                <span
+                  className="bp3-button-text"
+                  key="text"
+                >
+                  OR
+                </span>
+                <Blueprint3.Icon
+                  key="rightIcon"
+                />
+              </button>
+            </Blueprint3.Button>
+          </div>
+        </Blueprint3.ControlGroup>
+        <ChooseAppOrScreenOverlay
+          handleClose={[Function]}
+          handleNextApplicationWindow={[Function]}
+          handleNextEntireScreen={[Function]}
+          isChooseAppOrScreenOverlayOpen={false}
+          isEntireScreenToShareChosen={false}
+        >
+          <Blueprint3.Dialog
+            autoFocus={true}
+            canEscapeKeyClose={true}
+            canOutsideClickClose={true}
+            className="makeStyles-dialogRoot-7 choose-app-or-screen-dialog"
+            enforceFocus={true}
+            hasBackdrop={true}
+            isOpen={false}
+            onClose={[Function]}
+            transitionDuration={0}
+            usePortal={true}
+          >
+            <Blueprint3.Overlay
+              autoFocus={true}
+              backdropProps={Object {}}
+              canEscapeKeyClose={true}
+              canOutsideClickClose={true}
+              className="bp3-overlay-scroll-container"
+              enforceFocus={true}
+              hasBackdrop={true}
+              isOpen={false}
+              lazy={true}
+              onClose={[Function]}
+              transitionDuration={0}
+              transitionName="bp3-overlay"
+              usePortal={true}
+            />
+          </Blueprint3.Dialog>
+        </ChooseAppOrScreenOverlay>
+      </ShareEntireScreenOrAppWindowControlGroup>
+    </ChooseAppOrScreeenStep>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap
new file mode 100644
index 0000000..3e67f06
--- /dev/null
+++ b/app/components/StepsOfStepper/__snapshots__/ConfirmStep.spec.tsx.snap
@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <ConfirmStep
+      device={Object {}}
+    >
+      <div
+        style={
+          Object {
+            "marginBottom": "10px",
+          }
+        }
+      >
+        <Blueprint3.Text>
+          <div
+            className=""
+          >
+            Check if all is OK and click "Confirm"
+          </div>
+        </Blueprint3.Text>
+      </div>
+      <Blueprint3.Card
+        elevation={0}
+        interactive={false}
+        style={
+          Object {
+            "marginBottom": "10px",
+          }
+        }
+      >
+        <div
+          className="bp3-card bp3-elevation-0"
+          style={
+            Object {
+              "marginBottom": "10px",
+            }
+          }
+        >
+          <Blueprint3.Text>
+            <div
+              className=""
+            >
+              Device: undefined
+            </div>
+          </Blueprint3.Text>
+          <Blueprint3.Text>
+            <div
+              className=""
+            >
+              Device IP: undefined
+            </div>
+          </Blueprint3.Text>
+          <Blueprint3.Text>
+            <div
+              className=""
+            >
+              Device OS: undefined
+            </div>
+          </Blueprint3.Text>
+          <Blueprint3.Text>
+            <div
+              className=""
+            >
+              Session ID: undefined
+            </div>
+          </Blueprint3.Text>
+        </div>
+      </Blueprint3.Card>
+      <div
+        style={
+          Object {
+            "marginBottom": "10px",
+          }
+        }
+      >
+        <Blueprint3.Text
+          className="bp3-text-muted"
+        >
+          <div
+            className="bp3-text-muted"
+          >
+            Click "Back" if you need to change something
+          </div>
+        </Blueprint3.Text>
+      </div>
+    </ConfirmStep>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap
new file mode 100644
index 0000000..c639e09
--- /dev/null
+++ b/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap
@@ -0,0 +1,1198 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot on each step 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <IntermediateStep
+      activeStep={0}
+      handleBack={[Function]}
+      handleNext={[Function]}
+      handleNextApplicationWindow={[Function]}
+      handleNextEntireScreen={[Function]}
+      resetPendingConnectionDevice={[Function]}
+      resetUserAllowedConnection={[Function]}
+      steps={
+        Array [
+          "a",
+          "b",
+          "c",
+        ]
+      }
+    >
+      <Col
+        style={
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "column",
+            "height": "260px",
+            "justifyContent": "center",
+          }
+        }
+        xs={12}
+      >
+        <div
+          className="col-xs-12"
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "column",
+              "height": "260px",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <ScanQRStep>
+            <div
+              style={
+                Object {
+                  "textAlign": "center",
+                }
+              }
+            >
+              <Blueprint3.Text
+                className="bp3-text"
+              >
+                <div
+                  className="bp3-text"
+                >
+                  Scan the QR code
+                </div>
+              </Blueprint3.Text>
+              <Blueprint3.Text
+                className="bp3-text-muted"
+              >
+                <div
+                  className="bp3-text-muted"
+                >
+                  ( make sure your computer and device are connected on same WiFi )
+                </div>
+              </Blueprint3.Text>
+            </div>
+            <div>
+              <Blueprint3.Tooltip
+                content="Click to make bigger"
+                hoverCloseDelay={0}
+                hoverOpenDelay={100}
+                position="left"
+                transitionDuration={100}
+              >
+                <Blueprint3.Popover
+                  autoFocus={false}
+                  boundary="scrollParent"
+                  canEscapeKeyClose={false}
+                  captureDismiss={false}
+                  content="Click to make bigger"
+                  defaultIsOpen={false}
+                  disabled={false}
+                  enforceFocus={false}
+                  fill={false}
+                  hasBackdrop={false}
+                  hoverCloseDelay={0}
+                  hoverOpenDelay={100}
+                  inheritDarkTheme={true}
+                  interactionKind="hover-target"
+                  lazy={true}
+                  minimal={false}
+                  modifiers={Object {}}
+                  openOnTargetFocus={true}
+                  popoverClassName="bp3-tooltip"
+                  position="left"
+                  targetTagName="span"
+                  transitionDuration={100}
+                  usePortal={true}
+                  wrapperTagName="span"
+                >
+                  <Manager>
+                    <span
+                      className="bp3-popover-wrapper"
+                    >
+                      <Reference
+                        innerRef={[Function]}
+                      >
+                        <InnerReference
+                          innerRef={[Function]}
+                          setReferenceNode={[Function]}
+                        >
+                          <Blueprint3.ResizeSensor
+                            onResize={[Function]}
+                          >
+                            <span
+                              className="bp3-popover-target"
+                              onBlur={[Function]}
+                              onFocus={[Function]}
+                              onMouseEnter={[Function]}
+                              onMouseLeave={[Function]}
+                            >
+                              <div
+                                className="makeStyles-smallQRCode-1"
+                                id="magnify-qr-code-button"
+                                key=".0"
+                                onClick={[Function]}
+                                tabIndex={0}
+                              >
+                                <QRCode
+                                  bgColor="rgba(0,0,0,0.0)"
+                                  fgColor="#000000"
+                                  imageSettings={
+                                    Object {
+                                      "height": 40,
+                                      "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                                      "width": 40,
+                                    }
+                                  }
+                                  includeMargin={false}
+                                  level="H"
+                                  renderAs="svg"
+                                  size={128}
+                                  value="http://192.168.31.214:65000/99999"
+                                >
+                                  <QRCodeSVG
+                                    bgColor="rgba(0,0,0,0.0)"
+                                    fgColor="#000000"
+                                    imageSettings={
+                                      Object {
+                                        "height": 40,
+                                        "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                                        "width": 40,
+                                      }
+                                    }
+                                    includeMargin={false}
+                                    level="H"
+                                    size={128}
+                                    value="http://192.168.31.214:65000/99999"
+                                  >
+                                    <svg
+                                      height={128}
+                                      shapeRendering="crispEdges"
+                                      viewBox="0 0 33 33"
+                                      width={128}
+                                    >
+                                      <path
+                                        d="M0,0 h33v33H0z"
+                                        fill="rgba(0,0,0,0.0)"
+                                      />
+                                      <path
+                                        d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h6v1H12zM19 0h2v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM15 1h1v1H15zM17 1h2v1H17zM22 1h1v1H22zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h1v1H11zM13 2h1v1H13zM15 2h1v1H15zM17 2h2v1H17zM20 2h2v1H20zM23 2h1v1H23zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h4v1H10zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h1v1H11zM13 4h1v1H13zM15 4h1v1H15zM17 4h2v1H17zM21 4h4v1H21zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM10 5h1v1H10zM14 5h1v1H14zM16 5h1v1H16zM20 5h3v1H20zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h6v1H8zM15 7h2v1H15zM18 7h1v1H18zM20 7h3v1H20zM24 7h1v1H24zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM11 8h4v1H11zM16 8h1v1H16zM19 8h1v1H19zM23 8h1v1H23zM25 8h3v1H25zM30,8 h3v1H30zM0 9h2v1H0zM3 9h1v1H3zM5 9h1v1H5zM7 9h1v1H7zM9 9h1v1H9zM12 9h2v1H12zM16 9h2v1H16zM20 9h1v1H20zM22 9h5v1H22zM29 9h1v1H29zM31,9 h2v1H31zM0 10h2v1H0zM5 10h6v1H5zM13 10h2v1H13zM17 10h5v1H17zM24 10h1v1H24zM27 10h1v1H27zM0 11h2v1H0zM4 11h2v1H4zM8 11h3v1H8zM15 11h1v1H15zM21 11h3v1H21zM25 11h1v1H25zM30 11h2v1H30zM0 12h7v1H0zM11 12h2v1H11zM15 12h1v1H15zM19 12h1v1H19zM21 12h1v1H21zM24 12h1v1H24zM28 12h2v1H28zM32,12 h1v1H32zM8 13h1v1H8zM10 13h1v1H10zM14 13h1v1H14zM16 13h2v1H16zM19 13h2v1H19zM23 13h5v1H23zM30 13h1v1H30zM32,13 h1v1H32zM0 14h2v1H0zM3 14h1v1H3zM6 14h1v1H6zM11 14h5v1H11zM17 14h2v1H17zM20 14h1v1H20zM22 14h1v1H22zM24 14h2v1H24zM30 14h2v1H30zM0 15h2v1H0zM7 15h1v1H7zM11 15h1v1H11zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM20 15h3v1H20zM24 15h1v1H24zM27 15h2v1H27zM30 15h2v1H30zM0 16h1v1H0zM2 16h1v1H2zM4 16h4v1H4zM9 16h1v1H9zM11 16h1v1H11zM18 16h3v1H18zM23 16h2v1H23zM28 16h1v1H28zM0 17h2v1H0zM3 17h1v1H3zM5 17h1v1H5zM13 17h3v1H13zM17 17h2v1H17zM21 17h7v1H21zM31,17 h2v1H31zM0 18h2v1H0zM4 18h4v1H4zM9 18h3v1H9zM14 18h1v1H14zM18 18h1v1H18zM20 18h1v1H20zM24 18h1v1H24zM26 18h1v1H26zM30 18h1v1H30zM2 19h1v1H2zM4 19h1v1H4zM9 19h1v1H9zM11 19h2v1H11zM14 19h1v1H14zM20 19h6v1H20zM27 19h1v1H27zM29 19h2v1H29zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM10 20h1v1H10zM13 20h2v1H13zM16 20h1v1H16zM18 20h1v1H18zM20 20h1v1H20zM23 20h1v1H23zM28 20h2v1H28zM0 21h1v1H0zM3 21h3v1H3zM10 21h1v1H10zM12 21h3v1H12zM16 21h1v1H16zM19 21h1v1H19zM21 21h7v1H21zM30 21h1v1H30zM32,21 h1v1H32zM0 22h1v1H0zM2 22h3v1H2zM6 22h3v1H6zM13 22h1v1H13zM15 22h7v1H15zM27 22h2v1H27zM0 23h1v1H0zM2 23h2v1H2zM7 23h2v1H7zM10 23h2v1H10zM14 23h2v1H14zM17 23h3v1H17zM21 23h1v1H21zM24 23h1v1H24zM28 23h1v1H28zM30 23h2v1H30zM0 24h1v1H0zM6 24h1v1H6zM8 24h1v1H8zM10 24h1v1H10zM12 24h1v1H12zM17 24h1v1H17zM19 24h1v1H19zM23 24h6v1H23zM8 25h1v1H8zM10 25h1v1H10zM17 25h2v1H17zM22 25h3v1H22zM28 25h1v1H28zM30,25 h3v1H30zM0 26h7v1H0zM10 26h1v1H10zM14 26h3v1H14zM18 26h1v1H18zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h2v1H11zM15 27h4v1H15zM20 27h1v1H20zM24 27h1v1H24zM28 27h1v1H28zM30 27h2v1H30zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM8 28h2v1H8zM11 28h2v1H11zM14 28h2v1H14zM17 28h1v1H17zM21 28h2v1H21zM24 28h6v1H24zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h2v1H8zM11 29h1v1H11zM14 29h3v1H14zM18 29h3v1H18zM28 29h2v1H28zM32,29 h1v1H32zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h1v1H8zM10 30h5v1H10zM16 30h5v1H16zM22 30h1v1H22zM25 30h2v1H25zM29 30h1v1H29zM0 31h1v1H0zM6 31h1v1H6zM12 31h3v1H12zM16 31h1v1H16zM20 31h1v1H20zM23 31h1v1H23zM25 31h1v1H25zM27 31h1v1H27zM30 31h1v1H30zM0 32h7v1H0zM9 32h1v1H9zM11 32h1v1H11zM13 32h1v1H13zM19 32h1v1H19zM21 32h1v1H21zM24 32h1v1H24zM26 32h1v1H26zM29 32h1v1H29zM31 32h1v1H31z"
+                                        fill="#000000"
+                                      />
+                                      <image
+                                        height={10.3125}
+                                        preserveAspectRatio="none"
+                                        width={10.3125}
+                                        x={11.34375}
+                                        xlinkHref="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png"
+                                        y={11.34375}
+                                      />
+                                    </svg>
+                                  </QRCodeSVG>
+                                </QRCode>
+                              </div>
+                            </span>
+                          </Blueprint3.ResizeSensor>
+                        </InnerReference>
+                      </Reference>
+                      <Blueprint3.Overlay
+                        autoFocus={false}
+                        backdropClassName="bp3-popover-backdrop"
+                        backdropProps={Object {}}
+                        canEscapeKeyClose={false}
+                        canOutsideClickClose={false}
+                        enforceFocus={false}
+                        hasBackdrop={false}
+                        isOpen={false}
+                        lazy={true}
+                        onClose={[Function]}
+                        transitionDuration={100}
+                        transitionName="bp3-popover"
+                        usePortal={true}
+                      />
+                    </span>
+                  </Manager>
+                </Blueprint3.Popover>
+              </Blueprint3.Tooltip>
+            </div>
+            <div
+              style={
+                Object {
+                  "marginBottom": "10px",
+                }
+              }
+            >
+              <Blueprint3.Text
+                className="bp3-text-muted"
+              >
+                <div
+                  className="bp3-text-muted"
+                >
+                  or type the following address manualy in browser address bar on any device:
+                </div>
+              </Blueprint3.Text>
+            </div>
+            <Blueprint3.Tooltip
+              content="Click to copy"
+              hoverCloseDelay={0}
+              hoverOpenDelay={100}
+              position="left"
+              transitionDuration={100}
+            >
+              <Blueprint3.Popover
+                autoFocus={false}
+                boundary="scrollParent"
+                canEscapeKeyClose={false}
+                captureDismiss={false}
+                content="Click to copy"
+                defaultIsOpen={false}
+                disabled={false}
+                enforceFocus={false}
+                fill={false}
+                hasBackdrop={false}
+                hoverCloseDelay={0}
+                hoverOpenDelay={100}
+                inheritDarkTheme={true}
+                interactionKind="hover-target"
+                lazy={true}
+                minimal={false}
+                modifiers={Object {}}
+                openOnTargetFocus={true}
+                popoverClassName="bp3-tooltip"
+                position="left"
+                targetTagName="span"
+                transitionDuration={100}
+                usePortal={true}
+                wrapperTagName="span"
+              >
+                <Manager>
+                  <span
+                    className="bp3-popover-wrapper"
+                  >
+                    <Reference
+                      innerRef={[Function]}
+                    >
+                      <InnerReference
+                        innerRef={[Function]}
+                        setReferenceNode={[Function]}
+                      >
+                        <Blueprint3.ResizeSensor
+                          onResize={[Function]}
+                        >
+                          <span
+                            className="bp3-popover-target"
+                            onBlur={[Function]}
+                            onFocus={[Function]}
+                            onMouseEnter={[Function]}
+                            onMouseLeave={[Function]}
+                          >
+                            <Blueprint3.Button
+                              className=""
+                              icon="duplicate"
+                              intent="primary"
+                              key=".0"
+                              style={
+                                Object {
+                                  "borderRadius": "100px",
+                                }
+                              }
+                              tabIndex={0}
+                            >
+                              <button
+                                className="bp3-button bp3-intent-primary"
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                style={
+                                  Object {
+                                    "borderRadius": "100px",
+                                  }
+                                }
+                                tabIndex={0}
+                                type="button"
+                              >
+                                <Blueprint3.Icon
+                                  icon="duplicate"
+                                  key="leftIcon"
+                                >
+                                  <span
+                                    className="bp3-icon bp3-icon-duplicate"
+                                    icon="duplicate"
+                                  >
+                                    <svg
+                                      data-icon="duplicate"
+                                      height={16}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                    >
+                                      <desc>
+                                        duplicate
+                                      </desc>
+                                      <path
+                                        d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
+                                        fillRule="evenodd"
+                                        key="0"
+                                      />
+                                    </svg>
+                                  </span>
+                                </Blueprint3.Icon>
+                                <span
+                                  className="bp3-button-text"
+                                  key="text"
+                                >
+                                  http://255.255.255.255:65000/99999
+                                </span>
+                                <Blueprint3.Icon
+                                  key="rightIcon"
+                                />
+                              </button>
+                            </Blueprint3.Button>
+                          </span>
+                        </Blueprint3.ResizeSensor>
+                      </InnerReference>
+                    </Reference>
+                    <Blueprint3.Overlay
+                      autoFocus={false}
+                      backdropClassName="bp3-popover-backdrop"
+                      backdropProps={Object {}}
+                      canEscapeKeyClose={false}
+                      canOutsideClickClose={false}
+                      enforceFocus={false}
+                      hasBackdrop={false}
+                      isOpen={false}
+                      lazy={true}
+                      onClose={[Function]}
+                      transitionDuration={100}
+                      transitionName="bp3-popover"
+                      usePortal={true}
+                    />
+                  </span>
+                </Manager>
+              </Blueprint3.Popover>
+            </Blueprint3.Tooltip>
+            <Blueprint3.Dialog
+              canEscapeKeyClose={true}
+              canOutsideClickClose={true}
+              className="makeStyles-bigQRCodeDialogRoot-3"
+              id="bp3-qr-code-dialog-root"
+              isOpen={false}
+              onClose={[Function]}
+              style={
+                Object {
+                  "position": "relative",
+                  "top": "-30px",
+                }
+              }
+              transitionDuration={0}
+            >
+              <Blueprint3.Overlay
+                autoFocus={true}
+                backdropProps={Object {}}
+                canEscapeKeyClose={true}
+                canOutsideClickClose={true}
+                className="bp3-overlay-scroll-container"
+                enforceFocus={true}
+                hasBackdrop={true}
+                id="bp3-qr-code-dialog-root"
+                isOpen={false}
+                lazy={true}
+                onClose={[Function]}
+                style={
+                  Object {
+                    "position": "relative",
+                    "top": "-30px",
+                  }
+                }
+                transitionDuration={0}
+                transitionName="bp3-overlay"
+                usePortal={true}
+              />
+            </Blueprint3.Dialog>
+          </ScanQRStep>
+          <Blueprint3.Button
+            icon="chevron-left"
+            intent="danger"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "100px",
+                "display": "none",
+                "marginTop": "10px",
+              }
+            }
+            text="No, I need to share other thing"
+          >
+            <button
+              className="bp3-button bp3-intent-danger"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              style={
+                Object {
+                  "borderRadius": "100px",
+                  "display": "none",
+                  "marginTop": "10px",
+                }
+              }
+              type="button"
+            >
+              <Blueprint3.Icon
+                icon="chevron-left"
+                key="leftIcon"
+              >
+                <span
+                  className="bp3-icon bp3-icon-chevron-left"
+                  icon="chevron-left"
+                >
+                  <svg
+                    data-icon="chevron-left"
+                    height={16}
+                    viewBox="0 0 16 16"
+                    width={16}
+                  >
+                    <desc>
+                      chevron-left
+                    </desc>
+                    <path
+                      d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
+                      fillRule="evenodd"
+                      key="0"
+                    />
+                  </svg>
+                </span>
+              </Blueprint3.Icon>
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                No, I need to share other thing
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+        </div>
+      </Col>
+    </IntermediateStep>
+  </Router>
+</BrowserRouter>
+`;
+
+exports[`should match exact snapshot on each step 2`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <IntermediateStep
+      activeStep={1}
+      handleBack={[Function]}
+      handleNext={[Function]}
+      handleNextApplicationWindow={[Function]}
+      handleNextEntireScreen={[Function]}
+      resetPendingConnectionDevice={[Function]}
+      resetUserAllowedConnection={[Function]}
+      steps={
+        Array [
+          "a",
+          "b",
+          "c",
+        ]
+      }
+    >
+      <Col
+        style={
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "column",
+            "height": "260px",
+            "justifyContent": "center",
+          }
+        }
+        xs={12}
+      >
+        <div
+          className="col-xs-12"
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "column",
+              "height": "260px",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <ChooseAppOrScreeenStep
+            handleNextApplicationWindow={[Function]}
+            handleNextEntireScreen={[Function]}
+          >
+            <div
+              style={
+                Object {
+                  "marginBottom": "10px",
+                }
+              }
+            >
+              <Blueprint3.Text>
+                <div
+                  className=""
+                >
+                  Choose Entire Screen or App window you want to view on other device
+                </div>
+              </Blueprint3.Text>
+            </div>
+            <ShareEntireScreenOrAppWindowControlGroup
+              handleNextApplicationWindow={[Function]}
+              handleNextEntireScreen={[Function]}
+            >
+              <Blueprint3.ControlGroup
+                className="makeStyles-controlGroupRoot-4"
+                fill={true}
+                id="share-screen-or-app-btn-group"
+                vertical={false}
+              >
+                <div
+                  className="bp3-control-group bp3-fill makeStyles-controlGroupRoot-4"
+                  id="share-screen-or-app-btn-group"
+                >
+                  <Blueprint3.Button
+                    className="makeStyles-shareEntireScreenButton-5"
+                    intent="primary"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="bp3-button bp3-intent-primary makeStyles-shareEntireScreenButton-5"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      type="button"
+                    >
+                      <Blueprint3.Icon
+                        key="leftIcon"
+                      />
+                      <span
+                        className="bp3-button-text"
+                        key="text"
+                      >
+                        <Blueprint3.Icon
+                          className="makeStyles-shareEntireScreenButtonIcon-6"
+                          color="white"
+                          icon="desktop"
+                          iconSize={100}
+                        >
+                          <span
+                            className="bp3-icon bp3-icon-desktop makeStyles-shareEntireScreenButtonIcon-6"
+                            icon="desktop"
+                          >
+                            <svg
+                              data-icon="desktop"
+                              fill="white"
+                              height={100}
+                              viewBox="0 0 20 20"
+                              width={100}
+                            >
+                              <desc>
+                                desktop
+                              </desc>
+                              <path
+                                d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                                fillRule="evenodd"
+                                key="0"
+                              />
+                            </svg>
+                          </span>
+                        </Blueprint3.Icon>
+                        <Blueprint3.Text
+                          className="bp3-running-text"
+                        >
+                          <div
+                            className="bp3-running-text"
+                          >
+                            Entire Screen
+                          </div>
+                        </Blueprint3.Text>
+                      </span>
+                      <Blueprint3.Icon
+                        key="rightIcon"
+                      />
+                    </button>
+                  </Blueprint3.Button>
+                  <Blueprint3.Button
+                    className="makeStyles-shareAppButton-7"
+                    intent="primary"
+                    onClick={[Function]}
+                  >
+                    <button
+                      className="bp3-button bp3-intent-primary makeStyles-shareAppButton-7"
+                      onClick={[Function]}
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      type="button"
+                    >
+                      <Blueprint3.Icon
+                        key="leftIcon"
+                      />
+                      <span
+                        className="bp3-button-text"
+                        key="text"
+                      >
+                        <Blueprint3.Icon
+                          className="makeStyles-shareAppButtonIcon-8"
+                          color="white"
+                          icon="application"
+                          iconSize={100}
+                        >
+                          <span
+                            className="bp3-icon bp3-icon-application makeStyles-shareAppButtonIcon-8"
+                            icon="application"
+                          >
+                            <svg
+                              data-icon="application"
+                              fill="white"
+                              height={100}
+                              viewBox="0 0 20 20"
+                              width={100}
+                            >
+                              <desc>
+                                application
+                              </desc>
+                              <path
+                                d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
+                                fillRule="evenodd"
+                                key="0"
+                              />
+                            </svg>
+                          </span>
+                        </Blueprint3.Icon>
+                        <Blueprint3.Text
+                          className="bp3-running-text"
+                        >
+                          <div
+                            className="bp3-running-text"
+                          >
+                            Application Window
+                          </div>
+                        </Blueprint3.Text>
+                      </span>
+                      <Blueprint3.Icon
+                        key="rightIcon"
+                      />
+                    </button>
+                  </Blueprint3.Button>
+                  <Blueprint3.Button
+                    active={true}
+                    className="makeStyles-orDecorationButton-9"
+                  >
+                    <button
+                      className="bp3-button bp3-active makeStyles-orDecorationButton-9"
+                      onKeyDown={[Function]}
+                      onKeyUp={[Function]}
+                      type="button"
+                    >
+                      <Blueprint3.Icon
+                        key="leftIcon"
+                      />
+                      <span
+                        className="bp3-button-text"
+                        key="text"
+                      >
+                        OR
+                      </span>
+                      <Blueprint3.Icon
+                        key="rightIcon"
+                      />
+                    </button>
+                  </Blueprint3.Button>
+                </div>
+              </Blueprint3.ControlGroup>
+              <ChooseAppOrScreenOverlay
+                handleClose={[Function]}
+                handleNextApplicationWindow={[Function]}
+                handleNextEntireScreen={[Function]}
+                isChooseAppOrScreenOverlayOpen={false}
+                isEntireScreenToShareChosen={false}
+              >
+                <Blueprint3.Dialog
+                  autoFocus={true}
+                  canEscapeKeyClose={true}
+                  canOutsideClickClose={true}
+                  className="makeStyles-dialogRoot-10 choose-app-or-screen-dialog"
+                  enforceFocus={true}
+                  hasBackdrop={true}
+                  isOpen={false}
+                  onClose={[Function]}
+                  transitionDuration={0}
+                  usePortal={true}
+                >
+                  <Blueprint3.Overlay
+                    autoFocus={true}
+                    backdropProps={Object {}}
+                    canEscapeKeyClose={true}
+                    canOutsideClickClose={true}
+                    className="bp3-overlay-scroll-container"
+                    enforceFocus={true}
+                    hasBackdrop={true}
+                    isOpen={false}
+                    lazy={true}
+                    onClose={[Function]}
+                    transitionDuration={0}
+                    transitionName="bp3-overlay"
+                    usePortal={true}
+                  />
+                </Blueprint3.Dialog>
+              </ChooseAppOrScreenOverlay>
+            </ShareEntireScreenOrAppWindowControlGroup>
+          </ChooseAppOrScreeenStep>
+          <Blueprint3.Button
+            intent="none"
+            onClick={[Function]}
+            rightIcon="chevron-right"
+            style={
+              Object {
+                "borderRadius": "100px",
+                "display": "none",
+                "textAlign": "center",
+                "width": "100%",
+              }
+            }
+          >
+            <button
+              className="bp3-button"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              style={
+                Object {
+                  "borderRadius": "100px",
+                  "display": "none",
+                  "textAlign": "center",
+                  "width": "100%",
+                }
+              }
+              type="button"
+            >
+              <Blueprint3.Icon
+                key="leftIcon"
+              />
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                Next
+              </span>
+              <Blueprint3.Icon
+                icon="chevron-right"
+                key="rightIcon"
+              >
+                <span
+                  className="bp3-icon bp3-icon-chevron-right"
+                  icon="chevron-right"
+                >
+                  <svg
+                    data-icon="chevron-right"
+                    height={16}
+                    viewBox="0 0 16 16"
+                    width={16}
+                  >
+                    <desc>
+                      chevron-right
+                    </desc>
+                    <path
+                      d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
+                      fillRule="evenodd"
+                      key="0"
+                    />
+                  </svg>
+                </span>
+              </Blueprint3.Icon>
+            </button>
+          </Blueprint3.Button>
+          <Blueprint3.Button
+            icon="chevron-left"
+            intent="danger"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "100px",
+                "display": "none",
+                "marginTop": "10px",
+              }
+            }
+            text="No, I need to share other thing"
+          >
+            <button
+              className="bp3-button bp3-intent-danger"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              style={
+                Object {
+                  "borderRadius": "100px",
+                  "display": "none",
+                  "marginTop": "10px",
+                }
+              }
+              type="button"
+            >
+              <Blueprint3.Icon
+                icon="chevron-left"
+                key="leftIcon"
+              >
+                <span
+                  className="bp3-icon bp3-icon-chevron-left"
+                  icon="chevron-left"
+                >
+                  <svg
+                    data-icon="chevron-left"
+                    height={16}
+                    viewBox="0 0 16 16"
+                    width={16}
+                  >
+                    <desc>
+                      chevron-left
+                    </desc>
+                    <path
+                      d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
+                      fillRule="evenodd"
+                      key="0"
+                    />
+                  </svg>
+                </span>
+              </Blueprint3.Icon>
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                No, I need to share other thing
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+        </div>
+      </Col>
+    </IntermediateStep>
+  </Router>
+</BrowserRouter>
+`;
+
+exports[`should match exact snapshot on each step 3`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <IntermediateStep
+      activeStep={2}
+      handleBack={[Function]}
+      handleNext={[Function]}
+      handleNextApplicationWindow={[Function]}
+      handleNextEntireScreen={[Function]}
+      resetPendingConnectionDevice={[Function]}
+      resetUserAllowedConnection={[Function]}
+      steps={
+        Array [
+          "a",
+          "b",
+          "c",
+        ]
+      }
+    >
+      <Col
+        style={
+          Object {
+            "alignItems": "center",
+            "display": "flex",
+            "flexDirection": "column",
+            "height": "260px",
+            "justifyContent": "center",
+          }
+        }
+        xs={12}
+      >
+        <div
+          className="col-xs-12"
+          style={
+            Object {
+              "alignItems": "center",
+              "display": "flex",
+              "flexDirection": "column",
+              "height": "260px",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <ConfirmStep
+            device={null}
+          >
+            <div
+              style={
+                Object {
+                  "marginBottom": "10px",
+                }
+              }
+            >
+              <Blueprint3.Text>
+                <div
+                  className=""
+                >
+                  Check if all is OK and click "Confirm"
+                </div>
+              </Blueprint3.Text>
+            </div>
+            <Blueprint3.Card
+              elevation={0}
+              interactive={false}
+              style={
+                Object {
+                  "marginBottom": "10px",
+                }
+              }
+            >
+              <div
+                className="bp3-card bp3-elevation-0"
+                style={
+                  Object {
+                    "marginBottom": "10px",
+                  }
+                }
+              >
+                <Blueprint3.Text>
+                  <div
+                    className=""
+                  >
+                    Device: undefined
+                  </div>
+                </Blueprint3.Text>
+                <Blueprint3.Text>
+                  <div
+                    className=""
+                  >
+                    Device IP: undefined
+                  </div>
+                </Blueprint3.Text>
+                <Blueprint3.Text>
+                  <div
+                    className=""
+                  >
+                    Device OS: undefined
+                  </div>
+                </Blueprint3.Text>
+                <Blueprint3.Text>
+                  <div
+                    className=""
+                  >
+                    Session ID: undefined
+                  </div>
+                </Blueprint3.Text>
+              </div>
+            </Blueprint3.Card>
+            <div
+              style={
+                Object {
+                  "marginBottom": "10px",
+                }
+              }
+            >
+              <Blueprint3.Text
+                className="bp3-text-muted"
+              >
+                <div
+                  className="bp3-text-muted"
+                >
+                  Click "Back" if you need to change something
+                </div>
+              </Blueprint3.Text>
+            </div>
+          </ConfirmStep>
+          <Blueprint3.Button
+            intent="success"
+            onClick={[Function]}
+            rightIcon="small-tick"
+            style={
+              Object {
+                "borderRadius": "100px",
+                "display": "inline",
+                "textAlign": "center",
+                "width": "100%",
+              }
+            }
+          >
+            <button
+              className="bp3-button bp3-intent-success"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              style={
+                Object {
+                  "borderRadius": "100px",
+                  "display": "inline",
+                  "textAlign": "center",
+                  "width": "100%",
+                }
+              }
+              type="button"
+            >
+              <Blueprint3.Icon
+                key="leftIcon"
+              />
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                Confirm
+              </span>
+              <Blueprint3.Icon
+                icon="small-tick"
+                key="rightIcon"
+              >
+                <span
+                  className="bp3-icon bp3-icon-small-tick"
+                  icon="small-tick"
+                >
+                  <svg
+                    data-icon="small-tick"
+                    height={16}
+                    viewBox="0 0 16 16"
+                    width={16}
+                  >
+                    <desc>
+                      small-tick
+                    </desc>
+                    <path
+                      d="M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z"
+                      fillRule="evenodd"
+                      key="0"
+                    />
+                  </svg>
+                </span>
+              </Blueprint3.Icon>
+            </button>
+          </Blueprint3.Button>
+          <Blueprint3.Button
+            icon="chevron-left"
+            intent="danger"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "100px",
+                "display": "inline-block",
+                "marginTop": "10px",
+              }
+            }
+            text="No, I need to share other thing"
+          >
+            <button
+              className="bp3-button bp3-intent-danger"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              style={
+                Object {
+                  "borderRadius": "100px",
+                  "display": "inline-block",
+                  "marginTop": "10px",
+                }
+              }
+              type="button"
+            >
+              <Blueprint3.Icon
+                icon="chevron-left"
+                key="leftIcon"
+              >
+                <span
+                  className="bp3-icon bp3-icon-chevron-left"
+                  icon="chevron-left"
+                >
+                  <svg
+                    data-icon="chevron-left"
+                    height={16}
+                    viewBox="0 0 16 16"
+                    width={16}
+                  >
+                    <desc>
+                      chevron-left
+                    </desc>
+                    <path
+                      d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
+                      fillRule="evenodd"
+                      key="0"
+                    />
+                  </svg>
+                </span>
+              </Blueprint3.Icon>
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                No, I need to share other thing
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+        </div>
+      </Col>
+    </IntermediateStep>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap
new file mode 100644
index 0000000..c40010a
--- /dev/null
+++ b/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap
@@ -0,0 +1,177 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ScanQRStep /> when rendered should match exact snapshot 1`] = `
+<Fragment>
+  <div
+    style={
+      Object {
+        "textAlign": "center",
+      }
+    }
+  >
+    <Blueprint3.Text
+      className="bp3-text"
+    >
+      Scan the QR code
+    </Blueprint3.Text>
+    <Blueprint3.Text
+      className="bp3-text-muted"
+    >
+      ( make sure your computer and device are connected on same WiFi )
+    </Blueprint3.Text>
+  </div>
+  <div>
+    <Blueprint3.Tooltip
+      content="Click to make bigger"
+      hoverCloseDelay={0}
+      hoverOpenDelay={100}
+      position="left"
+      transitionDuration={100}
+    >
+      <div
+        className="makeStyles-smallQRCode-1"
+        id="magnify-qr-code-button"
+        onClick={[Function]}
+      >
+        <QRCode
+          bgColor="rgba(0,0,0,0.0)"
+          fgColor="#000000"
+          imageSettings={
+            Object {
+              "height": 40,
+              "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+              "width": 40,
+            }
+          }
+          includeMargin={false}
+          level="H"
+          renderAs="svg"
+          size={128}
+          value="http://192.168.31.214:65000/99999"
+        />
+      </div>
+    </Blueprint3.Tooltip>
+  </div>
+  <div
+    style={
+      Object {
+        "marginBottom": "10px",
+      }
+    }
+  >
+    <Blueprint3.Text
+      className="bp3-text-muted"
+    >
+      or type the following address manualy in browser address bar on any device:
+    </Blueprint3.Text>
+  </div>
+  <Blueprint3.Tooltip
+    content="Click to copy"
+    hoverCloseDelay={0}
+    hoverOpenDelay={100}
+    position="left"
+    transitionDuration={100}
+  >
+    <Blueprint3.Button
+      icon="duplicate"
+      intent="primary"
+      style={
+        Object {
+          "borderRadius": "100px",
+        }
+      }
+    >
+      http://255.255.255.255:65000/99999
+    </Blueprint3.Button>
+  </Blueprint3.Tooltip>
+  <Blueprint3.Dialog
+    canEscapeKeyClose={true}
+    canOutsideClickClose={true}
+    className="makeStyles-bigQRCodeDialogRoot-3"
+    id="bp3-qr-code-dialog-root"
+    isOpen={false}
+    onClose={[Function]}
+    style={
+      Object {
+        "position": "relative",
+        "top": "-30px",
+      }
+    }
+    transitionDuration={0}
+  >
+    <div
+      id="qr-code-dialog-inner"
+      onClick={[Function]}
+      style={
+        Object {
+          "paddingBottom": "13px",
+          "paddingTop": "20px",
+        }
+      }
+    >
+      <Row
+        between="xs"
+        middle="xs"
+      >
+        <Col
+          xs={10}
+        >
+          <Component
+            style={
+              Object {
+                "margin": "0px",
+                "marginLeft": "35px",
+                "padding": "0px",
+              }
+            }
+          >
+            Scan QR Code
+          </Component>
+        </Col>
+        <Col
+          xs={2}
+        >
+          <CloseOverlayButton
+            noDefaultStyles={true}
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "100px",
+                "height": "40px",
+                "position": "relative",
+                "width": "40px",
+              }
+            }
+          />
+        </Col>
+      </Row>
+      <Row
+        center="xs"
+      >
+        <div
+          className="makeStyles-dialogQRWrapper-2"
+        >
+          <QRCode
+            bgColor="#FFFFFF"
+            fgColor="#000000"
+            height="390px"
+            imageSettings={
+              Object {
+                "height": 25,
+                "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                "width": 25,
+              }
+            }
+            includeMargin={false}
+            level="H"
+            renderAs="svg"
+            size={128}
+            value="http://192.168.31.214:65000/99999"
+            width="390px"
+          />
+        </div>
+      </Row>
+    </div>
+  </Blueprint3.Dialog>
+</Fragment>
+`;
diff --git a/app/components/StepsOfStepper/__snapshots__/SuccessStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/SuccessStep.spec.tsx.snap
new file mode 100644
index 0000000..65292c3
--- /dev/null
+++ b/app/components/StepsOfStepper/__snapshots__/SuccessStep.spec.tsx.snap
@@ -0,0 +1,220 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <SuccessStep
+      handleReset={[Function]}
+    >
+      <Col
+        md={6}
+        style={
+          Object {
+            "display": "flex",
+            "flexDirection": "column",
+            "justifyContent": "center",
+          }
+        }
+        xs={8}
+      >
+        <div
+          className="col-xs-8 col-md-6"
+          style={
+            Object {
+              "display": "flex",
+              "flexDirection": "column",
+              "justifyContent": "center",
+            }
+          }
+        >
+          <Row
+            center="xs"
+          >
+            <div
+              className="row center-xs"
+            >
+              <Col
+                xs={12}
+              >
+                <div
+                  className="col-xs-12"
+                >
+                  <Blueprint3.Icon
+                    color="#0F9960"
+                    icon="endorsed"
+                    iconSize={35}
+                  >
+                    <span
+                      className="bp3-icon bp3-icon-endorsed"
+                      icon="endorsed"
+                    >
+                      <svg
+                        data-icon="endorsed"
+                        fill="#0F9960"
+                        height={35}
+                        viewBox="0 0 20 20"
+                        width={35}
+                      >
+                        <desc>
+                          endorsed
+                        </desc>
+                        <path
+                          d="M19.83 9.38L18.81 7.6V5.62c0-.45-.23-.85-.61-1.08l-1.71-1-1.02-1.76a1.25 1.25 0 00-1.08-.61h-2.03l-1.74-1c-.38-.23-.87-.23-1.25 0l-1.74 1H5.65c-.44 0-.85.23-1.08.61L3.58 3.5l-1.8 1.04c-.38.24-.62.64-.62 1.08v2.06L.17 9.4c-.11.19-.17.4-.17.61s.06.42.17.61l.99 1.72v2.06c0 .45.23.85.61 1.08l1.78 1.02.99 1.72c.23.38.63.61 1.08.61h1.99l1.74 1c.19.11.41.17.62.17.21 0 .42-.06.61-.17l1.74-1h2.03c.44 0 .85-.23 1.08-.61l1.02-1.76 1.71-1c.38-.23.61-.64.61-1.08v-1.97l1.02-1.78c.27-.38.27-.85.04-1.25zm-5.08-.71l-5.01 5.01c-.18.18-.43.29-.71.29-.28 0-.53-.11-.71-.29l-3.01-3.01a1.003 1.003 0 011.42-1.42l2.3 2.3 4.31-4.3a1.003 1.003 0 011.71.71c0 .28-.12.53-.3.71z"
+                          fillRule="evenodd"
+                          key="0"
+                        />
+                      </svg>
+                    </span>
+                  </Blueprint3.Icon>
+                  <Component>
+                    <h5
+                      className="bp3-heading"
+                    >
+                      Success!
+                    </h5>
+                  </Component>
+                </div>
+              </Col>
+            </div>
+          </Row>
+          <Row
+            center="xs"
+          >
+            <div
+              className="row center-xs"
+            >
+              <Col
+                xs={10}
+              >
+                <div
+                  className="col-xs-10"
+                >
+                  <div
+                    style={
+                      Object {
+                        "marginBottom": "10px",
+                      }
+                    }
+                  >
+                    <Blueprint3.Text>
+                      <div
+                        className=""
+                      >
+                        You should see now sharing session started on device you've connected
+      with.
+                      </div>
+                    </Blueprint3.Text>
+                  </div>
+                  <div
+                    id="connected-devices-list-text-success"
+                    onMouseEnter={[Function]}
+                    onMouseLeave={[Function]}
+                    style={
+                      Object {
+                        "marginBottom": "25px",
+                        "textDecoration": "underline dotted",
+                      }
+                    }
+                  >
+                    <Blueprint3.Text
+                      className=""
+                    >
+                      <div
+                        className=""
+                      >
+                        
+              You can manage connected devices by clicking "Connected Devices"
+              button in top panel
+              
+                      </div>
+                    </Blueprint3.Text>
+                  </div>
+                </div>
+              </Col>
+            </div>
+          </Row>
+          <Blueprint3.Button
+            icon="repeat"
+            intent="primary"
+            onClick={[Function]}
+            style={
+              Object {
+                "borderRadius": "100px",
+              }
+            }
+          >
+            <button
+              className="bp3-button bp3-intent-primary"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              style={
+                Object {
+                  "borderRadius": "100px",
+                }
+              }
+              type="button"
+            >
+              <Blueprint3.Icon
+                icon="repeat"
+                key="leftIcon"
+              >
+                <span
+                  className="bp3-icon bp3-icon-repeat"
+                  icon="repeat"
+                >
+                  <svg
+                    data-icon="repeat"
+                    height={16}
+                    viewBox="0 0 16 16"
+                    width={16}
+                  >
+                    <desc>
+                      repeat
+                    </desc>
+                    <path
+                      d="M10 5c0 .55.45 1 1 1h4c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1s-1 .45-1 1v1.74A7.95 7.95 0 008 0C3.58 0 0 3.58 0 8c0 4.06 3.02 7.4 6.94 7.92.02 0 .04.01.06.01.33.04.66.07 1 .07 4.42 0 8-3.58 8-8 0-.55-.45-1-1-1s-1 .45-1 1c0 3.31-2.69 6-6 6-.71 0-1.37-.15-2-.38v.01C3.67 12.81 2 10.61 2 8c0-3.31 2.69-6 6-6 1.77 0 3.36.78 4.46 2H11c-.55 0-1 .45-1 1z"
+                      fillRule="evenodd"
+                      key="0"
+                    />
+                  </svg>
+                </span>
+              </Blueprint3.Icon>
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                Connect New Device
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+        </div>
+      </Col>
+    </SuccessStep>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/TopPanel.spec.tsx b/app/components/TopPanel.spec.tsx
new file mode 100644
index 0000000..378ab84
--- /dev/null
+++ b/app/components/TopPanel.spec.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React from 'react';
+import Enzyme, { ShallowWrapper } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import TopPanel from './TopPanel';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+const settingsButtonSelector = '#top-panel-settings-button';
+const connectedDevicesListButtonSelector =
+  '#top-panel-connected-devices-list-button';
+
+describe('<TopPanel />', () => {
+  let wrapper: ShallowWrapper;
+
+  beforeEach(() => {
+    wrapper = Enzyme.shallow(<TopPanel />);
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should match exact snapshot', () => {
+    expect(EnzymeToJson(wrapper)).toMatchSnapshot();
+  });
+
+  describe('when Settings button in top panel is clicked', () => {
+    it('should Settings Overlay props isSettingsOpen to true', () => {
+      // @ts-ignore
+      wrapper.find(settingsButtonSelector).props().onClick();
+      // @ts-ignore
+      const settingsOverlay = wrapper.props().children[1];
+
+      expect(settingsOverlay.props.isSettingsOpen).toBe(true);
+    });
+  });
+
+  describe('when Settings panel is opened and when its props.handleClose is called', () => {
+    it('should Settings Overlay props isSettingsOpen to false', () => {
+      // @ts-ignore
+      wrapper.find(settingsButtonSelector).props().onClick();
+      // @ts-ignore
+      const settingsOverlay = wrapper.props().children[1];
+      settingsOverlay.props.handleClose();
+      // @ts-ignore
+      const settingsOverlayAfterClose = wrapper.props().children[1];
+
+      expect(settingsOverlayAfterClose.props.isSettingsOpen).toBe(false);
+    });
+  });
+
+  describe('when Connected Devices button in top panel is clicked', () => {
+    it('should set Connected Devices List Drawer props isOpen to true', () => {
+      // @ts-ignore
+      wrapper.find(connectedDevicesListButtonSelector).props().onClick();
+      // @ts-ignore
+      const connectedDevicesListDrawer = wrapper.props().children[2];
+      expect(connectedDevicesListDrawer.props.isOpen).toBe(true);
+    });
+  });
+
+  describe("when Connected Devices List Drawer is opened, and when it's props.handleToggle is called", () => {
+    it('should set Connected Devices List Drawer props isOpen to false', () => {
+      // @ts-ignore
+      wrapper.find(connectedDevicesListButtonSelector).props().onClick();
+      // @ts-ignore
+      const connectedDevicesListDrawer = wrapper.props().children[2];
+      connectedDevicesListDrawer.props.handleToggle();
+      // @ts-ignore
+      const connectedDevicesListDrawerAfter = wrapper.props().children[2];
+
+      expect(connectedDevicesListDrawerAfter.props.isOpen).toBe(false);
+    });
+  });
+});
diff --git a/app/components/TopPanel.tsx b/app/components/TopPanel.tsx
new file mode 100644
index 0000000..3e6f69a
--- /dev/null
+++ b/app/components/TopPanel.tsx
@@ -0,0 +1,177 @@
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable react-hooks/rules-of-hooks */
+import React, { useCallback, useContext } from 'react';
+import { Button, Icon, Position, Tooltip } from '@blueprintjs/core';
+import { createStyles, makeStyles } from '@material-ui/core/styles';
+import SettingsOverlay from './SettingsOverlay/SettingsOverlay';
+import ConnectedDevicesListDrawer from './ConnectedDevicesListDrawer';
+import { SettingsContext } from '../containers/SettingsProvider';
+import isProduction from '../utils/isProduction';
+
+const Zoom = require('react-reveal/Zoom');
+const Fade = require('react-reveal/Fade');
+
+const useStylesWithTheme = (isDarkTheme: boolean) =>
+  makeStyles(() =>
+    createStyles({
+      topPanelRoot: {
+        display: 'flex',
+        paddingTop: '15px',
+        marginBottom: '20px',
+      },
+      logoWithAppName: { margin: '0 auto' },
+      appNameHeader: {
+        margin: '0 auto',
+        paddingTop: '5px',
+        fontFamily: 'Lexend Peta',
+        fontSize: '20px',
+        color: isDarkTheme ? '#48AFF0' : '#1F4B99',
+        cursor: 'default !important',
+      },
+      topPanelControlButtonsRoot: {
+        position: 'absolute',
+        right: '15px',
+        display: 'flex',
+      },
+      topPanelControlButton: {
+        width: '40px',
+        height: '40px',
+        borderRadius: '50px',
+        cursor: 'default !important',
+      },
+      topPanelControlButtonMargin: {
+        marginRight: '20px',
+        cursor: 'default !important',
+      },
+      topPanelIconOfControlButton: {
+        cursor: 'default !important',
+      },
+    })
+  );
+
+export default function TopPanel(props: any) {
+  const { isDarkTheme } = useContext(SettingsContext);
+
+  const getClassesCallback = useCallback(() => {
+    return useStylesWithTheme(isDarkTheme)();
+  }, [isDarkTheme]);
+
+  const [isSettingsOpen, setIsSettingsOpen] = React.useState(false);
+  const [isDrawersOpen, setIsDrawerOpen] = React.useState(false);
+
+  const handleSettingsOpen = useCallback(() => {
+    setIsSettingsOpen(true);
+  }, []);
+
+  const handleSettingsClose = useCallback(() => {
+    setIsSettingsOpen(false);
+  }, []);
+
+  const handleToggleConnectedDevicesListDrawer = useCallback(() => {
+    setIsDrawerOpen(!isDrawersOpen);
+  }, [isDrawersOpen]);
+
+  const renderConnectedDevicesListButton = useCallback(() => {
+    return (
+      <div className={getClassesCallback().topPanelControlButtonMargin}>
+        <Tooltip content="Connected Devices" position={Position.BOTTOM}>
+          <Button
+            id="top-panel-connected-devices-list-button"
+            intent="none"
+            className={getClassesCallback().topPanelControlButton}
+            onClick={handleToggleConnectedDevicesListDrawer}
+          >
+            <Icon
+              className={getClassesCallback().topPanelIconOfControlButton}
+              icon="th-list"
+              iconSize={20}
+            />
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }, [getClassesCallback, handleToggleConnectedDevicesListDrawer]);
+
+  const renderHelpButton = useCallback(() => {
+    return (
+      <div className={getClassesCallback().topPanelControlButtonMargin}>
+        <Tooltip content="Help" position={Position.BOTTOM}>
+          <Button
+            id="top-panel-help-button"
+            intent="none"
+            className={getClassesCallback().topPanelControlButton}
+          >
+            <Icon
+              className={getClassesCallback().topPanelIconOfControlButton}
+              icon="help"
+              iconSize={22}
+            />
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }, [getClassesCallback]);
+
+  const renderSettingsButton = useCallback(() => {
+    return (
+      <div className={getClassesCallback().topPanelControlButtonMargin}>
+        <Tooltip content="Settings" position={Position.BOTTOM}>
+          <Button
+            id="top-panel-settings-button"
+            onClick={handleSettingsOpen}
+            className={getClassesCallback().topPanelControlButton}
+          >
+            <Icon
+              className={getClassesCallback().topPanelIconOfControlButton}
+              icon="cog"
+              iconSize={22}
+            />
+          </Button>
+        </Tooltip>
+      </div>
+    );
+  }, [getClassesCallback, handleSettingsOpen]);
+
+  const renderLogoWithAppName = useCallback(() => {
+    return (
+      <Zoom top duration={isProduction() ? 3000 : 0}>
+        <div
+          id="logo-with-popover-visit-website"
+          className={getClassesCallback().logoWithAppName}
+        >
+          <h4
+            id="deskreen-top-app-name-header"
+            className={getClassesCallback().appNameHeader}
+          >
+            Deskreen
+          </h4>
+        </div>
+      </Zoom>
+    );
+  }, [getClassesCallback]);
+
+  return (
+    <>
+      <div className={getClassesCallback().topPanelRoot}>
+        {renderLogoWithAppName()}
+        <div className={getClassesCallback().topPanelControlButtonsRoot}>
+          <Fade right duration={isProduction() ? 2000 : 0}>
+            {renderConnectedDevicesListButton()}
+            {renderHelpButton()}
+            {renderSettingsButton()}
+          </Fade>
+        </div>
+      </div>
+      <SettingsOverlay
+        isSettingsOpen={isSettingsOpen}
+        handleClose={handleSettingsClose}
+      />
+      <ConnectedDevicesListDrawer
+        isOpen={isDrawersOpen}
+        handleToggle={handleToggleConnectedDevicesListDrawer}
+        stepperRef={props.stepperRef}
+      />
+    </>
+  );
+}
diff --git a/app/components/__snapshots__/AllowConnectionForDeviceAlert.spec.tsx.snap b/app/components/__snapshots__/AllowConnectionForDeviceAlert.spec.tsx.snap
new file mode 100644
index 0000000..d5ba0ed
--- /dev/null
+++ b/app/components/__snapshots__/AllowConnectionForDeviceAlert.spec.tsx.snap
@@ -0,0 +1,607 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <AllowConnectionForDeviceAlert
+      device={Object {}}
+      isOpen={true}
+      onCancel={[Function]}
+      onConfirm={[Function]}
+    >
+      <Blueprint3.Alert
+        canEscapeKeyCancel={false}
+        canOutsideClickCancel={false}
+        cancelButtonText="Deny"
+        className="class-allow-device-to-connect-alert"
+        confirmButtonText="Allow"
+        icon="feed"
+        intent="danger"
+        isOpen={true}
+        onCancel={[Function]}
+        onConfirm={[Function]}
+        transitionDuration={0}
+      >
+        <Blueprint3.Dialog
+          canEscapeKeyClose={false}
+          canOutsideClickClose={false}
+          className="bp3-alert class-allow-device-to-connect-alert"
+          isOpen={true}
+          onCancel={[Function]}
+          onClose={[Function]}
+          onConfirm={[Function]}
+          transitionDuration={0}
+        >
+          <Blueprint3.Overlay
+            autoFocus={true}
+            backdropProps={Object {}}
+            canEscapeKeyClose={false}
+            canOutsideClickClose={false}
+            className="bp3-overlay-scroll-container"
+            enforceFocus={true}
+            hasBackdrop={true}
+            isOpen={true}
+            lazy={true}
+            onCancel={[Function]}
+            onClose={[Function]}
+            onConfirm={[Function]}
+            transitionDuration={0}
+            transitionName="bp3-overlay"
+            usePortal={true}
+          >
+            <Blueprint3.Portal
+              container={
+                <body
+                  class="bp3-overlay-open"
+                >
+                  <div
+                    class="bp3-portal"
+                  >
+                    <div
+                      class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                    >
+                      <div
+                        class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                      />
+                      <div
+                        class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                        tabindex="0"
+                      >
+                        <div
+                          class="bp3-dialog bp3-alert class-allow-device-to-connect-alert"
+                        >
+                          <div
+                            class="bp3-alert-body"
+                          >
+                            <span
+                              class="bp3-icon bp3-icon-feed bp3-intent-danger"
+                              icon="feed"
+                            >
+                              <svg
+                                data-icon="feed"
+                                height="40"
+                                viewBox="0 0 20 20"
+                                width="40"
+                              >
+                                <desc>
+                                  feed
+                                </desc>
+                                <path
+                                  d="M2.5 15a2.5 2.5 0 000 5 2.5 2.5 0 000-5zm.5-5c-.55 0-1 .45-1 1s.45 1 1 1c2.76 0 5 2.24 5 5 0 .55.45 1 1 1s1-.45 1-1c0-3.87-3.13-7-7-7zM3 0c-.55 0-1 .45-1 1s.45 1 1 1c8.28 0 15 6.72 15 15 0 .55.45 1 1 1s1-.45 1-1C20 7.61 12.39 0 3 0zm0 5c-.55 0-1 .45-1 1s.45 1 1 1c5.52 0 10 4.48 10 10 0 .55.45 1 1 1s1-.45 1-1C15 10.37 9.63 5 3 5z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                            <div
+                              class="bp3-alert-contents"
+                            >
+                              <h3
+                                class="bp3-heading"
+                              >
+                                Device is trying to connect
+                              </h3>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    Device IP: 
+                                  </div>
+                                  <span
+                                    id="allow-connection-device-alert-device-ip-span"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    Device Type: undefined
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    Device OS: undefined
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    session ID: undefined
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="bp3-alert-footer"
+                          >
+                            <button
+                              class="bp3-button bp3-intent-danger"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-button-text"
+                              >
+                                Allow
+                              </span>
+                            </button>
+                            <button
+                              class="bp3-button"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-button-text"
+                              >
+                                Deny
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </body>
+              }
+            >
+              <Portal
+                containerInfo={
+                  <div
+                    class="bp3-portal"
+                  >
+                    <div
+                      class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                    >
+                      <div
+                        class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                      />
+                      <div
+                        class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                        tabindex="0"
+                      >
+                        <div
+                          class="bp3-dialog bp3-alert class-allow-device-to-connect-alert"
+                        >
+                          <div
+                            class="bp3-alert-body"
+                          >
+                            <span
+                              class="bp3-icon bp3-icon-feed bp3-intent-danger"
+                              icon="feed"
+                            >
+                              <svg
+                                data-icon="feed"
+                                height="40"
+                                viewBox="0 0 20 20"
+                                width="40"
+                              >
+                                <desc>
+                                  feed
+                                </desc>
+                                <path
+                                  d="M2.5 15a2.5 2.5 0 000 5 2.5 2.5 0 000-5zm.5-5c-.55 0-1 .45-1 1s.45 1 1 1c2.76 0 5 2.24 5 5 0 .55.45 1 1 1s1-.45 1-1c0-3.87-3.13-7-7-7zM3 0c-.55 0-1 .45-1 1s.45 1 1 1c8.28 0 15 6.72 15 15 0 .55.45 1 1 1s1-.45 1-1C20 7.61 12.39 0 3 0zm0 5c-.55 0-1 .45-1 1s.45 1 1 1c5.52 0 10 4.48 10 10 0 .55.45 1 1 1s1-.45 1-1C15 10.37 9.63 5 3 5z"
+                                  fill-rule="evenodd"
+                                />
+                              </svg>
+                            </span>
+                            <div
+                              class="bp3-alert-contents"
+                            >
+                              <h3
+                                class="bp3-heading"
+                              >
+                                Device is trying to connect
+                              </h3>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    Device IP: 
+                                  </div>
+                                  <span
+                                    id="allow-connection-device-alert-device-ip-span"
+                                  />
+                                </div>
+                              </div>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    Device Type: undefined
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    Device OS: undefined
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="row"
+                              >
+                                <div
+                                  class=""
+                                >
+                                  <div
+                                    class=""
+                                  >
+                                    session ID: undefined
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                          </div>
+                          <div
+                            class="bp3-alert-footer"
+                          >
+                            <button
+                              class="bp3-button bp3-intent-danger"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-button-text"
+                              >
+                                Allow
+                              </span>
+                            </button>
+                            <button
+                              class="bp3-button"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-button-text"
+                              >
+                                Deny
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                }
+              >
+                <TransitionGroup
+                  appear={true}
+                  childFactory={[Function]}
+                  className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                  component="div"
+                  onKeyDown={[Function]}
+                >
+                  <div
+                    className="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
+                    onKeyDown={[Function]}
+                  >
+                    <CSSTransition
+                      appear={true}
+                      classNames="bp3-overlay"
+                      in={true}
+                      key=".$__backdrop"
+                      onExited={[Function]}
+                      timeout={0}
+                    >
+                      <Transition
+                        appear={true}
+                        enter={true}
+                        exit={true}
+                        in={true}
+                        mountOnEnter={false}
+                        onEnter={[Function]}
+                        onEntered={[Function]}
+                        onEntering={[Function]}
+                        onExit={[Function]}
+                        onExited={[Function]}
+                        onExiting={[Function]}
+                        timeout={0}
+                        unmountOnExit={false}
+                      >
+                        <div
+                          className="bp3-overlay-backdrop"
+                          onMouseDown={[Function]}
+                          tabIndex={null}
+                        />
+                      </Transition>
+                    </CSSTransition>
+                    <CSSTransition
+                      appear={true}
+                      classNames="bp3-overlay"
+                      in={true}
+                      key=".$.0"
+                      onExited={[Function]}
+                      timeout={0}
+                    >
+                      <Transition
+                        appear={true}
+                        enter={true}
+                        exit={true}
+                        in={true}
+                        mountOnEnter={false}
+                        onEnter={[Function]}
+                        onEntered={[Function]}
+                        onEntering={[Function]}
+                        onExit={[Function]}
+                        onExited={[Function]}
+                        onExiting={[Function]}
+                        timeout={0}
+                        unmountOnExit={false}
+                      >
+                        <div
+                          className="bp3-dialog-container bp3-overlay-content"
+                          tabIndex={0}
+                        >
+                          <div
+                            className="bp3-dialog bp3-alert class-allow-device-to-connect-alert"
+                          >
+                            <div
+                              className="bp3-alert-body"
+                            >
+                              <Blueprint3.Icon
+                                icon="feed"
+                                iconSize={40}
+                                intent="danger"
+                              >
+                                <span
+                                  className="bp3-icon bp3-icon-feed bp3-intent-danger"
+                                  icon="feed"
+                                >
+                                  <svg
+                                    data-icon="feed"
+                                    height={40}
+                                    viewBox="0 0 20 20"
+                                    width={40}
+                                  >
+                                    <desc>
+                                      feed
+                                    </desc>
+                                    <path
+                                      d="M2.5 15a2.5 2.5 0 000 5 2.5 2.5 0 000-5zm.5-5c-.55 0-1 .45-1 1s.45 1 1 1c2.76 0 5 2.24 5 5 0 .55.45 1 1 1s1-.45 1-1c0-3.87-3.13-7-7-7zM3 0c-.55 0-1 .45-1 1s.45 1 1 1c8.28 0 15 6.72 15 15 0 .55.45 1 1 1s1-.45 1-1C20 7.61 12.39 0 3 0zm0 5c-.55 0-1 .45-1 1s.45 1 1 1c5.52 0 10 4.48 10 10 0 .55.45 1 1 1s1-.45 1-1C15 10.37 9.63 5 3 5z"
+                                      fillRule="evenodd"
+                                      key="0"
+                                    />
+                                  </svg>
+                                </span>
+                              </Blueprint3.Icon>
+                              <div
+                                className="bp3-alert-contents"
+                              >
+                                <Component>
+                                  <h3
+                                    className="bp3-heading"
+                                  >
+                                    Device is trying to connect
+                                  </h3>
+                                </Component>
+                                <Row>
+                                  <div
+                                    className="row"
+                                  >
+                                    <Col>
+                                      <div
+                                        className=""
+                                      >
+                                        <Blueprint3.Text>
+                                          <div
+                                            className=""
+                                          >
+                                            Device IP: 
+                                          </div>
+                                        </Blueprint3.Text>
+                                        <span
+                                          id="allow-connection-device-alert-device-ip-span"
+                                        />
+                                      </div>
+                                    </Col>
+                                  </div>
+                                </Row>
+                                <Row>
+                                  <div
+                                    className="row"
+                                  >
+                                    <Col>
+                                      <div
+                                        className=""
+                                      >
+                                        <Blueprint3.Text>
+                                          <div
+                                            className=""
+                                          >
+                                            Device Type: undefined
+                                          </div>
+                                        </Blueprint3.Text>
+                                      </div>
+                                    </Col>
+                                  </div>
+                                </Row>
+                                <Row>
+                                  <div
+                                    className="row"
+                                  >
+                                    <Col>
+                                      <div
+                                        className=""
+                                      >
+                                        <Blueprint3.Text>
+                                          <div
+                                            className=""
+                                          >
+                                            Device OS: undefined
+                                          </div>
+                                        </Blueprint3.Text>
+                                      </div>
+                                    </Col>
+                                  </div>
+                                </Row>
+                                <Row>
+                                  <div
+                                    className="row"
+                                  >
+                                    <Col>
+                                      <div
+                                        className=""
+                                      >
+                                        <Blueprint3.Text>
+                                          <div
+                                            className=""
+                                          >
+                                            session ID: undefined
+                                          </div>
+                                        </Blueprint3.Text>
+                                      </div>
+                                    </Col>
+                                  </div>
+                                </Row>
+                              </div>
+                            </div>
+                            <div
+                              className="bp3-alert-footer"
+                            >
+                              <Blueprint3.Button
+                                intent="danger"
+                                onClick={[Function]}
+                                text="Allow"
+                              >
+                                <button
+                                  className="bp3-button bp3-intent-danger"
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  type="button"
+                                >
+                                  <Blueprint3.Icon
+                                    key="leftIcon"
+                                  />
+                                  <span
+                                    className="bp3-button-text"
+                                    key="text"
+                                  >
+                                    Allow
+                                  </span>
+                                  <Blueprint3.Icon
+                                    key="rightIcon"
+                                  />
+                                </button>
+                              </Blueprint3.Button>
+                              <Blueprint3.Button
+                                onClick={[Function]}
+                                text="Deny"
+                              >
+                                <button
+                                  className="bp3-button"
+                                  onClick={[Function]}
+                                  onKeyDown={[Function]}
+                                  onKeyUp={[Function]}
+                                  type="button"
+                                >
+                                  <Blueprint3.Icon
+                                    key="leftIcon"
+                                  />
+                                  <span
+                                    className="bp3-button-text"
+                                    key="text"
+                                  >
+                                    Deny
+                                  </span>
+                                  <Blueprint3.Icon
+                                    key="rightIcon"
+                                  />
+                                </button>
+                              </Blueprint3.Button>
+                            </div>
+                          </div>
+                        </div>
+                      </Transition>
+                    </CSSTransition>
+                  </div>
+                </TransitionGroup>
+              </Portal>
+            </Blueprint3.Portal>
+          </Blueprint3.Overlay>
+        </Blueprint3.Dialog>
+      </Blueprint3.Alert>
+    </AllowConnectionForDeviceAlert>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/__snapshots__/ConnectedDevicesListDrawer.spec.tsx.snap b/app/components/__snapshots__/ConnectedDevicesListDrawer.spec.tsx.snap
new file mode 100644
index 0000000..077fc05
--- /dev/null
+++ b/app/components/__snapshots__/ConnectedDevicesListDrawer.spec.tsx.snap
@@ -0,0 +1,644 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <ConnectedDevicesListDrawer
+      handleToggle={[Function]}
+      isOpen={true}
+      stepperRef={null}
+    >
+      <Blueprint3.Drawer
+        canOutsideClickClose={true}
+        className="makeStyles-drawerRoot-1"
+        isOpen={true}
+        onClose={[Function]}
+        position="bottom"
+        size="90%"
+        style={Object {}}
+        transitionDuration={0}
+        vertical={false}
+      >
+        <Blueprint3.Overlay
+          autoFocus={true}
+          backdropProps={Object {}}
+          canEscapeKeyClose={true}
+          canOutsideClickClose={true}
+          className="bp3-overlay-container"
+          enforceFocus={true}
+          hasBackdrop={true}
+          isOpen={true}
+          lazy={true}
+          onClose={[Function]}
+          position="bottom"
+          size="90%"
+          style={Object {}}
+          transitionDuration={0}
+          transitionName="bp3-overlay"
+          usePortal={true}
+          vertical={false}
+        >
+          <Blueprint3.Portal
+            container={
+              <body
+                class="bp3-overlay-open"
+              >
+                <div
+                  class="bp3-portal"
+                >
+                  <div
+                    class="bp3-overlay bp3-overlay-open bp3-overlay-container"
+                  >
+                    <div
+                      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                      tabindex="0"
+                    />
+                    <div
+                      class="bp3-drawer bp3-position-bottom makeStyles-drawerRoot-1 bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                      style="height: 90%;"
+                      tabindex="0"
+                    >
+                      <div
+                        class="makeStyles-drawerInnerTopPanel-2 row middle-xs between-xs"
+                      >
+                        <div
+                          class="col-xs-11"
+                        >
+                          <div
+                            class="row middle-xs"
+                          >
+                            <div
+                              class="makeStyles-topHeader-4"
+                            >
+                              <div
+                                class="bp3-text-muted"
+                              >
+                                Connected Devices
+                              </div>
+                            </div>
+                            <button
+                              class="bp3-button bp3-disabled bp3-intent-danger"
+                              disabled=""
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-icon bp3-icon-disable"
+                                icon="disable"
+                              >
+                                <svg
+                                  data-icon="disable"
+                                  height="16"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                >
+                                  <desc>
+                                    disable
+                                  </desc>
+                                  <path
+                                    d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-6 8c0-3.31 2.69-6 6-6 1.3 0 2.49.42 3.47 1.12l-8.35 8.35c-.7-.98-1.12-2.17-1.12-3.47zm6 6c-1.3 0-2.49-.42-3.47-1.12l8.35-8.35c.7.98 1.12 2.17 1.12 3.47 0 3.32-2.68 6-6 6z"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                class="bp3-button-text"
+                              >
+                                Disconnect all devices
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                        <div
+                          class="col-xs-1"
+                        >
+                          <button
+                            class="bp3-button makeStyles-closeButton-6 undefined"
+                            id="close-overlay-button"
+                            type="button"
+                          >
+                            <span
+                              class="bp3-button-text"
+                            >
+                              <span
+                                class="bp3-icon bp3-icon-cross"
+                                icon="cross"
+                              >
+                                <svg
+                                  data-icon="cross"
+                                  height="30"
+                                  viewBox="0 0 20 20"
+                                  width="30"
+                                >
+                                  <desc>
+                                    cross
+                                  </desc>
+                                  <path
+                                    d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                      <div
+                        class="makeStyles-connectedDevicesRoot-3 row"
+                      >
+                        <div
+                          class="col-xs-12"
+                        >
+                          <div
+                            class="react-reveal makeStyles-zoomFullWidth-5"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </body>
+            }
+          >
+            <Portal
+              containerInfo={
+                <div
+                  class="bp3-portal"
+                >
+                  <div
+                    class="bp3-overlay bp3-overlay-open bp3-overlay-container"
+                  >
+                    <div
+                      class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
+                      tabindex="0"
+                    />
+                    <div
+                      class="bp3-drawer bp3-position-bottom makeStyles-drawerRoot-1 bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
+                      style="height: 90%;"
+                      tabindex="0"
+                    >
+                      <div
+                        class="makeStyles-drawerInnerTopPanel-2 row middle-xs between-xs"
+                      >
+                        <div
+                          class="col-xs-11"
+                        >
+                          <div
+                            class="row middle-xs"
+                          >
+                            <div
+                              class="makeStyles-topHeader-4"
+                            >
+                              <div
+                                class="bp3-text-muted"
+                              >
+                                Connected Devices
+                              </div>
+                            </div>
+                            <button
+                              class="bp3-button bp3-disabled bp3-intent-danger"
+                              disabled=""
+                              tabindex="-1"
+                              type="button"
+                            >
+                              <span
+                                class="bp3-icon bp3-icon-disable"
+                                icon="disable"
+                              >
+                                <svg
+                                  data-icon="disable"
+                                  height="16"
+                                  viewBox="0 0 16 16"
+                                  width="16"
+                                >
+                                  <desc>
+                                    disable
+                                  </desc>
+                                  <path
+                                    d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-6 8c0-3.31 2.69-6 6-6 1.3 0 2.49.42 3.47 1.12l-8.35 8.35c-.7-.98-1.12-2.17-1.12-3.47zm6 6c-1.3 0-2.49-.42-3.47-1.12l8.35-8.35c.7.98 1.12 2.17 1.12 3.47 0 3.32-2.68 6-6 6z"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </span>
+                              <span
+                                class="bp3-button-text"
+                              >
+                                Disconnect all devices
+                              </span>
+                            </button>
+                          </div>
+                        </div>
+                        <div
+                          class="col-xs-1"
+                        >
+                          <button
+                            class="bp3-button makeStyles-closeButton-6 undefined"
+                            id="close-overlay-button"
+                            type="button"
+                          >
+                            <span
+                              class="bp3-button-text"
+                            >
+                              <span
+                                class="bp3-icon bp3-icon-cross"
+                                icon="cross"
+                              >
+                                <svg
+                                  data-icon="cross"
+                                  height="30"
+                                  viewBox="0 0 20 20"
+                                  width="30"
+                                >
+                                  <desc>
+                                    cross
+                                  </desc>
+                                  <path
+                                    d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                    fill-rule="evenodd"
+                                  />
+                                </svg>
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                      <div
+                        class="makeStyles-connectedDevicesRoot-3 row"
+                      >
+                        <div
+                          class="col-xs-12"
+                        >
+                          <div
+                            class="react-reveal makeStyles-zoomFullWidth-5"
+                          />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              }
+            >
+              <TransitionGroup
+                appear={true}
+                childFactory={[Function]}
+                className="bp3-overlay bp3-overlay-open bp3-overlay-container"
+                component="div"
+                onKeyDown={[Function]}
+              >
+                <div
+                  className="bp3-overlay bp3-overlay-open bp3-overlay-container"
+                  onKeyDown={[Function]}
+                >
+                  <CSSTransition
+                    appear={true}
+                    classNames="bp3-overlay"
+                    in={true}
+                    key=".$__backdrop"
+                    onExited={[Function]}
+                    timeout={0}
+                  >
+                    <Transition
+                      appear={true}
+                      enter={true}
+                      exit={true}
+                      in={true}
+                      mountOnEnter={false}
+                      onEnter={[Function]}
+                      onEntered={[Function]}
+                      onEntering={[Function]}
+                      onExit={[Function]}
+                      onExited={[Function]}
+                      onExiting={[Function]}
+                      timeout={0}
+                      unmountOnExit={false}
+                    >
+                      <div
+                        className="bp3-overlay-backdrop"
+                        onMouseDown={[Function]}
+                        tabIndex={0}
+                      />
+                    </Transition>
+                  </CSSTransition>
+                  <CSSTransition
+                    appear={true}
+                    classNames="bp3-overlay"
+                    in={true}
+                    key=".$.0"
+                    onExited={[Function]}
+                    timeout={0}
+                  >
+                    <Transition
+                      appear={true}
+                      enter={true}
+                      exit={true}
+                      in={true}
+                      mountOnEnter={false}
+                      onEnter={[Function]}
+                      onEntered={[Function]}
+                      onEntering={[Function]}
+                      onExit={[Function]}
+                      onExited={[Function]}
+                      onExiting={[Function]}
+                      timeout={0}
+                      unmountOnExit={false}
+                    >
+                      <div
+                        className="bp3-drawer bp3-position-bottom makeStyles-drawerRoot-1 bp3-overlay-content"
+                        style={
+                          Object {
+                            "height": "90%",
+                          }
+                        }
+                        tabIndex={0}
+                      >
+                        <Row
+                          between="xs"
+                          className="makeStyles-drawerInnerTopPanel-2"
+                          middle="xs"
+                        >
+                          <div
+                            className="makeStyles-drawerInnerTopPanel-2 row middle-xs between-xs"
+                          >
+                            <Col
+                              xs={11}
+                            >
+                              <div
+                                className="col-xs-11"
+                              >
+                                <Row
+                                  middle="xs"
+                                >
+                                  <div
+                                    className="row middle-xs"
+                                  >
+                                    <div
+                                      className="makeStyles-topHeader-4"
+                                    >
+                                      <Blueprint3.Text
+                                        className="bp3-text-muted"
+                                      >
+                                        <div
+                                          className="bp3-text-muted"
+                                        >
+                                          Connected Devices
+                                        </div>
+                                      </Blueprint3.Text>
+                                    </div>
+                                    <Blueprint3.Button
+                                      disabled={true}
+                                      icon="disable"
+                                      intent="danger"
+                                      onClick={[Function]}
+                                    >
+                                      <button
+                                        className="bp3-button bp3-disabled bp3-intent-danger"
+                                        disabled={true}
+                                        onKeyDown={[Function]}
+                                        onKeyUp={[Function]}
+                                        tabIndex={-1}
+                                        type="button"
+                                      >
+                                        <Blueprint3.Icon
+                                          icon="disable"
+                                          key="leftIcon"
+                                        >
+                                          <span
+                                            className="bp3-icon bp3-icon-disable"
+                                            icon="disable"
+                                          >
+                                            <svg
+                                              data-icon="disable"
+                                              height={16}
+                                              viewBox="0 0 16 16"
+                                              width={16}
+                                            >
+                                              <desc>
+                                                disable
+                                              </desc>
+                                              <path
+                                                d="M7.99-.01c-4.42 0-8 3.58-8 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm-6 8c0-3.31 2.69-6 6-6 1.3 0 2.49.42 3.47 1.12l-8.35 8.35c-.7-.98-1.12-2.17-1.12-3.47zm6 6c-1.3 0-2.49-.42-3.47-1.12l8.35-8.35c.7.98 1.12 2.17 1.12 3.47 0 3.32-2.68 6-6 6z"
+                                                fillRule="evenodd"
+                                                key="0"
+                                              />
+                                            </svg>
+                                          </span>
+                                        </Blueprint3.Icon>
+                                        <span
+                                          className="bp3-button-text"
+                                          key="text"
+                                        >
+                                          Disconnect all devices
+                                        </span>
+                                        <Blueprint3.Icon
+                                          key="rightIcon"
+                                        />
+                                      </button>
+                                    </Blueprint3.Button>
+                                  </div>
+                                </Row>
+                              </div>
+                            </Col>
+                            <Col
+                              xs={1}
+                            >
+                              <div
+                                className="col-xs-1"
+                              >
+                                <CloseOverlayButton
+                                  onClick={[Function]}
+                                >
+                                  <Blueprint3.Button
+                                    className="makeStyles-closeButton-6 undefined"
+                                    id="close-overlay-button"
+                                    onClick={[Function]}
+                                  >
+                                    <button
+                                      className="bp3-button makeStyles-closeButton-6 undefined"
+                                      id="close-overlay-button"
+                                      onClick={[Function]}
+                                      onKeyDown={[Function]}
+                                      onKeyUp={[Function]}
+                                      type="button"
+                                    >
+                                      <Blueprint3.Icon
+                                        key="leftIcon"
+                                      />
+                                      <span
+                                        className="bp3-button-text"
+                                        key="text"
+                                      >
+                                        <Blueprint3.Icon
+                                          icon="cross"
+                                          iconSize={30}
+                                        >
+                                          <span
+                                            className="bp3-icon bp3-icon-cross"
+                                            icon="cross"
+                                          >
+                                            <svg
+                                              data-icon="cross"
+                                              height={30}
+                                              viewBox="0 0 20 20"
+                                              width={30}
+                                            >
+                                              <desc>
+                                                cross
+                                              </desc>
+                                              <path
+                                                d="M11.41 10l4.29-4.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-4.29-4.3a1.003 1.003 0 00-1.42 1.42L8.59 10 4.3 14.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4.29-4.3 4.29 4.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
+                                                fillRule="evenodd"
+                                                key="0"
+                                              />
+                                            </svg>
+                                          </span>
+                                        </Blueprint3.Icon>
+                                      </span>
+                                      <Blueprint3.Icon
+                                        key="rightIcon"
+                                      />
+                                    </button>
+                                  </Blueprint3.Button>
+                                </CloseOverlayButton>
+                              </div>
+                            </Col>
+                          </div>
+                        </Row>
+                        <Row
+                          className="makeStyles-connectedDevicesRoot-3"
+                        >
+                          <div
+                            className="makeStyles-connectedDevicesRoot-3 row"
+                          >
+                            <Col
+                              xs={12}
+                            >
+                              <div
+                                className="col-xs-12"
+                              >
+                                <Fade
+                                  bottom={true}
+                                  cascade={true}
+                                  duration={0}
+                                >
+                                  <RevealBase
+                                    bottom={true}
+                                    cascade={true}
+                                    fraction={0.2}
+                                    inEffect={
+                                      Object {
+                                        "count": 1,
+                                        "delay": 0,
+                                        "duration": 0,
+                                        "forever": undefined,
+                                        "make": [Function],
+                                        "reverse": undefined,
+                                        "style": Object {
+                                          "animationFillMode": "both",
+                                        },
+                                      }
+                                    }
+                                    outEffect={
+                                      Object {
+                                        "count": 1,
+                                        "delay": 0,
+                                        "duration": 0,
+                                        "forever": undefined,
+                                        "make": [Function],
+                                        "reverse": undefined,
+                                        "style": Object {
+                                          "animationFillMode": "both",
+                                        },
+                                      }
+                                    }
+                                    refProp="ref"
+                                  >
+                                    <div
+                                      className="react-reveal makeStyles-zoomFullWidth-5"
+                                      style={
+                                        Object {
+                                          "opacity": undefined,
+                                        }
+                                      }
+                                    />
+                                  </RevealBase>
+                                </Fade>
+                              </div>
+                            </Col>
+                          </div>
+                        </Row>
+                      </div>
+                    </Transition>
+                  </CSSTransition>
+                </div>
+              </TransitionGroup>
+            </Portal>
+          </Blueprint3.Portal>
+        </Blueprint3.Overlay>
+      </Blueprint3.Drawer>
+      <Blueprint3.Alert
+        canEscapeKeyCancel={true}
+        canOutsideClickCancel={true}
+        cancelButtonText="No, Cancel"
+        confirmButtonText="Yes, Disconnect All"
+        icon="warning-sign"
+        intent="danger"
+        isOpen={false}
+        onCancel={[Function]}
+        onClose={[Function]}
+        onConfirm={[Function]}
+        transitionDuration={0}
+      >
+        <Blueprint3.Dialog
+          canEscapeKeyClose={true}
+          canOutsideClickClose={true}
+          className="bp3-alert"
+          isOpen={false}
+          onCancel={[Function]}
+          onClose={[Function]}
+          onConfirm={[Function]}
+          transitionDuration={0}
+        >
+          <Blueprint3.Overlay
+            autoFocus={true}
+            backdropProps={Object {}}
+            canEscapeKeyClose={true}
+            canOutsideClickClose={true}
+            className="bp3-overlay-scroll-container"
+            enforceFocus={true}
+            hasBackdrop={true}
+            isOpen={false}
+            lazy={true}
+            onCancel={[Function]}
+            onClose={[Function]}
+            onConfirm={[Function]}
+            transitionDuration={0}
+            transitionName="bp3-overlay"
+            usePortal={true}
+          />
+        </Blueprint3.Dialog>
+      </Blueprint3.Alert>
+    </ConnectedDevicesListDrawer>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/__snapshots__/ShareAppOrScreenControlGroup.spec.tsx.snap b/app/components/__snapshots__/ShareAppOrScreenControlGroup.spec.tsx.snap
new file mode 100644
index 0000000..60a14f2
--- /dev/null
+++ b/app/components/__snapshots__/ShareAppOrScreenControlGroup.spec.tsx.snap
@@ -0,0 +1,230 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<BrowserRouter>
+  <Router
+    history={
+      Object {
+        "action": "POP",
+        "block": [Function],
+        "createHref": [Function],
+        "go": [Function],
+        "goBack": [Function],
+        "goForward": [Function],
+        "length": 1,
+        "listen": [Function],
+        "location": Object {
+          "hash": "",
+          "pathname": "/",
+          "search": "",
+          "state": undefined,
+        },
+        "push": [Function],
+        "replace": [Function],
+      }
+    }
+  >
+    <ShareEntireScreenOrAppWindowControlGroup
+      handleNextApplicationWindow={[Function]}
+      handleNextEntireScreen={[Function]}
+    >
+      <Blueprint3.ControlGroup
+        className="makeStyles-controlGroupRoot-1"
+        fill={true}
+        id="share-screen-or-app-btn-group"
+        vertical={false}
+      >
+        <div
+          className="bp3-control-group bp3-fill makeStyles-controlGroupRoot-1"
+          id="share-screen-or-app-btn-group"
+        >
+          <Blueprint3.Button
+            className="makeStyles-shareEntireScreenButton-2"
+            intent="primary"
+            onClick={[Function]}
+          >
+            <button
+              className="bp3-button bp3-intent-primary makeStyles-shareEntireScreenButton-2"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              type="button"
+            >
+              <Blueprint3.Icon
+                key="leftIcon"
+              />
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                <Blueprint3.Icon
+                  className="makeStyles-shareEntireScreenButtonIcon-3"
+                  color="white"
+                  icon="desktop"
+                  iconSize={100}
+                >
+                  <span
+                    className="bp3-icon bp3-icon-desktop makeStyles-shareEntireScreenButtonIcon-3"
+                    icon="desktop"
+                  >
+                    <svg
+                      data-icon="desktop"
+                      fill="white"
+                      height={100}
+                      viewBox="0 0 20 20"
+                      width={100}
+                    >
+                      <desc>
+                        desktop
+                      </desc>
+                      <path
+                        d="M19 0H1C.45 0 0 .45 0 1v13c0 .55.45 1 1 1h5.67l-.5 3H5c-.55 0-1 .45-1 1s.45 1 1 1h10c.55 0 1-.45 1-1s-.45-1-1-1h-1.17l-.5-3H19c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-1 13H2V2h16v11z"
+                        fillRule="evenodd"
+                        key="0"
+                      />
+                    </svg>
+                  </span>
+                </Blueprint3.Icon>
+                <Blueprint3.Text
+                  className="bp3-running-text"
+                >
+                  <div
+                    className="bp3-running-text"
+                  >
+                    Entire Screen
+                  </div>
+                </Blueprint3.Text>
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+          <Blueprint3.Button
+            className="makeStyles-shareAppButton-4"
+            intent="primary"
+            onClick={[Function]}
+          >
+            <button
+              className="bp3-button bp3-intent-primary makeStyles-shareAppButton-4"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              type="button"
+            >
+              <Blueprint3.Icon
+                key="leftIcon"
+              />
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                <Blueprint3.Icon
+                  className="makeStyles-shareAppButtonIcon-5"
+                  color="white"
+                  icon="application"
+                  iconSize={100}
+                >
+                  <span
+                    className="bp3-icon bp3-icon-application makeStyles-shareAppButtonIcon-5"
+                    icon="application"
+                  >
+                    <svg
+                      data-icon="application"
+                      fill="white"
+                      height={100}
+                      viewBox="0 0 20 20"
+                      width={100}
+                    >
+                      <desc>
+                        application
+                      </desc>
+                      <path
+                        d="M3.5 9h9c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-9c-.28 0-.5.22-.5.5s.22.5.5.5zm0 2h5c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-5c-.28 0-.5.22-.5.5s.22.5.5.5zM19 1H1c-.55 0-1 .45-1 1v16c0 .55.45 1 1 1h18c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm-1 16H2V6h16v11zM3.5 13h7c.28 0 .5-.22.5-.5s-.22-.5-.5-.5h-7c-.28 0-.5.22-.5.5s.22.5.5.5z"
+                        fillRule="evenodd"
+                        key="0"
+                      />
+                    </svg>
+                  </span>
+                </Blueprint3.Icon>
+                <Blueprint3.Text
+                  className="bp3-running-text"
+                >
+                  <div
+                    className="bp3-running-text"
+                  >
+                    Application Window
+                  </div>
+                </Blueprint3.Text>
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+          <Blueprint3.Button
+            active={true}
+            className="makeStyles-orDecorationButton-6"
+          >
+            <button
+              className="bp3-button bp3-active makeStyles-orDecorationButton-6"
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              type="button"
+            >
+              <Blueprint3.Icon
+                key="leftIcon"
+              />
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                OR
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
+        </div>
+      </Blueprint3.ControlGroup>
+      <ChooseAppOrScreenOverlay
+        handleClose={[Function]}
+        handleNextApplicationWindow={[Function]}
+        handleNextEntireScreen={[Function]}
+        isChooseAppOrScreenOverlayOpen={false}
+        isEntireScreenToShareChosen={false}
+      >
+        <Blueprint3.Dialog
+          autoFocus={true}
+          canEscapeKeyClose={true}
+          canOutsideClickClose={true}
+          className="makeStyles-dialogRoot-7 choose-app-or-screen-dialog"
+          enforceFocus={true}
+          hasBackdrop={true}
+          isOpen={false}
+          onClose={[Function]}
+          transitionDuration={0}
+          usePortal={true}
+        >
+          <Blueprint3.Overlay
+            autoFocus={true}
+            backdropProps={Object {}}
+            canEscapeKeyClose={true}
+            canOutsideClickClose={true}
+            className="bp3-overlay-scroll-container"
+            enforceFocus={true}
+            hasBackdrop={true}
+            isOpen={false}
+            lazy={true}
+            onClose={[Function]}
+            transitionDuration={0}
+            transitionName="bp3-overlay"
+            usePortal={true}
+          />
+        </Blueprint3.Dialog>
+      </ChooseAppOrScreenOverlay>
+    </ShareEntireScreenOrAppWindowControlGroup>
+  </Router>
+</BrowserRouter>
+`;
diff --git a/app/components/__snapshots__/TopPanel.spec.tsx.snap b/app/components/__snapshots__/TopPanel.spec.tsx.snap
new file mode 100644
index 0000000..8dfc478
--- /dev/null
+++ b/app/components/__snapshots__/TopPanel.spec.tsx.snap
@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TopPanel /> should match exact snapshot 1`] = `
+<Fragment>
+  <div
+    className="makeStyles-topPanelRoot-1"
+  >
+    <Zoom
+      duration={0}
+      top={true}
+    >
+      <div
+        className="makeStyles-logoWithAppName-9"
+        id="logo-with-popover-visit-website"
+      >
+        <h4
+          className="makeStyles-appNameHeader-17"
+          id="deskreen-top-app-name-header"
+        >
+          Deskreen
+        </h4>
+      </div>
+    </Zoom>
+    <div
+      className="makeStyles-topPanelControlButtonsRoot-25"
+    >
+      <Fade
+        duration={0}
+        right={true}
+      >
+        <div
+          className="makeStyles-topPanelControlButtonMargin-34"
+        >
+          <Blueprint3.Tooltip
+            content="Connected Devices"
+            hoverCloseDelay={0}
+            hoverOpenDelay={100}
+            position="bottom"
+            transitionDuration={100}
+          >
+            <Blueprint3.Button
+              className="makeStyles-topPanelControlButton-40"
+              id="top-panel-connected-devices-list-button"
+              intent="none"
+              onClick={[Function]}
+            >
+              <Blueprint3.Icon
+                className="makeStyles-topPanelIconOfControlButton-49"
+                icon="th-list"
+                iconSize={20}
+              />
+            </Blueprint3.Button>
+          </Blueprint3.Tooltip>
+        </div>
+        <div
+          className="makeStyles-topPanelControlButtonMargin-55"
+        >
+          <Blueprint3.Tooltip
+            content="Help"
+            hoverCloseDelay={0}
+            hoverOpenDelay={100}
+            position="bottom"
+            transitionDuration={100}
+          >
+            <Blueprint3.Button
+              className="makeStyles-topPanelControlButton-61"
+              id="top-panel-help-button"
+              intent="none"
+            >
+              <Blueprint3.Icon
+                className="makeStyles-topPanelIconOfControlButton-70"
+                icon="help"
+                iconSize={22}
+              />
+            </Blueprint3.Button>
+          </Blueprint3.Tooltip>
+        </div>
+        <div
+          className="makeStyles-topPanelControlButtonMargin-76"
+        >
+          <Blueprint3.Tooltip
+            content="Settings"
+            hoverCloseDelay={0}
+            hoverOpenDelay={100}
+            position="bottom"
+            transitionDuration={100}
+          >
+            <Blueprint3.Button
+              className="makeStyles-topPanelControlButton-82"
+              id="top-panel-settings-button"
+              onClick={[Function]}
+            >
+              <Blueprint3.Icon
+                className="makeStyles-topPanelIconOfControlButton-91"
+                icon="cog"
+                iconSize={22}
+              />
+            </Blueprint3.Button>
+          </Blueprint3.Tooltip>
+        </div>
+      </Fade>
+    </div>
+  </div>
+  <SettingsOverlay
+    handleClose={[Function]}
+    isSettingsOpen={false}
+  />
+  <ConnectedDevicesListDrawer
+    handleToggle={[Function]}
+    isOpen={false}
+  />
+</Fragment>
+`;
diff --git a/app/configs/app.config.ts b/app/configs/app.config.ts
deleted file mode 100644
index 761115b..0000000
--- a/app/configs/app.config.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  languages: ['ru', 'en'],
-  fallbackLng: 'en',
-  namespace: 'translation',
-};
diff --git a/app/configs/app.lang.config.ts b/app/configs/app.lang.config.ts
new file mode 100644
index 0000000..44a683d
--- /dev/null
+++ b/app/configs/app.lang.config.ts
@@ -0,0 +1,10 @@
+export default {
+  fallbackLng: 'en',
+  namespace: 'translation',
+  languages: ['ru', 'en', 'ua'],
+  langISOKeyToLangFullNameMap: {
+    en: 'English',
+    ru: 'Русский',
+    ua: 'Українська',
+  },
+};
diff --git a/app/configs/i18next.config.client.ts b/app/configs/i18next.config.client.ts
index 0d293fe..b25f5c4 100644
--- a/app/configs/i18next.config.client.ts
+++ b/app/configs/i18next.config.client.ts
@@ -1,18 +1,24 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import { remote, ipcRenderer } from 'electron';
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import SyncBackend from 'i18next-node-fs-backend';
 import { join } from 'path';
-// import isDev from 'electron-is-dev';
-import config from './app.config';
+import settings from 'electron-settings';
+import config from './app.lang.config';
+import isProduction from '../utils/isProduction';
 
-let isDev;
-try {
-  // eslint-disable-next-line global-require
-  isDev = require('electron-is-dev');
-} catch (e) {
-  isDev = true;
-}
+export const getLangNameToLangKeyMap = () => {
+  const res = {};
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of Object.entries(
+    config.langISOKeyToLangFullNameMap
+  )) {
+    // @ts-ignore: fine here
+    res[value] = key;
+  }
+  return res;
+};
 
 const appPath = remote.getGlobal('appPath');
 
@@ -22,18 +28,20 @@ const i18nextOptions = {
   },
   backend: {
     // path where resources get loaded from
-    loadPath: isDev
-      ? join(__dirname, './locales/{{lng}}/{{ns}}.json')
-      : join(appPath, 'locales/{{lng}}/{{ns}}.json'),
+    loadPath: isProduction()
+      ? join(appPath, 'locales/{{lng}}/{{ns}}.json')
+      : join(__dirname, './locales/{{lng}}/{{ns}}.json'),
     // path to post missing resources
-    addPath: isDev
-      ? join(__dirname, './locales/{{lng}}/{{ns}}.missing.json')
-      : join(appPath, 'locales/{{lng}}/{{ns}}.json'),
+    addPath: isProduction()
+      ? join(appPath, 'locales/{{lng}}/{{ns}}.json')
+      : join(__dirname, './locales/{{lng}}/{{ns}}.missing.json'),
     // jsonIndent to use when storing json files
     jsonIndent: 2,
   },
   saveMissing: true,
-  lng: 'en',
+  lng: (settings.hasSync('appLanguage')
+    ? settings.getSync('appLanguage')
+    : 'en') as string,
   fallbackLng: config.fallbackLng,
   whitelist: config.languages,
   react: {
@@ -47,8 +55,8 @@ if (!i18n.isInitialized) {
   i18n.init(i18nextOptions);
 }
 
-ipcRenderer.on('sending-language-from-main', (_, message) => {
-  i18n.changeLanguage(`${message}`);
+i18n.on('languageChanged', () => {
+  ipcRenderer.send('client-changed-language', i18n.language);
 });
 
 export default i18n;
diff --git a/app/configs/i18next.config.ts b/app/configs/i18next.config.ts
index 061adf4..941d4e1 100644
--- a/app/configs/i18next.config.ts
+++ b/app/configs/i18next.config.ts
@@ -1,36 +1,26 @@
-// const i18n = require('i18next');
-// const i18nextBackend = require('i18next-fs-backend');
-// const { join } = require('path');
-// const config = require('./app.config');
-
 import i18n from 'i18next';
 import i18nextBackend from 'i18next-node-fs-backend';
 import { join } from 'path';
-// import isDev from 'electron-is-dev';
-import config from './app.config';
-
-let isDev;
-try {
-  // eslint-disable-next-line global-require
-  isDev = require('electron-is-dev');
-} catch (e) {
-  isDev = true;
-}
+import settings from 'electron-settings';
+import config from './app.lang.config';
+import isProduction from '../utils/isProduction';
 
 const i18nextOptions = {
   fallbackLng: config.fallbackLng,
-  lng: 'en',
+  lng: (settings.hasSync('appLanguage')
+    ? settings.getSync('appLanguage')
+    : 'en') as string,
   ns: 'translation',
   defaultNS: 'translation',
   backend: {
     // path where resources get loaded from
-    loadPath: isDev
-      ? join(__dirname, '../locales/{{lng}}/{{ns}}.json')
-      : join(__dirname, 'locales/{{lng}}/{{ns}}.json'),
+    loadPath: isProduction()
+      ? join(__dirname, 'locales/{{lng}}/{{ns}}.json')
+      : join(__dirname, '../locales/{{lng}}/{{ns}}.json'),
     // path to post missing resources
-    addPath: isDev
-      ? join(__dirname, '../locales/{{lng}}/{{ns}}.missing.json')
-      : join(__dirname, 'locales/{{lng}}/{{ns}}.json'),
+    addPath: isProduction()
+      ? join(__dirname, 'locales/{{lng}}/{{ns}}.json')
+      : join(__dirname, '../locales/{{lng}}/{{ns}}.missing.json'),
     // jsonIndent to use when storing json files
     jsonIndent: 2,
   },
diff --git a/app/constants/test-devices.json b/app/constants/test-devices.json
new file mode 100644
index 0000000..85ee3ea
--- /dev/null
+++ b/app/constants/test-devices.json
@@ -0,0 +1,72 @@
+[
+  {
+    "id": "123414",
+    "sessionId": "14422424",
+    "deviceOs": "Android",
+    "deviceType": "Mobile",
+    "deviceIp": "123.123.123.123"
+  },
+  {
+    "id": "1123",
+    "sessionId": "43",
+    "deviceOs": "IOS",
+    "deviceType": "Mobile",
+    "deviceIp": "124.124.124.124"
+  },
+  {
+    "id": "2",
+    "sessionId": "22",
+    "deviceOs": "Windows",
+    "deviceType": "PS",
+    "deviceIp": "255.255.124.124"
+  },
+  {
+    "id": "33",
+    "sessionId": "22",
+    "deviceOs": "Ubuntu",
+    "deviceType": "PC",
+    "deviceIp": "4.4.4.124"
+  },
+  {
+    "id": "414",
+    "sessionId": "423",
+    "deviceOs": "Blackberry",
+    "deviceType": "Mobile",
+    "deviceIp": "224.224.224.124"
+  },
+  {
+    "id": "1133223",
+    "sessionId": "4133",
+    "deviceOs": "IOS",
+    "deviceType": "Mobile",
+    "deviceIp": "24.24.24.24"
+  },
+  {
+    "id": "1321123",
+    "sessionId": "44133",
+    "deviceOs": "Android",
+    "deviceType": "Mobile",
+    "deviceIp": "14.14.14.14"
+  },
+  {
+    "id": "993",
+    "sessionId": "91322",
+    "deviceOs": "Debian",
+    "deviceType": "PC",
+    "deviceIp": "1.1.14.14"
+  },
+  {
+    "id": "7757",
+    "sessionId": "1111",
+    "deviceOs": "MacOS",
+    "deviceType": "Mac",
+    "deviceIp": "12.12.14.14"
+  },
+  {
+    "id": "123332",
+    "sessionId": "323231",
+    "deviceOs": "MacOS",
+    "deviceType": "Mac",
+    "deviceIp": "11.11.14.14"
+  }
+]
diff --git a/app/constants/test-screen-sharing-objects.json b/app/constants/test-screen-sharing-objects.json
new file mode 100644
index 0000000..ea9f320
--- /dev/null
+++ b/app/constants/test-screen-sharing-objects.json
@@ -0,0 +1,88 @@
+[
+  {
+    "path": "https://material-ui.com/static/images/grid-list/breakfast.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/breakfast.jpg",
+    "name": "Breakfast",
+    "author": "jill111",
+    "cols": 2,
+    "featured": true
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/burgers.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/burgers.jpg",
+    "name": "Tasty burger",
+    "cols": 3,
+    "author": "director90"
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/camera.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/camera.jpg",
+    "name": "Camera",
+    "cols": 2,
+    "author": "Danson67"
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/morning.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/morning.jpg",
+    "name": "Morning",
+    "author": "fancycrave1",
+    "cols": 1,
+    "featured": true
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/hats.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/hats.jpg",
+    "name": "Hats",
+    "cols": 4,
+    "author": "Hans"
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/honey.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/honey.jpg",
+    "name": "Honey",
+    "cols": 1,
+    "author": "fancycravel"
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/vegetables.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/vegetables.jpg",
+    "name": "Vegetables",
+    "author": "jill111",
+    "cols": 2
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/plant.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/plant.jpg",
+    "name": "Water plant",
+    "author": "BkrmadtyaKarki",
+    "cols": 3
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/mushroom.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/mushroom.jpg",
+    "name": "Mushrooms",
+    "author": "PublicDomainPictures",
+    "cols": 2
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/olive.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/olive.jpg",
+    "name": "Olive oil",
+    "author": "congerdesign",
+    "cols": 1
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/star.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/star.jpg",
+    "name": "Sea star",
+    "cols": 2,
+    "author": "821292"
+  },
+  {
+    "path": "https://material-ui.com/static/images/grid-list/bike.jpg",
+    "id": "https://material-ui.com/static/images/grid-list/bike.jpg",
+    "name": "Bike",
+    "author": "danfador",
+    "cols": 3
+  }
+]
diff --git a/app/containers/ConnectedDevicesProvider/Device.d.ts b/app/containers/ConnectedDevicesProvider/Device.d.ts
new file mode 100644
index 0000000..af3f6df
--- /dev/null
+++ b/app/containers/ConnectedDevicesProvider/Device.d.ts
@@ -0,0 +1,7 @@
+interface Device {
+  id: string;
+  sessionId: string;
+  deviceOs: string;
+  deviceType: string;
+  deviceIp: string;
+}
diff --git a/app/containers/ConnectedDevicesProvider/index.tsx b/app/containers/ConnectedDevicesProvider/index.tsx
new file mode 100644
index 0000000..8e9a202
--- /dev/null
+++ b/app/containers/ConnectedDevicesProvider/index.tsx
@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable react/prop-types */
+import React, { useState, useCallback } from 'react';
+
+interface ConnectedDevicesContextInterface {
+  devices: Device[];
+  pendingConnectionDevice: Device | null;
+  setPendingConnectionDeviceHook: (device: Device) => void;
+  addPendingConnectedDeviceListener: (
+    callback: (device: Device) => void
+  ) => void;
+  setDevicesHook: (devices: Device[]) => void;
+  resetPendingConnectionDeviceHook: () => void;
+  getDevices: () => Device[];
+}
+
+// TODO this value should be set as soon as electron-ConnectedDevices is loaded, to load user pref
+const defaultConnectedDevicesContextValue = {
+  devices: [] as Device[],
+  pendingConnectionDevice: null,
+  setPendingConnectionDeviceHook: () => {},
+  addPendingConnectedDeviceListener: () => {},
+  setDevicesHook: () => {},
+  resetPendingConnectionDeviceHook: () => {},
+  getDevices: () => [] as Device[],
+};
+
+export const ConnectedDevicesContext = React.createContext<
+  ConnectedDevicesContextInterface
+>(defaultConnectedDevicesContextValue);
+
+export const ConnectedDevicesProvider: React.FC = ({ children }) => {
+  const [devices, setDevices] = useState([] as Device[]);
+  const [
+    pendingConnectionDevice,
+    setPendingConnectionDevice,
+  ] = useState<Device | null>();
+  const [
+    pendingDeviceConnectedListeners,
+    setPendingDeviceConnectedListeners,
+  ] = useState([]);
+
+  const emitPendingConnectionDeviceConnected = useCallback(
+    (device: Device) => {
+      pendingDeviceConnectedListeners.forEach(
+        (callback: (device: Device) => void) => {
+          callback(device);
+        }
+      );
+    },
+    [pendingDeviceConnectedListeners]
+  );
+
+  const setPendingConnectionDeviceHook = (device: Device) => {
+    setPendingConnectionDevice(device);
+    emitPendingConnectionDeviceConnected(device);
+  };
+
+  const setDevicesHook = (_devices: Device[]) => {
+    setDevices(_devices);
+  };
+
+  const resetPendingConnectionDeviceHook = () => {
+    setPendingConnectionDevice(undefined);
+  };
+
+  const addPendingConnectedDeviceListener = (
+    callback: (device: Device) => void
+  ) => {
+    // @ts-ignore: has to be like that for now
+    setPendingDeviceConnectedListeners([
+      ...pendingDeviceConnectedListeners,
+      callback,
+    ]);
+  };
+
+  const getDevices = useCallback(() => {
+    return devices;
+  }, [devices]);
+
+  // TODO: load saved devices here? in useEffect
+
+  const value = {
+    devices,
+    pendingConnectionDevice,
+    setDevicesHook,
+    setPendingConnectionDeviceHook,
+    addPendingConnectedDeviceListener,
+    resetPendingConnectionDeviceHook,
+    getDevices,
+  };
+
+  return (
+    // @ts-ignore: it is ok here
+    <ConnectedDevicesContext.Provider value={value}>
+      {children}
+    </ConnectedDevicesContext.Provider>
+  );
+};
diff --git a/app/containers/CounterPage.tsx b/app/containers/CounterPage.tsx
index 124742f..a342ea7 100644
--- a/app/containers/CounterPage.tsx
+++ b/app/containers/CounterPage.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import NavPanel from '../components/NavPanel';
+import TopPanel from '../components/TopPanel';
 import Counter from '../features/counter/Counter';
 
 export default function CounterPage() {
   return (
     <>
-      <NavPanel />
+      <TopPanel />
       <Counter />
     </>
   );
diff --git a/app/containers/HomePage.spec.tsx b/app/containers/HomePage.spec.tsx
new file mode 100644
index 0000000..ca6cff6
--- /dev/null
+++ b/app/containers/HomePage.spec.tsx
@@ -0,0 +1,28 @@
+import React, { Suspense } from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import HomePage from './HomePage';
+import { SettingsProvider } from './SettingsProvider';
+import { ConnectedDevicesProvider } from './ConnectedDevicesProvider';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <Suspense fallback={<div>Loading... </div>}>
+        <SettingsProvider>
+          <ConnectedDevicesProvider>
+            <Router>
+              <HomePage />
+            </Router>
+          </ConnectedDevicesProvider>
+        </SettingsProvider>
+      </Suspense>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/containers/HomePage.tsx b/app/containers/HomePage.tsx
index 94f0802..942c0cd 100644
--- a/app/containers/HomePage.tsx
+++ b/app/containers/HomePage.tsx
@@ -1,12 +1,50 @@
-import React from 'react';
-import NavPanel from '../components/NavPanel';
-import Home from '../components/Home';
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+
+import React, { useRef } from 'react';
+import { Classes } from '@blueprintjs/core';
+import { ToastProvider, DefaultToast } from 'react-toast-notifications';
+
+import TopPanel from '../components/TopPanel';
+import { LIGHT_UI_BACKGROUND } from './SettingsProvider';
+import DeskreenStepper from './Stepper';
+
+// @ts-ignore: it is ok here, be like js it is fine
+// eslint-disable-next-line react/prop-types
+export const CustomToastWithTheme = ({ children, ...props }) => {
+  return (
+    <DefaultToast
+      components={{ Toast: CustomToastWithTheme }}
+      {...props}
+      // @ts-ignore: some minor type complain, it is fine here
+      style={{
+        // eslint-disable-next-line react/prop-types
+        color: props.isdarktheme === 'false' ? '#293742' : '#BFCCD6',
+        backgroundColor:
+          // eslint-disable-next-line react/prop-types
+          props.isdarktheme === 'false' ? LIGHT_UI_BACKGROUND : '#394B59',
+      }}
+    >
+      <>{children}</>
+    </DefaultToast>
+  );
+};
 
 export default function HomePage() {
+  const stepperRef = useRef();
+
   return (
-    <>
-      <NavPanel />
-      <Home />
-    </>
+    <ToastProvider
+      placement="top-center"
+      autoDismissTimeout={5000}
+      components={{ Toast: CustomToastWithTheme }}
+    >
+      <div className={Classes.TREE}>
+        <TopPanel stepperRef={stepperRef} />
+        <DeskreenStepper ref={stepperRef} />
+        {/* <Home /> */}
+      </div>
+    </ToastProvider>
   );
 }
diff --git a/app/containers/Root.tsx b/app/containers/Root.tsx
index 674b222..927bd46 100644
--- a/app/containers/Root.tsx
+++ b/app/containers/Root.tsx
@@ -1,11 +1,17 @@
 import React, { useEffect, useState } from 'react';
+import { FocusStyleManager } from '@blueprintjs/core';
 import { Provider } from 'react-redux';
+
 import { ConnectedRouter } from 'connected-react-router';
 import { hot } from 'react-hot-loader/root';
 import { History } from 'history';
 import { Store } from '../store';
 import Routes from '../Routes';
 import i18n from '../configs/i18next.config.client';
+import { SettingsProvider } from './SettingsProvider';
+import { ConnectedDevicesProvider } from './ConnectedDevicesProvider';
+
+FocusStyleManager.onlyShowFocusOnTabs();
 
 type Props = {
   store: Store;
@@ -23,9 +29,13 @@ const Root = ({ store, history }: Props) => {
 
   return (
     <Provider store={store}>
-      <ConnectedRouter history={history}>
-        <Routes />
-      </ConnectedRouter>
+      <SettingsProvider>
+        <ConnectedDevicesProvider>
+          <ConnectedRouter history={history}>
+            <Routes />
+          </ConnectedRouter>
+        </ConnectedDevicesProvider>
+      </SettingsProvider>
     </Provider>
   );
 };
diff --git a/app/containers/SettingsProvider.tsx b/app/containers/SettingsProvider.tsx
new file mode 100644
index 0000000..6cf4167
--- /dev/null
+++ b/app/containers/SettingsProvider.tsx
@@ -0,0 +1,61 @@
+/* eslint-disable @typescript-eslint/no-empty-interface */
+/* eslint-disable react/prop-types */
+/* eslint-disable import/prefer-default-export */
+import React, { useState, useEffect } from 'react';
+import settings from 'electron-settings';
+import { Classes } from '@blueprintjs/core';
+
+export const LIGHT_UI_BACKGROUND = 'rgba(240, 248, 250, 1)';
+export const DARK_UI_BACKGROUND = '#293742';
+
+interface SettingsContextInterface {
+  isDarkTheme: boolean;
+  setIsDarkThemeHook: (val: boolean) => void;
+}
+
+const defaultSettingsContextValue = {
+  isDarkTheme: false,
+  setIsDarkThemeHook: () => {},
+};
+
+export const SettingsContext = React.createContext<SettingsContextInterface>(
+  defaultSettingsContextValue
+);
+
+export const SettingsProvider: React.FC = ({ children }) => {
+  const [isDarkTheme, setIsDarkTheme] = useState(false);
+
+  const loadDarkThemeFromSettings = () => {
+    const gotIsDarkThemeFromSettings = settings.hasSync('appIsDarkTheme')
+      ? settings.getSync('appIsDarkTheme') === 'true'
+      : false;
+
+    if (gotIsDarkThemeFromSettings) {
+      document.body.classList.toggle(Classes.DARK);
+      // if ()
+      document.body.style.backgroundColor = LIGHT_UI_BACKGROUND;
+    }
+
+    setIsDarkTheme(gotIsDarkThemeFromSettings);
+  };
+
+  useEffect(() => {
+    loadDarkThemeFromSettings();
+  }, []);
+
+  const setIsDarkThemeHook = (val: boolean) => {
+    settings.setSync('appIsDarkTheme', `${val}`);
+    setIsDarkTheme(val);
+    // if (!val) {
+    //   document.body.style.backgroundColor = `${LIGHT_UI_BACKGROUND} !important`;
+    // }
+  };
+
+  const value = { isDarkTheme, setIsDarkThemeHook };
+
+  return (
+    <SettingsContext.Provider value={value}>
+      {children}
+    </SettingsContext.Provider>
+  );
+};
diff --git a/app/containers/Stepper.spec.tsx b/app/containers/Stepper.spec.tsx
new file mode 100644
index 0000000..c8bf499
--- /dev/null
+++ b/app/containers/Stepper.spec.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import Enzyme, { mount } from 'enzyme';
+import EnzymeToJson from 'enzyme-to-json';
+import Adapter from 'enzyme-adapter-react-16';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { ToastProvider } from 'react-toast-notifications';
+import DeskreenStepper from './Stepper';
+
+Enzyme.configure({ adapter: new Adapter() });
+jest.useFakeTimers();
+
+it('should match exact snapshot', () => {
+  const subject = mount(
+    <>
+      <ToastProvider placement="top-center">
+        <Router>
+          <DeskreenStepper />
+        </Router>
+      </ToastProvider>
+    </>
+  );
+  expect(EnzymeToJson(subject)).toMatchSnapshot();
+});
diff --git a/app/containers/Stepper.tsx b/app/containers/Stepper.tsx
new file mode 100644
index 0000000..6af9b8c
--- /dev/null
+++ b/app/containers/Stepper.tsx
@@ -0,0 +1,267 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+import React, { useState, useCallback, useContext, useEffect } from 'react';
+import { makeStyles, createStyles } from '@material-ui/core/styles';
+import Stepper from '@material-ui/core/Stepper';
+import Step from '@material-ui/core/Step';
+import StepLabel from '@material-ui/core/StepLabel';
+import { Row, Col } from 'react-flexbox-grid';
+import { Text } from '@blueprintjs/core';
+
+import { useToasts } from 'react-toast-notifications';
+
+import SuccessStep from '../components/StepsOfStepper/SuccessStep';
+import IntermediateStep from '../components/StepsOfStepper/IntermediateStep';
+import { ConnectedDevicesContext } from './ConnectedDevicesProvider';
+import AllowConnectionForDeviceAlert from '../components/AllowConnectionForDeviceAlert';
+import DeviceConnectedInfoButton from '../components/StepperPanel/DeviceConnectedInfoButton';
+import ColorlibStepIcon, {
+  StepIconPropsDeskreen,
+} from '../components/StepperPanel/ColorlibStepIcon';
+import ColorlibConnector from '../components/StepperPanel/ColorlibConnector';
+import { SettingsContext } from './SettingsProvider';
+import isProduction from '../utils/isProduction';
+
+const Fade = require('react-reveal/Fade');
+const Zoom = require('react-reveal/Zoom');
+const Pulse = require('react-reveal/Pulse');
+
+const useStyles = makeStyles(() =>
+  createStyles({
+    stepContent: {
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    stepLabelContent: {
+      marginTop: '10px !important',
+      height: '110px',
+    },
+    stepperComponent: {
+      paddingBottom: '0px',
+    },
+  })
+);
+
+function getSteps() {
+  return ['Connect', 'Select', 'Confirm'];
+}
+
+// eslint-disable-next-line react/display-name
+const DeskreenStepper = React.forwardRef((_props, ref) => {
+  const classes = useStyles();
+
+  const [isInterShow, setIsInterShow] = useState(false);
+
+  const { isDarkTheme } = useContext(SettingsContext);
+
+  const { addToast } = useToasts();
+
+  const [isAlertOpen, setIsAlertOpen] = useState(false);
+  const [isUserAllowedConnection, setIsUserAllowedConnection] = useState(false);
+
+  const { addPendingConnectedDeviceListener } = useContext(
+    ConnectedDevicesContext
+  );
+
+  const [
+    pendingConnectionDevice,
+    setPendingConnectionDevice,
+  ] = useState<Device | null>(null);
+
+  useEffect(() => {
+    addPendingConnectedDeviceListener((device: Device) => {
+      setPendingConnectionDevice(device);
+      setIsAlertOpen(true);
+    });
+
+    setTimeout(
+      () => {
+        setIsInterShow(true);
+      },
+      isProduction() ? 500 : 0
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [activeStep, setActiveStep] = useState(0);
+  const [isEntireScreenSelected, setIsEntireScreenSelected] = useState(false);
+  const [
+    isApplicationWindowSelected,
+    setIsApplicationWindowSelected,
+  ] = useState(false);
+  const steps = getSteps();
+
+  const makeSmoothIntermediateStepTransition = () => {
+    if (!isProduction()) return;
+    setIsInterShow(false);
+    setTimeout(() => {
+      setIsInterShow(true);
+    }, 500);
+  };
+
+  const handleNext = useCallback(() => {
+    makeSmoothIntermediateStepTransition();
+    if (activeStep === steps.length - 1) {
+      setIsEntireScreenSelected(false);
+      setIsApplicationWindowSelected(false);
+    }
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+  }, [activeStep, steps]);
+
+  const handleNextEntireScreen = useCallback(() => {
+    makeSmoothIntermediateStepTransition();
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    setIsEntireScreenSelected(true);
+  }, []);
+
+  const handleNextApplicationWindow = useCallback(() => {
+    makeSmoothIntermediateStepTransition();
+    setActiveStep((prevActiveStep) => prevActiveStep + 1);
+    setIsApplicationWindowSelected(true);
+  }, []);
+
+  const handleBack = useCallback(() => {
+    makeSmoothIntermediateStepTransition();
+    setActiveStep((prevActiveStep) => prevActiveStep - 1);
+  }, []);
+
+  const handleReset = useCallback(() => {
+    makeSmoothIntermediateStepTransition();
+    setActiveStep(0);
+  }, []);
+
+  React.useImperativeHandle(ref, () => ({
+    handleReset() {
+      handleReset();
+    },
+  }));
+
+  const handleCancelAlert = () => {
+    setIsAlertOpen(false);
+  };
+
+  const handleConfirmAlert = useCallback(() => {
+    setIsAlertOpen(false);
+    setIsUserAllowedConnection(true);
+    handleNext();
+  }, [handleNext]);
+
+  const handleUserClickedDeviceDisconnectButton = useCallback(() => {
+    handleReset();
+    setPendingConnectionDevice(null);
+    setIsUserAllowedConnection(false);
+
+    addToast(
+      <Text>
+        Device is successfully disconnected by you. You can connect new device
+      </Text>,
+      {
+        appearance: 'info',
+        autoDismiss: true,
+        // @ts-ignore: works fine here, ignore
+        isdarktheme: `${isDarkTheme}`,
+      }
+    );
+  }, [addToast, handleReset, isDarkTheme]);
+
+  const renderIntermediateOrSuccessStepContent = useCallback(() => {
+    return activeStep === steps.length ? (
+      <Zoom duration={300} when={isInterShow}>
+        <Row middle="xs" center="xs">
+          <SuccessStep handleReset={handleReset} />
+        </Row>
+      </Zoom>
+    ) : (
+      <Fade duration={isProduction() ? 300 : 0} when={isInterShow}>
+        <IntermediateStep
+          activeStep={activeStep}
+          steps={steps}
+          handleNext={handleNext}
+          handleBack={handleBack}
+          handleNextEntireScreen={handleNextEntireScreen}
+          handleNextApplicationWindow={handleNextApplicationWindow}
+          resetPendingConnectionDevice={() => setPendingConnectionDevice(null)}
+          resetUserAllowedConnection={() => setIsUserAllowedConnection(false)}
+        />
+      </Fade>
+    );
+  }, [
+    activeStep,
+    steps,
+    isInterShow,
+    handleReset,
+    handleNext,
+    handleBack,
+    handleNextEntireScreen,
+    handleNextApplicationWindow,
+  ]);
+
+  const renderStepLabelContent = useCallback(
+    (label, idx) => {
+      return (
+        <StepLabel
+          id="step-label-deskreen"
+          className={classes.stepLabelContent}
+          StepIconComponent={ColorlibStepIcon}
+          StepIconProps={
+            {
+              isEntireScreenSelected,
+              isApplicationWindowSelected,
+            } as StepIconPropsDeskreen
+          }
+        >
+          {pendingConnectionDevice && idx === 0 && isUserAllowedConnection ? (
+            <DeviceConnectedInfoButton
+              device={pendingConnectionDevice}
+              onDisconnect={handleUserClickedDeviceDisconnectButton}
+            />
+          ) : (
+            <Text className="bp3-text-muted">{label}</Text>
+          )}
+        </StepLabel>
+      );
+    },
+    [
+      classes.stepLabelContent,
+      handleUserClickedDeviceDisconnectButton,
+      isApplicationWindowSelected,
+      isEntireScreenSelected,
+      isUserAllowedConnection,
+      pendingConnectionDevice,
+    ]
+  );
+
+  return (
+    <>
+      <Row>
+        <Col xs={12}>
+          <Pulse top duration={isProduction() ? 1500 : 0}>
+            <Stepper
+              className={classes.stepperComponent}
+              activeStep={activeStep}
+              alternativeLabel
+              style={{ background: 'transparent' }}
+              connector={<ColorlibConnector />}
+            >
+              {steps.map((label, idx) => (
+                <Step key={label}>{renderStepLabelContent(label, idx)}</Step>
+              ))}
+            </Stepper>
+          </Pulse>
+        </Col>
+        <Col className={classes.stepContent} xs={12}>
+          {renderIntermediateOrSuccessStepContent()}
+        </Col>
+      </Row>
+      <AllowConnectionForDeviceAlert
+        device={pendingConnectionDevice}
+        isOpen={isAlertOpen}
+        onCancel={handleCancelAlert}
+        onConfirm={handleConfirmAlert}
+      />
+    </>
+  );
+});
+
+export default DeskreenStepper;
diff --git a/app/containers/__mocks__/electron-settings.ts b/app/containers/__mocks__/electron-settings.ts
new file mode 100644
index 0000000..8f9f892
--- /dev/null
+++ b/app/containers/__mocks__/electron-settings.ts
@@ -0,0 +1,30 @@
+/* eslint-disable import/prefer-default-export */
+
+// export const hasSync = (name: string) => {
+//   if (name === 'appLanguage') {
+//     return true;
+//   }
+//   return false;
+// };
+
+// export const getSync = (name: string) => {
+//   if (name === 'appLanguage') {
+//     return 'en';
+//   }
+//   return 'en';
+// };
+
+export default {
+  hasSync: (name: string) => {
+    if (name === 'appLanguage') {
+      return true;
+    }
+    return true;
+  },
+  getSync: (name: string) => {
+    if (name === 'appLanguage') {
+      return 'en';
+    }
+    return 'en';
+  },
+};
diff --git a/app/containers/__mocks__/electron.ts b/app/containers/__mocks__/electron.ts
new file mode 100644
index 0000000..1d85ddf
--- /dev/null
+++ b/app/containers/__mocks__/electron.ts
@@ -0,0 +1,10 @@
+/* eslint-disable import/prefer-default-export */
+
+export const remote = {
+  getGlobal: (name: string) => {
+    if (name === 'appPath') {
+      return __dirname;
+    }
+    return '';
+  },
+};
diff --git a/app/containers/__mocks__/react-i18next.ts b/app/containers/__mocks__/react-i18next.ts
new file mode 100644
index 0000000..01ff1a8
--- /dev/null
+++ b/app/containers/__mocks__/react-i18next.ts
@@ -0,0 +1,19 @@
+/* eslint-disable import/prefer-default-export */
+
+import { ThirdPartyModule } from 'i18next';
+
+export const useTranslation = () => {
+  return {
+    t: (key: string) => {
+      if (key === 'Language') {
+        return 'Language';
+      }
+      return '';
+    },
+  };
+};
+
+export const initReactI18next: ThirdPartyModule = {
+  type: '3rdParty',
+  init: () => {},
+};
diff --git a/app/containers/__snapshots__/HomePage.spec.tsx.snap b/app/containers/__snapshots__/HomePage.spec.tsx.snap
new file mode 100644
index 0000000..68bb6a5
--- /dev/null
+++ b/app/containers/__snapshots__/HomePage.spec.tsx.snap
@@ -0,0 +1,2276 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<Suspense
+  fallback={
+    <div>
+      Loading... 
+    </div>
+  }
+>
+  <SettingsProvider>
+    <ConnectedDevicesProvider>
+      <BrowserRouter>
+        <Router
+          history={
+            Object {
+              "action": "POP",
+              "block": [Function],
+              "createHref": [Function],
+              "go": [Function],
+              "goBack": [Function],
+              "goForward": [Function],
+              "length": 1,
+              "listen": [Function],
+              "location": Object {
+                "hash": "",
+                "pathname": "/",
+                "search": "",
+                "state": undefined,
+              },
+              "push": [Function],
+              "replace": [Function],
+            }
+          }
+        >
+          <HomePage>
+            <ToastProvider
+              autoDismiss={false}
+              autoDismissTimeout={5000}
+              components={
+                Object {
+                  "Toast": [Function],
+                }
+              }
+              placement="top-center"
+              transitionDuration={220}
+            >
+              <div
+                className="bp3-tree"
+              >
+                <TopPanel
+                  stepperRef={
+                    Object {
+                      "current": Object {
+                        "handleReset": [Function],
+                      },
+                    }
+                  }
+                >
+                  <div
+                    className="makeStyles-topPanelRoot-1"
+                  >
+                    <Zoom
+                      duration={0}
+                      top={true}
+                    >
+                      <RevealBase
+                        fraction={0.2}
+                        inEffect={
+                          Object {
+                            "count": 1,
+                            "delay": 0,
+                            "duration": 0,
+                            "forever": undefined,
+                            "make": [Function],
+                            "reverse": undefined,
+                            "style": Object {
+                              "animationFillMode": "both",
+                            },
+                          }
+                        }
+                        outEffect={
+                          Object {
+                            "count": 1,
+                            "delay": 0,
+                            "duration": 0,
+                            "forever": undefined,
+                            "make": [Function],
+                            "reverse": undefined,
+                            "style": Object {
+                              "animationFillMode": "both",
+                            },
+                          }
+                        }
+                        refProp="ref"
+                        top={true}
+                      >
+                        <div
+                          className="react-reveal makeStyles-logoWithAppName-9"
+                          id="logo-with-popover-visit-website"
+                          style={
+                            Object {
+                              "opacity": undefined,
+                            }
+                          }
+                        >
+                          <h4
+                            className="makeStyles-appNameHeader-17"
+                            id="deskreen-top-app-name-header"
+                          >
+                            Deskreen
+                          </h4>
+                        </div>
+                      </RevealBase>
+                    </Zoom>
+                    <div
+                      className="makeStyles-topPanelControlButtonsRoot-25"
+                    >
+                      <Fade
+                        duration={0}
+                        right={true}
+                      >
+                        <RevealBase
+                          fraction={0.2}
+                          inEffect={
+                            Object {
+                              "count": 1,
+                              "delay": 0,
+                              "duration": 0,
+                              "forever": undefined,
+                              "make": [Function],
+                              "reverse": undefined,
+                              "style": Object {
+                                "animationFillMode": "both",
+                              },
+                            }
+                          }
+                          key=".0"
+                          outEffect={
+                            Object {
+                              "count": 1,
+                              "delay": 0,
+                              "duration": 0,
+                              "forever": undefined,
+                              "make": [Function],
+                              "reverse": undefined,
+                              "style": Object {
+                                "animationFillMode": "both",
+                              },
+                            }
+                          }
+                          refProp="ref"
+                          right={true}
+                        >
+                          <div
+                            className="react-reveal makeStyles-topPanelControlButtonMargin-34"
+                            style={
+                              Object {
+                                "opacity": undefined,
+                              }
+                            }
+                          >
+                            <Blueprint3.Tooltip
+                              content="Connected Devices"
+                              hoverCloseDelay={0}
+                              hoverOpenDelay={100}
+                              position="bottom"
+                              transitionDuration={100}
+                            >
+                              <Blueprint3.Popover
+                                autoFocus={false}
+                                boundary="scrollParent"
+                                canEscapeKeyClose={false}
+                                captureDismiss={false}
+                                content="Connected Devices"
+                                defaultIsOpen={false}
+                                disabled={false}
+                                enforceFocus={false}
+                                fill={false}
+                                hasBackdrop={false}
+                                hoverCloseDelay={0}
+                                hoverOpenDelay={100}
+                                inheritDarkTheme={true}
+                                interactionKind="hover-target"
+                                lazy={true}
+                                minimal={false}
+                                modifiers={Object {}}
+                                openOnTargetFocus={true}
+                                popoverClassName="bp3-tooltip"
+                                position="bottom"
+                                targetTagName="span"
+                                transitionDuration={100}
+                                usePortal={true}
+                                wrapperTagName="span"
+                              >
+                                <Manager>
+                                  <span
+                                    className="bp3-popover-wrapper"
+                                  >
+                                    <Reference
+                                      innerRef={[Function]}
+                                    >
+                                      <InnerReference
+                                        innerRef={[Function]}
+                                        setReferenceNode={[Function]}
+                                      >
+                                        <Blueprint3.ResizeSensor
+                                          onResize={[Function]}
+                                        >
+                                          <span
+                                            className="bp3-popover-target"
+                                            onBlur={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                          >
+                                            <Blueprint3.Button
+                                              className="makeStyles-topPanelControlButton-40"
+                                              id="top-panel-connected-devices-list-button"
+                                              intent="none"
+                                              key=".0"
+                                              onClick={[Function]}
+                                              tabIndex={0}
+                                            >
+                                              <button
+                                                className="bp3-button makeStyles-topPanelControlButton-40"
+                                                id="top-panel-connected-devices-list-button"
+                                                onClick={[Function]}
+                                                onKeyDown={[Function]}
+                                                onKeyUp={[Function]}
+                                                tabIndex={0}
+                                                type="button"
+                                              >
+                                                <Blueprint3.Icon
+                                                  key="leftIcon"
+                                                />
+                                                <span
+                                                  className="bp3-button-text"
+                                                  key="text"
+                                                >
+                                                  <Blueprint3.Icon
+                                                    className="makeStyles-topPanelIconOfControlButton-49"
+                                                    icon="th-list"
+                                                    iconSize={20}
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-th-list makeStyles-topPanelIconOfControlButton-49"
+                                                      icon="th-list"
+                                                    >
+                                                      <svg
+                                                        data-icon="th-list"
+                                                        height={20}
+                                                        viewBox="0 0 20 20"
+                                                        width={20}
+                                                      >
+                                                        <desc>
+                                                          th-list
+                                                        </desc>
+                                                        <path
+                                                          d="M19 1H1c-.6 0-1 .5-1 1v16c0 .5.4 1 1 1h18c.5 0 1-.5 1-1V2c0-.5-.5-1-1-1zm-1 16H2v-3h16v3zm0-4H2v-3h16v3zm0-4H2V6h16v3z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </span>
+                                                <Blueprint3.Icon
+                                                  key="rightIcon"
+                                                />
+                                              </button>
+                                            </Blueprint3.Button>
+                                          </span>
+                                        </Blueprint3.ResizeSensor>
+                                      </InnerReference>
+                                    </Reference>
+                                    <Blueprint3.Overlay
+                                      autoFocus={false}
+                                      backdropClassName="bp3-popover-backdrop"
+                                      backdropProps={Object {}}
+                                      canEscapeKeyClose={false}
+                                      canOutsideClickClose={false}
+                                      enforceFocus={false}
+                                      hasBackdrop={false}
+                                      isOpen={false}
+                                      lazy={true}
+                                      onClose={[Function]}
+                                      transitionDuration={100}
+                                      transitionName="bp3-popover"
+                                      usePortal={true}
+                                    />
+                                  </span>
+                                </Manager>
+                              </Blueprint3.Popover>
+                            </Blueprint3.Tooltip>
+                          </div>
+                        </RevealBase>
+                        <RevealBase
+                          fraction={0.2}
+                          inEffect={
+                            Object {
+                              "count": 1,
+                              "delay": 0,
+                              "duration": 0,
+                              "forever": undefined,
+                              "make": [Function],
+                              "reverse": undefined,
+                              "style": Object {
+                                "animationFillMode": "both",
+                              },
+                            }
+                          }
+                          key=".1"
+                          outEffect={
+                            Object {
+                              "count": 1,
+                              "delay": 0,
+                              "duration": 0,
+                              "forever": undefined,
+                              "make": [Function],
+                              "reverse": undefined,
+                              "style": Object {
+                                "animationFillMode": "both",
+                              },
+                            }
+                          }
+                          refProp="ref"
+                          right={true}
+                        >
+                          <div
+                            className="react-reveal makeStyles-topPanelControlButtonMargin-55"
+                            style={
+                              Object {
+                                "opacity": undefined,
+                              }
+                            }
+                          >
+                            <Blueprint3.Tooltip
+                              content="Help"
+                              hoverCloseDelay={0}
+                              hoverOpenDelay={100}
+                              position="bottom"
+                              transitionDuration={100}
+                            >
+                              <Blueprint3.Popover
+                                autoFocus={false}
+                                boundary="scrollParent"
+                                canEscapeKeyClose={false}
+                                captureDismiss={false}
+                                content="Help"
+                                defaultIsOpen={false}
+                                disabled={false}
+                                enforceFocus={false}
+                                fill={false}
+                                hasBackdrop={false}
+                                hoverCloseDelay={0}
+                                hoverOpenDelay={100}
+                                inheritDarkTheme={true}
+                                interactionKind="hover-target"
+                                lazy={true}
+                                minimal={false}
+                                modifiers={Object {}}
+                                openOnTargetFocus={true}
+                                popoverClassName="bp3-tooltip"
+                                position="bottom"
+                                targetTagName="span"
+                                transitionDuration={100}
+                                usePortal={true}
+                                wrapperTagName="span"
+                              >
+                                <Manager>
+                                  <span
+                                    className="bp3-popover-wrapper"
+                                  >
+                                    <Reference
+                                      innerRef={[Function]}
+                                    >
+                                      <InnerReference
+                                        innerRef={[Function]}
+                                        setReferenceNode={[Function]}
+                                      >
+                                        <Blueprint3.ResizeSensor
+                                          onResize={[Function]}
+                                        >
+                                          <span
+                                            className="bp3-popover-target"
+                                            onBlur={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                          >
+                                            <Blueprint3.Button
+                                              className="makeStyles-topPanelControlButton-61"
+                                              id="top-panel-help-button"
+                                              intent="none"
+                                              key=".0"
+                                              tabIndex={0}
+                                            >
+                                              <button
+                                                className="bp3-button makeStyles-topPanelControlButton-61"
+                                                id="top-panel-help-button"
+                                                onKeyDown={[Function]}
+                                                onKeyUp={[Function]}
+                                                tabIndex={0}
+                                                type="button"
+                                              >
+                                                <Blueprint3.Icon
+                                                  key="leftIcon"
+                                                />
+                                                <span
+                                                  className="bp3-button-text"
+                                                  key="text"
+                                                >
+                                                  <Blueprint3.Icon
+                                                    className="makeStyles-topPanelIconOfControlButton-70"
+                                                    icon="help"
+                                                    iconSize={22}
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-help makeStyles-topPanelIconOfControlButton-70"
+                                                      icon="help"
+                                                    >
+                                                      <svg
+                                                        data-icon="help"
+                                                        height={22}
+                                                        viewBox="0 0 20 20"
+                                                        width={22}
+                                                      >
+                                                        <desc>
+                                                          help
+                                                        </desc>
+                                                        <path
+                                                          d="M10 0C4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10S15.52 0 10 0zM7.41 4.62c.65-.54 1.51-.82 2.56-.82.54 0 1.03.08 1.48.25.44.17.83.39 1.14.68.32.29.56.63.74 1.02.17.39.26.82.26 1.27s-.08.87-.24 1.23c-.16.37-.4.73-.71 1.11l-1.21 1.58c-.14.17-.28.33-.32.48-.05.15-.11.35-.11.6v.97H9v-2s.06-.58.24-.81l1.21-1.64c.25-.3.41-.56.51-.77s.14-.44.14-.67c0-.35-.11-.63-.32-.85s-.5-.33-.88-.33c-.37 0-.67.11-.89.33-.22.23-.37.54-.46.94-.03.12-.11.17-.23.16l-1.95-.29c-.12-.01-.16-.08-.14-.22.13-.93.52-1.67 1.18-2.22zM9 14h2.02L11 16H9v-2z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </span>
+                                                <Blueprint3.Icon
+                                                  key="rightIcon"
+                                                />
+                                              </button>
+                                            </Blueprint3.Button>
+                                          </span>
+                                        </Blueprint3.ResizeSensor>
+                                      </InnerReference>
+                                    </Reference>
+                                    <Blueprint3.Overlay
+                                      autoFocus={false}
+                                      backdropClassName="bp3-popover-backdrop"
+                                      backdropProps={Object {}}
+                                      canEscapeKeyClose={false}
+                                      canOutsideClickClose={false}
+                                      enforceFocus={false}
+                                      hasBackdrop={false}
+                                      isOpen={false}
+                                      lazy={true}
+                                      onClose={[Function]}
+                                      transitionDuration={100}
+                                      transitionName="bp3-popover"
+                                      usePortal={true}
+                                    />
+                                  </span>
+                                </Manager>
+                              </Blueprint3.Popover>
+                            </Blueprint3.Tooltip>
+                          </div>
+                        </RevealBase>
+                        <RevealBase
+                          fraction={0.2}
+                          inEffect={
+                            Object {
+                              "count": 1,
+                              "delay": 0,
+                              "duration": 0,
+                              "forever": undefined,
+                              "make": [Function],
+                              "reverse": undefined,
+                              "style": Object {
+                                "animationFillMode": "both",
+                              },
+                            }
+                          }
+                          key=".2"
+                          outEffect={
+                            Object {
+                              "count": 1,
+                              "delay": 0,
+                              "duration": 0,
+                              "forever": undefined,
+                              "make": [Function],
+                              "reverse": undefined,
+                              "style": Object {
+                                "animationFillMode": "both",
+                              },
+                            }
+                          }
+                          refProp="ref"
+                          right={true}
+                        >
+                          <div
+                            className="react-reveal makeStyles-topPanelControlButtonMargin-76"
+                            style={
+                              Object {
+                                "opacity": undefined,
+                              }
+                            }
+                          >
+                            <Blueprint3.Tooltip
+                              content="Settings"
+                              hoverCloseDelay={0}
+                              hoverOpenDelay={100}
+                              position="bottom"
+                              transitionDuration={100}
+                            >
+                              <Blueprint3.Popover
+                                autoFocus={false}
+                                boundary="scrollParent"
+                                canEscapeKeyClose={false}
+                                captureDismiss={false}
+                                content="Settings"
+                                defaultIsOpen={false}
+                                disabled={false}
+                                enforceFocus={false}
+                                fill={false}
+                                hasBackdrop={false}
+                                hoverCloseDelay={0}
+                                hoverOpenDelay={100}
+                                inheritDarkTheme={true}
+                                interactionKind="hover-target"
+                                lazy={true}
+                                minimal={false}
+                                modifiers={Object {}}
+                                openOnTargetFocus={true}
+                                popoverClassName="bp3-tooltip"
+                                position="bottom"
+                                targetTagName="span"
+                                transitionDuration={100}
+                                usePortal={true}
+                                wrapperTagName="span"
+                              >
+                                <Manager>
+                                  <span
+                                    className="bp3-popover-wrapper"
+                                  >
+                                    <Reference
+                                      innerRef={[Function]}
+                                    >
+                                      <InnerReference
+                                        innerRef={[Function]}
+                                        setReferenceNode={[Function]}
+                                      >
+                                        <Blueprint3.ResizeSensor
+                                          onResize={[Function]}
+                                        >
+                                          <span
+                                            className="bp3-popover-target"
+                                            onBlur={[Function]}
+                                            onFocus={[Function]}
+                                            onMouseEnter={[Function]}
+                                            onMouseLeave={[Function]}
+                                          >
+                                            <Blueprint3.Button
+                                              className="makeStyles-topPanelControlButton-82"
+                                              id="top-panel-settings-button"
+                                              key=".0"
+                                              onClick={[Function]}
+                                              tabIndex={0}
+                                            >
+                                              <button
+                                                className="bp3-button makeStyles-topPanelControlButton-82"
+                                                id="top-panel-settings-button"
+                                                onClick={[Function]}
+                                                onKeyDown={[Function]}
+                                                onKeyUp={[Function]}
+                                                tabIndex={0}
+                                                type="button"
+                                              >
+                                                <Blueprint3.Icon
+                                                  key="leftIcon"
+                                                />
+                                                <span
+                                                  className="bp3-button-text"
+                                                  key="text"
+                                                >
+                                                  <Blueprint3.Icon
+                                                    className="makeStyles-topPanelIconOfControlButton-91"
+                                                    icon="cog"
+                                                    iconSize={22}
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-cog makeStyles-topPanelIconOfControlButton-91"
+                                                      icon="cog"
+                                                    >
+                                                      <svg
+                                                        data-icon="cog"
+                                                        height={22}
+                                                        viewBox="0 0 20 20"
+                                                        width={22}
+                                                      >
+                                                        <desc>
+                                                          cog
+                                                        </desc>
+                                                        <path
+                                                          d="M19 8h-2.31c-.14-.46-.33-.89-.56-1.3l1.7-1.7a.996.996 0 000-1.41l-1.41-1.41a.996.996 0 00-1.41 0l-1.7 1.7c-.41-.22-.84-.41-1.3-.55V1c0-.55-.45-1-1-1H9c-.55 0-1 .45-1 1v2.33c-.48.14-.94.34-1.37.58L5 2.28a.972.972 0 00-1.36 0L2.28 3.64c-.37.38-.37.99 0 1.36L3.9 6.62c-.24.44-.44.89-.59 1.38H1c-.55 0-1 .45-1 1v2c0 .55.45 1 1 1h2.31c.14.46.33.89.56 1.3L2.17 15a.996.996 0 000 1.41l1.41 1.41c.39.39 1.02.39 1.41 0l1.7-1.7c.41.22.84.41 1.3.55V19c0 .55.45 1 1 1h2c.55 0 1-.45 1-1v-2.33c.48-.14.94-.35 1.37-.59L15 17.72c.37.37.98.37 1.36 0l1.36-1.36c.37-.37.37-.98 0-1.36l-1.62-1.62c.24-.43.45-.89.6-1.38H19c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1zm-9 6c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </span>
+                                                <Blueprint3.Icon
+                                                  key="rightIcon"
+                                                />
+                                              </button>
+                                            </Blueprint3.Button>
+                                          </span>
+                                        </Blueprint3.ResizeSensor>
+                                      </InnerReference>
+                                    </Reference>
+                                    <Blueprint3.Overlay
+                                      autoFocus={false}
+                                      backdropClassName="bp3-popover-backdrop"
+                                      backdropProps={Object {}}
+                                      canEscapeKeyClose={false}
+                                      canOutsideClickClose={false}
+                                      enforceFocus={false}
+                                      hasBackdrop={false}
+                                      isOpen={false}
+                                      lazy={true}
+                                      onClose={[Function]}
+                                      transitionDuration={100}
+                                      transitionName="bp3-popover"
+                                      usePortal={true}
+                                    />
+                                  </span>
+                                </Manager>
+                              </Blueprint3.Popover>
+                            </Blueprint3.Tooltip>
+                          </div>
+                        </RevealBase>
+                      </Fade>
+                    </div>
+                  </div>
+                  <SettingsOverlay
+                    handleClose={[Function]}
+                    isSettingsOpen={false}
+                  >
+                    <Blueprint3.Overlay
+                      autoFocus={true}
+                      backdropProps={Object {}}
+                      canEscapeKeyClose={true}
+                      canOutsideClickClose={true}
+                      className="bp3-overlay-scroll-container bp3-overlay-settings"
+                      enforceFocus={true}
+                      hasBackdrop={true}
+                      isOpen={false}
+                      lazy={true}
+                      onClose={[Function]}
+                      transitionDuration={0}
+                      transitionName="bp3-overlay"
+                      usePortal={true}
+                    />
+                  </SettingsOverlay>
+                  <ConnectedDevicesListDrawer
+                    handleToggle={[Function]}
+                    isOpen={false}
+                    stepperRef={
+                      Object {
+                        "current": Object {
+                          "handleReset": [Function],
+                        },
+                      }
+                    }
+                  >
+                    <Blueprint3.Drawer
+                      canOutsideClickClose={true}
+                      className="makeStyles-drawerRoot-146"
+                      isOpen={false}
+                      onClose={[Function]}
+                      position="bottom"
+                      size="90%"
+                      style={Object {}}
+                      transitionDuration={0}
+                      vertical={false}
+                    >
+                      <Blueprint3.Overlay
+                        autoFocus={true}
+                        backdropProps={Object {}}
+                        canEscapeKeyClose={true}
+                        canOutsideClickClose={true}
+                        className="bp3-overlay-container"
+                        enforceFocus={true}
+                        hasBackdrop={true}
+                        isOpen={false}
+                        lazy={true}
+                        onClose={[Function]}
+                        position="bottom"
+                        size="90%"
+                        style={Object {}}
+                        transitionDuration={0}
+                        transitionName="bp3-overlay"
+                        usePortal={true}
+                        vertical={false}
+                      />
+                    </Blueprint3.Drawer>
+                    <Blueprint3.Alert
+                      canEscapeKeyCancel={true}
+                      canOutsideClickCancel={true}
+                      cancelButtonText="No, Cancel"
+                      confirmButtonText="Yes, Disconnect All"
+                      icon="warning-sign"
+                      intent="danger"
+                      isOpen={false}
+                      onCancel={[Function]}
+                      onClose={[Function]}
+                      onConfirm={[Function]}
+                      transitionDuration={0}
+                    >
+                      <Blueprint3.Dialog
+                        canEscapeKeyClose={true}
+                        canOutsideClickClose={true}
+                        className="bp3-alert"
+                        isOpen={false}
+                        onCancel={[Function]}
+                        onClose={[Function]}
+                        onConfirm={[Function]}
+                        transitionDuration={0}
+                      >
+                        <Blueprint3.Overlay
+                          autoFocus={true}
+                          backdropProps={Object {}}
+                          canEscapeKeyClose={true}
+                          canOutsideClickClose={true}
+                          className="bp3-overlay-scroll-container"
+                          enforceFocus={true}
+                          hasBackdrop={true}
+                          isOpen={false}
+                          lazy={true}
+                          onCancel={[Function]}
+                          onClose={[Function]}
+                          onConfirm={[Function]}
+                          transitionDuration={0}
+                          transitionName="bp3-overlay"
+                          usePortal={true}
+                        />
+                      </Blueprint3.Dialog>
+                    </Blueprint3.Alert>
+                  </ConnectedDevicesListDrawer>
+                </TopPanel>
+                <ForwardRef>
+                  <Row>
+                    <div
+                      className="row"
+                    >
+                      <Col
+                        xs={12}
+                      >
+                        <div
+                          className="col-xs-12"
+                        >
+                          <Pulse
+                            duration={0}
+                            top={true}
+                          >
+                            <RevealBase
+                              fraction={0.2}
+                              inEffect={
+                                Object {
+                                  "count": 1,
+                                  "delay": 0,
+                                  "duration": 0,
+                                  "forever": undefined,
+                                  "make": [Function],
+                                  "style": Object {
+                                    "animationFillMode": "both",
+                                  },
+                                }
+                              }
+                              outEffect={false}
+                              refProp="ref"
+                              top={true}
+                            >
+                              <div
+                                style={
+                                  Object {
+                                    "opacity": undefined,
+                                  }
+                                }
+                              >
+                                <WithStyles(ForwardRef(Stepper))
+                                  activeStep={0}
+                                  alternativeLabel={true}
+                                  className="makeStyles-stepperComponent-153"
+                                  connector={<WithStyles(WithStyles(ForwardRef(StepConnector))) />}
+                                  style={
+                                    Object {
+                                      "background": "transparent",
+                                    }
+                                  }
+                                >
+                                  <ForwardRef(Stepper)
+                                    activeStep={0}
+                                    alternativeLabel={true}
+                                    className="makeStyles-stepperComponent-153"
+                                    classes={
+                                      Object {
+                                        "alternativeLabel": "MuiStepper-alternativeLabel",
+                                        "horizontal": "MuiStepper-horizontal",
+                                        "root": "MuiStepper-root",
+                                        "vertical": "MuiStepper-vertical",
+                                      }
+                                    }
+                                    connector={<WithStyles(WithStyles(ForwardRef(StepConnector))) />}
+                                    style={
+                                      Object {
+                                        "background": "transparent",
+                                      }
+                                    }
+                                  >
+                                    <WithStyles(ForwardRef(Paper))
+                                      className="MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-153 MuiStepper-alternativeLabel"
+                                      elevation={0}
+                                      square={true}
+                                      style={
+                                        Object {
+                                          "background": "transparent",
+                                        }
+                                      }
+                                    >
+                                      <ForwardRef(Paper)
+                                        className="MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-153 MuiStepper-alternativeLabel"
+                                        classes={
+                                          Object {
+                                            "elevation0": "MuiPaper-elevation0",
+                                            "elevation1": "MuiPaper-elevation1",
+                                            "elevation10": "MuiPaper-elevation10",
+                                            "elevation11": "MuiPaper-elevation11",
+                                            "elevation12": "MuiPaper-elevation12",
+                                            "elevation13": "MuiPaper-elevation13",
+                                            "elevation14": "MuiPaper-elevation14",
+                                            "elevation15": "MuiPaper-elevation15",
+                                            "elevation16": "MuiPaper-elevation16",
+                                            "elevation17": "MuiPaper-elevation17",
+                                            "elevation18": "MuiPaper-elevation18",
+                                            "elevation19": "MuiPaper-elevation19",
+                                            "elevation2": "MuiPaper-elevation2",
+                                            "elevation20": "MuiPaper-elevation20",
+                                            "elevation21": "MuiPaper-elevation21",
+                                            "elevation22": "MuiPaper-elevation22",
+                                            "elevation23": "MuiPaper-elevation23",
+                                            "elevation24": "MuiPaper-elevation24",
+                                            "elevation3": "MuiPaper-elevation3",
+                                            "elevation4": "MuiPaper-elevation4",
+                                            "elevation5": "MuiPaper-elevation5",
+                                            "elevation6": "MuiPaper-elevation6",
+                                            "elevation7": "MuiPaper-elevation7",
+                                            "elevation8": "MuiPaper-elevation8",
+                                            "elevation9": "MuiPaper-elevation9",
+                                            "outlined": "MuiPaper-outlined",
+                                            "root": "MuiPaper-root",
+                                            "rounded": "MuiPaper-rounded",
+                                          }
+                                        }
+                                        elevation={0}
+                                        square={true}
+                                        style={
+                                          Object {
+                                            "background": "transparent",
+                                          }
+                                        }
+                                      >
+                                        <div
+                                          className="MuiPaper-root MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-153 MuiStepper-alternativeLabel MuiPaper-elevation0"
+                                          style={
+                                            Object {
+                                              "background": "transparent",
+                                            }
+                                          }
+                                        >
+                                          <WithStyles(ForwardRef(Step))
+                                            active={true}
+                                            alternativeLabel={true}
+                                            completed={false}
+                                            connector={
+                                              <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                orientation="horizontal"
+                                              />
+                                            }
+                                            disabled={false}
+                                            index={0}
+                                            key=".$Connect"
+                                            last={false}
+                                            orientation="horizontal"
+                                          >
+                                            <ForwardRef(Step)
+                                              active={true}
+                                              alternativeLabel={true}
+                                              classes={
+                                                Object {
+                                                  "alternativeLabel": "MuiStep-alternativeLabel",
+                                                  "completed": "MuiStep-completed",
+                                                  "horizontal": "MuiStep-horizontal",
+                                                  "root": "MuiStep-root",
+                                                  "vertical": "MuiStep-vertical",
+                                                }
+                                              }
+                                              completed={false}
+                                              connector={
+                                                <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                  orientation="horizontal"
+                                                />
+                                              }
+                                              disabled={false}
+                                              index={0}
+                                              last={false}
+                                              orientation="horizontal"
+                                            >
+                                              <div
+                                                className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
+                                              >
+                                                <WithStyles(ForwardRef(StepLabel))
+                                                  StepIconComponent={[Function]}
+                                                  StepIconProps={
+                                                    Object {
+                                                      "isApplicationWindowSelected": false,
+                                                      "isEntireScreenSelected": false,
+                                                    }
+                                                  }
+                                                  active={true}
+                                                  alternativeLabel={true}
+                                                  className="makeStyles-stepLabelContent-152"
+                                                  completed={false}
+                                                  disabled={false}
+                                                  expanded={false}
+                                                  icon={1}
+                                                  id="step-label-deskreen"
+                                                  key=".0"
+                                                  last={false}
+                                                  orientation="horizontal"
+                                                >
+                                                  <ForwardRef(StepLabel)
+                                                    StepIconComponent={[Function]}
+                                                    StepIconProps={
+                                                      Object {
+                                                        "isApplicationWindowSelected": false,
+                                                        "isEntireScreenSelected": false,
+                                                      }
+                                                    }
+                                                    active={true}
+                                                    alternativeLabel={true}
+                                                    className="makeStyles-stepLabelContent-152"
+                                                    classes={
+                                                      Object {
+                                                        "active": "MuiStepLabel-active",
+                                                        "alternativeLabel": "MuiStepLabel-alternativeLabel",
+                                                        "completed": "MuiStepLabel-completed",
+                                                        "disabled": "Mui-disabled",
+                                                        "error": "Mui-error",
+                                                        "horizontal": "MuiStepLabel-horizontal",
+                                                        "iconContainer": "MuiStepLabel-iconContainer",
+                                                        "label": "MuiStepLabel-label",
+                                                        "labelContainer": "MuiStepLabel-labelContainer",
+                                                        "root": "MuiStepLabel-root",
+                                                        "vertical": "MuiStepLabel-vertical",
+                                                      }
+                                                    }
+                                                    completed={false}
+                                                    disabled={false}
+                                                    expanded={false}
+                                                    icon={1}
+                                                    id="step-label-deskreen"
+                                                    last={false}
+                                                    orientation="horizontal"
+                                                  >
+                                                    <span
+                                                      className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-152 MuiStepLabel-alternativeLabel"
+                                                      id="step-label-deskreen"
+                                                    >
+                                                      <span
+                                                        className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
+                                                      >
+                                                        <ColorlibStepIcon
+                                                          active={true}
+                                                          completed={false}
+                                                          error={false}
+                                                          icon={1}
+                                                          isApplicationWindowSelected={false}
+                                                          isEntireScreenSelected={false}
+                                                        >
+                                                          <div
+                                                            className="makeStyles-root-154 makeStyles-active-155 active-stepper-pulse-icon"
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              color="#fff"
+                                                              icon="feed"
+                                                              iconSize={25}
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-feed"
+                                                                icon="feed"
+                                                              >
+                                                                <svg
+                                                                  data-icon="feed"
+                                                                  fill="#fff"
+                                                                  height={25}
+                                                                  viewBox="0 0 20 20"
+                                                                  width={25}
+                                                                >
+                                                                  <desc>
+                                                                    feed
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M2.5 15a2.5 2.5 0 000 5 2.5 2.5 0 000-5zm.5-5c-.55 0-1 .45-1 1s.45 1 1 1c2.76 0 5 2.24 5 5 0 .55.45 1 1 1s1-.45 1-1c0-3.87-3.13-7-7-7zM3 0c-.55 0-1 .45-1 1s.45 1 1 1c8.28 0 15 6.72 15 15 0 .55.45 1 1 1s1-.45 1-1C20 7.61 12.39 0 3 0zm0 5c-.55 0-1 .45-1 1s.45 1 1 1c5.52 0 10 4.48 10 10 0 .55.45 1 1 1s1-.45 1-1C15 10.37 9.63 5 3 5z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </ColorlibStepIcon>
+                                                      </span>
+                                                      <span
+                                                        className="MuiStepLabel-labelContainer"
+                                                      >
+                                                        <WithStyles(ForwardRef(Typography))
+                                                          className="MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active"
+                                                          component="span"
+                                                          display="block"
+                                                          variant="body2"
+                                                        >
+                                                          <ForwardRef(Typography)
+                                                            className="MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active"
+                                                            classes={
+                                                              Object {
+                                                                "alignCenter": "MuiTypography-alignCenter",
+                                                                "alignJustify": "MuiTypography-alignJustify",
+                                                                "alignLeft": "MuiTypography-alignLeft",
+                                                                "alignRight": "MuiTypography-alignRight",
+                                                                "body1": "MuiTypography-body1",
+                                                                "body2": "MuiTypography-body2",
+                                                                "button": "MuiTypography-button",
+                                                                "caption": "MuiTypography-caption",
+                                                                "colorError": "MuiTypography-colorError",
+                                                                "colorInherit": "MuiTypography-colorInherit",
+                                                                "colorPrimary": "MuiTypography-colorPrimary",
+                                                                "colorSecondary": "MuiTypography-colorSecondary",
+                                                                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                                                                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                                                                "displayBlock": "MuiTypography-displayBlock",
+                                                                "displayInline": "MuiTypography-displayInline",
+                                                                "gutterBottom": "MuiTypography-gutterBottom",
+                                                                "h1": "MuiTypography-h1",
+                                                                "h2": "MuiTypography-h2",
+                                                                "h3": "MuiTypography-h3",
+                                                                "h4": "MuiTypography-h4",
+                                                                "h5": "MuiTypography-h5",
+                                                                "h6": "MuiTypography-h6",
+                                                                "noWrap": "MuiTypography-noWrap",
+                                                                "overline": "MuiTypography-overline",
+                                                                "paragraph": "MuiTypography-paragraph",
+                                                                "root": "MuiTypography-root",
+                                                                "srOnly": "MuiTypography-srOnly",
+                                                                "subtitle1": "MuiTypography-subtitle1",
+                                                                "subtitle2": "MuiTypography-subtitle2",
+                                                              }
+                                                            }
+                                                            component="span"
+                                                            display="block"
+                                                            variant="body2"
+                                                          >
+                                                            <span
+                                                              className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active MuiTypography-body2 MuiTypography-displayBlock"
+                                                            >
+                                                              <Blueprint3.Text
+                                                                className="bp3-text-muted"
+                                                              >
+                                                                <div
+                                                                  className="bp3-text-muted"
+                                                                >
+                                                                  Connect
+                                                                </div>
+                                                              </Blueprint3.Text>
+                                                            </span>
+                                                          </ForwardRef(Typography)>
+                                                        </WithStyles(ForwardRef(Typography))>
+                                                      </span>
+                                                    </span>
+                                                  </ForwardRef(StepLabel)>
+                                                </WithStyles(ForwardRef(StepLabel))>
+                                              </div>
+                                            </ForwardRef(Step)>
+                                          </WithStyles(ForwardRef(Step))>
+                                          <WithStyles(ForwardRef(Step))
+                                            active={false}
+                                            alternativeLabel={true}
+                                            completed={false}
+                                            connector={
+                                              <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                orientation="horizontal"
+                                              />
+                                            }
+                                            disabled={true}
+                                            index={1}
+                                            key=".$Select"
+                                            last={false}
+                                            orientation="horizontal"
+                                          >
+                                            <ForwardRef(Step)
+                                              active={false}
+                                              alternativeLabel={true}
+                                              classes={
+                                                Object {
+                                                  "alternativeLabel": "MuiStep-alternativeLabel",
+                                                  "completed": "MuiStep-completed",
+                                                  "horizontal": "MuiStep-horizontal",
+                                                  "root": "MuiStep-root",
+                                                  "vertical": "MuiStep-vertical",
+                                                }
+                                              }
+                                              completed={false}
+                                              connector={
+                                                <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                  orientation="horizontal"
+                                                />
+                                              }
+                                              disabled={true}
+                                              index={1}
+                                              last={false}
+                                              orientation="horizontal"
+                                            >
+                                              <div
+                                                className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
+                                              >
+                                                <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                  active={false}
+                                                  alternativeLabel={true}
+                                                  completed={false}
+                                                  disabled={true}
+                                                  index={1}
+                                                  orientation="horizontal"
+                                                >
+                                                  <WithStyles(ForwardRef(StepConnector))
+                                                    active={false}
+                                                    alternativeLabel={true}
+                                                    classes={
+                                                      Object {
+                                                        "active": "WithStyles(ForwardRef(StepConnector))-active-159",
+                                                        "alternativeLabel": "WithStyles(ForwardRef(StepConnector))-alternativeLabel-158",
+                                                        "completed": "WithStyles(ForwardRef(StepConnector))-completed-160",
+                                                        "line": "WithStyles(ForwardRef(StepConnector))-line-161",
+                                                      }
+                                                    }
+                                                    completed={false}
+                                                    disabled={true}
+                                                    index={1}
+                                                    orientation="horizontal"
+                                                  >
+                                                    <ForwardRef(StepConnector)
+                                                      active={false}
+                                                      alternativeLabel={true}
+                                                      classes={
+                                                        Object {
+                                                          "active": "MuiStepConnector-active WithStyles(ForwardRef(StepConnector))-active-159",
+                                                          "alternativeLabel": "MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-158",
+                                                          "completed": "MuiStepConnector-completed WithStyles(ForwardRef(StepConnector))-completed-160",
+                                                          "disabled": "Mui-disabled",
+                                                          "horizontal": "MuiStepConnector-horizontal",
+                                                          "line": "MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-161",
+                                                          "lineHorizontal": "MuiStepConnector-lineHorizontal",
+                                                          "lineVertical": "MuiStepConnector-lineVertical",
+                                                          "root": "MuiStepConnector-root",
+                                                          "vertical": "MuiStepConnector-vertical",
+                                                        }
+                                                      }
+                                                      completed={false}
+                                                      disabled={true}
+                                                      index={1}
+                                                      orientation="horizontal"
+                                                    >
+                                                      <div
+                                                        className="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-158 Mui-disabled"
+                                                      >
+                                                        <span
+                                                          className="MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-161 MuiStepConnector-lineHorizontal"
+                                                        />
+                                                      </div>
+                                                    </ForwardRef(StepConnector)>
+                                                  </WithStyles(ForwardRef(StepConnector))>
+                                                </WithStyles(WithStyles(ForwardRef(StepConnector)))>
+                                                <WithStyles(ForwardRef(StepLabel))
+                                                  StepIconComponent={[Function]}
+                                                  StepIconProps={
+                                                    Object {
+                                                      "isApplicationWindowSelected": false,
+                                                      "isEntireScreenSelected": false,
+                                                    }
+                                                  }
+                                                  active={false}
+                                                  alternativeLabel={true}
+                                                  className="makeStyles-stepLabelContent-152"
+                                                  completed={false}
+                                                  disabled={true}
+                                                  expanded={false}
+                                                  icon={2}
+                                                  id="step-label-deskreen"
+                                                  key=".0"
+                                                  last={false}
+                                                  orientation="horizontal"
+                                                >
+                                                  <ForwardRef(StepLabel)
+                                                    StepIconComponent={[Function]}
+                                                    StepIconProps={
+                                                      Object {
+                                                        "isApplicationWindowSelected": false,
+                                                        "isEntireScreenSelected": false,
+                                                      }
+                                                    }
+                                                    active={false}
+                                                    alternativeLabel={true}
+                                                    className="makeStyles-stepLabelContent-152"
+                                                    classes={
+                                                      Object {
+                                                        "active": "MuiStepLabel-active",
+                                                        "alternativeLabel": "MuiStepLabel-alternativeLabel",
+                                                        "completed": "MuiStepLabel-completed",
+                                                        "disabled": "Mui-disabled",
+                                                        "error": "Mui-error",
+                                                        "horizontal": "MuiStepLabel-horizontal",
+                                                        "iconContainer": "MuiStepLabel-iconContainer",
+                                                        "label": "MuiStepLabel-label",
+                                                        "labelContainer": "MuiStepLabel-labelContainer",
+                                                        "root": "MuiStepLabel-root",
+                                                        "vertical": "MuiStepLabel-vertical",
+                                                      }
+                                                    }
+                                                    completed={false}
+                                                    disabled={true}
+                                                    expanded={false}
+                                                    icon={2}
+                                                    id="step-label-deskreen"
+                                                    last={false}
+                                                    orientation="horizontal"
+                                                  >
+                                                    <span
+                                                      className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-152 Mui-disabled MuiStepLabel-alternativeLabel"
+                                                      id="step-label-deskreen"
+                                                    >
+                                                      <span
+                                                        className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
+                                                      >
+                                                        <ColorlibStepIcon
+                                                          active={false}
+                                                          completed={false}
+                                                          error={false}
+                                                          icon={2}
+                                                          isApplicationWindowSelected={false}
+                                                          isEntireScreenSelected={false}
+                                                        >
+                                                          <div
+                                                            className="makeStyles-root-154 "
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              color="#5C7080"
+                                                              icon="flow-branch"
+                                                              iconSize={25}
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-flow-branch"
+                                                                icon="flow-branch"
+                                                              >
+                                                                <svg
+                                                                  data-icon="flow-branch"
+                                                                  fill="#5C7080"
+                                                                  height={25}
+                                                                  viewBox="0 0 20 20"
+                                                                  width={25}
+                                                                >
+                                                                  <desc>
+                                                                    flow-branch
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M14.425 7.953a3.98 3.98 0 01.562 2.045 3.98 3.98 0 01-.583 2.08L18 15.671V12.98c0-.248.097-.496.29-.689.379-.379 1.047-.38 1.426 0a.94.94 0 01.283.696l-.001 5.049a.957.957 0 01-.276.69.955.955 0 01-.69.273h-5.059a.971.971 0 01-.689-.289 1.026 1.026 0 010-1.417.972.972 0 01.69-.29h2.702l-3.634-3.573a3.998 3.998 0 01-5.924-2.431H1a1 1 0 010-2h6.12a3.998 3.998 0 015.96-2.409L16.665 3l-2.694-.001a.972.972 0 01-.689-.29 1.035 1.035 0 010-1.425.94.94 0 01.696-.283l5.05.001c.248 0 .497.083.69.276a.954.954 0 01.272.69l.001 5.052a.971.971 0 01-.29.689 1.028 1.028 0 01-1.419 0 .972.972 0 01-.29-.69V4.323l-3.567 3.63z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </ColorlibStepIcon>
+                                                      </span>
+                                                      <span
+                                                        className="MuiStepLabel-labelContainer"
+                                                      >
+                                                        <WithStyles(ForwardRef(Typography))
+                                                          className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                          component="span"
+                                                          display="block"
+                                                          variant="body2"
+                                                        >
+                                                          <ForwardRef(Typography)
+                                                            className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                            classes={
+                                                              Object {
+                                                                "alignCenter": "MuiTypography-alignCenter",
+                                                                "alignJustify": "MuiTypography-alignJustify",
+                                                                "alignLeft": "MuiTypography-alignLeft",
+                                                                "alignRight": "MuiTypography-alignRight",
+                                                                "body1": "MuiTypography-body1",
+                                                                "body2": "MuiTypography-body2",
+                                                                "button": "MuiTypography-button",
+                                                                "caption": "MuiTypography-caption",
+                                                                "colorError": "MuiTypography-colorError",
+                                                                "colorInherit": "MuiTypography-colorInherit",
+                                                                "colorPrimary": "MuiTypography-colorPrimary",
+                                                                "colorSecondary": "MuiTypography-colorSecondary",
+                                                                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                                                                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                                                                "displayBlock": "MuiTypography-displayBlock",
+                                                                "displayInline": "MuiTypography-displayInline",
+                                                                "gutterBottom": "MuiTypography-gutterBottom",
+                                                                "h1": "MuiTypography-h1",
+                                                                "h2": "MuiTypography-h2",
+                                                                "h3": "MuiTypography-h3",
+                                                                "h4": "MuiTypography-h4",
+                                                                "h5": "MuiTypography-h5",
+                                                                "h6": "MuiTypography-h6",
+                                                                "noWrap": "MuiTypography-noWrap",
+                                                                "overline": "MuiTypography-overline",
+                                                                "paragraph": "MuiTypography-paragraph",
+                                                                "root": "MuiTypography-root",
+                                                                "srOnly": "MuiTypography-srOnly",
+                                                                "subtitle1": "MuiTypography-subtitle1",
+                                                                "subtitle2": "MuiTypography-subtitle2",
+                                                              }
+                                                            }
+                                                            component="span"
+                                                            display="block"
+                                                            variant="body2"
+                                                          >
+                                                            <span
+                                                              className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiTypography-body2 MuiTypography-displayBlock"
+                                                            >
+                                                              <Blueprint3.Text
+                                                                className="bp3-text-muted"
+                                                              >
+                                                                <div
+                                                                  className="bp3-text-muted"
+                                                                >
+                                                                  Select
+                                                                </div>
+                                                              </Blueprint3.Text>
+                                                            </span>
+                                                          </ForwardRef(Typography)>
+                                                        </WithStyles(ForwardRef(Typography))>
+                                                      </span>
+                                                    </span>
+                                                  </ForwardRef(StepLabel)>
+                                                </WithStyles(ForwardRef(StepLabel))>
+                                              </div>
+                                            </ForwardRef(Step)>
+                                          </WithStyles(ForwardRef(Step))>
+                                          <WithStyles(ForwardRef(Step))
+                                            active={false}
+                                            alternativeLabel={true}
+                                            completed={false}
+                                            connector={
+                                              <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                orientation="horizontal"
+                                              />
+                                            }
+                                            disabled={true}
+                                            index={2}
+                                            key=".$Confirm"
+                                            last={true}
+                                            orientation="horizontal"
+                                          >
+                                            <ForwardRef(Step)
+                                              active={false}
+                                              alternativeLabel={true}
+                                              classes={
+                                                Object {
+                                                  "alternativeLabel": "MuiStep-alternativeLabel",
+                                                  "completed": "MuiStep-completed",
+                                                  "horizontal": "MuiStep-horizontal",
+                                                  "root": "MuiStep-root",
+                                                  "vertical": "MuiStep-vertical",
+                                                }
+                                              }
+                                              completed={false}
+                                              connector={
+                                                <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                  orientation="horizontal"
+                                                />
+                                              }
+                                              disabled={true}
+                                              index={2}
+                                              last={true}
+                                              orientation="horizontal"
+                                            >
+                                              <div
+                                                className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
+                                              >
+                                                <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                                  active={false}
+                                                  alternativeLabel={true}
+                                                  completed={false}
+                                                  disabled={true}
+                                                  index={2}
+                                                  orientation="horizontal"
+                                                >
+                                                  <WithStyles(ForwardRef(StepConnector))
+                                                    active={false}
+                                                    alternativeLabel={true}
+                                                    classes={
+                                                      Object {
+                                                        "active": "WithStyles(ForwardRef(StepConnector))-active-159",
+                                                        "alternativeLabel": "WithStyles(ForwardRef(StepConnector))-alternativeLabel-158",
+                                                        "completed": "WithStyles(ForwardRef(StepConnector))-completed-160",
+                                                        "line": "WithStyles(ForwardRef(StepConnector))-line-161",
+                                                      }
+                                                    }
+                                                    completed={false}
+                                                    disabled={true}
+                                                    index={2}
+                                                    orientation="horizontal"
+                                                  >
+                                                    <ForwardRef(StepConnector)
+                                                      active={false}
+                                                      alternativeLabel={true}
+                                                      classes={
+                                                        Object {
+                                                          "active": "MuiStepConnector-active WithStyles(ForwardRef(StepConnector))-active-159",
+                                                          "alternativeLabel": "MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-158",
+                                                          "completed": "MuiStepConnector-completed WithStyles(ForwardRef(StepConnector))-completed-160",
+                                                          "disabled": "Mui-disabled",
+                                                          "horizontal": "MuiStepConnector-horizontal",
+                                                          "line": "MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-161",
+                                                          "lineHorizontal": "MuiStepConnector-lineHorizontal",
+                                                          "lineVertical": "MuiStepConnector-lineVertical",
+                                                          "root": "MuiStepConnector-root",
+                                                          "vertical": "MuiStepConnector-vertical",
+                                                        }
+                                                      }
+                                                      completed={false}
+                                                      disabled={true}
+                                                      index={2}
+                                                      orientation="horizontal"
+                                                    >
+                                                      <div
+                                                        className="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-158 Mui-disabled"
+                                                      >
+                                                        <span
+                                                          className="MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-161 MuiStepConnector-lineHorizontal"
+                                                        />
+                                                      </div>
+                                                    </ForwardRef(StepConnector)>
+                                                  </WithStyles(ForwardRef(StepConnector))>
+                                                </WithStyles(WithStyles(ForwardRef(StepConnector)))>
+                                                <WithStyles(ForwardRef(StepLabel))
+                                                  StepIconComponent={[Function]}
+                                                  StepIconProps={
+                                                    Object {
+                                                      "isApplicationWindowSelected": false,
+                                                      "isEntireScreenSelected": false,
+                                                    }
+                                                  }
+                                                  active={false}
+                                                  alternativeLabel={true}
+                                                  className="makeStyles-stepLabelContent-152"
+                                                  completed={false}
+                                                  disabled={true}
+                                                  expanded={false}
+                                                  icon={3}
+                                                  id="step-label-deskreen"
+                                                  key=".0"
+                                                  last={true}
+                                                  orientation="horizontal"
+                                                >
+                                                  <ForwardRef(StepLabel)
+                                                    StepIconComponent={[Function]}
+                                                    StepIconProps={
+                                                      Object {
+                                                        "isApplicationWindowSelected": false,
+                                                        "isEntireScreenSelected": false,
+                                                      }
+                                                    }
+                                                    active={false}
+                                                    alternativeLabel={true}
+                                                    className="makeStyles-stepLabelContent-152"
+                                                    classes={
+                                                      Object {
+                                                        "active": "MuiStepLabel-active",
+                                                        "alternativeLabel": "MuiStepLabel-alternativeLabel",
+                                                        "completed": "MuiStepLabel-completed",
+                                                        "disabled": "Mui-disabled",
+                                                        "error": "Mui-error",
+                                                        "horizontal": "MuiStepLabel-horizontal",
+                                                        "iconContainer": "MuiStepLabel-iconContainer",
+                                                        "label": "MuiStepLabel-label",
+                                                        "labelContainer": "MuiStepLabel-labelContainer",
+                                                        "root": "MuiStepLabel-root",
+                                                        "vertical": "MuiStepLabel-vertical",
+                                                      }
+                                                    }
+                                                    completed={false}
+                                                    disabled={true}
+                                                    expanded={false}
+                                                    icon={3}
+                                                    id="step-label-deskreen"
+                                                    last={true}
+                                                    orientation="horizontal"
+                                                  >
+                                                    <span
+                                                      className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-152 Mui-disabled MuiStepLabel-alternativeLabel"
+                                                      id="step-label-deskreen"
+                                                    >
+                                                      <span
+                                                        className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
+                                                      >
+                                                        <ColorlibStepIcon
+                                                          active={false}
+                                                          completed={false}
+                                                          error={false}
+                                                          icon={3}
+                                                          isApplicationWindowSelected={false}
+                                                          isEntireScreenSelected={false}
+                                                        >
+                                                          <div
+                                                            className="makeStyles-root-154 "
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              color="#5C7080"
+                                                              icon="confirm"
+                                                              iconSize={25}
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-confirm"
+                                                                icon="confirm"
+                                                              >
+                                                                <svg
+                                                                  data-icon="confirm"
+                                                                  fill="#5C7080"
+                                                                  height={25}
+                                                                  viewBox="0 0 20 20"
+                                                                  width={25}
+                                                                >
+                                                                  <desc>
+                                                                    confirm
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M9.71 5.29a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7a1.003 1.003 0 00-1.42-1.42L12 7.59l-2.29-2.3zm7.93 2.32c.23.75.36 1.56.36 2.39 0 4.42-3.58 8-8 8s-8-3.58-8-8a7.998 7.998 0 0111.8-7.04l1.46-1.46C13.73.56 11.93 0 10 0 4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10c0-1.4-.29-2.73-.81-3.95l-1.55 1.56z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                          </div>
+                                                        </ColorlibStepIcon>
+                                                      </span>
+                                                      <span
+                                                        className="MuiStepLabel-labelContainer"
+                                                      >
+                                                        <WithStyles(ForwardRef(Typography))
+                                                          className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                          component="span"
+                                                          display="block"
+                                                          variant="body2"
+                                                        >
+                                                          <ForwardRef(Typography)
+                                                            className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                            classes={
+                                                              Object {
+                                                                "alignCenter": "MuiTypography-alignCenter",
+                                                                "alignJustify": "MuiTypography-alignJustify",
+                                                                "alignLeft": "MuiTypography-alignLeft",
+                                                                "alignRight": "MuiTypography-alignRight",
+                                                                "body1": "MuiTypography-body1",
+                                                                "body2": "MuiTypography-body2",
+                                                                "button": "MuiTypography-button",
+                                                                "caption": "MuiTypography-caption",
+                                                                "colorError": "MuiTypography-colorError",
+                                                                "colorInherit": "MuiTypography-colorInherit",
+                                                                "colorPrimary": "MuiTypography-colorPrimary",
+                                                                "colorSecondary": "MuiTypography-colorSecondary",
+                                                                "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                                                                "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                                                                "displayBlock": "MuiTypography-displayBlock",
+                                                                "displayInline": "MuiTypography-displayInline",
+                                                                "gutterBottom": "MuiTypography-gutterBottom",
+                                                                "h1": "MuiTypography-h1",
+                                                                "h2": "MuiTypography-h2",
+                                                                "h3": "MuiTypography-h3",
+                                                                "h4": "MuiTypography-h4",
+                                                                "h5": "MuiTypography-h5",
+                                                                "h6": "MuiTypography-h6",
+                                                                "noWrap": "MuiTypography-noWrap",
+                                                                "overline": "MuiTypography-overline",
+                                                                "paragraph": "MuiTypography-paragraph",
+                                                                "root": "MuiTypography-root",
+                                                                "srOnly": "MuiTypography-srOnly",
+                                                                "subtitle1": "MuiTypography-subtitle1",
+                                                                "subtitle2": "MuiTypography-subtitle2",
+                                                              }
+                                                            }
+                                                            component="span"
+                                                            display="block"
+                                                            variant="body2"
+                                                          >
+                                                            <span
+                                                              className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiTypography-body2 MuiTypography-displayBlock"
+                                                            >
+                                                              <Blueprint3.Text
+                                                                className="bp3-text-muted"
+                                                              >
+                                                                <div
+                                                                  className="bp3-text-muted"
+                                                                >
+                                                                  Confirm
+                                                                </div>
+                                                              </Blueprint3.Text>
+                                                            </span>
+                                                          </ForwardRef(Typography)>
+                                                        </WithStyles(ForwardRef(Typography))>
+                                                      </span>
+                                                    </span>
+                                                  </ForwardRef(StepLabel)>
+                                                </WithStyles(ForwardRef(StepLabel))>
+                                              </div>
+                                            </ForwardRef(Step)>
+                                          </WithStyles(ForwardRef(Step))>
+                                        </div>
+                                      </ForwardRef(Paper)>
+                                    </WithStyles(ForwardRef(Paper))>
+                                  </ForwardRef(Stepper)>
+                                </WithStyles(ForwardRef(Stepper))>
+                              </div>
+                            </RevealBase>
+                          </Pulse>
+                        </div>
+                      </Col>
+                      <Col
+                        className="makeStyles-stepContent-151"
+                        xs={12}
+                      >
+                        <div
+                          className="col-xs-12 makeStyles-stepContent-151"
+                        >
+                          <Fade
+                            duration={0}
+                            when={false}
+                          >
+                            <RevealBase
+                              fraction={0.2}
+                              inEffect={
+                                Object {
+                                  "count": 1,
+                                  "delay": 0,
+                                  "duration": 0,
+                                  "forever": undefined,
+                                  "make": [Function],
+                                  "reverse": undefined,
+                                  "style": Object {
+                                    "animationFillMode": "both",
+                                  },
+                                }
+                              }
+                              outEffect={
+                                Object {
+                                  "count": 1,
+                                  "delay": 0,
+                                  "duration": 0,
+                                  "forever": undefined,
+                                  "make": [Function],
+                                  "reverse": undefined,
+                                  "style": Object {
+                                    "animationFillMode": "both",
+                                  },
+                                }
+                              }
+                              refProp="ref"
+                              when={false}
+                            >
+                              <div
+                                className="react-reveal"
+                                style={
+                                  Object {
+                                    "opacity": 0,
+                                  }
+                                }
+                              >
+                                <IntermediateStep
+                                  activeStep={0}
+                                  handleBack={[Function]}
+                                  handleNext={[Function]}
+                                  handleNextApplicationWindow={[Function]}
+                                  handleNextEntireScreen={[Function]}
+                                  resetPendingConnectionDevice={[Function]}
+                                  resetUserAllowedConnection={[Function]}
+                                  steps={
+                                    Array [
+                                      "Connect",
+                                      "Select",
+                                      "Confirm",
+                                    ]
+                                  }
+                                >
+                                  <Col
+                                    style={
+                                      Object {
+                                        "alignItems": "center",
+                                        "display": "flex",
+                                        "flexDirection": "column",
+                                        "height": "260px",
+                                        "justifyContent": "center",
+                                      }
+                                    }
+                                    xs={12}
+                                  >
+                                    <div
+                                      className="col-xs-12"
+                                      style={
+                                        Object {
+                                          "alignItems": "center",
+                                          "display": "flex",
+                                          "flexDirection": "column",
+                                          "height": "260px",
+                                          "justifyContent": "center",
+                                        }
+                                      }
+                                    >
+                                      <ScanQRStep>
+                                        <div
+                                          style={
+                                            Object {
+                                              "textAlign": "center",
+                                            }
+                                          }
+                                        >
+                                          <Blueprint3.Text
+                                            className="bp3-text"
+                                          >
+                                            <div
+                                              className="bp3-text"
+                                            >
+                                              Scan the QR code
+                                            </div>
+                                          </Blueprint3.Text>
+                                          <Blueprint3.Text
+                                            className="bp3-text-muted"
+                                          >
+                                            <div
+                                              className="bp3-text-muted"
+                                            >
+                                              ( make sure your computer and device are connected on same WiFi )
+                                            </div>
+                                          </Blueprint3.Text>
+                                        </div>
+                                        <div>
+                                          <Blueprint3.Tooltip
+                                            content="Click to make bigger"
+                                            hoverCloseDelay={0}
+                                            hoverOpenDelay={100}
+                                            position="left"
+                                            transitionDuration={100}
+                                          >
+                                            <Blueprint3.Popover
+                                              autoFocus={false}
+                                              boundary="scrollParent"
+                                              canEscapeKeyClose={false}
+                                              captureDismiss={false}
+                                              content="Click to make bigger"
+                                              defaultIsOpen={false}
+                                              disabled={false}
+                                              enforceFocus={false}
+                                              fill={false}
+                                              hasBackdrop={false}
+                                              hoverCloseDelay={0}
+                                              hoverOpenDelay={100}
+                                              inheritDarkTheme={true}
+                                              interactionKind="hover-target"
+                                              lazy={true}
+                                              minimal={false}
+                                              modifiers={Object {}}
+                                              openOnTargetFocus={true}
+                                              popoverClassName="bp3-tooltip"
+                                              position="left"
+                                              targetTagName="span"
+                                              transitionDuration={100}
+                                              usePortal={true}
+                                              wrapperTagName="span"
+                                            >
+                                              <Manager>
+                                                <span
+                                                  className="bp3-popover-wrapper"
+                                                >
+                                                  <Reference
+                                                    innerRef={[Function]}
+                                                  >
+                                                    <InnerReference
+                                                      innerRef={[Function]}
+                                                      setReferenceNode={[Function]}
+                                                    >
+                                                      <Blueprint3.ResizeSensor
+                                                        onResize={[Function]}
+                                                      >
+                                                        <span
+                                                          className="bp3-popover-target"
+                                                          onBlur={[Function]}
+                                                          onFocus={[Function]}
+                                                          onMouseEnter={[Function]}
+                                                          onMouseLeave={[Function]}
+                                                        >
+                                                          <div
+                                                            className="makeStyles-smallQRCode-162"
+                                                            id="magnify-qr-code-button"
+                                                            key=".0"
+                                                            onClick={[Function]}
+                                                            tabIndex={0}
+                                                          >
+                                                            <QRCode
+                                                              bgColor="rgba(0,0,0,0.0)"
+                                                              fgColor="#000000"
+                                                              imageSettings={
+                                                                Object {
+                                                                  "height": 40,
+                                                                  "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                                                                  "width": 40,
+                                                                }
+                                                              }
+                                                              includeMargin={false}
+                                                              level="H"
+                                                              renderAs="svg"
+                                                              size={128}
+                                                              value="http://192.168.31.214:65000/99999"
+                                                            >
+                                                              <QRCodeSVG
+                                                                bgColor="rgba(0,0,0,0.0)"
+                                                                fgColor="#000000"
+                                                                imageSettings={
+                                                                  Object {
+                                                                    "height": 40,
+                                                                    "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                                                                    "width": 40,
+                                                                  }
+                                                                }
+                                                                includeMargin={false}
+                                                                level="H"
+                                                                size={128}
+                                                                value="http://192.168.31.214:65000/99999"
+                                                              >
+                                                                <svg
+                                                                  height={128}
+                                                                  shapeRendering="crispEdges"
+                                                                  viewBox="0 0 33 33"
+                                                                  width={128}
+                                                                >
+                                                                  <path
+                                                                    d="M0,0 h33v33H0z"
+                                                                    fill="rgba(0,0,0,0.0)"
+                                                                  />
+                                                                  <path
+                                                                    d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h6v1H12zM19 0h2v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM15 1h1v1H15zM17 1h2v1H17zM22 1h1v1H22zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h1v1H11zM13 2h1v1H13zM15 2h1v1H15zM17 2h2v1H17zM20 2h2v1H20zM23 2h1v1H23zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h4v1H10zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h1v1H11zM13 4h1v1H13zM15 4h1v1H15zM17 4h2v1H17zM21 4h4v1H21zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM10 5h1v1H10zM14 5h1v1H14zM16 5h1v1H16zM20 5h3v1H20zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h6v1H8zM15 7h2v1H15zM18 7h1v1H18zM20 7h3v1H20zM24 7h1v1H24zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM11 8h4v1H11zM16 8h1v1H16zM19 8h1v1H19zM23 8h1v1H23zM25 8h3v1H25zM30,8 h3v1H30zM0 9h2v1H0zM3 9h1v1H3zM5 9h1v1H5zM7 9h1v1H7zM9 9h1v1H9zM12 9h2v1H12zM16 9h2v1H16zM20 9h1v1H20zM22 9h5v1H22zM29 9h1v1H29zM31,9 h2v1H31zM0 10h2v1H0zM5 10h6v1H5zM13 10h2v1H13zM17 10h5v1H17zM24 10h1v1H24zM27 10h1v1H27zM0 11h2v1H0zM4 11h2v1H4zM8 11h3v1H8zM15 11h1v1H15zM21 11h3v1H21zM25 11h1v1H25zM30 11h2v1H30zM0 12h7v1H0zM11 12h2v1H11zM15 12h1v1H15zM19 12h1v1H19zM21 12h1v1H21zM24 12h1v1H24zM28 12h2v1H28zM32,12 h1v1H32zM8 13h1v1H8zM10 13h1v1H10zM14 13h1v1H14zM16 13h2v1H16zM19 13h2v1H19zM23 13h5v1H23zM30 13h1v1H30zM32,13 h1v1H32zM0 14h2v1H0zM3 14h1v1H3zM6 14h1v1H6zM11 14h5v1H11zM17 14h2v1H17zM20 14h1v1H20zM22 14h1v1H22zM24 14h2v1H24zM30 14h2v1H30zM0 15h2v1H0zM7 15h1v1H7zM11 15h1v1H11zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM20 15h3v1H20zM24 15h1v1H24zM27 15h2v1H27zM30 15h2v1H30zM0 16h1v1H0zM2 16h1v1H2zM4 16h4v1H4zM9 16h1v1H9zM11 16h1v1H11zM18 16h3v1H18zM23 16h2v1H23zM28 16h1v1H28zM0 17h2v1H0zM3 17h1v1H3zM5 17h1v1H5zM13 17h3v1H13zM17 17h2v1H17zM21 17h7v1H21zM31,17 h2v1H31zM0 18h2v1H0zM4 18h4v1H4zM9 18h3v1H9zM14 18h1v1H14zM18 18h1v1H18zM20 18h1v1H20zM24 18h1v1H24zM26 18h1v1H26zM30 18h1v1H30zM2 19h1v1H2zM4 19h1v1H4zM9 19h1v1H9zM11 19h2v1H11zM14 19h1v1H14zM20 19h6v1H20zM27 19h1v1H27zM29 19h2v1H29zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM10 20h1v1H10zM13 20h2v1H13zM16 20h1v1H16zM18 20h1v1H18zM20 20h1v1H20zM23 20h1v1H23zM28 20h2v1H28zM0 21h1v1H0zM3 21h3v1H3zM10 21h1v1H10zM12 21h3v1H12zM16 21h1v1H16zM19 21h1v1H19zM21 21h7v1H21zM30 21h1v1H30zM32,21 h1v1H32zM0 22h1v1H0zM2 22h3v1H2zM6 22h3v1H6zM13 22h1v1H13zM15 22h7v1H15zM27 22h2v1H27zM0 23h1v1H0zM2 23h2v1H2zM7 23h2v1H7zM10 23h2v1H10zM14 23h2v1H14zM17 23h3v1H17zM21 23h1v1H21zM24 23h1v1H24zM28 23h1v1H28zM30 23h2v1H30zM0 24h1v1H0zM6 24h1v1H6zM8 24h1v1H8zM10 24h1v1H10zM12 24h1v1H12zM17 24h1v1H17zM19 24h1v1H19zM23 24h6v1H23zM8 25h1v1H8zM10 25h1v1H10zM17 25h2v1H17zM22 25h3v1H22zM28 25h1v1H28zM30,25 h3v1H30zM0 26h7v1H0zM10 26h1v1H10zM14 26h3v1H14zM18 26h1v1H18zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h2v1H11zM15 27h4v1H15zM20 27h1v1H20zM24 27h1v1H24zM28 27h1v1H28zM30 27h2v1H30zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM8 28h2v1H8zM11 28h2v1H11zM14 28h2v1H14zM17 28h1v1H17zM21 28h2v1H21zM24 28h6v1H24zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h2v1H8zM11 29h1v1H11zM14 29h3v1H14zM18 29h3v1H18zM28 29h2v1H28zM32,29 h1v1H32zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h1v1H8zM10 30h5v1H10zM16 30h5v1H16zM22 30h1v1H22zM25 30h2v1H25zM29 30h1v1H29zM0 31h1v1H0zM6 31h1v1H6zM12 31h3v1H12zM16 31h1v1H16zM20 31h1v1H20zM23 31h1v1H23zM25 31h1v1H25zM27 31h1v1H27zM30 31h1v1H30zM0 32h7v1H0zM9 32h1v1H9zM11 32h1v1H11zM13 32h1v1H13zM19 32h1v1H19zM21 32h1v1H21zM24 32h1v1H24zM26 32h1v1H26zM29 32h1v1H29zM31 32h1v1H31z"
+                                                                    fill="#000000"
+                                                                  />
+                                                                  <image
+                                                                    height={10.3125}
+                                                                    preserveAspectRatio="none"
+                                                                    width={10.3125}
+                                                                    x={11.34375}
+                                                                    xlinkHref="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png"
+                                                                    y={11.34375}
+                                                                  />
+                                                                </svg>
+                                                              </QRCodeSVG>
+                                                            </QRCode>
+                                                          </div>
+                                                        </span>
+                                                      </Blueprint3.ResizeSensor>
+                                                    </InnerReference>
+                                                  </Reference>
+                                                  <Blueprint3.Overlay
+                                                    autoFocus={false}
+                                                    backdropClassName="bp3-popover-backdrop"
+                                                    backdropProps={Object {}}
+                                                    canEscapeKeyClose={false}
+                                                    canOutsideClickClose={false}
+                                                    enforceFocus={false}
+                                                    hasBackdrop={false}
+                                                    isOpen={false}
+                                                    lazy={true}
+                                                    onClose={[Function]}
+                                                    transitionDuration={100}
+                                                    transitionName="bp3-popover"
+                                                    usePortal={true}
+                                                  />
+                                                </span>
+                                              </Manager>
+                                            </Blueprint3.Popover>
+                                          </Blueprint3.Tooltip>
+                                        </div>
+                                        <div
+                                          style={
+                                            Object {
+                                              "marginBottom": "10px",
+                                            }
+                                          }
+                                        >
+                                          <Blueprint3.Text
+                                            className="bp3-text-muted"
+                                          >
+                                            <div
+                                              className="bp3-text-muted"
+                                            >
+                                              or type the following address manualy in browser address bar on any device:
+                                            </div>
+                                          </Blueprint3.Text>
+                                        </div>
+                                        <Blueprint3.Tooltip
+                                          content="Click to copy"
+                                          hoverCloseDelay={0}
+                                          hoverOpenDelay={100}
+                                          position="left"
+                                          transitionDuration={100}
+                                        >
+                                          <Blueprint3.Popover
+                                            autoFocus={false}
+                                            boundary="scrollParent"
+                                            canEscapeKeyClose={false}
+                                            captureDismiss={false}
+                                            content="Click to copy"
+                                            defaultIsOpen={false}
+                                            disabled={false}
+                                            enforceFocus={false}
+                                            fill={false}
+                                            hasBackdrop={false}
+                                            hoverCloseDelay={0}
+                                            hoverOpenDelay={100}
+                                            inheritDarkTheme={true}
+                                            interactionKind="hover-target"
+                                            lazy={true}
+                                            minimal={false}
+                                            modifiers={Object {}}
+                                            openOnTargetFocus={true}
+                                            popoverClassName="bp3-tooltip"
+                                            position="left"
+                                            targetTagName="span"
+                                            transitionDuration={100}
+                                            usePortal={true}
+                                            wrapperTagName="span"
+                                          >
+                                            <Manager>
+                                              <span
+                                                className="bp3-popover-wrapper"
+                                              >
+                                                <Reference
+                                                  innerRef={[Function]}
+                                                >
+                                                  <InnerReference
+                                                    innerRef={[Function]}
+                                                    setReferenceNode={[Function]}
+                                                  >
+                                                    <Blueprint3.ResizeSensor
+                                                      onResize={[Function]}
+                                                    >
+                                                      <span
+                                                        className="bp3-popover-target"
+                                                        onBlur={[Function]}
+                                                        onFocus={[Function]}
+                                                        onMouseEnter={[Function]}
+                                                        onMouseLeave={[Function]}
+                                                      >
+                                                        <Blueprint3.Button
+                                                          className=""
+                                                          icon="duplicate"
+                                                          intent="primary"
+                                                          key=".0"
+                                                          style={
+                                                            Object {
+                                                              "borderRadius": "100px",
+                                                            }
+                                                          }
+                                                          tabIndex={0}
+                                                        >
+                                                          <button
+                                                            className="bp3-button bp3-intent-primary"
+                                                            onKeyDown={[Function]}
+                                                            onKeyUp={[Function]}
+                                                            style={
+                                                              Object {
+                                                                "borderRadius": "100px",
+                                                              }
+                                                            }
+                                                            tabIndex={0}
+                                                            type="button"
+                                                          >
+                                                            <Blueprint3.Icon
+                                                              icon="duplicate"
+                                                              key="leftIcon"
+                                                            >
+                                                              <span
+                                                                className="bp3-icon bp3-icon-duplicate"
+                                                                icon="duplicate"
+                                                              >
+                                                                <svg
+                                                                  data-icon="duplicate"
+                                                                  height={16}
+                                                                  viewBox="0 0 16 16"
+                                                                  width={16}
+                                                                >
+                                                                  <desc>
+                                                                    duplicate
+                                                                  </desc>
+                                                                  <path
+                                                                    d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
+                                                                    fillRule="evenodd"
+                                                                    key="0"
+                                                                  />
+                                                                </svg>
+                                                              </span>
+                                                            </Blueprint3.Icon>
+                                                            <span
+                                                              className="bp3-button-text"
+                                                              key="text"
+                                                            >
+                                                              http://255.255.255.255:65000/99999
+                                                            </span>
+                                                            <Blueprint3.Icon
+                                                              key="rightIcon"
+                                                            />
+                                                          </button>
+                                                        </Blueprint3.Button>
+                                                      </span>
+                                                    </Blueprint3.ResizeSensor>
+                                                  </InnerReference>
+                                                </Reference>
+                                                <Blueprint3.Overlay
+                                                  autoFocus={false}
+                                                  backdropClassName="bp3-popover-backdrop"
+                                                  backdropProps={Object {}}
+                                                  canEscapeKeyClose={false}
+                                                  canOutsideClickClose={false}
+                                                  enforceFocus={false}
+                                                  hasBackdrop={false}
+                                                  isOpen={false}
+                                                  lazy={true}
+                                                  onClose={[Function]}
+                                                  transitionDuration={100}
+                                                  transitionName="bp3-popover"
+                                                  usePortal={true}
+                                                />
+                                              </span>
+                                            </Manager>
+                                          </Blueprint3.Popover>
+                                        </Blueprint3.Tooltip>
+                                        <Blueprint3.Dialog
+                                          canEscapeKeyClose={true}
+                                          canOutsideClickClose={true}
+                                          className="makeStyles-bigQRCodeDialogRoot-164"
+                                          id="bp3-qr-code-dialog-root"
+                                          isOpen={false}
+                                          onClose={[Function]}
+                                          style={
+                                            Object {
+                                              "position": "relative",
+                                              "top": "-30px",
+                                            }
+                                          }
+                                          transitionDuration={0}
+                                        >
+                                          <Blueprint3.Overlay
+                                            autoFocus={true}
+                                            backdropProps={Object {}}
+                                            canEscapeKeyClose={true}
+                                            canOutsideClickClose={true}
+                                            className="bp3-overlay-scroll-container"
+                                            enforceFocus={true}
+                                            hasBackdrop={true}
+                                            id="bp3-qr-code-dialog-root"
+                                            isOpen={false}
+                                            lazy={true}
+                                            onClose={[Function]}
+                                            style={
+                                              Object {
+                                                "position": "relative",
+                                                "top": "-30px",
+                                              }
+                                            }
+                                            transitionDuration={0}
+                                            transitionName="bp3-overlay"
+                                            usePortal={true}
+                                          />
+                                        </Blueprint3.Dialog>
+                                      </ScanQRStep>
+                                      <Blueprint3.Button
+                                        icon="chevron-left"
+                                        intent="danger"
+                                        onClick={[Function]}
+                                        style={
+                                          Object {
+                                            "borderRadius": "100px",
+                                            "display": "none",
+                                            "marginTop": "10px",
+                                          }
+                                        }
+                                        text="No, I need to share other thing"
+                                      >
+                                        <button
+                                          className="bp3-button bp3-intent-danger"
+                                          onClick={[Function]}
+                                          onKeyDown={[Function]}
+                                          onKeyUp={[Function]}
+                                          style={
+                                            Object {
+                                              "borderRadius": "100px",
+                                              "display": "none",
+                                              "marginTop": "10px",
+                                            }
+                                          }
+                                          type="button"
+                                        >
+                                          <Blueprint3.Icon
+                                            icon="chevron-left"
+                                            key="leftIcon"
+                                          >
+                                            <span
+                                              className="bp3-icon bp3-icon-chevron-left"
+                                              icon="chevron-left"
+                                            >
+                                              <svg
+                                                data-icon="chevron-left"
+                                                height={16}
+                                                viewBox="0 0 16 16"
+                                                width={16}
+                                              >
+                                                <desc>
+                                                  chevron-left
+                                                </desc>
+                                                <path
+                                                  d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
+                                                  fillRule="evenodd"
+                                                  key="0"
+                                                />
+                                              </svg>
+                                            </span>
+                                          </Blueprint3.Icon>
+                                          <span
+                                            className="bp3-button-text"
+                                            key="text"
+                                          >
+                                            No, I need to share other thing
+                                          </span>
+                                          <Blueprint3.Icon
+                                            key="rightIcon"
+                                          />
+                                        </button>
+                                      </Blueprint3.Button>
+                                    </div>
+                                  </Col>
+                                </IntermediateStep>
+                              </div>
+                            </RevealBase>
+                          </Fade>
+                        </div>
+                      </Col>
+                    </div>
+                  </Row>
+                  <AllowConnectionForDeviceAlert
+                    device={null}
+                    isOpen={false}
+                    onCancel={[Function]}
+                    onConfirm={[Function]}
+                  >
+                    <Blueprint3.Alert
+                      canEscapeKeyCancel={false}
+                      canOutsideClickCancel={false}
+                      cancelButtonText="Deny"
+                      className="class-allow-device-to-connect-alert"
+                      confirmButtonText="Allow"
+                      icon="feed"
+                      intent="danger"
+                      isOpen={false}
+                      onCancel={[Function]}
+                      onConfirm={[Function]}
+                      transitionDuration={0}
+                    >
+                      <Blueprint3.Dialog
+                        canEscapeKeyClose={false}
+                        canOutsideClickClose={false}
+                        className="bp3-alert class-allow-device-to-connect-alert"
+                        isOpen={false}
+                        onCancel={[Function]}
+                        onClose={[Function]}
+                        onConfirm={[Function]}
+                        transitionDuration={0}
+                      >
+                        <Blueprint3.Overlay
+                          autoFocus={true}
+                          backdropProps={Object {}}
+                          canEscapeKeyClose={false}
+                          canOutsideClickClose={false}
+                          className="bp3-overlay-scroll-container"
+                          enforceFocus={true}
+                          hasBackdrop={true}
+                          isOpen={false}
+                          lazy={true}
+                          onCancel={[Function]}
+                          onClose={[Function]}
+                          onConfirm={[Function]}
+                          transitionDuration={0}
+                          transitionName="bp3-overlay"
+                          usePortal={true}
+                        />
+                      </Blueprint3.Dialog>
+                    </Blueprint3.Alert>
+                  </AllowConnectionForDeviceAlert>
+                </ForwardRef>
+              </div>
+              <Portal
+                containerInfo={
+                  <body>
+                    <div
+                      class="react-toast-notifications__container css-1frfeuj-ToastContainer"
+                    />
+                  </body>
+                }
+              >
+                <ToastContainer
+                  hasToasts={false}
+                  placement="top-center"
+                >
+                  <EmotionCssPropInternal
+                    __EMOTION_LABEL_PLEASE_DO_NOT_USE__="ToastContainer"
+                    __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
+                    className="react-toast-notifications__container"
+                    css={
+                      Object {
+                        "boxSizing": "border-box",
+                        "left": "50%",
+                        "maxHeight": "100%",
+                        "overflowX": "hidden",
+                        "overflowY": "auto",
+                        "padding": 8,
+                        "pointerEvents": "none",
+                        "position": "fixed",
+                        "top": 0,
+                        "transform": "translateX(-50%)",
+                        "zIndex": 1000,
+                      }
+                    }
+                  >
+                    <div
+                      className="react-toast-notifications__container css-1frfeuj-ToastContainer"
+                    >
+                      <TransitionGroup
+                        childFactory={[Function]}
+                        component={null}
+                      />
+                    </div>
+                  </EmotionCssPropInternal>
+                </ToastContainer>
+              </Portal>
+            </ToastProvider>
+          </HomePage>
+        </Router>
+      </BrowserRouter>
+    </ConnectedDevicesProvider>
+  </SettingsProvider>
+</Suspense>
+`;
diff --git a/app/containers/__snapshots__/Stepper.spec.tsx.snap b/app/containers/__snapshots__/Stepper.spec.tsx.snap
new file mode 100644
index 0000000..0f5b4ea
--- /dev/null
+++ b/app/containers/__snapshots__/Stepper.spec.tsx.snap
@@ -0,0 +1,1556 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should match exact snapshot 1`] = `
+<ToastProvider
+  autoDismiss={false}
+  autoDismissTimeout={5000}
+  components={
+    Object {
+      "Toast": [Function],
+      "ToastContainer": [Function],
+    }
+  }
+  placement="top-center"
+  transitionDuration={220}
+>
+  <BrowserRouter>
+    <Router
+      history={
+        Object {
+          "action": "POP",
+          "block": [Function],
+          "createHref": [Function],
+          "go": [Function],
+          "goBack": [Function],
+          "goForward": [Function],
+          "length": 1,
+          "listen": [Function],
+          "location": Object {
+            "hash": "",
+            "pathname": "/",
+            "search": "",
+            "state": undefined,
+          },
+          "push": [Function],
+          "replace": [Function],
+        }
+      }
+    >
+      <ForwardRef>
+        <Row>
+          <div
+            className="row"
+          >
+            <Col
+              xs={12}
+            >
+              <div
+                className="col-xs-12"
+              >
+                <Pulse
+                  duration={0}
+                  top={true}
+                >
+                  <RevealBase
+                    fraction={0.2}
+                    inEffect={
+                      Object {
+                        "count": 1,
+                        "delay": 0,
+                        "duration": 0,
+                        "forever": undefined,
+                        "make": [Function],
+                        "style": Object {
+                          "animationFillMode": "both",
+                        },
+                      }
+                    }
+                    outEffect={false}
+                    refProp="ref"
+                    top={true}
+                  >
+                    <div
+                      style={
+                        Object {
+                          "opacity": undefined,
+                        }
+                      }
+                    >
+                      <WithStyles(ForwardRef(Stepper))
+                        activeStep={0}
+                        alternativeLabel={true}
+                        className="makeStyles-stepperComponent-3"
+                        connector={<WithStyles(WithStyles(ForwardRef(StepConnector))) />}
+                        style={
+                          Object {
+                            "background": "transparent",
+                          }
+                        }
+                      >
+                        <ForwardRef(Stepper)
+                          activeStep={0}
+                          alternativeLabel={true}
+                          className="makeStyles-stepperComponent-3"
+                          classes={
+                            Object {
+                              "alternativeLabel": "MuiStepper-alternativeLabel",
+                              "horizontal": "MuiStepper-horizontal",
+                              "root": "MuiStepper-root",
+                              "vertical": "MuiStepper-vertical",
+                            }
+                          }
+                          connector={<WithStyles(WithStyles(ForwardRef(StepConnector))) />}
+                          style={
+                            Object {
+                              "background": "transparent",
+                            }
+                          }
+                        >
+                          <WithStyles(ForwardRef(Paper))
+                            className="MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-3 MuiStepper-alternativeLabel"
+                            elevation={0}
+                            square={true}
+                            style={
+                              Object {
+                                "background": "transparent",
+                              }
+                            }
+                          >
+                            <ForwardRef(Paper)
+                              className="MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-3 MuiStepper-alternativeLabel"
+                              classes={
+                                Object {
+                                  "elevation0": "MuiPaper-elevation0",
+                                  "elevation1": "MuiPaper-elevation1",
+                                  "elevation10": "MuiPaper-elevation10",
+                                  "elevation11": "MuiPaper-elevation11",
+                                  "elevation12": "MuiPaper-elevation12",
+                                  "elevation13": "MuiPaper-elevation13",
+                                  "elevation14": "MuiPaper-elevation14",
+                                  "elevation15": "MuiPaper-elevation15",
+                                  "elevation16": "MuiPaper-elevation16",
+                                  "elevation17": "MuiPaper-elevation17",
+                                  "elevation18": "MuiPaper-elevation18",
+                                  "elevation19": "MuiPaper-elevation19",
+                                  "elevation2": "MuiPaper-elevation2",
+                                  "elevation20": "MuiPaper-elevation20",
+                                  "elevation21": "MuiPaper-elevation21",
+                                  "elevation22": "MuiPaper-elevation22",
+                                  "elevation23": "MuiPaper-elevation23",
+                                  "elevation24": "MuiPaper-elevation24",
+                                  "elevation3": "MuiPaper-elevation3",
+                                  "elevation4": "MuiPaper-elevation4",
+                                  "elevation5": "MuiPaper-elevation5",
+                                  "elevation6": "MuiPaper-elevation6",
+                                  "elevation7": "MuiPaper-elevation7",
+                                  "elevation8": "MuiPaper-elevation8",
+                                  "elevation9": "MuiPaper-elevation9",
+                                  "outlined": "MuiPaper-outlined",
+                                  "root": "MuiPaper-root",
+                                  "rounded": "MuiPaper-rounded",
+                                }
+                              }
+                              elevation={0}
+                              square={true}
+                              style={
+                                Object {
+                                  "background": "transparent",
+                                }
+                              }
+                            >
+                              <div
+                                className="MuiPaper-root MuiStepper-root MuiStepper-horizontal makeStyles-stepperComponent-3 MuiStepper-alternativeLabel MuiPaper-elevation0"
+                                style={
+                                  Object {
+                                    "background": "transparent",
+                                  }
+                                }
+                              >
+                                <WithStyles(ForwardRef(Step))
+                                  active={true}
+                                  alternativeLabel={true}
+                                  completed={false}
+                                  connector={
+                                    <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                      orientation="horizontal"
+                                    />
+                                  }
+                                  disabled={false}
+                                  index={0}
+                                  key=".$Connect"
+                                  last={false}
+                                  orientation="horizontal"
+                                >
+                                  <ForwardRef(Step)
+                                    active={true}
+                                    alternativeLabel={true}
+                                    classes={
+                                      Object {
+                                        "alternativeLabel": "MuiStep-alternativeLabel",
+                                        "completed": "MuiStep-completed",
+                                        "horizontal": "MuiStep-horizontal",
+                                        "root": "MuiStep-root",
+                                        "vertical": "MuiStep-vertical",
+                                      }
+                                    }
+                                    completed={false}
+                                    connector={
+                                      <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                        orientation="horizontal"
+                                      />
+                                    }
+                                    disabled={false}
+                                    index={0}
+                                    last={false}
+                                    orientation="horizontal"
+                                  >
+                                    <div
+                                      className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
+                                    >
+                                      <WithStyles(ForwardRef(StepLabel))
+                                        StepIconComponent={[Function]}
+                                        StepIconProps={
+                                          Object {
+                                            "isApplicationWindowSelected": false,
+                                            "isEntireScreenSelected": false,
+                                          }
+                                        }
+                                        active={true}
+                                        alternativeLabel={true}
+                                        className="makeStyles-stepLabelContent-2"
+                                        completed={false}
+                                        disabled={false}
+                                        expanded={false}
+                                        icon={1}
+                                        id="step-label-deskreen"
+                                        key=".0"
+                                        last={false}
+                                        orientation="horizontal"
+                                      >
+                                        <ForwardRef(StepLabel)
+                                          StepIconComponent={[Function]}
+                                          StepIconProps={
+                                            Object {
+                                              "isApplicationWindowSelected": false,
+                                              "isEntireScreenSelected": false,
+                                            }
+                                          }
+                                          active={true}
+                                          alternativeLabel={true}
+                                          className="makeStyles-stepLabelContent-2"
+                                          classes={
+                                            Object {
+                                              "active": "MuiStepLabel-active",
+                                              "alternativeLabel": "MuiStepLabel-alternativeLabel",
+                                              "completed": "MuiStepLabel-completed",
+                                              "disabled": "Mui-disabled",
+                                              "error": "Mui-error",
+                                              "horizontal": "MuiStepLabel-horizontal",
+                                              "iconContainer": "MuiStepLabel-iconContainer",
+                                              "label": "MuiStepLabel-label",
+                                              "labelContainer": "MuiStepLabel-labelContainer",
+                                              "root": "MuiStepLabel-root",
+                                              "vertical": "MuiStepLabel-vertical",
+                                            }
+                                          }
+                                          completed={false}
+                                          disabled={false}
+                                          expanded={false}
+                                          icon={1}
+                                          id="step-label-deskreen"
+                                          last={false}
+                                          orientation="horizontal"
+                                        >
+                                          <span
+                                            className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-2 MuiStepLabel-alternativeLabel"
+                                            id="step-label-deskreen"
+                                          >
+                                            <span
+                                              className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
+                                            >
+                                              <ColorlibStepIcon
+                                                active={true}
+                                                completed={false}
+                                                error={false}
+                                                icon={1}
+                                                isApplicationWindowSelected={false}
+                                                isEntireScreenSelected={false}
+                                              >
+                                                <div
+                                                  className="makeStyles-root-4 makeStyles-active-5 active-stepper-pulse-icon"
+                                                >
+                                                  <Blueprint3.Icon
+                                                    color="#fff"
+                                                    icon="feed"
+                                                    iconSize={25}
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-feed"
+                                                      icon="feed"
+                                                    >
+                                                      <svg
+                                                        data-icon="feed"
+                                                        fill="#fff"
+                                                        height={25}
+                                                        viewBox="0 0 20 20"
+                                                        width={25}
+                                                      >
+                                                        <desc>
+                                                          feed
+                                                        </desc>
+                                                        <path
+                                                          d="M2.5 15a2.5 2.5 0 000 5 2.5 2.5 0 000-5zm.5-5c-.55 0-1 .45-1 1s.45 1 1 1c2.76 0 5 2.24 5 5 0 .55.45 1 1 1s1-.45 1-1c0-3.87-3.13-7-7-7zM3 0c-.55 0-1 .45-1 1s.45 1 1 1c8.28 0 15 6.72 15 15 0 .55.45 1 1 1s1-.45 1-1C20 7.61 12.39 0 3 0zm0 5c-.55 0-1 .45-1 1s.45 1 1 1c5.52 0 10 4.48 10 10 0 .55.45 1 1 1s1-.45 1-1C15 10.37 9.63 5 3 5z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </div>
+                                              </ColorlibStepIcon>
+                                            </span>
+                                            <span
+                                              className="MuiStepLabel-labelContainer"
+                                            >
+                                              <WithStyles(ForwardRef(Typography))
+                                                className="MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active"
+                                                component="span"
+                                                display="block"
+                                                variant="body2"
+                                              >
+                                                <ForwardRef(Typography)
+                                                  className="MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active"
+                                                  classes={
+                                                    Object {
+                                                      "alignCenter": "MuiTypography-alignCenter",
+                                                      "alignJustify": "MuiTypography-alignJustify",
+                                                      "alignLeft": "MuiTypography-alignLeft",
+                                                      "alignRight": "MuiTypography-alignRight",
+                                                      "body1": "MuiTypography-body1",
+                                                      "body2": "MuiTypography-body2",
+                                                      "button": "MuiTypography-button",
+                                                      "caption": "MuiTypography-caption",
+                                                      "colorError": "MuiTypography-colorError",
+                                                      "colorInherit": "MuiTypography-colorInherit",
+                                                      "colorPrimary": "MuiTypography-colorPrimary",
+                                                      "colorSecondary": "MuiTypography-colorSecondary",
+                                                      "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                                                      "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                                                      "displayBlock": "MuiTypography-displayBlock",
+                                                      "displayInline": "MuiTypography-displayInline",
+                                                      "gutterBottom": "MuiTypography-gutterBottom",
+                                                      "h1": "MuiTypography-h1",
+                                                      "h2": "MuiTypography-h2",
+                                                      "h3": "MuiTypography-h3",
+                                                      "h4": "MuiTypography-h4",
+                                                      "h5": "MuiTypography-h5",
+                                                      "h6": "MuiTypography-h6",
+                                                      "noWrap": "MuiTypography-noWrap",
+                                                      "overline": "MuiTypography-overline",
+                                                      "paragraph": "MuiTypography-paragraph",
+                                                      "root": "MuiTypography-root",
+                                                      "srOnly": "MuiTypography-srOnly",
+                                                      "subtitle1": "MuiTypography-subtitle1",
+                                                      "subtitle2": "MuiTypography-subtitle2",
+                                                    }
+                                                  }
+                                                  component="span"
+                                                  display="block"
+                                                  variant="body2"
+                                                >
+                                                  <span
+                                                    className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiStepLabel-active MuiTypography-body2 MuiTypography-displayBlock"
+                                                  >
+                                                    <Blueprint3.Text
+                                                      className="bp3-text-muted"
+                                                    >
+                                                      <div
+                                                        className="bp3-text-muted"
+                                                      >
+                                                        Connect
+                                                      </div>
+                                                    </Blueprint3.Text>
+                                                  </span>
+                                                </ForwardRef(Typography)>
+                                              </WithStyles(ForwardRef(Typography))>
+                                            </span>
+                                          </span>
+                                        </ForwardRef(StepLabel)>
+                                      </WithStyles(ForwardRef(StepLabel))>
+                                    </div>
+                                  </ForwardRef(Step)>
+                                </WithStyles(ForwardRef(Step))>
+                                <WithStyles(ForwardRef(Step))
+                                  active={false}
+                                  alternativeLabel={true}
+                                  completed={false}
+                                  connector={
+                                    <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                      orientation="horizontal"
+                                    />
+                                  }
+                                  disabled={true}
+                                  index={1}
+                                  key=".$Select"
+                                  last={false}
+                                  orientation="horizontal"
+                                >
+                                  <ForwardRef(Step)
+                                    active={false}
+                                    alternativeLabel={true}
+                                    classes={
+                                      Object {
+                                        "alternativeLabel": "MuiStep-alternativeLabel",
+                                        "completed": "MuiStep-completed",
+                                        "horizontal": "MuiStep-horizontal",
+                                        "root": "MuiStep-root",
+                                        "vertical": "MuiStep-vertical",
+                                      }
+                                    }
+                                    completed={false}
+                                    connector={
+                                      <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                        orientation="horizontal"
+                                      />
+                                    }
+                                    disabled={true}
+                                    index={1}
+                                    last={false}
+                                    orientation="horizontal"
+                                  >
+                                    <div
+                                      className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
+                                    >
+                                      <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                        active={false}
+                                        alternativeLabel={true}
+                                        completed={false}
+                                        disabled={true}
+                                        index={1}
+                                        orientation="horizontal"
+                                      >
+                                        <WithStyles(ForwardRef(StepConnector))
+                                          active={false}
+                                          alternativeLabel={true}
+                                          classes={
+                                            Object {
+                                              "active": "WithStyles(ForwardRef(StepConnector))-active-9",
+                                              "alternativeLabel": "WithStyles(ForwardRef(StepConnector))-alternativeLabel-8",
+                                              "completed": "WithStyles(ForwardRef(StepConnector))-completed-10",
+                                              "line": "WithStyles(ForwardRef(StepConnector))-line-11",
+                                            }
+                                          }
+                                          completed={false}
+                                          disabled={true}
+                                          index={1}
+                                          orientation="horizontal"
+                                        >
+                                          <ForwardRef(StepConnector)
+                                            active={false}
+                                            alternativeLabel={true}
+                                            classes={
+                                              Object {
+                                                "active": "MuiStepConnector-active WithStyles(ForwardRef(StepConnector))-active-9",
+                                                "alternativeLabel": "MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-8",
+                                                "completed": "MuiStepConnector-completed WithStyles(ForwardRef(StepConnector))-completed-10",
+                                                "disabled": "Mui-disabled",
+                                                "horizontal": "MuiStepConnector-horizontal",
+                                                "line": "MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-11",
+                                                "lineHorizontal": "MuiStepConnector-lineHorizontal",
+                                                "lineVertical": "MuiStepConnector-lineVertical",
+                                                "root": "MuiStepConnector-root",
+                                                "vertical": "MuiStepConnector-vertical",
+                                              }
+                                            }
+                                            completed={false}
+                                            disabled={true}
+                                            index={1}
+                                            orientation="horizontal"
+                                          >
+                                            <div
+                                              className="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-8 Mui-disabled"
+                                            >
+                                              <span
+                                                className="MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-11 MuiStepConnector-lineHorizontal"
+                                              />
+                                            </div>
+                                          </ForwardRef(StepConnector)>
+                                        </WithStyles(ForwardRef(StepConnector))>
+                                      </WithStyles(WithStyles(ForwardRef(StepConnector)))>
+                                      <WithStyles(ForwardRef(StepLabel))
+                                        StepIconComponent={[Function]}
+                                        StepIconProps={
+                                          Object {
+                                            "isApplicationWindowSelected": false,
+                                            "isEntireScreenSelected": false,
+                                          }
+                                        }
+                                        active={false}
+                                        alternativeLabel={true}
+                                        className="makeStyles-stepLabelContent-2"
+                                        completed={false}
+                                        disabled={true}
+                                        expanded={false}
+                                        icon={2}
+                                        id="step-label-deskreen"
+                                        key=".0"
+                                        last={false}
+                                        orientation="horizontal"
+                                      >
+                                        <ForwardRef(StepLabel)
+                                          StepIconComponent={[Function]}
+                                          StepIconProps={
+                                            Object {
+                                              "isApplicationWindowSelected": false,
+                                              "isEntireScreenSelected": false,
+                                            }
+                                          }
+                                          active={false}
+                                          alternativeLabel={true}
+                                          className="makeStyles-stepLabelContent-2"
+                                          classes={
+                                            Object {
+                                              "active": "MuiStepLabel-active",
+                                              "alternativeLabel": "MuiStepLabel-alternativeLabel",
+                                              "completed": "MuiStepLabel-completed",
+                                              "disabled": "Mui-disabled",
+                                              "error": "Mui-error",
+                                              "horizontal": "MuiStepLabel-horizontal",
+                                              "iconContainer": "MuiStepLabel-iconContainer",
+                                              "label": "MuiStepLabel-label",
+                                              "labelContainer": "MuiStepLabel-labelContainer",
+                                              "root": "MuiStepLabel-root",
+                                              "vertical": "MuiStepLabel-vertical",
+                                            }
+                                          }
+                                          completed={false}
+                                          disabled={true}
+                                          expanded={false}
+                                          icon={2}
+                                          id="step-label-deskreen"
+                                          last={false}
+                                          orientation="horizontal"
+                                        >
+                                          <span
+                                            className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-2 Mui-disabled MuiStepLabel-alternativeLabel"
+                                            id="step-label-deskreen"
+                                          >
+                                            <span
+                                              className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
+                                            >
+                                              <ColorlibStepIcon
+                                                active={false}
+                                                completed={false}
+                                                error={false}
+                                                icon={2}
+                                                isApplicationWindowSelected={false}
+                                                isEntireScreenSelected={false}
+                                              >
+                                                <div
+                                                  className="makeStyles-root-4 "
+                                                >
+                                                  <Blueprint3.Icon
+                                                    color="#5C7080"
+                                                    icon="flow-branch"
+                                                    iconSize={25}
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-flow-branch"
+                                                      icon="flow-branch"
+                                                    >
+                                                      <svg
+                                                        data-icon="flow-branch"
+                                                        fill="#5C7080"
+                                                        height={25}
+                                                        viewBox="0 0 20 20"
+                                                        width={25}
+                                                      >
+                                                        <desc>
+                                                          flow-branch
+                                                        </desc>
+                                                        <path
+                                                          d="M14.425 7.953a3.98 3.98 0 01.562 2.045 3.98 3.98 0 01-.583 2.08L18 15.671V12.98c0-.248.097-.496.29-.689.379-.379 1.047-.38 1.426 0a.94.94 0 01.283.696l-.001 5.049a.957.957 0 01-.276.69.955.955 0 01-.69.273h-5.059a.971.971 0 01-.689-.289 1.026 1.026 0 010-1.417.972.972 0 01.69-.29h2.702l-3.634-3.573a3.998 3.998 0 01-5.924-2.431H1a1 1 0 010-2h6.12a3.998 3.998 0 015.96-2.409L16.665 3l-2.694-.001a.972.972 0 01-.689-.29 1.035 1.035 0 010-1.425.94.94 0 01.696-.283l5.05.001c.248 0 .497.083.69.276a.954.954 0 01.272.69l.001 5.052a.971.971 0 01-.29.689 1.028 1.028 0 01-1.419 0 .972.972 0 01-.29-.69V4.323l-3.567 3.63z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </div>
+                                              </ColorlibStepIcon>
+                                            </span>
+                                            <span
+                                              className="MuiStepLabel-labelContainer"
+                                            >
+                                              <WithStyles(ForwardRef(Typography))
+                                                className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                component="span"
+                                                display="block"
+                                                variant="body2"
+                                              >
+                                                <ForwardRef(Typography)
+                                                  className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                  classes={
+                                                    Object {
+                                                      "alignCenter": "MuiTypography-alignCenter",
+                                                      "alignJustify": "MuiTypography-alignJustify",
+                                                      "alignLeft": "MuiTypography-alignLeft",
+                                                      "alignRight": "MuiTypography-alignRight",
+                                                      "body1": "MuiTypography-body1",
+                                                      "body2": "MuiTypography-body2",
+                                                      "button": "MuiTypography-button",
+                                                      "caption": "MuiTypography-caption",
+                                                      "colorError": "MuiTypography-colorError",
+                                                      "colorInherit": "MuiTypography-colorInherit",
+                                                      "colorPrimary": "MuiTypography-colorPrimary",
+                                                      "colorSecondary": "MuiTypography-colorSecondary",
+                                                      "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                                                      "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                                                      "displayBlock": "MuiTypography-displayBlock",
+                                                      "displayInline": "MuiTypography-displayInline",
+                                                      "gutterBottom": "MuiTypography-gutterBottom",
+                                                      "h1": "MuiTypography-h1",
+                                                      "h2": "MuiTypography-h2",
+                                                      "h3": "MuiTypography-h3",
+                                                      "h4": "MuiTypography-h4",
+                                                      "h5": "MuiTypography-h5",
+                                                      "h6": "MuiTypography-h6",
+                                                      "noWrap": "MuiTypography-noWrap",
+                                                      "overline": "MuiTypography-overline",
+                                                      "paragraph": "MuiTypography-paragraph",
+                                                      "root": "MuiTypography-root",
+                                                      "srOnly": "MuiTypography-srOnly",
+                                                      "subtitle1": "MuiTypography-subtitle1",
+                                                      "subtitle2": "MuiTypography-subtitle2",
+                                                    }
+                                                  }
+                                                  component="span"
+                                                  display="block"
+                                                  variant="body2"
+                                                >
+                                                  <span
+                                                    className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiTypography-body2 MuiTypography-displayBlock"
+                                                  >
+                                                    <Blueprint3.Text
+                                                      className="bp3-text-muted"
+                                                    >
+                                                      <div
+                                                        className="bp3-text-muted"
+                                                      >
+                                                        Select
+                                                      </div>
+                                                    </Blueprint3.Text>
+                                                  </span>
+                                                </ForwardRef(Typography)>
+                                              </WithStyles(ForwardRef(Typography))>
+                                            </span>
+                                          </span>
+                                        </ForwardRef(StepLabel)>
+                                      </WithStyles(ForwardRef(StepLabel))>
+                                    </div>
+                                  </ForwardRef(Step)>
+                                </WithStyles(ForwardRef(Step))>
+                                <WithStyles(ForwardRef(Step))
+                                  active={false}
+                                  alternativeLabel={true}
+                                  completed={false}
+                                  connector={
+                                    <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                      orientation="horizontal"
+                                    />
+                                  }
+                                  disabled={true}
+                                  index={2}
+                                  key=".$Confirm"
+                                  last={true}
+                                  orientation="horizontal"
+                                >
+                                  <ForwardRef(Step)
+                                    active={false}
+                                    alternativeLabel={true}
+                                    classes={
+                                      Object {
+                                        "alternativeLabel": "MuiStep-alternativeLabel",
+                                        "completed": "MuiStep-completed",
+                                        "horizontal": "MuiStep-horizontal",
+                                        "root": "MuiStep-root",
+                                        "vertical": "MuiStep-vertical",
+                                      }
+                                    }
+                                    completed={false}
+                                    connector={
+                                      <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                        orientation="horizontal"
+                                      />
+                                    }
+                                    disabled={true}
+                                    index={2}
+                                    last={true}
+                                    orientation="horizontal"
+                                  >
+                                    <div
+                                      className="MuiStep-root MuiStep-horizontal MuiStep-alternativeLabel"
+                                    >
+                                      <WithStyles(WithStyles(ForwardRef(StepConnector)))
+                                        active={false}
+                                        alternativeLabel={true}
+                                        completed={false}
+                                        disabled={true}
+                                        index={2}
+                                        orientation="horizontal"
+                                      >
+                                        <WithStyles(ForwardRef(StepConnector))
+                                          active={false}
+                                          alternativeLabel={true}
+                                          classes={
+                                            Object {
+                                              "active": "WithStyles(ForwardRef(StepConnector))-active-9",
+                                              "alternativeLabel": "WithStyles(ForwardRef(StepConnector))-alternativeLabel-8",
+                                              "completed": "WithStyles(ForwardRef(StepConnector))-completed-10",
+                                              "line": "WithStyles(ForwardRef(StepConnector))-line-11",
+                                            }
+                                          }
+                                          completed={false}
+                                          disabled={true}
+                                          index={2}
+                                          orientation="horizontal"
+                                        >
+                                          <ForwardRef(StepConnector)
+                                            active={false}
+                                            alternativeLabel={true}
+                                            classes={
+                                              Object {
+                                                "active": "MuiStepConnector-active WithStyles(ForwardRef(StepConnector))-active-9",
+                                                "alternativeLabel": "MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-8",
+                                                "completed": "MuiStepConnector-completed WithStyles(ForwardRef(StepConnector))-completed-10",
+                                                "disabled": "Mui-disabled",
+                                                "horizontal": "MuiStepConnector-horizontal",
+                                                "line": "MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-11",
+                                                "lineHorizontal": "MuiStepConnector-lineHorizontal",
+                                                "lineVertical": "MuiStepConnector-lineVertical",
+                                                "root": "MuiStepConnector-root",
+                                                "vertical": "MuiStepConnector-vertical",
+                                              }
+                                            }
+                                            completed={false}
+                                            disabled={true}
+                                            index={2}
+                                            orientation="horizontal"
+                                          >
+                                            <div
+                                              className="MuiStepConnector-root MuiStepConnector-horizontal MuiStepConnector-alternativeLabel WithStyles(ForwardRef(StepConnector))-alternativeLabel-8 Mui-disabled"
+                                            >
+                                              <span
+                                                className="MuiStepConnector-line WithStyles(ForwardRef(StepConnector))-line-11 MuiStepConnector-lineHorizontal"
+                                              />
+                                            </div>
+                                          </ForwardRef(StepConnector)>
+                                        </WithStyles(ForwardRef(StepConnector))>
+                                      </WithStyles(WithStyles(ForwardRef(StepConnector)))>
+                                      <WithStyles(ForwardRef(StepLabel))
+                                        StepIconComponent={[Function]}
+                                        StepIconProps={
+                                          Object {
+                                            "isApplicationWindowSelected": false,
+                                            "isEntireScreenSelected": false,
+                                          }
+                                        }
+                                        active={false}
+                                        alternativeLabel={true}
+                                        className="makeStyles-stepLabelContent-2"
+                                        completed={false}
+                                        disabled={true}
+                                        expanded={false}
+                                        icon={3}
+                                        id="step-label-deskreen"
+                                        key=".0"
+                                        last={true}
+                                        orientation="horizontal"
+                                      >
+                                        <ForwardRef(StepLabel)
+                                          StepIconComponent={[Function]}
+                                          StepIconProps={
+                                            Object {
+                                              "isApplicationWindowSelected": false,
+                                              "isEntireScreenSelected": false,
+                                            }
+                                          }
+                                          active={false}
+                                          alternativeLabel={true}
+                                          className="makeStyles-stepLabelContent-2"
+                                          classes={
+                                            Object {
+                                              "active": "MuiStepLabel-active",
+                                              "alternativeLabel": "MuiStepLabel-alternativeLabel",
+                                              "completed": "MuiStepLabel-completed",
+                                              "disabled": "Mui-disabled",
+                                              "error": "Mui-error",
+                                              "horizontal": "MuiStepLabel-horizontal",
+                                              "iconContainer": "MuiStepLabel-iconContainer",
+                                              "label": "MuiStepLabel-label",
+                                              "labelContainer": "MuiStepLabel-labelContainer",
+                                              "root": "MuiStepLabel-root",
+                                              "vertical": "MuiStepLabel-vertical",
+                                            }
+                                          }
+                                          completed={false}
+                                          disabled={true}
+                                          expanded={false}
+                                          icon={3}
+                                          id="step-label-deskreen"
+                                          last={true}
+                                          orientation="horizontal"
+                                        >
+                                          <span
+                                            className="MuiStepLabel-root MuiStepLabel-horizontal makeStyles-stepLabelContent-2 Mui-disabled MuiStepLabel-alternativeLabel"
+                                            id="step-label-deskreen"
+                                          >
+                                            <span
+                                              className="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel"
+                                            >
+                                              <ColorlibStepIcon
+                                                active={false}
+                                                completed={false}
+                                                error={false}
+                                                icon={3}
+                                                isApplicationWindowSelected={false}
+                                                isEntireScreenSelected={false}
+                                              >
+                                                <div
+                                                  className="makeStyles-root-4 "
+                                                >
+                                                  <Blueprint3.Icon
+                                                    color="#5C7080"
+                                                    icon="confirm"
+                                                    iconSize={25}
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-confirm"
+                                                      icon="confirm"
+                                                    >
+                                                      <svg
+                                                        data-icon="confirm"
+                                                        fill="#5C7080"
+                                                        height={25}
+                                                        viewBox="0 0 20 20"
+                                                        width={25}
+                                                      >
+                                                        <desc>
+                                                          confirm
+                                                        </desc>
+                                                        <path
+                                                          d="M9.71 5.29a1.003 1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l7-7a1.003 1.003 0 00-1.42-1.42L12 7.59l-2.29-2.3zm7.93 2.32c.23.75.36 1.56.36 2.39 0 4.42-3.58 8-8 8s-8-3.58-8-8a7.998 7.998 0 0111.8-7.04l1.46-1.46C13.73.56 11.93 0 10 0 4.48 0 0 4.48 0 10s4.48 10 10 10 10-4.48 10-10c0-1.4-.29-2.73-.81-3.95l-1.55 1.56z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                </div>
+                                              </ColorlibStepIcon>
+                                            </span>
+                                            <span
+                                              className="MuiStepLabel-labelContainer"
+                                            >
+                                              <WithStyles(ForwardRef(Typography))
+                                                className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                component="span"
+                                                display="block"
+                                                variant="body2"
+                                              >
+                                                <ForwardRef(Typography)
+                                                  className="MuiStepLabel-label MuiStepLabel-alternativeLabel"
+                                                  classes={
+                                                    Object {
+                                                      "alignCenter": "MuiTypography-alignCenter",
+                                                      "alignJustify": "MuiTypography-alignJustify",
+                                                      "alignLeft": "MuiTypography-alignLeft",
+                                                      "alignRight": "MuiTypography-alignRight",
+                                                      "body1": "MuiTypography-body1",
+                                                      "body2": "MuiTypography-body2",
+                                                      "button": "MuiTypography-button",
+                                                      "caption": "MuiTypography-caption",
+                                                      "colorError": "MuiTypography-colorError",
+                                                      "colorInherit": "MuiTypography-colorInherit",
+                                                      "colorPrimary": "MuiTypography-colorPrimary",
+                                                      "colorSecondary": "MuiTypography-colorSecondary",
+                                                      "colorTextPrimary": "MuiTypography-colorTextPrimary",
+                                                      "colorTextSecondary": "MuiTypography-colorTextSecondary",
+                                                      "displayBlock": "MuiTypography-displayBlock",
+                                                      "displayInline": "MuiTypography-displayInline",
+                                                      "gutterBottom": "MuiTypography-gutterBottom",
+                                                      "h1": "MuiTypography-h1",
+                                                      "h2": "MuiTypography-h2",
+                                                      "h3": "MuiTypography-h3",
+                                                      "h4": "MuiTypography-h4",
+                                                      "h5": "MuiTypography-h5",
+                                                      "h6": "MuiTypography-h6",
+                                                      "noWrap": "MuiTypography-noWrap",
+                                                      "overline": "MuiTypography-overline",
+                                                      "paragraph": "MuiTypography-paragraph",
+                                                      "root": "MuiTypography-root",
+                                                      "srOnly": "MuiTypography-srOnly",
+                                                      "subtitle1": "MuiTypography-subtitle1",
+                                                      "subtitle2": "MuiTypography-subtitle2",
+                                                    }
+                                                  }
+                                                  component="span"
+                                                  display="block"
+                                                  variant="body2"
+                                                >
+                                                  <span
+                                                    className="MuiTypography-root MuiStepLabel-label MuiStepLabel-alternativeLabel MuiTypography-body2 MuiTypography-displayBlock"
+                                                  >
+                                                    <Blueprint3.Text
+                                                      className="bp3-text-muted"
+                                                    >
+                                                      <div
+                                                        className="bp3-text-muted"
+                                                      >
+                                                        Confirm
+                                                      </div>
+                                                    </Blueprint3.Text>
+                                                  </span>
+                                                </ForwardRef(Typography)>
+                                              </WithStyles(ForwardRef(Typography))>
+                                            </span>
+                                          </span>
+                                        </ForwardRef(StepLabel)>
+                                      </WithStyles(ForwardRef(StepLabel))>
+                                    </div>
+                                  </ForwardRef(Step)>
+                                </WithStyles(ForwardRef(Step))>
+                              </div>
+                            </ForwardRef(Paper)>
+                          </WithStyles(ForwardRef(Paper))>
+                        </ForwardRef(Stepper)>
+                      </WithStyles(ForwardRef(Stepper))>
+                    </div>
+                  </RevealBase>
+                </Pulse>
+              </div>
+            </Col>
+            <Col
+              className="makeStyles-stepContent-1"
+              xs={12}
+            >
+              <div
+                className="col-xs-12 makeStyles-stepContent-1"
+              >
+                <Fade
+                  duration={0}
+                  when={false}
+                >
+                  <RevealBase
+                    fraction={0.2}
+                    inEffect={
+                      Object {
+                        "count": 1,
+                        "delay": 0,
+                        "duration": 0,
+                        "forever": undefined,
+                        "make": [Function],
+                        "reverse": undefined,
+                        "style": Object {
+                          "animationFillMode": "both",
+                        },
+                      }
+                    }
+                    outEffect={
+                      Object {
+                        "count": 1,
+                        "delay": 0,
+                        "duration": 0,
+                        "forever": undefined,
+                        "make": [Function],
+                        "reverse": undefined,
+                        "style": Object {
+                          "animationFillMode": "both",
+                        },
+                      }
+                    }
+                    refProp="ref"
+                    when={false}
+                  >
+                    <div
+                      className="react-reveal"
+                      style={
+                        Object {
+                          "opacity": 0,
+                        }
+                      }
+                    >
+                      <IntermediateStep
+                        activeStep={0}
+                        handleBack={[Function]}
+                        handleNext={[Function]}
+                        handleNextApplicationWindow={[Function]}
+                        handleNextEntireScreen={[Function]}
+                        resetPendingConnectionDevice={[Function]}
+                        resetUserAllowedConnection={[Function]}
+                        steps={
+                          Array [
+                            "Connect",
+                            "Select",
+                            "Confirm",
+                          ]
+                        }
+                      >
+                        <Col
+                          style={
+                            Object {
+                              "alignItems": "center",
+                              "display": "flex",
+                              "flexDirection": "column",
+                              "height": "260px",
+                              "justifyContent": "center",
+                            }
+                          }
+                          xs={12}
+                        >
+                          <div
+                            className="col-xs-12"
+                            style={
+                              Object {
+                                "alignItems": "center",
+                                "display": "flex",
+                                "flexDirection": "column",
+                                "height": "260px",
+                                "justifyContent": "center",
+                              }
+                            }
+                          >
+                            <ScanQRStep>
+                              <div
+                                style={
+                                  Object {
+                                    "textAlign": "center",
+                                  }
+                                }
+                              >
+                                <Blueprint3.Text
+                                  className="bp3-text"
+                                >
+                                  <div
+                                    className="bp3-text"
+                                  >
+                                    Scan the QR code
+                                  </div>
+                                </Blueprint3.Text>
+                                <Blueprint3.Text
+                                  className="bp3-text-muted"
+                                >
+                                  <div
+                                    className="bp3-text-muted"
+                                  >
+                                    ( make sure your computer and device are connected on same WiFi )
+                                  </div>
+                                </Blueprint3.Text>
+                              </div>
+                              <div>
+                                <Blueprint3.Tooltip
+                                  content="Click to make bigger"
+                                  hoverCloseDelay={0}
+                                  hoverOpenDelay={100}
+                                  position="left"
+                                  transitionDuration={100}
+                                >
+                                  <Blueprint3.Popover
+                                    autoFocus={false}
+                                    boundary="scrollParent"
+                                    canEscapeKeyClose={false}
+                                    captureDismiss={false}
+                                    content="Click to make bigger"
+                                    defaultIsOpen={false}
+                                    disabled={false}
+                                    enforceFocus={false}
+                                    fill={false}
+                                    hasBackdrop={false}
+                                    hoverCloseDelay={0}
+                                    hoverOpenDelay={100}
+                                    inheritDarkTheme={true}
+                                    interactionKind="hover-target"
+                                    lazy={true}
+                                    minimal={false}
+                                    modifiers={Object {}}
+                                    openOnTargetFocus={true}
+                                    popoverClassName="bp3-tooltip"
+                                    position="left"
+                                    targetTagName="span"
+                                    transitionDuration={100}
+                                    usePortal={true}
+                                    wrapperTagName="span"
+                                  >
+                                    <Manager>
+                                      <span
+                                        className="bp3-popover-wrapper"
+                                      >
+                                        <Reference
+                                          innerRef={[Function]}
+                                        >
+                                          <InnerReference
+                                            innerRef={[Function]}
+                                            setReferenceNode={[Function]}
+                                          >
+                                            <Blueprint3.ResizeSensor
+                                              onResize={[Function]}
+                                            >
+                                              <span
+                                                className="bp3-popover-target"
+                                                onBlur={[Function]}
+                                                onFocus={[Function]}
+                                                onMouseEnter={[Function]}
+                                                onMouseLeave={[Function]}
+                                              >
+                                                <div
+                                                  className="makeStyles-smallQRCode-12"
+                                                  id="magnify-qr-code-button"
+                                                  key=".0"
+                                                  onClick={[Function]}
+                                                  tabIndex={0}
+                                                >
+                                                  <QRCode
+                                                    bgColor="rgba(0,0,0,0.0)"
+                                                    fgColor="#000000"
+                                                    imageSettings={
+                                                      Object {
+                                                        "height": 40,
+                                                        "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                                                        "width": 40,
+                                                      }
+                                                    }
+                                                    includeMargin={false}
+                                                    level="H"
+                                                    renderAs="svg"
+                                                    size={128}
+                                                    value="http://192.168.31.214:65000/99999"
+                                                  >
+                                                    <QRCodeSVG
+                                                      bgColor="rgba(0,0,0,0.0)"
+                                                      fgColor="#000000"
+                                                      imageSettings={
+                                                        Object {
+                                                          "height": 40,
+                                                          "src": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png",
+                                                          "width": 40,
+                                                        }
+                                                      }
+                                                      includeMargin={false}
+                                                      level="H"
+                                                      size={128}
+                                                      value="http://192.168.31.214:65000/99999"
+                                                    >
+                                                      <svg
+                                                        height={128}
+                                                        shapeRendering="crispEdges"
+                                                        viewBox="0 0 33 33"
+                                                        width={128}
+                                                      >
+                                                        <path
+                                                          d="M0,0 h33v33H0z"
+                                                          fill="rgba(0,0,0,0.0)"
+                                                        />
+                                                        <path
+                                                          d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h6v1H12zM19 0h2v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM15 1h1v1H15zM17 1h2v1H17zM22 1h1v1H22zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h1v1H11zM13 2h1v1H13zM15 2h1v1H15zM17 2h2v1H17zM20 2h2v1H20zM23 2h1v1H23zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h4v1H10zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h1v1H11zM13 4h1v1H13zM15 4h1v1H15zM17 4h2v1H17zM21 4h4v1H21zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM10 5h1v1H10zM14 5h1v1H14zM16 5h1v1H16zM20 5h3v1H20zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h6v1H8zM15 7h2v1H15zM18 7h1v1H18zM20 7h3v1H20zM24 7h1v1H24zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM11 8h4v1H11zM16 8h1v1H16zM19 8h1v1H19zM23 8h1v1H23zM25 8h3v1H25zM30,8 h3v1H30zM0 9h2v1H0zM3 9h1v1H3zM5 9h1v1H5zM7 9h1v1H7zM9 9h1v1H9zM12 9h2v1H12zM16 9h2v1H16zM20 9h1v1H20zM22 9h5v1H22zM29 9h1v1H29zM31,9 h2v1H31zM0 10h2v1H0zM5 10h6v1H5zM13 10h2v1H13zM17 10h5v1H17zM24 10h1v1H24zM27 10h1v1H27zM0 11h2v1H0zM4 11h2v1H4zM8 11h3v1H8zM15 11h1v1H15zM21 11h3v1H21zM25 11h1v1H25zM30 11h2v1H30zM0 12h7v1H0zM11 12h2v1H11zM15 12h1v1H15zM19 12h1v1H19zM21 12h1v1H21zM24 12h1v1H24zM28 12h2v1H28zM32,12 h1v1H32zM8 13h1v1H8zM10 13h1v1H10zM14 13h1v1H14zM16 13h2v1H16zM19 13h2v1H19zM23 13h5v1H23zM30 13h1v1H30zM32,13 h1v1H32zM0 14h2v1H0zM3 14h1v1H3zM6 14h1v1H6zM11 14h5v1H11zM17 14h2v1H17zM20 14h1v1H20zM22 14h1v1H22zM24 14h2v1H24zM30 14h2v1H30zM0 15h2v1H0zM7 15h1v1H7zM11 15h1v1H11zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM20 15h3v1H20zM24 15h1v1H24zM27 15h2v1H27zM30 15h2v1H30zM0 16h1v1H0zM2 16h1v1H2zM4 16h4v1H4zM9 16h1v1H9zM11 16h1v1H11zM18 16h3v1H18zM23 16h2v1H23zM28 16h1v1H28zM0 17h2v1H0zM3 17h1v1H3zM5 17h1v1H5zM13 17h3v1H13zM17 17h2v1H17zM21 17h7v1H21zM31,17 h2v1H31zM0 18h2v1H0zM4 18h4v1H4zM9 18h3v1H9zM14 18h1v1H14zM18 18h1v1H18zM20 18h1v1H20zM24 18h1v1H24zM26 18h1v1H26zM30 18h1v1H30zM2 19h1v1H2zM4 19h1v1H4zM9 19h1v1H9zM11 19h2v1H11zM14 19h1v1H14zM20 19h6v1H20zM27 19h1v1H27zM29 19h2v1H29zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM10 20h1v1H10zM13 20h2v1H13zM16 20h1v1H16zM18 20h1v1H18zM20 20h1v1H20zM23 20h1v1H23zM28 20h2v1H28zM0 21h1v1H0zM3 21h3v1H3zM10 21h1v1H10zM12 21h3v1H12zM16 21h1v1H16zM19 21h1v1H19zM21 21h7v1H21zM30 21h1v1H30zM32,21 h1v1H32zM0 22h1v1H0zM2 22h3v1H2zM6 22h3v1H6zM13 22h1v1H13zM15 22h7v1H15zM27 22h2v1H27zM0 23h1v1H0zM2 23h2v1H2zM7 23h2v1H7zM10 23h2v1H10zM14 23h2v1H14zM17 23h3v1H17zM21 23h1v1H21zM24 23h1v1H24zM28 23h1v1H28zM30 23h2v1H30zM0 24h1v1H0zM6 24h1v1H6zM8 24h1v1H8zM10 24h1v1H10zM12 24h1v1H12zM17 24h1v1H17zM19 24h1v1H19zM23 24h6v1H23zM8 25h1v1H8zM10 25h1v1H10zM17 25h2v1H17zM22 25h3v1H22zM28 25h1v1H28zM30,25 h3v1H30zM0 26h7v1H0zM10 26h1v1H10zM14 26h3v1H14zM18 26h1v1H18zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h2v1H11zM15 27h4v1H15zM20 27h1v1H20zM24 27h1v1H24zM28 27h1v1H28zM30 27h2v1H30zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM8 28h2v1H8zM11 28h2v1H11zM14 28h2v1H14zM17 28h1v1H17zM21 28h2v1H21zM24 28h6v1H24zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h2v1H8zM11 29h1v1H11zM14 29h3v1H14zM18 29h3v1H18zM28 29h2v1H28zM32,29 h1v1H32zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h1v1H8zM10 30h5v1H10zM16 30h5v1H16zM22 30h1v1H22zM25 30h2v1H25zM29 30h1v1H29zM0 31h1v1H0zM6 31h1v1H6zM12 31h3v1H12zM16 31h1v1H16zM20 31h1v1H20zM23 31h1v1H23zM25 31h1v1H25zM27 31h1v1H27zM30 31h1v1H30zM0 32h7v1H0zM9 32h1v1H9zM11 32h1v1H11zM13 32h1v1H13zM19 32h1v1H19zM21 32h1v1H21zM24 32h1v1H24zM26 32h1v1H26zM29 32h1v1H29zM31 32h1v1H31z"
+                                                          fill="#000000"
+                                                        />
+                                                        <image
+                                                          height={10.3125}
+                                                          preserveAspectRatio="none"
+                                                          width={10.3125}
+                                                          x={11.34375}
+                                                          xlinkHref="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Electron_Software_Framework_Logo.svg/256px-Electron_Software_Framework_Logo.svg.png"
+                                                          y={11.34375}
+                                                        />
+                                                      </svg>
+                                                    </QRCodeSVG>
+                                                  </QRCode>
+                                                </div>
+                                              </span>
+                                            </Blueprint3.ResizeSensor>
+                                          </InnerReference>
+                                        </Reference>
+                                        <Blueprint3.Overlay
+                                          autoFocus={false}
+                                          backdropClassName="bp3-popover-backdrop"
+                                          backdropProps={Object {}}
+                                          canEscapeKeyClose={false}
+                                          canOutsideClickClose={false}
+                                          enforceFocus={false}
+                                          hasBackdrop={false}
+                                          isOpen={false}
+                                          lazy={true}
+                                          onClose={[Function]}
+                                          transitionDuration={100}
+                                          transitionName="bp3-popover"
+                                          usePortal={true}
+                                        />
+                                      </span>
+                                    </Manager>
+                                  </Blueprint3.Popover>
+                                </Blueprint3.Tooltip>
+                              </div>
+                              <div
+                                style={
+                                  Object {
+                                    "marginBottom": "10px",
+                                  }
+                                }
+                              >
+                                <Blueprint3.Text
+                                  className="bp3-text-muted"
+                                >
+                                  <div
+                                    className="bp3-text-muted"
+                                  >
+                                    or type the following address manualy in browser address bar on any device:
+                                  </div>
+                                </Blueprint3.Text>
+                              </div>
+                              <Blueprint3.Tooltip
+                                content="Click to copy"
+                                hoverCloseDelay={0}
+                                hoverOpenDelay={100}
+                                position="left"
+                                transitionDuration={100}
+                              >
+                                <Blueprint3.Popover
+                                  autoFocus={false}
+                                  boundary="scrollParent"
+                                  canEscapeKeyClose={false}
+                                  captureDismiss={false}
+                                  content="Click to copy"
+                                  defaultIsOpen={false}
+                                  disabled={false}
+                                  enforceFocus={false}
+                                  fill={false}
+                                  hasBackdrop={false}
+                                  hoverCloseDelay={0}
+                                  hoverOpenDelay={100}
+                                  inheritDarkTheme={true}
+                                  interactionKind="hover-target"
+                                  lazy={true}
+                                  minimal={false}
+                                  modifiers={Object {}}
+                                  openOnTargetFocus={true}
+                                  popoverClassName="bp3-tooltip"
+                                  position="left"
+                                  targetTagName="span"
+                                  transitionDuration={100}
+                                  usePortal={true}
+                                  wrapperTagName="span"
+                                >
+                                  <Manager>
+                                    <span
+                                      className="bp3-popover-wrapper"
+                                    >
+                                      <Reference
+                                        innerRef={[Function]}
+                                      >
+                                        <InnerReference
+                                          innerRef={[Function]}
+                                          setReferenceNode={[Function]}
+                                        >
+                                          <Blueprint3.ResizeSensor
+                                            onResize={[Function]}
+                                          >
+                                            <span
+                                              className="bp3-popover-target"
+                                              onBlur={[Function]}
+                                              onFocus={[Function]}
+                                              onMouseEnter={[Function]}
+                                              onMouseLeave={[Function]}
+                                            >
+                                              <Blueprint3.Button
+                                                className=""
+                                                icon="duplicate"
+                                                intent="primary"
+                                                key=".0"
+                                                style={
+                                                  Object {
+                                                    "borderRadius": "100px",
+                                                  }
+                                                }
+                                                tabIndex={0}
+                                              >
+                                                <button
+                                                  className="bp3-button bp3-intent-primary"
+                                                  onKeyDown={[Function]}
+                                                  onKeyUp={[Function]}
+                                                  style={
+                                                    Object {
+                                                      "borderRadius": "100px",
+                                                    }
+                                                  }
+                                                  tabIndex={0}
+                                                  type="button"
+                                                >
+                                                  <Blueprint3.Icon
+                                                    icon="duplicate"
+                                                    key="leftIcon"
+                                                  >
+                                                    <span
+                                                      className="bp3-icon bp3-icon-duplicate"
+                                                      icon="duplicate"
+                                                    >
+                                                      <svg
+                                                        data-icon="duplicate"
+                                                        height={16}
+                                                        viewBox="0 0 16 16"
+                                                        width={16}
+                                                      >
+                                                        <desc>
+                                                          duplicate
+                                                        </desc>
+                                                        <path
+                                                          d="M15 0H5c-.55 0-1 .45-1 1v2h2V2h8v7h-1v2h2c.55 0 1-.45 1-1V1c0-.55-.45-1-1-1zm-4 4H1c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h10c.55 0 1-.45 1-1V5c0-.55-.45-1-1-1zm-1 10H2V6h8v8z"
+                                                          fillRule="evenodd"
+                                                          key="0"
+                                                        />
+                                                      </svg>
+                                                    </span>
+                                                  </Blueprint3.Icon>
+                                                  <span
+                                                    className="bp3-button-text"
+                                                    key="text"
+                                                  >
+                                                    http://255.255.255.255:65000/99999
+                                                  </span>
+                                                  <Blueprint3.Icon
+                                                    key="rightIcon"
+                                                  />
+                                                </button>
+                                              </Blueprint3.Button>
+                                            </span>
+                                          </Blueprint3.ResizeSensor>
+                                        </InnerReference>
+                                      </Reference>
+                                      <Blueprint3.Overlay
+                                        autoFocus={false}
+                                        backdropClassName="bp3-popover-backdrop"
+                                        backdropProps={Object {}}
+                                        canEscapeKeyClose={false}
+                                        canOutsideClickClose={false}
+                                        enforceFocus={false}
+                                        hasBackdrop={false}
+                                        isOpen={false}
+                                        lazy={true}
+                                        onClose={[Function]}
+                                        transitionDuration={100}
+                                        transitionName="bp3-popover"
+                                        usePortal={true}
+                                      />
+                                    </span>
+                                  </Manager>
+                                </Blueprint3.Popover>
+                              </Blueprint3.Tooltip>
+                              <Blueprint3.Dialog
+                                canEscapeKeyClose={true}
+                                canOutsideClickClose={true}
+                                className="makeStyles-bigQRCodeDialogRoot-14"
+                                id="bp3-qr-code-dialog-root"
+                                isOpen={false}
+                                onClose={[Function]}
+                                style={
+                                  Object {
+                                    "position": "relative",
+                                    "top": "-30px",
+                                  }
+                                }
+                                transitionDuration={0}
+                              >
+                                <Blueprint3.Overlay
+                                  autoFocus={true}
+                                  backdropProps={Object {}}
+                                  canEscapeKeyClose={true}
+                                  canOutsideClickClose={true}
+                                  className="bp3-overlay-scroll-container"
+                                  enforceFocus={true}
+                                  hasBackdrop={true}
+                                  id="bp3-qr-code-dialog-root"
+                                  isOpen={false}
+                                  lazy={true}
+                                  onClose={[Function]}
+                                  style={
+                                    Object {
+                                      "position": "relative",
+                                      "top": "-30px",
+                                    }
+                                  }
+                                  transitionDuration={0}
+                                  transitionName="bp3-overlay"
+                                  usePortal={true}
+                                />
+                              </Blueprint3.Dialog>
+                            </ScanQRStep>
+                            <Blueprint3.Button
+                              icon="chevron-left"
+                              intent="danger"
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "borderRadius": "100px",
+                                  "display": "none",
+                                  "marginTop": "10px",
+                                }
+                              }
+                              text="No, I need to share other thing"
+                            >
+                              <button
+                                className="bp3-button bp3-intent-danger"
+                                onClick={[Function]}
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                style={
+                                  Object {
+                                    "borderRadius": "100px",
+                                    "display": "none",
+                                    "marginTop": "10px",
+                                  }
+                                }
+                                type="button"
+                              >
+                                <Blueprint3.Icon
+                                  icon="chevron-left"
+                                  key="leftIcon"
+                                >
+                                  <span
+                                    className="bp3-icon bp3-icon-chevron-left"
+                                    icon="chevron-left"
+                                  >
+                                    <svg
+                                      data-icon="chevron-left"
+                                      height={16}
+                                      viewBox="0 0 16 16"
+                                      width={16}
+                                    >
+                                      <desc>
+                                        chevron-left
+                                      </desc>
+                                      <path
+                                        d="M7.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71l-4 4C5.11 7.47 5 7.72 5 8c0 .28.11.53.29.71l4 4a1.003 1.003 0 001.42-1.42L7.41 8z"
+                                        fillRule="evenodd"
+                                        key="0"
+                                      />
+                                    </svg>
+                                  </span>
+                                </Blueprint3.Icon>
+                                <span
+                                  className="bp3-button-text"
+                                  key="text"
+                                >
+                                  No, I need to share other thing
+                                </span>
+                                <Blueprint3.Icon
+                                  key="rightIcon"
+                                />
+                              </button>
+                            </Blueprint3.Button>
+                          </div>
+                        </Col>
+                      </IntermediateStep>
+                    </div>
+                  </RevealBase>
+                </Fade>
+              </div>
+            </Col>
+          </div>
+        </Row>
+        <AllowConnectionForDeviceAlert
+          device={null}
+          isOpen={false}
+          onCancel={[Function]}
+          onConfirm={[Function]}
+        >
+          <Blueprint3.Alert
+            canEscapeKeyCancel={false}
+            canOutsideClickCancel={false}
+            cancelButtonText="Deny"
+            className="class-allow-device-to-connect-alert"
+            confirmButtonText="Allow"
+            icon="feed"
+            intent="danger"
+            isOpen={false}
+            onCancel={[Function]}
+            onConfirm={[Function]}
+            transitionDuration={0}
+          >
+            <Blueprint3.Dialog
+              canEscapeKeyClose={false}
+              canOutsideClickClose={false}
+              className="bp3-alert class-allow-device-to-connect-alert"
+              isOpen={false}
+              onCancel={[Function]}
+              onClose={[Function]}
+              onConfirm={[Function]}
+              transitionDuration={0}
+            >
+              <Blueprint3.Overlay
+                autoFocus={true}
+                backdropProps={Object {}}
+                canEscapeKeyClose={false}
+                canOutsideClickClose={false}
+                className="bp3-overlay-scroll-container"
+                enforceFocus={true}
+                hasBackdrop={true}
+                isOpen={false}
+                lazy={true}
+                onCancel={[Function]}
+                onClose={[Function]}
+                onConfirm={[Function]}
+                transitionDuration={0}
+                transitionName="bp3-overlay"
+                usePortal={true}
+              />
+            </Blueprint3.Dialog>
+          </Blueprint3.Alert>
+        </AllowConnectionForDeviceAlert>
+      </ForwardRef>
+    </Router>
+  </BrowserRouter>
+  <Portal
+    containerInfo={
+      <body>
+        <div
+          class="react-toast-notifications__container css-1frfeuj-ToastContainer"
+        />
+      </body>
+    }
+  >
+    <ToastContainer
+      hasToasts={false}
+      placement="top-center"
+    >
+      <EmotionCssPropInternal
+        __EMOTION_LABEL_PLEASE_DO_NOT_USE__="ToastContainer"
+        __EMOTION_TYPE_PLEASE_DO_NOT_USE__="div"
+        className="react-toast-notifications__container"
+        css={
+          Object {
+            "boxSizing": "border-box",
+            "left": "50%",
+            "maxHeight": "100%",
+            "overflowX": "hidden",
+            "overflowY": "auto",
+            "padding": 8,
+            "pointerEvents": "none",
+            "position": "fixed",
+            "top": 0,
+            "transform": "translateX(-50%)",
+            "zIndex": 1000,
+          }
+        }
+      >
+        <div
+          className="react-toast-notifications__container css-1frfeuj-ToastContainer"
+        >
+          <TransitionGroup
+            childFactory={[Function]}
+            component={null}
+          />
+        </div>
+      </EmotionCssPropInternal>
+    </ToastContainer>
+  </Portal>
+</ToastProvider>
+`;
diff --git a/app/index.tsx b/app/index.tsx
index e46d2fc..e41ed92 100644
--- a/app/index.tsx
+++ b/app/index.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable no-new */
 import React, { Fragment, Suspense } from 'react';
 import { render } from 'react-dom';
 import { AppContainer as ReactHotAppContainer } from 'react-hot-loader';
@@ -10,6 +12,19 @@ const store = configuredStore();
 const AppContainer = process.env.PLAIN_HMR ? Fragment : ReactHotAppContainer;
 
 document.addEventListener('DOMContentLoaded', () => {
+  if (process.platform === 'darwin') {
+    const windowTopBar = document.createElement('div');
+    windowTopBar.style.width = '100%';
+    windowTopBar.style.height = '50px';
+    windowTopBar.style.position = 'absolute';
+    windowTopBar.style.top = '0';
+    windowTopBar.style.left = '0';
+    // @ts-ignore: all good here
+    windowTopBar.style.webkitAppRegion = 'drag';
+    windowTopBar.style.pointerEvents = 'none';
+    document.body.appendChild(windowTopBar);
+  }
+
   // eslint-disable-next-line global-require
   const Root = require('./containers/Root').default;
   render(
diff --git a/app/locales/en/translation.json b/app/locales/en/translation.json
index 3ef2735..5511f6e 100644
--- a/app/locales/en/translation.json
+++ b/app/locales/en/translation.json
@@ -1,6 +1,7 @@
 {
-  "Language": "🌐 Language",
+  "Language": "Language 🇬🇧 / 🇺🇸",
   "Signaling server is running on port": "Signaling server is running on port ⚓",
   "ru": "Русский",
-  "en": "English"
+  "en": "English",
+  "ua": "Українська"
 }
diff --git a/app/locales/ru/translation.json b/app/locales/ru/translation.json
index f67240f..8b4a9e4 100644
--- a/app/locales/ru/translation.json
+++ b/app/locales/ru/translation.json
@@ -1,6 +1,7 @@
 {
-  "Language": "🌐 Язык",
+  "Language": "Язык 🇷🇺",
   "Signaling server is running on port": "Сигнальный сервер работает на порте ⚓",
   "ru": "Русский",
-  "en": "English"
+  "en": "English",
+  "ua": "Українська"
 }
diff --git a/app/locales/ua/translation.json b/app/locales/ua/translation.json
new file mode 100644
index 0000000..a489078
--- /dev/null
+++ b/app/locales/ua/translation.json
@@ -0,0 +1,7 @@
+{
+  "Language": "Мова 🇺🇦",
+  "Signaling server is running on port": "Сигнальный сервер працює на порту ⚓",
+  "ru": "Русский",
+  "en": "English",
+  "ua": "Українська"
+}
diff --git a/app/locales/ua/translation.missing.json b/app/locales/ua/translation.missing.json
new file mode 100644
index 0000000..e69de29
diff --git a/app/main.dev.ts b/app/main.dev.ts
index d75fd08..a9b9412 100644
--- a/app/main.dev.ts
+++ b/app/main.dev.ts
@@ -15,7 +15,7 @@ import path from 'path';
 import { app, BrowserWindow, ipcMain } from 'electron';
 import { autoUpdater } from 'electron-updater';
 import log from 'electron-log';
-import config from './configs/app.config';
+import settings from 'electron-settings';
 import i18n from './configs/i18next.config';
 import signalingServer from './server';
 import MenuBuilder from './menu';
@@ -25,6 +25,8 @@ globalAny.appPath = __dirname;
 
 signalingServer.start();
 
+log.error(process.platform);
+
 export default class AppUpdater {
   constructor() {
     log.transports.file.level = 'info';
@@ -68,8 +70,13 @@ const createWindow = async () => {
 
   mainWindow = new BrowserWindow({
     show: false,
-    width: 1024,
-    height: 728,
+    width: 820,
+    height: 480,
+    // maxWidth: 820,
+    // maxHeight: 480,
+    minHeight: 400,
+    minWidth: 600,
+    titleBarStyle: 'hiddenInset',
     webPreferences:
       (process.env.NODE_ENV === 'development' ||
         process.env.E2E_BUILD === 'true') &&
@@ -115,8 +122,12 @@ const createWindow = async () => {
     if (mainWindow === null) return;
     menuBuilder = new MenuBuilder(mainWindow, i18n);
     menuBuilder.buildMenu();
-    mainWindow.webContents.send('sending-language-from-main', lng);
-    console.log(`Language changed! ${lng}`);
+    setTimeout(async () => {
+      if (lng !== 'en' && i18n.language !== lng) {
+        i18n.changeLanguage(lng);
+        await settings.set('appLanguage', lng);
+      }
+    }, 400);
   });
 
   // Remove this if your app does not use auto updates
@@ -154,15 +165,7 @@ ipcMain.handle('get-signaling-server-port', () => {
   mainWindow.webContents.send('sending-port-from-main', signalingServer.port);
 });
 
-// ipcMain.on('get-initial-translations', (event, arg) => {
-ipcMain.on('get-initial-translations', (event) => {
-  // i18n.loadLanguages('en', (err, t) => {
-  i18n.loadLanguages('en', () => {
-    const initial = {
-      en: {
-        translation: i18n.getResourceBundle('en', config.namespace),
-      },
-    };
-    event.returnValue = initial;
-  });
+ipcMain.on('client-changed-language', async (_, newLangCode) => {
+  i18n.changeLanguage(newLangCode);
+  await settings.set('appLanguage', newLangCode);
 });
diff --git a/app/main.prod.js.LICENSE.txt b/app/main.prod.js.LICENSE.txt
index 8aae89c..ce09505 100644
--- a/app/main.prod.js.LICENSE.txt
+++ b/app/main.prod.js.LICENSE.txt
@@ -305,3 +305,15 @@
  * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
  * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
  */
+
+/**
+ * @preserve
+ * JS Implementation of incremental MurmurHash3 (r150) (as of May 10, 2013)
+ *
+ * @author <a href="mailto:jensyt@gmail.com">Jens Taylor</a>
+ * @see http://github.com/homebrewing/brauhaus-diff
+ * @author <a href="mailto:gary.court@gmail.com">Gary Court</a>
+ * @see http://github.com/garycourt/murmurhash-js
+ * @author <a href="mailto:aappleby@gmail.com">Austin Appleby</a>
+ * @see http://sites.google.com/site/murmurhash/
+ */
diff --git a/app/menu.ts b/app/menu.ts
index 1b71b44..af8c17a 100644
--- a/app/menu.ts
+++ b/app/menu.ts
@@ -7,7 +7,7 @@ import {
   MenuItemConstructorOptions,
 } from 'electron';
 
-import config from './configs/app.config';
+import config from './configs/app.lang.config';
 
 import signalingServer from './server';
 
@@ -26,7 +26,7 @@ export default class MenuBuilder {
     this.i18n = i18n;
   }
 
-  buildMenu(): Menu {
+  buildMenu() {
     if (
       process.env.NODE_ENV === 'development' ||
       process.env.DEBUG_PROD === 'true'
@@ -34,15 +34,16 @@ export default class MenuBuilder {
       this.setupDevelopmentEnvironment();
     }
 
-    const template =
-      process.platform === 'darwin'
-        ? this.buildDarwinTemplate()
-        : this.buildDefaultTemplate();
-
-    const menu = Menu.buildFromTemplate(template);
-    Menu.setApplicationMenu(menu);
-
-    return menu;
+    if (process.platform === 'darwin') {
+      const menu = Menu.buildFromTemplate(this.buildDarwinTemplate());
+      Menu.setApplicationMenu(menu);
+    } else if (process.env.NODE_ENV === 'development') {
+      const menu = Menu.buildFromTemplate(this.buildDefaultTemplate());
+      Menu.setApplicationMenu(menu);
+    } else {
+      // for production, no menu for non MacOS app
+      Menu.setApplicationMenu(null);
+    }
   }
 
   setupDevelopmentEnvironment(): void {
diff --git a/app/package-lock.json b/app/package-lock.json
index 463dc90..6884e94 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -1,5 +1,5 @@
 {
   "name": "deskreen",
-  "version": "0.0.2-alpha",
+  "version": "0.0.3-alpha",
   "lockfileVersion": 1
 }
diff --git a/app/package.json b/app/package.json
index ceb6535..c78af61 100644
--- a/app/package.json
+++ b/app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "deskreen",
   "productName": "deskreen",
-  "version": "0.0.2-alpha",
+  "version": "0.0.3-alpha",
   "description": "TODO: write description about this project",
   "main": "./main.prod.js",
   "author": {
diff --git a/app/server/index.ts b/app/server/index.ts
index fd5a87f..549df9a 100644
--- a/app/server/index.ts
+++ b/app/server/index.ts
@@ -20,17 +20,10 @@ import pollForInactiveRooms from './inactiveRooms';
 import getStore from './store';
 
 import Logger from '../utils/logger';
+import isProduction from '../utils/isProduction';
 
 const log = new Logger('app/server/index.ts');
 
-let isDev;
-try {
-  // eslint-disable-next-line global-require
-  isDev = require('electron-is-dev');
-} catch (e) {
-  isDev = true;
-}
-
 const app = new Koa();
 
 const router = new Router();
@@ -54,9 +47,9 @@ function setStaticFileHeaders(
   });
 }
 
-const clientDistDirectory = isDev
-  ? `${__dirname}/../client/build`
-  : `${__dirname}/client/build`;
+const clientDistDirectory = isProduction()
+  ? `${__dirname}/client/build`
+  : `${__dirname}/../client/build`;
 
 if (clientDistDirectory) {
   app.use(async (ctx, next) => {
diff --git a/app/utils/isProduction.ts b/app/utils/isProduction.ts
new file mode 100644
index 0000000..61192a1
--- /dev/null
+++ b/app/utils/isProduction.ts
@@ -0,0 +1,8 @@
+export default function isProduction() {
+  return (
+    process.env.NODE_ENV === 'production' &&
+    process.env.RUN_MODE !== 'dev' &&
+    process.env.RUN_MODE !== 'test'
+  );
+  // return true; // for animations and other things debugging as in production mode
+}
diff --git a/package.json b/package.json
index b9a057d..e72e2f4 100644
--- a/package.json
+++ b/package.json
@@ -1,16 +1,20 @@
 {
   "name": "deskreen",
   "productName": "Deskreen",
-  "version": "0.0.2-alpha",
+  "version": "0.0.3-alpha",
   "description": "TODO: write description of this app",
   "scripts": {
     "build": "concurrently \"yarn build-main\" \"yarn build-renderer\" \"yarn build-client\"",
+    "build-test": "concurrently \"yarn build-main-test\" \"yarn build-renderer-test\" \"yarn build-client\"",
     "build-dll": "cross-env NODE_ENV=development webpack --config ./configs/webpack.config.renderer.dev.dll.babel.js --colors",
     "build-e2e": "cross-env E2E_BUILD=true yarn build",
+    "build-ux": "cross-env E2E_BUILD=true RUN_MODE=test yarn build-test",
     "build-main": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
+    "build-main-test": "cross-env RUN_MODE=test NODE_ENV=production webpack --config ./configs/webpack.config.main.prod.babel.js --colors",
     "build-renderer": "cross-env NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
+    "build-renderer-test": "cross-env RUN_MODE=test NODE_ENV=production webpack --config ./configs/webpack.config.renderer.prod.babel.js --colors",
     "build-client": "cd app/client && cross-env SKIP_PREFLIGHT_CHECK=true yarn build",
-    "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && concurrently \"cross-env START_HOT=1 yarn start-renderer-dev\" \"yarn start-client-dev\"",
+    "dev": "cross-env START_HOT=1 node -r @babel/register ./internals/scripts/CheckPortInUse.js && concurrently \"cross-env START_HOT=1 RUN_MODE=dev yarn start-renderer-dev\" \"yarn start-client-dev\"",
     "coverage": "cross-env BABEL_DISABLE_CACHE=1 jest --coverage && yarn coverage-client",
     "coverage-client": "cd app/client && cross-env SKIP_PREFLIGHT_CHECK=true cross-env BABEL_DISABLE_CACHE=1 yarn test -- --coverage --watchAll=false",
     "electron-rebuild": "electron-rebuild --parallel --force --types prod,dev,optional --module-dir app",
@@ -36,12 +40,15 @@
     "start-main-dev": "cross-env START_HOT=1 NODE_ENV=development electron -r ./internals/scripts/BabelRegister ./app/main.dev.ts",
     "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
     "start-client-dev": "cd app/client && cross-env SKIP_PREFLIGHT_CHECK=true yarn start",
-    "test": "cross-env BABEL_DISABLE_CACHE=1 jest && yarn test-client",
+    "test": "cross-env BABEL_DISABLE_CACHE=1 jest --silent && yarn test-client",
     "test-client": "cd app/client && cross-env BABEL_DISABLE_CACHE=1 SKIP_PREFLIGHT_CHECK=true yarn test:nowatch",
     "test-all": "yarn lint && yarn tsc && yarn build && yarn test",
     "test-e2e": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe electron:./app ./test/e2e/HomePage.e2e.ts",
     "test-e2e-live": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe --live electron:./app ./test/e2e/HomePage.e2e.ts",
-    "test-watch": "yarn test --watch",
+    "test-ux": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test RUN_MODE=test testcafe electron:./app ./test/ux/Stepper.ux.ts",
+    "test-ux-live": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test RUN_MODE=test testcafe --live electron:./app ./test/ux/Stepper.ux.ts",
+    "test-watch": "yarn jest --watch --silent",
+    "test-watch-no-silent": "yarn jest --watch",
     "sonar": "concurrently \"sonar-scanner\" \"cd app/client && sonar-scanner\" "
   },
   "lint-staged": {
@@ -184,7 +191,6 @@
     "testResultsProcessor": "jest-sonar-reporter"
   },
   "devDependencies": {
-    "@amilajack/testcafe-browser-provider-electron": "^0.0.15-alpha.1",
     "@babel/core": "^7.11.1",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/plugin-proposal-decorators": "^7.10.5",
@@ -209,6 +215,7 @@
     "@babel/preset-react": "^7.10.4",
     "@babel/preset-typescript": "^7.10.4",
     "@babel/register": "^7.10.5",
+    "@types/classnames": "^2.2.10",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
     "@types/express": "^4.17.7",
@@ -222,12 +229,15 @@
     "@types/koa-static": "^4.0.1",
     "@types/node": "12",
     "@types/node-forge": "^0.9.5",
+    "@types/qrcode.react": "^1.0.1",
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.8",
     "@types/react-redux": "^7.1.9",
     "@types/react-router": "^5.1.8",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-test-renderer": "^16.9.2",
+    "@types/react-toast-notifications": "^2.4.0",
+    "@types/react-toastify": "^4.1.0",
     "@types/redux-logger": "^3.0.8",
     "@types/shortid": "^0.0.29",
     "@types/socket.io": "^2.1.11",
@@ -289,7 +299,7 @@
     "stylelint-config-prettier": "^8.0.2",
     "stylelint-config-standard": "^20.0.0",
     "terser-webpack-plugin": "^3.0.7",
-    "testcafe": "^1.8.8",
+    "testcafe": "^1.9.2",
     "testcafe-browser-provider-electron": "^0.0.15",
     "testcafe-react-selectors": "^4.0.0",
     "ts-jest": "^26.1.4",
@@ -304,35 +314,47 @@
   },
   "dependencies": {
     "@blueprintjs/core": "^3.31.0",
+    "@blueprintjs/select": "^3.13.7",
     "@fortawesome/fontawesome-free": "^5.14.0",
     "@hot-loader/react-dom": "^16.13.0",
+    "@material-ui/core": "^4.11.0",
     "@reduxjs/toolkit": "^1.4.0",
     "axios": "^0.19.2",
+    "classnames": "^2.2.6",
+    "clsx": "^1.1.1",
     "connected-react-router": "^6.6.1",
     "electron-debug": "^3.1.0",
-    "electron-is-dev": "^1.2.0",
     "electron-log": "^4.2.2",
+    "electron-settings": "^4.0.2",
     "electron-updater": "^4.3.1",
     "express": "^4.17.1",
+    "fontsource-lexend-peta": "^3.0.9",
     "get-port": "^5.1.1",
     "history": "^4.7.2",
     "i18next": "^19.6.3",
     "i18next-fs-backend": "^1.0.7",
     "i18next-node-fs-backend": "^2.1.3",
     "i18next-sync-fs-backend": "^1.1.1",
+    "internal-ip": "^6.1.0",
     "kcors": "^2.2.2",
     "koa": "^2.13.0",
     "koa-router": "^9.4.0",
     "koa-send": "^5.0.1",
     "koa-static": "^5.0.0",
     "node-forge": "^0.9.1",
+    "qrcode.react": "^1.0.0",
     "react": "^16.13.1",
+    "react-awesome-reveal": "^3.2.1",
     "react-dom": "^16.12.0",
     "react-flexbox-grid": "^2.1.2",
     "react-hot-loader": "^4.12.21",
     "react-i18next": "^11.7.0",
+    "react-qrcode-logo": "^2.2.1",
     "react-redux": "^7.2.0",
+    "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
+    "react-toast-notifications": "^2.4.0",
+    "react-toastify": "^6.0.8",
     "redux": "^4.0.5",
     "redux-thunk": "^2.3.0",
     "regenerator-runtime": "^0.13.5",
diff --git a/test/e2e/HomePage.e2e.ts b/test/e2e/HomePage.e2e.ts
index fd95fa3..61cbec1 100644
--- a/test/e2e/HomePage.e2e.ts
+++ b/test/e2e/HomePage.e2e.ts
@@ -20,11 +20,11 @@ const assertNoConsoleErrors = async (t) => {
 fixture`Home Page`.page('../../app/app.html').afterEach(assertNoConsoleErrors);
 
 test('e2e', async (t) => {
-  await t.expect(getPageTitle()).eql('Hello Deskreen!');
+  await t.expect(getPageTitle()).eql('Deskreen');
 });
 
 test('should open window and contain expected page title', async (t) => {
-  await t.expect(getPageTitle()).eql('Hello Deskreen!');
+  await t.expect(getPageTitle()).eql('Deskreen');
 });
 
 test(
diff --git a/test/ux/Stepper.ux.ts b/test/ux/Stepper.ux.ts
new file mode 100644
index 0000000..8dfa59f
--- /dev/null
+++ b/test/ux/Stepper.ux.ts
@@ -0,0 +1,488 @@
+/* eslint jest/expect-expect: off, jest/no-test-callback: off */
+import { ClientFunction, Selector } from 'testcafe';
+
+const getPageTitle = ClientFunction(() => document.title);
+const assertNoConsoleErrors = async (t) => {
+  const { error } = await t.getBrowserConsoleMessages();
+  await t.expect(error).eql([]);
+};
+
+// Deskreen selectors
+const connectTestDeviceButton = Selector('button').withText(
+  'Connect Test Device'
+);
+const crossCloseDialogButton = Selector('svg').withAttribute(
+  'data-icon',
+  'cross'
+);
+const allowToConnectButton = Selector('button').withText('Allow');
+const denyToConnectButton = Selector('button').withText('Deny');
+const shareEntireScreenButton = Selector('button').withText('Entire Screen');
+const shareApplicationWindowButton = Selector('button').withText(
+  'Application Window'
+);
+const magnifyQRCodeButton = Selector('#magnify-qr-code-button');
+const largeQRCodeDialog = Selector('#qr-code-dialog-inner');
+const connectedInfoStepperButton = Selector(
+  '#connected-device-info-stepper-button'
+);
+const popoverDivWithDeviceIP = Selector(
+  '#connected-button-popover-div-with-ip'
+);
+const disconnectOneDeviceButton = Selector('button').withExactText(
+  'Disconnect'
+);
+const disconnectAllDevicesButton = Selector('button').withText(
+  'Disconnect all'
+);
+const reactToastNotificationsContainer = Selector(
+  '.react-toast-notifications__container'
+);
+const headerWithTextSelectEntireScreen = Selector('h3').withText(
+  'Select Entire Screen to Share'
+);
+const headerWithTextSelectAppWindow = Selector('h3').withText(
+  'Select App Window to Share'
+);
+const previewShareButton = Selector('.preview-share-thumb-container');
+const step3ConfirmButton = Selector('button').withText('Confirm');
+const noINeedToShareOtherThingButton = Selector('button').withText(
+  'No, I need to share other thing'
+);
+const step4ConnectNewDeviceButton = Selector('button').withText(
+  'Connect New Device'
+);
+const connectedDevicesButton = Selector(
+  '#top-panel-connected-devices-list-button'
+);
+const connectedDevicesHeader = Selector('.bp3-text-muted').withText(
+  'Connected Devices'
+);
+const getDeviceIPContainerByIP = (ip) =>
+  Selector('.device-ip-container').withText(ip);
+const yesDisconnectAllButton = Selector('button').withText(
+  'Yes, Disconnect All'
+);
+const settingsButtonOfTopPanel = Selector('span').withAttribute('icon', 'cog');
+const openedSettingsOverlay = Selector('#settings-overlay-inner');
+const darkColorAppSettingButton = Selector('button').withText('Dark');
+const lightColorAppSettingButton = Selector('button').withText('Light');
+const darkUIClassName = Selector('.bp3-dark');
+
+async function getConnectedDeviceIPFromAllowToConnectDeviceAlert() {
+  const deviceIPTextElement = Selector(
+    '#allow-connection-device-alert-device-ip-span'
+  );
+  const textWithIp = await deviceIPTextElement.innerText;
+  return textWithIp.trim();
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function connectTestDeviceAndGetIP(t) {
+  await t.click(connectTestDeviceButton());
+  return getConnectedDeviceIPFromAllowToConnectDeviceAlert();
+}
+
+async function connectTestDevice(t) {
+  await t.click(connectTestDeviceButton());
+}
+
+async function connectAndAllowTestDeviceAndGetIP(t) {
+  await connectTestDevice(t);
+  const ip = getConnectedDeviceIPFromAllowToConnectDeviceAlert();
+  await t.click(allowToConnectButton());
+  return ip;
+}
+
+async function connectAndAllowTestDevice(t) {
+  await connectTestDevice(t);
+  await t.click(allowToConnectButton());
+}
+
+async function openLargeQRCodeDialog(t) {
+  await t.click(magnifyQRCodeButton());
+}
+
+async function clickCrossButtonToCloseDialog(t) {
+  await t.click(crossCloseDialogButton());
+}
+
+async function openConnectedDeviceInfoPopover(t) {
+  await t.click(connectedInfoStepperButton());
+}
+
+async function goToStep3SharingEntireScreen(t) {
+  await connectAndAllowTestDevice(t);
+  await t.click(shareEntireScreenButton());
+  await t.click(previewShareButton());
+}
+
+async function goToStep3SharingAppWindow(t) {
+  await connectAndAllowTestDevice(t);
+  await t.click(shareApplicationWindowButton());
+  await t.click(previewShareButton());
+}
+
+async function goToStep4SharingAppWindow(t) {
+  await goToStep3SharingAppWindow(t);
+  await t.click(step3ConfirmButton());
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+async function goToStep4SharingEntireScreen(t) {
+  await goToStep3SharingEntireScreen(t);
+  await t.click(step3ConfirmButton());
+}
+
+async function connectDeviceSharingAppWindow(t) {
+  await goToStep4SharingAppWindow(t);
+}
+
+async function connectDeviceSharingAppWindowAndGetIP(t) {
+  const ip = await connectAndAllowTestDeviceAndGetIP(t);
+  await t.click(shareApplicationWindowButton());
+  await t.click(previewShareButton());
+  await t.click(step3ConfirmButton());
+  await t.click(step4ConnectNewDeviceButton());
+  return ip;
+}
+
+async function connectDeviceSharingEntireScreenAndGetIP(t) {
+  const ip = await connectAndAllowTestDeviceAndGetIP(t);
+  await t.click(shareEntireScreenButton());
+  await t.click(previewShareButton());
+  await t.click(step3ConfirmButton());
+  await t.click(step4ConnectNewDeviceButton());
+  return ip;
+}
+
+async function openConnectedDevicesListDrawer(t) {
+  await t.click(connectedDevicesButton());
+}
+
+fixture`Home Page`.page('../../app/app.html').afterEach(assertNoConsoleErrors);
+
+test(`when app is launched,
+
+  it should have correct app title as "Deskreen"`, async (t) => {
+  await t.expect(getPageTitle()).eql('Deskreen');
+});
+
+test(`when on Scan QR code step (step 1),
+  and when device is connected,
+
+  it should show alert with Allow or Deny buttons`, async (t) => {
+  await t.click(connectTestDeviceButton());
+
+  const allowButtonExists = allowToConnectButton().exists;
+  const denyButtonExists = denyToConnectButton().exists;
+  await t.expect(allowButtonExists).ok();
+  await t.expect(denyButtonExists).ok();
+});
+
+test(`when on Scan QR code step (step 1),
+  and when device is connected,
+  and when user pressed "Deny" button
+
+  it should close alert with Allow or Deny buttons`, async (t) => {
+  await connectTestDevice(t);
+  await t.click(denyToConnectButton());
+
+  const allowButtonExists = allowToConnectButton().exists;
+  const denyButtonExists = denyToConnectButton().exists;
+  await t.expect(allowButtonExists).notOk();
+  await t.expect(denyButtonExists).notOk();
+});
+
+test(`when on Scan QR code step (step 1),
+  and when device is connected,
+  and when user pressed "Allow" button,
+
+  it should go to "Share App or Screen" step (step 2)`, async (t) => {
+  await connectAndAllowTestDeviceAndGetIP(t);
+
+  const EntireScreenButtonExists = shareEntireScreenButton().exists;
+  const AppWindoScreenButtonExists = shareApplicationWindowButton().exists;
+  await t.expect(EntireScreenButtonExists).ok();
+  await t.expect(AppWindoScreenButtonExists).ok();
+});
+
+test(`when on Scan QR code step (step 1),
+  and when "Magnify QR code" button is clicked,
+
+  it should open large QR code overflow`, async (t) => {
+  await openLargeQRCodeDialog(t);
+
+  const largeQRCodeDialogExists = largeQRCodeDialog().exists;
+  await t.expect(largeQRCodeDialogExists).ok();
+});
+
+test(`when large QR overflow is opened,
+  and when user clicks cross button,
+
+  it should close large QR code overflow`, async (t) => {
+  await openLargeQRCodeDialog(t);
+  await clickCrossButtonToCloseDialog(t);
+
+  const largeQrCodeDialogExists = largeQRCodeDialog().exists;
+  await t.expect(largeQrCodeDialogExists).notOk();
+});
+
+test(`when on step 2,
+  and when device is connected,
+
+  it should show Connected (info) button in UI`, async (t) => {
+  await connectAndAllowTestDeviceAndGetIP(t);
+  const connectedInfoStepperButtonExists = connectedInfoStepperButton().exists;
+
+  await t.expect(connectedInfoStepperButtonExists).ok();
+});
+
+test(`when on step 2,
+  and when device is connected,
+  and when user clicked Connected (info) button of stepper panel,
+
+  it should show connected device popover with IP of connected device`, async (t) => {
+  const ip = await connectAndAllowTestDeviceAndGetIP(t);
+  await openConnectedDeviceInfoPopover(t);
+
+  const textWithIp = await popoverDivWithDeviceIP().innerText;
+  await t.expect(textWithIp.includes(ip)).ok();
+});
+
+test(`when on step 2,
+  and when user Clicks "Disconnect" button of
+  Connected (info) popover,
+
+  it should go back to Scan QR code step 1`, async (t) => {
+  await connectAndAllowTestDeviceAndGetIP(t);
+  await openConnectedDeviceInfoPopover(t);
+  await t.click(disconnectOneDeviceButton());
+
+  const magnifyQRCodeButtonExists = magnifyQRCodeButton().exists;
+  await t.expect(magnifyQRCodeButtonExists).ok();
+});
+
+test(`when on step 2,
+  and when user Clicks "Disconnect" button of
+  Connected (info) popover,
+
+  it should display react toast notification that device has been disconnected`, async (t) => {
+  await connectAndAllowTestDeviceAndGetIP(t);
+  await openConnectedDeviceInfoPopover(t);
+  await t.click(disconnectOneDeviceButton());
+
+  const toastText = await reactToastNotificationsContainer().innerText;
+  await t.expect(toastText !== '').ok();
+});
+
+test(`when on step 2,
+  and when user clicks "Share Entire Screen" button,
+
+  it should display "Select Entire Screen to Share" overlay`, async (t) => {
+  await connectAndAllowTestDeviceAndGetIP(t);
+  await t.click(shareEntireScreenButton());
+
+  const headerWithTextSelectEntireScreenExists = headerWithTextSelectEntireScreen()
+    .exists;
+  await t.expect(headerWithTextSelectEntireScreenExists).ok();
+});
+
+test(`when on step 2,
+  and when user clicks "Share Application Window" button,
+
+  it should display "Select App Window to Share" overlay`, async (t) => {
+  await connectAndAllowTestDeviceAndGetIP(t);
+  await t.click(shareApplicationWindowButton());
+
+  const headerWithTextSelectAppWindowExists = headerWithTextSelectAppWindow()
+    .exists;
+  await t.expect(headerWithTextSelectAppWindowExists).ok();
+});
+
+test(`when on step 2,
+  and when user clicks "Share Entire Screen" button,
+  and when user clicks on previev button,
+
+  it should go to step 3 and display a "Confirm" button`, async (t) => {
+  await goToStep3SharingEntireScreen(t);
+
+  const step3ConfirmButtonExists = step3ConfirmButton().exists;
+  await t.expect(step3ConfirmButtonExists).ok();
+});
+
+test(`when on step 2,
+  and when user clicks "Share Application Window" button,
+  and when user clicks on previev button,
+
+  it should go to step 3 and display a "Confirm" button`, async (t) => {
+  await goToStep3SharingAppWindow(t);
+
+  const step3ConfirmButtonExists = step3ConfirmButton().exists;
+  await t.expect(step3ConfirmButtonExists).ok();
+});
+
+test(`when on step 3,
+  and when user clicks "No, I need to share other thing" button,
+
+  it should go back to step 2 and display a OR button group`, async (t) => {
+  await goToStep3SharingAppWindow(t);
+  await t.click(noINeedToShareOtherThingButton());
+
+  const EntireScreenButtonExists = shareEntireScreenButton().exists;
+  const AppWindoScreenButtonExists = shareApplicationWindowButton().exists;
+  await t.expect(EntireScreenButtonExists).ok();
+  await t.expect(AppWindoScreenButtonExists).ok();
+});
+
+test(`when on step 3,
+  and when user clicks "Confirm" button,
+
+  it should go back to step 4 (Success Step) and display a "Connect New Device" button`, async (t) => {
+  await goToStep3SharingAppWindow(t);
+  await t.click(step3ConfirmButton());
+
+  const ConnectNewDeviceButtonExists = step4ConnectNewDeviceButton().exists;
+  await t.expect(ConnectNewDeviceButtonExists).ok();
+});
+
+test(`when on step 4 (Success Step),
+  and when user clicks "Connect New Device" button,
+
+  it should go back to step 1 and display a QR code`, async (t) => {
+  await goToStep4SharingAppWindow(t);
+  await t.click(step4ConnectNewDeviceButton());
+
+  const MagnifyQRCodeButtonExists = magnifyQRCodeButton().exists;
+  await t.expect(MagnifyQRCodeButtonExists).ok();
+});
+
+test(`when device is connected,
+  and when "Connected Devices List" drawer is opened",
+
+  it should open "Connected Devices List" panel`, async (t) => {
+  await connectDeviceSharingAppWindow(t);
+  await t.click(connectedDevicesButton());
+
+  const ConnectedDevicesHeaderExists = connectedDevicesHeader().exists;
+  await t.expect(ConnectedDevicesHeaderExists).ok();
+});
+
+test(`when on step 4 (Success Step),
+  and when user clicks "Connected Devices" button,
+
+  it should open "Connected Devices List" panel with a connected device listed in it`, async (t) => {
+  const ip = await connectDeviceSharingAppWindowAndGetIP(t);
+  await openConnectedDevicesListDrawer(t);
+
+  await t.expect(getDeviceIPContainerByIP(ip).exists).ok();
+});
+
+test(`when multiple devices are connected,
+  and when user clicks "Connected Devices" button,
+  and when "Connected Devices List" drawer is opened,
+
+  it should list all connected devices with IPs in "Connected Devices List" drawer`, async (t) => {
+  const ipOne = await connectDeviceSharingAppWindowAndGetIP(t);
+  const ipTwo = await connectDeviceSharingAppWindowAndGetIP(t);
+  const ipThree = await connectDeviceSharingEntireScreenAndGetIP(t);
+  const ipFour = await connectDeviceSharingEntireScreenAndGetIP(t);
+
+  await openConnectedDevicesListDrawer(t);
+
+  await t.expect(getDeviceIPContainerByIP(ipOne).exists).ok();
+  await t.expect(getDeviceIPContainerByIP(ipTwo).exists).ok();
+  await t.expect(getDeviceIPContainerByIP(ipThree).exists).ok();
+  await t.expect(getDeviceIPContainerByIP(ipFour).exists).ok();
+});
+
+test(`when device is connected,
+  and when "Connected Devices List" drawer is opened,
+  and when user clicks "Disconnect" button of just connected device,
+
+  it should remove a device from connected devices list drawer`, async (t) => {
+  const ip = await connectDeviceSharingAppWindowAndGetIP(t);
+  await openConnectedDevicesListDrawer(t);
+  await t.click(disconnectOneDeviceButton());
+
+  await t.expect(getDeviceIPContainerByIP(ip).exists).notOk();
+});
+
+test(`when multiple devices are connected,
+  and when "Connected Devices List" drawer is opened,
+  and when user clicked "Disconnect all" button,
+  and when user clicked "Yes, Disconnect All" button in alert,
+  and when "Connected Devices List" drawer is opened again,
+
+  it should remove remove all devices from "Connected Devices List" drawer`, async (t) => {
+  const ipOne = await connectDeviceSharingAppWindowAndGetIP(t);
+  const ipTwo = await connectDeviceSharingAppWindowAndGetIP(t);
+  const ipThree = await connectDeviceSharingEntireScreenAndGetIP(t);
+  const ipFour = await connectDeviceSharingEntireScreenAndGetIP(t);
+  await openConnectedDevicesListDrawer(t);
+  await t.click(disconnectAllDevicesButton());
+  await t.click(yesDisconnectAllButton());
+
+  await openConnectedDevicesListDrawer(t);
+
+  await t.expect(getDeviceIPContainerByIP(ipOne).exists).notOk();
+  await t.expect(getDeviceIPContainerByIP(ipTwo).exists).notOk();
+  await t.expect(getDeviceIPContainerByIP(ipThree).exists).notOk();
+  await t.expect(getDeviceIPContainerByIP(ipFour).exists).notOk();
+});
+
+test(`when device is connected,
+  and when user is on "Success" step, (step 4),
+  and when "Connected Devices List" drawer is opened,
+  and when user clicked "Disconnect all" button,
+  and when user clicked "Yes, Disconnect All" in alert,
+
+  it should go back to Scan QR code step`, async (t) => {
+  await goToStep4SharingAppWindow(t);
+  await openConnectedDevicesListDrawer(t);
+  await t.click(disconnectAllDevicesButton());
+  await t.click(yesDisconnectAllButton());
+
+  await t.expect(magnifyQRCodeButton().exists).ok();
+});
+
+test(`when device is connected,
+  and when user clicks "Connected Devices List" drawer is opened,
+  and when user clicks "Disconnect all" button of connected device
+
+  it should display "Are you sure you want to disconnect all devices..." alert`, async (t) => {
+  await connectDeviceSharingAppWindowAndGetIP(t);
+  await openConnectedDevicesListDrawer(t);
+  await t.click(Selector('button').withText('Disconnect all'));
+
+  await t.expect(yesDisconnectAllButton().exists).ok();
+});
+
+/*
+  //////////////////////////////////////////////////
+  /////////// SETTINGS OVERLAY TESTING START ///////
+  //////////////////////////////////////////////////
+*/
+
+test(`when clicks "Settings" button of top panel,
+
+  it should open "Settings" panel`, async (t) => {
+  await t.click(settingsButtonOfTopPanel());
+
+  await t.expect(openedSettingsOverlay().exists).ok();
+});
+
+test(`when "Settings" Panel is opened,
+  and when user clicks "Dark" and "Light" buttons,
+
+  it should change application colors accordingly`, async (t) => {
+  await t.click(settingsButtonOfTopPanel());
+
+  // action and assertion 1
+  await t.click(darkColorAppSettingButton());
+  await t.expect(darkUIClassName().exists).ok();
+
+  // action and assertion 2
+  await t.click(lightColorAppSettingButton());
+  await t.expect(darkUIClassName().exists).notOk();
+});
diff --git a/yarn.lock b/yarn.lock
index dd760dc..bbf1583 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12,25 +12,6 @@
   resolved "https://packages.deskreen.com/7zip/-/7zip-0.0.6.tgz#9cafb171af82329490353b4816f03347aa150a30"
   integrity sha1-nK+xca+CMpSQNTtIFvAzR6oVCjA=
 
-"@amilajack/testcafe-browser-provider-electron@^0.0.15-alpha.1":
-  version "0.0.15-alpha.1"
-  resolved "https://packages.deskreen.com/@amilajack%2ftestcafe-browser-provider-electron/-/testcafe-browser-provider-electron-0.0.15-alpha.1.tgz#506080ec623c1509fae489b13cb2a2894ec6fbb9"
-  integrity sha512-05JwzcV59rxArehDWPM0Lw4YNvVr5c3J/j2ikJeQKHAQSoA0TsRSdqSMjGDaT8LGem0HAATPLh7hRhI481alIQ==
-  dependencies:
-    babel-runtime "^6.25.0"
-    chrome-remote-interface "^0.27.0"
-    debug "4.1.1"
-    dedent "^0.7.0"
-    endpoint-utils "^1.0.2"
-    lodash "^4.17.4"
-    mustache "^2.3.0"
-    node-ipc "^9.1.0"
-    os-family "^1.0.0"
-    pify "^2.3.0"
-    pinkie "^2.0.4"
-    promisify-event "^1.0.0"
-    proxyquire "^1.7.10"
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4":
   version "7.10.4"
   resolved "https://packages.deskreen.com/@babel%2fcode-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a"
@@ -188,7 +169,7 @@
   dependencies:
     "@babel/types" "^7.11.0"
 
-"@babel/helper-module-imports@^7.10.4":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.10.4":
   version "7.10.4"
   resolved "https://packages.deskreen.com/@babel%2fhelper-module-imports/-/helper-module-imports-7.10.4.tgz#4c5c54be04bd31670a7382797d75b9fa2e5b5620"
   integrity sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==
@@ -1093,7 +1074,7 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.11.2"
   resolved "https://packages.deskreen.com/@babel%2fruntime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
   integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==
@@ -1163,6 +1144,15 @@
     classnames "^2.2"
     tslib "~1.13.0"
 
+"@blueprintjs/select@^3.13.7":
+  version "3.13.7"
+  resolved "https://packages.deskreen.com/@blueprintjs%2fselect/-/select-3.13.7.tgz#166675a8caeccacdb31216e92ef114f29888dbf6"
+  integrity sha512-kJVtbDDGVwIIC1+cN7H0DUrlumSVZGNEq2CnczQNI07RkHpPzuIR5stjn3LU+NjtCa3pidPNr4w78JRTesZzLg==
+  dependencies:
+    "@blueprintjs/core" "^3.31.0"
+    classnames "^2.2"
+    tslib "~1.13.0"
+
 "@cnakazawa/watch@^1.0.3":
   version "1.0.4"
   resolved "https://packages.deskreen.com/@cnakazawa%2fwatch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
@@ -1204,6 +1194,108 @@
     global-agent "^2.0.2"
     global-tunnel-ng "^2.7.1"
 
+"@emotion/cache@^10.0.27":
+  version "10.0.29"
+  resolved "https://packages.deskreen.com/@emotion%2fcache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
+  integrity sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==
+  dependencies:
+    "@emotion/sheet" "0.9.4"
+    "@emotion/stylis" "0.8.5"
+    "@emotion/utils" "0.11.3"
+    "@emotion/weak-memoize" "0.2.5"
+
+"@emotion/core@^10.0.14", "@emotion/core@^10.0.35":
+  version "10.0.35"
+  resolved "https://packages.deskreen.com/@emotion%2fcore/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3"
+  integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/cache" "^10.0.27"
+    "@emotion/css" "^10.0.27"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/sheet" "0.9.4"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/css@^10.0.27":
+  version "10.0.27"
+  resolved "https://packages.deskreen.com/@emotion%2fcss/-/css-10.0.27.tgz#3a7458198fbbebb53b01b2b87f64e5e21241e14c"
+  integrity sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==
+  dependencies:
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0":
+  version "0.8.0"
+  resolved "https://packages.deskreen.com/@emotion%2fhash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+  integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
+"@emotion/is-prop-valid@0.8.8":
+  version "0.8.8"
+  resolved "https://packages.deskreen.com/@emotion%2fis-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://packages.deskreen.com/@emotion%2fmemoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
+"@emotion/serialize@^0.11.15", "@emotion/serialize@^0.11.16":
+  version "0.11.16"
+  resolved "https://packages.deskreen.com/@emotion%2fserialize/-/serialize-0.11.16.tgz#dee05f9e96ad2fb25a5206b6d759b2d1ed3379ad"
+  integrity sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==
+  dependencies:
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/unitless" "0.7.5"
+    "@emotion/utils" "0.11.3"
+    csstype "^2.5.7"
+
+"@emotion/sheet@0.9.4":
+  version "0.9.4"
+  resolved "https://packages.deskreen.com/@emotion%2fsheet/-/sheet-0.9.4.tgz#894374bea39ec30f489bbfc3438192b9774d32e5"
+  integrity sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==
+
+"@emotion/styled-base@^10.0.27":
+  version "10.0.31"
+  resolved "https://packages.deskreen.com/@emotion%2fstyled-base/-/styled-base-10.0.31.tgz#940957ee0aa15c6974adc7d494ff19765a2f742a"
+  integrity sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    "@emotion/is-prop-valid" "0.8.8"
+    "@emotion/serialize" "^0.11.15"
+    "@emotion/utils" "0.11.3"
+
+"@emotion/styled@^10.0.27":
+  version "10.0.27"
+  resolved "https://packages.deskreen.com/@emotion%2fstyled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf"
+  integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==
+  dependencies:
+    "@emotion/styled-base" "^10.0.27"
+    babel-plugin-emotion "^10.0.27"
+
+"@emotion/stylis@0.8.5":
+  version "0.8.5"
+  resolved "https://packages.deskreen.com/@emotion%2fstylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
+  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+
+"@emotion/unitless@0.7.5":
+  version "0.7.5"
+  resolved "https://packages.deskreen.com/@emotion%2funitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@0.11.3":
+  version "0.11.3"
+  resolved "https://packages.deskreen.com/@emotion%2futils/-/utils-0.11.3.tgz#a759863867befa7e583400d322652a3f44820924"
+  integrity sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==
+
+"@emotion/weak-memoize@0.2.5":
+  version "0.2.5"
+  resolved "https://packages.deskreen.com/@emotion%2fweak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
 "@fortawesome/fontawesome-free@^5.14.0":
   version "5.14.0"
   resolved "https://packages.deskreen.com/@fortawesome%2ffontawesome-free/-/fontawesome-free-5.14.0.tgz#a371e91029ebf265015e64f81bfbf7d228c9681f"
@@ -1416,6 +1508,70 @@
     "@types/yargs" "^15.0.0"
     chalk "^4.0.0"
 
+"@material-ui/core@^4.11.0":
+  version "4.11.0"
+  resolved "https://packages.deskreen.com/@material-ui%2fcore/-/core-4.11.0.tgz#b69b26e4553c9e53f2bfaf1053e216a0af9be15a"
+  integrity sha512-bYo9uIub8wGhZySHqLQ833zi4ZML+XCBE1XwJ8EuUVSpTWWG57Pm+YugQToJNFsEyiKFhPh8DPD0bgupz8n01g==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/styles" "^4.10.0"
+    "@material-ui/system" "^4.9.14"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.10.2"
+    "@types/react-transition-group" "^4.2.0"
+    clsx "^1.0.4"
+    hoist-non-react-statics "^3.3.2"
+    popper.js "1.16.1-lts"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+    react-transition-group "^4.4.0"
+
+"@material-ui/styles@^4.10.0":
+  version "4.10.0"
+  resolved "https://packages.deskreen.com/@material-ui%2fstyles/-/styles-4.10.0.tgz#2406dc23aa358217aa8cc772e6237bd7f0544071"
+  integrity sha512-XPwiVTpd3rlnbfrgtEJ1eJJdFCXZkHxy8TrdieaTvwxNYj42VnnCyFzxYeNW9Lhj4V1oD8YtQ6S5Gie7bZDf7Q==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@emotion/hash" "^0.8.0"
+    "@material-ui/types" "^5.1.0"
+    "@material-ui/utils" "^4.9.6"
+    clsx "^1.0.4"
+    csstype "^2.5.2"
+    hoist-non-react-statics "^3.3.2"
+    jss "^10.0.3"
+    jss-plugin-camel-case "^10.0.3"
+    jss-plugin-default-unit "^10.0.3"
+    jss-plugin-global "^10.0.3"
+    jss-plugin-nested "^10.0.3"
+    jss-plugin-props-sort "^10.0.3"
+    jss-plugin-rule-value-function "^10.0.3"
+    jss-plugin-vendor-prefixer "^10.0.3"
+    prop-types "^15.7.2"
+
+"@material-ui/system@^4.9.14":
+  version "4.9.14"
+  resolved "https://packages.deskreen.com/@material-ui%2fsystem/-/system-4.9.14.tgz#4b00c48b569340cefb2036d0596b93ac6c587a5f"
+  integrity sha512-oQbaqfSnNlEkXEziDcJDDIy8pbvwUmZXWNqlmIwDqr/ZdCK8FuV3f4nxikUh7hvClKV2gnQ9djh5CZFTHkZj3w==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    "@material-ui/utils" "^4.9.6"
+    csstype "^2.5.2"
+    prop-types "^15.7.2"
+
+"@material-ui/types@^5.1.0":
+  version "5.1.0"
+  resolved "https://packages.deskreen.com/@material-ui%2ftypes/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.10.2", "@material-ui/utils@^4.9.6":
+  version "4.10.2"
+  resolved "https://packages.deskreen.com/@material-ui%2futils/-/utils-4.10.2.tgz#3fd5470ca61b7341f1e0468ac8f29a70bf6df321"
+  integrity sha512-eg29v74P7W5r6a4tWWDAAfZldXIzfyO1am2fIsC39hdUUHm/33k6pGOKPbgDjg/U/4ifmgAePy/1OjkKN6rFRw==
+  dependencies:
+    "@babel/runtime" "^7.4.4"
+    prop-types "^15.7.2"
+    react-is "^16.8.0"
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://packages.deskreen.com/@mrmlnc%2freaddir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -1568,6 +1724,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/classnames@^2.2.10":
+  version "2.2.10"
+  resolved "https://packages.deskreen.com/@types%2fclassnames/-/classnames-2.2.10.tgz#cc658ca319b6355399efc1f5b9e818f1a24bf999"
+  integrity sha512-1UzDldn9GfYYEsWWnn/P4wkTlkZDH7lDb0wBMGbtIQc9zXEQq7FlKBdZUn6OBqD8sKZZ2RQO2mAjGpXiDGoRmQ==
+
 "@types/color-name@^1.1.1":
   version "1.1.1"
   resolved "https://packages.deskreen.com/@types%2fcolor-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
@@ -1880,6 +2041,13 @@
   resolved "https://packages.deskreen.com/@types%2fq/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
+"@types/qrcode.react@^1.0.1":
+  version "1.0.1"
+  resolved "https://packages.deskreen.com/@types%2fqrcode.react/-/qrcode.react-1.0.1.tgz#0904e7a075a6274a5258f19567b4f64013c159d8"
+  integrity sha512-PcVCjpsiT2KFKfJibOgTQtkt0QQT/6GbQUp1Np/hMPhwUzMJ2DRUkR9j7tXN9Q8X06qukw+RbaJ8lJ22SBod+Q==
+  dependencies:
+    "@types/react" "*"
+
 "@types/qs@*":
   version "6.9.4"
   resolved "https://packages.deskreen.com/@types%2fqs/-/qs-6.9.4.tgz#a59e851c1ba16c0513ea123830dd639a0a15cb6a"
@@ -1931,6 +2099,27 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-toast-notifications@^2.4.0":
+  version "2.4.0"
+  resolved "https://packages.deskreen.com/@types%2freact-toast-notifications/-/react-toast-notifications-2.4.0.tgz#0ca0732cfae5a6ef5939a676fffac6e64c78bc25"
+  integrity sha512-nBI6gQ0E5gwi3IcTrVOR3oKoMGRfH1gK67kI6RIKUmiV5Sc3ZC/eymYBFt6iDo0dhlYET6kdtR0tcUh9h5L0sQ==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-toastify@^4.1.0":
+  version "4.1.0"
+  resolved "https://packages.deskreen.com/@types%2freact-toastify/-/react-toastify-4.1.0.tgz#604e712855dd677916d5c66af595d3b590f5d95d"
+  integrity sha512-u7Ie/7LHBsPVz/iJxi/WlRDS7Gh9csCJACTDXx+pSLuZCm94xpkwzhM3jV1L5ZxP/in0Gp2tFbJ91VrSGr1gyQ==
+  dependencies:
+    react-toastify "*"
+
+"@types/react-transition-group@^4.2.0":
+  version "4.4.0"
+  resolved "https://packages.deskreen.com/@types%2freact-transition-group/-/react-transition-group-4.4.0.tgz#882839db465df1320e4753e6e9f70ca7e9b4d46d"
+  integrity sha512-/QfLHGpu+2fQOqQaXh8MG9q03bFENooTb/it4jr5kKaZlDQfWvjqWZg48AwzPVMBHlRuTRAY7hRHCEOXz5kV6w==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.44":
   version "16.9.48"
   resolved "https://packages.deskreen.com/@types%2freact/-/react-16.9.48.tgz#d3387329f070d1b1bc0ff4a54a54ceefd5a8485c"
@@ -3077,6 +3266,22 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+babel-plugin-emotion@^10.0.27:
+  version "10.0.33"
+  resolved "https://packages.deskreen.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz#ce1155dcd1783bbb9286051efee53f4e2be63e03"
+  integrity sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.0.0"
+    "@emotion/hash" "0.8.0"
+    "@emotion/memoize" "0.7.4"
+    "@emotion/serialize" "^0.11.16"
+    babel-plugin-macros "^2.0.0"
+    babel-plugin-syntax-jsx "^6.18.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^1.0.5"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+
 babel-plugin-istanbul@^6.0.0:
   version "6.0.0"
   resolved "https://packages.deskreen.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.0.0.tgz#e159ccdc9af95e0b570c75b4573b7c34d671d765"
@@ -3098,6 +3303,15 @@ babel-plugin-jest-hoist@^26.2.0:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-macros@^2.0.0:
+  version "2.8.0"
+  resolved "https://packages.deskreen.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://packages.deskreen.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -3133,7 +3347,7 @@ babel-plugin-syntax-flow@^6.18.0:
   resolved "https://packages.deskreen.com/babel-plugin-syntax-flow/-/babel-plugin-syntax-flow-6.18.0.tgz#4c3ab20a2af26aa20cd25995c398c4eb70310c8d"
   integrity sha1-TDqyCiryaqIM0lmVw5jE63AxDI0=
 
-babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
+babel-plugin-syntax-jsx@^6.18.0, babel-plugin-syntax-jsx@^6.3.13, babel-plugin-syntax-jsx@^6.8.0:
   version "6.18.0"
   resolved "https://packages.deskreen.com/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz#0af32a9a6e13ca7a3fd5069e62d7b0f58d0d8946"
   integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
@@ -4426,7 +4640,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2:
+classnames@^2.2, classnames@^2.2.6:
   version "2.2.6"
   resolved "https://packages.deskreen.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
@@ -4514,6 +4728,11 @@ clone@^1.0.2:
   resolved "https://packages.deskreen.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
+clsx@^1.0.4, clsx@^1.1.1:
+  version "1.1.1"
+  resolved "https://packages.deskreen.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+  integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://packages.deskreen.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4798,7 +5017,7 @@ content-type@^1.0.4, content-type@~1.0.4:
   resolved "https://packages.deskreen.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.5.1, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.7.0"
   resolved "https://packages.deskreen.com/convert-source-map/-/convert-source-map-1.7.0.tgz#17a2cb882d7f77d3490585e2ce6c524424a3a442"
   integrity sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==
@@ -5081,6 +5300,14 @@ css-tree@1.0.0-alpha.39:
     mdn-data "2.0.6"
     source-map "^0.6.1"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://packages.deskreen.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@2.1:
   version "2.1.3"
   resolved "https://packages.deskreen.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -5198,6 +5425,11 @@ cssstyle@^2.2.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^2.5.2, csstype@^2.5.7:
+  version "2.6.13"
+  resolved "https://packages.deskreen.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f"
+  integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A==
+
 csstype@^3.0.2:
   version "3.0.3"
   resolved "https://packages.deskreen.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8"
@@ -5364,6 +5596,13 @@ default-gateway@^4.2.0:
     execa "^1.0.0"
     ip-regex "^2.1.0"
 
+default-gateway@^6.0.0:
+  version "6.0.2"
+  resolved "https://packages.deskreen.com/default-gateway/-/default-gateway-6.0.2.tgz#fc14f4a2ae1cbc699c2b40cedd941ab312609ea4"
+  integrity sha512-bWrj9HZWNXJ/RUkWmBIp67JawNrPGz0il43IGWU84dazEYbNFQ52HbIiqgRQdYUHK3RyGrENrDV9QkwArt6IAQ==
+  dependencies:
+    execa "^4.0.3"
+
 defaults@^1.0.3:
   version "1.0.3"
   resolved "https://packages.deskreen.com/defaults/-/defaults-1.0.3.tgz#c656051e9817d9ff08ed881477f3fe4019f3ef7d"
@@ -5621,6 +5860,14 @@ dom-helpers@^3.4.0:
   dependencies:
     "@babel/runtime" "^7.1.2"
 
+dom-helpers@^5.0.1:
+  version "5.2.0"
+  resolved "https://packages.deskreen.com/dom-helpers/-/dom-helpers-5.2.0.tgz#57fd054c5f8f34c52a3eeffdb7e7e93cd357d95b"
+  integrity sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://packages.deskreen.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5802,7 +6049,7 @@ electron-is-accelerator@^0.1.0:
   resolved "https://packages.deskreen.com/electron-is-accelerator/-/electron-is-accelerator-0.1.2.tgz#509e510c26a56b55e17f863a4b04e111846ab27b"
   integrity sha1-UJ5RDCala1Xhf4Y6SwThEYRqsns=
 
-electron-is-dev@^1.1.0, electron-is-dev@^1.2.0:
+electron-is-dev@^1.1.0:
   version "1.2.0"
   resolved "https://packages.deskreen.com/electron-is-dev/-/electron-is-dev-1.2.0.tgz#2e5cea0a1b3ccf1c86f577cee77363ef55deb05e"
   integrity sha512-R1oD5gMBPS7PVU8gJwH6CtT0e6VSoD0+SzSnYpNm+dBkcijgA+K7VAMHDfnRq/lkKPZArpzplTW6jfiMYosdzw==
@@ -5851,6 +6098,18 @@ electron-rebuild@^1.10.0:
     spawn-rx "^3.0.0"
     yargs "^14.2.0"
 
+electron-settings@^4.0.2:
+  version "4.0.2"
+  resolved "https://packages.deskreen.com/electron-settings/-/electron-settings-4.0.2.tgz#26ef242397393e0e69119f6fb879fc2287d0f508"
+  integrity sha512-WnUlrnBsO784oXcag0ym+A3ySoIwonz5GhYFsWroMHVzslzmsP+81f/Fof41T9UrRUxuPPKiZPZMwGO+yvWChg==
+  dependencies:
+    lodash.get "^4.4.2"
+    lodash.has "^4.5.2"
+    lodash.set "^4.3.2"
+    lodash.unset "^4.5.2"
+    mkdirp "^1.0.4"
+    write-file-atomic "^3.0.3"
+
 electron-to-chromium@^1.3.47, electron-to-chromium@^1.3.523:
   version "1.3.555"
   resolved "https://packages.deskreen.com/electron-to-chromium/-/electron-to-chromium-1.3.555.tgz#a096716ff77cf8da9a608eb628fd6927869503d2"
@@ -7005,6 +7264,11 @@ follow-redirects@^1.0.0:
   resolved "https://packages.deskreen.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
   integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
 
+fontsource-lexend-peta@^3.0.9:
+  version "3.0.9"
+  resolved "https://packages.deskreen.com/fontsource-lexend-peta/-/fontsource-lexend-peta-3.0.9.tgz#c11994728d50d95a348b6f87926c6eb1c086c892"
+  integrity sha512-pqOcFyjC8RkZcSC9EoXLk2fb2HssgWcvMREk7DvNJInWP+v3/htZaQjlF1el6EQoVuOx9lJwNxqqNiQvW3B8/w==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://packages.deskreen.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80"
@@ -7626,7 +7890,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://packages.deskreen.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -7858,6 +8122,11 @@ husky@^4.2.5:
     slash "^3.0.0"
     which-pm-runs "^1.0.0"
 
+hyphenate-style-name@^1.0.3:
+  version "1.0.4"
+  resolved "https://packages.deskreen.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
 i18next-fs-backend@^1.0.7:
   version "1.0.7"
   resolved "https://packages.deskreen.com/i18next-fs-backend/-/i18next-fs-backend-1.0.7.tgz#00ca4587e306f8948740408389dda73461a5d07f"
@@ -8063,6 +8332,14 @@ internal-ip@^4.3.0:
     default-gateway "^4.2.0"
     ipaddr.js "^1.9.0"
 
+internal-ip@^6.1.0:
+  version "6.1.0"
+  resolved "https://packages.deskreen.com/internal-ip/-/internal-ip-6.1.0.tgz#3ce3a9155dc9e2a423af0059efcf5f4b0de3399c"
+  integrity sha512-Cs1iaqrl3z3KJ2ejWyfKkMcuv9NTEJWXtUBSGVc+Eg9BjBLS0k11CsOkf/p5quOkVhhRuq9zwZ/PuJpPUuDP9Q==
+  dependencies:
+    default-gateway "^6.0.0"
+    ipaddr.js "^1.9.1"
+
 internal-slot@^1.0.2:
   version "1.0.2"
   resolved "https://packages.deskreen.com/internal-slot/-/internal-slot-1.0.2.tgz#9c2e9fb3cd8e5e4256c6f45fe310067fcfa378a3"
@@ -8094,7 +8371,7 @@ ip@^1.1.0, ip@^1.1.3, ip@^1.1.5:
   resolved "https://packages.deskreen.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
+ipaddr.js@1.9.1, ipaddr.js@^1.9.0, ipaddr.js@^1.9.1:
   version "1.9.1"
   resolved "https://packages.deskreen.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
@@ -8353,6 +8630,11 @@ is-hexadecimal@^1.0.0:
   resolved "https://packages.deskreen.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://packages.deskreen.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
 is-installed-globally@^0.3.1:
   version "0.3.2"
   resolved "https://packages.deskreen.com/is-installed-globally/-/is-installed-globally-0.3.2.tgz#fd3efa79ee670d1187233182d5b0a1dd00313141"
@@ -9243,6 +9525,76 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
+jss-plugin-camel-case@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.4.0.tgz#46c75ff7fd61c304984c21af5817823f0f501ceb"
+  integrity sha512-9oDjsQ/AgdBbMyRjc06Kl3P8lDCSEts2vYZiPZfGAxbGCegqE4RnMob3mDaBby5H9vL9gWmyyImhLRWqIkRUCw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.4.0"
+
+jss-plugin-default-unit@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.4.0.tgz#2b10f01269eaea7f36f0f5fd1cfbfcc76ed42854"
+  integrity sha512-BYJ+Y3RUYiMEgmlcYMLqwbA49DcSWsGgHpVmEEllTC8MK5iJ7++pT9TnKkKBnNZZxTV75ycyFCR5xeLSOzVm4A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.4.0"
+
+jss-plugin-global@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-global/-/jss-plugin-global-10.4.0.tgz#19449425a94e4e74e113139b629fd44d3577f97d"
+  integrity sha512-b8IHMJUmv29cidt3nI4bUI1+Mo5RZE37kqthaFpmxf5K7r2aAegGliAw4hXvA70ca6ckAoXMUl4SN/zxiRcRag==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.4.0"
+
+jss-plugin-nested@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-nested/-/jss-plugin-nested-10.4.0.tgz#017d0c02c0b6b454fd9d7d3fc33470a15eea9fd1"
+  integrity sha512-cKgpeHIxAP0ygeWh+drpLbrxFiak6zzJ2toVRi/NmHbpkNaLjTLgePmOz5+67ln3qzJiPdXXJB1tbOyYKAP4Pw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.4.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.4.0.tgz#7110bf0b6049cc2080b220b506532bf0b70c0e07"
+  integrity sha512-j/t0R40/2fp+Nzt6GgHeUFnHVY2kPGF5drUVlgkcwYoHCgtBDOhTTsOfdaQFW6sHWfoQYgnGV4CXdjlPiRrzwA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.4.0"
+
+jss-plugin-rule-value-function@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.4.0.tgz#7cff4a91e84973536fa49b6ebbdbf7f339b01c82"
+  integrity sha512-w8504Cdfu66+0SJoLkr6GUQlEb8keHg8ymtJXdVHWh0YvFxDG2l/nS93SI5Gfx0fV29dO6yUugXnKzDFJxrdFQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.4.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.4.0.tgz#2a78f3c5d57d1e024fe7ad7c41de34d04e72ecc0"
+  integrity sha512-DpF+/a+GU8hMh/948sBGnKSNfKkoHg2p9aRFUmyoyxgKjOeH9n74Ht3Yt8lOgdZsuWNJbPrvaa3U4PXKwxVpTQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.4.0"
+
+jss@10.4.0, jss@^10.0.3:
+  version "10.4.0"
+  resolved "https://packages.deskreen.com/jss/-/jss-10.4.0.tgz#473a6fbe42e85441020a07e9519dac1e8a2e79ca"
+  integrity sha512-l7EwdwhsDishXzqTc3lbsbyZ83tlUl5L/Hb16pHCvZliA9lRDdNBZmHzeJHP0sxqD0t1mrMmMR8XroR12JBYzw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 jsx-ast-utils@^2.4.1:
   version "2.4.1"
   resolved "https://packages.deskreen.com/jsx-ast-utils/-/jsx-ast-utils-2.4.1.tgz#1114a4c1209481db06c690c2b4f488cc665f657e"
@@ -9594,6 +9946,16 @@ lodash.flattendeep@^4.4.0:
   resolved "https://packages.deskreen.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
   integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://packages.deskreen.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
+lodash.has@^4.5.2:
+  version "4.5.2"
+  resolved "https://packages.deskreen.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
+  integrity sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=
+
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://packages.deskreen.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
@@ -9604,6 +9966,11 @@ lodash.memoize@4.1.2, lodash.memoize@4.x, lodash.memoize@^4.1.2:
   resolved "https://packages.deskreen.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://packages.deskreen.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+  integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://packages.deskreen.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
@@ -9614,6 +9981,11 @@ lodash.uniq@^4.5.0:
   resolved "https://packages.deskreen.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
+lodash.unset@^4.5.2:
+  version "4.5.2"
+  resolved "https://packages.deskreen.com/lodash.unset/-/lodash.unset-4.5.2.tgz#370d1d3e85b72a7e1b0cdf2d272121306f23e4ed"
+  integrity sha1-Nw0dPoW3Kn4bDN8tJyEhMG8j5O0=
+
 "lodash@4.6.1 || ^4.16.1", lodash@^4.14.0, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.4, lodash@^4.17.5:
   version "4.17.20"
   resolved "https://packages.deskreen.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
@@ -10193,11 +10565,6 @@ nan@^2.12.1:
   resolved "https://packages.deskreen.com/nan/-/nan-2.14.1.tgz#d7be34dfa3105b91494c3147089315eff8874b01"
   integrity sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==
 
-nanoid@^0.2.2:
-  version "0.2.2"
-  resolved "https://packages.deskreen.com/nanoid/-/nanoid-0.2.2.tgz#e2ebc6ad3db5e0454fd8124d30ca39b06555fe56"
-  integrity sha512-GHoRrvNEKiwdkwQ/enKL8AhQkkrBC/2KxMZkDvQzp8OtkpX8ZAmoYJWFVl7l8F2+HcEJUfdg21Ab2wXXfrvACQ==
-
 nanoid@^1.0.1:
   version "1.3.4"
   resolved "https://packages.deskreen.com/nanoid/-/nanoid-1.3.4.tgz#ad89f62c9d1f4fd69710d4a90953d2893d2d31f4"
@@ -10208,6 +10575,11 @@ nanoid@^2.1.0, nanoid@^2.1.3:
   resolved "https://packages.deskreen.com/nanoid/-/nanoid-2.1.11.tgz#ec24b8a758d591561531b4176a01e3ab4f0f0280"
   integrity sha512-s/snB+WGm6uwi0WjsZdaVcuf3KJXlfGl2LcxgwkEwJF0D/BWzVWAZW/XY4bFaiR7s0Jk3FPvlnepg1H1b1UwlA==
 
+nanoid@^3.1.12:
+  version "3.1.12"
+  resolved "https://packages.deskreen.com/nanoid/-/nanoid-3.1.12.tgz#6f7736c62e8d39421601e4a0c77623a97ea69654"
+  integrity sha512-1qstj9z5+x491jfiC4Nelk+f8XBad7LN20PmyWINJEMRSf3wcAjAWysw1qaA8z6NSKe2sjq1hRSDpBH5paCb6A==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://packages.deskreen.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11107,16 +11479,16 @@ pinkie-promise@^2.0.0:
   dependencies:
     pinkie "^2.0.0"
 
-pinkie@1.0.0, pinkie@^1.0.0:
-  version "1.0.0"
-  resolved "https://packages.deskreen.com/pinkie/-/pinkie-1.0.0.tgz#5a47f28ba1015d0201bda7bf0f358e47bec8c7e4"
-  integrity sha1-Wkfyi6EBXQIBvae/DzWOR77Ix+Q=
-
-pinkie@^2.0.0, pinkie@^2.0.1, pinkie@^2.0.4:
+pinkie@2.0.4, pinkie@^2.0.0, pinkie@^2.0.1, pinkie@^2.0.4:
   version "2.0.4"
   resolved "https://packages.deskreen.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
+pinkie@^1.0.0:
+  version "1.0.0"
+  resolved "https://packages.deskreen.com/pinkie/-/pinkie-1.0.0.tgz#5a47f28ba1015d0201bda7bf0f358e47bec8c7e4"
+  integrity sha1-Wkfyi6EBXQIBvae/DzWOR77Ix+Q=
+
 pirates@^4.0.0, pirates@^4.0.1:
   version "4.0.1"
   resolved "https://packages.deskreen.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
@@ -11157,6 +11529,11 @@ pngjs@^3.3.1:
   resolved "https://packages.deskreen.com/pngjs/-/pngjs-3.4.0.tgz#99ca7d725965fb655814eaf65f38f12bbdbf555f"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
+popper.js@1.16.1-lts:
+  version "1.16.1-lts"
+  resolved "https://packages.deskreen.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
 popper.js@^1.14.4, popper.js@^1.16.1:
   version "1.16.1"
   resolved "https://packages.deskreen.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@@ -11655,7 +12032,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://packages.deskreen.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11760,11 +12137,30 @@ q@^1.1.2:
   resolved "https://packages.deskreen.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
+qr.js@0.0.0:
+  version "0.0.0"
+  resolved "https://packages.deskreen.com/qr.js/-/qr.js-0.0.0.tgz#cace86386f59a0db8050fa90d9b6b0e88a1e364f"
+  integrity sha1-ys6GOG9ZoNuAUPqQ2baw6IoeNk8=
+
+qrcode-generator@^1.4.1:
+  version "1.4.4"
+  resolved "https://packages.deskreen.com/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
+  integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
+
 qrcode-terminal@^0.10.0:
   version "0.10.0"
   resolved "https://packages.deskreen.com/qrcode-terminal/-/qrcode-terminal-0.10.0.tgz#a76a48e2610a18f97fa3a2bd532b682acff86c53"
   integrity sha1-p2pI4mEKGPl/o6K9UytoKs/4bFM=
 
+qrcode.react@^1.0.0:
+  version "1.0.0"
+  resolved "https://packages.deskreen.com/qrcode.react/-/qrcode.react-1.0.0.tgz#7e8889db3b769e555e8eb463d4c6de221c36d5de"
+  integrity sha512-jBXleohRTwvGBe1ngV+62QvEZ/9IZqQivdwzo9pJM4LQMoCM2VnvNBnKdjvGnKyDZ/l0nCDgsPod19RzlPvm/Q==
+  dependencies:
+    loose-envify "^1.4.0"
+    prop-types "^15.6.0"
+    qr.js "0.0.0"
+
 qs@6.7.0:
   version "6.7.0"
   resolved "https://packages.deskreen.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
@@ -11863,7 +12259,17 @@ rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^16.12.0:
+react-awesome-reveal@^3.2.1:
+  version "3.2.1"
+  resolved "https://packages.deskreen.com/react-awesome-reveal/-/react-awesome-reveal-3.2.1.tgz#a1c3d876b666c807219c5ceb6eaa4b75a6bb16fb"
+  integrity sha512-/jxX6lTjVyARwOIZBth88G+5Curb9/wEjPRd3QV6FDsgEfkCwZ3z8AStR43uCDqOeKlJq5d5Hzm4dLoXt0Lb6g==
+  dependencies:
+    "@emotion/core" "^10.0.35"
+    "@emotion/styled" "^10.0.27"
+    react-intersection-observer "^8.27.1"
+    react-is "^16.13.1"
+
+react-dom@^16.12.0, react-dom@^16.4.1:
   version "16.13.1"
   resolved "https://packages.deskreen.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"
   integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==
@@ -11903,7 +12309,12 @@ react-i18next@^11.7.0:
     "@babel/runtime" "^7.3.1"
     html-parse-stringify2 "2.0.1"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
+react-intersection-observer@^8.27.1:
+  version "8.28.2"
+  resolved "https://packages.deskreen.com/react-intersection-observer/-/react-intersection-observer-8.28.2.tgz#6504423575905bb9312be6ff0d22e7bbc78af63f"
+  integrity sha512-JzyBn3QylXSJmM7P9dxxAioC4F3xHt4Uc3A6ZBXY27PeSNFraqnsd9jBdo7LJOMtzeXxyfJ6rYdDTl35LQ5TnQ==
+
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.6, react-is@^16.9.0:
   version "16.13.1"
   resolved "https://packages.deskreen.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11926,6 +12337,16 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
+react-qrcode-logo@^2.2.1:
+  version "2.2.1"
+  resolved "https://packages.deskreen.com/react-qrcode-logo/-/react-qrcode-logo-2.2.1.tgz#c409a1a37bc8eb76ef10343ff2e6f00b94facac8"
+  integrity sha512-eXFSJW8HVPMT2ea4pLkbG8apHJ/aIPpQ4kX0HmsSm0wN+K+bleRNgElbjIPS4G7n0lxcA7N6pw+KAxMWPJFoqA==
+  dependencies:
+    lodash.isequal "^4.5.0"
+    qrcode-generator "^1.4.1"
+    react "^16.4.1"
+    react-dom "^16.4.1"
+
 react-redux@^7.2.0:
   version "7.2.1"
   resolved "https://packages.deskreen.com/react-redux/-/react-redux-7.2.1.tgz#8dedf784901014db2feca1ab633864dee68ad985"
@@ -11937,6 +12358,13 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-reveal@^1.2.2:
+  version "1.2.2"
+  resolved "https://packages.deskreen.com/react-reveal/-/react-reveal-1.2.2.tgz#f47fbc44debc4c185ae2163a215a9e822c7adfef"
+  integrity sha512-JCv3fAoU6Z+Lcd8U48bwzm4pMZ79qsedSXYwpwt6lJNtj/v5nKJYZZbw3yhaQPPgYePo3Y0NOCoYOq/jcsisuw==
+  dependencies:
+    prop-types "^15.5.10"
+
 react-router-dom@^5.2.0:
   version "5.2.0"
   resolved "https://packages.deskreen.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662"
@@ -11976,6 +12404,23 @@ react-test-renderer@^16.0.0-0, react-test-renderer@^16.12.0:
     react-is "^16.8.6"
     scheduler "^0.19.1"
 
+react-toast-notifications@^2.4.0:
+  version "2.4.0"
+  resolved "https://packages.deskreen.com/react-toast-notifications/-/react-toast-notifications-2.4.0.tgz#6213730bd1fe158fc01aeef200687ea94c5c5b24"
+  integrity sha512-8tkrbNh7LxkiFmtqAL/AiI55efIeI+fBk3c6ImsiZ0VObb4yvOq0cqYuJHyUiv9fuD2aBxvXGVH+n4Snt8qoWA==
+  dependencies:
+    "@emotion/core" "^10.0.14"
+    react-transition-group "^4.3.0"
+
+react-toastify@*, react-toastify@^6.0.8:
+  version "6.0.8"
+  resolved "https://packages.deskreen.com/react-toastify/-/react-toastify-6.0.8.tgz#84625d81d0fd01902a7f4c6f317eb074cb3bba67"
+  integrity sha512-NSqCNwv+C4IfR+c92PFZiNyeBwOJvigrP2bcRi2f6Hg3WqcHhEHOknbSQOs9QDFuqUjmK3SOrdvScQ3z63ifXg==
+  dependencies:
+    classnames "^2.2.6"
+    prop-types "^15.7.2"
+    react-transition-group "^4.4.1"
+
 react-transition-group@^2.9.0:
   version "2.9.0"
   resolved "https://packages.deskreen.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
@@ -11986,7 +12431,17 @@ react-transition-group@^2.9.0:
     prop-types "^15.6.2"
     react-lifecycles-compat "^3.0.4"
 
-react@^16.13.1:
+react-transition-group@^4.3.0, react-transition-group@^4.4.0, react-transition-group@^4.4.1:
+  version "4.4.1"
+  resolved "https://packages.deskreen.com/react-transition-group/-/react-transition-group-4.4.1.tgz#63868f9325a38ea5ee9535d828327f85773345c9"
+  integrity sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
+react@^16.13.1, react@^16.4.1:
   version "16.13.1"
   resolved "https://packages.deskreen.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
@@ -13864,10 +14319,10 @@ testcafe-browser-tools@2.0.13:
     read-file-relative "^1.2.0"
     which-promise "^1.0.0"
 
-testcafe-hammerhead@17.1.13:
-  version "17.1.13"
-  resolved "https://packages.deskreen.com/testcafe-hammerhead/-/testcafe-hammerhead-17.1.13.tgz#e2ab9589e48aa145fa886c2303891e9e997d33fa"
-  integrity sha512-swNsC4gbs1vhKM9F9zmCcStA8oMg2FUTJZYUE30xL5ZdHae87x2tfg9T58jUcZK3CX0S9B2NCU1AJbwCsS0uqw==
+testcafe-hammerhead@17.1.15:
+  version "17.1.15"
+  resolved "https://packages.deskreen.com/testcafe-hammerhead/-/testcafe-hammerhead-17.1.15.tgz#2855db1d795f598ee331eda4ff7b0ca0309255d9"
+  integrity sha512-FvuaODbFUkoqyzH0OapiMO3/ISCB/v+0kKi0+5DhcIz1tRBishzyfLbHFyKXUf6rm0IhGJlME93uKFOM9NNOMw==
   dependencies:
     acorn-hammerhead "^0.3.0"
     asar "^2.0.1"
@@ -13884,10 +14339,10 @@ testcafe-hammerhead@17.1.13:
     merge-stream "^1.0.1"
     mime "~1.4.1"
     mustache "^2.1.1"
-    nanoid "^0.2.2"
+    nanoid "^3.1.12"
     os-family "^1.0.0"
     parse5 "2.2.3"
-    pinkie "1.0.0"
+    pinkie "2.0.4"
     read-file-relative "^1.2.0"
     semver "5.5.0"
     tough-cookie "2.3.3"
@@ -13943,10 +14398,10 @@ testcafe-reporter-xunit@^2.1.0:
   resolved "https://packages.deskreen.com/testcafe-reporter-xunit/-/testcafe-reporter-xunit-2.1.0.tgz#e6d66c572ce15af266706af0fd610b2a841dd443"
   integrity sha1-5tZsVyzhWvJmcGrw/WELKoQd1EM=
 
-testcafe@^1.8.8:
-  version "1.9.1"
-  resolved "https://packages.deskreen.com/testcafe/-/testcafe-1.9.1.tgz#2e3183d69561bf90da611408436c5b34b22f799c"
-  integrity sha512-18yGuCJvcdaGFhS3l4NhDwRnvJ24/mwXVfM+gqZm6vxNdw2NCujzXh36/BNr0qP2MhAEN56Y96G8XKkzn+5zYg==
+testcafe@^1.9.2:
+  version "1.9.2"
+  resolved "https://packages.deskreen.com/testcafe/-/testcafe-1.9.2.tgz#35f3603bdc5241033eda9ad55d600d8c005a2801"
+  integrity sha512-85du0zDvzFWleVqRTTsAr8Lo+3gn4yETs9qFZBIEufk6oN1fLzgv6Q14GeaH3/IaKi+/smv55umTce/OXX0mbA==
   dependencies:
     "@types/node" "^10.12.19"
     async-exit-hook "^1.1.2"
@@ -13977,6 +14432,7 @@ testcafe@^1.8.8:
     emittery "^0.4.1"
     endpoint-utils "^1.0.2"
     error-stack-parser "^1.3.6"
+    execa "^4.0.3"
     globby "^9.2.0"
     graceful-fs "^4.1.11"
     graphlib "^2.1.5"
@@ -14012,7 +14468,7 @@ testcafe@^1.8.8:
     source-map-support "^0.5.16"
     strip-bom "^2.0.0"
     testcafe-browser-tools "2.0.13"
-    testcafe-hammerhead "17.1.13"
+    testcafe-hammerhead "17.1.15"
     testcafe-legacy-api "4.0.0"
     testcafe-reporter-json "^2.1.0"
     testcafe-reporter-list "^2.1.0"
@@ -14079,7 +14535,7 @@ tiny-invariant@^1.0.2:
   resolved "https://packages.deskreen.com/tiny-invariant/-/tiny-invariant-1.1.0.tgz#634c5f8efdc27714b7f386c35e6760991d230875"
   integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
 
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://packages.deskreen.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==

From a128683013c25ec8c84ed75259dcf59b29a0beb3 Mon Sep 17 00:00:00 2001
From: Pavlo Buidenkov <pavlobu@gmail.com>
Date: Thu, 24 Sep 2020 19:10:24 +0300
Subject: [PATCH 2/2] change to test-ux

---
 .github/workflows/codecov.yml                 |   3 +-
 .github/workflows/release.yml                 |   5 +-
 .github/workflows/test.yml                    | 118 +++++++++---------
 LICENSE                                       |   2 +-
 .../StepsOfStepper/IntermediateStep.tsx       |  12 +-
 app/components/StepsOfStepper/ScanQRStep.tsx  |  11 +-
 .../IntermediateStep.spec.tsx.snap            |  30 ++++-
 .../__snapshots__/ScanQRStep.spec.tsx.snap    |   4 +-
 .../__snapshots__/HomePage.spec.tsx.snap      |  30 ++++-
 .../__snapshots__/Stepper.spec.tsx.snap       |  30 ++++-
 package.json                                  |   2 +-
 11 files changed, 162 insertions(+), 85 deletions(-)

diff --git a/.github/workflows/codecov.yml b/.github/workflows/codecov.yml
index 421791a..223a32a 100644
--- a/.github/workflows/codecov.yml
+++ b/.github/workflows/codecov.yml
@@ -25,7 +25,8 @@ jobs:
           npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
           npm config set always-auth true
           yarn install --frozen-lockfile
-          yarn install-client:frozenlockfile
+          cd app/client
+          yarn install --frozen-lockfile
 
       - name: yarn build
         run: yarn build
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 2c3e4e1..38c9b98 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -34,7 +34,7 @@ jobs:
             artifact_name: 'release/{*.AppImage,*.rpm,*.deb,*.yml}'
           - os: windows-2019
             artifact_name: 'release/{*.msi,*.exe,*.blockmap,*.yml}'
-          - os: macos-10.14
+          - os: macos-10.15
             artifact_name: 'release/{*.zip,*.dmg,*.blockmap,*.yml}'
 
     steps:
@@ -58,7 +58,8 @@ jobs:
           npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
           npm config set always-auth true
           yarn install --frozen-lockfile
-          yarn install-client:frozenlockfile
+          cd app/client
+          yarn install --frozen-lockfile
 
       - name: yarn package-ci
         env:
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 25d7e08..a918103 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -1,74 +1,74 @@
-name: build and test
+# name: build and test
 
-on: [pull_request]
+# on: [pull_request]
 
-# NPMRC_ADMIN_USER_AUTH_TOKEN
+# # NPMRC_ADMIN_USER_AUTH_TOKEN
 
-jobs:
-  build-and-test:
-    runs-on: ${{ matrix.os }}
+# jobs:
+#   build-and-test:
+#     runs-on: ${{ matrix.os }}
 
-    strategy:
-      matrix:
-        os: [macos-10.14, windows-2019, ubuntu-18.04]
+#     strategy:
+#       matrix:
+#         os: [macos-10.14, windows-2019, ubuntu-18.04]
 
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v2.3.1
+#     steps:
+#       - name: Check out Git repository
+#         uses: actions/checkout@v2.3.1
 
-      - name: Install Node.js, NPM and Yarn
-        uses: actions/setup-node@v1.4.2
-        with:
-          node-version: 14
+#       - name: Install Node.js, NPM and Yarn
+#         uses: actions/setup-node@v1.4.2
+#         with:
+#           node-version: 14
 
-      # - name: yarn install from npmjs registry
-      #   run: |
-      #     yarn install --no-lockfile
-      #     yarn install-client:nolockfile
+#       # - name: yarn install from npmjs registry
+#       #   run: |
+#       #     yarn install --no-lockfile
+#       #     yarn install-client:nolockfile
 
-      - name: Configure private AWS npm registry and install packages from it
-        # if: ${{ failure() }}
-        run: |
-          npm config set registry https://packages.deskreen.com/
-          npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
-          npm config set always-auth true
-          yarn install --frozen-lockfile
-          yarn install-client:frozenlockfile
+#       - name: Configure private AWS npm registry and install packages from it
+#         # if: ${{ failure() }}
+#         run: |
+#           npm config set registry https://packages.deskreen.com/
+#           npm set //packages.deskreen.com/:_authToken="${{ secrets.NPMRC_USER_TOKEN }}"
+#           npm config set always-auth true
+#           yarn install --frozen-lockfile
+#           yarn install-client:frozenlockfile
 
-      # following step does code signing when `electron-builder --publish always` (look in package.json)
-      - name: yarn package-ci
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn package-ci
+#       # following step does code signing when `electron-builder --publish always` (look in package.json)
+#       - name: yarn package-ci
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         run: yarn package-ci
 
-      - name: yarn build
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn build
+#       - name: yarn build
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         run: yarn build
 
-      - name: yarn lint
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn lint
+#       - name: yarn lint
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         run: yarn lint
 
-      - name: yarn tsc
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn tsc
+#       - name: yarn tsc
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         run: yarn tsc
 
-      - name: yarn test
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn test
+#       - name: yarn test
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         run: yarn test
 
-      - name: yarn build-e2e
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        run: yarn build-e2e
+#       - name: yarn build-ux
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         run: yarn build-ux
 
-      - name: yarn test-e2e
-        uses: GabrielBB/xvfb-action@v1.2
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-        with:
-          run: yarn test-e2e
+#       - name: yarn test-ux
+#         uses: GabrielBB/xvfb-action@v1.2
+#         env:
+#           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+#         with:
+#           run: yarn test-ux
diff --git a/LICENSE b/LICENSE
index 4f9058d..ce05389 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2020-present Deskreen
+Copyright (c) 2020-present Pavlo (Paul) Buidenkov
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
diff --git a/app/components/StepsOfStepper/IntermediateStep.tsx b/app/components/StepsOfStepper/IntermediateStep.tsx
index 21c0fe1..82bda9d 100644
--- a/app/components/StepsOfStepper/IntermediateStep.tsx
+++ b/app/components/StepsOfStepper/IntermediateStep.tsx
@@ -78,12 +78,12 @@ export default function IntermediateStep(props: IntermediateStepProps) {
       )}
 
       {
-        /* TODO: (REMOVE: process.env.NODE_ENV === 'production') !!!!!!!!!)
-        Connect Test Device button, displayed only when RUN_MODE is 'dev' or 'test' */
-        props.activeStep === 0 &&
-        (process.env.RUN_MODE === 'dev' ||
-          process.env.RUN_MODE === 'test' ||
-          process.env.NODE_ENV === 'production') ? (
+        // eslint-disable-next-line no-nested-ternary
+        process.env.NODE_ENV === 'production' &&
+        process.env.RUN_MODE !== 'dev' &&
+        process.env.RUN_MODE !== 'test' ? (
+          <></>
+        ) : props.activeStep === 0 ? (
           // eslint-disable-next-line react/jsx-indent
           <Button
             onClick={() => {
diff --git a/app/components/StepsOfStepper/ScanQRStep.tsx b/app/components/StepsOfStepper/ScanQRStep.tsx
index 630e7d2..720aac1 100644
--- a/app/components/StepsOfStepper/ScanQRStep.tsx
+++ b/app/components/StepsOfStepper/ScanQRStep.tsx
@@ -10,7 +10,10 @@ import { SettingsContext } from '../../containers/SettingsProvider';
 import isProduction from '../../utils/isProduction';
 import CloseOverlayButton from '../CloseOverlayButton';
 
-const internalIp = require('internal-ip');
+const LOCAL_LAN_IP =
+  process.env.RUN_MODE === 'dev' || process.env.NODE_ENV === 'production'
+    ? require('internal-ip').v4.sync()
+    : '255.255.255.255';
 
 const useStyles = makeStyles(() =>
   createStyles({
@@ -60,7 +63,7 @@ const ScanQRStep: React.FC = () => {
             onClick={() => setIsQRCodeMagnified(true)}
           >
             <QRCode
-              value={`http://${internalIp.v4.sync()}:65000/99999`}
+              value={`http://${LOCAL_LAN_IP}:65000/99999`}
               level="H"
               renderAs="svg"
               // bgColor={isDarkTheme ? '#293742' : '#ffffff'}
@@ -90,7 +93,7 @@ const ScanQRStep: React.FC = () => {
           icon="duplicate"
           style={{ borderRadius: '100px' }}
         >
-          http://255.255.255.255:65000/99999
+          {`http://${LOCAL_LAN_IP}:65000/99999`}
         </Button>
       </Tooltip>
 
@@ -132,7 +135,7 @@ const ScanQRStep: React.FC = () => {
           <Row center="xs">
             <div className={classes.dialogQRWrapper}>
               <QRCode
-                value={`http://${internalIp.v4.sync()}:65000/99999`}
+                value={`http://${LOCAL_LAN_IP}:65000/99999`}
                 level="H"
                 renderAs="svg"
                 imageSettings={{
diff --git a/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap
index c639e09..641630e 100644
--- a/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap
+++ b/app/components/StepsOfStepper/__snapshots__/IntermediateStep.spec.tsx.snap
@@ -167,7 +167,7 @@ exports[`should match exact snapshot on each step 1`] = `
                                   level="H"
                                   renderAs="svg"
                                   size={128}
-                                  value="http://192.168.31.214:65000/99999"
+                                  value="http://255.255.255.255:65000/99999"
                                 >
                                   <QRCodeSVG
                                     bgColor="rgba(0,0,0,0.0)"
@@ -182,7 +182,7 @@ exports[`should match exact snapshot on each step 1`] = `
                                     includeMargin={false}
                                     level="H"
                                     size={128}
-                                    value="http://192.168.31.214:65000/99999"
+                                    value="http://255.255.255.255:65000/99999"
                                   >
                                     <svg
                                       height={128}
@@ -195,7 +195,7 @@ exports[`should match exact snapshot on each step 1`] = `
                                         fill="rgba(0,0,0,0.0)"
                                       />
                                       <path
-                                        d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h6v1H12zM19 0h2v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM15 1h1v1H15zM17 1h2v1H17zM22 1h1v1H22zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h1v1H11zM13 2h1v1H13zM15 2h1v1H15zM17 2h2v1H17zM20 2h2v1H20zM23 2h1v1H23zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h4v1H10zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h1v1H11zM13 4h1v1H13zM15 4h1v1H15zM17 4h2v1H17zM21 4h4v1H21zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM10 5h1v1H10zM14 5h1v1H14zM16 5h1v1H16zM20 5h3v1H20zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h6v1H8zM15 7h2v1H15zM18 7h1v1H18zM20 7h3v1H20zM24 7h1v1H24zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM11 8h4v1H11zM16 8h1v1H16zM19 8h1v1H19zM23 8h1v1H23zM25 8h3v1H25zM30,8 h3v1H30zM0 9h2v1H0zM3 9h1v1H3zM5 9h1v1H5zM7 9h1v1H7zM9 9h1v1H9zM12 9h2v1H12zM16 9h2v1H16zM20 9h1v1H20zM22 9h5v1H22zM29 9h1v1H29zM31,9 h2v1H31zM0 10h2v1H0zM5 10h6v1H5zM13 10h2v1H13zM17 10h5v1H17zM24 10h1v1H24zM27 10h1v1H27zM0 11h2v1H0zM4 11h2v1H4zM8 11h3v1H8zM15 11h1v1H15zM21 11h3v1H21zM25 11h1v1H25zM30 11h2v1H30zM0 12h7v1H0zM11 12h2v1H11zM15 12h1v1H15zM19 12h1v1H19zM21 12h1v1H21zM24 12h1v1H24zM28 12h2v1H28zM32,12 h1v1H32zM8 13h1v1H8zM10 13h1v1H10zM14 13h1v1H14zM16 13h2v1H16zM19 13h2v1H19zM23 13h5v1H23zM30 13h1v1H30zM32,13 h1v1H32zM0 14h2v1H0zM3 14h1v1H3zM6 14h1v1H6zM11 14h5v1H11zM17 14h2v1H17zM20 14h1v1H20zM22 14h1v1H22zM24 14h2v1H24zM30 14h2v1H30zM0 15h2v1H0zM7 15h1v1H7zM11 15h1v1H11zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM20 15h3v1H20zM24 15h1v1H24zM27 15h2v1H27zM30 15h2v1H30zM0 16h1v1H0zM2 16h1v1H2zM4 16h4v1H4zM9 16h1v1H9zM11 16h1v1H11zM18 16h3v1H18zM23 16h2v1H23zM28 16h1v1H28zM0 17h2v1H0zM3 17h1v1H3zM5 17h1v1H5zM13 17h3v1H13zM17 17h2v1H17zM21 17h7v1H21zM31,17 h2v1H31zM0 18h2v1H0zM4 18h4v1H4zM9 18h3v1H9zM14 18h1v1H14zM18 18h1v1H18zM20 18h1v1H20zM24 18h1v1H24zM26 18h1v1H26zM30 18h1v1H30zM2 19h1v1H2zM4 19h1v1H4zM9 19h1v1H9zM11 19h2v1H11zM14 19h1v1H14zM20 19h6v1H20zM27 19h1v1H27zM29 19h2v1H29zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM10 20h1v1H10zM13 20h2v1H13zM16 20h1v1H16zM18 20h1v1H18zM20 20h1v1H20zM23 20h1v1H23zM28 20h2v1H28zM0 21h1v1H0zM3 21h3v1H3zM10 21h1v1H10zM12 21h3v1H12zM16 21h1v1H16zM19 21h1v1H19zM21 21h7v1H21zM30 21h1v1H30zM32,21 h1v1H32zM0 22h1v1H0zM2 22h3v1H2zM6 22h3v1H6zM13 22h1v1H13zM15 22h7v1H15zM27 22h2v1H27zM0 23h1v1H0zM2 23h2v1H2zM7 23h2v1H7zM10 23h2v1H10zM14 23h2v1H14zM17 23h3v1H17zM21 23h1v1H21zM24 23h1v1H24zM28 23h1v1H28zM30 23h2v1H30zM0 24h1v1H0zM6 24h1v1H6zM8 24h1v1H8zM10 24h1v1H10zM12 24h1v1H12zM17 24h1v1H17zM19 24h1v1H19zM23 24h6v1H23zM8 25h1v1H8zM10 25h1v1H10zM17 25h2v1H17zM22 25h3v1H22zM28 25h1v1H28zM30,25 h3v1H30zM0 26h7v1H0zM10 26h1v1H10zM14 26h3v1H14zM18 26h1v1H18zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h2v1H11zM15 27h4v1H15zM20 27h1v1H20zM24 27h1v1H24zM28 27h1v1H28zM30 27h2v1H30zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM8 28h2v1H8zM11 28h2v1H11zM14 28h2v1H14zM17 28h1v1H17zM21 28h2v1H21zM24 28h6v1H24zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h2v1H8zM11 29h1v1H11zM14 29h3v1H14zM18 29h3v1H18zM28 29h2v1H28zM32,29 h1v1H32zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h1v1H8zM10 30h5v1H10zM16 30h5v1H16zM22 30h1v1H22zM25 30h2v1H25zM29 30h1v1H29zM0 31h1v1H0zM6 31h1v1H6zM12 31h3v1H12zM16 31h1v1H16zM20 31h1v1H20zM23 31h1v1H23zM25 31h1v1H25zM27 31h1v1H27zM30 31h1v1H30zM0 32h7v1H0zM9 32h1v1H9zM11 32h1v1H11zM13 32h1v1H13zM19 32h1v1H19zM21 32h1v1H21zM24 32h1v1H24zM26 32h1v1H26zM29 32h1v1H29zM31 32h1v1H31z"
+                                        d="M0 0h7v1H0zM10 0h1v1H10zM13 0h2v1H13zM16 0h1v1H16zM19 0h1v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM11 1h2v1H11zM14 1h2v1H14zM19 1h6v1H19zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM9 2h1v1H9zM12 2h3v1H12zM17 2h1v1H17zM19 2h1v1H19zM22 2h3v1H22zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM9 3h1v1H9zM11 3h2v1H11zM14 3h1v1H14zM16 3h5v1H16zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h1v1H8zM12 4h3v1H12zM16 4h5v1H16zM22 4h1v1H22zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM11 5h1v1H11zM13 5h1v1H13zM17 5h5v1H17zM24 5h1v1H24zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h1v1H8zM11 7h1v1H11zM14 7h1v1H14zM19 7h1v1H19zM23 7h1v1H23zM2 8h2v1H2zM6 8h3v1H6zM11 8h2v1H11zM14 8h1v1H14zM16 8h1v1H16zM20 8h7v1H20zM28 8h1v1H28zM0 9h4v1H0zM5 9h1v1H5zM7 9h1v1H7zM10 9h1v1H10zM12 9h1v1H12zM14 9h1v1H14zM16 9h4v1H16zM22 9h5v1H22zM29,9 h4v1H29zM1 10h1v1H1zM3 10h1v1H3zM6 10h1v1H6zM13 10h1v1H13zM18 10h1v1H18zM23 10h1v1H23zM26 10h1v1H26zM32,10 h1v1H32zM0 11h1v1H0zM2 11h3v1H2zM7 11h1v1H7zM9 11h1v1H9zM18 11h1v1H18zM20 11h1v1H20zM23 11h1v1H23zM25 11h4v1H25zM1 12h3v1H1zM6 12h1v1H6zM8 12h1v1H8zM11 12h2v1H11zM15 12h2v1H15zM19 12h2v1H19zM23 12h2v1H23zM28 12h1v1H28zM31 12h1v1H31zM7 13h2v1H7zM11 13h2v1H11zM15 13h1v1H15zM19 13h4v1H19zM25 13h1v1H25zM29 13h1v1H29zM1 14h1v1H1zM3 14h2v1H3zM6 14h3v1H6zM13 14h1v1H13zM15 14h1v1H15zM17 14h2v1H17zM21 14h1v1H21zM24 14h1v1H24zM27 14h1v1H27zM0 15h2v1H0zM3 15h1v1H3zM5 15h1v1H5zM9 15h1v1H9zM12 15h1v1H12zM14 15h2v1H14zM17 15h6v1H17zM25 15h1v1H25zM28 15h1v1H28zM30 15h1v1H30zM32,15 h1v1H32zM4 16h3v1H4zM9 16h1v1H9zM11 16h1v1H11zM19 16h1v1H19zM21 16h1v1H21zM23 16h1v1H23zM26 16h3v1H26zM30 16h1v1H30zM32,16 h1v1H32zM3 17h3v1H3zM10 17h4v1H10zM19 17h1v1H19zM23 17h1v1H23zM26 17h1v1H26zM28 17h1v1H28zM30 17h1v1H30zM32,17 h1v1H32zM2 18h1v1H2zM4 18h1v1H4zM6 18h4v1H6zM12 18h1v1H12zM14 18h3v1H14zM18 18h3v1H18zM24 18h1v1H24zM26 18h3v1H26zM30 18h1v1H30zM1 19h1v1H1zM4 19h2v1H4zM7 19h2v1H7zM10 19h1v1H10zM13 19h1v1H13zM18 19h3v1H18zM25 19h2v1H25zM32,19 h1v1H32zM2 20h1v1H2zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM11 20h1v1H11zM14 20h1v1H14zM16 20h1v1H16zM19 20h7v1H19zM27 20h1v1H27zM29 20h3v1H29zM0 21h1v1H0zM2 21h2v1H2zM8 21h2v1H8zM11 21h3v1H11zM17 21h2v1H17zM20 21h8v1H20zM29,21 h4v1H29zM2 22h3v1H2zM6 22h1v1H6zM11 22h2v1H11zM16 22h1v1H16zM18 22h1v1H18zM20 22h1v1H20zM22 22h3v1H22zM26 22h1v1H26zM28 22h1v1H28zM32,22 h1v1H32zM1 23h3v1H1zM5 23h1v1H5zM9 23h1v1H9zM12 23h1v1H12zM14 23h4v1H14zM19 23h2v1H19zM25 23h1v1H25zM27 23h1v1H27zM0 24h1v1H0zM2 24h2v1H2zM6 24h4v1H6zM13 24h2v1H13zM16 24h4v1H16zM23 24h6v1H23zM31 24h1v1H31zM8 25h8v1H8zM19 25h4v1H19zM24 25h1v1H24zM28 25h1v1H28zM30 25h2v1H30zM0 26h7v1H0zM8 26h2v1H8zM12 26h4v1H12zM19 26h1v1H19zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM30 26h2v1H30zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h3v1H11zM16 27h2v1H16zM19 27h1v1H19zM21 27h2v1H21zM24 27h1v1H24zM28 27h1v1H28zM30 27h1v1H30zM32,27 h1v1H32zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM11 28h5v1H11zM17 28h2v1H17zM23 28h6v1H23zM30 28h1v1H30zM32,28 h1v1H32zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h3v1H8zM12 29h3v1H12zM18 29h1v1H18zM21 29h3v1H21zM25 29h1v1H25zM27 29h1v1H27zM31,29 h2v1H31zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h3v1H8zM12 30h2v1H12zM20 30h7v1H20zM30 30h1v1H30zM0 31h1v1H0zM6 31h1v1H6zM10 31h4v1H10zM15 31h2v1H15zM18 31h1v1H18zM24 31h3v1H24zM29 31h1v1H29zM32,31 h1v1H32zM0 32h7v1H0zM9 32h2v1H9zM12 32h2v1H12zM16 32h2v1H16zM20 32h1v1H20zM27 32h2v1H27zM30 32h1v1H30z"
                                         fill="#000000"
                                       />
                                       <image
@@ -427,6 +427,30 @@ exports[`should match exact snapshot on each step 1`] = `
               />
             </Blueprint3.Dialog>
           </ScanQRStep>
+          <Blueprint3.Button
+            onClick={[Function]}
+          >
+            <button
+              className="bp3-button"
+              onClick={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              type="button"
+            >
+              <Blueprint3.Icon
+                key="leftIcon"
+              />
+              <span
+                className="bp3-button-text"
+                key="text"
+              >
+                Connect Test Device
+              </span>
+              <Blueprint3.Icon
+                key="rightIcon"
+              />
+            </button>
+          </Blueprint3.Button>
           <Blueprint3.Button
             icon="chevron-left"
             intent="danger"
diff --git a/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap b/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap
index c40010a..c366170 100644
--- a/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap
+++ b/app/components/StepsOfStepper/__snapshots__/ScanQRStep.spec.tsx.snap
@@ -47,7 +47,7 @@ exports[`<ScanQRStep /> when rendered should match exact snapshot 1`] = `
           level="H"
           renderAs="svg"
           size={128}
-          value="http://192.168.31.214:65000/99999"
+          value="http://255.255.255.255:65000/99999"
         />
       </div>
     </Blueprint3.Tooltip>
@@ -166,7 +166,7 @@ exports[`<ScanQRStep /> when rendered should match exact snapshot 1`] = `
             level="H"
             renderAs="svg"
             size={128}
-            value="http://192.168.31.214:65000/99999"
+            value="http://255.255.255.255:65000/99999"
             width="390px"
           />
         </div>
diff --git a/app/containers/__snapshots__/HomePage.spec.tsx.snap b/app/containers/__snapshots__/HomePage.spec.tsx.snap
index 68bb6a5..2598cb8 100644
--- a/app/containers/__snapshots__/HomePage.spec.tsx.snap
+++ b/app/containers/__snapshots__/HomePage.spec.tsx.snap
@@ -1838,7 +1838,7 @@ exports[`should match exact snapshot 1`] = `
                                                               level="H"
                                                               renderAs="svg"
                                                               size={128}
-                                                              value="http://192.168.31.214:65000/99999"
+                                                              value="http://255.255.255.255:65000/99999"
                                                             >
                                                               <QRCodeSVG
                                                                 bgColor="rgba(0,0,0,0.0)"
@@ -1853,7 +1853,7 @@ exports[`should match exact snapshot 1`] = `
                                                                 includeMargin={false}
                                                                 level="H"
                                                                 size={128}
-                                                                value="http://192.168.31.214:65000/99999"
+                                                                value="http://255.255.255.255:65000/99999"
                                                               >
                                                                 <svg
                                                                   height={128}
@@ -1866,7 +1866,7 @@ exports[`should match exact snapshot 1`] = `
                                                                     fill="rgba(0,0,0,0.0)"
                                                                   />
                                                                   <path
-                                                                    d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h6v1H12zM19 0h2v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM15 1h1v1H15zM17 1h2v1H17zM22 1h1v1H22zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h1v1H11zM13 2h1v1H13zM15 2h1v1H15zM17 2h2v1H17zM20 2h2v1H20zM23 2h1v1H23zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h4v1H10zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h1v1H11zM13 4h1v1H13zM15 4h1v1H15zM17 4h2v1H17zM21 4h4v1H21zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM10 5h1v1H10zM14 5h1v1H14zM16 5h1v1H16zM20 5h3v1H20zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h6v1H8zM15 7h2v1H15zM18 7h1v1H18zM20 7h3v1H20zM24 7h1v1H24zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM11 8h4v1H11zM16 8h1v1H16zM19 8h1v1H19zM23 8h1v1H23zM25 8h3v1H25zM30,8 h3v1H30zM0 9h2v1H0zM3 9h1v1H3zM5 9h1v1H5zM7 9h1v1H7zM9 9h1v1H9zM12 9h2v1H12zM16 9h2v1H16zM20 9h1v1H20zM22 9h5v1H22zM29 9h1v1H29zM31,9 h2v1H31zM0 10h2v1H0zM5 10h6v1H5zM13 10h2v1H13zM17 10h5v1H17zM24 10h1v1H24zM27 10h1v1H27zM0 11h2v1H0zM4 11h2v1H4zM8 11h3v1H8zM15 11h1v1H15zM21 11h3v1H21zM25 11h1v1H25zM30 11h2v1H30zM0 12h7v1H0zM11 12h2v1H11zM15 12h1v1H15zM19 12h1v1H19zM21 12h1v1H21zM24 12h1v1H24zM28 12h2v1H28zM32,12 h1v1H32zM8 13h1v1H8zM10 13h1v1H10zM14 13h1v1H14zM16 13h2v1H16zM19 13h2v1H19zM23 13h5v1H23zM30 13h1v1H30zM32,13 h1v1H32zM0 14h2v1H0zM3 14h1v1H3zM6 14h1v1H6zM11 14h5v1H11zM17 14h2v1H17zM20 14h1v1H20zM22 14h1v1H22zM24 14h2v1H24zM30 14h2v1H30zM0 15h2v1H0zM7 15h1v1H7zM11 15h1v1H11zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM20 15h3v1H20zM24 15h1v1H24zM27 15h2v1H27zM30 15h2v1H30zM0 16h1v1H0zM2 16h1v1H2zM4 16h4v1H4zM9 16h1v1H9zM11 16h1v1H11zM18 16h3v1H18zM23 16h2v1H23zM28 16h1v1H28zM0 17h2v1H0zM3 17h1v1H3zM5 17h1v1H5zM13 17h3v1H13zM17 17h2v1H17zM21 17h7v1H21zM31,17 h2v1H31zM0 18h2v1H0zM4 18h4v1H4zM9 18h3v1H9zM14 18h1v1H14zM18 18h1v1H18zM20 18h1v1H20zM24 18h1v1H24zM26 18h1v1H26zM30 18h1v1H30zM2 19h1v1H2zM4 19h1v1H4zM9 19h1v1H9zM11 19h2v1H11zM14 19h1v1H14zM20 19h6v1H20zM27 19h1v1H27zM29 19h2v1H29zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM10 20h1v1H10zM13 20h2v1H13zM16 20h1v1H16zM18 20h1v1H18zM20 20h1v1H20zM23 20h1v1H23zM28 20h2v1H28zM0 21h1v1H0zM3 21h3v1H3zM10 21h1v1H10zM12 21h3v1H12zM16 21h1v1H16zM19 21h1v1H19zM21 21h7v1H21zM30 21h1v1H30zM32,21 h1v1H32zM0 22h1v1H0zM2 22h3v1H2zM6 22h3v1H6zM13 22h1v1H13zM15 22h7v1H15zM27 22h2v1H27zM0 23h1v1H0zM2 23h2v1H2zM7 23h2v1H7zM10 23h2v1H10zM14 23h2v1H14zM17 23h3v1H17zM21 23h1v1H21zM24 23h1v1H24zM28 23h1v1H28zM30 23h2v1H30zM0 24h1v1H0zM6 24h1v1H6zM8 24h1v1H8zM10 24h1v1H10zM12 24h1v1H12zM17 24h1v1H17zM19 24h1v1H19zM23 24h6v1H23zM8 25h1v1H8zM10 25h1v1H10zM17 25h2v1H17zM22 25h3v1H22zM28 25h1v1H28zM30,25 h3v1H30zM0 26h7v1H0zM10 26h1v1H10zM14 26h3v1H14zM18 26h1v1H18zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h2v1H11zM15 27h4v1H15zM20 27h1v1H20zM24 27h1v1H24zM28 27h1v1H28zM30 27h2v1H30zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM8 28h2v1H8zM11 28h2v1H11zM14 28h2v1H14zM17 28h1v1H17zM21 28h2v1H21zM24 28h6v1H24zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h2v1H8zM11 29h1v1H11zM14 29h3v1H14zM18 29h3v1H18zM28 29h2v1H28zM32,29 h1v1H32zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h1v1H8zM10 30h5v1H10zM16 30h5v1H16zM22 30h1v1H22zM25 30h2v1H25zM29 30h1v1H29zM0 31h1v1H0zM6 31h1v1H6zM12 31h3v1H12zM16 31h1v1H16zM20 31h1v1H20zM23 31h1v1H23zM25 31h1v1H25zM27 31h1v1H27zM30 31h1v1H30zM0 32h7v1H0zM9 32h1v1H9zM11 32h1v1H11zM13 32h1v1H13zM19 32h1v1H19zM21 32h1v1H21zM24 32h1v1H24zM26 32h1v1H26zM29 32h1v1H29zM31 32h1v1H31z"
+                                                                    d="M0 0h7v1H0zM10 0h1v1H10zM13 0h2v1H13zM16 0h1v1H16zM19 0h1v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM11 1h2v1H11zM14 1h2v1H14zM19 1h6v1H19zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM9 2h1v1H9zM12 2h3v1H12zM17 2h1v1H17zM19 2h1v1H19zM22 2h3v1H22zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM9 3h1v1H9zM11 3h2v1H11zM14 3h1v1H14zM16 3h5v1H16zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h1v1H8zM12 4h3v1H12zM16 4h5v1H16zM22 4h1v1H22zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM11 5h1v1H11zM13 5h1v1H13zM17 5h5v1H17zM24 5h1v1H24zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h1v1H8zM11 7h1v1H11zM14 7h1v1H14zM19 7h1v1H19zM23 7h1v1H23zM2 8h2v1H2zM6 8h3v1H6zM11 8h2v1H11zM14 8h1v1H14zM16 8h1v1H16zM20 8h7v1H20zM28 8h1v1H28zM0 9h4v1H0zM5 9h1v1H5zM7 9h1v1H7zM10 9h1v1H10zM12 9h1v1H12zM14 9h1v1H14zM16 9h4v1H16zM22 9h5v1H22zM29,9 h4v1H29zM1 10h1v1H1zM3 10h1v1H3zM6 10h1v1H6zM13 10h1v1H13zM18 10h1v1H18zM23 10h1v1H23zM26 10h1v1H26zM32,10 h1v1H32zM0 11h1v1H0zM2 11h3v1H2zM7 11h1v1H7zM9 11h1v1H9zM18 11h1v1H18zM20 11h1v1H20zM23 11h1v1H23zM25 11h4v1H25zM1 12h3v1H1zM6 12h1v1H6zM8 12h1v1H8zM11 12h2v1H11zM15 12h2v1H15zM19 12h2v1H19zM23 12h2v1H23zM28 12h1v1H28zM31 12h1v1H31zM7 13h2v1H7zM11 13h2v1H11zM15 13h1v1H15zM19 13h4v1H19zM25 13h1v1H25zM29 13h1v1H29zM1 14h1v1H1zM3 14h2v1H3zM6 14h3v1H6zM13 14h1v1H13zM15 14h1v1H15zM17 14h2v1H17zM21 14h1v1H21zM24 14h1v1H24zM27 14h1v1H27zM0 15h2v1H0zM3 15h1v1H3zM5 15h1v1H5zM9 15h1v1H9zM12 15h1v1H12zM14 15h2v1H14zM17 15h6v1H17zM25 15h1v1H25zM28 15h1v1H28zM30 15h1v1H30zM32,15 h1v1H32zM4 16h3v1H4zM9 16h1v1H9zM11 16h1v1H11zM19 16h1v1H19zM21 16h1v1H21zM23 16h1v1H23zM26 16h3v1H26zM30 16h1v1H30zM32,16 h1v1H32zM3 17h3v1H3zM10 17h4v1H10zM19 17h1v1H19zM23 17h1v1H23zM26 17h1v1H26zM28 17h1v1H28zM30 17h1v1H30zM32,17 h1v1H32zM2 18h1v1H2zM4 18h1v1H4zM6 18h4v1H6zM12 18h1v1H12zM14 18h3v1H14zM18 18h3v1H18zM24 18h1v1H24zM26 18h3v1H26zM30 18h1v1H30zM1 19h1v1H1zM4 19h2v1H4zM7 19h2v1H7zM10 19h1v1H10zM13 19h1v1H13zM18 19h3v1H18zM25 19h2v1H25zM32,19 h1v1H32zM2 20h1v1H2zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM11 20h1v1H11zM14 20h1v1H14zM16 20h1v1H16zM19 20h7v1H19zM27 20h1v1H27zM29 20h3v1H29zM0 21h1v1H0zM2 21h2v1H2zM8 21h2v1H8zM11 21h3v1H11zM17 21h2v1H17zM20 21h8v1H20zM29,21 h4v1H29zM2 22h3v1H2zM6 22h1v1H6zM11 22h2v1H11zM16 22h1v1H16zM18 22h1v1H18zM20 22h1v1H20zM22 22h3v1H22zM26 22h1v1H26zM28 22h1v1H28zM32,22 h1v1H32zM1 23h3v1H1zM5 23h1v1H5zM9 23h1v1H9zM12 23h1v1H12zM14 23h4v1H14zM19 23h2v1H19zM25 23h1v1H25zM27 23h1v1H27zM0 24h1v1H0zM2 24h2v1H2zM6 24h4v1H6zM13 24h2v1H13zM16 24h4v1H16zM23 24h6v1H23zM31 24h1v1H31zM8 25h8v1H8zM19 25h4v1H19zM24 25h1v1H24zM28 25h1v1H28zM30 25h2v1H30zM0 26h7v1H0zM8 26h2v1H8zM12 26h4v1H12zM19 26h1v1H19zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM30 26h2v1H30zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h3v1H11zM16 27h2v1H16zM19 27h1v1H19zM21 27h2v1H21zM24 27h1v1H24zM28 27h1v1H28zM30 27h1v1H30zM32,27 h1v1H32zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM11 28h5v1H11zM17 28h2v1H17zM23 28h6v1H23zM30 28h1v1H30zM32,28 h1v1H32zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h3v1H8zM12 29h3v1H12zM18 29h1v1H18zM21 29h3v1H21zM25 29h1v1H25zM27 29h1v1H27zM31,29 h2v1H31zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h3v1H8zM12 30h2v1H12zM20 30h7v1H20zM30 30h1v1H30zM0 31h1v1H0zM6 31h1v1H6zM10 31h4v1H10zM15 31h2v1H15zM18 31h1v1H18zM24 31h3v1H24zM29 31h1v1H29zM32,31 h1v1H32zM0 32h7v1H0zM9 32h2v1H9zM12 32h2v1H12zM16 32h2v1H16zM20 32h1v1H20zM27 32h2v1H27zM30 32h1v1H30z"
                                                                     fill="#000000"
                                                                   />
                                                                   <image
@@ -2098,6 +2098,30 @@ exports[`should match exact snapshot 1`] = `
                                           />
                                         </Blueprint3.Dialog>
                                       </ScanQRStep>
+                                      <Blueprint3.Button
+                                        onClick={[Function]}
+                                      >
+                                        <button
+                                          className="bp3-button"
+                                          onClick={[Function]}
+                                          onKeyDown={[Function]}
+                                          onKeyUp={[Function]}
+                                          type="button"
+                                        >
+                                          <Blueprint3.Icon
+                                            key="leftIcon"
+                                          />
+                                          <span
+                                            className="bp3-button-text"
+                                            key="text"
+                                          >
+                                            Connect Test Device
+                                          </span>
+                                          <Blueprint3.Icon
+                                            key="rightIcon"
+                                          />
+                                        </button>
+                                      </Blueprint3.Button>
                                       <Blueprint3.Button
                                         icon="chevron-left"
                                         intent="danger"
diff --git a/app/containers/__snapshots__/Stepper.spec.tsx.snap b/app/containers/__snapshots__/Stepper.spec.tsx.snap
index 0f5b4ea..713aa09 100644
--- a/app/containers/__snapshots__/Stepper.spec.tsx.snap
+++ b/app/containers/__snapshots__/Stepper.spec.tsx.snap
@@ -1123,7 +1123,7 @@ exports[`should match exact snapshot 1`] = `
                                                     level="H"
                                                     renderAs="svg"
                                                     size={128}
-                                                    value="http://192.168.31.214:65000/99999"
+                                                    value="http://255.255.255.255:65000/99999"
                                                   >
                                                     <QRCodeSVG
                                                       bgColor="rgba(0,0,0,0.0)"
@@ -1138,7 +1138,7 @@ exports[`should match exact snapshot 1`] = `
                                                       includeMargin={false}
                                                       level="H"
                                                       size={128}
-                                                      value="http://192.168.31.214:65000/99999"
+                                                      value="http://255.255.255.255:65000/99999"
                                                     >
                                                       <svg
                                                         height={128}
@@ -1151,7 +1151,7 @@ exports[`should match exact snapshot 1`] = `
                                                           fill="rgba(0,0,0,0.0)"
                                                         />
                                                         <path
-                                                          d="M0 0h7v1H0zM8 0h1v1H8zM10 0h1v1H10zM12 0h6v1H12zM19 0h2v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM8 1h2v1H8zM15 1h1v1H15zM17 1h2v1H17zM22 1h1v1H22zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM8 2h1v1H8zM11 2h1v1H11zM13 2h1v1H13zM15 2h1v1H15zM17 2h2v1H17zM20 2h2v1H20zM23 2h1v1H23zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM10 3h4v1H10zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM9 4h1v1H9zM11 4h1v1H11zM13 4h1v1H13zM15 4h1v1H15zM17 4h2v1H17zM21 4h4v1H21zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM8 5h1v1H8zM10 5h1v1H10zM14 5h1v1H14zM16 5h1v1H16zM20 5h3v1H20zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h6v1H8zM15 7h2v1H15zM18 7h1v1H18zM20 7h3v1H20zM24 7h1v1H24zM2 8h3v1H2zM6 8h1v1H6zM8 8h1v1H8zM11 8h4v1H11zM16 8h1v1H16zM19 8h1v1H19zM23 8h1v1H23zM25 8h3v1H25zM30,8 h3v1H30zM0 9h2v1H0zM3 9h1v1H3zM5 9h1v1H5zM7 9h1v1H7zM9 9h1v1H9zM12 9h2v1H12zM16 9h2v1H16zM20 9h1v1H20zM22 9h5v1H22zM29 9h1v1H29zM31,9 h2v1H31zM0 10h2v1H0zM5 10h6v1H5zM13 10h2v1H13zM17 10h5v1H17zM24 10h1v1H24zM27 10h1v1H27zM0 11h2v1H0zM4 11h2v1H4zM8 11h3v1H8zM15 11h1v1H15zM21 11h3v1H21zM25 11h1v1H25zM30 11h2v1H30zM0 12h7v1H0zM11 12h2v1H11zM15 12h1v1H15zM19 12h1v1H19zM21 12h1v1H21zM24 12h1v1H24zM28 12h2v1H28zM32,12 h1v1H32zM8 13h1v1H8zM10 13h1v1H10zM14 13h1v1H14zM16 13h2v1H16zM19 13h2v1H19zM23 13h5v1H23zM30 13h1v1H30zM32,13 h1v1H32zM0 14h2v1H0zM3 14h1v1H3zM6 14h1v1H6zM11 14h5v1H11zM17 14h2v1H17zM20 14h1v1H20zM22 14h1v1H22zM24 14h2v1H24zM30 14h2v1H30zM0 15h2v1H0zM7 15h1v1H7zM11 15h1v1H11zM13 15h1v1H13zM15 15h1v1H15zM18 15h1v1H18zM20 15h3v1H20zM24 15h1v1H24zM27 15h2v1H27zM30 15h2v1H30zM0 16h1v1H0zM2 16h1v1H2zM4 16h4v1H4zM9 16h1v1H9zM11 16h1v1H11zM18 16h3v1H18zM23 16h2v1H23zM28 16h1v1H28zM0 17h2v1H0zM3 17h1v1H3zM5 17h1v1H5zM13 17h3v1H13zM17 17h2v1H17zM21 17h7v1H21zM31,17 h2v1H31zM0 18h2v1H0zM4 18h4v1H4zM9 18h3v1H9zM14 18h1v1H14zM18 18h1v1H18zM20 18h1v1H20zM24 18h1v1H24zM26 18h1v1H26zM30 18h1v1H30zM2 19h1v1H2zM4 19h1v1H4zM9 19h1v1H9zM11 19h2v1H11zM14 19h1v1H14zM20 19h6v1H20zM27 19h1v1H27zM29 19h2v1H29zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM10 20h1v1H10zM13 20h2v1H13zM16 20h1v1H16zM18 20h1v1H18zM20 20h1v1H20zM23 20h1v1H23zM28 20h2v1H28zM0 21h1v1H0zM3 21h3v1H3zM10 21h1v1H10zM12 21h3v1H12zM16 21h1v1H16zM19 21h1v1H19zM21 21h7v1H21zM30 21h1v1H30zM32,21 h1v1H32zM0 22h1v1H0zM2 22h3v1H2zM6 22h3v1H6zM13 22h1v1H13zM15 22h7v1H15zM27 22h2v1H27zM0 23h1v1H0zM2 23h2v1H2zM7 23h2v1H7zM10 23h2v1H10zM14 23h2v1H14zM17 23h3v1H17zM21 23h1v1H21zM24 23h1v1H24zM28 23h1v1H28zM30 23h2v1H30zM0 24h1v1H0zM6 24h1v1H6zM8 24h1v1H8zM10 24h1v1H10zM12 24h1v1H12zM17 24h1v1H17zM19 24h1v1H19zM23 24h6v1H23zM8 25h1v1H8zM10 25h1v1H10zM17 25h2v1H17zM22 25h3v1H22zM28 25h1v1H28zM30,25 h3v1H30zM0 26h7v1H0zM10 26h1v1H10zM14 26h3v1H14zM18 26h1v1H18zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h2v1H11zM15 27h4v1H15zM20 27h1v1H20zM24 27h1v1H24zM28 27h1v1H28zM30 27h2v1H30zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM8 28h2v1H8zM11 28h2v1H11zM14 28h2v1H14zM17 28h1v1H17zM21 28h2v1H21zM24 28h6v1H24zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h2v1H8zM11 29h1v1H11zM14 29h3v1H14zM18 29h3v1H18zM28 29h2v1H28zM32,29 h1v1H32zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h1v1H8zM10 30h5v1H10zM16 30h5v1H16zM22 30h1v1H22zM25 30h2v1H25zM29 30h1v1H29zM0 31h1v1H0zM6 31h1v1H6zM12 31h3v1H12zM16 31h1v1H16zM20 31h1v1H20zM23 31h1v1H23zM25 31h1v1H25zM27 31h1v1H27zM30 31h1v1H30zM0 32h7v1H0zM9 32h1v1H9zM11 32h1v1H11zM13 32h1v1H13zM19 32h1v1H19zM21 32h1v1H21zM24 32h1v1H24zM26 32h1v1H26zM29 32h1v1H29zM31 32h1v1H31z"
+                                                          d="M0 0h7v1H0zM10 0h1v1H10zM13 0h2v1H13zM16 0h1v1H16zM19 0h1v1H19zM23 0h2v1H23zM26,0 h7v1H26zM0 1h1v1H0zM6 1h1v1H6zM11 1h2v1H11zM14 1h2v1H14zM19 1h6v1H19zM26 1h1v1H26zM32,1 h1v1H32zM0 2h1v1H0zM2 2h3v1H2zM6 2h1v1H6zM9 2h1v1H9zM12 2h3v1H12zM17 2h1v1H17zM19 2h1v1H19zM22 2h3v1H22zM26 2h1v1H26zM28 2h3v1H28zM32,2 h1v1H32zM0 3h1v1H0zM2 3h3v1H2zM6 3h1v1H6zM9 3h1v1H9zM11 3h2v1H11zM14 3h1v1H14zM16 3h5v1H16zM23 3h1v1H23zM26 3h1v1H26zM28 3h3v1H28zM32,3 h1v1H32zM0 4h1v1H0zM2 4h3v1H2zM6 4h1v1H6zM8 4h1v1H8zM12 4h3v1H12zM16 4h5v1H16zM22 4h1v1H22zM26 4h1v1H26zM28 4h3v1H28zM32,4 h1v1H32zM0 5h1v1H0zM6 5h1v1H6zM11 5h1v1H11zM13 5h1v1H13zM17 5h5v1H17zM24 5h1v1H24zM26 5h1v1H26zM32,5 h1v1H32zM0 6h7v1H0zM8 6h1v1H8zM10 6h1v1H10zM12 6h1v1H12zM14 6h1v1H14zM16 6h1v1H16zM18 6h1v1H18zM20 6h1v1H20zM22 6h1v1H22zM24 6h1v1H24zM26,6 h7v1H26zM8 7h1v1H8zM11 7h1v1H11zM14 7h1v1H14zM19 7h1v1H19zM23 7h1v1H23zM2 8h2v1H2zM6 8h3v1H6zM11 8h2v1H11zM14 8h1v1H14zM16 8h1v1H16zM20 8h7v1H20zM28 8h1v1H28zM0 9h4v1H0zM5 9h1v1H5zM7 9h1v1H7zM10 9h1v1H10zM12 9h1v1H12zM14 9h1v1H14zM16 9h4v1H16zM22 9h5v1H22zM29,9 h4v1H29zM1 10h1v1H1zM3 10h1v1H3zM6 10h1v1H6zM13 10h1v1H13zM18 10h1v1H18zM23 10h1v1H23zM26 10h1v1H26zM32,10 h1v1H32zM0 11h1v1H0zM2 11h3v1H2zM7 11h1v1H7zM9 11h1v1H9zM18 11h1v1H18zM20 11h1v1H20zM23 11h1v1H23zM25 11h4v1H25zM1 12h3v1H1zM6 12h1v1H6zM8 12h1v1H8zM11 12h2v1H11zM15 12h2v1H15zM19 12h2v1H19zM23 12h2v1H23zM28 12h1v1H28zM31 12h1v1H31zM7 13h2v1H7zM11 13h2v1H11zM15 13h1v1H15zM19 13h4v1H19zM25 13h1v1H25zM29 13h1v1H29zM1 14h1v1H1zM3 14h2v1H3zM6 14h3v1H6zM13 14h1v1H13zM15 14h1v1H15zM17 14h2v1H17zM21 14h1v1H21zM24 14h1v1H24zM27 14h1v1H27zM0 15h2v1H0zM3 15h1v1H3zM5 15h1v1H5zM9 15h1v1H9zM12 15h1v1H12zM14 15h2v1H14zM17 15h6v1H17zM25 15h1v1H25zM28 15h1v1H28zM30 15h1v1H30zM32,15 h1v1H32zM4 16h3v1H4zM9 16h1v1H9zM11 16h1v1H11zM19 16h1v1H19zM21 16h1v1H21zM23 16h1v1H23zM26 16h3v1H26zM30 16h1v1H30zM32,16 h1v1H32zM3 17h3v1H3zM10 17h4v1H10zM19 17h1v1H19zM23 17h1v1H23zM26 17h1v1H26zM28 17h1v1H28zM30 17h1v1H30zM32,17 h1v1H32zM2 18h1v1H2zM4 18h1v1H4zM6 18h4v1H6zM12 18h1v1H12zM14 18h3v1H14zM18 18h3v1H18zM24 18h1v1H24zM26 18h3v1H26zM30 18h1v1H30zM1 19h1v1H1zM4 19h2v1H4zM7 19h2v1H7zM10 19h1v1H10zM13 19h1v1H13zM18 19h3v1H18zM25 19h2v1H25zM32,19 h1v1H32zM2 20h1v1H2zM4 20h1v1H4zM6 20h1v1H6zM8 20h1v1H8zM11 20h1v1H11zM14 20h1v1H14zM16 20h1v1H16zM19 20h7v1H19zM27 20h1v1H27zM29 20h3v1H29zM0 21h1v1H0zM2 21h2v1H2zM8 21h2v1H8zM11 21h3v1H11zM17 21h2v1H17zM20 21h8v1H20zM29,21 h4v1H29zM2 22h3v1H2zM6 22h1v1H6zM11 22h2v1H11zM16 22h1v1H16zM18 22h1v1H18zM20 22h1v1H20zM22 22h3v1H22zM26 22h1v1H26zM28 22h1v1H28zM32,22 h1v1H32zM1 23h3v1H1zM5 23h1v1H5zM9 23h1v1H9zM12 23h1v1H12zM14 23h4v1H14zM19 23h2v1H19zM25 23h1v1H25zM27 23h1v1H27zM0 24h1v1H0zM2 24h2v1H2zM6 24h4v1H6zM13 24h2v1H13zM16 24h4v1H16zM23 24h6v1H23zM31 24h1v1H31zM8 25h8v1H8zM19 25h4v1H19zM24 25h1v1H24zM28 25h1v1H28zM30 25h2v1H30zM0 26h7v1H0zM8 26h2v1H8zM12 26h4v1H12zM19 26h1v1H19zM22 26h3v1H22zM26 26h1v1H26zM28 26h1v1H28zM30 26h2v1H30zM0 27h1v1H0zM6 27h1v1H6zM9 27h1v1H9zM11 27h3v1H11zM16 27h2v1H16zM19 27h1v1H19zM21 27h2v1H21zM24 27h1v1H24zM28 27h1v1H28zM30 27h1v1H30zM32,27 h1v1H32zM0 28h1v1H0zM2 28h3v1H2zM6 28h1v1H6zM11 28h5v1H11zM17 28h2v1H17zM23 28h6v1H23zM30 28h1v1H30zM32,28 h1v1H32zM0 29h1v1H0zM2 29h3v1H2zM6 29h1v1H6zM8 29h3v1H8zM12 29h3v1H12zM18 29h1v1H18zM21 29h3v1H21zM25 29h1v1H25zM27 29h1v1H27zM31,29 h2v1H31zM0 30h1v1H0zM2 30h3v1H2zM6 30h1v1H6zM8 30h3v1H8zM12 30h2v1H12zM20 30h7v1H20zM30 30h1v1H30zM0 31h1v1H0zM6 31h1v1H6zM10 31h4v1H10zM15 31h2v1H15zM18 31h1v1H18zM24 31h3v1H24zM29 31h1v1H29zM32,31 h1v1H32zM0 32h7v1H0zM9 32h2v1H9zM12 32h2v1H12zM16 32h2v1H16zM20 32h1v1H20zM27 32h2v1H27zM30 32h1v1H30z"
                                                           fill="#000000"
                                                         />
                                                         <image
@@ -1383,6 +1383,30 @@ exports[`should match exact snapshot 1`] = `
                                 />
                               </Blueprint3.Dialog>
                             </ScanQRStep>
+                            <Blueprint3.Button
+                              onClick={[Function]}
+                            >
+                              <button
+                                className="bp3-button"
+                                onClick={[Function]}
+                                onKeyDown={[Function]}
+                                onKeyUp={[Function]}
+                                type="button"
+                              >
+                                <Blueprint3.Icon
+                                  key="leftIcon"
+                                />
+                                <span
+                                  className="bp3-button-text"
+                                  key="text"
+                                >
+                                  Connect Test Device
+                                </span>
+                                <Blueprint3.Icon
+                                  key="rightIcon"
+                                />
+                              </button>
+                            </Blueprint3.Button>
                             <Blueprint3.Button
                               icon="chevron-left"
                               intent="danger"
diff --git a/package.json b/package.json
index e72e2f4..4a0b845 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "start-main-dev": "cross-env START_HOT=1 NODE_ENV=development electron -r ./internals/scripts/BabelRegister ./app/main.dev.ts",
     "start-renderer-dev": "cross-env NODE_ENV=development webpack-dev-server --config configs/webpack.config.renderer.dev.babel.js",
     "start-client-dev": "cd app/client && cross-env SKIP_PREFLIGHT_CHECK=true yarn start",
-    "test": "cross-env BABEL_DISABLE_CACHE=1 jest --silent && yarn test-client",
+    "test": "cross-env BABEL_DISABLE_CACHE=1 RUN_MODE=test jest --silent && yarn test-client",
     "test-client": "cd app/client && cross-env BABEL_DISABLE_CACHE=1 SKIP_PREFLIGHT_CHECK=true yarn test:nowatch",
     "test-all": "yarn lint && yarn tsc && yarn build && yarn test",
     "test-e2e": "node -r @babel/register ./internals/scripts/CheckBuildsExist.js && cross-env NODE_ENV=test testcafe electron:./app ./test/e2e/HomePage.e2e.ts",