diff --git a/.vscode/settings.json b/.vscode/settings.json
index 69bde91..0ffcaaf 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -13,6 +13,7 @@
     "firstseen",
     "formik",
     "keepalive",
+    "mixins",
     "motd",
     "tsdoc"
   ],
diff --git a/src/layouts/main/components/nav/Brand.scss b/src/layouts/main/components/nav/Brand.scss
index 15caf97..fb13f24 100644
--- a/src/layouts/main/components/nav/Brand.scss
+++ b/src/layouts/main/components/nav/Brand.scss
@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: center;
 
-  border-right: 1px solid $gray-700;
+  border-right: 1px solid $border-color-darker;
 
   a {
     color: $navbar-dark-brand-color;
@@ -38,4 +38,4 @@
   @include media-breakpoint-down(sm) {
     display: none;
   }
-}
\ No newline at end of file
+}
diff --git a/src/layouts/main/components/nav/Search.scss b/src/layouts/main/components/nav/Search.scss
index 283c4da..d6d51af 100644
--- a/src/layouts/main/components/nav/Search.scss
+++ b/src/layouts/main/components/nav/Search.scss
@@ -43,4 +43,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/layouts/main/components/nav/index.scss b/src/layouts/main/components/nav/index.scss
index 8a456f1..00409d0 100644
--- a/src/layouts/main/components/nav/index.scss
+++ b/src/layouts/main/components/nav/index.scss
@@ -8,13 +8,15 @@
 
   box-shadow: $box-shadow;
 
