diff --git a/dev/renderer/assets/icon/Account-active.svg b/dev/renderer/assets/icon/Account-active.svg
new file mode 100644
index 0000000..7bd1c79
--- /dev/null
+++ b/dev/renderer/assets/icon/Account-active.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Account</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <ellipse id="path-1" cx="9.98704384" cy="9.95144657" rx="9.98704384" ry="9.95144657"></ellipse>
+        <linearGradient x1="-9.62769955%" y1="50.4546285%" x2="111.805987%" y2="70.6452884%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M16.6759311,9.46008253 L14.0818858,9.46008253 C12.4472276,9.46008253 11.1172874,8.15428257 11.1172874,6.54929577 C11.1172874,4.94430898 12.4472276,3.63850902 14.0818858,3.63850902 L16.6759311,3.63850902 C16.8807671,3.63850902 17.0465189,3.47576585 17.0465189,3.27464789 L17.0465189,1.45541043 C17.0465189,0.652712368 16.3817051,0 15.5642023,0 L1.48231656,0 C0.664779044,0 3.12638804e-13,0.652712368 3.12638804e-13,1.45541043 L3.12638804e-13,11.6432152 C3.12638804e-13,12.4458792 0.664779044,13.0985915 1.48231656,13.0985915 L15.5642023,13.0985915 C16.3817051,13.0985915 17.0465189,12.4458792 17.0465189,11.6431811 L17.0465189,9.82394366 C17.0465189,9.6228257 16.8807671,9.46008253 16.6759311,9.46008253 Z" id="path-4"></path>
+        <filter x="-88.0%" y="-38.2%" width="217.3%" height="252.7%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="-5" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.603921569   0 0 0 0 0.678431373   0 0 0 0 0.776470588  0 0 0 0.303158967 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="-9.62769955%" y1="50.4140776%" x2="111.805987%" y2="68.803817%" id="linearGradient-6">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M16.4955377,4.57142857 L14.1517818,4.57142857 C13.0439854,4.57142857 12.1428571,5.45253348 12.1428571,6.53571429 C12.1428571,7.61889509 13.0439854,8.5 14.1517818,8.5 L16.4955377,8.5 C17.0494359,8.5 17.5,8.05944754 17.5,7.51785714 L17.5,5.55357143 C17.5,5.01198103 17.0494359,4.57142857 16.4955377,4.57142857 Z M14.1428571,7.46428571 C13.6309741,7.46428571 13.2142857,7.04759728 13.2142857,6.53571429 C13.2142857,6.02383129 13.6309741,5.60714286 14.1428571,5.60714286 C14.6547401,5.60714286 15.0714286,6.02383129 15.0714286,6.53571429 C15.0714286,7.04759728 14.6547837,7.46428571 14.1428571,7.46428571 Z" id="path-7"></path>
+        <filter x="-280.0%" y="-127.3%" width="473.3%" height="609.1%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="-5" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.603921569   0 0 0 0 0.678431373   0 0 0 0 0.776470588  0 0 0 0.303158967 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Hover-_new" transform="translate(-22.000000, -348.000000)">
+            <g id="Account" transform="translate(22.000000, 348.000000)">
+                <g id="Group-6-Copy">
+                    <g id="Group-3-Copy-2">
+                        <g id="Path" transform="translate(0.000000, 0.026684)">
+                            <g id="Rectangle">
+                                <mask id="mask-2" fill="white">
+                                    <use xlink:href="#path-1"></use>
+                                </mask>
+                                <use id="Mask" fill="#0364FF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                                <ellipse id="Oval-Copy-2" fill="#FFFFFF" fill-rule="nonzero" opacity="0.217410714" mask="url(#mask-2)" cx="5.42857143" cy="8.23943662" rx="10.3571429" ry="10.2112676"></ellipse>
+                                <g id="Group-7" mask="url(#mask-2)" fill-rule="nonzero">
+                                    <g transform="translate(13.892857, 10.022133) scale(-1, 1) translate(-13.892857, -10.022133) translate(5.142857, 3.450704)">
+                                        <g id="Path">
+                                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                                            <use fill="url(#linearGradient-3)" xlink:href="#path-4"></use>
+                                        </g>
+                                        <g id="Shape">
+                                            <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                                            <use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
+                                        </g>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/renderer/assets/icon/Export-active.svg b/dev/renderer/assets/icon/Export-active.svg
new file mode 100644
index 0000000..8ab1784
--- /dev/null
+++ b/dev/renderer/assets/icon/Export-active.svg
@@ -0,0 +1,39 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Export</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <ellipse id="path-1" cx="9.98704384" cy="9.95144657" rx="9.98704384" ry="9.95144657"></ellipse>
+        <linearGradient x1="22.3494991%" y1="50.7699789%" x2="78.6606144%" y2="84.9657754%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-4" x="3.21428571" y="8.09859155" width="13.5714286" height="19.9295775" rx="1.16"></rect>
+        <filter x="-110.5%" y="-25.1%" width="247.4%" height="200.4%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="-5" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.603921569   0 0 0 0 0.678431373   0 0 0 0 0.776470588  0 0 0 0.303158967 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Hover-_new" transform="translate(-22.000000, -654.000000)">
+            <g id="Export" transform="translate(22.000000, 654.000000)">
+                <g id="Path" transform="translate(0.000000, 0.026684)">
+                    <g id="Rectangle">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="Mask" fill="#0364FF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                        <ellipse id="Oval-Copy-2" fill="#FFFFFF" fill-rule="nonzero" opacity="0.296781994" mask="url(#mask-2)" cx="8.35714286" cy="4.78873239" rx="10.3571429" ry="10.2112676"></ellipse>
+                        <g fill-rule="nonzero" mask="url(#mask-2)">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                            <use fill="url(#linearGradient-3)" xlink:href="#path-4"></use>
+                        </g>
+                    </g>
+                </g>
+                <path d="M17.8754751,7.61033065 L12.8812113,10.4592502 C12.7403502,10.5396307 12.5578851,10.5393238 12.4172625,10.4585 C12.275243,10.3768236 12.1870259,10.2252363 12.1870259,10.0628044 L12.204603,9.52938959 C12.204603,9.38179238 12.0850722,9.26212541 11.9375667,9.26212541 L8.0657958,9.26212541 C6.73122759,9.26212541 5.6278891,9.40714261 5.6278891,10.733676 L5.6278891,12.0423395 C5.6278891,12.2223003 5.52055665,12.3861987 5.35437877,12.459895 C5.29440889,12.4865294 5.23072498,12.5 5.16509885,12.5 C5.05054276,12.5 4.94045034,12.458224 4.85526586,12.3825497 C4.63814766,12.1893229 4.44304112,11.9699732 4.27539807,11.7306734 C3.83826539,11.1064886 3.60714286,10.3732087 3.60714286,9.61002058 C3.60714286,7.55897173 5.28830968,5.17593033 7.3547148,5.17593033 L11.9199896,5.17593033 C12.0674951,5.17593033 12.1870259,5.05626336 12.1870259,4.90866615 L12.1870259,4.36499934 C12.1870259,4.20256737 12.275243,4.05094602 12.4172625,3.96930375 C12.557851,3.88847995 12.7401799,3.88810482 12.8812454,3.96855348 L17.8754751,6.81747305 C18.0183806,6.89901301 18.1071428,7.05087309 18.1071428,7.2139189 C18.1071769,7.37689651 18.0184147,7.52879069 17.8754751,7.61033065 Z" id="Shape" fill="#0364FF" fill-rule="nonzero" transform="translate(10.857143, 8.204225) rotate(270.000000) translate(-10.857143, -8.204225) "></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/renderer/assets/icon/Log-active.svg b/dev/renderer/assets/icon/Log-active.svg
new file mode 100644
index 0000000..17b70f9
--- /dev/null
+++ b/dev/renderer/assets/icon/Log-active.svg
@@ -0,0 +1,59 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="20px" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Log</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <filter x="-49.1%" y="-80.1%" width="198.2%" height="260.3%" filterUnits="objectBoundingBox" id="filter-1">
+            <feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.0782099185 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix>
+            <feMerge>
+                <feMergeNode in="shadowMatrixOuter1"></feMergeNode>
+                <feMergeNode in="SourceGraphic"></feMergeNode>
+            </feMerge>
+        </filter>
+        <circle id="path-2" cx="9.55517241" cy="9.82758621" r="9.48275862"></circle>
+        <linearGradient x1="-9.62769955%" y1="50.4083008%" x2="111.805987%" y2="68.5414849%" id="linearGradient-4">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-5" x="4.55517241" y="3.79310345" width="17.2413793" height="12.5551724" rx="1.155"></rect>
+        <linearGradient x1="18.7432498%" y1="50.4451196%" x2="65.2479958%" y2="50.2800684%" id="linearGradient-7">
+            <stop stop-color="#DFE7F0" offset="0%"></stop>
+            <stop stop-color="#BFCDDF" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-8" x="4.13793103" y="3.79310345" width="17.9310345" height="1.82068966" rx="0.910344828"></rect>
+        <filter x="-83.7%" y="-274.6%" width="211.5%" height="1198.5%" filterUnits="objectBoundingBox" id="filter-9">
+            <feOffset dx="-5" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.603921569   0 0 0 0 0.678431373   0 0 0 0 0.776470588  0 0 0 0.303158967 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Hover-_new" transform="translate(-22.000000, -702.000000)">
+            <g id="Log" transform="translate(22.000000, 702.000000)">
+                <g id="Group" transform="translate(0.072414, 0.344828)">
+                    <g id="Rectangle">
+                        <g id="Rectangle-Copy" filter="url(#filter-1)" transform="translate(4.482759, 3.448276)"></g>
+                    </g>
+                </g>
+                <mask id="mask-3" fill="white">
+                    <use xlink:href="#path-2"></use>
+                </mask>
+                <use id="Mask" fill="#0364FF" fill-rule="nonzero" xlink:href="#path-2"></use>
+                <circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" opacity="0.217410714" mask="url(#mask-3)" cx="11.7965517" cy="17.9310345" r="10"></circle>
+                <mask id="mask-6" fill="white">
+                    <use xlink:href="#path-5"></use>
+                </mask>
+                <use id="Mask" fill="url(#linearGradient-4)" fill-rule="nonzero" xlink:href="#path-5"></use>
+                <g id="Rectangle-Copy" fill-rule="nonzero" mask="url(#mask-6)">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="url(#linearGradient-7)" xlink:href="#path-8"></use>
+                </g>
+                <path d="M8.15862069,9.31034483 L15.7448276,9.31034483" id="Line" stroke="#0364FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" mask="url(#mask-6)"></path>
+                <path d="M8.15862069,12.3793103 L11.9517241,12.3793103" id="Line-Copy" stroke="#0364FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" fill-rule="nonzero" mask="url(#mask-6)"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/renderer/assets/icon/Mining-active.svg b/dev/renderer/assets/icon/Mining-active.svg
new file mode 100644
index 0000000..471e999
--- /dev/null
+++ b/dev/renderer/assets/icon/Mining-active.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Mining</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <linearGradient x1="24.2024332%" y1="-12.7396408%" x2="95.7009489%" y2="172.146518%" id="linearGradient-1">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-2" x="0.0391474554" y="-2.84217094e-14" width="13.5206612" height="18.8232044" rx="1.16"></rect>
+        <filter x="-110.9%" y="-26.6%" width="247.9%" height="206.3%" filterUnits="objectBoundingBox" id="filter-3">
+            <feOffset dx="-5" dy="5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.603921569   0 0 0 0 0.678431373   0 0 0 0 0.776470588  0 0 0 0.303158967 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="-35.7852742%" x2="50%" y2="100%" id="linearGradient-4">
+            <stop stop-color="#CFDCE9" offset="0%"></stop>
+            <stop stop-color="#A2B6CF" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="24.9631229%" y1="49.621837%" x2="295.083818%" y2="57.223962%" id="linearGradient-5">
+            <stop stop-color="#1575FA" offset="0%"></stop>
+            <stop stop-color="#DEE9FE" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Hover-_new" transform="translate(-22.000000, -567.000000)" fill-rule="nonzero">
+            <g id="Mining" transform="translate(22.000000, 567.000000)">
+                <g id="Mask">
+                    <ellipse id="Oval" fill="#E9EEF5" cx="9.97435167" cy="9.7542389" rx="9.97435167" ry="9.7542389"></ellipse>
+                    <ellipse id="Oval-Copy-12" fill="#0364FF" cx="9.97435167" cy="9.7542389" rx="9.97435167" ry="9.7542389"></ellipse>
+                </g>
+                <circle id="Oval" fill="#FFFFFF" opacity="0.217410714" cx="12.5" cy="17.5" r="10.3571429"></circle>
+                <g id="Group-2" transform="translate(4.357143, 3.214286)">
+                    <g id="Group" transform="translate(9.949670, 6.843878) rotate(90.000000) translate(-9.949670, -6.843878) translate(3.163956, -2.798979)">
+                        <g id="Rectangle">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-3)" xlink:href="#path-2"></use>
+                            <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                        </g>
+                        <g id="Group-30" transform="translate(2.522556, 8.821429)" fill="#9FB4D0" stroke="url(#linearGradient-4)" stroke-width="0.691488">
+                            <circle id="Oval" cx="4.28571429" cy="4.28571429" r="3.93997029"></circle>
+                        </g>
+                    </g>
+                    <rect id="Rectangle-91-Copy" fill="url(#linearGradient-5)" x="11.9511278" y="6.65714286" width="5.70900391" height="1" rx="0.5"></rect>
+                    <rect id="Rectangle-91-Copy-2" fill="url(#linearGradient-5)" x="11.9511278" y="8.89642857" width="5.70900391" height="1" rx="0.5"></rect>
+                    <rect id="Rectangle-91-Copy-3" fill="url(#linearGradient-5)" x="11.9511278" y="4.41785714" width="5.70900391" height="1" rx="0.5"></rect>
+                </g>
+                <path d="M14.1680069,10.7624315 L11.8113051,10.0036847 C11.8056933,9.93311133 11.7920086,9.86482365 11.770972,9.79976749 C11.8704644,9.76598621 11.9730606,9.72946207 12.0767384,9.69013202 C13.0143685,9.33452217 13.5546873,8.93687094 13.6826464,8.50819704 C13.7677644,8.22301872 13.6770973,7.94015764 13.4132316,7.66743251 C13.2050766,7.45227586 12.7450163,7.13036847 12.725516,7.11679606 C12.6518411,7.06537537 12.5508596,7.08287291 12.4985504,7.156 L11.0418104,9.19072709 C11.004299,9.18584039 10.9660978,9.18303448 10.9272696,9.18303448 C10.9005428,9.18303448 10.8741139,9.18443744 10.8479829,9.18678621 C10.8415873,8.43774975 10.7492742,7.4832197 10.359064,7.05021084 C10.2074976,6.88201379 10.0228402,6.79670148 9.81018633,6.79670148 C9.81018633,6.79670148 9.81018633,6.79670148 9.81015498,6.79670148 C9.66412201,6.79670148 9.50529783,6.83866404 9.33819699,6.9214069 C9.131202,7.023933 8.81751955,7.25061281 8.67698869,7.35493596 C8.63574644,7.38556453 8.6092862,7.40574187 8.60499111,7.40900493 C8.56039431,7.44308571 8.53793132,7.4957202 8.54029832,7.54811823 C8.54169344,7.57958227 8.55203927,7.61095172 8.5719158,7.63822266 L10.1049641,9.74087488 C10.0881286,9.78258522 10.0744126,9.82585616 10.0639413,9.87040394 C9.56292098,9.70617931 8.93466257,9.54272709 8.4176532,9.54272709 C8.01048206,9.54272709 7.71496752,9.64610443 7.53940191,9.84995862 C7.38468471,10.0295842 7.32878588,10.2779704 7.37333565,10.5882916 C7.41605139,10.8853399 7.60011312,11.4176118 7.60795087,11.4401379 C7.63152683,11.5081576 7.69499693,11.5509399 7.76299725,11.5509399 C7.78008355,11.5509399 7.79740498,11.5482601 7.81445992,11.5425852 L10.3101094,10.7151567 C10.3377453,10.7421281 10.3670271,10.7674601 10.3979863,10.7906798 C10.3113948,10.909931 10.2215115,11.0388453 10.1331173,11.1739547 C9.58238995,12.0158227 9.37769926,12.6569103 9.52473546,13.0793261 C9.62259761,13.3603901 9.86130414,13.5356808 10.23424,13.6003429 C10.4268292,13.6337616 10.7309496,13.6407764 10.9522093,13.6407764 C11.0482217,13.6407764 11.1122405,13.6393734 11.1122405,13.6393734 C11.2018416,13.6374502 11.2733846,13.5636453 11.2729927,13.4735094 L11.2620042,10.9011034 C11.3111626,10.8808788 11.3580323,10.856335 11.402347,10.8279606 C11.4750499,10.9276177 11.5523615,11.0303803 11.6345325,11.1339783 C12.2552823,11.9162443 12.794692,12.3129182 13.2377914,12.3129182 C13.4466361,12.3129182 13.7426366,12.2231133 13.9667805,11.7952276 C14.1058379,11.5297379 14.2683302,10.9903094 14.275149,10.9674995 C14.301092,10.8811941 14.2533914,10.7899232 14.1680069,10.7624315 Z M10.9272382,10.5328828 C10.6759442,10.5328828 10.4721314,10.3279567 10.4721314,10.0751567 C10.4721314,9.82235665 10.6759442,9.61746207 10.9272382,9.61746207 C11.1786262,9.61746207 11.3824077,9.82235665 11.3824077,10.0751567 C11.3824077,10.3279724 11.1786262,10.5328828 10.9272382,10.5328828 Z" id="Shape" fill="#FFFFFF"></path>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/renderer/assets/icon/Overview-active.svg b/dev/renderer/assets/icon/Overview-active.svg
new file mode 100644
index 0000000..c243058
--- /dev/null
+++ b/dev/renderer/assets/icon/Overview-active.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="21px" viewBox="0 0 20 21" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Overview</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <circle id="path-1" cx="10" cy="10" r="10"></circle>
+        <linearGradient x1="-1.60798859%" y1="50.7699789%" x2="103.493304%" y2="84.9657754%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-4" x="2.41071429" y="5.0435949" width="15" height="16.1234071" rx="0.8"></rect>
+        <filter x="-80.0%" y="-24.8%" width="206.7%" height="199.2%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="-4" dy="4" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.603921569   0 0 0 0 0.678431373   0 0 0 0 0.776470588  0 0 0 0.303158967 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Hover-_new" transform="translate(-22.000000, -299.000000)">
+            <g id="Overview" transform="translate(22.000000, 299.500000)">
+                <mask id="mask-2" fill="white">
+                    <use xlink:href="#path-1"></use>
+                </mask>
+                <use id="Mask" fill="#0364FF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                <g id="Rectangle" fill-rule="nonzero" mask="url(#mask-2)">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-4"></use>
+                    <use fill="url(#linearGradient-3)" xlink:href="#path-4"></use>
+                </g>
+                <ellipse id="Oval-Copy-2" fill="#FFFFFF" fill-rule="nonzero" opacity="0.217410714" mask="url(#mask-2)" cx="10.0714286" cy="16.5995976" rx="10.3571429" ry="9.72501677"></ellipse>
+                <g id="Group-12" mask="url(#mask-2)">
+                    <g transform="translate(4.500000, 7.142857)">
+                        <g id="Group-10" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(0.000000, 0.338465)">
+                            <rect id="Rectangle-91-Copy-2" fill="#0364FF" fill-rule="nonzero" x="0.714285714" y="1.83738087" width="4.79183247" height="1" rx="0.5"></rect>
+                            <rect id="Rectangle-91-Copy-4" fill="#0364FF" fill-rule="nonzero" x="2.26126814" y="0" width="3.24485004" height="1" rx="0.5"></rect>
+                        </g>
+                        <rect id="Rectangle" fill="#0364FF" fill-rule="nonzero" x="6.69595111" y="0.0300306666" width="3.60962567" height="3.38464898" rx="0.4"></rect>
+                    </g>
+                </g>
+                <g id="Group-12-Copy" mask="url(#mask-2)">
+                    <g transform="translate(10.000000, 13.809524) scale(-1, 1) translate(-10.000000, -13.809524) translate(4.500000, 11.904762)">
+                        <g id="Group-10" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(0.000000, 0.338465)">
+                            <rect id="Rectangle-91-Copy-2" fill="#0364FF" fill-rule="nonzero" x="0.714285714" y="1.83738087" width="4.79183247" height="1" rx="0.5"></rect>
+                            <rect id="Rectangle-91-Copy-4" fill="#0364FF" fill-rule="nonzero" x="2.26126814" y="0" width="3.24485004" height="1" rx="0.5"></rect>
+                        </g>
+                        <rect id="Rectangle" fill="#0364FF" fill-rule="nonzero" x="6.69595111" y="0.0300306666" width="3.60962567" height="3.38464898" rx="0.4"></rect>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/renderer/assets/icon/Settings-active.svg b/dev/renderer/assets/icon/Settings-active.svg
new file mode 100644
index 0000000..c790b6a
--- /dev/null
+++ b/dev/renderer/assets/icon/Settings-active.svg
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="20px" viewBox="0 0 22 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
+    <title>Settings</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <ellipse id="path-1" cx="9.98704384" cy="9.95144657" rx="9.98704384" ry="9.95144657"></ellipse>
+        <linearGradient x1="23.874671%" y1="50.7699789%" x2="77.0797257%" y2="84.9657754%" id="linearGradient-3">
+            <stop stop-color="#FFFFFF" offset="0%"></stop>
+            <stop stop-color="#EBEFF4" offset="100%"></stop>
+        </linearGradient>
+        <path d="M4.57700201,-3.39513291 L15.6372837,-3.39513291 C16.277934,-3.39513291 16.7972837,-2.87578322 16.7972837,-2.23513291 L16.7972837,15.6591528 C16.7972837,16.2998031 16.277934,16.8191528 15.6372837,16.8191528 L4.57700201,16.8191528 C3.9363517,16.8191528 3.41700201,16.2998031 3.41700201,15.6591528 L3.41700201,-2.23513291 C3.41700201,-2.87578322 3.9363517,-3.39513291 4.57700201,-3.39513291 Z" id="path-4"></path>
+        <linearGradient x1="49.8524583%" y1="39.0296574%" x2="51.0151832%" y2="112.30292%" id="linearGradient-6">
+            <stop stop-color="#DBEAFB" offset="0%"></stop>
+            <stop stop-color="#B3C8E2" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="17.0866851%" y1="1.78046744%" x2="73.4279983%" y2="81.8294702%" id="linearGradient-7">
+            <stop stop-color="#0172EF" offset="0%"></stop>
+            <stop stop-color="#1D77FF" offset="100%"></stop>
+        </linearGradient>
+        <ellipse id="path-8" cx="7.6515528" cy="7.90140845" rx="1.41987578" ry="1.3943662"></ellipse>
+        <filter x="-158.5%" y="-161.4%" width="416.9%" height="422.7%" filterUnits="objectBoundingBox" id="filter-9">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.128344977   0 0 0 0 0.305545553   0 0 0 0 0.534863946  0 0 0 0.181329257 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <ellipse id="path-10" cx="1.41987578" cy="1.3943662" rx="1.41987578" ry="1.3943662"></ellipse>
+        <filter x="-158.5%" y="-161.4%" width="416.9%" height="422.7%" filterUnits="objectBoundingBox" id="filter-11">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.128344977   0 0 0 0 0.305545553   0 0 0 0 0.534863946  0 0 0 0.181329257 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <ellipse id="path-12" cx="4.57515528" cy="4.64788732" rx="1.41987578" ry="1.3943662"></ellipse>
+        <filter x="-158.5%" y="-161.4%" width="416.9%" height="422.7%" filterUnits="objectBoundingBox" id="filter-13">
+            <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="1.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.128344977   0 0 0 0 0.305545553   0 0 0 0 0.534863946  0 0 0 0.181329257 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Hover-_new" transform="translate(-206.000000, -927.000000)">
+            <g id="Settings" transform="translate(206.000000, 927.000000)">
+                <g id="Group-3-Copy">
+                    <g id="Path" transform="translate(0.000000, 0.026684)">
+                        <g id="Rectangle">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="Mask" fill="#0364FF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                            <ellipse id="Oval-Copy-2" fill="#FFFFFF" fill-rule="nonzero" opacity="0.217410714" mask="url(#mask-2)" cx="8.35714286" cy="4.78873239" rx="10.3571429" ry="10.2112676"></ellipse>
+                            <g id="Rectangle-Copy" mask="url(#mask-2)">
+                                <g transform="translate(6.142857, 3.239437)">
+                                    <mask id="mask-5" fill="white">
+                                        <use xlink:href="#path-4"></use>
+                                    </mask>
+                                    <use id="Mask" stroke="none" fill="url(#linearGradient-3)" fill-rule="nonzero" transform="translate(10.107143, 6.712010) rotate(90.000000) translate(-10.107143, -6.712010) " xlink:href="#path-4"></use>
+                                    <rect id="Rectangle-Copy" stroke="none" fill="url(#linearGradient-6)" fill-rule="nonzero" mask="url(#mask-5)" x="0" y="-1.12676056" width="2.1635183" height="18.5580889" rx="1.08175915"></rect>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+                <g id="Group-4" transform="translate(9.571429, 5.352113)">
+                    <g id="controls" transform="translate(4.575155, 4.647887) rotate(90.000000) translate(-4.575155, -4.647887) translate(0.157764, 0.464789)" fill="#B3C3D8" stroke="#B3C3D8" stroke-width="0.5">
+                        <path d="M1.2621118,6.20957746 L1.2621118,0.154929577 C1.2621118,0.0692535211 1.19143354,0 1.10434783,0 C1.01726211,0 0.946583851,0.0692535211 0.946583851,0.154929577 L0.946583851,6.20957746 C0.412237267,6.2851831 0,6.73649296 0,7.28169014 C0,7.87956338 0.495378882,8.36619718 1.10434783,8.36619718 C1.71331677,8.36619718 2.20869565,7.87956338 2.20869565,7.28169014 C2.20869565,6.73649296 1.79645839,6.2851831 1.2621118,6.20957746 Z" id="Path"></path>
+                        <path d="M4.57515528,3.05133803 L4.57515528,0.154929577 C4.57515528,0.0692535211 4.50447702,0 4.4173913,0 C4.33030559,0 4.25962733,0.0692535211 4.25962733,0.154929577 L4.25962733,3.04157746 C3.69136149,3.10292958 3.24772919,3.57701408 3.24772919,4.15102817 C3.24772919,4.72504225 3.69136149,5.19912676 4.25962733,5.26047887 L4.25962733,8.21126761 C4.25962733,8.29694366 4.33030559,8.36619718 4.4173913,8.36619718 C4.50447702,8.36619718 4.57515528,8.29694366 4.57515528,8.21126761 L4.57515528,5.25071831 C5.1115528,5.16132394 5.52173913,4.70288732 5.52173913,4.15102817 C5.52173913,3.59916901 5.1115528,3.14073239 4.57515528,3.05133803 Z" id="Path"></path>
+                        <path d="M8.83478261,1.08450704 C8.83478261,0.486633803 8.33940373,0 7.73043478,0 C7.12146584,0 6.62608696,0.486633803 6.62608696,1.08450704 C6.62608696,1.62970423 7.03832422,2.08101408 7.57267081,2.15661972 L7.57267081,8.21126761 C7.57267081,8.29694366 7.64334907,8.36619718 7.73043478,8.36619718 C7.8175205,8.36619718 7.88819876,8.29694366 7.88819876,8.21126761 L7.88819876,2.15661972 C8.42254534,2.08101408 8.83478261,1.62970423 8.83478261,1.08450704 Z" id="Path"></path>
+                    </g>
+                    <g id="Oval" fill-rule="nonzero">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                        <use fill="url(#linearGradient-7)" xlink:href="#path-8"></use>
+                    </g>
+                    <g id="Oval-Copy-4" fill-rule="nonzero">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
+                        <use fill="url(#linearGradient-7)" xlink:href="#path-10"></use>
+                    </g>
+                    <g id="Oval-Copy-3" fill-rule="nonzero">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-13)" xlink:href="#path-12"></use>
+                        <use fill="url(#linearGradient-7)" xlink:href="#path-12"></use>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/dev/renderer/components/dashboard/Sidebar.vue b/dev/renderer/components/dashboard/Sidebar.vue
index 0ea9cf6..feb4901 100644
--- a/dev/renderer/components/dashboard/Sidebar.vue
+++ b/dev/renderer/components/dashboard/Sidebar.vue
@@ -39,7 +39,7 @@
       <div class="nav" v-bind:class="{ active: $route.path == '/index'}">
         <div class="active-indicator" v-if="$route.path == '/index'"></div>
         <div class="shift-content">
-          <img src="../../assets/icon/icon-home.svg">
+          <img src="../../assets/icon/Overview-active.svg">
           <strong>
             <a v-on:click="goToPath('/index')">Overview</a>
           </strong>
@@ -48,7 +48,7 @@
 
       <div class="nav" id="account-nav">
         <div class="shift-content">
-          <img src="../../assets/icon/icon-customization.svg">
+          <img src="../../assets/icon/Account-active.svg">
           <strong>
             <a>Accounts</a>
           </strong>
@@ -96,7 +96,7 @@
       <div class="nav" v-bind:class="{ active: $route.path == '/miner'}">
         <div class="active-indicator" v-if="$route.path == '/miner'"></div>
         <div class="shift-content">
-          <img src="../../assets/icon/icon-real-time.svg">
+          <img src="../../assets/icon/Mining-active.svg">
           <strong>
             <a v-on:click="goToPath('/miner')">Miner</a>
           </strong>