diff --git a/client/source/sass/base/_form-elements.scss b/client/source/sass/base/_form-elements.scss
index a19355e6..9a929ada 100644
--- a/client/source/sass/base/_form-elements.scss
+++ b/client/source/sass/base/_form-elements.scss
@@ -1,34 +1,32 @@
-$form--label--foreground: #abbac7;
+$form--label--foreground: #3f5465;
 
-$textbox--background: #e9eff5;
-$textbox--foreground: #53718a;
-$textbox--placeholder: #abbac7;
-$textbox--border: #d6e2ea;
-$textbox--fulfilled--background: #fdfefe;
-$textbox--active--background: #fdfefe;
-$textbox--active--border: desaturate(darken($textbox--border, 5%), 5%);
+$textbox--background: #0f151a;
+$textbox--foreground: #5e7182;
+$textbox--placeholder: #2b3946;
+$textbox--border: #0c0f12;
+$textbox--fulfilled--background: #0f151a;
+$textbox--active--background: #0f151a;
+$textbox--active--border: $blue;
 $textbox--active--foreground: $blue;
 $textbox--active--placeholder: $textbox--placeholder;
 
-$textbox-repeater--button--background: #fff;
-$textbox-repeater--button--background--hover: $main-content--background;
-$textbox-repeater--button--border: rgba($background, 0.1);
-$textbox-repeater--button--border--hover: rgba($background, 0.2);
-$textbox-repeater--button--foreground: rgba($background, 0.3);
-$textbox-repeater--button--foreground--hover: rgba($background, 0.5);
-
 $button--primary--foreground: #fff;
 $button--primary--background: $blue;
