From 3880f7a60e7f1c09491447c47e9e5d86f6ce0e82 Mon Sep 17 00:00:00 2001
From: Vitalii Shpital <46756926+VitaliiShpital@users.noreply.github.com>
Date: Fri, 25 Oct 2019 12:53:35 +0300
Subject: [PATCH] web/storagenode: vue-svg-loader implemented (#3347)

---
 web/storagenode/package-lock.json             | 19 +++++++++
 web/storagenode/package.json                  |  1 +
 .../src/app/components/BandwidthChart.vue     |  1 +
 .../src/app/components/BarInfo.vue            |  1 +
 .../src/app/components/ChecksArea.vue         | 12 +++---
 .../src/app/components/DiskSpaceChart.vue     |  1 +
 .../src/app/components/PayoutArea.vue         | 16 +++++---
 .../src/app/components/SNOContentFilling.vue  | 18 +++++---
 .../src/app/components/SNOContentTitle.vue    | 41 +++++++++++--------
 .../src/app/components/SNOFooter.vue          | 21 +++++++---
 .../src/app/components/SNOHeader.vue          | 22 ++++++----
 .../src/app/components/SatelliteSelection.vue | 10 +++--
 .../components/SatelliteSelectionDropdown.vue | 18 +++++---
 web/storagenode/src/app/components/VChart.vue |  1 +
 web/storagenode/src/app/types/svg.d.ts        |  7 ++++
 .../src/app/views/DashboardArea.vue           |  1 +
 web/storagenode/static/images/checksInfo.svg  |  5 +++
 web/storagenode/static/images/disqualify.svg  |  3 ++
 .../static/images/dropdownArrow.svg           |  3 ++
 .../static/images/largeDisqualify.svg         |  3 ++
 web/storagenode/static/images/offline.svg     |  4 ++
 web/storagenode/static/images/online.svg      |  4 ++
 web/storagenode/static/images/refresh.svg     |  4 ++
 web/storagenode/static/images/storjIcon.svg   |  3 ++
 web/storagenode/static/images/version.svg     |  4 ++
 web/storagenode/static/images/wallet.svg      |  4 ++
 web/storagenode/tsconfig.json                 |  3 +-
 web/storagenode/tslint.json                   |  8 +++-
 web/storagenode/vue.config.js                 |  8 ++++
 29 files changed, 190 insertions(+), 56 deletions(-)
 create mode 100644 web/storagenode/src/app/types/svg.d.ts
 create mode 100644 web/storagenode/static/images/checksInfo.svg
 create mode 100644 web/storagenode/static/images/disqualify.svg
 create mode 100644 web/storagenode/static/images/dropdownArrow.svg
 create mode 100644 web/storagenode/static/images/largeDisqualify.svg
 create mode 100644 web/storagenode/static/images/offline.svg
 create mode 100644 web/storagenode/static/images/online.svg
 create mode 100644 web/storagenode/static/images/refresh.svg
 create mode 100644 web/storagenode/static/images/storjIcon.svg
 create mode 100644 web/storagenode/static/images/version.svg
 create mode 100644 web/storagenode/static/images/wallet.svg

diff --git a/web/storagenode/package-lock.json b/web/storagenode/package-lock.json
index 755b17257..2dc725cd9 100644
--- a/web/storagenode/package-lock.json
+++ b/web/storagenode/package-lock.json
@@ -13129,6 +13129,15 @@
       "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=",
       "dev": true
     },
+    "svg-to-vue": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/svg-to-vue/-/svg-to-vue-0.4.0.tgz",
+      "integrity": "sha512-g/ZHtEFf4QDsDtTk9tuYX/MJ2HESTUBMTkuLoffQGQ3xMtlmD9Ec4YyTgmMkP1P8QJtWWu2FiGdOnlKaXc/X/Q==",
+      "dev": true,
+      "requires": {
+        "svgo": "^1.1.1"
+      }
+    },
     "svgo": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.0.tgz",
@@ -14200,6 +14209,16 @@
         "loader-utils": "^1.0.2"
       }
     },
