diff --git a/quasar.conf.js b/quasar.conf.js
index 1012a81..8d98ffc 100644
--- a/quasar.conf.js
+++ b/quasar.conf.js
@@ -60,6 +60,7 @@ module.exports = function (ctx) {
                 "QInput",
                 "QRadio",
                 "QBtn",
+                "QBtnToggle",
                 "QIcon",
                 "QTabs",
                 "QTab",
diff --git a/src/App.vue b/src/App.vue
index c43b97e..dfdb874 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,27 @@
 </template>
 
 <script>
+import { mapState } from "vuex"
 export default {
-    name: "App"
+    name: "App",
+    computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
+    }),
+    watch: {
+        theme: function () {
+            if(this.theme == "dark")
+                document.body.classList.add("dark")
+            else
+                document.body.classList.remove("dark")
+        }
+    },
+    mounted () {
+        if(this.theme == "dark")
+            document.body.classList.add("dark")
+        else
+            document.body.classList.remove("dark")
+
+    }
 }
 </script>
 
diff --git a/src/components/address_book_details.vue b/src/components/address_book_details.vue
index efcd4f4..816ecfe 100644
--- a/src/components/address_book_details.vue
+++ b/src/components/address_book_details.vue
@@ -11,15 +11,13 @@
                 Edit address book entry
             </q-toolbar-title>
 
-
             <q-btn v-if="mode=='edit'" flat no-ripple @click="cancelEdit()" label="Cancel" />
             <q-btn class="q-ml-sm" color="primary" @click="save()" label="Save" />
 
-
         </q-toolbar>
         <div>
 
-            <q-list no-border>
+            <q-list no-border :dark="theme=='dark'">
 
                 <q-item>
                     <q-item-side class="self-start">
@@ -30,6 +28,7 @@
                             <q-input v-model="newEntry.address" float-label="Address"
                                      @blur="$v.newEntry.address.$touch"
                                      :error="$v.newEntry.address.$error"
+                                     :dark="theme=='dark'"
                                      />
                         </q-field>
                     </q-item-main>
@@ -38,16 +37,16 @@
                 <q-item>
                     <q-item-main>
                         <q-field>
-                            <q-input v-model="newEntry.name" float-label="Name" />
+                            <q-input v-model="newEntry.name" float-label="Name" :dark="theme=='dark'" />
                         </q-field>
                     </q-item-main>
                     <q-item-side class="self-start q-pa-sm">
                         <q-checkbox
-                             v-model="newEntry.starred"
-                             checked-icon="star"
-                             unchecked-icon="star_border"
-                             class="star-entry"
-                             />
+                            v-model="newEntry.starred"
+                            checked-icon="star"
+                            unchecked-icon="star_border"
+                            class="star-entry"
+                            />
                     </q-item-side>
                 </q-item>
 
@@ -57,6 +56,7 @@
                             <q-input v-model="newEntry.payment_id" float-label="Payment ID (optional)"
                                      @blur="$v.newEntry.payment_id.$touch"
                                      :error="$v.newEntry.payment_id.$error"
+                                     :dark="theme=='dark'"
                                      />
                         </q-field>
                     </q-item-main>
@@ -65,7 +65,7 @@
                 <q-item>
                     <q-item-main>
                         <q-field>
-                            <q-input v-model="newEntry.description" type="textarea" float-label="Notes (optional)" />
+                            <q-input v-model="newEntry.description" type="textarea" float-label="Notes (optional)" :dark="theme=='dark'" />
                         </q-field>
                     </q-item-main>
                 </q-item>
@@ -91,9 +91,9 @@
                 Address book details
             </q-toolbar-title>
             <q-btn class="q-mr-sm"
-                 flat no-ripple
-                 :disable="!is_ready"
-                 @click="edit()" label="Edit" />
+                   flat no-ripple
+                   :disable="!is_ready"
+                   @click="edit()" label="Edit" />
             <q-btn color="primary" @click="copyAddress" label="Copy address" />
         </q-toolbar>
         <div class="layout-padding">
@@ -113,7 +113,7 @@
 
                     <div class="non-selectable">
                         <q-icon name="history" size="24px" />
-                        <span class="vertical-middle q-ml-xs">Recent outgoing transactions to this address</span>
+                        <span class="vertical-middle q-ml-xs">Recent transactions with this address</span>
                     </div>
 
                     <TxList type="in" :limit="5" :to-outgoing-address="entry.address" />
@@ -155,6 +155,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         is_ready (state) {
             return this.$store.getters["gateway/isReady"]
         }
diff --git a/src/components/footer.vue b/src/components/footer.vue
index 76cf78e..7aaff61 100644
--- a/src/components/footer.vue
+++ b/src/components/footer.vue
@@ -1,6 +1,6 @@
 <template>
-<q-layout-footer>
-    <div class="status-line monospace">
+<q-layout-footer class="status-footer">
+    <div class="status-line">
 
         <template v-if="config.daemon.type !== 'remote'">
             <div>Daemon: {{ daemon.info.height_without_bootstrap }} / {{ target_height }} ({{ daemon_local_pct }}%)</div>