-$button--primary--background--hover: darken($button--primary--background, 5%);
-$button--primary--border: darken($button--primary--background, 5%);
-$button--primary--border--hover: darken($button--primary--border, 5%);
+$button--primary--background--hover: lighten($button--primary--background, 4%);
+$button--primary--border: darken(#212a38, 10%);
+$button--primary--border--hover: $button--primary--border;
 
-$button--deemphasized--foreground: #66717a;
-$button--deemphasized--background: $main-content--background;
-$button--deemphasized--foreground--hover: darken($button--deemphasized--foreground, 5%);
-$button--deemphasized--background--hover: darken($button--deemphasized--background, 5%);
-$button--deemphasized--border: darken($button--deemphasized--background, 5%);
-$button--deemphasized--border--hover: darken($button--deemphasized--border, 5%);
+$button--deemphasized--foreground: #677c9e;
+$button--deemphasized--background: #212a38;
+$button--deemphasized--foreground--hover: lighten(#677c9e, 10%);
+$button--deemphasized--background--hover: lighten(#212a38, 2.5%);
+$button--deemphasized--border: darken($button--deemphasized--background, 10%);
+$button--deemphasized--border--hover: $button--deemphasized--border;
+
+$checkbox--background: #212a38;
+$checkbox--background--hover: lighten($checkbox--background, 5%);
+$checkbox--border: darken($button--deemphasized--background, 10%);
+$checkbox--border--hover: $checkbox--border;
 
 $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
 
@@ -84,7 +82,7 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
   cursor: pointer;
   font-weight: 500;
   padding: 8px 22px;
-  transition: background 0.25s;
+  transition: background 0.25s, color 0.25s;
   user-select: none;
 
   &.has-icon {
@@ -131,6 +129,7 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
 }
 
 .checkbox {
+  cursor: pointer;
   line-height: 1;
   position: relative;
 
@@ -139,7 +138,8 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
     .checkbox {
 
       &__decoy {
-        border-color: $blue;
+        background: $checkbox--background--hover;
+        border-color: $checkbox--border--hover;
       }
     }
   }
@@ -168,16 +168,17 @@ $modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
 
   &__decoy {
     @extend .textbox;
-    background: $white;
-    border-radius: 3px;
+    background: $checkbox--background;
+    border: 1px solid $checkbox--border;
+    border-radius: 2px;
     display: inline-block;
-    height: $spacing-unit * 3/5;
+    height: $spacing-unit * 8/10;
     margin-right: $spacing-unit * 3/10;
     margin-top: -2px;
     padding: 0;
     position: relative;
     vertical-align: middle;
-    width: $spacing-unit * 3/5;
+    width: $spacing-unit * 8/10;
 
     .icon {
       fill: transparent;
diff --git a/client/source/sass/components/_dropzone.scss b/client/source/sass/components/_dropzone.scss
index d12c5997..c0afb91c 100644
--- a/client/source/sass/components/_dropzone.scss
+++ b/client/source/sass/components/_dropzone.scss
@@ -1,15 +1,15 @@
-$dropzone--background: #e9eff5;
-$dropzone--foreground: #53718a;
-$dropzone--foreground--hover: darken($dropzone--foreground, 20%);
+$dropzone--background: #0f151a;
+$dropzone--foreground: #3f5465;
 $dropzone--foreground--dragging: $blue;
-$dropzone--border: #d6e2ea;
+$dropzone--border: #0c0f12;
 $dropzone--border--hover: darken($dropzone--border, 20%);
 $dropzone--border--dragging: $blue;
 $dropzone--browse--foreground: $blue;
-$dropzone--icon--fill: #c7d3df;
-$dropzone--icon--fill--hover: darken($dropzone--icon--fill, 15%);
+$dropzone--icon--fill: #3f5465;
+$dropzone--icon--fill--hover: $blue;
 $dropzone--icon--fill--dragging: $blue;
-$dropzone--file--icon--fill: #adbfce;
+$dropzone--file--icon--fill: rgba(#3f5465, 0.5);
+$dropzone--file--icon--fill--hover: rgba(lighten(#3f5465, 10%), 0.5);
 
 .dropzone {
   align-items: center;
@@ -19,9 +19,11 @@ $dropzone--file--icon--fill: #adbfce;
   color: $dropzone--foreground;
   display: flex;
   flex-direction: column;
+  position: relative;
   text-align: center;
   transition: border 0.25s, color 0.25s;
   width: 100%;
+  z-index: 1;
 
   &:hover {
     border-color: $dropzone--border--hover;
@@ -87,14 +89,17 @@ $dropzone--file--icon--fill: #adbfce;
   &__selected-files {
     @extend .textbox;
     @extend .textbox.is-fulfilled;
-    border-radius: 4px 4px 0 0 ;
+    border-radius: 4px 4px 0 0;
+    color: #3f5465;
     font-size: 0.8em;
+    margin-bottom: -1px;
     padding: $spacing-unit * 1/2;
+    position: relative;
     width: 100%;
+    z-index: 2;
 
     & + .dropzone {
       border-radius: 0 0 4px 4px;
-      border-top: none;
     }
 
     &__file {
@@ -106,16 +111,18 @@ $dropzone--file--icon--fill: #adbfce;
         fill: $dropzone--file--icon--fill;
         height: 12px;
         margin-right: 4px;
-        vertical-align: baseline;
-        width: 12px;
-      }
-
-      .icon--close {
-        height: 8px;
-        margin-left: 4px;
-        margin-right: 0;
+        margin-top: -1px;
+        transition: fill 0.25s;
         vertical-align: middle;
-        width: 8px;
+        width: 12px;
+
+        &--close {
+          height: 8px;
+          margin-left: 4px;
+          margin-right: 0;
+          vertical-align: middle;
+          width: 8px;
+        }
       }
     }
   }
@@ -140,10 +147,16 @@ $dropzone--file--icon--fill: #adbfce;
       &--remove-icon {
         cursor: pointer;
       }
-    }
 
-    .icon {
+      &--remove-icon {
 
+        &:hover {
+
+          .icon {
+            fill: $dropzone--file--icon--fill--hover;
+          }
+        }
+      }
     }
   }
 }
diff --git a/client/source/sass/components/_floating-action.scss b/client/source/sass/components/_floating-action.scss
index 445b92ae..a8b5d7d9 100644
--- a/client/source/sass/components/_floating-action.scss
+++ b/client/source/sass/components/_floating-action.scss
@@ -1,3 +1,10 @@
+$textbox-repeater--button--background: #303d52;
+$textbox-repeater--button--background--hover: lighten($textbox-repeater--button--background, 7%);
+$textbox-repeater--button--border: rgba(#0f151b, 0.2);
+$textbox-repeater--button--border--hover: rgba(#0f151b, 0.4);
+$textbox-repeater--button--foreground: rgba(#12191f, 0.7);
+$textbox-repeater--button--foreground--hover: #12191f;
+
 .floating-action {
 
   &__button {
diff --git a/client/source/sass/components/_modals.scss b/client/source/sass/components/_modals.scss
index 23c9a423..6772038d 100644
--- a/client/source/sass/components/_modals.scss
+++ b/client/source/sass/components/_modals.scss
@@ -1,19 +1,22 @@
-$modal--background: #f7fafc;
-$modal--heading--background: $white;
-$modal--heading--foreground: #5c6e80;
-$modal--heading--border: #dde7ed;
+$modal--background: #12191f;
+$modal--heading--background: #161c24;
+$modal--heading--foreground: #7d95ab;
+$modal--heading--border: #0f151b;
 
-$modal--body--foreground: desaturate(lighten($foreground, 20%), 10%);
+$modal--transition--duration: 0.5s;
+$modal--transition--scale: 0.85;
 
-$modal--tab--foreground: #abbac7;
+$modal--body--foreground: #3f5465;
+
+$modal--tab--foreground: #3f5465;
 $modal--tab--foreground--active: $blue;
 $modal--tab--border--active: $blue;
 
-$modal--overlay--base: darken($background, 5%);
-$modal--overlay: rgba($modal--overlay--base, 0.8);
+$modal--overlay--base: desaturate(darken($background, 3%), 5%);
+$modal--overlay: rgba($modal--overlay--base, 0.9);
 
-$modal--content--border: rgba($modal--overlay--base, 0.1);
-$modal--content--shadow: rgba($modal--overlay--base, 0.3);
+$modal--content--border: rgba($modal--overlay--base, 0.5);
+$modal--content--shadow: rgba($modal--overlay--base, 1);
 
 $modal--border-radius: 3px;
 $modal--padding--horizontal: $spacing-unit;
@@ -41,7 +44,7 @@ $modal--tabs--padding--vertical--right: $spacing-unit * 2/5;
 $modal--tabs--padding--vertical--bottom: $spacing-unit * 1/5;
 $modal--tabs--padding--vertical--left: $modal--padding--horizontal;
 
-$modal--tabs--in-body--background: rgba($white, 0.55);
+$modal--tabs--in-body--background: #11171d;
 
 .modal {
   background: $modal--overlay;
@@ -49,7 +52,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
   left: 0;
   position: fixed;
   top: 0;
-  transition: opacity 0.5s;
+  transition: opacity $modal--transition--duration;
   width: 100%;
   z-index: 100;
 
@@ -75,7 +78,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
         &:after {
           bottom: 0;
           content: '';
-          height: 2px;
+          height: 1px;
           left: 0;
           position: absolute;
           right: 0;
@@ -114,7 +117,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
     color: $modal--heading--foreground;
     flex: 0 0 auto;
     font-size: 1.25em;
-    font-weight: 300;
+    font-weight: 400;
     line-height: 1;
     overflow: hidden;
     padding: $modal--padding--vertical $modal--padding--horizontal;
@@ -146,7 +149,9 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
       overflow: hidden;
       position: absolute;
       top: 10%;
+      transition: transform $modal--transition--duration;
       transform: translate(-50%, 0);
+      transform-origin: 50% 50%;
       width: 500px;
     }
   }
@@ -199,19 +204,59 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
 
   &__animation-enter {
     opacity: 0;
+
+    .modal {
+
+      &__content {
+
+        &__wrapper {
+          transform: translate(-50%, 0) scale($modal--transition--scale);
+        }
+      }
+    }
   }
 
   &__animation-enter-active {
     opacity: 1;
+
+    .modal {
+
+      &__content {
+
+        &__wrapper {
+          transform: translate(-50%, 0) scale(1, 1);
+        }
+      }
+    }
   }
 
   &__animation-leave {
     opacity: 1;
     pointer-events: none;
+
+    .modal {
+
+      &__content {
+
+        &__wrapper {
+          transform: translate(-50%, 0) scale(1, 1);
+        }
+      }
+    }
   }
 
   &__animation-leave-active {
     opacity: 0;
+
+    .modal {
+
+      &__content {
+
+        &__wrapper {
+          transform: translate(-50%, 0) scale($modal--transition--scale);
+        }
+      }
+    }
   }
 
   &--vertical {
@@ -285,7 +330,7 @@ $modal--tabs--in-body--background: rgba($white, 0.55);
               right: 0;
               top: 0;
               transition: background 0.25s;
-              width: 2px;
+              width: 1px;
             }
           }
         }
diff --git a/client/source/sass/components/_torrent-details-panel.scss b/client/source/sass/components/_torrent-details-panel.scss
index 89dc8208..bde833ae 100644
--- a/client/source/sass/components/_torrent-details-panel.scss
+++ b/client/source/sass/components/_torrent-details-panel.scss
@@ -1,42 +1,43 @@
-$torrent-details--header--name--foreground: #5b6d7c;
-$torrent-details--header--tertiary--foreground: #7b9cb4;
+$torrent-details--header--secondary--foreground: #3f5465;
 
 $torrent-details--content--background: rgba(desaturate(#0c1b26, 15%), 0.4);
 
-$torrent-details--table--foreground: #527893;
-$torrent-details--table--header: rgba(#527893, 0.5);
-$torrent-details--table--header--count--background: rgba(#527893, 0.2);
-$torrent-details--table--header--count--foreground: #527893;
+$torrent-details--table--foreground: #3f5465;
+$torrent-details--table--header: rgba(#3f5465, 0.5);
+$torrent-details--table--header--count--background: rgba(#3f5465, 0.2);
+$torrent-details--table--header--count--foreground: #3f5465;
 
 $torrent-details--header--icon--default--fill: rgba(#4d6f87, 0.5);
+$torrent-details--header--progress-bar--fill: #3f5465;
 
-$torrent-details--detail--label--foreground: #527893;
+$torrent-details--detail--label--foreground: desaturate(lighten(#3f5465, 5%), 5%);
 
-$directory-tree--foreground: #527893;
-$directory-tree--directory--foreground: #527893;
-$directory-tree--directory--foreground--open: darken($directory-tree--directory--foreground, 5%);
+$directory-tree--foreground: #3f5465;
+$directory-tree--directory--foreground: #3f5465;
+$directory-tree--directory--foreground--open: lighten($directory-tree--directory--foreground, 10%);
 
-$directory-tree--icon--file: rgba(#527893, 0.4);
-$directory-tree--icon--folder: rgba(#527893, 0.4);
-$directory-tree--icon--folder--active: $directory-tree--icon--folder;
-$directory-tree--icon--folder--open: rgba(darken(#527893, 10%), 0.4);
+$directory-tree--group--extension: rgba(#527893, 0.1);
 
-$directory-tree--file-details--foreground: rgba(#527893, 0.7);
-$directory-tree--file-details--hover--foreground: rgba(#527893, 0.8);
+$directory-tree--icon--file: rgba(#3f5465, 0.4);
+$directory-tree--icon--folder: rgba(#3f5465, 0.4);
+$directory-tree--icon--folder--open: rgba(darken(#3f5465, 10%), 0.4);
 
-$torrent-details--directory-tree--file--hover--background: rgba($blue, 0.1);
-$torrent-details--directory-tree--file--hover--foreground: $blue;
-$torrent-details--directory-tree--file--hover--border: rgba($blue, 0.5);
+$directory-tree--file-details--foreground: rgba(#3f5465, 0.7);
+$directory-tree--file-details--hover--foreground: rgba(#3f5465, 0.8);
 
-$torrent-details--directory-tree--parent-directory--foreground: rgba(#527893, 0.6);
-$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.5);
+$torrent-details--directory-tree--file--hover--background: rgba(#434d73, 0.1);
+$torrent-details--directory-tree--file--hover--foreground: #7d95ab;
+$torrent-details--directory-tree--file--hover--border: #2c3e4c;
+
+$torrent-details--directory-tree--parent-directory--foreground: rgba(#3f5465, 0.6);
+$torrent-details--directory-tree--parent-directory--icon--fill: rgba(#3f5465, 0.5);
 
 .torrent-details {
 
   &__heading {
-    color: $torrent-details--header--name--foreground;
-    font-size: 1.2rem;
-    font-weight: 300;
+    color: inherit;
+    font-size: inherit;
+    font-weight: inherit;
     margin-bottom: $spacing-unit * 2/5;
   }
 
@@ -47,7 +48,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
     margin-bottom: $spacing-unit * 1/5;
 
     &__secondary {
-      color: $torrent-details--header--tertiary--foreground;
+      color: $torrent-details--header--secondary--foreground;
       display: flex;
       font-size: 0.85rem;
       flex: 1 0 auto;
@@ -86,26 +87,66 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
         }
       }
 
-      &--download {
-        color: $blue;
-
-        .icon {
-          fill: $blue;
-        }
-      }
-
-      &--upload {
-        color: $green;
-
-        .icon {
-          fill: $green;
-        }
-      }
-
       &:last-child {
         margin-right: 0;
       }
     }
+
+    .is-actively-downloading & {
+
+      .torrent-details {
+
+        &__sub-heading {
+
+          &__tertiary {
+
+            &--download {
+              color: $blue;
+
+              .icon {
+                fill: $blue;
+              }
+            }
+
+            &--upload {
+              color: $green;
+
+              .icon {
+                fill: $green;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &__header {
+
+    &.is-completed,
+    &.is-stopped {
+
+      .progress-bar {
+
+        &__icon {
+
+          .icon {
+            fill: $torrent-details--header--progress-bar--fill;
+          }
+        }
+
+        &__fill {
+          background: $torrent-details--header--progress-bar--fill;
+
+          &__wrapper {
+
+            &:after {
+              background: $torrent-details--header--progress-bar--fill;
+            }
+          }
+        }
+      }
+    }
   }
 
   &__action {
@@ -166,7 +207,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
           &--group {
 
             &:after {
-              background: rgba(#527893, 0.1);
+              background: $directory-tree--group--extension;
             }
           }
 
@@ -209,14 +250,15 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
           transition: background 0.25s, border 0.25s, color 0.25s;
 
           &:after {
-            background: rgba($blue, 0);
+            background: $torrent-details--directory-tree--file--hover--border;
             bottom: 0;
             content: '';
             height: auto;
             left: -2px;
+            opacity: 0;
             position: absolute;
             top: 0;
-            transition: background 0.25s;
+            transition: opacity 0.25s;
             width: 2px;
           }
 
@@ -225,7 +267,7 @@ $torrent-details--directory-tree--parent-directory--icon--fill: rgba(#527893, 0.
             color: $torrent-details--directory-tree--file--hover--foreground;
 
             &:after {
-              background: rgba($blue, 1);
+              opacity: 1;
             }
 
             .file {
diff --git a/client/source/sass/components/_torrents.scss b/client/source/sass/components/_torrents.scss
index a64dc40b..fbedbee3 100644
--- a/client/source/sass/components/_torrents.scss
+++ b/client/source/sass/components/_torrents.scss
@@ -19,6 +19,7 @@ $torrent--background--hover: #f6f8fa;
 $torrent--background--selected: $blue;
 $torrent--background--error: #e95779;
 
+$more-info--background: #fff;
 $more-info--box-shadow--hue: #1a2f3d;
 $more-info--border: $textbox-repeater--button--border;
 
@@ -104,6 +105,7 @@ $more-info--border: $textbox-repeater--button--border;
     .torrent {
 
       &__more-info {
+        background: $more-info--background;
         opacity: 1;
         pointer-events: auto;
         transform: translateX(0);