+    "vue-svg-loader": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/vue-svg-loader/-/vue-svg-loader-0.12.0.tgz",
+      "integrity": "sha512-pg8H6iKCj+DAC7FZuxdfGJMHiFpJPv/YyoN1M7Iqlf+Hu4eU6Q/W/sEFx978syQA+aOx0NXrp+uQUAajqQvXbQ==",
+      "dev": true,
+      "requires": {
+        "loader-utils": "^1.2.3",
+        "svg-to-vue": "^0.4.0"
+      }
+    },
     "vue-template-compiler": {
       "version": "2.6.10",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.6.10.tgz",
diff --git a/web/storagenode/package.json b/web/storagenode/package.json
index b8d7e6f69..e4e6c1779 100644
--- a/web/storagenode/package.json
+++ b/web/storagenode/package.json
@@ -32,6 +32,7 @@
     "tslint-consistent-codestyle": "1.15.1",
     "tslint-loader": "3.5.4",
     "typescript": "3.5.3",
+    "vue-svg-loader": "0.12.0",
     "vue-template-compiler": "2.6.10",
     "vue-tslint": "0.3.2",
     "vue-tslint-loader": "3.5.6",
diff --git a/web/storagenode/src/app/components/BandwidthChart.vue b/web/storagenode/src/app/components/BandwidthChart.vue
index 85df93ee1..c77368d09 100644
--- a/web/storagenode/src/app/components/BandwidthChart.vue
+++ b/web/storagenode/src/app/components/BandwidthChart.vue
@@ -18,6 +18,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import VChart from '@/app/components/VChart.vue';
+
 import { ChartData } from '@/app/types/chartData';
 import { ChartUtils } from '@/app/utils/chart';
 import { formatBytes } from '@/app/utils/converter';
diff --git a/web/storagenode/src/app/components/BarInfo.vue b/web/storagenode/src/app/components/BarInfo.vue
index 9e40743ed..79e2c5e8f 100644
--- a/web/storagenode/src/app/components/BarInfo.vue
+++ b/web/storagenode/src/app/components/BarInfo.vue
@@ -22,6 +22,7 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import VBar from '@/app/components/VBar.vue';
 import VInfo from '@/app/components/VInfo.vue';
+
 import { formatBytes } from '@/app/utils/converter';
 
 @Component ({
diff --git a/web/storagenode/src/app/components/ChecksArea.vue b/web/storagenode/src/app/components/ChecksArea.vue
index 1cab508aa..19e12e545 100644
--- a/web/storagenode/src/app/components/ChecksArea.vue
+++ b/web/storagenode/src/app/components/ChecksArea.vue
@@ -11,11 +11,10 @@
                 is-custom-position="true"
             >
                 <div>
-                    <svg class="checks-area-image" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Blue info icon with question mark">
-                        <rect class="checks-area-svg-rect" width="18" height="18" rx="9" fill="#5A667C"/>
-                        <path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
-                        <path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
-                    </svg>
+                    <ChecksInfoIcon
+                        class="checks-area-image"
+                        alt="Blue info icon with question mark"
+                    />
                 </div>
             </VInfo>
         </div>
@@ -28,9 +27,12 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 
 import VInfo from '@/app/components/VInfo.vue';
 
+import ChecksInfoIcon from '@/../static/images/checksInfo.svg';
+
 @Component ({
     components: {
         VInfo,
+        ChecksInfoIcon,
     },
 })
 export default class ChecksArea extends Vue {
diff --git a/web/storagenode/src/app/components/DiskSpaceChart.vue b/web/storagenode/src/app/components/DiskSpaceChart.vue
index be88c694f..6564bd45e 100644
--- a/web/storagenode/src/app/components/DiskSpaceChart.vue
+++ b/web/storagenode/src/app/components/DiskSpaceChart.vue
@@ -18,6 +18,7 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import VChart from '@/app/components/VChart.vue';
+
 import { ChartData } from '@/app/types/chartData';
 import { ChartUtils } from '@/app/utils/chart';
 import { formatBytes } from '@/app/utils/converter';
diff --git a/web/storagenode/src/app/components/PayoutArea.vue b/web/storagenode/src/app/components/PayoutArea.vue
index d0ad68ec3..23c115899 100644
--- a/web/storagenode/src/app/components/PayoutArea.vue
+++ b/web/storagenode/src/app/components/PayoutArea.vue
@@ -3,10 +3,10 @@
 
 <template>
     <div class="payout-container">
-        <svg class="payout-container__image" width="40" height="35" viewBox="0 0 40 35" fill="none" xmlns="http://www.w3.org/2000/svg" alt="wallet image">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M2 7C2.57391 7.33667 3.23903 7.53563 3.94595 7.53563C14.9031 7.52607 27.1226 7.53563 36.5405 7.53563C37.3653 7.53563 38 8.17454 38 9.00473V13.9017H23.8919C22.5616 13.9017 21.4595 15.0112 21.4595 16.3502V24.1854C21.4595 25.5244 22.5616 26.6339 23.8919 26.6339H38V31.5309C38 32.3611 37.3653 33 36.5405 33H3.45946C2.63472 33 2 32.3611 2 31.5309V7Z" fill="#A5C7EF"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90244 0C1.75688 0 0 1.75078 0 3.88889V31.5972C0 33.4657 1.53961 35 3.41463 35H36.5854C38.4604 35 40 33.4657 40 31.5972V9.23611C40 7.3676 38.4604 5.83333 36.5854 5.83333H34.1463V0.972222C34.1463 0.463313 33.6814 0 33.1707 0H3.90244ZM3.90244 1.94444H32.1951V5.83333H3.90244C2.80488 5.83333 1.95122 4.98264 1.95122 3.88889C1.95122 2.79514 2.80488 1.94444 3.90244 1.94444ZM3.90244 7.77768C3.19361 7.77768 2.52668 7.58017 1.95122 7.24597V31.5971C1.95122 32.4212 2.58766 33.0555 3.41463 33.0555H36.5854C37.4123 33.0555 38.0488 32.4212 38.0488 31.5971V26.736H23.9024C22.5686 26.736 21.4634 25.6347 21.4634 24.3055V16.5277C21.4634 15.1985 22.5686 14.0971 23.9024 14.0971H38.0488V9.23601C38.0488 8.41191 37.4123 7.77768 36.5854 7.77768C33.5841 7.77768 30.2991 7.77672 26.8612 7.77572C19.4816 7.77356 11.3975 7.7712 3.90244 7.77768ZM23.9024 16.0417H38.0488V24.7917H23.9024C23.6147 24.7917 23.4146 24.5923 23.4146 24.3056V16.5278C23.4146 16.241 23.6147 16.0417 23.9024 16.0417ZM26.8293 20.4167C26.8293 19.3419 27.702 18.4722 28.7805 18.4722C29.859 18.4722 30.7317 19.3419 30.7317 20.4167C30.7317 21.4914 29.859 22.3611 28.7805 22.3611C27.702 22.3611 26.8293 21.4914 26.8293 20.4167Z" fill="#224CA5"/>
-        </svg>
+        <WalletIcon
+            class="payout-container__image"
+            alt="wallet image"
+        />
         <div class="payout-container__wallet-address-section">
             <p class="payout-container__wallet-address-section__label">{{label}}</p>
             <p><b class="payout-container__wallet-address-section__bold-text">{{walletAddress}}</b></p>
@@ -20,7 +20,13 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
-@Component
+import WalletIcon from '@/../static/images/wallet.svg';
+
+@Component({
+    components: {
+        WalletIcon
+    },
+})
 export default class PayoutArea extends Vue {
     @Prop({default: ''})
     private readonly label: string;
diff --git a/web/storagenode/src/app/components/SNOContentFilling.vue b/web/storagenode/src/app/components/SNOContentFilling.vue
index b0c784bf7..1f5eabdbe 100644
--- a/web/storagenode/src/app/components/SNOContentFilling.vue
+++ b/web/storagenode/src/app/components/SNOContentFilling.vue
@@ -5,15 +5,17 @@
     <div class="info-area">
         <SatelliteSelection/>
         <div v-if="isDisqualifiedInfoShown" class="info-area__disqualified-info">
-            <svg class="info-area__disqualified-info__image" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Disqualified image">
-                <path d="M37.0279 30.9608C36.5357 30.0515 36.0404 29.1405 35.5467 28.2265C34.6279 26.5312 33.7108 24.8358 32.7936 23.1405C31.692 21.1092 30.5936 19.0749 29.4936 17.0437C28.4311 15.0828 27.3717 13.1249 26.3092 11.1657C25.528 9.72504 24.7498 8.28289 23.9686 6.84088C23.7576 6.45026 23.5467 6.05964 23.3358 5.67212C23.117 5.26588 22.8858 4.87525 22.5545 4.54401C21.3983 3.37993 19.4795 3.15648 18.0889 4.0362C17.492 4.41433 17.0608 4.95028 16.7296 5.56432C16.2218 6.50184 15.7139 7.43933 15.2061 8.37996C14.2811 10.0909 13.3546 11.8018 12.4296 13.5128C11.3155 15.555 10.2108 17.602 9.10144 19.6488C8.05144 21.5894 6.99988 23.5269 5.94832 25.4692C5.17956 26.891 4.40924 28.3098 3.63896 29.7316C3.43584 30.1066 3.23272 30.4816 3.0296 30.8566C2.74523 31.3847 2.5218 31.919 2.45148 32.5284C2.25305 34.2503 3.45928 35.9472 5.12648 36.3691C5.56712 36.4816 6.00148 36.4863 6.44681 36.4863H33.9468H33.9906C34.8968 36.4675 35.7562 36.1269 36.4202 35.5097C37.0609 34.916 37.4359 34.1035 37.5421 33.2441C37.6437 32.4347 37.4093 31.6691 37.028 30.9613L37.0279 30.9608ZM18.4371 13.9528C18.4371 13.0778 19.1528 12.4294 19.9996 12.3904C20.8434 12.3513 21.5621 13.1372 21.5621 13.9528V24.956C21.5621 25.831 20.8464 26.4795 19.9996 26.5185C19.1558 26.5576 18.4371 25.7716 18.4371 24.956V13.9528ZM19.9996 31.8404C19.1215 31.8404 18.409 31.1295 18.409 30.2498C18.409 29.3717 19.1199 28.6592 19.9996 28.6592C20.8777 28.6592 21.5902 29.3701 21.5902 30.2498C21.5902 31.1279 20.8778 31.8404 19.9996 31.8404Z" fill="#F4D638"/>
-            </svg>
+            <LargeDisqualificationIcon
+                class="info-area__disqualified-info__image"
+                alt="Disqualified image"
+            />
             <p class="info-area__disqualified-info__info">Your node has been paused on <b>{{getDisqualificationDate}}</b>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p>
         </div>
         <div v-else-if="doDisqualifiedSatellitesExist" class="info-area__disqualified-info">
-            <svg class="info-area__disqualified-info__image" width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Disqualified image">
-                <path d="M37.0279 30.9608C36.5357 30.0515 36.0404 29.1405 35.5467 28.2265C34.6279 26.5312 33.7108 24.8358 32.7936 23.1405C31.692 21.1092 30.5936 19.0749 29.4936 17.0437C28.4311 15.0828 27.3717 13.1249 26.3092 11.1657C25.528 9.72504 24.7498 8.28289 23.9686 6.84088C23.7576 6.45026 23.5467 6.05964 23.3358 5.67212C23.117 5.26588 22.8858 4.87525 22.5545 4.54401C21.3983 3.37993 19.4795 3.15648 18.0889 4.0362C17.492 4.41433 17.0608 4.95028 16.7296 5.56432C16.2218 6.50184 15.7139 7.43933 15.2061 8.37996C14.2811 10.0909 13.3546 11.8018 12.4296 13.5128C11.3155 15.555 10.2108 17.602 9.10144 19.6488C8.05144 21.5894 6.99988 23.5269 5.94832 25.4692C5.17956 26.891 4.40924 28.3098 3.63896 29.7316C3.43584 30.1066 3.23272 30.4816 3.0296 30.8566C2.74523 31.3847 2.5218 31.919 2.45148 32.5284C2.25305 34.2503 3.45928 35.9472 5.12648 36.3691C5.56712 36.4816 6.00148 36.4863 6.44681 36.4863H33.9468H33.9906C34.8968 36.4675 35.7562 36.1269 36.4202 35.5097C37.0609 34.916 37.4359 34.1035 37.5421 33.2441C37.6437 32.4347 37.4093 31.6691 37.028 30.9613L37.0279 30.9608ZM18.4371 13.9528C18.4371 13.0778 19.1528 12.4294 19.9996 12.3904C20.8434 12.3513 21.5621 13.1372 21.5621 13.9528V24.956C21.5621 25.831 20.8464 26.4795 19.9996 26.5185C19.1558 26.5576 18.4371 25.7716 18.4371 24.956V13.9528ZM19.9996 31.8404C19.1215 31.8404 18.409 31.1295 18.409 30.2498C18.409 29.3717 19.1199 28.6592 19.9996 28.6592C20.8777 28.6592 21.5902 29.3701 21.5902 30.2498C21.5902 31.1279 20.8778 31.8404 19.9996 31.8404Z" fill="#F4D638"/>
-            </svg>
+            <LargeDisqualificationIcon
+                class="info-area__disqualified-info__image"
+                alt="Disqualified image"
+            />
             <p class="info-area__disqualified-info__info">Your node has been paused on<span v-for="disqualified in disqualifiedSatellites"><b> {{disqualified.id}}</b></span>. If you have any questions regarding this please contact our <a href="https://support.storj.io/hc/en-us/requests/new">support</a>.</p>
         </div>
         <p class="info-area__title">Utilization & Remaining</p>
@@ -84,6 +86,9 @@ import ChecksArea from '@/app/components/ChecksArea.vue';
 import DiskSpaceChart from '@/app/components/DiskSpaceChart.vue';
 import PayoutArea from '@/app/components/PayoutArea.vue';
 import SatelliteSelection from '@/app/components/SatelliteSelection.vue';
+
+import LargeDisqualificationIcon from '@/../static/images/largeDisqualify.svg';
+
 import { formatBytes } from '@/app/utils/converter';
 import { BandwidthInfo, DiskSpaceInfo, SatelliteInfo } from '@/storagenode/dashboard';
 
@@ -108,6 +113,7 @@ class Checks {
         BarInfo,
         ChecksArea,
         PayoutArea,
+        LargeDisqualificationIcon,
     },
 })
 export default class SNOContentFilling extends Vue {
diff --git a/web/storagenode/src/app/components/SNOContentTitle.vue b/web/storagenode/src/app/components/SNOContentTitle.vue
index 8dd36f130..30b7fc3d8 100644
--- a/web/storagenode/src/app/components/SNOContentTitle.vue
+++ b/web/storagenode/src/app/components/SNOContentTitle.vue
@@ -19,16 +19,17 @@
                 is-custom-position="true"
             >
                 <div class="node-status-svg-container" @mouseenter.stop="refreshTime">
-                    <svg class="check-if-online-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="online status image">
-                        <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.35717 9.90354C3.30671 8.7687 5.03287 7.1697 6.08406 8.30604L7.78632 10.144L11.8784 5.31912C12.8797 4.13577 14.6803 5.66083 13.6792 6.84279L8.7531 12.6514C8.28834 13.1977 7.4706 13.2659 6.96364 12.7182L4.35717 9.90354Z" fill="#F4F6F9"/>
-                    </svg>
+                    <OnlineIcon
+                        class="check-if-online-svg"
+                        alt="online status image"
+                    />
                 </div>
             </VInfo>
-            <svg class="check-if-offline-svg" v-if="!online" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="offline status image">
-                <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/>
-                <path d="M11 7L7 11M7 7L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
+            <OfflineIcon
+                class="check-if-offline-svg"
+                v-if="!online"
+                alt="offline status image"
+            />
             <p class="title__info__version-title"><b>Node Version</b></p>
             <p class="title__info__version-value">{{version}}</p>
             <VInfo
@@ -38,10 +39,10 @@
                 is-custom-position="true"
             >
                 <div class="version-svg-container">
-                    <svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
-                        <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
-                        <path fill-rule="evenodd" clip-rule="evenodd" d="M4.35717 9.90354C3.30671 8.7687 5.03287 7.1697 6.08406 8.30604L7.78632 10.144L11.8784 5.31912C12.8797 4.13577 14.6803 5.66083 13.6792 6.84279L8.7531 12.6514C8.28834 13.1977 7.4706 13.2659 6.96364 12.7182L4.35717 9.90354Z" fill="#F4F6F9"/>
-                    </svg>
+                    <VersionIcon
+                        class="version-svg"
+                        alt="version status image"
+                    />
                 </div>
             </VInfo>
             <VInfo
@@ -51,10 +52,10 @@
                 is-custom-position="true"
             >
                 <div class="version-svg-container">
-                    <svg class="version-svg" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="version status image">
-                        <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/>
-                        <path d="M11 7L7 11M7 7L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>
+                    <VersionIcon
+                        class="version-svg"
+                        alt="version status image"
+                    />
                 </div>
             </VInfo>
         </div>
@@ -65,6 +66,11 @@
 import { Component, Vue } from 'vue-property-decorator';
 
 import VInfo from '@/app/components/VInfo.vue';
+
+import OfflineIcon from '@/../static/images/offline.svg';
+import OnlineIcon from '@/../static/images/online.svg';
+import VersionIcon from '@/../static/images/version.svg';
+
 import { StatusOnline } from '@/app/store/modules/node';
 import { datesDiffInHoursAndMinutes } from '@/app/utils/date';
 
@@ -90,6 +96,9 @@ class NodeInfo {
 @Component ({
     components: {
         VInfo,
+        OnlineIcon,
+        OfflineIcon,
+        VersionIcon,
     },
 })
 export default class SNOContentTitle extends Vue {
diff --git a/web/storagenode/src/app/components/SNOFooter.vue b/web/storagenode/src/app/components/SNOFooter.vue
index 150053a26..ae47bf9fe 100644
--- a/web/storagenode/src/app/components/SNOFooter.vue
+++ b/web/storagenode/src/app/components/SNOFooter.vue
@@ -1,12 +1,13 @@
 // Copyright (C) 2019 Storj Labs, Inc.
 // See LICENSE for copying information.
 
-<template functional>
+<template>
     <div class="footer">
         <div class="footer__content-holder">
-            <svg width="125" height="50" viewBox="0 0 125 50" fill="none" xmlns="http://www.w3.org/2000/svg" alt="storj icon">
-                <path fill-rule="evenodd" clip-rule="evenodd" d="M42.3431 18.0284C42.1011 18.1731 42.0171 18.3205 42.0178 18.5966C42.0261 22.8699 42.0254 27.1434 42.0189 31.4158C42.0185 31.6726 42.0838 31.8274 42.3192 31.9629C43.8364 32.8402 44.6043 34.4585 44.3318 36.1596C44.0704 37.7897 42.7681 39.1288 41.0811 39.4494C40.1031 39.636 39.1557 39.4875 38.2985 38.9612C38.0372 38.8012 37.8532 38.8295 37.6082 38.9706C33.9366 41.0985 30.261 43.2208 26.5811 45.3351C26.3295 45.48 26.2352 45.6391 26.2359 45.933C26.2397 47.989 24.6537 49.7782 22.6724 49.9776C20.5622 50.1907 18.6966 48.8639 18.2407 46.8151C18.1708 46.5001 18.1473 46.1707 18.1401 45.8484C18.1348 45.6299 18.0743 45.4962 17.8802 45.3837C14.1495 43.2365 10.4219 41.0842 6.69594 38.9287C6.49419 38.8111 6.33565 38.8102 6.13211 38.9334C3.69746 40.3997 0.594411 38.9941 0.0780575 36.2548C-0.247742 34.5243 0.456254 32.9063 2.0042 31.9949C2.24871 31.8504 2.35933 31.705 2.35888 31.406C2.34768 27.1322 2.34948 22.8593 2.35619 18.5863C2.35642 18.3295 2.28969 18.1776 2.0548 18.0412C0.500814 17.1381 -0.230277 15.5689 0.0682052 13.8071C0.364672 12.0569 1.71736 10.7729 3.4778 10.522C4.42138 10.3878 5.33138 10.5599 6.14779 11.0814C6.33745 11.2028 6.47829 11.199 6.67131 11.0877C10.3863 8.9367 14.1042 6.79175 17.8251 4.65174C18.0501 4.52224 18.1379 4.37371 18.1386 4.10845C18.1446 1.75492 20.0034 -0.0467939 22.3585 0.000926284C24.1942 0.0376686 25.9119 1.55374 26.1723 3.36621C26.1793 3.41548 26.1875 3.45916 26.1956 3.50217V3.50219C26.2149 3.60466 26.2334 3.70333 26.2334 3.86492C26.2334 4.36743 26.4184 4.58049 26.8093 4.80408C30.4198 6.87106 34.0201 8.95417 37.618 11.0409C37.8652 11.1847 38.0448 11.1905 38.3023 11.0444C40.7462 9.64981 43.7093 10.9864 44.3042 13.7461C44.3434 13.9258 44.3525 14.1121 44.3611 14.2881C44.3648 14.3636 44.3685 14.4372 44.3743 14.5076C44.3342 16.0741 43.6546 17.2416 42.3431 18.0284ZM17.6556 32.0174L17.6168 32.0175C16.3401 32.0175 15.1442 31.6613 14.1321 31.0436C11.2906 32.6912 9.15439 33.9227 7.7233 34.738C7.43198 34.9036 7.33435 35.0915 7.33727 35.4238C7.35563 37.2835 5.94181 38.7741 4.08397 38.7879C1.96549 38.8039 0.655569 37.0295 0.737971 35.2972C0.809176 33.8183 2.07588 32.1161 4.15876 32.1694C4.78483 32.1862 5.35694 32.4017 5.89412 32.7261C6.00832 32.7951 6.22663 32.8084 6.33904 32.7445C6.59064 32.6013 6.84211 32.4578 7.09346 32.3141L7.0967 32.3364L12.2763 29.3459C11.5069 28.3014 11.0527 27.0198 11.0527 25.6289C11.0527 23.8295 11.8133 22.2122 13.0335 21.0551L8.58736 18.4835L8.56042 18.5303C7.84767 18.1179 7.13548 17.7047 6.42435 17.2897C6.19349 17.155 6.03765 17.1662 5.81239 17.3094C3.81594 18.5786 1.16968 17.4042 0.775141 15.084C0.465687 13.2673 1.65603 11.57 3.53067 11.2613C5.44158 10.9472 7.02468 12.3019 7.28151 13.9215C7.28822 13.9638 7.29634 14.0065 7.3045 14.0493C7.33063 14.1867 7.35705 14.3255 7.33794 14.4572C7.27524 14.8905 7.45661 15.1192 7.83257 15.3325C9.27419 16.1514 10.7107 16.9791 12.1472 17.8068C13.2086 18.4185 14.27 19.0301 15.3334 19.638C15.6027 19.5408 15.8802 19.4602 16.1645 19.3976C17.2751 17.777 19.0269 16.6589 21.0142 16.329V9.96231H20.9659C20.9672 9.12285 20.9692 8.28338 20.9718 7.44386C20.9727 7.16785 20.8325 7.07129 20.6315 6.96151C19.3224 6.24571 18.7799 4.97093 18.8889 3.8234C19.0307 2.33624 19.8366 1.3144 21.2824 0.873714C22.8709 0.389567 24.5646 1.20664 25.2276 2.73615C25.885 4.25244 25.3389 6.03063 23.902 6.85666C23.5012 7.08697 23.4013 7.33498 23.4036 7.76289C23.4161 10.0783 23.4148 12.3939 23.4135 14.7095V14.7104C23.4132 15.2467 23.4129 15.7829 23.4128 16.3191C25.6546 16.6719 27.565 18.0218 28.6354 19.8979L34.7101 16.3776L34.7097 16.3768C35.3733 15.9951 36.0374 15.6141 36.7018 15.2337C36.9593 15.0863 37.0395 14.9216 37.0368 14.6328C37.0177 12.9375 38.0538 11.6479 39.703 11.2825C41.5823 10.8663 43.4639 12.301 43.6244 14.2204C43.772 15.9896 42.5722 17.4884 40.9168 17.7788C40.0664 17.9277 39.2558 17.774 38.5328 17.2886C38.3299 17.1523 38.1897 17.1544 37.9831 17.2738L37.1928 17.7321L32.4269 20.4839C31.7098 20.8963 30.9924 21.3081 30.2747 21.7194C30.2379 21.7405 30.2053 21.7616 30.1769 21.783L30.1558 21.7952C31.7921 22.7519 32.8948 24.5023 32.8948 26.519C32.8948 27.5351 32.6139 28.4864 32.1239 29.3026L32.7137 29.6437C32.7526 29.6979 32.8141 29.747 32.9026 29.7973C34.5999 30.764 36.2902 31.7431 37.9766 32.7288C38.2007 32.8601 38.3525 32.8247 38.5625 32.6952C40.5554 31.4635 43.0225 32.4918 43.5655 34.7707C44.0185 36.6724 42.6349 38.5529 40.6822 38.7606C38.6931 38.9728 36.9871 37.3736 37.0386 35.4159C37.0471 35.0781 36.9358 34.8975 36.6474 34.7342C36.4926 34.6463 36.3378 34.5582 36.1831 34.47L36.2059 34.4524L30.4037 31.0895C29.6646 31.5746 28.8013 31.8923 27.8701 31.9875C27.7466 32.0074 27.6211 32.0175 27.4946 32.0175H23.4595V32.5302C23.4252 32.5851 23.4078 32.66 23.4078 32.7651C23.4154 36.0361 23.4148 39.3077 23.4078 42.5793C23.4071 42.8132 23.5122 42.9197 23.7025 43.0169C25.1051 43.7383 25.6298 45.1789 25.484 46.2702C25.2686 47.8792 24.2627 48.9252 22.7316 49.2243C20.9935 49.5644 19.1926 48.2399 18.9216 46.4859C18.6881 44.9761 19.5441 43.5644 20.6785 43.0173C20.895 42.9136 20.9698 42.7783 20.9696 42.5406C20.9635 39.1724 20.9629 35.8049 20.9703 32.4365C20.9703 32.3933 20.97 32.2537 20.9693 32.0175H17.6655L17.6556 32.0174ZM58.1648 32.9824C61.5132 32.9824 63.8637 31.3426 63.8637 28.2605V28.2161C63.8637 25.511 62.0897 24.3791 58.9409 23.5587C56.2578 22.8713 55.5926 22.45 55.5926 21.43V21.3857C55.5926 20.6318 56.28 20.0331 57.5883 20.0331C58.8966 20.0331 60.2492 20.6096 61.624 21.5631L63.398 18.991C61.8236 17.7271 59.8944 17.0175 57.6326 17.0175C54.4617 17.0175 52.1999 18.8801 52.1999 21.6961V21.7405C52.1999 24.8226 54.2177 25.6874 57.3444 26.4856C59.9388 27.1508 60.471 27.5943 60.471 28.459V28.5034C60.471 29.4125 59.6283 29.9668 58.2313 29.9668C56.4574 29.9668 54.9939 29.2351 53.5969 28.0821L51.579 30.499C53.4416 32.162 55.8143 32.9824 58.1648 32.9824ZM115.897 20.8091H120.91V27.2321C120.91 28.9985 120.126 29.7618 118.863 29.7618C117.795 29.7618 116.946 29.1948 116.075 28.2353L113.962 30.5905C115.007 31.8336 116.576 32.8804 118.95 32.8804C122.174 32.8804 124.352 31.0921 124.352 27.3847V17.3965H120.91H115.897V20.8091ZM78.5257 20.584H73.9746V32.6767H70.4453V20.584H65.8942V17.3965H78.5257V20.584ZM88.0031 32.9315C92.7202 32.9315 96.1488 29.3767 96.1488 25.0368V24.9931C96.1488 20.6532 92.7639 17.142 88.0467 17.142C83.3296 17.142 79.901 20.6968 79.901 25.0368V25.0804C79.901 29.4203 83.2859 32.9315 88.0031 32.9315ZM92.4917 25.0289V24.9859C92.4917 22.4021 90.6276 20.249 88.001 20.249C85.3744 20.249 83.5527 22.3591 83.5527 24.9428V24.9859C83.5527 27.5696 85.4168 29.7227 88.0434 29.7227C90.67 29.7227 92.4917 27.6127 92.4917 25.0289ZM108.268 32.6767H112.193L108.464 27.2195C110.405 26.4991 111.735 24.9493 111.735 22.4826V22.439C111.735 19.2956 109.576 17.3965 105.979 17.3965H98.9134V32.6767H102.359V27.787H104.997L108.268 32.6767ZM108.189 22.5896V22.5477C108.189 21.1651 107.227 20.4529 105.659 20.4529H102.363V24.6634H105.722C107.29 24.6634 108.189 23.8255 108.189 22.5896ZM40.3369 34.5474C39.8017 34.5463 39.411 34.9415 39.411 35.4857C39.4112 36.0173 39.8217 36.4338 40.3445 36.4338C40.8329 36.4329 41.302 35.964 41.2964 35.4792C41.2912 34.9756 40.8521 34.5501 40.3369 34.5474ZM21.2462 4.04925C21.2482 3.52231 21.6589 3.11568 22.1896 3.11523C22.7211 3.11479 23.1287 3.52052 23.1307 4.04947C23.132 4.5567 22.6893 5.00522 22.1913 4.99895C21.6851 4.99402 21.2446 4.55087 21.2462 4.04925ZM4.02898 36.4338C4.54914 36.4381 4.96316 36.0207 4.96518 35.4895C4.96719 34.9451 4.57847 34.5479 4.04398 34.5474C3.52808 34.5474 3.07845 34.9807 3.08091 35.4754C3.08315 35.9705 3.53748 36.4291 4.02898 36.4338ZM22.1996 45.033C22.7298 45.0366 23.1327 45.4401 23.1302 45.9652C23.1268 46.4883 22.718 46.8824 22.1806 46.8791C21.6476 46.8764 21.2401 46.47 21.2459 45.9464C21.252 45.4257 21.6674 45.029 22.1996 45.033ZM3.08103 14.5417C3.09693 15.0612 3.517 15.4531 4.0544 15.4484C4.59829 15.4434 4.97335 15.057 4.96507 14.5087C4.95723 13.9632 4.57299 13.5944 4.01991 13.6027C3.49013 13.6104 3.06513 14.0354 3.08103 14.5417ZM40.3252 15.4499C39.7819 15.4461 39.4055 15.059 39.4109 14.5107C39.4163 13.9666 39.8017 13.5964 40.3547 13.6036C40.885 13.611 41.307 14.0322 41.2945 14.5412C41.282 15.057 40.859 15.4537 40.3252 15.4499ZM13.3333 25.6288C13.3333 27.8975 15.2511 29.7367 17.6167 29.7367L17.6594 29.7365L17.6654 29.7367H27.4946C27.5085 29.7367 27.5216 29.7334 27.5333 29.7277C29.2561 29.6038 30.614 28.2145 30.614 26.5189C30.614 24.7417 29.1224 23.3011 27.2824 23.3011H27.2738C27.2359 20.648 24.998 18.5086 22.2429 18.5086C20.1415 18.5086 18.341 19.7532 17.588 21.5211C15.2356 21.5359 13.3333 23.3693 13.3333 25.6288Z" fill="#133E9C"/>
-            </svg>
+            <StorjIcon
+                class="footer__content-holder__icon"
+                alt="storj icon"
+            />
             <a class="footer__content-holder__community-link" href="https://forum.storj.io/c/sno-category" target="_blank" rel="noopener">Community</a>
             <a class="footer__content-holder__support-link" href="https://support.storj.io" target="_blank" rel="noopener">Support</a>
         </div>
@@ -16,7 +17,13 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
-@Component
+import StorjIcon from '@/../static/images/storjIcon.svg';
+
+@Component({
+    components: {
+        StorjIcon,
+    },
+})
 export default class SNOFooter extends Vue {}
 </script>
 
@@ -35,6 +42,10 @@ export default class SNOFooter extends Vue {}
             justify-content: space-between;
             align-items: center;
 
+            &__icon {
+                min-width: 125px;
+            }
+
             &__community-link,
             &__support-link {
                 font-size: 14px;
diff --git a/web/storagenode/src/app/components/SNOHeader.vue b/web/storagenode/src/app/components/SNOHeader.vue
index 4ec457bde..eab75d6f1 100644
--- a/web/storagenode/src/app/components/SNOHeader.vue
+++ b/web/storagenode/src/app/components/SNOHeader.vue
@@ -5,14 +5,12 @@
     <div class="header">
         <div class="header__content-holder">
             <div class="header__content-holder__logo-area">
-                <svg width="125" height="50" viewBox="0 0 125 50" fill="none" xmlns="http://www.w3.org/2000/svg" alt="storj icon">
-                    <path fill-rule="evenodd" clip-rule="evenodd" d="M42.3431 18.0284C42.1011 18.1731 42.0171 18.3205 42.0178 18.5966C42.0261 22.8699 42.0254 27.1434 42.0189 31.4158C42.0185 31.6726 42.0838 31.8274 42.3192 31.9629C43.8364 32.8402 44.6043 34.4585 44.3318 36.1596C44.0704 37.7897 42.7681 39.1288 41.0811 39.4494C40.1031 39.636 39.1557 39.4875 38.2985 38.9612C38.0372 38.8012 37.8532 38.8295 37.6082 38.9706C33.9366 41.0985 30.261 43.2208 26.5811 45.3351C26.3295 45.48 26.2352 45.6391 26.2359 45.933C26.2397 47.989 24.6537 49.7782 22.6724 49.9776C20.5622 50.1907 18.6966 48.8639 18.2407 46.8151C18.1708 46.5001 18.1473 46.1707 18.1401 45.8484C18.1348 45.6299 18.0743 45.4962 17.8802 45.3837C14.1495 43.2365 10.4219 41.0842 6.69594 38.9287C6.49419 38.8111 6.33565 38.8102 6.13211 38.9334C3.69746 40.3997 0.594411 38.9941 0.0780575 36.2548C-0.247742 34.5243 0.456254 32.9063 2.0042 31.9949C2.24871 31.8504 2.35933 31.705 2.35888 31.406C2.34768 27.1322 2.34948 22.8593 2.35619 18.5863C2.35642 18.3295 2.28969 18.1776 2.0548 18.0412C0.500814 17.1381 -0.230277 15.5689 0.0682052 13.8071C0.364672 12.0569 1.71736 10.7729 3.4778 10.522C4.42138 10.3878 5.33138 10.5599 6.14779 11.0814C6.33745 11.2028 6.47829 11.199 6.67131 11.0877C10.3863 8.9367 14.1042 6.79175 17.8251 4.65174C18.0501 4.52224 18.1379 4.37371 18.1386 4.10845C18.1446 1.75492 20.0034 -0.0467939 22.3585 0.000926284C24.1942 0.0376686 25.9119 1.55374 26.1723 3.36621C26.1793 3.41548 26.1875 3.45916 26.1956 3.50217V3.50219C26.2149 3.60466 26.2334 3.70333 26.2334 3.86492C26.2334 4.36743 26.4184 4.58049 26.8093 4.80408C30.4198 6.87106 34.0201 8.95417 37.618 11.0409C37.8652 11.1847 38.0448 11.1905 38.3023 11.0444C40.7462 9.64981 43.7093 10.9864 44.3042 13.7461C44.3434 13.9258 44.3525 14.1121 44.3611 14.2881C44.3648 14.3636 44.3685 14.4372 44.3743 14.5076C44.3342 16.0741 43.6546 17.2416 42.3431 18.0284ZM17.6556 32.0174L17.6168 32.0175C16.3401 32.0175 15.1442 31.6613 14.1321 31.0436C11.2906 32.6912 9.15439 33.9227 7.7233 34.738C7.43198 34.9036 7.33435 35.0915 7.33727 35.4238C7.35563 37.2835 5.94181 38.7741 4.08397 38.7879C1.96549 38.8039 0.655569 37.0295 0.737971 35.2972C0.809176 33.8183 2.07588 32.1161 4.15876 32.1694C4.78483 32.1862 5.35694 32.4017 5.89412 32.7261C6.00832 32.7951 6.22663 32.8084 6.33904 32.7445C6.59064 32.6013 6.84211 32.4578 7.09346 32.3141L7.0967 32.3364L12.2763 29.3459C11.5069 28.3014 11.0527 27.0198 11.0527 25.6289C11.0527 23.8295 11.8133 22.2122 13.0335 21.0551L8.58736 18.4835L8.56042 18.5303C7.84767 18.1179 7.13548 17.7047 6.42435 17.2897C6.19349 17.155 6.03765 17.1662 5.81239 17.3094C3.81594 18.5786 1.16968 17.4042 0.775141 15.084C0.465687 13.2673 1.65603 11.57 3.53067 11.2613C5.44158 10.9472 7.02468 12.3019 7.28151 13.9215C7.28822 13.9638 7.29634 14.0065 7.3045 14.0493C7.33063 14.1867 7.35705 14.3255 7.33794 14.4572C7.27524 14.8905 7.45661 15.1192 7.83257 15.3325C9.27419 16.1514 10.7107 16.9791 12.1472 17.8068C13.2086 18.4185 14.27 19.0301 15.3334 19.638C15.6027 19.5408 15.8802 19.4602 16.1645 19.3976C17.2751 17.777 19.0269 16.6589 21.0142 16.329V9.96231H20.9659C20.9672 9.12285 20.9692 8.28338 20.9718 7.44386C20.9727 7.16785 20.8325 7.07129 20.6315 6.96151C19.3224 6.24571 18.7799 4.97093 18.8889 3.8234C19.0307 2.33624 19.8366 1.3144 21.2824 0.873714C22.8709 0.389567 24.5646 1.20664 25.2276 2.73615C25.885 4.25244 25.3389 6.03063 23.902 6.85666C23.5012 7.08697 23.4013 7.33498 23.4036 7.76289C23.4161 10.0783 23.4148 12.3939 23.4135 14.7095V14.7104C23.4132 15.2467 23.4129 15.7829 23.4128 16.3191C25.6546 16.6719 27.565 18.0218 28.6354 19.8979L34.7101 16.3776L34.7097 16.3768C35.3733 15.9951 36.0374 15.6141 36.7018 15.2337C36.9593 15.0863 37.0395 14.9216 37.0368 14.6328C37.0177 12.9375 38.0538 11.6479 39.703 11.2825C41.5823 10.8663 43.4639 12.301 43.6244 14.2204C43.772 15.9896 42.5722 17.4884 40.9168 17.7788C40.0664 17.9277 39.2558 17.774 38.5328 17.2886C38.3299 17.1523 38.1897 17.1544 37.9831 17.2738L37.1928 17.7321L32.4269 20.4839C31.7098 20.8963 30.9924 21.3081 30.2747 21.7194C30.2379 21.7405 30.2053 21.7616 30.1769 21.783L30.1558 21.7952C31.7921 22.7519 32.8948 24.5023 32.8948 26.519C32.8948 27.5351 32.6139 28.4864 32.1239 29.3026L32.7137 29.6437C32.7526 29.6979 32.8141 29.747 32.9026 29.7973C34.5999 30.764 36.2902 31.7431 37.9766 32.7288C38.2007 32.8601 38.3525 32.8247 38.5625 32.6952C40.5554 31.4635 43.0225 32.4918 43.5655 34.7707C44.0185 36.6724 42.6349 38.5529 40.6822 38.7606C38.6931 38.9728 36.9871 37.3736 37.0386 35.4159C37.0471 35.0781 36.9358 34.8975 36.6474 34.7342C36.4926 34.6463 36.3378 34.5582 36.1831 34.47L36.2059 34.4524L30.4037 31.0895C29.6646 31.5746 28.8013 31.8923 27.8701 31.9875C27.7466 32.0074 27.6211 32.0175 27.4946 32.0175H23.4595V32.5302C23.4252 32.5851 23.4078 32.66 23.4078 32.7651C23.4154 36.0361 23.4148 39.3077 23.4078 42.5793C23.4071 42.8132 23.5122 42.9197 23.7025 43.0169C25.1051 43.7383 25.6298 45.1789 25.484 46.2702C25.2686 47.8792 24.2627 48.9252 22.7316 49.2243C20.9935 49.5644 19.1926 48.2399 18.9216 46.4859C18.6881 44.9761 19.5441 43.5644 20.6785 43.0173C20.895 42.9136 20.9698 42.7783 20.9696 42.5406C20.9635 39.1724 20.9629 35.8049 20.9703 32.4365C20.9703 32.3933 20.97 32.2537 20.9693 32.0175H17.6655L17.6556 32.0174ZM58.1648 32.9824C61.5132 32.9824 63.8637 31.3426 63.8637 28.2605V28.2161C63.8637 25.511 62.0897 24.3791 58.9409 23.5587C56.2578 22.8713 55.5926 22.45 55.5926 21.43V21.3857C55.5926 20.6318 56.28 20.0331 57.5883 20.0331C58.8966 20.0331 60.2492 20.6096 61.624 21.5631L63.398 18.991C61.8236 17.7271 59.8944 17.0175 57.6326 17.0175C54.4617 17.0175 52.1999 18.8801 52.1999 21.6961V21.7405C52.1999 24.8226 54.2177 25.6874 57.3444 26.4856C59.9388 27.1508 60.471 27.5943 60.471 28.459V28.5034C60.471 29.4125 59.6283 29.9668 58.2313 29.9668C56.4574 29.9668 54.9939 29.2351 53.5969 28.0821L51.579 30.499C53.4416 32.162 55.8143 32.9824 58.1648 32.9824ZM115.897 20.8091H120.91V27.2321C120.91 28.9985 120.126 29.7618 118.863 29.7618C117.795 29.7618 116.946 29.1948 116.075 28.2353L113.962 30.5905C115.007 31.8336 116.576 32.8804 118.95 32.8804C122.174 32.8804 124.352 31.0921 124.352 27.3847V17.3965H120.91H115.897V20.8091ZM78.5257 20.584H73.9746V32.6767H70.4453V20.584H65.8942V17.3965H78.5257V20.584ZM88.0031 32.9315C92.7202 32.9315 96.1488 29.3767 96.1488 25.0368V24.9931C96.1488 20.6532 92.7639 17.142 88.0467 17.142C83.3296 17.142 79.901 20.6968 79.901 25.0368V25.0804C79.901 29.4203 83.2859 32.9315 88.0031 32.9315ZM92.4917 25.0289V24.9859C92.4917 22.4021 90.6276 20.249 88.001 20.249C85.3744 20.249 83.5527 22.3591 83.5527 24.9428V24.9859C83.5527 27.5696 85.4168 29.7227 88.0434 29.7227C90.67 29.7227 92.4917 27.6127 92.4917 25.0289ZM108.268 32.6767H112.193L108.464 27.2195C110.405 26.4991 111.735 24.9493 111.735 22.4826V22.439C111.735 19.2956 109.576 17.3965 105.979 17.3965H98.9134V32.6767H102.359V27.787H104.997L108.268 32.6767ZM108.189 22.5896V22.5477C108.189 21.1651 107.227 20.4529 105.659 20.4529H102.363V24.6634H105.722C107.29 24.6634 108.189 23.8255 108.189 22.5896ZM40.3369 34.5474C39.8017 34.5463 39.411 34.9415 39.411 35.4857C39.4112 36.0173 39.8217 36.4338 40.3445 36.4338C40.8329 36.4329 41.302 35.964 41.2964 35.4792C41.2912 34.9756 40.8521 34.5501 40.3369 34.5474ZM21.2462 4.04925C21.2482 3.52231 21.6589 3.11568 22.1896 3.11523C22.7211 3.11479 23.1287 3.52052 23.1307 4.04947C23.132 4.5567 22.6893 5.00522 22.1913 4.99895C21.6851 4.99402 21.2446 4.55087 21.2462 4.04925ZM4.02898 36.4338C4.54914 36.4381 4.96316 36.0207 4.96518 35.4895C4.96719 34.9451 4.57847 34.5479 4.04398 34.5474C3.52808 34.5474 3.07845 34.9807 3.08091 35.4754C3.08315 35.9705 3.53748 36.4291 4.02898 36.4338ZM22.1996 45.033C22.7298 45.0366 23.1327 45.4401 23.1302 45.9652C23.1268 46.4883 22.718 46.8824 22.1806 46.8791C21.6476 46.8764 21.2401 46.47 21.2459 45.9464C21.252 45.4257 21.6674 45.029 22.1996 45.033ZM3.08103 14.5417C3.09693 15.0612 3.517 15.4531 4.0544 15.4484C4.59829 15.4434 4.97335 15.057 4.96507 14.5087C4.95723 13.9632 4.57299 13.5944 4.01991 13.6027C3.49013 13.6104 3.06513 14.0354 3.08103 14.5417ZM40.3252 15.4499C39.7819 15.4461 39.4055 15.059 39.4109 14.5107C39.4163 13.9666 39.8017 13.5964 40.3547 13.6036C40.885 13.611 41.307 14.0322 41.2945 14.5412C41.282 15.057 40.859 15.4537 40.3252 15.4499ZM13.3333 25.6288C13.3333 27.8975 15.2511 29.7367 17.6167 29.7367L17.6594 29.7365L17.6654 29.7367H27.4946C27.5085 29.7367 27.5216 29.7334 27.5333 29.7277C29.2561 29.6038 30.614 28.2145 30.614 26.5189C30.614 24.7417 29.1224 23.3011 27.2824 23.3011H27.2738C27.2359 20.648 24.998 18.5086 22.2429 18.5086C20.1415 18.5086 18.341 19.7532 17.588 21.5211C15.2356 21.5359 13.3333 23.3693 13.3333 25.6288Z" fill="#133E9C"/>
-                </svg>
+                <StorjIcon
+                    class="header__content-holder__icon"
+                    alt="storj icon"
+                />
                 <div class="header__content-holder__logo-area__refresh-button" @click="onRefresh">
-                    <svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg" alt="refresh image">
-                        <rect class="refresh-button-svg-rect" x="1" y="1" width="40" height="40" rx="20" fill="#F4F6F9" stroke="#E8E8E8"/>
-                        <path class="refresh-button-svg-path" d="M31 18.0586V12.1768L28.8784 14.2359C27 12.2353 24.2727 11 21.3034 11C15.6068 11 11 15.4712 11 21C11 26.5288 15.6057 31 21.3034 31C24.2125 31 26.8182 29.8232 28.6977 27.9417L27.0012 26.2355C25.6068 27.7056 23.5455 28.6464 21.3034 28.6464C16.9398 28.6464 13.425 25.2352 13.425 21C13.425 16.7649 16.9398 13.3536 21.3034 13.3536C23.6068 13.3536 25.7273 14.354 27.1818 15.8826L24.9398 18.0586L31 18.0586Z" fill="#133E9C"/>
-                    </svg>
+                    <RefreshIcon alt="refresh image"/>
                 </div>
             </div>
             <div class="header__content-holder__node-id-container">
@@ -26,6 +24,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import RefreshIcon from '@/../static/images/refresh.svg';
+import StorjIcon from '@/../static/images/storjIcon.svg';
+
 import { NODE_ACTIONS } from '@/app/store/modules/node';
 
 const {
@@ -33,7 +34,12 @@ const {
     SELECT_SATELLITE,
 } = NODE_ACTIONS;
 
-@Component
+@Component({
+    components: {
+        StorjIcon,
+        RefreshIcon,
+    },
+})
 export default class SNOHeader extends Vue {
     public async onRefresh(): Promise<void> {
         const selectedSatellite = this.$store.state.node.selectedSatellite.id;
diff --git a/web/storagenode/src/app/components/SatelliteSelection.vue b/web/storagenode/src/app/components/SatelliteSelection.vue
index 4295647c3..78c33d1c7 100644
--- a/web/storagenode/src/app/components/SatelliteSelection.vue
+++ b/web/storagenode/src/app/components/SatelliteSelection.vue
@@ -4,9 +4,10 @@
 <template>
     <div class="satellite-selection-toggle-container" v-if="satellites" @click="toggleDropDown">
         <p><b class="satellite-selection-toggle-container__bold-text">Choose your satellite: </b>{{selectedSatellite ? selectedSatellite : 'All satellites'}}</p>
-        <svg class="satellite-selection-toggle-container__image" width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg" alt="Arrow down">
-            <path d="M3.33657 3.73107C3.70296 4.09114 4.29941 4.08814 4.66237 3.73107L7.79796 0.650836C8.16435 0.291517 8.01864 0 7.47247 0L0.526407 0C-0.0197628 0 -0.16292 0.294525 0.200917 0.650836L3.33657 3.73107Z" fill="#535F77"/>
-        </svg>
+        <DropdownArrowIcon
+            class="satellite-selection-toggle-container__image"
+            alt="Arrow down"
+        />
         <SatelliteSelectionDropdown v-if="isPopupShown"/>
     </div>
 </template>
@@ -14,6 +15,8 @@
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
 
+import DropdownArrowIcon from '@/../static/images/dropdownArrow.svg';
+
 import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
 import { SatelliteInfo } from '@/storagenode/dashboard';
 
@@ -22,6 +25,7 @@ import SatelliteSelectionDropdown from './SatelliteSelectionDropdown.vue';
 @Component({
     components: {
         SatelliteSelectionDropdown,
+        DropdownArrowIcon,
     },
 })
 export default class SatelliteSelection extends Vue {
diff --git a/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue b/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
index 76f971980..160a6f920 100644
--- a/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
+++ b/web/storagenode/src/app/components/SatelliteSelectionDropdown.vue
@@ -8,9 +8,11 @@
             <div class="satellite-selection-overflow-container__satellite-choice"
                 v-for="satellite in satellites" :key="satellite.id"
                 @click.stop="onSatelliteClick(satellite.id)">
-                <svg class="satellite-selection-overflow-container__satellite-choice__image" v-if="satellite.disqualified" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" alt="disqualified image">
-                    <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/>
-                </svg>
+                <DisqualificationIcon
+                    class="satellite-selection-overflow-container__satellite-choice__image"
+                    v-if="satellite.disqualified"
+                    alt="disqualified image"
+                />
                 <p class="satellite-selection-overflow-container__satellite-choice__name" :class="{disqualified: satellite.disqualified}">{{satellite.id}}</p>
             </div>
             <div class="satellite-selection-choice-container__all-satellites">
@@ -25,11 +27,17 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 
+import DisqualificationIcon from '@/../static/images/disqualify.svg';
+
 import { APPSTATE_ACTIONS } from '@/app/store/modules/appState';
 import { NODE_ACTIONS } from '@/app/store/modules/node';
 import { SatelliteInfo } from '@/storagenode/dashboard';
 
-@Component
+@Component({
+    components: {
+        DisqualificationIcon,
+    },
+})
 export default class SatelliteSelectionDropdown extends Vue {
     public async onSatelliteClick(id: string): Promise<void> {
         try {
@@ -80,7 +88,7 @@ export default class SatelliteSelectionDropdown extends Vue {
 
             &__image {
                 position: absolute;
-                top: 13px;
+                top: 10px;
                 left: 10px;
             }
 
diff --git a/web/storagenode/src/app/components/VChart.vue b/web/storagenode/src/app/components/VChart.vue
index 442320b29..e7a015e5f 100644
--- a/web/storagenode/src/app/components/VChart.vue
+++ b/web/storagenode/src/app/components/VChart.vue
@@ -57,6 +57,7 @@ export default class VChart extends Vue {
 
     public get chartOptions(): object {
         const filterCallback = this.filterDaysDisplayed;
+
         return {
             responsive: false,
             maintainAspectRatios: false,
diff --git a/web/storagenode/src/app/types/svg.d.ts b/web/storagenode/src/app/types/svg.d.ts
new file mode 100644
index 000000000..92e898ee9
--- /dev/null
+++ b/web/storagenode/src/app/types/svg.d.ts
@@ -0,0 +1,7 @@
+// Copyright (C) 2019 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}
diff --git a/web/storagenode/src/app/views/DashboardArea.vue b/web/storagenode/src/app/views/DashboardArea.vue
index eb91f5faa..0e39a19a6 100644
--- a/web/storagenode/src/app/views/DashboardArea.vue
+++ b/web/storagenode/src/app/views/DashboardArea.vue
@@ -19,6 +19,7 @@ import SNOContentFilling from '@/app/components/SNOContentFilling.vue';
 import SNOContentTitle from '@/app/components/SNOContentTitle.vue';
 import SNOFooter from '@/app/components/SNOFooter.vue';
 import SNOHeader from '@/app/components/SNOHeader.vue';
+
 import { NODE_ACTIONS } from '@/app/store/modules/node';
 
 const {
diff --git a/web/storagenode/static/images/checksInfo.svg b/web/storagenode/static/images/checksInfo.svg
new file mode 100644
index 000000000..de9045293
--- /dev/null
+++ b/web/storagenode/static/images/checksInfo.svg
@@ -0,0 +1,5 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<rect class="checks-area-svg-rect" width="18" height="18" rx="9" fill="#5A667C"/>
+	<path d="M8.99928 8.00325C8.44956 8.00325 7.99979 8.48247 7.99979 9.06819L7.99979 13.3351C7.99979 13.3883 8.00312 13.4451 8.00978 13.4984C8.08308 14.006 8.49953 14.4 8.99928 14.4C9.54901 14.4 9.99878 13.9208 9.99878 13.3351L9.99878 9.07174C9.99878 8.48247 9.54901 8.00325 8.99928 8.00325Z" fill="white"/>
+	<path d="M8.99988 6.96423C9.77415 6.96423 10.3992 6.33921 10.3992 5.56494C10.3992 4.79066 9.77415 4.16564 8.99988 4.16564C8.22561 4.16564 7.60059 4.79066 7.60059 5.56494C7.59748 6.33921 8.2225 6.96423 8.99988 6.96423Z" fill="white"/>
+</svg>
diff --git a/web/storagenode/static/images/disqualify.svg b/web/storagenode/static/images/disqualify.svg
new file mode 100644
index 000000000..61e4c3c2d
--- /dev/null
+++ b/web/storagenode/static/images/disqualify.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M16.6625 13.9324C16.441 13.5232 16.2181 13.1133 15.996 12.702C15.5825 11.9391 15.1698 11.1762 14.7571 10.4133C14.2614 9.4992 13.7671 8.58373 13.2721 7.66969C12.7939 6.78728 12.3172 5.90625 11.8391 5.02459C11.4875 4.37631 11.1374 3.72733 10.7858 3.07843C10.6909 2.90265 10.596 2.72688 10.501 2.55249C10.4026 2.36968 10.2985 2.1939 10.1495 2.04484C9.62918 1.521 8.76574 1.42045 8.13997 1.81633C7.87137 1.98648 7.67732 2.22766 7.52826 2.50398C7.29975 2.92587 7.07122 3.34773 6.84271 3.77102C6.42646 4.54093 6.00951 5.31087 5.59326 6.08078C5.09192 6.99977 4.59482 7.92092 4.0956 8.84198C3.6231 9.71527 3.1499 10.5871 2.6767 11.4612C2.33076 12.101 1.98411 12.7394 1.63749 13.3792C1.54608 13.548 1.45468 13.7167 1.36328 13.8855C1.23531 14.1231 1.13477 14.3636 1.10312 14.6378C1.01383 15.4127 1.55663 16.1763 2.30687 16.3661C2.50516 16.4167 2.70062 16.4189 2.90102 16.4189H15.276H15.2957C15.7035 16.4104 16.0902 16.2571 16.3891 15.9794C16.6773 15.7122 16.8461 15.3466 16.8939 14.9599C16.9396 14.5957 16.8341 14.2511 16.6626 13.9326L16.6625 13.9324ZM8.29666 6.27882C8.29666 5.88507 8.6187 5.59327 8.99978 5.5757C9.37947 5.55812 9.70289 5.9118 9.70289 6.27882V11.2303C9.70289 11.624 9.38085 11.9158 8.99978 11.9334C8.62008 11.951 8.29666 11.5973 8.29666 11.2303V6.27882ZM8.99978 14.3282C8.60462 14.3282 8.28399 14.0083 8.28399 13.6124C8.28399 13.2173 8.6039 12.8967 8.99978 12.8967C9.39493 12.8967 9.71556 13.2166 9.71556 13.6124C9.71556 14.0076 9.39495 14.3282 8.99978 14.3282Z" fill="#F4D638"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/dropdownArrow.svg b/web/storagenode/static/images/dropdownArrow.svg
new file mode 100644
index 000000000..ef9d67503
--- /dev/null
+++ b/web/storagenode/static/images/dropdownArrow.svg
@@ -0,0 +1,3 @@
+<svg width="8" height="4" viewBox="0 0 8 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3.33657 3.73107C3.70296 4.09114 4.29941 4.08814 4.66237 3.73107L7.79796 0.650836C8.16435 0.291517 8.01864 0 7.47247 0L0.526407 0C-0.0197628 0 -0.16292 0.294525 0.200917 0.650836L3.33657 3.73107Z" fill="#535F77"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/largeDisqualify.svg b/web/storagenode/static/images/largeDisqualify.svg
new file mode 100644
index 000000000..cbe81ce5d
--- /dev/null
+++ b/web/storagenode/static/images/largeDisqualify.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M37.0279 30.9608C36.5357 30.0515 36.0404 29.1405 35.5467 28.2265C34.6279 26.5312 33.7108 24.8358 32.7936 23.1405C31.692 21.1092 30.5936 19.0749 29.4936 17.0437C28.4311 15.0828 27.3717 13.1249 26.3092 11.1657C25.528 9.72504 24.7498 8.28289 23.9686 6.84088C23.7576 6.45026 23.5467 6.05964 23.3358 5.67212C23.117 5.26588 22.8858 4.87525 22.5545 4.54401C21.3983 3.37993 19.4795 3.15648 18.0889 4.0362C17.492 4.41433 17.0608 4.95028 16.7296 5.56432C16.2218 6.50184 15.7139 7.43933 15.2061 8.37996C14.2811 10.0909 13.3546 11.8018 12.4296 13.5128C11.3155 15.555 10.2108 17.602 9.10144 19.6488C8.05144 21.5894 6.99988 23.5269 5.94832 25.4692C5.17956 26.891 4.40924 28.3098 3.63896 29.7316C3.43584 30.1066 3.23272 30.4816 3.0296 30.8566C2.74523 31.3847 2.5218 31.919 2.45148 32.5284C2.25305 34.2503 3.45928 35.9472 5.12648 36.3691C5.56712 36.4816 6.00148 36.4863 6.44681 36.4863H33.9468H33.9906C34.8968 36.4675 35.7562 36.1269 36.4202 35.5097C37.0609 34.916 37.4359 34.1035 37.5421 33.2441C37.6437 32.4347 37.4093 31.6691 37.028 30.9613L37.0279 30.9608ZM18.4371 13.9528C18.4371 13.0778 19.1528 12.4294 19.9996 12.3904C20.8434 12.3513 21.5621 13.1372 21.5621 13.9528V24.956C21.5621 25.831 20.8464 26.4795 19.9996 26.5185C19.1558 26.5576 18.4371 25.7716 18.4371 24.956V13.9528ZM19.9996 31.8404C19.1215 31.8404 18.409 31.1295 18.409 30.2498C18.409 29.3717 19.1199 28.6592 19.9996 28.6592C20.8777 28.6592 21.5902 29.3701 21.5902 30.2498C21.5902 31.1279 20.8778 31.8404 19.9996 31.8404Z" fill="#F4D638"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/offline.svg b/web/storagenode/static/images/offline.svg
new file mode 100644
index 000000000..fd376ca55
--- /dev/null
+++ b/web/storagenode/static/images/offline.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#E62929" stroke="#F4F6F9"/>
+    <path d="M11 7L7 11M7 7L11 11" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/online.svg b/web/storagenode/static/images/online.svg
new file mode 100644
index 000000000..6abf71449
--- /dev/null
+++ b/web/storagenode/static/images/online.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.35717 9.90354C3.30671 8.7687 5.03287 7.1697 6.08406 8.30604L7.78632 10.144L11.8784 5.31912C12.8797 4.13577 14.6803 5.66083 13.6792 6.84279L8.7531 12.6514C8.28834 13.1977 7.4706 13.2659 6.96364 12.7182L4.35717 9.90354Z" fill="#F4F6F9"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/refresh.svg b/web/storagenode/static/images/refresh.svg
new file mode 100644
index 000000000..a526995d1
--- /dev/null
+++ b/web/storagenode/static/images/refresh.svg
@@ -0,0 +1,4 @@
+<svg width="42" height="42" viewBox="0 0 42 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect class="refresh-button-svg-rect" x="1" y="1" width="40" height="40" rx="20" fill="#F4F6F9" stroke="#E8E8E8"/>
+    <path class="refresh-button-svg-path" d="M31 18.0586V12.1768L28.8784 14.2359C27 12.2353 24.2727 11 21.3034 11C15.6068 11 11 15.4712 11 21C11 26.5288 15.6057 31 21.3034 31C24.2125 31 26.8182 29.8232 28.6977 27.9417L27.0012 26.2355C25.6068 27.7056 23.5455 28.6464 21.3034 28.6464C16.9398 28.6464 13.425 25.2352 13.425 21C13.425 16.7649 16.9398 13.3536 21.3034 13.3536C23.6068 13.3536 25.7273 14.354 27.1818 15.8826L24.9398 18.0586L31 18.0586Z" fill="#133E9C"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/storjIcon.svg b/web/storagenode/static/images/storjIcon.svg
new file mode 100644
index 000000000..b7070e7a8
--- /dev/null
+++ b/web/storagenode/static/images/storjIcon.svg
@@ -0,0 +1,3 @@
+<svg width="125" height="50" viewBox="0 0 125 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M42.3431 18.0284C42.1011 18.1731 42.0171 18.3205 42.0178 18.5966C42.0261 22.8699 42.0254 27.1434 42.0189 31.4158C42.0185 31.6726 42.0838 31.8274 42.3192 31.9629C43.8364 32.8402 44.6043 34.4585 44.3318 36.1596C44.0704 37.7897 42.7681 39.1288 41.0811 39.4494C40.1031 39.636 39.1557 39.4875 38.2985 38.9612C38.0372 38.8012 37.8532 38.8295 37.6082 38.9706C33.9366 41.0985 30.261 43.2208 26.5811 45.3351C26.3295 45.48 26.2352 45.6391 26.2359 45.933C26.2397 47.989 24.6537 49.7782 22.6724 49.9776C20.5622 50.1907 18.6966 48.8639 18.2407 46.8151C18.1708 46.5001 18.1473 46.1707 18.1401 45.8484C18.1348 45.6299 18.0743 45.4962 17.8802 45.3837C14.1495 43.2365 10.4219 41.0842 6.69594 38.9287C6.49419 38.8111 6.33565 38.8102 6.13211 38.9334C3.69746 40.3997 0.594411 38.9941 0.0780575 36.2548C-0.247742 34.5243 0.456254 32.9063 2.0042 31.9949C2.24871 31.8504 2.35933 31.705 2.35888 31.406C2.34768 27.1322 2.34948 22.8593 2.35619 18.5863C2.35642 18.3295 2.28969 18.1776 2.0548 18.0412C0.500814 17.1381 -0.230277 15.5689 0.0682052 13.8071C0.364672 12.0569 1.71736 10.7729 3.4778 10.522C4.42138 10.3878 5.33138 10.5599 6.14779 11.0814C6.33745 11.2028 6.47829 11.199 6.67131 11.0877C10.3863 8.9367 14.1042 6.79175 17.8251 4.65174C18.0501 4.52224 18.1379 4.37371 18.1386 4.10845C18.1446 1.75492 20.0034 -0.0467939 22.3585 0.000926284C24.1942 0.0376686 25.9119 1.55374 26.1723 3.36621C26.1793 3.41548 26.1875 3.45916 26.1956 3.50217V3.50219C26.2149 3.60466 26.2334 3.70333 26.2334 3.86492C26.2334 4.36743 26.4184 4.58049 26.8093 4.80408C30.4198 6.87106 34.0201 8.95417 37.618 11.0409C37.8652 11.1847 38.0448 11.1905 38.3023 11.0444C40.7462 9.64981 43.7093 10.9864 44.3042 13.7461C44.3434 13.9258 44.3525 14.1121 44.3611 14.2881C44.3648 14.3636 44.3685 14.4372 44.3743 14.5076C44.3342 16.0741 43.6546 17.2416 42.3431 18.0284ZM17.6556 32.0174L17.6168 32.0175C16.3401 32.0175 15.1442 31.6613 14.1321 31.0436C11.2906 32.6912 9.15439 33.9227 7.7233 34.738C7.43198 34.9036 7.33435 35.0915 7.33727 35.4238C7.35563 37.2835 5.94181 38.7741 4.08397 38.7879C1.96549 38.8039 0.655569 37.0295 0.737971 35.2972C0.809176 33.8183 2.07588 32.1161 4.15876 32.1694C4.78483 32.1862 5.35694 32.4017 5.89412 32.7261C6.00832 32.7951 6.22663 32.8084 6.33904 32.7445C6.59064 32.6013 6.84211 32.4578 7.09346 32.3141L7.0967 32.3364L12.2763 29.3459C11.5069 28.3014 11.0527 27.0198 11.0527 25.6289C11.0527 23.8295 11.8133 22.2122 13.0335 21.0551L8.58736 18.4835L8.56042 18.5303C7.84767 18.1179 7.13548 17.7047 6.42435 17.2897C6.19349 17.155 6.03765 17.1662 5.81239 17.3094C3.81594 18.5786 1.16968 17.4042 0.775141 15.084C0.465687 13.2673 1.65603 11.57 3.53067 11.2613C5.44158 10.9472 7.02468 12.3019 7.28151 13.9215C7.28822 13.9638 7.29634 14.0065 7.3045 14.0493C7.33063 14.1867 7.35705 14.3255 7.33794 14.4572C7.27524 14.8905 7.45661 15.1192 7.83257 15.3325C9.27419 16.1514 10.7107 16.9791 12.1472 17.8068C13.2086 18.4185 14.27 19.0301 15.3334 19.638C15.6027 19.5408 15.8802 19.4602 16.1645 19.3976C17.2751 17.777 19.0269 16.6589 21.0142 16.329V9.96231H20.9659C20.9672 9.12285 20.9692 8.28338 20.9718 7.44386C20.9727 7.16785 20.8325 7.07129 20.6315 6.96151C19.3224 6.24571 18.7799 4.97093 18.8889 3.8234C19.0307 2.33624 19.8366 1.3144 21.2824 0.873714C22.8709 0.389567 24.5646 1.20664 25.2276 2.73615C25.885 4.25244 25.3389 6.03063 23.902 6.85666C23.5012 7.08697 23.4013 7.33498 23.4036 7.76289C23.4161 10.0783 23.4148 12.3939 23.4135 14.7095V14.7104C23.4132 15.2467 23.4129 15.7829 23.4128 16.3191C25.6546 16.6719 27.565 18.0218 28.6354 19.8979L34.7101 16.3776L34.7097 16.3768C35.3733 15.9951 36.0374 15.6141 36.7018 15.2337C36.9593 15.0863 37.0395 14.9216 37.0368 14.6328C37.0177 12.9375 38.0538 11.6479 39.703 11.2825C41.5823 10.8663 43.4639 12.301 43.6244 14.2204C43.772 15.9896 42.5722 17.4884 40.9168 17.7788C40.0664 17.9277 39.2558 17.774 38.5328 17.2886C38.3299 17.1523 38.1897 17.1544 37.9831 17.2738L37.1928 17.7321L32.4269 20.4839C31.7098 20.8963 30.9924 21.3081 30.2747 21.7194C30.2379 21.7405 30.2053 21.7616 30.1769 21.783L30.1558 21.7952C31.7921 22.7519 32.8948 24.5023 32.8948 26.519C32.8948 27.5351 32.6139 28.4864 32.1239 29.3026L32.7137 29.6437C32.7526 29.6979 32.8141 29.747 32.9026 29.7973C34.5999 30.764 36.2902 31.7431 37.9766 32.7288C38.2007 32.8601 38.3525 32.8247 38.5625 32.6952C40.5554 31.4635 43.0225 32.4918 43.5655 34.7707C44.0185 36.6724 42.6349 38.5529 40.6822 38.7606C38.6931 38.9728 36.9871 37.3736 37.0386 35.4159C37.0471 35.0781 36.9358 34.8975 36.6474 34.7342C36.4926 34.6463 36.3378 34.5582 36.1831 34.47L36.2059 34.4524L30.4037 31.0895C29.6646 31.5746 28.8013 31.8923 27.8701 31.9875C27.7466 32.0074 27.6211 32.0175 27.4946 32.0175H23.4595V32.5302C23.4252 32.5851 23.4078 32.66 23.4078 32.7651C23.4154 36.0361 23.4148 39.3077 23.4078 42.5793C23.4071 42.8132 23.5122 42.9197 23.7025 43.0169C25.1051 43.7383 25.6298 45.1789 25.484 46.2702C25.2686 47.8792 24.2627 48.9252 22.7316 49.2243C20.9935 49.5644 19.1926 48.2399 18.9216 46.4859C18.6881 44.9761 19.5441 43.5644 20.6785 43.0173C20.895 42.9136 20.9698 42.7783 20.9696 42.5406C20.9635 39.1724 20.9629 35.8049 20.9703 32.4365C20.9703 32.3933 20.97 32.2537 20.9693 32.0175H17.6655L17.6556 32.0174ZM58.1648 32.9824C61.5132 32.9824 63.8637 31.3426 63.8637 28.2605V28.2161C63.8637 25.511 62.0897 24.3791 58.9409 23.5587C56.2578 22.8713 55.5926 22.45 55.5926 21.43V21.3857C55.5926 20.6318 56.28 20.0331 57.5883 20.0331C58.8966 20.0331 60.2492 20.6096 61.624 21.5631L63.398 18.991C61.8236 17.7271 59.8944 17.0175 57.6326 17.0175C54.4617 17.0175 52.1999 18.8801 52.1999 21.6961V21.7405C52.1999 24.8226 54.2177 25.6874 57.3444 26.4856C59.9388 27.1508 60.471 27.5943 60.471 28.459V28.5034C60.471 29.4125 59.6283 29.9668 58.2313 29.9668C56.4574 29.9668 54.9939 29.2351 53.5969 28.0821L51.579 30.499C53.4416 32.162 55.8143 32.9824 58.1648 32.9824ZM115.897 20.8091H120.91V27.2321C120.91 28.9985 120.126 29.7618 118.863 29.7618C117.795 29.7618 116.946 29.1948 116.075 28.2353L113.962 30.5905C115.007 31.8336 116.576 32.8804 118.95 32.8804C122.174 32.8804 124.352 31.0921 124.352 27.3847V17.3965H120.91H115.897V20.8091ZM78.5257 20.584H73.9746V32.6767H70.4453V20.584H65.8942V17.3965H78.5257V20.584ZM88.0031 32.9315C92.7202 32.9315 96.1488 29.3767 96.1488 25.0368V24.9931C96.1488 20.6532 92.7639 17.142 88.0467 17.142C83.3296 17.142 79.901 20.6968 79.901 25.0368V25.0804C79.901 29.4203 83.2859 32.9315 88.0031 32.9315ZM92.4917 25.0289V24.9859C92.4917 22.4021 90.6276 20.249 88.001 20.249C85.3744 20.249 83.5527 22.3591 83.5527 24.9428V24.9859C83.5527 27.5696 85.4168 29.7227 88.0434 29.7227C90.67 29.7227 92.4917 27.6127 92.4917 25.0289ZM108.268 32.6767H112.193L108.464 27.2195C110.405 26.4991 111.735 24.9493 111.735 22.4826V22.439C111.735 19.2956 109.576 17.3965 105.979 17.3965H98.9134V32.6767H102.359V27.787H104.997L108.268 32.6767ZM108.189 22.5896V22.5477C108.189 21.1651 107.227 20.4529 105.659 20.4529H102.363V24.6634H105.722C107.29 24.6634 108.189 23.8255 108.189 22.5896ZM40.3369 34.5474C39.8017 34.5463 39.411 34.9415 39.411 35.4857C39.4112 36.0173 39.8217 36.4338 40.3445 36.4338C40.8329 36.4329 41.302 35.964 41.2964 35.4792C41.2912 34.9756 40.8521 34.5501 40.3369 34.5474ZM21.2462 4.04925C21.2482 3.52231 21.6589 3.11568 22.1896 3.11523C22.7211 3.11479 23.1287 3.52052 23.1307 4.04947C23.132 4.5567 22.6893 5.00522 22.1913 4.99895C21.6851 4.99402 21.2446 4.55087 21.2462 4.04925ZM4.02898 36.4338C4.54914 36.4381 4.96316 36.0207 4.96518 35.4895C4.96719 34.9451 4.57847 34.5479 4.04398 34.5474C3.52808 34.5474 3.07845 34.9807 3.08091 35.4754C3.08315 35.9705 3.53748 36.4291 4.02898 36.4338ZM22.1996 45.033C22.7298 45.0366 23.1327 45.4401 23.1302 45.9652C23.1268 46.4883 22.718 46.8824 22.1806 46.8791C21.6476 46.8764 21.2401 46.47 21.2459 45.9464C21.252 45.4257 21.6674 45.029 22.1996 45.033ZM3.08103 14.5417C3.09693 15.0612 3.517 15.4531 4.0544 15.4484C4.59829 15.4434 4.97335 15.057 4.96507 14.5087C4.95723 13.9632 4.57299 13.5944 4.01991 13.6027C3.49013 13.6104 3.06513 14.0354 3.08103 14.5417ZM40.3252 15.4499C39.7819 15.4461 39.4055 15.059 39.4109 14.5107C39.4163 13.9666 39.8017 13.5964 40.3547 13.6036C40.885 13.611 41.307 14.0322 41.2945 14.5412C41.282 15.057 40.859 15.4537 40.3252 15.4499ZM13.3333 25.6288C13.3333 27.8975 15.2511 29.7367 17.6167 29.7367L17.6594 29.7365L17.6654 29.7367H27.4946C27.5085 29.7367 27.5216 29.7334 27.5333 29.7277C29.2561 29.6038 30.614 28.2145 30.614 26.5189C30.614 24.7417 29.1224 23.3011 27.2824 23.3011H27.2738C27.2359 20.648 24.998 18.5086 22.2429 18.5086C20.1415 18.5086 18.341 19.7532 17.588 21.5211C15.2356 21.5359 13.3333 23.3693 13.3333 25.6288Z" fill="#133E9C"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/version.svg b/web/storagenode/static/images/version.svg
new file mode 100644
index 000000000..6abf71449
--- /dev/null
+++ b/web/storagenode/static/images/version.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 0.5C13.6942 0.5 17.5 4.3058 17.5 9C17.5 13.6942 13.6942 17.5 9 17.5C4.3058 17.5 0.5 13.6942 0.5 9C0.5 4.3058 4.3058 0.5 9 0.5Z" fill="#00CE7D" stroke="#F4F6F9"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M4.35717 9.90354C3.30671 8.7687 5.03287 7.1697 6.08406 8.30604L7.78632 10.144L11.8784 5.31912C12.8797 4.13577 14.6803 5.66083 13.6792 6.84279L8.7531 12.6514C8.28834 13.1977 7.4706 13.2659 6.96364 12.7182L4.35717 9.90354Z" fill="#F4F6F9"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/static/images/wallet.svg b/web/storagenode/static/images/wallet.svg
new file mode 100644
index 000000000..c88f02d77
--- /dev/null
+++ b/web/storagenode/static/images/wallet.svg
@@ -0,0 +1,4 @@
+<svg width="40" height="35" viewBox="0 0 40 35" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M2 7C2.57391 7.33667 3.23903 7.53563 3.94595 7.53563C14.9031 7.52607 27.1226 7.53563 36.5405 7.53563C37.3653 7.53563 38 8.17454 38 9.00473V13.9017H23.8919C22.5616 13.9017 21.4595 15.0112 21.4595 16.3502V24.1854C21.4595 25.5244 22.5616 26.6339 23.8919 26.6339H38V31.5309C38 32.3611 37.3653 33 36.5405 33H3.45946C2.63472 33 2 32.3611 2 31.5309V7Z" fill="#A5C7EF"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.90244 0C1.75688 0 0 1.75078 0 3.88889V31.5972C0 33.4657 1.53961 35 3.41463 35H36.5854C38.4604 35 40 33.4657 40 31.5972V9.23611C40 7.3676 38.4604 5.83333 36.5854 5.83333H34.1463V0.972222C34.1463 0.463313 33.6814 0 33.1707 0H3.90244ZM3.90244 1.94444H32.1951V5.83333H3.90244C2.80488 5.83333 1.95122 4.98264 1.95122 3.88889C1.95122 2.79514 2.80488 1.94444 3.90244 1.94444ZM3.90244 7.77768C3.19361 7.77768 2.52668 7.58017 1.95122 7.24597V31.5971C1.95122 32.4212 2.58766 33.0555 3.41463 33.0555H36.5854C37.4123 33.0555 38.0488 32.4212 38.0488 31.5971V26.736H23.9024C22.5686 26.736 21.4634 25.6347 21.4634 24.3055V16.5277C21.4634 15.1985 22.5686 14.0971 23.9024 14.0971H38.0488V9.23601C38.0488 8.41191 37.4123 7.77768 36.5854 7.77768C33.5841 7.77768 30.2991 7.77672 26.8612 7.77572C19.4816 7.77356 11.3975 7.7712 3.90244 7.77768ZM23.9024 16.0417H38.0488V24.7917H23.9024C23.6147 24.7917 23.4146 24.5923 23.4146 24.3056V16.5278C23.4146 16.241 23.6147 16.0417 23.9024 16.0417ZM26.8293 20.4167C26.8293 19.3419 27.702 18.4722 28.7805 18.4722C29.859 18.4722 30.7317 19.3419 30.7317 20.4167C30.7317 21.4914 29.859 22.3611 28.7805 22.3611C27.702 22.3611 26.8293 21.4914 26.8293 20.4167Z" fill="#224CA5"/>
+</svg>
\ No newline at end of file
diff --git a/web/storagenode/tsconfig.json b/web/storagenode/tsconfig.json
index 51af02b71..1e3c5b6d2 100644
--- a/web/storagenode/tsconfig.json
+++ b/web/storagenode/tsconfig.json
@@ -31,7 +31,8 @@
   "include": [
     "src/**/*.ts",
     "src/**/*.tsx",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "src/app/types/svg.d.ts"
   ],
   "exclude": [
     "node_modules"
diff --git a/web/storagenode/tslint.json b/web/storagenode/tslint.json
index 82cec8f68..c9b70e50c 100644
--- a/web/storagenode/tslint.json
+++ b/web/storagenode/tslint.json
@@ -51,12 +51,16 @@
           "order": 1
         }, {
           "name": "internal components",
-          "match": "^@/components",
+          "match": "^@/app/components",
           "order": 2
+        }, {
+          "name": "internal images",
+          "match": "^@/../static/images",
+          "order": 3
         }, {
           "name": "internal else",
           "match": "^@",
-          "order": 3
+          "order": 4
         }]
       }],
     "prefer-const": true,
diff --git a/web/storagenode/vue.config.js b/web/storagenode/vue.config.js
index 359c45b44..ccb4a65d1 100644
--- a/web/storagenode/vue.config.js
+++ b/web/storagenode/vue.config.js
@@ -20,5 +20,13 @@ module.exports = {
                 args[0].template = './index.html';
                 return args
             });
+
+        const svgRule = config.module.rule('svg');
+
+        svgRule.uses.clear();
+
+        svgRule
+            .use('vue-svg-loader')
+            .loader('vue-svg-loader');
     }
 };