+  border-bottom: 1px solid $border-color-darker;
+
   .navbar-collapse {
     margin: 0 1rem 0 0;
   }
 
   .navbar-nav {
     .nav-link {
-      border-right: 1px solid $gray-700;
+      border-right: 1px solid $border-color-darker;
       padding: 0 1.5rem;
 
       .nav-icon {
@@ -26,4 +28,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/layouts/main/components/nav/index.tsx b/src/layouts/main/components/nav/index.tsx
index 563fe94..90bb8ac 100644
--- a/src/layouts/main/components/nav/index.tsx
+++ b/src/layouts/main/components/nav/index.tsx
@@ -2,6 +2,7 @@
 
 import Navbar from "react-bootstrap/Navbar";
 import Nav from "react-bootstrap/Nav";
+import { LinkContainer } from "react-router-bootstrap";
 
 import { Brand } from "./Brand";
 import { Search } from "./Search";
@@ -15,9 +16,17 @@
     <Brand />
     <Navbar.Toggle aria-controls="main-nav-collapse" />
     <Navbar.Collapse id="main-nav-collapse">
+      {/* Main nav buttons */}
       <Nav>
-        <Nav.Link href="/send"><span className="nav-icon icon-paper-plane"></span>Send</Nav.Link>
-        <Nav.Link href="/request"><span className="nav-icon icon-download"></span>Request</Nav.Link>
+        {/* Send Krist button */}
+        <LinkContainer to="/send">
+          <Nav.Link><span className="nav-icon icon-paper-plane"></span>Send</Nav.Link>
+        </LinkContainer>
+
+        {/* Receive Krist button */}
+        <LinkContainer to="/request">
+          <Nav.Link><span className="nav-icon icon-download"></span>Request</Nav.Link>
+        </LinkContainer>
       </Nav>
       <Search />
       <ConnectionIndicator />
diff --git a/src/layouts/main/components/sidebar/GuestIndicator.scss b/src/layouts/main/components/sidebar/GuestIndicator.scss
index 1b675b4..48a2580 100644
--- a/src/layouts/main/components/sidebar/GuestIndicator.scss
+++ b/src/layouts/main/components/sidebar/GuestIndicator.scss
@@ -1,11 +1,11 @@
 @import "~scss/variables";
 
 .nav-guest-indicator {
-  background-color: $gray-200;
+  background-color: $main-sidebar-top-bg;
 
   padding: 0.5rem 1rem;
 
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-color-darker;
 
   color: $text-muted;
   text-align: center;
diff --git a/src/layouts/main/components/sidebar/SidebarItem.scss b/src/layouts/main/components/sidebar/SidebarItem.scss
index 1bd8f82..fb5bbba 100644
--- a/src/layouts/main/components/sidebar/SidebarItem.scss
+++ b/src/layouts/main/components/sidebar/SidebarItem.scss
@@ -3,13 +3,15 @@
 #main-sidebar .nav-item {
   .nav-link {
     color: $main-sidebar-color;
+
+    padding: 0.75rem 1.25rem;
   }
 
   .sidebar-icon {
-    margin-right: 0.5rem;
+    margin-right: 0.75rem;
   }
 
   &:hover {
     background: $main-sidebar-hover-bg;
   }
-}
\ No newline at end of file
+}
diff --git a/src/layouts/main/components/sidebar/TotalBalance.scss b/src/layouts/main/components/sidebar/TotalBalance.scss
index c587897..19204cc 100644
--- a/src/layouts/main/components/sidebar/TotalBalance.scss
+++ b/src/layouts/main/components/sidebar/TotalBalance.scss
@@ -1,11 +1,11 @@
 @import "~scss/variables";
 
 .nav-total-balance {
-  background-color: $gray-200;
+  background-color: $main-sidebar-top-bg;
 
   padding: 0.5rem 1rem;
 
-  border-bottom: 1px solid $border-color;
+  border-bottom: 1px solid $border-color-darker;
 
   h5 {
     margin-bottom: 0;
diff --git a/src/layouts/main/components/sidebar/index.scss b/src/layouts/main/components/sidebar/index.scss
index 37db530..adf0a46 100644
--- a/src/layouts/main/components/sidebar/index.scss
+++ b/src/layouts/main/components/sidebar/index.scss
@@ -12,7 +12,7 @@
   flex-direction: column;
   flex-wrap: nowrap;
 
-  border-right: 1px solid $border-color;
+  border-right: 1px solid $border-color-darker;
   background: $main-sidebar-bg;
 
   .sidebar-content {
@@ -39,4 +39,4 @@
 
     border-top: 1px solid $border-color;
   }
-}
\ No newline at end of file
+}
diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
new file mode 100644
index 0000000..8cc03ec
--- /dev/null
+++ b/src/scss/_theme.scss
@@ -0,0 +1,87 @@
+/* ========================================================================== */
+/* BOOTSTRAP RE-SKIN
+/* ========================================================================== */
+
+/* Colours */
+$light: #343a56;
+$lighter: #434a6b;
+$slighter: mix($light, $lighter, 50%);
+$dark: #2a304a;
+$darker: #242942;
+$darkest: darken($darker, 5%);
+$primary: #5ac6e9;
+$secondary: $lighter;
+$success: #38bf60;
+$info: #57a3cb;
+$danger: #fe4848;
+
+/* Typography */
+$body-color: #eaf0fe;
+$text-muted: #8991ab;
+
+$body-hover-color: mix($body-color, $text-muted, 50%);
+$body-hover-color: mix($body-color, $text-muted, 50%);
+
+$font-family-base: "Lato", sans-serif;
+
+/* Basic redefinitions */
+$body-bg: $dark;
+
+$border-color: #3f4661;
+$border-color-lighter: #404962;
+$border-color-darker: darken($darker, 5%);
+
+/* Shadows */
+$enable-shadows: true;
+
+$btn-box-shadow: none;
+$input-box-shadow: none;
+
+/* Border radius */
+$border-radius:    6px !default;
+$border-radius-lg: 12px !default;
+$border-radius-sm: 3px !default;
+
+/* Button */
+$btn-active-box-shadow: none;
+
+/* Input */
+$input-bg: $lighter;
+$input-border-width: 0;
+
+$input-color: $body-color;
+$input-placeholder-color: $text-muted;
+
+$input-btn-focus-color: rgba($info, 0.5);
+
+.was-validated .form-control:invalid, .form-control.is-invalid {
+  /* Make invalid form controls have a red glow */
+  &:not(:focus) {
+    box-shadow: 0 0 0 0.2rem rgba($danger, 0.35);
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 0.2rem rgba($danger, 0.5);
+  }
+}
+
+/* Navbar */
+$navbar-dark-color: $body-color;
+$navbar-dark-hover-color: $body-hover-color;
+$navbar-dark-disabled-color: $text-muted;
+
+/* Modal */
+$modal-content-bg: $light;
+$modal-content-box-shadow-xs:    0 0.5rem 1rem rgba(#000, 0.15);
+$modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba(#000, 0.15);
+$modal-content-border-width: 0;
+$modal-header-border-color: $border-color-lighter;
+$modal-header-border-width: 1px;
+
+$close-color: $text-muted;
+$close-text-shadow: none;
+
+.modal-header {
+  /* Close button isn't vertically aligned in modal header by default. */
+  align-items: center;
+}
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
index df939d2..3f1337c 100644
--- a/src/scss/_variables.scss
+++ b/src/scss/_variables.scss
@@ -1,23 +1,6 @@
-/* -------------------------------------------------------------------------- */
-/*                                  BOOTSTRAP                                 */
-/* -------------------------------------------------------------------------- */
-$border-radius: 0;
-$border-radius-lg: 0;
-$border-radius-sm: 0;
+@import "_theme"; /* Re-skin bootstrap */
 
-$font-family-base: "Lato", sans-serif;
-
-$enable-shadows: true;
-
-$btn-box-shadow: none;
-$input-box-shadow: none;
-
-$modal-content-box-shadow-xs: 0 .5rem 1rem rgba(#000, .15);
-$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba(#000, .15);
-$modal-content-border-width: 0;
-$modal-header-border-width: 1px;
-
-/* Import Bootstrap after redefining */
+/* Import Bootstrap after redefining its variables */
 @import 
   "~bootstrap/scss/functions", 
   "~bootstrap/scss/variables",
@@ -29,24 +12,25 @@
 $navbar-height: 50px;
 
 /* Search bar */
-$navbar-search-bg: $gray-700;
-$navbar-search-color: $gray-500;
-$navbar-search-placeholder-color: $gray-600;
+$navbar-search-bg: $light;
+$navbar-search-color: rgba($body-color, 0.5);
+$navbar-search-placeholder-color: $input-placeholder-color;
 $navbar-search-placeholder-font-size: $font-size-sm;
-$navbar-search-hover-bg: $gray-600;
-$navbar-search-hover-color: $white;
-$navbar-search-hover-placeholder-color: $gray-500;
-$navbar-search-focus-bg: $white;
+$navbar-search-hover-bg: $slighter;
+$navbar-search-hover-color: rgba($body-color, 0.75);
+$navbar-search-hover-placeholder-color: $input-placeholder-color;
+$navbar-search-focus-bg: $lighter;
 $navbar-search-focus-color: $body-color;
-$navbar-search-focus-placeholder-color: $body-color;
+$navbar-search-focus-placeholder-color: $input-placeholder-color;
 
 /* -------------------------------------------------------------------------- */
 /*                                MAIN SIDEBAR                                */
 /* -------------------------------------------------------------------------- */
 $main-sidebar-width: 200px !default;
 $main-sidebar-color: $body-color;
-$main-sidebar-bg: $gray-100;
-$main-sidebar-hover-bg: $gray-200;
+$main-sidebar-bg: $darker;
+$main-sidebar-hover-bg: mix($darker, $darkest, 50%);
+$main-sidebar-top-bg: $darkest;
 
 /* -------------------------------------------------------------------------- */
 /*                                    MISC                                    */