diff --git a/packages/desktop/App.svelte b/packages/desktop/App.svelte
index 27d08b534e5..fa2d5cb61d0 100644
--- a/packages/desktop/App.svelte
+++ b/packages/desktop/App.svelte
@@ -99,11 +99,10 @@
     html,
     body {
         @apply bg-white;
+        @apply select-none;
         &.scheme-dark {
-            @apply bg-blue-900;
+            @apply bg-gray-900;
         }
-
-        @apply select-none;
     }
 </style>
 
diff --git a/packages/shared/assets/logos/firefly_logo_full_darkmode.svg b/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
new file mode 100644
index 00000000000..51847ebe71f
--- /dev/null
+++ b/packages/shared/assets/logos/firefly_logo_full_darkmode.svg
@@ -0,0 +1,12 @@
+<svg width="1044" height="348" viewBox="0 0 1044 348" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M279.107 130.855C293.744 145.491 317.475 145.491 332.112 130.855C346.749 116.218 346.749 92.4865 332.112 77.8495C317.475 63.2126 293.744 63.2126 279.107 77.8495C264.47 92.4865 264.47 116.218 279.107 130.855Z" fill="#108CFF"/>
+<path d="M196.992 145.477C171.15 137.953 143.267 145.348 124.55 164.69L106.147 183.708C75.0544 215.839 90.8621 269.603 134.398 279.792C154.056 284.393 174.687 278.36 188.769 263.892L273.778 176.555C276.776 173.474 275.415 168.309 271.287 167.107L196.992 145.477Z" fill="#FFCA62"/>
+<path d="M198.04 199.546C172.325 207.492 144.324 200.556 125.293 181.524L106.581 162.811C74.9648 131.194 89.8882 77.1773 133.251 66.2751C152.831 61.3524 173.558 67.0464 187.876 81.2809L274.306 167.211C277.355 170.243 276.078 175.43 271.97 176.699L198.04 199.546Z" fill="#108CFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M125.291 181.523C144.322 200.555 172.323 207.491 198.038 199.545L271.968 176.698C273.394 176.257 274.48 175.344 275.161 174.212C276.013 171.34 274.475 168.041 271.284 167.112L196.989 145.481C171.147 137.957 143.264 145.353 124.547 164.694L116.637 172.869L125.291 181.523Z" fill="#0066FF"/>
+<path d="M541.023 124.988V99.3852H461.1V235.157H487.486V182.788H539.494V157.185H487.486V124.988H541.023Z" fill="white"/>
+<path d="M571.34 126.54C579.753 126.54 586.636 119.557 586.636 111.217C586.636 102.876 579.753 95.7 571.34 95.7C563.118 95.7 556.235 102.876 556.235 111.217C556.235 119.557 563.118 126.54 571.34 126.54ZM559.103 235.157H583.768V138.177H559.103V235.157Z" fill="white"/>
+<path d="M631.009 154.858V138.177H606.344V235.157H631.009V188.8C631.009 168.435 647.261 162.616 660.072 164.168V136.237C648.026 136.237 635.98 141.668 631.009 154.858Z" fill="white"/>
+<path d="M691.791 196.947H763.875C764.449 193.649 764.831 190.352 764.831 186.667C764.831 158.155 744.755 135.462 716.456 135.462C686.437 135.462 665.978 157.767 665.978 186.667C665.978 215.567 686.246 237.872 718.368 237.872C736.724 237.872 751.064 230.308 760.051 217.118L740.166 205.481C735.959 211.106 728.311 215.179 718.751 215.179C705.749 215.179 695.233 209.748 691.791 196.947ZM691.409 177.551C694.277 165.137 703.263 157.961 716.456 157.961C726.781 157.961 737.106 163.586 740.166 177.551H691.409Z" fill="white"/>
+<path d="M830.683 96.6698C800.282 96.6698 785.75 110.441 785.75 137.207V138.177H771.983V162.228H785.75V235.157H810.415V162.228H826.285V138.177H810.415V137.207C810.415 124.018 817.872 118.587 830.683 118.587C833.169 118.587 835.846 118.587 838.522 118.781V235.157H863.188V100.743C852.672 98.6094 842.729 96.6698 830.683 96.6698Z" fill="white"/>
+<path d="M948.014 138.177L926.79 203.347L901.934 138.177H874.974L914.171 232.053C909.582 245.049 902.698 250.867 889.123 250.673V273.948C913.406 275.306 929.658 263.087 939.601 235.157L974.4 138.177H948.014Z" fill="white"/>
+</svg>
diff --git a/packages/shared/assets/logos/stronghold_darkmode.svg b/packages/shared/assets/logos/stronghold_darkmode.svg
new file mode 100644
index 00000000000..0865b01bd51
--- /dev/null
+++ b/packages/shared/assets/logos/stronghold_darkmode.svg
@@ -0,0 +1,24 @@
+<svg width="141" height="56" viewBox="0 0 141 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M69.2905 44.9462C71.2568 44.9462 72.1088 43.933 72.1088 42.7491C72.1088 40.0934 67.8703 40.9146 67.8703 39.5921C67.8703 39.0588 68.351 38.7068 69.1047 38.7068C69.8694 38.7068 70.645 38.9628 71.2131 39.5174L71.945 38.5895C71.2677 37.9495 70.3501 37.5976 69.214 37.5976C67.6191 37.5976 66.5595 38.5042 66.5595 39.6774C66.5595 42.3012 70.8089 41.3732 70.8089 42.8664C70.8089 43.3357 70.3938 43.837 69.3451 43.837C68.3292 43.837 67.5426 43.3784 67.0401 42.8558L66.3301 43.8157C66.9746 44.4876 67.9468 44.9462 69.2905 44.9462Z" fill="#8493AD"/>
+<path d="M76.4127 44.8183V38.8028H78.6193V37.7042H72.9279V38.8028H75.1346V44.8183H76.4127Z" fill="#8493AD"/>
+<path d="M85.5576 44.8183L83.777 42.0238C84.6509 41.8852 85.503 41.2026 85.503 39.9334C85.503 38.6215 84.5635 37.7042 83.1216 37.7042H79.9209V44.8183H81.1989V42.1625H82.4661L84.0829 44.8183H85.5576ZM82.9468 41.0639H81.1989V38.8028H82.9468C83.6677 38.8028 84.1921 39.2508 84.1921 39.9334C84.1921 40.616 83.6677 41.0639 82.9468 41.0639Z" fill="#8493AD"/>
+<path d="M90.3961 44.9462C92.5809 44.9462 94.1211 43.3891 94.1211 41.2666C94.1211 39.1441 92.5809 37.5869 90.3961 37.5869C88.2113 37.5869 86.671 39.1441 86.671 41.2666C86.671 43.3891 88.2113 44.9462 90.3961 44.9462ZM90.3961 43.837C88.9214 43.837 87.9819 42.7278 87.9819 41.2666C87.9819 39.7947 88.9214 38.6961 90.3961 38.6961C91.8599 38.6961 92.8103 39.7947 92.8103 41.2666C92.8103 42.7278 91.8599 43.837 90.3961 43.837Z" fill="#8493AD"/>
+<path d="M101.884 44.8183V37.7042H100.606V42.6425L96.8811 37.7042H95.5702V44.8183H96.8483V39.7414L100.65 44.8183H101.884Z" fill="#8493AD"/>
+<path d="M107.147 44.9569C108.414 44.9569 109.43 44.445 110.151 43.6664V40.9999H106.699V42.0985H108.873V43.2077C108.545 43.5064 107.889 43.8477 107.147 43.8477C105.705 43.8477 104.634 42.7598 104.634 41.2666C104.634 39.7734 105.705 38.6961 107.147 38.6961C107.966 38.6961 108.654 39.1121 109.036 39.6454L110.085 39.0694C109.495 38.2482 108.567 37.5869 107.147 37.5869C105.038 37.5869 103.323 39.0374 103.323 41.2666C103.323 43.4957 105.038 44.9569 107.147 44.9569Z" fill="#8493AD"/>
+<path d="M118.046 44.8183V37.7042H116.768V40.616H112.978V37.7042H111.7V44.8183H112.978V41.7145H116.768V44.8183H118.046Z" fill="#8493AD"/>
+<path d="M123.21 44.9462C125.394 44.9462 126.935 43.3891 126.935 41.2666C126.935 39.1441 125.394 37.5869 123.21 37.5869C121.025 37.5869 119.485 39.1441 119.485 41.2666C119.485 43.3891 121.025 44.9462 123.21 44.9462ZM123.21 43.837C121.735 43.837 120.795 42.7278 120.795 41.2666C120.795 39.7947 121.735 38.6961 123.21 38.6961C124.673 38.6961 125.624 39.7947 125.624 41.2666C125.624 42.7278 124.673 43.837 123.21 43.837Z" fill="#8493AD"/>
+<path d="M132.873 44.8183V43.7197H129.662V37.7042H128.384V44.8183H132.873Z" fill="#8493AD"/>
+<path d="M136.955 44.8183C139.227 44.8183 140.767 43.3571 140.767 41.2666C140.767 39.1761 139.227 37.7042 136.955 37.7042H134.245V44.8183H136.955ZM136.955 43.7197H135.524V38.8028H136.955C138.582 38.8028 139.456 39.8907 139.456 41.2666C139.456 42.6105 138.539 43.7197 136.955 43.7197Z" fill="#8493AD"/>
+<path d="M68.5603 12.1445H66.3643V31.3874H68.5603V12.1445Z" fill="white"/>
+<path d="M75.6299 21.7504C75.6299 16.3585 80.1516 11.792 85.469 11.792C90.8173 11.792 95.2743 16.3245 95.2743 21.7504C95.2743 27.1764 90.7865 31.7089 85.469 31.7089C80.1824 31.7398 75.6299 27.1764 75.6299 21.7504ZM93.0782 21.7504C93.0782 17.4746 89.6083 13.8356 85.469 13.8356C81.3298 13.8356 77.829 17.4746 77.829 21.7504C77.829 26.0603 81.3298 29.6962 85.469 29.6962C89.6083 29.6962 93.0782 26.0603 93.0782 21.7504Z" fill="white"/>
+<path d="M106.546 14.2191H100.084V12.1445H115.176V14.2191H108.711V31.3874H106.515L106.546 14.2191Z" fill="white"/>
+<path d="M126.697 14.8251L119.406 31.3874H117.019L125.01 13.2297C125.297 12.5588 125.966 12.1445 126.666 12.1445C127.397 12.1445 128.036 12.5588 128.323 13.2297L136.314 31.3874H133.927L126.697 14.8251Z" fill="white"/>
+<path d="M23.1942 0.244507C23.5687 0.0283116 24.1245 -0.017962 24.6612 0.00552189C25.7438 0.0528863 26.7497 0.519148 27.6881 1.06094L47.9284 12.7467C48.8812 13.2968 49.4682 14.3135 49.4682 15.4138V40.4181C49.4682 41.5184 48.8812 42.5351 47.9284 43.0852L26.274 55.5874C25.3211 56.1375 24.1471 56.1375 23.1942 55.5874L1.53987 43.0852C0.586995 42.5351 0 41.5184 0 40.4181V15.4138C0 14.3135 0.586994 13.2968 1.53987 12.7467L23.1942 0.244507Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.1525 16.0501C29.1885 15.5786 28.9514 15.1281 28.5424 14.8908L26.3699 13.6303C25.4141 13.0757 24.2345 13.0757 23.2787 13.6303L21.2847 14.7873C20.8757 15.0246 20.6387 15.475 20.6746 15.9465L20.8135 17.7676C20.8482 18.2217 20.6295 18.6578 20.245 18.9016L18.6763 19.8965C18.0632 20.2853 17.2487 20.0624 16.919 19.4156L16.6854 18.9575C16.3645 18.3279 15.5809 18.0968 14.9697 18.4514L13.255 19.4464C12.1477 20.0888 11.5534 21.3492 11.762 22.6121L13.5348 33.3429C13.8217 35.0801 14.8385 36.6115 16.3282 37.5501L23.8273 42.2754C24.4354 42.6586 25.2106 42.6543 25.8145 42.2645L33.1622 37.5217C34.5929 36.5983 35.5774 35.1237 35.882 33.4483L37.8463 22.6425C38.0785 21.3652 37.4848 20.0794 36.3618 19.4279L34.8228 18.5349C34.2116 18.1803 33.428 18.4114 33.1071 19.0409L32.9161 19.4157C32.5864 20.0624 31.7718 20.2853 31.1588 19.8965L29.5901 18.9017C29.2056 18.6578 28.9869 18.2217 29.0215 17.7676L29.1525 16.0501ZM26.1744 29.8175C27.1957 29.3221 27.8998 28.2752 27.8998 27.0639C27.8998 25.3746 26.5304 24.0052 24.8411 24.0052C23.1518 24.0052 21.7824 25.3746 21.7824 27.0639C21.7824 28.2122 22.4151 29.2127 23.3509 29.7357V33.2597C23.3509 34.0394 23.983 34.6714 24.7627 34.6714C25.5423 34.6714 26.1744 34.0394 26.1744 33.2597V29.8175Z" fill="#F6F8FC"/>
+<defs>
+<linearGradient id="paint0_linear" x1="24.7341" y1="0" x2="24.7341" y2="56" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8493AD"/>
+<stop offset="1" stop-color="#131F37"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/shared/components/AccountTile.svelte b/packages/shared/components/AccountTile.svelte
index 9748c7b6267..48d25ef1023 100644
--- a/packages/shared/components/AccountTile.svelte
+++ b/packages/shared/components/AccountTile.svelte
@@ -23,7 +23,7 @@
 
 <button
     on:click={onClick}
