diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 00000000..34594923
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1 @@
+app/reset.scss
diff --git a/app/animated_checkmark.scss b/app/animated_checkmark.scss
index 48c9e0db..5ef7cc0b 100644
--- a/app/animated_checkmark.scss
+++ b/app/animated_checkmark.scss
@@ -1,4 +1,4 @@
-$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
+$curve: cubic-bezier(0.65, 0, 0.45, 1);
 
 .checkmark__circle {
   stroke-dasharray: 166;
@@ -7,7 +7,7 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   stroke-miterlimit: 10;
   stroke: $green;
   fill: none;
-  animation: stroke .6s $curve forwards;
+  animation: stroke 0.6s $curve forwards;
 }
 
 .checkmark {
@@ -17,15 +17,15 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
   stroke-width: 2;
   stroke: #fff;
   stroke-miterlimit: 10;
-  box-shadow: inset 0px 0px 0px $green;
-  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s both;
+  box-shadow: inset 0 0 0 $green;
+  animation: fill 0.4s ease-in-out 0.4s forwards, scale 0.3s ease-in-out 0.9s both;
 }
 
 .checkmark__check {
   transform-origin: 50% 50%;
   stroke-dasharray: 48;
   stroke-dashoffset: 48;
-  animation: stroke .3s $curve .8s forwards;
+  animation: stroke 0.3s $curve 0.8s forwards;
 }
 
 @keyframes stroke {
@@ -35,9 +35,11 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
 }
 
 @keyframes scale {
-  0%, 100% {
+  0%,
+  100% {
     transform: none;
   }
+
   50% {
     transform: scale3d(1.1, 1.1, 1);
   }
@@ -45,6 +47,6 @@ $curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
 
 @keyframes fill {
   100% {
-    box-shadow: inset 0px 0px 0px 30px $green;
+    box-shadow: inset 0 0 0 30px $green;
   }
-}
\ No newline at end of file
+}
diff --git a/app/app.global.scss b/app/app.global.scss
index e24fe2be..f026e4fb 100644
--- a/app/app.global.scss
+++ b/app/app.global.scss
@@ -20,13 +20,16 @@ body {
   height: 100vh;
   box-sizing: border-box;
   -webkit-font-smoothing: antialiased;
-  -webkit-tap-highlight-color: rgba(255,255,255,0);
-  font-family: 'Roboto';
+  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
+  font-family: 'Roboto', Arial, Helvetica, sans-serif;
 }
 
 // disable the pinball scrollers for windows
-*, input[type=text], input[type=number] {
-  &::-webkit-inner-spin-button, &::-webkit-outer-spin-button {
+*,
+input[type=text],
+input[type=number] {
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
     -webkit-appearance: none;
   }
 }
@@ -60,15 +63,18 @@ body {
     opacity: 1;
     stroke: $main;
   }
-  15%{
+
+  15% {
     opacity: 1;
     stroke: $main;
   }
-  70%{
+
+  70% {
     opacity: 1;
     stroke: $main;
   }
-  100%{
+
+  100% {
     stroke-dashoffset: 0;
     opacity: 1;
     stroke: darken($main, 10%);
@@ -83,26 +89,19 @@ body {
 
 // buttons
 
-.buttonPrimary, .buttonSecondary {
+.buttonPrimary,
+.buttonSecondary {
   -webkit-user-select: none;
   cursor: pointer;
   display: block;
-  padding-left: 30px;
-  padding-right: 30px;
-  padding-top: 18px;
-  padding-bottom: 15px;
+  padding: 18px 30px 15px;
   border-radius: 2px;
   text-align: center;
   font-size: 16px;
   letter-spacing: 1.5px;
   transition: none;
   position: relative;
-  color: white;
-
-  &:active {
-   transform: translate(0px, 3px);
-   outline: 0;
-  }
+  color: $white;
 }
 
 .buttonPrimary {
@@ -110,7 +109,7 @@ body {
   box-shadow: 0 3px 0 0 darken($main, 10%);
 
   &:active {
-   box-shadow: inset 0 1px 1px 1px darken($main, 10%);
+    box-shadow: inset 0 1px 1px 1px darken($main, 10%);
   }
 }
 
@@ -129,10 +128,16 @@ body {
   box-shadow: 0 3px 0 0 darken($secondary, 10%);
 
   &:active {
-   box-shadow: inset 0 1px 1px 1px darken($secondary, 10%);
+    box-shadow: inset 0 1px 1px 1px darken($secondary, 10%);
   }
 }
 
+.buttonPrimary:active,
+.buttonSecondary:active {
+  transform: translate(0, 3px);
+  outline: 0;
+}
+
 .buttonContainer.circleContainer {
   display: inline-block;
   width: auto;
@@ -162,7 +167,7 @@ body {
 
 .buttonContainer .small.active {
   box-shadow: inset 0 1px 1px 1px #1f4b2e;
-  transform: translate(0px, 3px);
+  transform: translate(0, 3px);
   outline: 0;
   background: #002280;
 }
@@ -181,9 +186,9 @@ body {
 }
 
 // each node in the map
-.network-node {
-
-}
+// .network-node {
+//
+// }
 
 // each channel in the map
 .network-link {
@@ -191,12 +196,12 @@ body {
 }
 
 .active-peer {
-  fill: #5589F3;
+  fill: #5589f3;
 }
 
 .active-channel {
   opacity: 1;
-  stroke: #88D4A2;
+  stroke: #88d4a2;
   stroke-width: 15;
   stroke-dasharray: 100;
   animation: dash 2.5s infinite linear;
diff --git a/app/keyframes.scss b/app/keyframes.scss
index c5317b88..a9c3dc3a 100644
--- a/app/keyframes.scss
+++ b/app/keyframes.scss
@@ -2,13 +2,15 @@
 
 @keyframes fadeinOutD6 {
   0% {
-      transform: rotate(0deg);
+    transform: rotate(0deg);
   }
+
   50% {
-      transform: rotate(6deg);
+    transform: rotate(6deg);
   }
+
   100% {
-      transform: rotate(0deg);
+    transform: rotate(0deg);
   }
 }
 
@@ -16,28 +18,30 @@
   0% {
     transform: rotate(0deg);
   }
+
   50% {
     transform: rotate(13deg);
   }
+
   100% {
     transform: rotate(0deg);
   }
 }
 
 @keyframes colorchange {
-  0%   { color: $white; }
-  25%  { color: $gold; }
-  50%  { color: $white; }
-  75%  { color: $gold; }
+  0% { color: $white; }
+  25% { color: $gold; }
+  50% { color: $white; }
+  75% { color: $gold; }
   100% { color: $white; }
 }
 
 @keyframes spin {
-    from {
-      transform:rotate(0deg)
-    }
-    
-    to {
-      transform:rotate(360deg);
-    }
-}
\ No newline at end of file
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/app/tooltip.scss b/app/tooltip.scss
index 6ca18e7a..a24af73e 100644
--- a/app/tooltip.scss
+++ b/app/tooltip.scss
@@ -1,10 +1,12 @@
 /* Tooltips */
 [data-hint] {
   position: relative;
-  /*display: inline-block;*/
+
+  // display: inline-block;
 }
-[data-hint]:before,
-[data-hint]:after {
+
+[data-hint]::before,
+[data-hint]::after {
   position: absolute;
   will-change: transform;
   visibility: hidden;
@@ -14,19 +16,16 @@
   transition: 0.2s ease;
   transition-delay: 0ms;
 }
-[data-hint]:hover:before,
-[data-hint]:hover:after {
-  visibility: visible;
-  opacity: 1;
-}
-[data-hint]:before {
+
+[data-hint]::before {
   content: '';
   position: absolute;
   background: transparent;
   border: 6px solid transparent;
   z-index: 900006;
 }
-[data-hint]:after {
+
+[data-hint]::after {
   content: attr(data-hint);
   background: #404040;
   color: #e0e0e0;
@@ -40,94 +39,122 @@
   font-size: 12px;
   font-weight: normal;
   font-style: inherit;
-  font-family: 'Noto Sans','Lucida Grande','Lucida Sans Unicode',Geneva,Verdana,Sans-Serif;
+  font-family: 'Noto Sans', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, Sans-Serif;
+}
+
+[data-hint]:hover::before,
+[data-hint]:hover::after {
+  visibility: visible;
+  opacity: 1;
 }
-.hint--bottom:before,
-.hint--bottom-left:before {
+
+.hint--bottom::before,
+.hint--bottom-left::before {
   border-bottom-color: #404040;
 }
-.hint--top:before,
-.hint--top-left:before {
+
+.hint--top::before,
+.hint--top-left::before {
   border-top-color: #404040;
 }
-.hint--bottom:before {
+
+.hint--bottom::before {
   margin-top: -12px;
 }
-.hint--bottom:after {
+
+.hint--bottom::after {
   margin-left: -18px;
 }
-.hint--bottom:before,
-.hint--bottom:after {
+
+.hint--bottom::before,
+.hint--bottom::after {
   top: 100%;
   left: 50%;
 }
-.hint--bottom:hover:after,
-.hint--bottom:hover:before {
+
+.hint--bottom:hover::after,
+.hint--bottom:hover::before {
   -webkit-transform: translateY(8px);
   transform: translateY(8px);
 }
-.hint--top:before {
+
+.hint--top::before {
   margin-bottom: -12px;
 }
-.hint--top:after {
+
+.hint--top::after {
   margin-left: -18px;
 }
-.hint--top:before,
-.hint--top:after {
+
+.hint--top::before,
+.hint--top::after {
   bottom: 100%;
   left: 50%;
 }
-.hint--top:hover:after,
-.hint--top:hover:before {
+
+.hint--top:hover::after,
+.hint--top:hover::before {
   -webkit-transform: translateY(-8px);
   transform: translateY(-8px);
 }
-.hint--top-left:before {
+
+.hint--top-left::before {
   margin-bottom: -12px;
 }
-.hint--top-left:after {
+
+.hint--top-left::after {
   margin-right: -6px;
 }
-.hint--top-left:before,
-.hint--top-left:after {
+
+.hint--top-left::before,
+.hint--top-left::after {
   bottom: 100%;
   right: 30%;
 }
-.hint--top-left:hover:after,
-.hint--top-left:hover:before {
+
+.hint--top-left:hover::after,
+.hint--top-left:hover::before {
   -webkit-transform: translateY(-8px);
   transform: translateY(-8px);
 }
-.hint--bottom-left:before {
+
+.hint--bottom-left::before {
   margin-top: -12px;
 }
-.hint--bottom-left:after {
+
+.hint--bottom-left::after {
   margin-right: -6px;
 }
-.hint--bottom-left:before,
-.hint--bottom-left:after {
+
+.hint--bottom-left::before,
+.hint--bottom-left::after {
   top: 100%;
   right: 30%;
 }
-.hint--bottom-left:hover:after,
-.hint--bottom-left:hover:before {
+
+.hint--bottom-left:hover::after,
+.hint--bottom-left:hover::before {
   -webkit-transform: translateY(8px);
   transform: translateY(8px);
 }
-.hint--left:before {
+
+.hint--left::before {
   margin-right: -12px;
   margin-top: -6px;
 }
-.hint--left:after {
+
+.hint--left::after {
   margin-right: -14px;
 }
-.hint--left:before,
-.hint--left:after {
+
+.hint--left::before,
+.hint--left::after {
   right: 100%;
   bottom: 50%;
 }
-.hint--left:hover:after,
-.hint--left:hover:before {
+
+.hint--left:hover::after,
+.hint--left:hover::before {
   -webkit-transform: translateX(-8px);
   transform: translateX(-8px);
 }
diff --git a/app/variables.scss b/app/variables.scss
index 1da936ab..510ef096 100644
--- a/app/variables.scss
+++ b/app/variables.scss
@@ -4,21 +4,21 @@ $black: #000;
 $main: #ebb864;
 $secondary: #1d1d1d;
 $grey: #f2f2f2;
-$traditionalgrey: #cccccc;
-$lightgrey: #F7F7F7;
-$darkgrey: #EBEBEB;
-$darkestgrey: #999999;
-$bluegrey: #2A2D38;
-$spacegrey: #222E2B;
+$traditionalgrey: #ccc;
+$lightgrey: #f7f7f7;
+$darkgrey: #ebebeb;
+$darkestgrey: #999;
+$bluegrey: #2a2d38;
+$spacegrey: #222e2b;
 $spaceblue: #252832;
 $darkspaceblue: #1c1e26;
 $spaceborder: #404040;
 
-$gold: #DEA326;
+$gold: #dea326;
 $green: #0bb634;
-$terminalgreen: #00FF00;
-$red: #FF556A;
+$terminalgreen: #0f0;
+$red: #ff556a;
 $blue: #007bb6;
-$orange: #FF8A65;
-$yellow: #FFF680;
-$curve: cubic-bezier(0.650, 0.000, 0.450, 1.000);
\ No newline at end of file
+$orange: #ff8a65;
+$yellow: #fff680;
+$curve: cubic-bezier(0.65, 0, 0.45, 1);
diff --git a/package.json b/package.json
index bb44ab86..8419f0c7 100644
--- a/package.json
+++ b/package.json
@@ -189,8 +189,8 @@
     "sinon": "^2.3.5",
     "spectron": "^3.7.0",
     "style-loader": "^0.18.1",
-    "stylelint": "^7.12.0",
-    "stylelint-config-standard": "^16.0.0",
+    "stylelint": "^9.1.1",
+    "stylelint-config-standard": "^18.2.0",
     "url-loader": "^0.5.8",
     "webpack": "^3.7.1",
     "webpack-bundle-analyzer": "^2.8.2",