diff --git a/packages/grafnode-components/src/components/Navbar/StyledWrapper.js b/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
index 195b0632f..4a4d12302 100644
--- a/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
@@ -1,6 +1,20 @@
 import styled from 'styled-components';
 
 const StyledWrapper = styled.div`
+  .collection-dropdown {
+    color: rgb(110 110 110);
+
+    &:hover {
+      color: inherit;
+    }
+
+    .tippy-box {
+      top: -0.5rem;
+      position: relative;
+      user-select: none;
+    }
+  }
+  
 `;
 
 export default StyledWrapper;
\ No newline at end of file
diff --git a/packages/grafnode-components/src/components/Navbar/index.js b/packages/grafnode-components/src/components/Navbar/index.js
index 59415f8de..635f2236c 100644
--- a/packages/grafnode-components/src/components/Navbar/index.js
+++ b/packages/grafnode-components/src/components/Navbar/index.js
@@ -1,15 +1,49 @@
-import React from 'react';
-import { IconLayoutGrid } from '@tabler/icons';
+import React, { useState, forwardRef, useRef } from 'react';
+import Dropdown from '../Dropdown';
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { IconBox, IconSearch, IconDots } from '@tabler/icons';
 import StyledWrapper from './StyledWrapper';
 
 const Navbar = () => {
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const menuDropdownTippyRef = useRef();
+  const onMenuDropdownCreate = (ref) => menuDropdownTippyRef.current = ref;
+  const MenuIcon = forwardRef((props, ref) => {
+    return (
+      <div ref={ref} className="dropdown-icon cursor-pointer">
+        <IconDots size={22}/>
+      </div>
+    );
+  });
+
   return (
     <StyledWrapper className="px-2 py-2 flex items-center">
-      <IconLayoutGrid size={20} strokeWidth={1.5}/>
-      <span className="ml-2">My Workspace</span>
-      <FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
+      <div>
+        <span className="ml-2">My Workspace</span>
+        <FontAwesomeIcon className="ml-2" icon={faCaretDown} style={{fontSize: 13}}/>
+      </div>
+      <div className="collection-dropdown flex flex-grow items-center justify-end">
+        <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+            setModalOpen(true);
+          }}>
+            Create Collection
+          </div>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+          }}>
+            Import Collection
+          </div>
+          <div className="dropdown-item" onClick={(e) => {
+            menuDropdownTippyRef.current.hide();
+          }}>
+            Settings
+          </div>
+        </Dropdown>
+      </div>
     </StyledWrapper>
   )
 };
diff --git a/packages/grafnode-components/src/components/RequestTabPanel/index.js b/packages/grafnode-components/src/components/RequestTabPanel/index.js
index 2c611d4e8..a259c001c 100644
--- a/packages/grafnode-components/src/components/RequestTabPanel/index.js
+++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js
@@ -18,13 +18,12 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
     return <div></div>;
   }
 
-  let asideWidth = 230;
+  let asideWidth = 270;
   let {
     schema 
   } = useGraphqlSchema('https://api.spacex.land/graphql');
   const [leftPaneWidth, setLeftPaneWidth] = useState((window.innerWidth - asideWidth)/2 - 10); // 10 is for dragbar
   const [rightPaneWidth, setRightPaneWidth] = useState((window.innerWidth - asideWidth)/2);