-    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
+    class="size-{size} group rounded-2xl bg-gray-200 dark:bg-gray-900 hover:bg-{color}-500 font-400 flex flex-col justify-between text-left p-{size === 's' ? '3' : '6'}">
     <Text smaller={size === 's'} overrideColor classes="mb-2 text-gray-800 dark:text-white group-hover:text-white">{name}</Text>
     <div class="flex flex-row justify-between w-full flex-{size === 'l' ? 'nowrap' : 'wrap'}">
         <Text
diff --git a/packages/shared/components/Button.svelte b/packages/shared/components/Button.svelte
index d2678125142..aa677b887bb 100644
--- a/packages/shared/components/Button.svelte
+++ b/packages/shared/components/Button.svelte
@@ -2,7 +2,7 @@
     import { Icon } from 'shared/components'
     import { bindEvents } from 'shared/lib/utils'
     import { onMount } from 'svelte'
-
+    import { appSettings } from 'shared/lib/appSettings'
     export let events = {}
     export let onClick = () => ''
     export let secondary = false
@@ -19,6 +19,7 @@
     export let autofocus = false
 
     let buttonElement
+    let darkModeEnabled = $appSettings.darkMode
 
     onMount(() => {
         if (autofocus) {
@@ -34,19 +35,34 @@
         span {
             @apply text-white;
         }
-        &:not(.with-icon):hover,
-        &:not(.with-icon):focus {
-            @apply bg-blue-600;
-        }
-        &:not(.with-icon):active {
-            @apply bg-blue-700;
-        }
-
-        &:disabled {
-            @apply pointer-events-none;
-            @apply bg-gray-200;
-            span {
-                @apply text-gray-500;
+        &:not(.with-icon) {
+            &:hover,
+            &:focus {
+                @apply bg-blue-600;
+            }
+            &:active {
+                @apply bg-blue-700;
+            }
+            &.warning {
+                @apply bg-red-500;
+                min-width: 100px;
+                span {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-red-600;
+                }
+                &:active,
+                &:focus {
+                    @apply bg-red-700;
+                }
+                &:disabled {
+                    @apply pointer-events-none;
+                    @apply bg-gray-200;
+                    span {
+                        @apply text-gray-500;
+                    }
+                }
             }
         }
         &.secondary {
@@ -57,12 +73,12 @@
             span {
                 @apply text-blue-500;
             }
-            &:hover,
-            &:focus {
+            &:hover {
                 @apply bg-blue-50;
                 @apply border-blue-200;
             }
-            &:active {
+            &:active,
+            &:focus {
                 @apply bg-blue-100;
                 @apply border-blue-400;
                 @apply text-blue-600;
@@ -75,29 +91,36 @@
                     @apply text-gray-500;
                 }
             }
-        }
-        &.warning {
-            @apply bg-red-500;
-            min-width: 100px;
-            span {
-                @apply text-white;
-            }
-            &:hover {
-                @apply bg-red-600;
-            }
-            &:active {
-                @apply bg-red-700;
-            }
-
-            &:disabled {
-                @apply pointer-events-none;
-                @apply bg-gray-200;
+            &.darkmode {
+                @apply bg-gray-700;
+                @apply border-gray-700;
+                @apply bg-opacity-30;
+                @apply border-opacity-30;
                 span {
-                    @apply text-gray-500;
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-opacity-50;
+                    @apply border-opacity-50;
+                }
+                &:focus,
+                &:active {
+                    @apply bg-opacity-80;
+                    @apply border-opacity-50;
+                }
+                &:disabled {
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    @apply bg-opacity-10;
+                    @apply border-opacity-10;
+                    span {
+                        @apply text-gray-700;
+                    }
                 }
             }
         }
         &.with-icon {
+            min-width: 200px;
             @apply border;
             @apply border-solid;
             @apply border-gray-300;
@@ -116,6 +139,15 @@
             :global(svg.right) {
                 @apply text-gray-500;
             }
+            &:hover,
+            &:focus {
+                @apply border-gray-500;
+            }
+            &:disabled {
+                :global(svg) {
+                    @apply text-gray-500;
+                }
+            }
             &.active {
                 @apply bg-blue-500;
                 span,
@@ -123,16 +155,33 @@
                     @apply text-white;
                 }
             }
-
-            &:hover,
-            &:focus {
-                @apply border-gray-500;
-            }
-
-            &:disabled {
-                :global(svg) {
+            &.darkmode {
+                @apply border-gray-700;
+                @apply bg-transparent;
+                span {
+                    @apply text-white;
+                }
+                :global(svg, svg.right) {
                     @apply text-gray-500;
                 }
+                &:hover,
+                &:focus {
+                    @apply bg-gray-700;
+                    @apply bg-opacity-20;
+                }
+                &:disabled {
+                    :global(svg) {
+                        @apply text-gray-500;
+                    }
+                }
+                &.active {
+                    @apply bg-gray-700;
+                    @apply border-gray-700;
+                    span,
+                    :global(svg) {
+                        @apply text-white;
+                    }
+                }
             }
         }
         &.small {
@@ -166,6 +215,22 @@
             &:active {
                 @apply text-gray-800;
             }
+            &.darkmode {
+                &,
+                &:hover,
+                &:active {
+                    @apply text-white;
+                }
+                &:hover {
+                    @apply bg-blue-900;
+                }
+                &:active {
+                    @apply bg-gray-900;
+                }
+                :global(svg) {
+                    @apply text-blue-500;
+                }
+            }
         }
 
         &:disabled {
@@ -174,6 +239,13 @@
             span {
                 @apply text-gray-500;
             }
+            &.darkmode {
+                @apply bg-gray-700;
+                @apply bg-opacity-10;
+                span {
+                    @apply text-gray-700;
+                }
+            }
         }
     }
 </style>
@@ -188,6 +260,7 @@
         class:secondary
         class:active
         class:with-icon={icon}
+        class:darkmode={darkModeEnabled}
         {disabled}
         bind:this={buttonElement}>
         <Icon classes="mb-1" {icon} />
@@ -208,6 +281,7 @@
         class:with-icon={icon}
         class:iconReverse
         class:active
+        class:darkmode={darkModeEnabled}
         {disabled}
         bind:this={buttonElement}>
         {#if icon}
@@ -216,7 +290,7 @@
                     <div class="relative flex flex-row justify-between">
                         <div class="relative flex items-center flex-1">
                             <div class="absolute left-0 flex items-center">
-                                <Icon width={16} height={16} classes="mr-4" {icon} />
+                                <Icon width="16" height="16" classes="mr-4" {icon} />
                             </div>
                             <span class="font-bold text-12 leading-140"><slot /></span>
                         </div>
@@ -226,7 +300,7 @@
                         <div class="relative flex items-center flex-1">
                             <span class="font-bold text-12 leading-140"><slot /></span>
                             <div class="absolute right-0 flex items-center">
-                                <Icon width={16} height={16} classes="ml-4" {icon} />
+                                <Icon width="16" height="16" classes="ml-4" {icon} />
                             </div>
                         </div>
                     </div>
@@ -235,7 +309,7 @@
                 <div class="relative flex flex-row justify-between">
                     <div class="relative flex items-center flex-1">
                         <div class="absolute left-0 flex items-center">
-                            <Icon width={16} height={16} classes="mr-4" {icon} />
+                            <Icon classes="mr-4" {icon} />
                         </div>
                         <span class="font-bold text-12 leading-140"><slot /></span>
                     </div>
diff --git a/packages/shared/components/DashboardPane.svelte b/packages/shared/components/DashboardPane.svelte
index a60121f6f98..a16290fef21 100644
--- a/packages/shared/components/DashboardPane.svelte
+++ b/packages/shared/components/DashboardPane.svelte
@@ -4,7 +4,7 @@
 
 <style>
     div {
-        box-shadow: 0px 1px 2px 2px rgba(154, 173, 206, 0.1);
+        box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
     }
 </style>
 
diff --git a/packages/shared/components/HR.svelte b/packages/shared/components/HR.svelte
new file mode 100644
index 00000000000..d2ef99d3b24
--- /dev/null
+++ b/packages/shared/components/HR.svelte
@@ -0,0 +1,6 @@
+<script lang="typescript">
+    export let classes: string = ''
+    export let overrideColor: boolean = false
+</script>
+
+<hr class="border-t border-solid {!overrideColor && 'border-gray-200 dark:border-gray-700'} {classes}" />
diff --git a/packages/shared/components/Link.svelte b/packages/shared/components/Link.svelte
index 5558d9a64c9..193558fdfbe 100644
--- a/packages/shared/components/Link.svelte
+++ b/packages/shared/components/Link.svelte
@@ -9,14 +9,8 @@
     export let ghost = false
 </script>
 
-<style type="text/scss">
-    a {
-        color: var(--text-highlighted-color); // TODO: tailwindify
-    }
-</style>
-
 <a
-    class="text-12 leading-140 cursor-pointer"
+    class="text-12 leading-140 cursor-pointer text-blue-500"
     data-label="link"
     use:bindEvents={events}
     {href}
diff --git a/packages/shared/components/Logo.svelte b/packages/shared/components/Logo.svelte
index 04751c5987b..6e64322ae94 100644
--- a/packages/shared/components/Logo.svelte
+++ b/packages/shared/components/Logo.svelte
@@ -1,15 +1,28 @@
 <script lang="typescript">
+    import { appSettings } from 'shared/lib/appSettings'
+
     export let logo = undefined
     export let width = undefined
     export let height = undefined
     export let classes = ''
 
-    $: selected = logos[logo]
+    let darkModeEnabled = $appSettings.darkMode
+
+    $: selected = logos[logo]?.[darkModeEnabled ? 'darkmode' : 'default']
 
     const logos = {
-        'logo-firefly-full': 'firefly_logo_full.svg',
-        'logo-firefly': 'firefly_logo.svg',
-        'profile-picture': 'profile_picture.svg', // TODO: remove
+        'logo-firefly-full': {
+            default: 'firefly_logo_full.svg',
+            darkmode: 'firefly_logo_full_darkmode.svg',
+        },
+        'logo-firefly': {
+            default: 'firefly_logo.svg',
+            darkmode: 'firefly_logo.svg',
+        },
+        'logo-stronghold': {
+            default: 'stronghold.svg',
+            darkmode: 'stronghold_darkmode.svg',
+        }
     }
 </script>
 
diff --git a/packages/shared/components/OnboardingLayout.svelte b/packages/shared/components/OnboardingLayout.svelte
index 0b7e390f62b..62a85a5f1eb 100644
--- a/packages/shared/components/OnboardingLayout.svelte
+++ b/packages/shared/components/OnboardingLayout.svelte
@@ -9,7 +9,7 @@
     <slot />
 {/if}
 <!--  -->
-<div data-label="onboarding-layout" class="relative w-full h-full flex flex-row bg-white dark:bg-blue-900">
+<div data-label="onboarding-layout" class="relative w-full h-full flex flex-row bg-white dark:bg-gray-900">
     {#if allowBack}
         <div data-label="back-button" class="absolute top-12 left-5" on:click={onBackClick}>
             <Icon icon="arrow-left" classes="cursor-pointer text-blue-500" />
diff --git a/packages/shared/components/Profile.svelte b/packages/shared/components/Profile.svelte
index e8a873ff7c9..8ec02900e91 100644
--- a/packages/shared/components/Profile.svelte
+++ b/packages/shared/components/Profile.svelte
@@ -37,8 +37,8 @@
         </div>
         <Text type="h4" classes="mt-5">{name}</Text>
         {#if isDeveloper}
-            <div class={'bg-gray-500 rounded-full px-2 mt-4'}>
-                <Text type="p" classes="text-white">{locale('general.dev').toUpperCase()}</Text>
+            <div class="bg-gray-500 dark:bg-gray-700 dark:bg-opacity-20 rounded-full px-2 py-1 mt-4">
+                <Text type="p" smaller classes="text-white">{locale('general.dev').toUpperCase()}</Text>
             </div>
         {/if}
     </div>
diff --git a/packages/shared/components/QR.svelte b/packages/shared/components/QR.svelte
index 49f86304128..b2afe5e7618 100644
--- a/packages/shared/components/QR.svelte
+++ b/packages/shared/components/QR.svelte
@@ -1,11 +1,13 @@
 <script lang="typescript">
     import QRCode from 'qr.js/lib/QRCode'
+    import { appSettings } from 'shared/lib/appSettings'
 
     export let data
     export let size = 150
 
     let qr
     let cells
+    let darkModeEnabled = $appSettings.darkMode
 
     $: data, create()
 
@@ -37,7 +39,7 @@
                     <rect
                         height={1}
                         key={cellIndex}
-                        style="fill: {cell ? '#000000' : 'none'};"
+                        style="fill: {cell ? (darkModeEnabled ? '#ffffff' : '#000000') : 'none'};"
                         width={1}
                         x={cellIndex}
                         y={rowIndex} />
diff --git a/packages/shared/components/RecoveryPhrase.svelte b/packages/shared/components/RecoveryPhrase.svelte
index a854acd2ea8..def25288ef5 100644
--- a/packages/shared/components/RecoveryPhrase.svelte
+++ b/packages/shared/components/RecoveryPhrase.svelte
@@ -81,7 +81,7 @@
         {#each visibleRecoveryPhrase as word, i}
             <button
                 on:click|preventDefault={() => handleClick(word, i)}
-                class="px-6 py-4 flex flex-row items-center rounded-2xl bg-gray-50"
+                class="px-6 py-4 flex flex-row items-center rounded-2xl bg-gray-50 dark:bg-gray-800"
                 class:selected={isVerification && recoveryPhraseIndexes.indexOf(i) !== -1}
                 class:disabled={!isVerification || disabled}
                 class:errored={errorIndex === i}>
@@ -89,7 +89,9 @@
                 {#if isVerification && recoveryPhraseIndexes.indexOf(i) !== -1}
                     <span class="text-gray-300">{word}</span>
                     <span class="font-bold text-16 leading-3 text-white">{recoveryPhraseIndexes.indexOf(i) + 1}</span>
-                {:else}<span class={hide ? 'text-gray-500' : 'text-gray-800'}>{hide ? '********' : word}</span>{/if}
+                {:else}
+                    <span class={hide ? 'text-gray-500' : 'text-gray-800 dark:text-white'}>{hide ? '********' : word}</span>
+                {/if}
             </button>
         {/each}
     </div>
diff --git a/packages/shared/components/SettingsMenu.svelte b/packages/shared/components/SettingsMenu.svelte
index 5d4c8ec6b88..3189ec69234 100644
--- a/packages/shared/components/SettingsMenu.svelte
+++ b/packages/shared/components/SettingsMenu.svelte
@@ -19,7 +19,7 @@
     {#each Object.values(settings) as setting}
         <button
             on:click={() => onClick(setting)}
-            class={`group flex flex-row justify-start items-center hover:bg-blue-50 py-2 rounded-lg w-3/4 text-left ${Object.values(activeSettings).includes(setting) ? '' : 'opacity-20 pointer-events-none'}`}
+            class={`group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-2 rounded-lg w-3/4 text-left ${Object.values(activeSettings).includes(setting) ? '' : 'opacity-20 pointer-events-none'}`}
             disabled={!Object.values(activeSettings).includes(setting)}>
             <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text type="p" secondary classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>
diff --git a/packages/shared/components/SettingsNavigator.svelte b/packages/shared/components/SettingsNavigator.svelte
index 8960c501c88..2d470ddee8e 100644
--- a/packages/shared/components/SettingsNavigator.svelte
+++ b/packages/shared/components/SettingsNavigator.svelte
@@ -31,7 +31,7 @@
                 {#each Object.values(settings[route]) as setting, i}
                     <button
                         on:click={() => onSettingClick(setting)}
-                        class="group flex flex-row justify-start items-center hover:bg-blue-50 py-2 rounded-lg w-full ml-6 text-left {Object.values(settings[route]).length - 1 === i && 'mb-4'}">
+                        class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-2 rounded-lg w-full ml-6 text-left {Object.values(settings[route]).length - 1 === i && 'mb-4'}">
                         <Icon icon={icons[setting]} classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
                         <Text type="p" classes="group-hover:text-blue-500">{locale(`views.settings.${setting}.title`)}</Text>
                     </button>
diff --git a/packages/shared/components/charts/Option.svelte b/packages/shared/components/charts/Option.svelte
deleted file mode 100644
index 5ab5149ddf0..00000000000
--- a/packages/shared/components/charts/Option.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script lang="typescript">
-    import { Box, Text } from 'shared/components'
-
-    export let selected = false
-    export let option
-</script>
-
-<style type="text/scss">
-    p {
-        color: var(--text-secondary-color);
-        font-size: 10px;
-        line-height: 12px;
-        cursor: pointer;
-
-        &.selected {
-            color: var(--bg-grey-color);
-            background: var(--ui-blue-color);
-        }
-    }
-</style>
-
-{#if selected}
-    <p class:selected type="p" class="px-4 flex items-center justify-center rounded-full h-8 w-8">{option}</p>
-{:else}
-    <p class="px-4 py-2">{option}</p>
-{/if}
diff --git a/packages/shared/components/icon/icons.js b/packages/shared/components/icon/icons.js
index bea7c67d505..2a78b7b10fb 100644
--- a/packages/shared/components/icon/icons.js
+++ b/packages/shared/components/icon/icons.js
@@ -149,6 +149,7 @@ export const icons = {
                 d: 'M7 12L10.5 15.5L17 9',
                 strokeWidth: '2',
                 strokeLinecap: 'round',
+                strokeColor: 'white',
             },
         ],
     },
@@ -159,6 +160,9 @@ export const icons = {
             {
                 d:
                     'm0.55394,5.52478c0,-2.71689 2.28311,-5 5,-5l13.10204,0c2.71689,0 5,2.28311 5,5l0,13.0204c0,2.71689 -2.28311,5 -5,5l-13.10204,0c-2.71689,0 -5,-2.28311 -5,-5l0,-13.0204z',
+                fill: 'none',
+                strokeWidth: '1',
+                strokeLinecap: 'round',
             },
         ],
     },
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
index 8867b949757..d3bb70d1bef 100644
--- a/packages/shared/components/index.js
+++ b/packages/shared/components/index.js
@@ -37,11 +37,11 @@ export { default as Idle } from './Idle.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as ProgressBar } from './ProgressBar.svelte'
 export { default as Spinner } from './Spinner.svelte'
+export { default as HR } from './HR.svelte'
 
 export * from './modals'
 // Charts
 export { default as Chart } from './charts/Index.svelte'
-export { default as ChartOption } from './charts/Option.svelte'
 export { default as BarChart } from './charts/Bar.svelte'
 export { default as LineChart } from './charts/Line.svelte'
 export * as ChartDefaults from './charts/defaults'
diff --git a/packages/shared/components/inputs/Address.svelte b/packages/shared/components/inputs/Address.svelte
index 6af30e6ed04..79073bdc66f 100644
--- a/packages/shared/components/inputs/Address.svelte
+++ b/packages/shared/components/inputs/Address.svelte
@@ -11,20 +11,10 @@
 </script>
 
 <style type="text/scss">
-    address-input {
-        display: flex;
-        position: relative;
-        textarea {
-            color: var(--text-secondary-color);
-            background: var(--element-bg-color);
-            border-radius: 10px;
-            box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.2), 0px 4px 8px rgba(65, 114, 248, 0.08);
-            resize: none;
-
-            &.disabled {
-                @apply pointer-events-none;
-                @apply bg-gray-100;
-            }
+    textarea {
+        &.disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
     }
 </style>
@@ -34,11 +24,14 @@
         <Text type="p" classes="mb-2" smaller>{label}</Text>
     {/if}
 
-    <address-input class={classes}>
+    <address-input class=" flex relative {classes}">
         <textarea
             bind:value={address}
             placeholder={prefix}
-            class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 bg-white border border-solid ${classes} ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 focus:border-gray-500'} rounded-xl text-gray`}
+            class={`w-full relative text-12 leading-140 py-4 pr-8 pl-4 rounded-xl resize-none
+                border border-solid text-gray-500 dark:text-white bg-white dark:bg-gray-800
+                ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-700 focus:border-gray-500 dark:focus:border-gray-600'} 
+                ${classes}`}
             class:disabled
             {disabled}
             spellcheck={false} />
diff --git a/packages/shared/components/inputs/Amount.svelte b/packages/shared/components/inputs/Amount.svelte
index 176298c8745..7019e2eb65a 100644
--- a/packages/shared/components/inputs/Amount.svelte
+++ b/packages/shared/components/inputs/Amount.svelte
@@ -29,6 +29,16 @@
 <style type="text/scss">
     amount-input {
         nav {
+            &.active {
+                @apply opacity-100;
+                @apply pointer-events-auto;
+            }
+        }
+    }
+    amount-input {
+        &.disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
             border-radius: 10px;
             button {
                 &:hover,
@@ -41,8 +51,8 @@
 </style>
 
 <svelte:window on:click={clickOutside} />
-<Text type="p" classes="mb-2" smaller>{label || locale('general.amount')}</Text>
-<amount-input class="relative block {classes}">
+<Text type="p" classes="mb-2 {disabled && 'opacity-50'}" smaller>{label || locale('general.amount')}</Text>
+<amount-input class:disabled class="relative block {classes}">
     <Input
         {error}
         placeholder={label || locale('general.amount')}
@@ -68,11 +78,12 @@
             {unit}
             {#if !disabled && dropdown}
                 <nav
-                    class="absolute w-10 overflow-y-auto bg-white border border-solid border-gray-500 z-10 text-left top-10 right-0">
+                    class="absolute w-10 overflow-y-auto bg-white border border-solid border-gray-500 z-10 text-left top-10 right-0 rounded-lg bg-gray-50 dark:bg-gray-800 border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700">
                     {#each Units as _unit}
                         <button
                             id={_unit}
-                            class="text-center w-full py-2"
+                            class="text-center w-full py-2 {unit === _unit && 'bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20'} 
+                            hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20"
                             on:click={() => onSelect(_unit)}
                             class:active={unit === _unit}>
                             <Text type="p" smaller>{_unit}</Text>
diff --git a/packages/shared/components/inputs/Checkbox.svelte b/packages/shared/components/inputs/Checkbox.svelte
index fd479a8ba57..b622050b4ae 100644
--- a/packages/shared/components/inputs/Checkbox.svelte
+++ b/packages/shared/components/inputs/Checkbox.svelte
@@ -10,37 +10,32 @@
 <style type="text/scss">
     button {
         @apply border-gray-500;
-        :global(svg path) {
-            stroke: var(--text-disabled-color);
+        :global(svg:not(.active) path) {
             fill: none;
+            @apply text-gray-500;
+            @apply stroke-current;
         }
         :global(svg.active path) {
-            stroke: white;
-            fill: var(--ui-blue-color);
+            @apply text-blue-500;
+            @apply fill-current;
         }
-
-        &:not(:disabled):hover,
-        &:not(:disabled):focus {
+        &:hover,
+        &:focus {
             :global(svg path) {
-                stroke: #9aadce;
-            }
-            :global(svg.active path) {
-                stroke: white;
+                @apply text-blue-500;
             }
         }
 
         &:disabled {
-            pointer-events: none;
-            :global(svg path) {
-                fill: var(--button-disabled-bg-color);
-            }
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
     }
 </style>
 
 <button
     data-label="checkbox-input"
-    class={`flex items-center cursor-pointer ${classes}`}
+    class={`flex items-center text-left cursor-pointer ${classes}`}
     type="button"
     {disabled}
     on:click={() => {
diff --git a/packages/shared/components/inputs/Dropdown.svelte b/packages/shared/components/inputs/Dropdown.svelte
index 79229a60253..3078c49724d 100644
--- a/packages/shared/components/inputs/Dropdown.svelte
+++ b/packages/shared/components/inputs/Dropdown.svelte
@@ -22,39 +22,29 @@
 
 <style type="text/scss">
     dropdown-input {
-        transition: border-color 0.25s;
         min-height: 48px;
         @apply py-4;
         @apply pl-4;
         @apply pr-10;
         @apply rounded-xl;
         :global(svg) {
-            right: 12px; // TODO: unable to use tailwind inset
+            @apply right-3;
         }
         &.disabled {
             @apply pointer-events-none;
-            @apply bg-gray-100;
+            @apply opacity-50;
         }
         nav {
             .inner {
                 max-height: 235px;
             }
-            transition: opacity 0.25s;
-            top: 50px; // TODO: unable to use tailwind inset
-            left: 0px; // TODO: unable to use tailwind inset
+            top: 50px;
+            @apply left-0;
             @apply rounded-xl;
             &.active {
                 @apply opacity-100;
                 @apply pointer-events-auto;
             }
-            button {
-                &.active {
-                    @apply bg-gray-100;
-                }
-                &:hover {
-                    @apply bg-gray-200;
-                }
-            }
         }
         &.small {
             min-height: 32px;
@@ -63,22 +53,22 @@
             @apply pr-8;
             @apply rounded-lg;
             nav {
+                top: 38px;
                 @apply rounded-lg;
-                top: 38px; // TODO: unable to use tailwind inset
             }
             :global(svg) {
-                right: 8px; // TODO: unable to use tailwind inset
+                @apply right-2;
             }
         }
     }
 </style>
 
 {#if label}
-    <Text type="p" classes="mb-2" smaller>{label}</Text>
+    <Text type="p" classes="mb-2 {disabled && 'opacity-50'}" smaller>{label}</Text>
 {/if}
 <dropdown-input
-    class="relative flex items-center w-full whitespace-nowrap
-                bg-white border border-solid border-gray-300 hover:border-gray-500 cursor-pointer"
+    class="relative flex items-center w-full whitespace-nowrap cursor-pointer border border-solid
+    bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700"
     on:click={(e) => {
         e.stopPropagation()
         dropdown = !dropdown
@@ -91,16 +81,20 @@
     on:clickOutside={handleClickOutside}
     class:small
     class:disabled>
-    <Text type="p" smaller {disabled}>{value}</Text>
+    <Text type="p" smaller>{value}</Text>
     <Icon icon="chevron-down" classes="absolute text-gray-500 fill-current" />
     <nav
         class:active={dropdown}
-        class="absolute w-full bg-white overflow-hidden border border-solid border-gray-500 pointer-events-none opacity-0 z-10 text-left">
+        class="absolute w-full overflow-hidden pointer-events-none opacity-0 z-10 text-left 
+        bg-gray-50 dark:bg-gray-800
+            border border-solid border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700">
         <div class="inner overflow-y-auto">
             {#each items as item}
                 <button
+                    class="relative flex items-center p-4 w-full whitespace-nowrap
+                        {item[valueKey] === value && 'bg-gray-100 dark:bg-gray-700 dark:bg-opacity-20'} 
+                        hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:bg-opacity-20"
                     id={item[valueKey]}
-                    class="relative flex items-center bg-white p-4 w-full whitespace-nowrap"
                     on:click={() => onSelect(item)}
                     class:active={item[valueKey] === value}><Text type="p" smaller>{item[valueKey]}</Text></button>
             {/each}
diff --git a/packages/shared/components/inputs/Dropzone.svelte b/packages/shared/components/inputs/Dropzone.svelte
index 042fa497a0e..c84c456059c 100644
--- a/packages/shared/components/inputs/Dropzone.svelte
+++ b/packages/shared/components/inputs/Dropzone.svelte
@@ -63,12 +63,12 @@
 </style>
 
 <dropzone
-    class="flex items-center justify-center p-7 w-full bg-gray-50 rounded-lg border border-solid border-gray-200"
+    class="flex items-center justify-center p-7 w-full rounded-lg border border-solid bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700"
     on:drop={onFile}
     on:dragenter={onEnter}
     on:dragleave={onLeave}
     on:dragover|preventDefault>
-    <content class:dropping class="flex flex-col items-center relative">
+    <content class:dropping class="flex flex-col items-center relative text-center">
         {#if dropping}
             <Text type="p" secondary smaller>{locale('actions.dropHere')}</Text>
         {:else if fileName}
diff --git a/packages/shared/components/inputs/ImportTextfield.svelte b/packages/shared/components/inputs/ImportTextfield.svelte
index 78d54b164db..0cbfccd5e1a 100644
--- a/packages/shared/components/inputs/ImportTextfield.svelte
+++ b/packages/shared/components/inputs/ImportTextfield.svelte
@@ -84,7 +84,9 @@
 
 <div>
     <textarea
-        class="text-12 leading-140 resize-none w-full p-4 pb-3 rounded-xl border border-solid {error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 focus:border-gray-500'} bg-white text-gray-800"
+        class="text-12 leading-140 resize-none w-full p-4 pb-3 rounded-xl border border-solid 
+            {error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 dark:border-gray-700 dark:hover:border-gray-700'} 
+            text-gray-500 dark:text-white bg-white dark:bg-gray-800 "
         bind:value={content}
         on:keydown={debounce(handleKeyDown)}
         placeholder=""
diff --git a/packages/shared/components/inputs/Input.svelte b/packages/shared/components/inputs/Input.svelte
index ca6063a0635..bd7544f2000 100644
--- a/packages/shared/components/inputs/Input.svelte
+++ b/packages/shared/components/inputs/Input.svelte
@@ -54,30 +54,26 @@
     input::-webkit-outer-spin-button,
     input::-webkit-inner-spin-button {
         -webkit-appearance: none;
-        margin: 0;
+        @apply m-0;
     }
     input {
-        padding: 15px 40px 16px 13px;
-        color: var(--text-secondary-color);
-        background: var(--element-bg-color);
-        border-radius: 10px;
-        box-shadow: -2px -2px 4px rgba(255, 255, 255, 0.2), 0px 4px 8px rgba(65, 114, 248, 0.08);
-        transition: border-color 0.25s;
-
-        &:disabled {
+        &.disabled {
             @apply pointer-events-none;
-            @apply bg-gray-100;
+            @apply opacity-50;
         }
     }
 </style>
 
-<div class={'w-full'}>
+<div class="w-full">
     <input
         {type}
         {value}
         bind:this={inputElement}
         {maxlength}
-        class={`w-full text-12 leading-140 py-4 pr-8 pl-4 bg-white border border-solid ${classes} ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 hover:border-gray-500 focus:border-gray-500'} rounded-xl text-gray`}
+        class={`w-full text-12 leading-140 py-4 pr-8 pl-4 border border-solid rounded-xl 
+            text-gray-500 dark:text-white bg-white dark:bg-gray-800 
+            ${error ? 'border-red-300 hover:border-red-500 focus:border-red-500' : 'border-gray-300 dark:border-gray-700 hover:border-gray-500 dark:hover:border-gray-700 focus:border-gray-500 dark:focus:border-gray-600'} 
+            ${classes}`}
         on:input={handleInput}
         on:keypress={onKeyPress}
         {disabled}
diff --git a/packages/shared/components/inputs/Password.svelte b/packages/shared/components/inputs/Password.svelte
index 2d140fb3cd7..efd336da70d 100644
--- a/packages/shared/components/inputs/Password.svelte
+++ b/packages/shared/components/inputs/Password.svelte
@@ -1,4 +1,3 @@
-
 <script lang="typescript">
     import Input from './Input'
     import { Icon } from 'shared/components'
@@ -29,8 +28,9 @@
 
 <style type="text/scss">
     div {
-        button {
-            right: 12px; // TODO: unable to use tailwind inset
+        &:disabled {
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
         strength-meter {
             span {
@@ -47,15 +47,18 @@
     }
 </style>
 
-<div class={classes}>
+<div class={classes} class:disabled>
     {#if showStrengthLevel}
         <strength-meter class="flex flex-row justify-end mb-2">
             {#each Array(strengthLevels) as _, i}
-                <span class="ml-1 w-1.5 h-0.5 rounded-lg bg-gray-300"class:strong={strength === 4} class:weak={i - strength < 0}/>
+                <span
+                    class="ml-1 w-1.5 h-0.5 rounded-lg bg-gray-300"
+                    class:strong={strength === 4}
+                    class:weak={i - strength < 0} />
             {/each}
         </strength-meter>
     {/if}
-    <div class='flex w-full relative'>
+    <div class="flex w-full relative">
         <Input
             {error}
             {type}
@@ -64,12 +67,11 @@
             {integer}
             {autofocus}
             {disabled}
-            placeholder={placeholder || locale('general.password')} 
+            placeholder={placeholder || locale('general.password')}
             {submitHandler}
-            spellcheck="false"
-        />
+            spellcheck="false" />
         {#if showRevealToggle === true && !disabled}
-            <button type="button" on:click={() => revealToggle()} tabindex="-1" class="absolute top-3">
+            <button type="button" on:click={() => revealToggle()} tabindex="-1" class="absolute top-3 right-3">
                 <Icon icon={revealed ? 'view' : 'hide'} classes="text-blue-500" />
             </button>
         {/if}
diff --git a/packages/shared/components/inputs/Pin.svelte b/packages/shared/components/inputs/Pin.svelte
index 32c4418467f..660a27ed8db 100644
--- a/packages/shared/components/inputs/Pin.svelte
+++ b/packages/shared/components/inputs/Pin.svelte
@@ -109,36 +109,30 @@
 
 <style type="text/scss">
     pin-input {
-        height: 80px;
         @apply cursor-pointer;
-        user-select: none;
-        transition: border-color 0.25s;
+        @apply select-none;
+        @apply h-20;
 
         &:not(.disabled):focus-within,
         &:not(.disabled):hover {
             @apply border-gray-500;
         }
-
         &.disabled {
-            @apply cursor-default;
+            @apply pointer-events-none;
+            @apply opacity-50;
         }
         .input-wrapper {
             max-width: 204px;
-
             input {
                 -webkit-text-security: none;
-                width: 14px;
-                height: 14px;
-                opacity: 0;
+                @apply w-3.5;
+                @apply h-3.5;
+                @apply opacity-0;
                 @apply bg-transparent;
                 @apply text-transparent;
                 @apply cursor-pointer;
-
                 &:focus {
-                    outline: none;
-                }
-                &:disabled {
-                    @apply cursor-default;
+                    @apply outline-none;
                 }
             }
         }
@@ -146,15 +140,12 @@
             z-index: -1;
             max-width: 204px;
             input-decorator {
-                width: 14px;
-                height: 14px;
+                @apply w-3.5;
+                @apply h-3.5;
                 @apply bg-gray-400;
                 &.active {
                     @apply bg-blue-500;
                 }
-                &.disabled {
-                    @apply bg-gray-400;
-                }
             }
         }
     }
@@ -162,7 +153,9 @@
 
 <pin-input
     style="--pin-input-size: {PIN_LENGTH}"
-    class={`flex items-center justify-center w-full relative z-0 bg-gray-50 border border-solid border-gray-300 rounded-xl ${classes}`}
+    class={`flex items-center justify-center w-full relative z-0 rounded-xl border border-solid
+            bg-gray-50 dark:bg-gray-800 border-gray-300 dark:border-gray-700
+            ${classes}`}
     class:disabled
     bind:this={root}
     on:click={selectFirstEmptyRoot}
diff --git a/packages/shared/components/inputs/Radio.svelte b/packages/shared/components/inputs/Radio.svelte
index cc3b501c55b..f2bcc03e409 100644
--- a/packages/shared/components/inputs/Radio.svelte
+++ b/packages/shared/components/inputs/Radio.svelte
@@ -11,38 +11,29 @@
     label {
         position: relative;
         :global(svg path) {
-            stroke: white;
+            @apply text-white;
+            @apply stroke-current;
             fill: none;
         }
-        input {
-            position: absolute;
-            left: 0;
-            opacity: 0;
-        }
-
-        .svg-container {
-            width: 24px;
-            height: 24px;
-
+        div {
             &.active {
-                border-width: 0;
-                background-color: var(--ui-blue-color);
+                @apply border-0;
+                @apply bg-blue-500;
             }
         }
 
         &:hover,
         &:focus-within {
-            .svg-container {
-                border-color: var(--ui-blue-color);
+            div {
+                @apply border-blue-500;
             }
         }
     }
 </style>
 
-<label
-    class={`w-full flex items-center mb-4 text-12 leading-160 cursor-pointer text-gray-800 dark:text-white ${classes}`}>
-    <input class="h-4 w-4 cursor-pointer" type="radio" bind:group {value} />
-    <div class={`mr-3 svg-container rounded-full border border-solid border-gray-300 ${value === group ? "active" : ""}`}>
+<label class="w-full flex items-center mb-4 text-12 leading-160 cursor-pointer text-gray-800 dark:text-white {classes}">
+    <input class="absolute left-0 opacity-0 h-4 w-4 cursor-pointer" type="radio" bind:group {value} />
+    <div class="w-6 h-6 mr-3 rounded-full border border-solid border-gray-300" class:active={value === group}>
         <Icon icon={value === group ? 'radio' : 'radio-unchecked'} />
     </div>
     {label}
diff --git a/packages/shared/components/modals/AccountActions.svelte b/packages/shared/components/modals/AccountActions.svelte
index eb860095275..018c1213182 100644
--- a/packages/shared/components/modals/AccountActions.svelte
+++ b/packages/shared/components/modals/AccountActions.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Icon, Modal, Text } from 'shared/components'
+    import { Icon, Modal, Text, HR } from 'shared/components'
     import { openPopup } from 'shared/lib/popup'
     import { accountRoute } from 'shared/lib/router'
     import { AccountRoutes } from 'shared/lib/typings/routes'
@@ -42,7 +42,7 @@
         <!-- Customize -->
         <button
             on:click={() => handleCustomiseAccountClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full">
             <Icon icon="customize" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`actions.customizeAcount`)}</Text>
         </button>
@@ -51,15 +51,15 @@
         <button
             disabled
             on:click={() => handlViewAddressHistoryClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full opacity-50 pointer-events-none">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full opacity-50 pointer-events-none">
             <Icon icon="history" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`actions.viewAddressHistory`)}</Text>
         </button>
-        <hr class="border-t border-solid border-gray-200 dark:border-gray-700" />
+        <HR />
         <!-- Delete -->
         <button
             on:click={() => handleDeleteAccountClick()}
-            class="group flex flex-row justify-start items-center hover:bg-red-50 py-4 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-red-50 dark:hover:bg-red-200 dark:hover:bg-opacity-20 py-4 px-3 w-full">
             <Icon icon="delete" classes="text-red-500 ml-1 mr-3" />
             <Text smaller classes="text-red-500" overrideColor>{locale(`actions.deleteAccount`)}</Text>
         </button>
diff --git a/packages/shared/components/modals/NetworkIndicator.svelte b/packages/shared/components/modals/NetworkIndicator.svelte
index 5635cacd1f8..bb9f8325c51 100644
--- a/packages/shared/components/modals/NetworkIndicator.svelte
+++ b/packages/shared/components/modals/NetworkIndicator.svelte
@@ -1,6 +1,6 @@
 <script lang="typescript">
     import { onDestroy } from 'svelte'
-    import { Text, Modal } from 'shared/components'
+    import { Text, Modal, HR } from 'shared/components'
     import { networkStatus } from 'shared/lib/networkStatus'
     export let isActive
     export let locale
@@ -33,7 +33,7 @@
         <div class="px-7 pb-5 text-13 text-{NETWORK_HEALTH_COLORS[healthStatus]}-500">
             {locale(`views.dashboard.network.${healthStatusText}`)}
         </div>
-        <hr class="border-t border-solid border-gray-200 dark:border-gray-700" />
+        <HR />
         <div class="flex flex-row justify-between px-7 pt-5 pb-2">
             <span class="text-12 text-gray-800 dark:text-white">{locale('views.dashboard.network.messagesPerSecond')}</span>
             <span class="text-12 text-gray-500">{`${Math.round(messagesPerSecond)}`}</span>
diff --git a/packages/shared/components/modals/ProfileActions.svelte b/packages/shared/components/modals/ProfileActions.svelte
index aa2c70a5c8f..a0bada58610 100644
--- a/packages/shared/components/modals/ProfileActions.svelte
+++ b/packages/shared/components/modals/ProfileActions.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Icon, Modal, Text } from 'shared/components'
+    import { Icon, Modal, Text, HR } from 'shared/components'
     import { logout } from 'shared/lib/app'
     import { getInitials } from 'shared/lib/helpers'
     import { activeProfile } from 'shared/lib/profile'
@@ -31,16 +31,16 @@
             </div>
             <Text>{profileName}</Text>
         </div>
-        <hr class="border-t border-solid border-gray-200 dark:border-gray-700" />
+        <HR />
         <button
             on:click={() => handleSettingsClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full">
             <Icon icon="settings" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`views.dashboard.profileModal.allSettings`)}</Text>
         </button>
         <button
             on:click={() => handleLogoutClick()}
-            class="group flex flex-row justify-start items-center hover:bg-blue-50 py-3 px-3 w-full">
+            class="group flex flex-row justify-start items-center hover:bg-blue-50 dark:hover:bg-gray-800 dark:hover:bg-opacity-20 py-3 px-3 w-full">
             <Icon icon="logout" classes="text-gray-500 ml-1 mr-3 group-hover:text-blue-500" />
             <Text smaller classes="group-hover:text-blue-500">{locale(`views.dashboard.profileModal.logout`)}</Text>
         </button>
diff --git a/packages/shared/components/popups/Backup.svelte b/packages/shared/components/popups/Backup.svelte
index 29a35d9084c..db5fc163a37 100644
--- a/packages/shared/components/popups/Backup.svelte
+++ b/packages/shared/components/popups/Backup.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Button, Text } from 'shared/components'
+    import { Button, Text, Logo } from 'shared/components'
     import { Electron } from 'shared/lib/electron'
     import { getBackupWarningColor } from 'shared/lib/helpers'
     import { closePopup, openPopup } from 'shared/lib/popup'
@@ -62,7 +62,9 @@
                   values: { date: $date(lastBackupDate, { format: 'long' }) },
               }) : locale('popups.backup.notBackedUp')}
     </Text>
-    <div class="w-full p-4 bg-gray-50 flex justify-center content-center"><img src="assets/logos/stronghold.svg" alt="" /></div>
+    <div class="w-full p-4 bg-gray-50 dark:bg-gray-800 flex justify-center content-center">        
+        <Logo width="50%" logo="logo-stronghold" />    
+    </div>
     <div class="w-full text-center my-6 px-8">
         <Text overrideColor type="h5" classes="mb-2 text-{color}-600">
             {#if !lastBackupDate}
diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte
index 0596e89c7d3..a329a0db4c8 100644
--- a/packages/shared/components/popups/Index.svelte
+++ b/packages/shared/components/popups/Index.svelte
@@ -65,8 +65,9 @@
 <popup
     in:fade={{ duration: transition ? 100 : 0 }}
     class={`flex items-center justify-center fixed top-0 left-0 w-screen p-6
-                h-screen overflow-hidden z-10 ${fullScreen ? 'bg-white' : 'bg-gray-800 bg-opacity-40'}`}>
-    <popup-content class={`bg-white dark:bg-gray-900 rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen' : ''}`}>
+                h-screen overflow-hidden z-10 ${fullScreen ? 'bg-white dark:bg-gray-900' : 'bg-gray-800 bg-opacity-40'}`}>
+    <popup-content
+        class={`bg-white rounded-xl pt-6 px-8 pb-8 relative ${fullScreen ? 'full-screen dark:bg-gray-900' : 'dark:bg-gray-900'}`}>
         {#if !hideClose}
             <button on:click={closePopup} class="absolute top-6 right-8">
                 <Icon icon="close" classes="text-gray-800 dark:text-white" />
diff --git a/packages/shared/components/popups/Version.svelte b/packages/shared/components/popups/Version.svelte
index a7b4d1b1742..b2501b6babc 100644
--- a/packages/shared/components/popups/Version.svelte
+++ b/packages/shared/components/popups/Version.svelte
@@ -1,7 +1,7 @@
 <script lang="typescript">
     import { date } from 'svelte-i18n'
     import { closePopup } from 'shared/lib/popup'
-    import { Text, Button } from 'shared/components'
+    import { Text, Button, Logo } from 'shared/components'
 
     import { versionDetails, updateDownload, updateBusy } from 'shared/lib/appUpdater'
 
@@ -27,8 +27,8 @@
 
 <Text type="h4" classes="mb-5">{locale('popups.version.title', { values: { version: $versionDetails.currentVersion } })}</Text>
 <div class="flex w-full flex-row flex-wrap">
-    <div class="w-full p-4 bg-gray-50 flex justify-center content-center">
-        <img src="assets/logos/firefly_logo_full.svg" alt="" />
+    <div class="w-full p-4 bg-gray-50 dark:bg-gray-800 flex justify-center content-center">
+        <Logo width="50%" logo="logo-firefly-full" />
     </div>
     {#if $versionDetails.upToDate}
         <div class="w-full text-center my-6 px-8">
diff --git a/packages/shared/lib/app.ts b/packages/shared/lib/app.ts
index 46cb654e608..9aa121053e3 100644
--- a/packages/shared/lib/app.ts
+++ b/packages/shared/lib/app.ts
@@ -1,4 +1,5 @@
 import { get, writable } from 'svelte/store'
+import { persistent } from './helpers'
 import { localize } from './i18n'
 import { showAppNotification } from './notifications'
 import { closePopup } from './popup'
diff --git a/packages/shared/routes/Splash.svelte b/packages/shared/routes/Splash.svelte
index 2f7c913b5a0..30f5171bfc6 100644
--- a/packages/shared/routes/Splash.svelte
+++ b/packages/shared/routes/Splash.svelte
@@ -2,8 +2,8 @@
     import { Logo } from 'shared/components'
 </script>
 
-<div class="w-full h-full flex justify-center items-center">
-    <div width="100px">
+<div class="w-full h-full flex justify-center items-center bg-white dark:bg-gray-900">
+    <div class="w-48">
         <Logo width="100%" logo="logo-firefly-full" />
     </div>
 </div>
diff --git a/packages/shared/routes/dashboard/settings/Settings.svelte b/packages/shared/routes/dashboard/settings/Settings.svelte
index 51efb1fc0aa..cc4f5fef5c4 100644
--- a/packages/shared/routes/dashboard/settings/Settings.svelte
+++ b/packages/shared/routes/dashboard/settings/Settings.svelte
@@ -37,7 +37,8 @@
     })
 </script>
 
-<div class="relative w-full h-full px-16 py-12 flex flex-1 bg-white {$settingsRoute !== SettingsRoutes.Init && 'pt-20'} ">
+<div
+    class="relative w-full h-full px-16 py-12 flex flex-1 bg-white dark:bg-gray-900 {$settingsRoute !== SettingsRoutes.Init && 'pt-20'} ">
     <button on:click={handleClose || closeSettings} class="absolute top-8 right-8">
         <Icon icon="close" classes="text-gray-800 dark:text-white" />
     </button>
diff --git a/packages/shared/routes/dashboard/settings/views/Advanced.svelte b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
index d7f621c22da..ff6378c9cd7 100644
--- a/packages/shared/routes/dashboard/settings/views/Advanced.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Advanced.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Button, Checkbox, Dropdown, Radio, Text } from 'shared/components'
+    import { Button, Checkbox, Dropdown, HR, Radio, Text } from 'shared/components'
     import { loggedIn } from 'shared/lib/app'
     import { appSettings } from 'shared/lib/appSettings'
     import { DEFAULT_NODE, DEFAULT_NODES } from 'shared/lib/network'
@@ -169,7 +169,7 @@
             <Radio value={true} bind:group={automaticNodeSelection} label={locale('general.automaticNodeSelection')} />
             <Radio value={false} bind:group={automaticNodeSelection} label={locale('general.manualNodeSelection')} />
         </section>
-        <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+        <HR classes="pb-5 mt-5 justify-center" />
         {#if !automaticNodeSelection}
             <section id="configureNodeList" class="w-3/4">
                 <Text type="h4" classes="mb-3">{locale('views.settings.configureNodeList.title')}</Text>
@@ -195,14 +195,14 @@
                     {locale('actions.removeNode')}
                 </Button>
             </section>
-            <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
-        {/if}
+            <HR classes="pb-5 mt-5 justify-center" />
+            {/if}
         <section id="proofOfWork" class="w-3/4 opacity-50">
             <Text type="h4" classes="mb-3">{locale('views.settings.proofOfWork.title')}</Text>
             <Text type="p" secondary classes="mb-5">{locale('views.settings.proofOfWork.description')}</Text>
             <Checkbox label={locale('actions.outsourceProofOfWork')} disabled bind:checked={outsourcePowChecked} />
         </section>
-        <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+        <HR classes="pb-5 mt-5 justify-center" />
     {/if}
     <!-- TODO: Implement and enable -->
     <section id="developerMode" class="w-3/4 opacity-50">
@@ -210,34 +210,34 @@
         <Text type="p" secondary classes="mb-5">{locale('views.settings.developerMode.description')}</Text>
         <Checkbox label={locale('actions.enableDeveloperMode')} disabled bind:checked={$appSettings.developerMode} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="deepLinks" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.deepLinks.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.deepLinks.description')}</Text>
         <Checkbox label={locale('actions.enableDeepLinks')} bind:checked={deepLinkingChecked} />
     </section>
     {#if $loggedIn}
-        <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+         <HR classes="pb-5 mt-5 justify-center" />
         <section id="resyncAccounts" class="w-3/4">
             <Text type="h4" classes="mb-3">{locale('views.settings.resyncAccounts.title')}</Text>
             <Text type="p" secondary classes="mb-5">{locale('views.settings.resyncAccounts.description')}</Text>
             <Button classes="w-1/4" onClick={syncAccounts} disabled={$isSyncing}>{locale('actions.syncAll')}</Button>
         </section>
     {/if}
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="errorLog" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.errorLog.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.errorLog.description')}</Text>
         <Button classes="w-1/4" onClick={() => handleErrorLogClick()}>{locale('views.settings.errorLog.title')}</Button>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="diagnostics" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.diagnostics.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.diagnostics.description')}</Text>
         <Button classes="w-1/4" onClick={() => handleDiagnosticsClick()}>{locale('views.settings.diagnostics.title')}</Button>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
     {#if $loggedIn}
+       <HR classes="pb-5 mt-5 justify-center" />
         <!-- TODO: Implement state export -->
         <section id="stateExport" class="w-3/4 opacity-50">
             <Text type="h4" classes="mb-3">{locale('views.settings.stateExport.title')}</Text>
diff --git a/packages/shared/routes/dashboard/settings/views/General.svelte b/packages/shared/routes/dashboard/settings/views/General.svelte
index b63851e43ef..711c8898bf6 100644
--- a/packages/shared/routes/dashboard/settings/views/General.svelte
+++ b/packages/shared/routes/dashboard/settings/views/General.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Checkbox, Dropdown, Radio, Text } from 'shared/components'
+    import { Checkbox, Dropdown, HR, Radio, Text } from 'shared/components'
     import { loggedIn } from 'shared/lib/app'
     import { appSettings } from 'shared/lib/appSettings'
     import { exchangeRates } from 'shared/lib/currency'
@@ -34,15 +34,15 @@
         <Text type="h4" classes="mb-3">{locale('views.settings.profile.title')}</Text>
         <Text type="p" secondary>{locale('views.settings.profile.description')}</Text>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <!-- TODO: Implement and enable -->
-    <section id="theme" class="w-3/4 opacity-50 pointer-events-none">
+    <section id="theme" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.theme.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.theme.description')}</Text>
         <Radio value={false} bind:group={darkModeEnabled} label={locale('general.lightTheme')} />
         <Radio value={true} bind:group={darkModeEnabled} label={locale('general.darkTheme')} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="language" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.language.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.language.description')}</Text>
@@ -53,7 +53,7 @@
             items={Object.values(locales).map((locale) => ({ value: locale, label: locale }))} />
     </section>
     {#if $loggedIn}
-        <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+        <HR classes="pb-5 mt-5 justify-center" />
         <section id="currency" class="w-3/4">
             <Text type="h4" classes="mb-3">{locale('views.settings.currency.title')}</Text>
             <Text type="p" secondary classes="mb-5">{locale('views.settings.currency.description')}</Text>
@@ -66,7 +66,7 @@
                     .sort()} />
         </section>
     {/if}
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="notifications" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.notifications.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.notifications.description')}</Text>
diff --git a/packages/shared/routes/dashboard/settings/views/Security.svelte b/packages/shared/routes/dashboard/settings/views/Security.svelte
index f05cf2bbc27..b195d69964c 100644
--- a/packages/shared/routes/dashboard/settings/views/Security.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Security.svelte
@@ -1,5 +1,5 @@
 <script lang="typescript">
-    import { Button, Checkbox, Dropdown, Password, Spinner, Text } from 'shared/components'
+    import { Button, Checkbox, Dropdown, HR, Password, Spinner, Text } from 'shared/components'
     import { Electron } from 'shared/lib/electron'
     import { showAppNotification } from 'shared/lib/notifications'
     import passwordInfo from 'shared/lib/password'
@@ -272,7 +272,7 @@
             <Spinner busy={exportBusy} message={exportMessage} classes="ml-2" />
         </div>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="appLock" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.appLock.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.appLock.description')}</Text>
@@ -283,7 +283,7 @@
             value={assignTimeoutOptionLabel($activeProfile?.settings.lockScreenTimeout)}
             items={lockScreenTimeoutOptions} />
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="changePassword" class="w-3/4">
         <form id="form-change-password" on:submit={changePassword}>
             <Text type="h4" classes="mb-3">{locale('views.settings.changePassword.title')}</Text>
@@ -331,7 +331,7 @@
             </div>
         </form>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="changePincode" class="w-3/4">
         <form on:submit={changePincode} id="pincode-change-form">
             <Text type="h4" classes="mb-3">{locale('views.settings.changePincode.title')}</Text>
@@ -377,7 +377,7 @@
             </div>
         </form>
     </section>
-    <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
+    <HR classes="pb-5 mt-5 justify-center" />
     <section id="deleteProfile" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.deleteProfile.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.deleteProfile.description')}</Text>
diff --git a/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte b/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
index 0899787af4b..f5a6ae6402e 100644
--- a/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/AccountNavigation.svelte
@@ -40,7 +40,7 @@
             <button
                 on:click={() => handleAccountClick(acc.id)}
                 class="w-10 h-10 rounded-xl p-2 text-14 leading-100 font-bold text-center
-                {activeAccount.id === acc.id ? `bg-${acc.color}-500 text-white` : 'bg-gray-200 text-gray-500'} 
+                {activeAccount.id === acc.id ? `bg-${acc.color}-500 text-white` : 'bg-gray-200 dark:bg-gray-700 text-gray-500'} 
                 hover:bg-{acc.color}-500 hover:text-white">{getInitials(acc.alias, 2)}
             </button>
         {/each}
diff --git a/packages/shared/routes/setup/Language.svelte b/packages/shared/routes/setup/Language.svelte
index d080ddb8704..673ffc7ef87 100644
--- a/packages/shared/routes/setup/Language.svelte
+++ b/packages/shared/routes/setup/Language.svelte
@@ -34,8 +34,7 @@
                 value={locales[$appSettings.language]}
                 items={Object.values(locales).map((locale) => ({ value: locale, label: locale }))}
                 classes="mb-4" />
-            <!-- TODO: Implement and enable -->
-            <div class="pointer-events-none opacity-50">
+            <div>
                 <Text type="p" classes="mb-2 mt-4" smaller>{locale('general.appearance')}</Text>
                 <Radio value={false} bind:group={darkModeEnabled} label={locale('general.lightTheme')} />
                 <Radio value={true} bind:group={darkModeEnabled} label={locale('general.darkTheme')} />
diff --git a/packages/shared/style/style.scss b/packages/shared/style/style.scss
index c876b060bd3..2fb20a96b25 100644
--- a/packages/shared/style/style.scss
+++ b/packages/shared/style/style.scss
@@ -71,8 +71,6 @@
         U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 
-@import 'themes.scss';
-
 *,
 *:after,
 *:before {
@@ -84,7 +82,7 @@
     font-weight: 500;
     font-family: 'DM Sans';
     font-style: normal;
-    transition: background 0.25s, color 0.25s;
+    transition: background 0.25s, color 0.25s, border-color 0.25s, opacity 0.25s;
 }
 html,
 body {
diff --git a/packages/shared/style/themes.scss b/packages/shared/style/themes.scss
deleted file mode 100644
index 3766a41d061..00000000000
--- a/packages/shared/style/themes.scss
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * Branding Colors
- */
-:root {
-    --blue-ff-color: #309cff;
-    --yellow-ff-color: #ffca62;
-    --turquoise-ff-color: #17e1d5;
-    --blue-light-ff-color: #8fe6fa;
-    --blue-medium-ff-color: #4daaff;
-    --orange-ff-color: #ff8b5c;
-    --red-ff-color: #ff6755;
-    --purple-ff-color: #666af7;
-    --pink-ff-color: #ef75d4;
-    --green-ff-color: #61e884;
-}
-/*
- * Theme definition: Light
- * Default
- */
-:root {
-    // UI
-    --line-separator-color: #eef4ff;
-    --bg-grey-color: #f6f9ff;
-    --element-disabled-color: #e1eaf9;
-    --ui-blue-color: #108cff;
-    --element-bg-color: #ffffff;
-    // App
-    --app-bg-color: #f6f9ff;
-    // Typography
-    --text-primary-color: #25395f;
-    --text-secondary-color: #9aadce;
-    --text-disabled-color: #c9d6ec;
-    --text-highlighted-color: var(--blue-ff-color);
-    --text-error-color: var(--red-ff-color);
-    // Button
-    --button-text-color: #ffffff;
-    --button-border-color: var(--ui-blue-color);
-    --button-bg-color: var(--ui-blue-color);
-    --button-border-color: var(--ui-blue-color);
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-border-color: #c9d6ec;
-    --button-icon-color: #ffffff;
-    --button-active-icon-color: #ffffff;
-    --button-secondary-text-color: #1f212c;
-    --button-secondary-bg-color: #ffffff;
-    --button-secondary-icon-color: var(--ui-blue-color);
-    --button-secondary-active-text-color: #ffffff;
-    --button-secondary-active-bg-color: var(--ui-blue-color);
-    --button-secondary-active-icon-color: #ffffff;
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-text-color: #8391aa;
-    // Link
-    --link-text-color: var(--ui-blue-color);
-}
-
-/*
- * Theme definition: Dark
- */
-:global(body.scheme-dark) {
-    // UI
-    --line-separator-color: #333e5c;
-    --bg-grey-color: #22293e;
-    --element-disabled-color: #54698d;
-    --ui-blue-color: #108cff;
-    --element-bg-color: #2c3659;
-    // App
-    --app-bg-color: #22293e;
-    // Typography
-    --text-primary-color: #ffffff;
-    --text-secondary-color: #9aadce;
-    --text-disabled-color: #54698d;
-    --text-highlighted-color: var(--blue-ff-color);
-    --text-error-color: var(--red-ff-color);
-    // Button
-    --button-text-color: #ffffff;
-    --button-border-color: var(--ui-blue-color);
-    --button-bg-color: var(--ui-blue-color);
-    --button-border-color: var(--ui-blue-color);
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-border-color: #54698d;
-    --button-icon-color: #ffffff;
-    --button-active-icon-color: #ffffff;
-    --button-secondary-text-color: #1f212c;
-    --button-secondary-bg-color: #ffffff;
-    --button-secondary-icon-color: var(--ui-blue-color);
-    --button-secondary-active-text-color: #ffffff;
-    --button-secondary-active-bg-color: var(--ui-blue-color);
-    --button-secondary-active-icon-color: #ffffff;
-    --button-disabled-bg-color: #e1eaf9;
-    --button-disabled-text-color: #8391aa;
-    // Link
-    --link-text-color: var(--ui-blue-color);
-}