@@ -79,47 +79,4 @@ export default {
 </script>
 
 <style lang="scss">
-
-.status-line {
-    margin-bottom: 3px;
-
-    div {
-        display: inline-block;
-        padding: 0 8px;
-    }
-
-    div:last-child {
-        float:right;
-    }
-}
-
-.status-bars {
-
-    div {
-        height: 3px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        transition: width 0.5s ease-out;
-    }
-
-    div:first-child {
-        background-color: goldenrod;
-    }
-
-    div:last-child {
-        background-color: green;
-    }
-
-}
-
-.q-layout-footer {
-    border-top: 1px solid #ccc;
-    padding-top: 2px;
-    background: white;
-    box-shadow: none;
-    font-size: 10px;
-}
-
-
 </style>
diff --git a/src/components/identicon.vue b/src/components/identicon.vue
index 2fcc5d6..6cc02ea 100644
--- a/src/components/identicon.vue
+++ b/src/components/identicon.vue
@@ -195,8 +195,4 @@ export default {
 </script>
 
 <style>
-    .identicon {
-    box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
-    border-radius: 2px;
-    }
 </style>
diff --git a/src/components/mainmenu.vue b/src/components/mainmenu.vue
index 7802a96..57f368a 100644
--- a/src/components/mainmenu.vue
+++ b/src/components/mainmenu.vue
@@ -49,18 +49,18 @@
             </div>
 
             <q-btn
-                 color="primary"
-                 @click="showAbout(false)"
-                 label="Close"
-             />
+                color="primary"
+                @click="showAbout(false)"
+                label="Close"
+                />
         </div>
     </q-modal>
 </div>
 </template>
 
 <script>
+import { mapState } from "vuex"
 import SettingsModal from "components/settings"
-
 export default {
     name: "MainMenu",
     props: {
@@ -70,8 +70,9 @@ export default {
             default: false
         }
     },
-    computed: {
-    },
+    computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
+    }),
     methods: {
         openExternal (url) {
             this.$gateway.send("core", "open_url", {url})
@@ -94,7 +95,8 @@ export default {
                 },
                 cancel: {
                     flat: true,
-                    label: "CANCEL"
+                    label: "CANCEL",
+                    color: this.theme=="dark"?"white":"dark"
                 }
             }).then(() => {
                 this.$router.replace({ path: "/wallet-select" })
@@ -105,7 +107,7 @@ export default {
                     this.$store.dispatch("gateway/resetWalletData")
                 }, 250);
             }).catch(() => {
-            });
+            })
         },
         exit () {
             this.$gateway.confirmClose("Are you sure you want to exit?")
@@ -126,7 +128,7 @@ export default {
 
         a {
 
-            color: #027be3;
+            color: #497dc6;
             text-decoration: none;
 
             &:hover,
diff --git a/src/components/settings.vue b/src/components/settings.vue
index 748de63..0300f1f 100644
--- a/src/components/settings.vue
+++ b/src/components/settings.vue
@@ -7,7 +7,7 @@
                 Settings
             </q-toolbar-title>
 
-            <div class="row col justify-center">
+            <div class="row col justify-center q-pr-xl">
                 <q-btn-toggle
                     v-model="page"
                     toggle-color="primary"
diff --git a/src/components/settings_general.vue b/src/components/settings_general.vue
index 5d67f7e..040b786 100644
--- a/src/components/settings_general.vue
+++ b/src/components/settings_general.vue
@@ -19,10 +19,11 @@
     <q-field v-if="config.daemon.type != 'remote'">
         <div class="row gutter-sm">
             <div class="col-8">
-                <q-input v-model="config.daemon.rpc_bind_ip" float-label="Local Daemon IP" disable />
+                <q-input v-model="config.daemon.rpc_bind_ip" float-label="Local Daemon IP"
+                         :dark="theme=='dark'" disable />
             </div>
             <div class="col-4">
-                <q-input v-model="config.daemon.rpc_bind_port" float-label="Local Daemon Port (RPC)" type="number" :decimals="0" :step="1" min="1024" max="65535" />
+                <q-input v-model="config.daemon.rpc_bind_port" float-label="Local Daemon Port (RPC)" type="number" :decimals="0" :step="1" min="1024" max="65535" :dark="theme=='dark'" />
             </div>
         </div>
     </q-field>
@@ -30,10 +31,10 @@
     <q-field v-if="config.daemon.type != 'local'">
         <div class="row gutter-sm">
             <div class="col-8">
-                <q-input v-model="config.daemon.remote_host" float-label="Remote Node Host" />
+                <q-input v-model="config.daemon.remote_host" float-label="Remote Node Host" :dark="theme=='dark'" />
             </div>
             <div class="col-4">
-                <q-input v-model="config.daemon.remote_port" float-label="Remote Node Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
+                <q-input v-model="config.daemon.remote_port" float-label="Remote Node Port" type="number" :decimals="0" :step="1" min="1024" max="65535" :dark="theme=='dark'" />
             </div>
         </div>
 
@@ -42,11 +43,11 @@
     <q-field>
         <div class="row gutter-sm">
             <div class="col-8">
-                <q-input v-model="config.app.data_dir" stack-label="Data Storage Path" disable />
+                <q-input v-model="config.app.data_dir" stack-label="Data Storage Path" disable :dark="theme=='dark'" />
                 <input type="file" webkitdirectory directory id="dataPath" v-on:change="setDataPath" ref="fileInput" hidden />
             </div>
             <div class="col-4">
-                <q-btn v-on:click="selectPath">Select Location</q-btn>
+                <q-btn v-on:click="selectPath" :text-color="theme=='dark'?'white':'dark'">Select Location</q-btn>
             </div>
         </div>
     </q-field>
@@ -56,11 +57,11 @@
         <q-field>
             <div class="row gutter-sm">
                 <div class="col-3">
-                    <q-input v-model="config.daemon.log_level" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.log_level" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Daemon Log Level" type="number" :decimals="0" :step="1" min="0" max="4" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.wallet.log_level"
+                    <q-input v-model="config.wallet.log_level" :dark="theme=='dark'"
                              float-label="Wallet Log Level" type="number" :decimals="0" :step="1" min="0" max="4" />
                 </div>
                 <div class="col-3">
@@ -71,19 +72,19 @@
         <q-field>
             <div class="row gutter-sm">
                 <div class="col-3">
-                    <q-input v-model="config.daemon.in_peers" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.in_peers" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Max Incoming Peers" type="number" :decimals="0" :step="1" min="-1" max="65535" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.daemon.out_peers" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.out_peers" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Max Outgoing Peers" type="number" :decimals="0" :step="1" min="-1" max="65535" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.daemon.limit_rate_up" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.limit_rate_up" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Limit Upload Rate" type="number" suffix="Kb/s" :decimals="0" :step="1" min="-1" max="65535" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.daemon.limit_rate_down" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.limit_rate_down" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Limit Download Rate" type="number" suffix="Kb/s" :decimals="0" :step="1" min="-1" max="65535" />
                 </div>
             </div>
@@ -91,19 +92,19 @@
         <q-field>
             <div class="row gutter-sm">
                 <div class="col-3">
-                    <q-input v-model="config.daemon.p2p_bind_port" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.p2p_bind_port" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Daemon P2P Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.daemon.zmq_rpc_bind_port" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.daemon.zmq_rpc_bind_port" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Daemon ZMQ Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.app.ws_bind_port"
+                    <q-input v-model="config.app.ws_bind_port" :dark="theme=='dark'"
                              float-label="Internal Wallet Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
                 </div>
                 <div class="col-3">
-                    <q-input v-model="config.wallet.rpc_bind_port" :disable="config.daemon.type == 'remote'"
+                    <q-input v-model="config.wallet.rpc_bind_port" :disable="config.daemon.type == 'remote'" :dark="theme=='dark'"
                              float-label="Wallet RPC Port" type="number" :decimals="0" :step="1" min="1024" max="65535" />
                 </div>
             </div>
@@ -118,6 +119,7 @@ import { mapState } from "vuex"
 export default {
     name: "SettingsGeneral",
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         config: state => state.gateway.app.pending_config,
     }),
     methods: {
diff --git a/src/components/tx_details.vue b/src/components/tx_details.vue
index 65d68fe..aa9c42c 100644
--- a/src/components/tx_details.vue
+++ b/src/components/tx_details.vue
@@ -3,12 +3,12 @@
     <q-modal-layout>
         <q-toolbar slot="header" color="dark" inverted>
             <q-btn
-                 flat
-                 round
-                 dense
-                 @click="isVisible = false"
-                 icon="reply"
-                 />
+                flat
+                round
+                dense
+                @click="isVisible = false"
+                icon="reply"
+                />
             <q-toolbar-title>
                 Transaction details
             </q-toolbar-title>
@@ -126,14 +126,16 @@
 
             <q-field class="q-mt-md">
                 <q-input
-                     v-model="txNotes" float-label="Transaction notes"
-                     type="textarea" rows="2" />
+                    v-model="txNotes" float-label="Transaction notes"
+                    :dark="theme=='dark'"
+                    type="textarea" rows="2" />
             </q-field>
 
             <q-field class="q-mt-sm">
                 <q-btn
-                     :disable="!is_ready"
-                     @click="saveTxNotes" label="Save tx notes" />
+                    :disable="!is_ready"
+                    :text-color="theme=='dark'?'white':'dark'"
+                    @click="saveTxNotes" label="Save tx notes" />
             </q-field>
 
         </div>
@@ -153,6 +155,7 @@ import FormatRyo from "components/format_ryo"
 export default {
     name: "TxDetails",
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         in_tx_address_used (state) {
             let i
             let used_addresses = state.gateway.wallet.address_list.primary.concat(state.gateway.wallet.address_list.used)
diff --git a/src/components/tx_list.vue b/src/components/tx_list.vue
index fe44a2e..1daafcd 100644
--- a/src/components/tx_list.vue
+++ b/src/components/tx_list.vue
@@ -2,13 +2,12 @@
 <div>
 
     <template v-if="tx_list.length === 0">
-
         <p class="q-pa-md q-mb-none">No transactions found</p>
-
     </template>
+
     <template v-else>
         <q-infinite-scroll :handler="loadMore" ref="scroller">
-            <q-list link no-border class="tx-list">
+            <q-list link no-border :dark="theme=='dark'" class="tx-list">
                 <q-item v-for="(tx, index) in tx_list" :key="tx.txid"
                         @click.native="details(tx)" :class="'tx-'+tx.type">
                     <q-item-side>
@@ -75,6 +74,7 @@ export default {
         },
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         current_height: state => state.gateway.daemon.info.height,
         tx_list_all: state => state.gateway.wallet.transactions.tx_list,
         tx_list (state) {
@@ -153,50 +153,4 @@ export default {
 </script>
 
 <style lang="scss">
-.tx-list {
-
-    .q-item.tx-in,
-    .q-item.tx-pool {
-        .q-icon {
-            color: #333;
-        }
-        .q-item-label {
-            color: green;
-        }
-        &>div:last-child {
-            text-align:right;
-            &>div:first-child {
-                span {
-                    color: green;
-                    &:before {
-                        content: "+";
-                        color: green;
-                    }
-                }
-            }
-        }
-    }
-
-    .q-item.tx-out,
-    .q-item.tx-pending {
-        .q-icon {
-            color: #333;
-        }
-        .q-item-label {
-            color: purple;
-        }
-        &>div:last-child {
-            text-align:right;
-            &>div:first-child {
-                span {
-                    color: purple;
-                    &:before {
-                        content: "-";
-                        color: purple;
-                    }
-                }
-            }
-        }
-    }
-}
 </style>
diff --git a/src/css/app.styl b/src/css/app.styl
index 4ec714f..4782987 100644
--- a/src/css/app.styl
+++ b/src/css/app.styl
@@ -12,6 +12,31 @@
     background: #63c9f3;
 }
 
+:root {
+    --q-color-primary: #497dc6;
+}
+
+* {
+
+    scrollbar-track-color: #fff;
+    scrollbar-arrow-color: #fff;
+    &::-webkit-scrollbar-corner { background-color: #fff;}
+    &::-webkit-scrollbar-track-piece { background-color: #fff;}
+
+    scrollbar-face-color: #646464;
+    scrollbar-base-color: #646464;
+    scrollbar-3dlight-color: #646464;
+    scrollbar-highlight-color: #646464;
+    scrollbar-shadow-color: #646464;
+    scrollbar-dark-shadow-color: #646464;
+    &::-webkit-scrollbar { width: 8px; height: 8px;}
+    &::-webkit-scrollbar-button {  background-color: #646464; height:0; width: 0; }
+    &::-webkit-scrollbar-track {  background-color: #646464;}
+    &::-webkit-scrollbar-thumb { height: 50px; background-color: #646464; border-radius: 3px;}
+    &::-webkit-resizer { background-color: #646464;}
+}
+
+
 h1,h2,h3,h4,h5,h6,
 img,
 .q-list-header,
@@ -64,6 +89,10 @@ footer,
     text-align: left;
 }
 
+.q-layout-page {
+    min-height: 0 !important;
+}
+
 .q-layout-header {
     background: white;
     box-shadow: none;
@@ -171,3 +200,270 @@ footer,
 .q-loading + .modal {
     z-index: 9999 !important;
 }
+
+.identicon {
+    box-shadow: inset rgba(255, 255, 255, 0.6) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
+    border-radius: 2px;
+}
+
+.q-layout-footer.status-footer {
+    border-top: 1px solid #ccc;
+    padding-top: 2px;
+    background: #fff;
+    box-shadow: none;
+    font-size: 12px;
+
+    .status-line {
+        margin-bottom: 5px;
+
+        div {
+            display: inline-block;
+            padding: 0 8px;
+        }
+
+        div:last-child {
+            float:right;
+        }
+    }
+
+    .status-bars {
+
+        div {
+            height: 3px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            transition: width 0.5s ease-out;
+        }
+
+        div:first-child {
+            background-color: goldenrod;
+        }
+
+        div:last-child {
+            background-color: green;
+        }
+
+    }
+
+}
+
+
+.tx-list {
+
+    .q-item.tx-in,
+    .q-item.tx-pool {
+        .q-icon {
+            color: #333;
+        }
+        .q-item-label {
+            color: green;
+        }
+        &>div:last-child {
+            text-align:right;
+            &>div:first-child {
+                span {
+                    color: green;
+                    &:before {
+                        content: "+";
+                        color: green;
+                    }
+                }
+            }
+        }
+    }
+
+    .q-item.tx-out,
+    .q-item.tx-pending {
+        .q-icon {
+            color: #333;
+        }
+        .q-item-label {
+            color: purple;
+        }
+        &>div:last-child {
+            text-align:right;
+            &>div:first-child {
+                span {
+                    color: purple;
+                    &:before {
+                        content: "-";
+                        color: purple;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+body.dark {
+
+    &, * {
+        scrollbar-track-color: #111;
+        scrollbar-arrow-color: #111;
+        &::-webkit-scrollbar-corner { background-color: #111;}
+        &::-webkit-scrollbar-track-piece { background-color: #111;}
+    }
+
+    .q-item-sublabel {
+        color: #cecece;
+    }
+    .infoBoxIcon {
+        color: #cecece;
+    }
+
+    .infoBoxContent {
+        .text {
+            color: #cecece;
+        }
+        .value {
+            color: #cecece;
+        }
+    }
+
+    .identicon {
+        box-shadow: inset rgba(0, 0, 0, 0.1) 0 2px 2px, inset rgba(0, 0, 0, 0.3) 0 -2px 6px;
+        border-radius: 2px;
+    }
+
+
+    .q-layout {
+        background: #111;
+        color:#cecece;
+
+
+        .q-layout-header {
+            background: #111;
+            box-shadow: none;
+            border-bottom: 1px solid #333;
+
+        }
+    }
+
+    .q-layout-footer.status-footer {
+        background: #111;
+        color: #cecece;
+        border-top: 1px solid #333;
+    }
+
+    .q-list-dark .q-item,
+    .q-item-dark .q-item,
+    .q-list-header {
+        color: #cecece;
+    }
+
+    .q-stepper-tab.step-waiting,
+    .q-stepper-step-content{
+        color: #cecece;
+    }
+
+
+    .q-popover {
+        background: #222;
+        color:#cecece;
+
+        .q-list-separator > .q-item-division + .q-item-division, .q-item-division + .q-item-separator {
+            border-top: 1px solid #333;
+        }
+
+    }
+
+    .modal.minimized {
+        .q-input {
+            .q-input-target {
+                color: #cecece;
+            }
+            &.q-if:hover:before {
+                color: #cecece;
+            }
+        }
+    }
+
+    .modal {
+
+        .modal-content,
+        .modal-body {
+            background: #111;
+            color:#cecece;
+        }
+
+        .q-layout-header {
+            background: #111;
+            box-shadow: none;
+            border-bottom: 1px solid #333;
+
+            .q-toolbar {
+                &>* {
+                    color: #cecece;
+                }
+            }
+        }
+
+    }
+
+
+    .tx-list {
+
+        .q-item.tx-in,
+        .q-item.tx-pool {
+            .q-icon {
+                color: #cecece;
+            }
+            .q-item-label {
+                color: lightgreen;
+            }
+            &>div:last-child {
+                text-align:right;
+                &>div:first-child {
+                    span {
+                        color: lightgreen;
+                        &:before {
+                            content: "+";
+                            color: lightgreen;
+                        }
+                    }
+                }
+            }
+        }
+
+        .q-item.tx-out,
+        .q-item.tx-pending {
+            .q-icon {
+                color: #cecece;
+            }
+            .q-item-label {
+                color: mediumpurple;
+            }
+            &>div:last-child {
+                text-align:right;
+                &>div:first-child {
+                    span {
+                        color: mediumpurple;
+                        &:before {
+                            content: "-";
+                            color: mediumpurple;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .q-layout-footer.status-footer {
+
+        .status-bars {
+
+            div:first-child {
+                background-color: goldenrod;
+            }
+
+            div:last-child {
+                background-color: #497dc6;
+            }
+
+        }
+
+    }
+
+}
diff --git a/src/gateway/gateway.js b/src/gateway/gateway.js
index 6f21bf5..8fa4696 100644
--- a/src/gateway/gateway.js
+++ b/src/gateway/gateway.js
@@ -12,6 +12,14 @@ export class Gateway {
         this.token = null
         this.scee = new SCEE()
 
+        this.app.store.commit("gateway/set_app_data", {
+            config: {
+                appearance: {
+                    theme: "dark"
+                }
+            }
+        });
+
         this.closeDialog = false
 
         this.app.store.commit("gateway/set_app_data", {
@@ -55,7 +63,8 @@ export class Gateway {
             },
             cancel: {
                 flat: true,
-                label: "CANCEL"
+                label: "CANCEL",
+                color: this.app.store.state.gateway.app.config.appearance.theme=="dark"?"white":"dark"
             }
         }).then(() => {
             this.closeDialog = false
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
deleted file mode 100644
index 2889751..0000000
--- a/src/layouts/default.vue
+++ /dev/null
@@ -1,118 +0,0 @@
-<template>
-<q-layout view="hHh Lpr lFf">
-    <q-layout-header>
-        <q-btn-dropdown icon="menu" label="" size="md" flat>
-            <!-- dropdown content -->
-            <q-list link>
-                <q-item>
-                    <q-item-main>
-                        <q-item-tile label>Switch Wallet</q-item-tile>
-                    </q-item-main>
-                </q-item>
-                <q-item>
-                    <q-item-main>
-                        <q-item-tile label>Settings</q-item-tile>
-                    </q-item-main>
-                </q-item>
-                <q-item>
-                    <q-item-main>
-                        <q-item-tile label>Exit Ryo GUI Wallet</q-item-tile>
-                    </q-item-main>
-                </q-item>
-            </q-list>
-        </q-btn-dropdown>
-
-        <q-tabs class="col" align="justify" color="dark" inverted>
-            <q-tab slot="title"><span><q-icon name="attach_money" /> Wallet</span></q-tab>
-            <q-tab slot="title"><span><q-icon name="call_received" /> Receive</span></q-tab>
-            <q-tab slot="title"><span><q-icon name="call_made" /> Send</span></q-tab>
-            <q-tab slot="title"><span><q-icon name="person" /> Address Book</span></q-tab>
-            <q-tab slot="title"><span><q-icon name="history" /> TX History</span></q-tab>
-
-        </q-tabs>
-    </q-layout-header>
-
-    <q-page-container>
-        <router-view />
-    </q-page-container>
-
-
-    <q-layout-footer>
-        <div class="row">
-            <div>
-                Daemon: {{ status }}
-            </div>
-            <div>
-                Height: {{ height }}
-            </div>
-
-        </div>
-        <q-progress :percentage="progress" stripe animate />
-    </q-layout-footer>
-
-</q-layout>
-</template>
-
-<script>
-import {
-    openURL
-} from "quasar"
-import {
-    mapState
-} from "vuex"
-
-export default {
-    name: "LayoutDefault",
-    data() {
-        return {
-            selectedTab: "tab-1",
-            progress: 40
-        }
-    },
-    computed: {
-        ...mapState({
-            status: state => state.gateway.info.status,
-            height: state => state.gateway.info.height
-        })
-    },
-    methods: {
-        openURL
-    }
-}
-</script>
-
-<style>
-.q-layout-header {
-    box-shadow: none;
-    border-bottom: 1px solid #ddd;
-}
-
-
-.q-layout-header .q-btn-dropdown {
-    height: 48px;
-    width: 50px;
-    position: absolute;
-    z-index: 1;
-    border-radius: 0;
-}
-
-.q-layout-header .q-btn-dropdown .q-btn-dropdown-arrow {
-    display: none;
-}
-
-.q-layout-header .q-tabs {
-    padding-left: 50px;
-}
-
-.q-layout-header .q-tabs-head {
-    padding: 0;
-}
-
-.q-layout-header .q-tabs .q-tab {
-    text-transform: none;
-}
-
-.q-layout-header .q-tabs .q-icon {
-    font-size: 22px;
-}
-</style>
diff --git a/src/layouts/wallet/main.vue b/src/layouts/wallet/main.vue
index 4082d2b..a45a39e 100644
--- a/src/layouts/wallet/main.vue
+++ b/src/layouts/wallet/main.vue
@@ -3,7 +3,7 @@
     <q-layout-header class="shift-title">
         <main-menu />
 
-        <q-tabs class="col" align="justify" color="dark" inverted>
+        <q-tabs class="col" align="justify" :color="theme == 'dark' ? 'light' : 'dark'" inverted>
 
             <q-route-tab to="/wallet" default slot="title">
                 <span><q-icon name="attach_money" /> Wallet</span>
@@ -36,19 +36,15 @@
 </template>
 
 <script>
-import {
-    openURL
-} from "quasar"
-
-import {
-    mapState
-} from "vuex"
-
+import { openURL } from "quasar"
+import { mapState } from "vuex"
 import StatusFooter from "components/footer"
 import MainMenu from "components/mainmenu"
-
 export default {
     name: "LayoutDefault",
+    computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
+    }),
     data() {
         return {
             selectedTab: "tab-1",
diff --git a/src/pages/init/welcome.vue b/src/pages/init/welcome.vue
index 07c6f3c..1c7ea23 100644
--- a/src/pages/init/welcome.vue
+++ b/src/pages/init/welcome.vue
@@ -1,7 +1,7 @@
 <template>
 <q-page>
 
-    <q-stepper class="no-shadow" ref="stepper">
+    <q-stepper class="no-shadow" ref="stepper" :color="theme == 'dark' ? 'light' : 'dark'" dark>
 
         <q-step default title="Welcome">
 
@@ -26,16 +26,29 @@
 
             <div>Version: ATOM v1.0.2-0.3.1.2</div>
 
+            <h6 class="q-mb-md" style="font-weight: 300">Select Appearance:</h6>
+
+            <q-btn-toggle
+                v-model="choose_theme"
+                toggle-color="primary"
+                size="md"
+                :options="[
+                          {label: 'Light theme', value: 'light', icon: 'brightness_5'},
+                          {label: 'Dark theme', value: 'dark', icon: 'brightness_2'},
+                          ]"
+                />
+
+
             <h6 class="q-mb-md" style="font-weight: 300">Select language:</h6>
 
-            <div class="row">
-
-                <q-btn flat class="language-item">
-                    <div class="language-item-circle">EN</div> English
-
-                </q-btn>
-
-            </div>
+            <q-btn-toggle
+                v-model="choose_lang"
+                toggle-color="primary"
+                size="md"
+                :options="[
+                          {label: 'English', value: 'EN', icon: 'language'},
+                          ]"
+                />
 
             <p class="q-mt-md">More languages coming soon</p>
 
@@ -80,18 +93,18 @@
         <div class="row justify-end">
             <div>
 	        <q-btn
-	             flat
-	             @click="clickPrev()"
-	             label="Back"
-	             />
+	            flat
+	            @click="clickPrev()"
+	            label="Back"
+	            />
             </div>
             <div>
 	        <q-btn
-                     class="q-ml-sm"
-                     color="primary"
-	             @click="clickNext()"
-	             label="Next"
-	             />
+                    class="q-ml-sm"
+                    color="primary"
+	            @click="clickNext()"
+	            label="Next"
+	            />
             </div>
         </div>
 
@@ -105,6 +118,7 @@ import { mapState } from "vuex"
 import SettingsGeneral from "components/settings_general"
 export default {
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         pending_config: state => state.gateway.app.pending_config
     }),
     data() {
@@ -114,8 +128,14 @@ export default {
         }
     },
     watch: {
-        choose_theme: function () {
-            this.$gateway.call("set_theme", this.choose_theme)
+        choose_theme: function (val) {
+            this.$store.commit("gateway/set_app_data", {
+                config: {
+                    appearance: {
+                        theme: val
+                    }
+                }
+            });
         }
     },
     mounted () {
@@ -176,9 +196,4 @@ export default {
     }
 
 }
-
-footer {
-    background:white;
-}
-
 </style>
diff --git a/src/pages/wallet-select/create.vue b/src/pages/wallet-select/create.vue
index 6e23ecd..f3abbbc 100644
--- a/src/pages/wallet-select/create.vue
+++ b/src/pages/wallet-select/create.vue
@@ -3,19 +3,21 @@
     <div class="q-mx-md">
         <q-field class="q-mt-none">
             <q-input
-                 v-model="wallet.name"
-                 float-label="Wallet name"
-                 @blur="$v.wallet.name.$touch"
-                 :error="$v.wallet.name.$error"
-                 />
+                v-model="wallet.name"
+                float-label="Wallet name"
+                @blur="$v.wallet.name.$touch"
+                :error="$v.wallet.name.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
             <q-select
-                 v-model="wallet.language"
-                 float-label="Seed language"
-                 :options="languageOptions"
-                 />
+                v-model="wallet.language"
+                float-label="Seed language"
+                :options="languageOptions"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
@@ -33,11 +35,11 @@
         </p>
 
         <q-field>
-            <q-input v-model="wallet.password" type="password" float-label="Password" />
+            <q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
+            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-btn color="primary" @click="create" label="Create wallet" />
@@ -79,6 +81,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         status: state => state.gateway.wallet.status,
     }),
     watch: {
diff --git a/src/pages/wallet-select/import-legacy.vue b/src/pages/wallet-select/import-legacy.vue
index 615b596..23d6a9e 100644
--- a/src/pages/wallet-select/import-legacy.vue
+++ b/src/pages/wallet-select/import-legacy.vue
@@ -13,27 +13,28 @@
 
         <q-field class="q-mt-none">
             <q-input
-                 v-model="wallet.name"
-                 float-label="New wallet name"
-                 @blur="$v.wallet.name.$touch"
-                 :error="$v.wallet.name.$error"
-                 />
+                v-model="wallet.name"
+                float-label="New wallet name"
+                @blur="$v.wallet.name.$touch"
+                :error="$v.wallet.name.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
             <div class="row gutter-sm">
                 <div class="col-12">
-                    <q-input v-model="wallet_path" stack-label="Wallet file" disable />
+                    <q-input v-model="wallet_path" stack-label="Wallet file" disable :dark="theme=='dark'" />
                 </div>
             </div>
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password" type="password" float-label="Password" />
+            <q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
+            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-btn color="primary" @click="import_wallet" label="Import wallet" />
@@ -59,6 +60,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         status: state => state.gateway.wallet.status,
         wallets_legacy: state => state.gateway.wallets.legacy,
         wallet_path (state) {
diff --git a/src/pages/wallet-select/import-view-only.vue b/src/pages/wallet-select/import-view-only.vue
index 633d030..9901d93 100644
--- a/src/pages/wallet-select/import-view-only.vue
+++ b/src/pages/wallet-select/import-view-only.vue
@@ -3,29 +3,32 @@
     <div class="q-mx-md">
         <q-field class="q-mt-none">
             <q-input
-                 v-model="wallet.name"
-                 float-label="Wallet name"
-                 @blur="$v.wallet.name.$touch"
-                 :error="$v.wallet.name.$error"
-                 />
+                v-model="wallet.name"
+                float-label="Wallet name"
+                @blur="$v.wallet.name.$touch"
+                :error="$v.wallet.name.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
             <q-input
-                 v-model="wallet.address"
-                 float-label="Wallet address"
-                 @blur="$v.wallet.address.$touch"
-                 :error="$v.wallet.address.$error"
-                 />
+                v-model="wallet.address"
+                float-label="Wallet address"
+                @blur="$v.wallet.address.$touch"
+                :error="$v.wallet.address.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
             <q-input
-                 v-model="wallet.viewkey"
-                 float-label="Private viewkey"
-                 @blur="$v.wallet.viewkey.$touch"
-                 :error="$v.wallet.viewkey.$error"
-                 />
+                v-model="wallet.viewkey"
+                float-label="Private viewkey"
+                @blur="$v.wallet.viewkey.$touch"
+                :error="$v.wallet.viewkey.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
@@ -33,15 +36,16 @@
                      min="0" float-label="Restore height"
                      @blur="$v.wallet.refresh_start_height.$touch"
                      :error="$v.wallet.refresh_start_height.$error"
+                     :dark="theme=='dark'"
                      />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password" type="password" float-label="Password" />
+            <q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
+            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-btn color="primary" @click="restore_view_wallet" label="Restore view-only wallet" />
@@ -68,6 +72,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         status: state => state.gateway.wallet.status,
     }),
     watch: {
diff --git a/src/pages/wallet-select/import.vue b/src/pages/wallet-select/import.vue
index bc136ad..2a7a344 100644
--- a/src/pages/wallet-select/import.vue
+++ b/src/pages/wallet-select/import.vue
@@ -4,31 +4,32 @@
 
         <q-field class="q-mt-none">
             <q-input
-                 v-model="wallet.name"
-                 float-label="New wallet name"
-                 @blur="$v.wallet.name.$touch"
-                 :error="$v.wallet.name.$error"
-                 />
+                v-model="wallet.name"
+                float-label="New wallet name"
+                @blur="$v.wallet.name.$touch"
+                :error="$v.wallet.name.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
             <div class="row gutter-sm">
-                <div class="col-8">
-                    <q-input v-model="wallet.path" stack-label="Wallet file" disable />
+                <div class="col">
+                    <q-input v-model="wallet.path" stack-label="Wallet file" disable :dark="theme=='dark'" />
                     <input type="file" id="walletPath" v-on:change="setWalletPath" ref="fileInput" hidden />
                 </div>
-                <div class="col-4">
-                    <q-btn v-on:click="selectFile">Select wallet file</q-btn>
+                <div class="col-auto">
+                    <q-btn v-on:click="selectFile" class="float-right" :text-color="theme=='dark'?'white':'dark'">Select wallet file</q-btn>
                 </div>
             </div>
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password" type="password" float-label="Password" />
+            <q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
+            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-btn color="primary" @click="import_wallet" label="Import wallet" />
@@ -53,6 +54,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         status: state => state.gateway.wallet.status,
     }),
     watch: {
diff --git a/src/pages/wallet-select/index.vue b/src/pages/wallet-select/index.vue
index 05dd127..f5b0efb 100644
--- a/src/pages/wallet-select/index.vue
+++ b/src/pages/wallet-select/index.vue
@@ -1,7 +1,7 @@
 <template>
 <q-page>
 
-    <q-list link no-border>
+    <q-list link no-border :dark="theme=='dark'">
         <template v-if="wallets.list.length">
             <q-list-header>Open wallet</q-list-header>
             <q-item v-for="wallet in wallets.list" @click.native="openWallet(wallet)">
@@ -16,24 +16,19 @@
             <q-item-separator />
         </template>
         <q-item @click.native="createNewWallet()">
-            <!--<q-item-side avatar="statics/guy-avatar.png" />-->
             <q-item-main label="Create new wallet" />
         </q-item>
         <q-item @click.native="restoreWallet()">
-            <!--<q-item-side avatar="statics/guy-avatar.png" />-->
             <q-item-main label="Restore wallet from seed" />
         </q-item>
         <q-item @click.native="restoreViewWallet()">
-            <!--<q-item-side avatar="statics/guy-avatar.png" />-->
             <q-item-main label="Restore view-only wallet" />
         </q-item>
         <q-item @click.native="importWallet()">
-            <!--<q-item-side avatar="statics/guy-avatar.png" />-->
             <q-item-main label="Import wallet from file" />
         </q-item>
         <template v-if="wallets.legacy.length">
             <q-item @click.native="importLegacyWallet()">
-                <!--<q-item-side avatar="statics/guy-avatar.png" />-->
                 <q-item-main label="Import wallet from legacy gui" />
             </q-item>
         </template>
@@ -47,6 +42,7 @@ import { mapState } from "vuex"
 import Identicon from "components/identicon"
 export default {
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         wallets: state => state.gateway.wallets,
         status: state => state.gateway.wallet.status
     }),
@@ -65,7 +61,8 @@ export default {
                     },
                     cancel: {
                         flat: true,
-                        label: "CANCEL"
+                        label: "CANCEL",
+                        color: this.theme=="dark"?"white":"dark"
                     }
                 }).then(password => {
                     this.$q.loading.show({
@@ -73,6 +70,8 @@ export default {
                     })
                     this.$gateway.send("wallet", "open_wallet", {name: wallet.name, password: password});
                 })
+                .catch(() => {
+                })
             } else {
                 this.$q.loading.show({
                     delay: 0
diff --git a/src/pages/wallet-select/restore.vue b/src/pages/wallet-select/restore.vue
index 76363ed..e92a6e4 100644
--- a/src/pages/wallet-select/restore.vue
+++ b/src/pages/wallet-select/restore.vue
@@ -3,21 +3,23 @@
     <div class="q-mx-md">
         <q-field class="q-mt-none">
             <q-input
-                 v-model="wallet.name"
-                 float-label="Wallet name"
-                 @blur="$v.wallet.name.$touch"
-                 :error="$v.wallet.name.$error"
-                 />
+                v-model="wallet.name"
+                float-label="Wallet name"
+                @blur="$v.wallet.name.$touch"
+                :error="$v.wallet.name.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
             <q-input
-                 v-model="wallet.seed"
-                 float-label="Mnemonic seed"
-                 type="textarea"
-                 @blur="$v.wallet.seed.$touch"
-                 :error="$v.wallet.seed.$error"
-                 />
+                v-model="wallet.seed"
+                float-label="Mnemonic seed"
+                type="textarea"
+                @blur="$v.wallet.seed.$touch"
+                :error="$v.wallet.seed.$error"
+                :dark="theme=='dark'"
+                />
         </q-field>
 
         <q-field>
@@ -25,15 +27,16 @@
                      min="0" float-label="Restore height"
                      @blur="$v.wallet.refresh_start_height.$touch"
                      :error="$v.wallet.refresh_start_height.$error"
+                     :dark="theme=='dark'"
                      />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password" type="password" float-label="Password" />
+            <q-input v-model="wallet.password" type="password" float-label="Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-field>
-            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" />
+            <q-input v-model="wallet.password_confirm" type="password" float-label="Confirm Password" :dark="theme=='dark'" />
         </q-field>
 
         <q-btn color="primary" @click="restore_wallet" label="Restore wallet" />
@@ -58,6 +61,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         status: state => state.gateway.wallet.status,
     }),
     watch: {
diff --git a/src/pages/wallet/addressbook.vue b/src/pages/wallet/addressbook.vue
index 652b819..9acd230 100644
--- a/src/pages/wallet/addressbook.vue
+++ b/src/pages/wallet/addressbook.vue
@@ -13,7 +13,7 @@
     </div>
 
     <template v-if="address_book_starred.length || address_book.length">
-    <q-list link no-border>
+    <q-list link no-border :dark="theme=='dark'">
 
         <q-item v-for="(entry, index) in address_book_starred" @click.native="details(entry)">
             <q-item-side>
@@ -65,6 +65,7 @@ import Identicon from "components/identicon"
 import AddressBookDetails from "components/address_book_details"
 export default {
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         address_book: state => state.gateway.wallet.address_list.address_book,
         address_book_starred: state => state.gateway.wallet.address_list.address_book_starred,
         is_ready (state) {
diff --git a/src/pages/wallet/receive.vue b/src/pages/wallet/receive.vue
index 4975d3b..7038891 100644
--- a/src/pages/wallet/receive.vue
+++ b/src/pages/wallet/receive.vue
@@ -12,7 +12,7 @@
 
     </div>
 
-    <q-list link no-border>
+    <q-list link no-border :dark="theme=='dark'">
 
         <q-list-header>My primary address</q-list-header>
         <q-item v-for="(address, index) in address_list.primary" @click.native="details(address)">
@@ -66,6 +66,7 @@ import Identicon from "components/identicon"
 import AddressDetails from "components/address_details"
 export default {
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         address_list: state => state.gateway.wallet.address_list
     }),
     methods: {
diff --git a/src/pages/wallet/send.vue b/src/pages/wallet/send.vue
index c79c669..20227b5 100644
--- a/src/pages/wallet/send.vue
+++ b/src/pages/wallet/send.vue
@@ -19,13 +19,13 @@
 
             <div class="col">
                 <q-field class="q-ma-none">
-                    <q-input v-model="newTx.amount" float-label="Amount"
+                    <q-input v-model="newTx.amount" float-label="Amount" :dark="theme=='dark'"
                              type="number" min="0" :max="unlocked_balance / 1e9" />
                 </q-field>
             </div>
 
             <div>
-                <q-btn @click="newTx.amount = unlocked_balance / 1e9">All coins</q-btn>
+                <q-btn @click="newTx.amount = unlocked_balance / 1e9" :text-color="theme=='dark'?'white':'dark'">All coins</q-btn>
             </div>
 
         </div>
@@ -37,6 +37,7 @@
             <q-item-main>
                 <q-field>
                     <q-input v-model="newTx.address" float-label="Address"
+                             :dark="theme=='dark'"
                              @blur="$v.newTx.address.$touch"
                              :error="$v.newTx.address.$error"
                              />
@@ -46,6 +47,7 @@
 
         <q-field style="margin-top:0">
             <q-input v-model="newTx.payment_id" float-label="Payment ID (optional)"
+                     :dark="theme=='dark'"
                      @blur="$v.newTx.payment_id.$touch"
                      :error="$v.newTx.payment_id.$error"
                      />
@@ -55,20 +57,20 @@
 
             <div class="col-6">
                 <q-field>
-                    <q-select
-                         v-model="newTx.mixin"
-                         float-label="Mixin"
-                         :options="mixinOptions"
-                         />
+                    <q-select :dark="theme=='dark'"
+                              v-model="newTx.mixin"
+                              float-label="Mixin"
+                              :options="mixinOptions"
+                              />
                 </q-field>
             </div>
             <div class="col-6">
                 <q-field>
-                    <q-select
-                         v-model="newTx.priority"
-                         float-label="Priority"
-                         :options="priorityOptions"
-                         />
+                    <q-select :dark="theme=='dark'"
+                              v-model="newTx.priority"
+                              float-label="Priority"
+                              :options="priorityOptions"
+                              />
                 </q-field>
             </div>
 
@@ -76,22 +78,22 @@
 
 
         <q-field>
-            <q-checkbox v-model="newTx.address_book.save" label="Save to address book" />
+            <q-checkbox v-model="newTx.address_book.save" label="Save to address book" :dark="theme=='dark'" />
         </q-field>
 
         <div v-if="newTx.address_book.save">
             <q-field>
-                <q-input v-model="newTx.address_book.name" float-label="Name" />
+                <q-input v-model="newTx.address_book.name" float-label="Name" :dark="theme=='dark'" />
             </q-field>
             <q-field>
-                <q-input v-model="newTx.address_book.description" type="textarea" rows="2" float-label="Notes" />
+                <q-input v-model="newTx.address_book.description" type="textarea" rows="2" float-label="Notes" :dark="theme=='dark'" />
             </q-field>
         </div>
 
         <q-field class="q-pt-sm">
             <q-btn
-                 :disable="!is_ready"
-                 color="primary" @click="send()" label="Send" />
+                :disable="!is_ready"
+                color="primary" @click="send()" label="Send" />
         </q-field>
 
     </div>
@@ -111,6 +113,7 @@ import Identicon from "components/identicon"
 const objectAssignDeep = require("object-assign-deep");
 export default {
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         unlocked_balance: state => state.gateway.wallet.info.unlocked_balance,
         tx_status: state => state.gateway.tx_status,
         is_ready (state) {
@@ -259,7 +262,8 @@ export default {
                 },
                 cancel: {
                     flat: true,
-                    label: "CANCEL"
+                    label: "CANCEL",
+                    color: this.theme=="dark"?"white":"dark"
                 }
             }).then(password => {
                 this.$store.commit("gateway/set_tx_status", {
@@ -269,6 +273,7 @@ export default {
                 })
                 let newTx = objectAssignDeep.noMutate(this.newTx, {password})
                 this.$gateway.send("wallet", "transfer", newTx)
+            }).catch(() => {
             })
         }
     },
diff --git a/src/pages/wallet/txhistory.vue b/src/pages/wallet/txhistory.vue
index f998017..675fb3a 100644
--- a/src/pages/wallet/txhistory.vue
+++ b/src/pages/wallet/txhistory.vue
@@ -8,7 +8,7 @@
         </div>
 
         <div class="col-4">
-            <q-select
+            <q-select :dark="theme=='dark'"
                  v-model="tx_type"
                  float-label="Filter by transaction type"
                  :options="tx_type_options"
@@ -39,6 +39,7 @@ export default {
         }
     },
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         tx_list: state => state.gateway.wallet.transactions.tx_list
     }),
 
diff --git a/src/pages/wallet/wallet.vue b/src/pages/wallet/wallet.vue
index 78e56ab..0b3e670 100644
--- a/src/pages/wallet/wallet.vue
+++ b/src/pages/wallet/wallet.vue
@@ -52,9 +52,9 @@
     </div>
 
 
-    <div>
+    <h6 class="q-my-none">Recent transactions:</h6>
 
-        <h6 class="q-my-none">Recent transactions:</h6>
+    <div style="margin: 0 -16px;">
 
         <TxList :limit="5" />
 
@@ -161,7 +161,7 @@
                     flat class="q-mr-sm"
                     @click="key_image_modal_show = false"
                     label="Close"
-                     />
+                    />
                 <q-btn
                     color="primary"
                     @click="doKeyImages()"
@@ -181,6 +181,7 @@ import FormatRyo from "components/format_ryo"
 import TxList from "components/tx_list"
 export default {
     computed: mapState({
+        theme: state => state.gateway.app.config.appearance.theme,
         info: state => state.gateway.wallet.info,
         secret: state => state.gateway.wallet.secret,
         data_dir: state => state.gateway.app.config.app.data_dir,
@@ -254,11 +255,13 @@ export default {
                 },
                 cancel: {
                     flat: true,
-                    label: "CANCEL"
+                    label: "CANCEL",
+                    color: this.theme=="dark"?"white":"dark"
                 }
             }).then(password => {
                 //this.spinner = true
                 this.$gateway.send("wallet", "get_private_keys", {password})
+            }).catch(() => {
             })
         },
         closePrivateKeys () {
@@ -308,13 +311,15 @@ export default {
                 },
                 cancel: {
                     flat: true,
-                    label: "CANCEL"
+                    label: "CANCEL",
+                    color: this.theme=="dark"?"white":"dark"
                 }
             }).then(password => {
                 if(this.key_image_import_export == "Export")
                     this.$gateway.send("wallet", "export_key_images", {password: password, path: this.key_image_export_path})
                 else if(this.key_image_import_export == "Import")
                     this.$gateway.send("wallet", "import_key_images", {password: password, path: this.key_image_import_path})
+            }).catch(() => {
             })
 
         }