diff --git a/embark-ui/src/components/Console.css b/embark-ui/src/components/Console.css
new file mode 100644
index 00000000..2087d086
--- /dev/null
+++ b/embark-ui/src/components/Console.css
@@ -0,0 +1,13 @@
+.console-container {
+  padding-top: 5px;
+  padding-bottom: 15px;
+}
+
+.console-container .nav-link {
+  text-transform: capitalize;
+}
+
+.text__new-line, .card.warnings-card .list-group-item, .card.errors-card .list-group-item {
+  white-space: pre-wrap;
+  font-family: monospace;
+}
diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index 80b90b1f..a509f7bf 100644
--- a/embark-ui/src/components/Console.js
+++ b/embark-ui/src/components/Console.js
@@ -1,8 +1,10 @@
 import PropTypes from "prop-types";
 import React, {Component} from 'react';
+import Convert from 'ansi-to-html';
 import {Grid, Card, Form, Tab, TabbedHeader, TabbedContainer} from 'tabler-react';
 import Logs from "./Logs";
-import Convert from 'ansi-to-html';
+
+import "./Console.css";
 
 const convert = new Convert();
 
diff --git a/embark-ui/src/components/Loading.css b/embark-ui/src/components/Loading.css
new file mode 100644
index 00000000..e1147565
--- /dev/null
+++ b/embark-ui/src/components/Loading.css
@@ -0,0 +1,16 @@
+.loader, .loader:before, .loader:after {
+  width: 1.2rem;
+  height: 1.2rem;
+}
+
+.loader:before, .loader:after {
+  margin: -0.6rem 0 0 -0.6rem;
+  left: 0;
+}
+
+.loader, .loader-text {
+  display: inline-block;
+  vertical-align: top;
+  padding-left: 0.6rem;
+  width: auto;
+}
\ No newline at end of file
diff --git a/embark-ui/src/components/Loading.js b/embark-ui/src/components/Loading.js
index a142e5cc..b899533e 100644
--- a/embark-ui/src/components/Loading.js
+++ b/embark-ui/src/components/Loading.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import {Grid, Loader} from 'tabler-react';
 
+import "./Loading.css";
+
 const Loading = () => (
   <Grid.Row className="align-items-center h-100 mt-5">
     <Grid.Col>
diff --git a/embark-ui/src/components/Logs.css b/embark-ui/src/components/Logs.css
new file mode 100644
index 00000000..7843e5c2
--- /dev/null
+++ b/embark-ui/src/components/Logs.css
@@ -0,0 +1,27 @@
+.logs {
+  margin: 10px 0;
+  background-color: #333333;
+  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+  font-size: 14px;
+  color: white;
+  padding: 10px;
+  border-radius: 8px;
+  max-height: 350px;
+  overflow: auto;
+}
+
+.logs .error {
+  color: #dc3546;
+}
+
+.logs .warn {
+  color: #fec107;
+}
+
+.logs .debug {
+  color: #b7c1cc;
+}
+
+.logs .trace {
+  color: #8f98a2;
+}
\ No newline at end of file
diff --git a/embark-ui/src/components/Logs.js b/embark-ui/src/components/Logs.js
index d762a8cb..9767bf85 100644
--- a/embark-ui/src/components/Logs.js
+++ b/embark-ui/src/components/Logs.js
@@ -1,6 +1,8 @@
 import React from 'react';
 import autoscroll from 'autoscroll-react';
 
+import "./Logs.css";
+
 class Logs extends React.Component {
   render() {
     return (
diff --git a/embark-ui/src/components/Preview.js b/embark-ui/src/components/Preview.js
index a63153eb..876d9590 100644
--- a/embark-ui/src/components/Preview.js
+++ b/embark-ui/src/components/Preview.js
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import {Form, Button} from 'tabler-react';
 
@@ -7,7 +6,7 @@ class Preview extends React.Component {
     super(props);
 
     this.state = {
-      previewUrl: this.props.previewUrl
+      previewUrl: `${window.location.protocol}//${window.location.host}/`
     };
   }
 
@@ -49,13 +48,5 @@ class Preview extends React.Component {
   }
 }
 
-Preview.propTypes = {
-  previewUrl: PropTypes.string
-};
-
-Preview.defaultProps = {
-  previewUrl: window.location.protocol + '//' + window.location.host
-};
-
 export default Preview;
 
diff --git a/embark-ui/src/index.css b/embark-ui/src/index.css
index 5073f69d..2b82fb68 100644
--- a/embark-ui/src/index.css
+++ b/embark-ui/src/index.css
@@ -2,48 +2,6 @@
   overflow-x: unset;
 }
 
-.logs {
-  margin: 10px 0;
-  background-color: #333333;
-  font-family: Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-  font-size: 14px;
-  color: white;
-  padding: 10px;
-  border-radius: 8px;
-  max-height: 350px;
-  overflow: auto;
-}
-
-.logs .error {
-  color: #dc3546;
-}
-
-.logs .warn {
-  color: #fec107;
-}
-
-.logs .debug {
-  color: #b7c1cc;
-}
-
-.logs .trace {
-  color: #8f98a2;
-}
-
-.console-container {
-  padding-top: 5px;
-  padding-bottom: 15px;
-}
-
-.console-container .nav-link {
-  text-transform: capitalize;
-}
-
-.text__new-line, .card.warnings-card .list-group-item, .card.errors-card .list-group-item {
-  white-space: pre-wrap;
-  font-family: monospace;
-}
-
 .card.card-fullscreen {
   z-index: 6;
 }
@@ -54,39 +12,4 @@
 
 .card.warnings-card .card-options a, .card.errors-card .card-options a {
   cursor: pointer;
-}
-
-.compilation-summary {
-  float: right;
-  margin-bottom: 3px;
-  visibility: hidden;
-}
-
-.compilation-summary.visible {
-  visibility: visible;
-}
-
-.compilation-summary .badge-link:not(:last-child) {
-  margin-right: 5px;
-}
-
-.ace_editor {
-  margin-bottom: 24px;
-}
-
-.loader, .loader:before, .loader:after {
-  width: 1.2rem;
-  height: 1.2rem;
-}
-
-.loader:before, .loader:after {
-  margin: -0.6rem 0 0 -0.6rem;
-  left: 0;
-}
-
-.loader, .loader-text {
-  display: inline-block;
-  vertical-align: top;
-  padding-left: 0.6rem;
-  width: auto;
 }
\ No newline at end of file