diff --git a/src/codemirror-maputnik.css b/src/codemirror-maputnik.css
deleted file mode 100644
index b43c6c0f..00000000
--- a/src/codemirror-maputnik.css
+++ /dev/null
@@ -1,57 +0,0 @@
-.cm-s-maputnik.CodeMirror {
-  height: 100%;
-  font-size: 12px;
-}
-
-.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
-  color: #8e8e8e;
-  border: none;
-}
-
-.cm-s-maputnik.CodeMirror {
-  background: transparent;
-}
-
-.cm-s-maputnik .CodeMirror-gutters {
-  background: #212328;
-}
-
-.cm-s-maputnik .CodeMirror-cursor {
-    border-left: solid thin #f0f0f0 !important;
-}
-
-.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::selection,
-.cm-s-maputnik .CodeMirror-line > span::selection,
-.cm-s-maputnik .CodeMirror-line > span > span::selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik .CodeMirror-line::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span::-moz-selection,
-.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
-  background: rgba(255, 255, 255, 0.10);
-}
-
-.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
-  color: #8f9d6a;
-}
-.cm-s-maputnik span.cm-number { color: #91675f; }
-.cm-s-maputnik span.cm-property { color: #b8a077; }
-
-.cm-s-maputnik .CodeMirror-activeline-background {
-  background: rgba(255,255,255,0.1);
-}
-
-.cm-s-maputnik .CodeMirror-matchingbracket {
-  background-color: #f0f0f0;  
-  color: #565659 !important;
-}
-
-.cm-s-maputnik .CodeMirror-nonmatchingbracket {
-  background-color: #bb0000;  
-  color: white !important;
-}
diff --git a/src/components/layers/JSONEditor.jsx b/src/components/layers/JSONEditor.jsx
index 393eb618..1793d089 100644
--- a/src/components/layers/JSONEditor.jsx
+++ b/src/components/layers/JSONEditor.jsx
@@ -11,7 +11,6 @@ import 'codemirror/addon/lint/lint'
 import 'codemirror/addon/edit/matchbrackets'
 import 'codemirror/lib/codemirror.css'
 import 'codemirror/addon/lint/lint.css'
-import '../../codemirror-maputnik.css'
 import jsonlint from 'jsonlint'
 import stringifyPretty from 'json-stringify-pretty-compact'
 
diff --git a/src/styles/_codemirror.scss b/src/styles/_codemirror.scss
index 14cb415a..4270311b 100644
--- a/src/styles/_codemirror.scss
+++ b/src/styles/_codemirror.scss
@@ -7,3 +7,58 @@
   position: relative;
   overflow: auto;
 }
+
+.cm-s-maputnik.CodeMirror {
+  height: 100%;
+  font-size: 12px;
+  background: transparent;
+}
+
+.cm-s-maputnik.CodeMirror, .cm-s-maputnik .CodeMirror-gutters {
+  color: #8e8e8e;
+  border: none;
+}
+
+.cm-s-maputnik .CodeMirror-gutters {
+  background: #212328;
+}
+
+.cm-s-maputnik .CodeMirror-cursor {
+    border-left: solid thin #f0f0f0 !important;
+}
+
+.cm-s-maputnik.CodeMirror-focused div.CodeMirror-selected {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-maputnik .CodeMirror-line::selection,
+.cm-s-maputnik .CodeMirror-line > span::selection,
+.cm-s-maputnik .CodeMirror-line > span > span::selection {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-maputnik .CodeMirror-line::-moz-selection,
+.cm-s-maputnik .CodeMirror-line > span::-moz-selection,
+.cm-s-maputnik .CodeMirror-line > span > span::-moz-selection {
+  background: rgba(255, 255, 255, 0.10);
+}
+
+.cm-s-maputnik span.cm-string, .cm-s-maputnik span.cm-string-2 {
+  color: #8f9d6a;
+}
+.cm-s-maputnik span.cm-number { color: #91675f; }
+.cm-s-maputnik span.cm-property { color: #b8a077; }
+
+.cm-s-maputnik .CodeMirror-activeline-background {
+  background: rgba(255,255,255,0.1);
+}
+
+.cm-s-maputnik .CodeMirror-matchingbracket {
+  background: hsla(223, 12%, 35%, 1);
+  color: $color-white !important;
+}
+
+.cm-s-maputnik .CodeMirror-nonmatchingbracket {
+  background-color: #bb0000;
+  color: white !important;
+}
diff --git a/src/styles/_components.scss b/src/styles/_components.scss
index b985f8e8..411f5e53 100644
--- a/src/styles/_components.scss
+++ b/src/styles/_components.scss
@@ -1,16 +1,13 @@
 // MAP
 .maputnik-map__container {
+  background: white;
   display: flex;
   position: fixed !important;
   top: $toolbar-height + $toolbar-offset;
   right: 0;
   bottom: 0;
   height: calc(100% - #{$toolbar-height + $toolbar-offset});
-  width: calc(
-    100%
-    - 200px /* layer list */
-    - 350px /* layer editor */
-  );
+  width: $layout-map-width;
 
   &--error {
     align-items: center;
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index e0f00ad7..f3db7eb1 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -40,9 +40,9 @@
     position: fixed;
     height: 50px;
     bottom: 0;
-    left: 550px;
+    right: 0;
     z-index: 1;
-    width: 100%;
+    width: $layout-map-width;
     background-color: $color-black;
   }
 }
diff --git a/src/styles/_vars.scss b/src/styles/_vars.scss
index 7cb3d178..4a9cc098 100644
--- a/src/styles/_vars.scss
+++ b/src/styles/_vars.scss
@@ -21,3 +21,7 @@ $font-family: Roboto, sans-serif;
 $toolbar-height: 40px;
 $toolbar-offset: 0;
 
+$layout-list-width: 200px;
+$layout-editor-width: 370px;
+$layout-map-width: calc(100% - #{$layout-list-width + $layout-editor-width});
+