-  console.log((window.innerWidth - asideWidth)/2);
   const [dragging, setDragging] = useState(false);
   const handleMouseMove = (e) => {
     if(dragging) {
@@ -64,7 +63,6 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
   };
 
   const onGraphqlQueryChange = (value) => {
-    console.log(value);
     dispatch({
       type: actions.REQUEST_GQL_QUERY_CHANGED,
       query: value,
diff --git a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
index 77b84fd21..2794f5cc4 100644
--- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js
@@ -32,20 +32,14 @@ const Wrapper = styled.div`
     }
 
     &.item-focused-in-tab {
-      background: var(--color-brand);
-      color: white;
+      background: var(--color-sidebar-collection-item-active-background);
 
       &:hover {
-        background: var(--color-brand) !important;
-        color: white !important;
-      }
-
-      .menu-icon {
-        color: white !important;
+        background: var(--color-sidebar-collection-item-active-background) !important;
       }
 
       .indent-block {
-        border-right: solid 1px var(--color-sidebar-collection-item-focused-indent-border);
+        border-right: solid 1px var(--color-sidebar-collection-item-active-indent-border);
       }
     }
 
diff --git a/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js
new file mode 100644
index 000000000..e9980f196
--- /dev/null
+++ b/packages/grafnode-components/src/components/Sidebar/MenuBar/StyledWrapper.js
@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+const Wrapper = styled.div`
+  background-color: rgb(44, 44, 44);
+  color: rgba(255, 255, 255, 0.5);
+
+  .menu-item {
+    padding: 0.6rem;
+    cursor: pointer;
+
+    &:hover, &.active {
+      color: rgba(255, 255, 255);
+    }
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js b/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js
new file mode 100644
index 000000000..b43707651
--- /dev/null
+++ b/packages/grafnode-components/src/components/Sidebar/MenuBar/index.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import { IconCode, IconStack, IconGitPullRequest, IconUser, IconUsers, IconSettings, IconLayoutGrid } from '@tabler/icons';
+import StyledWrapper from './StyledWrapper';
+
+const MenuBar = () => {
+  return (
+    <StyledWrapper className="h-full flex flex-col">
+      <div className="flex flex-col">
+        <div className="menu-item active">
+          <IconCode size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconStack size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconGitPullRequest size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconUsers size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconLayoutGrid size={28} strokeWidth={1.5}/>
+        </div>
+      </div>
+      <div className="flex flex-col flex-grow justify-end">
+        <div className="menu-item">
+          <IconUser size={28} strokeWidth={1.5}/>
+        </div>
+        <div className="menu-item">
+          <IconSettings size={28} strokeWidth={1.5}/>
+        </div>
+      </div>
+    </StyledWrapper>
+  );
+};
+
+export default MenuBar;
\ No newline at end of file
diff --git a/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js b/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js
index 6ef7bda54..d3eca4ed1 100644
--- a/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/StyledWrapper.js
@@ -1,6 +1,11 @@
 import styled from 'styled-components';
 
 const Wrapper = styled.aside`
+  min-width: 270px;
+  width: 270px;
+  /* background-color: #F6F8FA; */
+  background-color: var(--color-sidebar-background);
+
   .collection-title {
     line-height: 1.5;
     .collection-dropdown {
diff --git a/packages/grafnode-components/src/components/Sidebar/index.js b/packages/grafnode-components/src/components/Sidebar/index.js
index 1dc35a590..fbdcbec87 100644
--- a/packages/grafnode-components/src/components/Sidebar/index.js
+++ b/packages/grafnode-components/src/components/Sidebar/index.js
@@ -1,6 +1,7 @@
 import React, { useState, forwardRef, useRef } from 'react';
 import Collections from './Collections';
 import CreateCollection from './CreateCollection';
+import MenuBar from './MenuBar';
 import Navbar from '../Navbar';
 import Dropdown from '../Dropdown';
 import { IconBox, IconSearch, IconDots } from '@tabler/icons';
@@ -24,7 +25,6 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
   };
 
   const handleConfirm = (values) => {
-    console.log(values);
     dispatch({
       name: values.collectionName,
       type: actions.COLLECTION_CREATE
@@ -43,54 +43,59 @@ const Sidebar = ({collections, actions, dispatch, activeRequestTabId}) => {
         />
       ) : null}
 
-      <Navbar />
+      <div className="flex flex-row h-full">
+        <MenuBar />
 
-      <div className="mt-4 px-2 py-1 flex collection-title">
-        <IconBox size={22} strokeWidth={1.5}/>
-        <span className="ml-2">Collections</span>
-        <div className="collection-dropdown flex flex-grow items-center justify-end">
-          <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
-            <div className="dropdown-item" onClick={(e) => {
-              menuDropdownTippyRef.current.hide();
-              setModalOpen(true);
-            }}>
-              Create Collection
+        <div>
+          <Navbar />
+
+          <div className="mt-4 px-2 py-1 flex collection-title hidden">
+            <span className="ml-2">Collections</span>
+            <div className="collection-dropdown flex flex-grow items-center justify-end">
+              <Dropdown onCreate={onMenuDropdownCreate} icon={<MenuIcon />} placement='bottom-start'>
+                <div className="dropdown-item" onClick={(e) => {
+                  menuDropdownTippyRef.current.hide();
+                  setModalOpen(true);
+                }}>
+                  Create Collection
+                </div>
+                <div className="dropdown-item" onClick={(e) => {
+                  menuDropdownTippyRef.current.hide();
+                }}>
+                  Import Collection
+                </div>
+                <div className="dropdown-item" onClick={(e) => {
+                  menuDropdownTippyRef.current.hide();
+                }}>
+                  Settings
+                </div>
+              </Dropdown>
             </div>
-            <div className="dropdown-item" onClick={(e) => {
-              menuDropdownTippyRef.current.hide();
-            }}>
-              Import Collection
+          </div>
+
+          <div className="mt-4 relative collection-filter px-2">
+            <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+              <span className="text-gray-500 sm:text-sm">
+                <IconSearch size={16} strokeWidth={1.5}/>
+              </span>
             </div>
-            <div className="dropdown-item" onClick={(e) => {
-              menuDropdownTippyRef.current.hide();
-            }}>
-              Settings
-            </div>
-          </Dropdown>
+            <input
+              type="text"
+              name="price"
+              id="price"
+              className="block w-full pl-7 py-1 sm:text-sm"
+              placeholder="search"
+            />
+          </div>
+
+          <Collections
+            collections={collections}
+            actions={actions}
+            dispatch={dispatch}
+            activeRequestTabId={activeRequestTabId}
+          />
         </div>
       </div>
-
-      <div className="mt-4 relative collection-filter px-2">
-        <div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
-          <span className="text-gray-500 sm:text-sm">
-            <IconSearch size={16} strokeWidth={1.5}/>
-          </span>
-        </div>
-        <input
-          type="text"
-          name="price"
-          id="price"
-          className="block w-full pl-7 py-1 sm:text-sm"
-          placeholder="search"
-        />
-      </div>
-
-      <Collections
-        collections={collections}
-        actions={actions}
-        dispatch={dispatch}
-        activeRequestTabId={activeRequestTabId}
-      />
     </StyledWrapper>
   );
 };
diff --git a/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js b/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js
index f5e7cebb7..43d3ee4d9 100644
--- a/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js
+++ b/packages/grafnode-components/src/hooks/useGraphqlSchema/index.js
@@ -31,7 +31,6 @@ const useGraphqlSchema =(endpoint) => {
       })
       .catch((err) => {
         setError(err);
-        console.log(err);
       });
   }, []);
 
diff --git a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
index 2bb60e845..98a029a71 100644
--- a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
+++ b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
@@ -6,13 +6,6 @@ const Wrapper = styled.div`
   height: 100%;
   min-height: 100vh;
 
-  aside {
-    min-width: 230px;
-    width: 230px;
-    border-right: solid 1px var(--color-layout-border);
-    background-color: #F6F8FA;
-  }
-
   section.main {
     display: flex;
 
diff --git a/packages/grafnode-run/src/styles/globals.css b/packages/grafnode-run/src/styles/globals.css
index 16898c11d..d51a6c934 100644
--- a/packages/grafnode-run/src/styles/globals.css
+++ b/packages/grafnode-run/src/styles/globals.css
@@ -1,14 +1,15 @@
 
 :root {
   --color-brand: #546de5;
-  --color-sidebar-collection-item-focused-indent-border: #7b8de3;
-  --color-sidebar-background: #f6f8fa;
+  --color-sidebar-collection-item-active-indent-border: #d0d0d0;
+  --color-sidebar-collection-item-active-background: #dddddd;
+  --color-sidebar-background: rgb(243, 243, 243);
   --color-request-dragbar-background: #e2e2e2;
   --color-request-dragbar-background-active: #bbb;
   --color-tab-active-border: #4d4d4d;
   --color-layout-border: #dedede;
   --color-codemirror-border: #efefef;
-  --color-codemirror-background: #f6f8fa;
+  --color-codemirror-background: rgb(243, 243, 243);
 }
 
 html, body {