diff --git a/packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js b/packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js
index 43500059..bc6dce58 100644
--- a/packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    border: solid 1px #e1e1e1;
+    border: solid 1px var(--color-codemirror-border);
     height: 96%;
   }
 
diff --git a/packages/grafnode-components/src/components/QueryUrl/StyledWrapper.js b/packages/grafnode-components/src/components/QueryUrl/StyledWrapper.js
index 653ed4a1..b01366b6 100644
--- a/packages/grafnode-components/src/components/QueryUrl/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/QueryUrl/StyledWrapper.js
@@ -4,21 +4,21 @@ const Wrapper = styled.div`
   height: 2.3rem;
 
   div.method-selector {
-    border: solid 1px #cfcfcf;
+    border: solid 1px var(--color-layout-border);
     border-right: none;
-    background-color: #f3f3f3;
+    background-color: var(--color-sidebar-background);
     border-top-left-radius: 3px;
     border-bottom-left-radius: 3px;
   }
 
   div.input-container {
-    border: solid 1px #cfcfcf;
-    background-color: #f3f3f3;
+    border: solid 1px var(--color-layout-border);
+    background-color: var(--color-sidebar-background);
     border-top-right-radius: 3px;
     border-bottom-right-radius: 3px;
 
     input {
-      background-color: #f3f3f3;
+      background-color: var(--color-sidebar-background);
       outline: none;
       box-shadow: none;
 
diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js
index 0b6f2394..839da3ca 100644
--- a/packages/grafnode-components/src/components/RequestTabPanel/index.js
+++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js
@@ -107,7 +107,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
       <div
         className="pb-4 px-4"
         style={{
-          borderBottom: 'solid 1px #e1e1e1'
+          borderBottom: 'solid 1px var(--color-layout-border)'
         }}
       >
         <div className="pt-2 text-gray-600">{item.name}</div>
diff --git a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
index a9cf5d38..072d6b11 100644
--- a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
@@ -6,7 +6,7 @@ const Wrapper = styled.div`
     padding: 0;
     margin: 0 0 10px;
     padding-left: 1rem;
-    border-bottom: 1px solid #cfcfcf;
+    border-bottom: 1px solid var(--color-layout-border);
 
     li {
       display: inline-flex;
@@ -31,7 +31,7 @@ const Wrapper = styled.div`
       }
 
       &.active {
-        border-color: #cfcfcf;
+        border-color: var(--color-layout-border);
         background: #fff;
         border-radius: 5px 5px 0 0;
 
diff --git a/packages/grafnode-components/src/components/RequestTabs/index.js b/packages/grafnode-components/src/components/RequestTabs/index.js
index fd0bf597..89958285 100644
--- a/packages/grafnode-components/src/components/RequestTabs/index.js
+++ b/packages/grafnode-components/src/components/RequestTabs/index.js
@@ -49,7 +49,7 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
   };
 
   return (
-    <StyledWrapper className="mt-3 flex items-center">
+    <StyledWrapper className="mt-2 flex items-center">
       {requestTabs && requestTabs.length ? (
         <ul role="tablist">
           {requestTabs && requestTabs.length ? requestTabs.map((rt, index) => {
diff --git a/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js b/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
index 54789bf2..c2938883 100644
--- a/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/ResponsePane/QueryResult/StyledWrapper.js
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
   div.CodeMirror {
-    border: solid 1px #e1e1e1;
+    border: solid 1px var(--color-codemirror-border);
   }
 
   div.overlay{
diff --git a/packages/grafnode-run/src/globalStyles.js b/packages/grafnode-run/src/globalStyles.js
index eb800ddf..d36372eb 100644
--- a/packages/grafnode-run/src/globalStyles.js
+++ b/packages/grafnode-run/src/globalStyles.js
@@ -2,7 +2,8 @@ import { createGlobalStyle } from 'styled-components';
 
 const GlobalStyle = createGlobalStyle`
   .CodeMirror-gutters {
-    background-color: #f6f8fa;
+    background-color: var(--color-codemirror-background);
+    border-right: solid 1px var(--color-codemirror-border);
   }
 
   .grafnode-form {
diff --git a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
index 119c45a9..3a76c3b0 100644
--- a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
+++ b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
@@ -9,7 +9,7 @@ const Wrapper = styled.div`
   aside {
     min-width: 230px;
     width: 230px;
-    border-right: solid 1px #e1e1e1;
+    border-right: solid 1px var(--color-layout-border);
     background-color: #F6F8FA;
   }
 
@@ -25,7 +25,7 @@ const Wrapper = styled.div`
     width: 1px;
     padding: 0;
     cursor: col-resize;
-    background: #e1e1e1;
+    background: var(--color-request-dragbar-background);
 
     &:hover {
       background: silver;
diff --git a/packages/grafnode-run/src/styles/globals.css b/packages/grafnode-run/src/styles/globals.css
index 5a639528..5c44e01c 100644
--- a/packages/grafnode-run/src/styles/globals.css
+++ b/packages/grafnode-run/src/styles/globals.css
@@ -1,3 +1,15 @@
+
+:root {
+  --color-brand: #546de5;
+  --color-sidebar-collection-item-focused-indent-border: #7b8de3;
+  --color-sidebar-background: #f6f8fa;
+  --color-request-dragbar-background: #e2e2e2;
+  --color-tab-active-border: #4d4d4d;
+  --color-layout-border: #dedede;
+  --color-codemirror-border: #efefef;
+  --color-codemirror-background: #f6f8fa;
+}
+
 html, body {
   margin: 0;
   padding: 0;
@@ -15,8 +27,15 @@ body {
   font-size: 0.875rem;
 }
 
-:root {
-  --color-brand: #546de5;
-  --color-sidebar-collection-item-focused-indent-border: #7b8de3;
-  --color-tab-active-border: #4d4d4d;
+body::-webkit-scrollbar, .CodeMirror-vscrollbar::-webkit-scrollbar {
+  width: 0.6rem;
+}
+ 
+body::-webkit-scrollbar-track, .CodeMirror-vscrollbar::-webkit-scrollbar-track {
+  background-color: #f1f1f1;
+}
+ 
+body::-webkit-scrollbar-thumb, .CodeMirror-vscrollbar::-webkit-scrollbar-thumb {
+  background-color: #cdcdcd;
+  border-radius: 5rem;
 }
\ No newline at end of file