diff --git a/.eslintrc b/.eslintrc
index 06ed7ddb93..6260aa925a 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -14,7 +14,8 @@
     "import/named": 0,
     "import/namespace": 0,
     "import/no-unresolved": 0,
-    "import/no-named-as-default": 2,
+    "import/no-named-as-default": 0,
+    "import/no-named-as-default-member": 0,
     "comma-dangle": 0,  // not sure why airbnb turned this on. gross!
     "indent": 0,
     "no-console": 0,
diff --git a/client/index.jsx b/client/index.jsx
index 6c2e2e40b7..6c12fa511b 100644
--- a/client/index.jsx
+++ b/client/index.jsx
@@ -21,19 +21,21 @@ const initialState = window.__INITIAL_STATE__;
 const store = configureStore(initialState);
 
 const App = () => (
-  <Provider store={store}>
-    <ThemeProvider>
-      <Router history={browserHistory}>
-        <SkipLink targetId="play-sketch" text="PlaySketch" />
-        <Routing />
-      </Router>
-    </ThemeProvider>
-  </Provider>
+  <>
+    <Router history={browserHistory}>
+      <SkipLink targetId="play-sketch" text="PlaySketch" />
+      <Routing />
+    </Router>
+  </>
 );
 
 render(
-  <Suspense fallback={<Loader />}>
-    <App />
-  </Suspense>,
+  <Provider store={store}>
+    <ThemeProvider>
+      <Suspense fallback={<Loader />}>
+        <App />
+      </Suspense>
+    </ThemeProvider>
+  </Provider>,
   document.getElementById('root')
 );
diff --git a/client/modules/App/components/loader.jsx b/client/modules/App/components/loader.jsx
index 3730642711..2d8f09f1cd 100644
--- a/client/modules/App/components/loader.jsx
+++ b/client/modules/App/components/loader.jsx
@@ -1,11 +1,55 @@
 import React from 'react';
+import styled, { keyframes } from 'styled-components';
+import { prop, remSize } from '../../../theme';
+
+const skBounce = keyframes`
+  0%, 100% {
+    transform: scale(0.0);
+  }
+  50% {
+    transform: scale(1.0);
+  }
+`;
+const Container = styled.div`
+  &&& {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: ${prop('backgroundColor')};
+  }
+`;
+const LoaderWrapper = styled.div`
+  &&& {
+    width: ${remSize(80)};
+    height: ${remSize(80)};
+    position: relative;
+  }
+`;
+const LoaderCircle = styled.div`
+  &&& {
+    width: 100%;
+    height: 100%;
+    border-radius: 80%;
+    background-color: ${prop('logoColor')};
+    opacity: 0.6;
+    position: absolute;
+    top: 0;
+    left: 0;
+    animation: ${skBounce} 2s infinite ease-in-out;
+    &:nth-child(2) {
+      animation-delay: -1s;
+    }
+  }
+`;
 
 const Loader = () => (
-  <div className="loader-container">
-    <div className="loader">
-      <div className="loader__circle1" />
-      <div className="loader__circle2" />
-    </div>
-  </div>
+  <Container>
+    <LoaderWrapper>
+      <LoaderCircle />
+      <LoaderCircle />
+    </LoaderWrapper>
+  </Container>
 );
 export default Loader;
diff --git a/client/styles/components/_loader.scss b/client/styles/components/_loader.scss
deleted file mode 100644
index b49160ec63..0000000000
--- a/client/styles/components/_loader.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-@use "sass:math";
-
-.loader-container {
-	width: 100%;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	@include themify() {
-		background-color: getThemifyVariable('background-color');
-	}
-}
-
-
-.loader {
-	width: #{math.div(80, $base-font-size) }rem;
-	height: #{math.div(80, $base-font-size)}rem;
-
-	position: relative;
-}
-
-.loader__circle1,
-.loader__circle2 {
-	width: 100%;
-	height: 100%;
-	border-radius: 80%;
-
-	@include themify() {
-		background-color: getThemifyVariable('logo-color');
-	}
-
-	opacity: 0.6;
-	position: absolute;
-	top: 0;
-	left: 0;
-	animation: sk-bounce 2.0s infinite ease-in-out;
-}
-
-.loader__circle2 {
-	animation-delay: -1.0s;
-}
-
-@keyframes sk-bounce {
-
-	0%,
-	100% {
-		transform: scale(0.0);
-	}
-
-	50% {
-		transform: scale(1.0);
-	}
-}
\ No newline at end of file
diff --git a/client/styles/main.scss b/client/styles/main.scss
index 53208a6b4f..75cc236904 100644
--- a/client/styles/main.scss
+++ b/client/styles/main.scss
@@ -46,7 +46,6 @@
 @import 'components/copyable-input';
 @import 'components/feedback';
 @import 'components/console-input';
-@import 'components/loader';
 @import 'components/uploader';
 @import 'components/tabs';
 @import 'components/dashboard-header';
diff --git a/client/theme.js b/client/theme.js
index 490255e45b..f7e907ec5c 100644
--- a/client/theme.js
+++ b/client/theme.js
@@ -75,6 +75,7 @@ const baseThemes = {
     inactiveTextColor: grays.middleDark,
     backgroundColor: grays.lighter,
     accentColor: colors.p5jsPink,
+    logoColor: colors.p5jsPink,
     modalBorderColor: grays.middleLight,
     searchBackgroundColor: grays.lightest,
     tableRowStripeColor: grays.mediumLight,
@@ -165,6 +166,7 @@ const baseThemes = {
     inactiveTextColor: grays.middleLight,
     backgroundColor: grays.darker,
     accentColor: colors.p5jsPink,
+    logoColor: colors.p5jsPink,
     modalBorderColor: grays.middleDark,
     searchBackgroundColor: grays.darker,
     tableRowStripeColor: grays.dark,
@@ -254,6 +256,7 @@ export default {
   ...baseThemes,
   [Theme.contrast]: extend(baseThemes[Theme.dark], {
     inactiveTextColor: grays.light,
+    logoColor: colors.yellow,
 
     Button: {
       primary: {