diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json
index 152b40c0e..af530ef5a 100644
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -121,7 +121,7 @@
   "ViewHeader.export-board-archive": "Export board archive",
   "ViewHeader.export-csv": "Export to CSV",
   "ViewHeader.filter": "Filter",
-  "ViewHeader.group-by": "Group by {property}",
+  "ViewHeader.group-by": "Group by: {property}",
   "ViewHeader.new": "New",
   "ViewHeader.properties": "Properties",
   "ViewHeader.search": "Search",
diff --git a/webapp/i18n/es.json b/webapp/i18n/es.json
index 06f59de7c..1593451c1 100644
--- a/webapp/i18n/es.json
+++ b/webapp/i18n/es.json
@@ -57,7 +57,7 @@
   "ViewHeader.export-board-archive": "Exportar Archivo del Panel",
   "ViewHeader.export-csv": "Exportar a CSV",
   "ViewHeader.filter": "Filtrar",
-  "ViewHeader.group-by": "Agrupar por {property}",
+  "ViewHeader.group-by": "Agrupar por: {property}",
   "ViewHeader.new": "Nueva",
   "ViewHeader.properties": "Propiedades",
   "ViewHeader.search": "Buscar",
diff --git a/webapp/src/components/blockIconSelector.scss b/webapp/src/components/blockIconSelector.scss
index 83c9eadae..be6ec45f1 100644
--- a/webapp/src/components/blockIconSelector.scss
+++ b/webapp/src/components/blockIconSelector.scss
@@ -8,7 +8,7 @@
         align-items: center;
         justify-content: center;
         &:not(.readonly):hover {
-            background-color: rgba(var(--main-fg), 0.1);
+            background-color: rgba(var(--body-color), 0.1);
         }
         &.size-s {
             height: 24px;
diff --git a/webapp/src/components/boardCard.scss b/webapp/src/components/boardCard.scss
index a0f618eef..915a8397a 100644
--- a/webapp/src/components/boardCard.scss
+++ b/webapp/src/components/boardCard.scss
@@ -7,16 +7,16 @@
 
 	border-radius: 3px;
 	margin-bottom: 10px;
-	padding: 7px 10px;
-	box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
+	padding: 8px 16px;
+	box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
 
 	cursor: pointer;
-	color: rgb(var(--main-fg));
+	color: rgb(var(--body-color));
 
 	transition: background 100ms ease-out 0s;
 
     &:hover {
-        background-color: rgba(var(--main-fg), 0.1);
+        background-color: rgba(var(--body-color), 0.1);
         .optionsMenu {
             display: block;
         }
@@ -32,13 +32,14 @@
         right: 0;
     }
 
-    > div {
-        margin-bottom: 3px;
-    }
-
     > .octo-propertyvalue {
+        margin: 4px 0 0;
         font-size: 12px;
         line-height: 18px;
+
+        &:empty {
+            display: none;
+        }
     }
 
     .octo-icontitle {
@@ -54,8 +55,8 @@
         border-radius: 3px;
         margin-right: 6px;
         padding: 0;
-        background: rgb(var(--main-fg), 0.1);
-        box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
+        background: rgb(var(--body-color), 0.1);
+        box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
         height: 24px;
         width: 24px;
     }
diff --git a/webapp/src/components/boardComponent.scss b/webapp/src/components/boardComponent.scss
index 7151e9af6..d0f85a69c 100644
--- a/webapp/src/components/boardComponent.scss
+++ b/webapp/src/components/boardComponent.scss
@@ -11,8 +11,7 @@
         flex-direction: row;
 
         min-height: 30px;
-        margin-bottom: 10px;
-        padding: 0px 10px;
+        margin-bottom: 16px;
         color: #909090;
     }
 
@@ -30,13 +29,17 @@
         }
 
         > div {
-            margin-right: 5px;
+            margin-right: 8px;
+
+            &:last-child {
+                margin: 0;
+            }
         }
 
         .IconButton{
             background-color: unset;
             &:hover {
-                background-color: rgba(var(--main-fg), 0.1);
+                background-color: rgba(var(--body-color), 0.1);
             }
         }
     }
@@ -45,7 +48,6 @@
     .octo-board-body {
         display: flex;
         flex-direction: row;
-        padding: 0 10px;
         flex: 0 1 auto;
     }
 
diff --git a/webapp/src/components/cardDetail.scss b/webapp/src/components/cardDetail.scss
index 642346bb3..427d1fe85 100644
--- a/webapp/src/components/cardDetail.scss
+++ b/webapp/src/components/cardDetail.scss
@@ -7,7 +7,7 @@
         display: flex;
         flex-direction: column;
 	    min-height: 30px;
-	    color:rgba(var(--main-fg), 0.4);
+	    color:rgba(var(--body-color), 0.4);
 	    width: 100%;
 	    align-items: flex-start;
         .Button {
@@ -44,20 +44,20 @@
     .octo-propertyname {
         width: 150px;
         margin-right: 5px;
-        color: rgba(var(--main-fg), 0.6);
+        color: rgba(var(--body-color), 0.6);
         .Button {
             text-align: left;
             justify-content: unset;
         }
         &.add-property {
-            color: rgba(var(--main-fg), 0.4);
+            color: rgba(var(--body-color), 0.4);
         }
     }
 
     &.add-content {
         .Button {
             opacity: 0;
-            color: rgba(var(--main-fg), 0.6);
+            color: rgba(var(--body-color), 0.6);
         }
         &:hover {
             .Button {
diff --git a/webapp/src/components/comment.scss b/webapp/src/components/comment.scss
index 681139eea..5482f781c 100644
--- a/webapp/src/components/comment.scss
+++ b/webapp/src/components/comment.scss
@@ -40,7 +40,7 @@
     }
 
     .comment-text {
-        color: rgb(var(--main-fg));
+        color: rgb(var(--body-color));
         width: 100%;
         padding-left: 25px;
     }
diff --git a/webapp/src/components/commentsList.scss b/webapp/src/components/commentsList.scss
index 7d7b5b7cd..f1a4cc286 100644
--- a/webapp/src/components/commentsList.scss
+++ b/webapp/src/components/commentsList.scss
@@ -18,7 +18,7 @@
     }
 
     .newcomment {
-        color: rgba(var(--main-fg), 0.8);
+        color: rgba(var(--body-color), 0.8);
         flex-grow: 1;
         margin-left: 5px;
     }
diff --git a/webapp/src/components/contentBlock.scss b/webapp/src/components/contentBlock.scss
index 4f0539893..f26c03975 100644
--- a/webapp/src/components/contentBlock.scss
+++ b/webapp/src/components/contentBlock.scss
@@ -9,7 +9,7 @@
     }
     .divider {
         padding-top: 16px;
-        border-bottom: 1px solid rgba(var(--main-fg), 0.09);
+        border-bottom: 1px solid rgba(var(--body-color), 0.09);
         margin-bottom: 17px;
         flex-grow: 1;
     }
diff --git a/webapp/src/components/dialog.scss b/webapp/src/components/dialog.scss
index 371776ba3..2c7255eb6 100644
--- a/webapp/src/components/dialog.scss
+++ b/webapp/src/components/dialog.scss
@@ -7,16 +7,15 @@
         bottom: 0;
         z-index: 10;
 
-        background-color: rgba(var(--main-fg), 0.5);
+        background-color: rgba(var(--body-color), 0.5);
     }
 
     .dialog {
         display: flex;
         flex-direction: column;
-
         background-color: rgb(var(--main-bg));
-        border-radius: 3px;
-        box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
+        box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
+        border-radius: var(--modal-rad);
         padding: 0;
 
         overflow-x: hidden;
@@ -54,8 +53,7 @@
         > .toolbar {
             display: flex;
             flex-direction: row;
-            height: 30px;
-            margin: 10px;
+            padding: 16px;
         }
         > .content {
             display: flex;
diff --git a/webapp/src/components/dialog.tsx b/webapp/src/components/dialog.tsx
index fefba4056..3b7853545 100644
--- a/webapp/src/components/dialog.tsx
+++ b/webapp/src/components/dialog.tsx
@@ -54,11 +54,14 @@ export default class Dialog extends React.PureComponent<Props> {
                                 onClick={this.closeClicked}
                                 icon={<CloseIcon/>}
                                 title={'Close dialog'}
-                                className='hideOnWidescreen'
+                                className='hideOnWidescreen IconButton--large'
                             />
                             <div className='octo-spacer'/>
                             <MenuWrapper>
-                                <IconButton icon={<OptionsIcon/>}/>
+                                <IconButton
+                                    className='IconButton--large'
+                                    icon={<OptionsIcon/>}
+                                />
                                 {toolsMenu}
                             </MenuWrapper>
                         </>
diff --git a/webapp/src/components/modal.scss b/webapp/src/components/modal.scss
index 9a8a5f5c0..91bbd922b 100644
--- a/webapp/src/components/modal.scss
+++ b/webapp/src/components/modal.scss
@@ -1,12 +1,12 @@
 .Modal {
     position: absolute;
     top: 25px;
-    left: -230px;
+    left: -240px;
     z-index: 10;
 	background-color: rgb(var(--main-bg));
 	padding: 10px;
     border-radius: 3px;
-    box-shadow: rgba(var(--main-fg), 0.05) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 3px 6px, rgba(var(--main-fg), 0.2) 0px 9px 24px;
+    box-shadow: var(--elevation-4);
 
     @media screen and (max-width: 430px) {
         position: fixed;
diff --git a/webapp/src/components/registrationLinkComponent.scss b/webapp/src/components/registrationLinkComponent.scss
index f249e2334..2f718777b 100644
--- a/webapp/src/components/registrationLinkComponent.scss
+++ b/webapp/src/components/registrationLinkComponent.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     padding: 5px;
-    color: rgb(var(--main-fg));
+    color: rgb(var(--body-color));
     font-weight: normal;
     line-height: normal;
 
diff --git a/webapp/src/components/shareBoardComponent.scss b/webapp/src/components/shareBoardComponent.scss
index 773ce810c..3ec817e96 100644
--- a/webapp/src/components/shareBoardComponent.scss
+++ b/webapp/src/components/shareBoardComponent.scss
@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: column;
     padding: 5px;
-    color: rgb(var(--main-fg));
+    color: rgb(var(--body-color));
 	max-width: 400px;
 
     > .row {
diff --git a/webapp/src/components/sidebar.scss b/webapp/src/components/sidebar.scss
index c9df79af4..186829031 100644
--- a/webapp/src/components/sidebar.scss
+++ b/webapp/src/components/sidebar.scss
@@ -1,13 +1,13 @@
 .Sidebar {
-    flex: 0 0 230px;
+    flex: 0 0 240px;
 
-	display: flex;
-	flex-direction: column;
+    display: flex;
+    flex-direction: column;
 
-	min-height: 100%;
-	color: rgb(var(--sidebar-fg));
-	background-color: rgb(var(--sidebar-bg));
-    padding-top: 10px;
+    min-height: 100%;
+    color: rgb(var(--sidebar-fg));
+    background-color: rgb(var(--sidebar-bg));
+    padding: 12px 0;
 
     &.hidden {
         position: absolute;
@@ -19,7 +19,8 @@
         width: 50px;
         background: none;
         padding: 0;
-        > div {
+
+        >div {
             padding: 0;
             margin: auto;
         }
@@ -34,6 +35,10 @@
         flex: 1 1 auto;
         overflow-y: auto;
         max-width: 250px;
+
+        >div {
+            margin-bottom: 16px;
+        }
     }
 
     .octo-sidebar-header {
@@ -42,7 +47,14 @@
 
         font-weight: 600;
         padding: 3px 20px;
-        margin-bottom: 5px;
+        margin-bottom: 16px;
+        height: 48px;
+        align-items: center;
+
+        button {
+            font-size: 16px;
+            font-weight: 600;
+        }
 
         >.heading {
             line-height: 30px;
@@ -51,6 +63,7 @@
 
         >.IconButton {
             background-color: var(--sidebar-bg);
+
             &:hover {
                 background-color: rgba(var(--sidebar-fg), 0.1);
             }
@@ -60,13 +73,16 @@
             .hamburger-icon {
                 display: block;
             }
+
             .show-icon {
                 display: none;
             }
+
             &:hover {
                 .hamburger-icon {
                     display: none;
                 }
+
                 .show-icon {
                     display: block;
                 }
@@ -77,19 +93,24 @@
     .octo-sidebar-item {
         display: flex;
         flex-direction: row;
-
         font-weight: 500;
-        padding: 3px 20px;
+        padding: 0 16px 0 8px;
+        height: 36px;
+        align-items: center;
+
         &:hover {
-            background-color: rgba(var(--sidebar-fg), 0.05);
+            background-color: rgba(var(--sidebar-fg), 0.08);
         }
+
         &.subitem {
-            color: rgba(var(--sidebar-fg), 0.6);
+            padding-left: 20px;
+            color: rgba(var(--sidebar-fg), 0.64);
             font-weight: 400;
-            margin-left: 20px;
         }
+
         &.no-views {
             color: rgba(var(--sidebar-fg), 0.4);
+
             &:hover {
                 background-color: rgba(var(--sidebar-bg));
             }
@@ -97,15 +118,19 @@
 
         >.IconButton {
             background-color: var(--sidebar-bg);
+
             &:hover {
                 background-color: rgba(var(--sidebar-fg), 0.1);
             }
         }
+
         .MenuWrapper {
             display: none;
         }
+
         &:hover {
             display: flex;
+
             .MenuWrapper {
                 display: block;
             }
@@ -116,6 +141,7 @@
                 transform: rotate(90deg);
             }
         }
+
         .DisclosureTriangleIcon {
             transition: 200ms ease-in-out;
             transform: rotate(0deg);
@@ -123,6 +149,7 @@
     }
 
     .octo-sidebar-title {
+        font-weight: 600;
         cursor: pointer;
         flex-grow: 1;
         white-space: nowrap;
@@ -130,7 +157,9 @@
         text-overflow: ellipsis;
     }
 
-    .OptionsIcon, .DisclosureTriangleIcon, .DotIcon {
+    .OptionsIcon,
+    .DisclosureTriangleIcon,
+    .DotIcon {
         fill: rgba(var(--sidebar-fg), 0.5);
         flex-shrink: 0;
     }
diff --git a/webapp/src/components/sidebar.tsx b/webapp/src/components/sidebar.tsx
index a18397ca5..1c3b20d24 100644
--- a/webapp/src/components/sidebar.tsx
+++ b/webapp/src/components/sidebar.tsx
@@ -285,12 +285,12 @@ class Sidebar extends React.Component<Props, State> {
                 </MenuWrapper>
 
                 <MenuWrapper>
-                    <Button>
+                    <div className='octo-sidebar-item subitem'>
                         <FormattedMessage
                             id='Sidebar.settings'
                             defaultMessage='Settings'
                         />
-                    </Button>
+                    </div>
                     <Menu position='top'>
                         <Menu.Text
                             id='import'
diff --git a/webapp/src/components/tableComponent.scss b/webapp/src/components/tableComponent.scss
index 6f228e2ea..ea75589b4 100644
--- a/webapp/src/components/tableComponent.scss
+++ b/webapp/src/components/tableComponent.scss
@@ -2,22 +2,24 @@
     .octo-table-cell {
         flex: 0 0 auto;
         display: flex;
+        align-items: center;
         flex-direction: row;
-
-        color: rgb(var(--main-fg));
-        border-right: solid 1px rgba(var(--main-fg), 0.09);
+        color: rgb(var(--body-color));
+        border-right: solid 1px rgba(var(--body-color), 0.09);
         box-sizing: border-box;
-        padding: 5px 8px 6px 8px;
-
+        padding: 8px;
         min-height: 32px;
-
         font-size: 14px;
-        line-height: 21px;
-
+        line-height: 20px;
         position: relative;
 
+        &.title-cell {
+            padding-left: 16px;
+        }
+
         .octo-icontitle {
             flex: 1 1 auto;
+
             .octo-icon {
                 min-width: 20px;
             }
@@ -60,8 +62,7 @@
         }
 
         .octo-editable,
-        .octo-propertyvalue
-        {
+        .octo-propertyvalue {
             text-align: left;
             white-space: nowrap;
         }
@@ -70,7 +71,6 @@
     .octo-table-body {
         display: flex;
         flex-direction: column;
-        padding: 0 10px;
     }
 
     .octo-table-header,
@@ -79,28 +79,30 @@
         display: flex;
         flex-direction: row;
 
-        border-bottom: solid 1px rgba(var(--main-fg), 0.09);
+        border-bottom: solid 1px rgba(var(--body-color), 0.09);
     }
 
     .octo-table-header {
         .octo-table-cell {
-            color: rgba(var(--main-fg), 0.6);
+            color: rgba(var(--body-color), 0.6);
+
             .octo-label {
-                color: rgba(var(--main-fg), 0.6);
+                color: rgba(var(--body-color), 0.6);
             }
         }
     }
 
     .octo-table-footer {
         .octo-table-cell {
-            color: rgba(var(--main-fg), 0.6);
+            color: rgba(var(--body-color), 0.6);
             cursor: pointer;
 
             width: 100%;
             border-right: none;
             padding-left: 15px;
+
             &:hover {
-	            background-color: rgba(var(--main-fg), 0.08);
+                background-color: rgba(var(--body-color), 0.08);
             }
         }
     }
diff --git a/webapp/src/components/tableComponent.tsx b/webapp/src/components/tableComponent.tsx
index c914ef3f8..82108a33b 100644
--- a/webapp/src/components/tableComponent.tsx
+++ b/webapp/src/components/tableComponent.tsx
@@ -116,7 +116,7 @@ class TableComponent extends React.Component<Props, State> {
                                 <div
                                     id='mainBoardHeader'
                                     ref={titleRef}
-                                    className='octo-table-cell title-cell header-cell'
+                                    className='octo-table-cell header-cell'
                                     style={{overflow: 'unset', width: this.columnWidth(Constants.titleColumnId)}}
                                 >
                                     <MenuWrapper
diff --git a/webapp/src/components/tableRow.scss b/webapp/src/components/tableRow.scss
index 767a72bf5..62f3d4a0c 100644
--- a/webapp/src/components/tableRow.scss
+++ b/webapp/src/components/tableRow.scss
@@ -1,11 +1,18 @@
 .TableRow {
     .open-button {
         display: none;
+
         .Button {
-            background-color: rgba(var(--main-fg), 0.1);
-            box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 2px 4px;
+            padding: 2px 4px;
+            font-size: 11px;
+            text-transform: uppercase;
+            font-weight: 600;
+            color: rgba(var(--body-color), .64);
+            background-color: rgba(var(--body-color), 0.1);
+            box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 2px 4px;
         }
     }
+
     &:hover {
         .open-button {
             display: block;
diff --git a/webapp/src/components/viewHeader.scss b/webapp/src/components/viewHeader.scss
index 68ed2bb50..c4a85e891 100644
--- a/webapp/src/components/viewHeader.scss
+++ b/webapp/src/components/viewHeader.scss
@@ -3,15 +3,19 @@
     display: flex;
     flex-direction: row;
 
-    border-bottom: solid 1px rgba(var(--main-fg), 0.16);
-    margin-bottom: 10px;
-    padding: 10px 10px;
-    color: rgba(var(--main-fg), 0.5);
+    border-bottom: solid 1px rgba(var(--body-color), 0.16);
+    margin: 16px 0;
+    padding: 12px 8px;
+    color: rgba(var(--body-color), 0.64);
     align-items: center;
 
     > div {
-        margin-right: 5px;
-        white-space: nowrap
+        margin-right: 16px;
+        white-space: nowrap;
+
+        &:last-child {
+            margin: 0;
+        }
     }
 
     #groupByLabel {
@@ -21,7 +25,7 @@
     .IconButton {
         background: none;
         &:hover {
-            background: rgba(var(--main-fg), 0.1);
+            background: rgba(var(--body-color), 0.1);
         }
     }
 
diff --git a/webapp/src/components/viewHeader.tsx b/webapp/src/components/viewHeader.tsx
index f287ac87a..ba22596de 100644
--- a/webapp/src/components/viewHeader.tsx
+++ b/webapp/src/components/viewHeader.tsx
@@ -137,7 +137,7 @@ class ViewHeader extends React.Component<Props, State> {
                         <Button>
                             <FormattedMessage
                                 id='ViewHeader.group-by'
-                                defaultMessage='Group by {property}'
+                                defaultMessage='Group by: {property}'
                                 values={{
                                     property: (
                                         <span
diff --git a/webapp/src/components/viewTitle.scss b/webapp/src/components/viewTitle.scss
index 200113bbf..62a339388 100644
--- a/webapp/src/components/viewTitle.scss
+++ b/webapp/src/components/viewTitle.scss
@@ -8,7 +8,7 @@
     &.add-buttons {
         flex-direction: row;
 	    min-height: 30px;
-	    color:rgba(var(--main-fg), 0.4);
+	    color:rgba(var(--body-color), 0.4);
 	    width: 100%;
 	    align-items: flex-start;
         .Button {
diff --git a/webapp/src/main.tsx b/webapp/src/main.tsx
index 6fda28e09..0242c540e 100644
--- a/webapp/src/main.tsx
+++ b/webapp/src/main.tsx
@@ -6,8 +6,9 @@ import ReactDOM from 'react-dom'
 import App from './app'
 import {loadTheme} from './theme'
 
+import './styles/variables.scss'
 import './styles/main.scss'
-import './styles/colors.scss'
+import './styles/labels.scss'
 
 loadTheme()
 ReactDOM.render(<App/>, document.getElementById('octo-tasks-app'))
diff --git a/webapp/src/pages/loginPage.scss b/webapp/src/pages/loginPage.scss
index 6c66e0dfe..ec5cb1d64 100644
--- a/webapp/src/pages/loginPage.scss
+++ b/webapp/src/pages/loginPage.scss
@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: flex-start;
     flex-direction: column;
-    box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
+    box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
 
     @media screen and (max-width: 430px) {
         position: fixed;
diff --git a/webapp/src/pages/registerPage.scss b/webapp/src/pages/registerPage.scss
index c5abacc85..606a150c2 100644
--- a/webapp/src/pages/registerPage.scss
+++ b/webapp/src/pages/registerPage.scss
@@ -9,7 +9,7 @@
     align-items: center;
     justify-content: flex-start;
     flex-direction: column;
-    box-shadow: rgba(var(--main-fg), 0.1) 0px 0px 0px 1px, rgba(var(--main-fg), 0.3) 0px 4px 8px;
+    box-shadow: rgba(var(--body-color), 0.1) 0px 0px 0px 1px, rgba(var(--body-color), 0.3) 0px 4px 8px;
 
     @media screen and (max-width: 430px) {
         position: fixed;
diff --git a/webapp/src/styles/colors.scss b/webapp/src/styles/labels.scss
similarity index 62%
rename from webapp/src/styles/colors.scss
rename to webapp/src/styles/labels.scss
index 01668795f..382e9a317 100644
--- a/webapp/src/styles/colors.scss
+++ b/webapp/src/styles/labels.scss
@@ -1,49 +1,49 @@
 .propColor0,
 .propColorDefault {
-	background-color: rgba(206, 205, 202, 0.5);
+	background-color: var(--prop-default);
 }
 
 .propColor1, .propColor1:hover,
 .propColorGray, .propColorGray:hover {
-	background-color: rgba(155, 154, 151, 0.4);
+	background-color: var(--prop-gray);
 }
 
 .propColor2, .propColor2:hover,
 .propColorBrown, .propColorBrown:hover {
-	background-color: rgba(140, 46, 0, 0.2);
+	background-color: var(--prop-brown);
 }
 
 .propColor3, .propColor3:hover,
 .propColorOrange, .propColorOrange:hover {
-	background-color: rgba(245, 93, 0, 0.2);
+	background-color: var(--prop-orange);
 }
 
 .propColor4, .propColor4:hover,
 .propColorYellow, .propColorYellow:hover {
-	background-color: rgba(233, 168, 0, 0.2);
+	background-color: var(--prop-yellow);
 }
 
 .propColor5, .propColor5:hover,
 .propColorGreen, .propColorGreen:hover {
-	background-color: rgba(0, 135, 107, 0.2);
+	background-color: var(--prop-green);
 }
 
 .propColor6, .propColor6:hover,
 .propColorBlue, .propColorBlue:hover {
-	background-color: rgba(0, 120, 233, 0.2);
+	background-color: var(--prop-blue);
 }
 
 .propColor7, .propColor7:hover,
 .propColorPurple, .propColorPurple:hover {
-	background-color: rgba(103, 36, 222, 0.2);
+	background-color: var(--prop-purple);
 }
 
 .propColor8, .propColor8:hover,
 .propColorPink, .propColorPink:hover {
-	background-color: rgba(221, 0, 129, 0.2);
+	background-color: var(--prop-pink);
 }
 
 .propColor9, .propColor9:hover,
 .propColorRed, .propColorRed:hover {
-	background-color: rgba(255, 0, 26, 0.2);
+	background-color: var(--prop-red);
 }
diff --git a/webapp/src/styles/main.scss b/webapp/src/styles/main.scss
index ea3b270e6..9410fb1a4 100644
--- a/webapp/src/styles/main.scss
+++ b/webapp/src/styles/main.scss
@@ -1,19 +1,11 @@
-:root {
-    --main-bg: 255, 255, 255;
-    --main-fg: 55, 53, 47;
-    --button-bg: 80, 170, 221;
-    --button-fg: 255, 255, 255;
-    --sidebar-bg: '247, 246, 243';
-    --sidebar-fg: '55, 53, 47';
-}
-
 * {
 	box-sizing: border-box;
     outline: 0;
     -webkit-user-select: none;  /* Chrome all / Safari all */
     -moz-user-select: none;     /* Firefox all */
     -ms-user-select: none;      /* IE 10+ */
-    user-select: none;          /* Likely future */
+	user-select: none;          /* Likely future */
+	font-family: 'Open Sans', sans-serif;
 }
 
 html, body {
@@ -22,13 +14,13 @@ html, body {
 
 	width: 100%;
 	height: 100%;
-	color: rgb(var(--main-fg));
+	color: rgb(var(--body-color));
     background: rgb(var(--main-bg));
 }
 
 input, textarea {
     background: rgb(var(--main-bg));
-	color: rgb(var(--main-fg));
+	color: rgb(var(--body-color));
 
     -webkit-user-select: auto;  /* Chrome all / Safari all */
     -moz-user-select: auto;     /* Firefox all */
@@ -39,11 +31,11 @@ input, textarea {
 body {
 	padding: 0;
 	margin: 0;
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
+	font-family: 'Open Sans', sans-serif;
     /* -webkit-font-smoothing: auto; */
 	font-size: 14px;
 	line-height: 24px;
-	--cursor-color: rgb(var(--main-fg));
+	--cursor-color: rgb(var(--body-color));
 }
 
 a {
@@ -57,11 +49,19 @@ hr {
 	width: 100%;
 	height: 1px;
 	border: none;
-	color: rgba(var(--main-fg), 0.09);
-	background-color: rgba(var(--main-fg), 0.09);
+	color: rgba(var(--body-color), 0.09);
+	background-color: rgba(var(--body-color), 0.09);
 	margin-bottom: 8px;
 }
 
+button {
+	&.style--none {
+        background: transparent;
+        border: none;
+		padding: 0;
+	}
+}
+
 .page-loading {
 	margin: 50px auto;
 }
@@ -107,10 +107,10 @@ hr {
 	flex-direction: column;
 	overflow: scroll;
 
-    padding: 10px 95px 50px 95px;
+    padding: 24px 80px 8px;
 
     @media screen and (max-width: 768px) {
-        padding: 10px 10px 50px 10px;
+        padding: 8px 40px;
     }
 }
 
@@ -119,12 +119,17 @@ hr {
 }
 
 .octo-label {
-	display: inline-block;
-	padding: 0 5px;
+	display: inline-flex;
+	align-items: center;
+	padding: 2px 8px;
 	border-radius: 3px;
 	line-height: 20px;
-	color: rgb(var(--main-fg));
-	white-space: nowrap
+	color: rgba(var(--body-color), .8);
+	white-space: nowrap;
+	text-transform: uppercase;
+	font-weight: 600;
+	font-size: 13px;
+
 }
 
 .octo-spacer {
@@ -150,10 +155,10 @@ hr {
 /*-- Property list --*/
 
 .octo-propertyvalue {
-	color: rgb(var(--main-fg));
+	color: rgb(var(--body-color));
 	padding: 0 5px;
     &.empty {
-	    color: rgba(var(--main-fg), 0.4);
+	    color: rgba(var(--body-color), 0.4);
     }
 }
 
@@ -168,7 +173,7 @@ hr {
 }
 
 .octo-placeholder {
-	color: rgba(var(--main-fg), 0.4);
+	color: rgba(var(--body-color), 0.4);
 }
 
 [contentEditable=true] {
@@ -181,7 +186,7 @@ hr {
 [contentEditable=true]:empty:before{
 	content: attr(placeholder);
 	display: block;
-	color: rgba(var(--main-fg), 0.4);
+	color: rgba(var(--body-color), 0.4);
 }
 
 
diff --git a/webapp/src/styles/variables.scss b/webapp/src/styles/variables.scss
new file mode 100644
index 000000000..bf0727221
--- /dev/null
+++ b/webapp/src/styles/variables.scss
@@ -0,0 +1,34 @@
+:root {
+    --body-color: 38, 38, 38;
+    --main-bg: 255, 255, 255;
+    --button-bg: 80, 170, 221;
+    --button-fg: 255, 255, 255;
+    --sidebar-bg: 20, 93, 191;
+    --sidebar-fg: 55, 53, 47;
+    --button-bg: 22, 109, 204;
+    --link-color: 35, 137, 215;
+
+    // Label Colors
+    --prop-default: #fff;
+    --prop-gray: #EDEDED;
+    --prop-brown: #F7DDC3;
+    --prop-orange: #ffd3c1;
+    --prop-yellow: #f7f0b6;
+    --prop-green: #c7eac3;
+    --prop-blue: #B1D1F6;
+    --prop-purple: #e6d0ff;
+    --prop-pink: #ffd6e9;
+    --prop-red: #ffa9a9;
+
+    // Elevations
+    --elevation-1: 0 2px 3px 0 rgba(0, 0, 0, .8);
+    --elevation-2: 0 4px 6px 0 rgba(0, 0, 0, .12);
+    --elevation-3: 0 6px 14px 0 rgba(0, 0, 0, .12);
+    --elevation-4: 0 8px 24px 0 rgba(0, 0, 0, .12);
+    --elevation-5: 0 12px 32px 0 rgba(0, 0, 0, .12);
+    --elevation-6: 0 20px 32px 0 rgba(0, 0, 0, .12);
+
+    // Radius
+    --default-rad: 4px;
+    --modal-rad: 8px;
+}
\ No newline at end of file
diff --git a/webapp/src/widgets/buttons/button.scss b/webapp/src/widgets/buttons/button.scss
index 92247fd60..a98da8947 100644
--- a/webapp/src/widgets/buttons/button.scss
+++ b/webapp/src/widgets/buttons/button.scss
@@ -4,16 +4,18 @@
     align-items: center;
 	text-align: center;
     justify-content: center;
-	border-radius: 5px;
-	padding: 0 5px;
+	border-radius: var(--default-rad);
+	padding: 4px 8px;
 	min-width: 20px;
 	cursor: pointer;
 	overflow: hidden;
-
-	transition: background 100ms ease-out 0s;
+    background: transparent;
+    border: none;
+    transition: background 100ms ease-out 0s;
+    color: inherit;
 
 	&:hover {
-        background-color: rgba(var(--main-fg), 0.1);
+        background-color: rgba(var(--body-color), 0.1);
 	}
 
     &.filled {
@@ -27,8 +29,8 @@
     }
 
     &.active {
-        color: rgb(45, 170, 220);
-        font-weight: 500;
+        color: rgb(var(--link-color));
+        font-weight: 600;
     }
 
     .Icon {
diff --git a/webapp/src/widgets/buttons/button.tsx b/webapp/src/widgets/buttons/button.tsx
index fa5c10ac3..da1bb634c 100644
--- a/webapp/src/widgets/buttons/button.tsx
+++ b/webapp/src/widgets/buttons/button.tsx
@@ -5,7 +5,7 @@ import React from 'react'
 import './button.scss'
 
 type Props = {
-    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
     children?: React.ReactNode
     title?: string
     icon?: React.ReactNode
@@ -16,13 +16,14 @@ type Props = {
 export default class Button extends React.PureComponent<Props> {
     render(): JSX.Element {
         return (
-            <div
+            <button
+                type='button'
                 onClick={this.props.onClick}
                 className={`Button ${this.props.active ? 'active' : ''} ${this.props.filled ? 'filled' : ''}`}
                 title={this.props.title}
             >
                 {this.props.icon}
                 {this.props.children}
-            </div>)
+            </button>)
     }
 }
diff --git a/webapp/src/widgets/buttons/iconButton.scss b/webapp/src/widgets/buttons/iconButton.scss
index c3a769e35..b6e56a48e 100644
--- a/webapp/src/widgets/buttons/iconButton.scss
+++ b/webapp/src/widgets/buttons/iconButton.scss
@@ -3,10 +3,21 @@
     width: 24px;
     padding: 0;
     margin: 0;
+
     .Icon {
         height: 24px;
         width: 24px;
         padding: 0;
         margin: 0;
     }
+
+    &--large {
+        width: 40px;
+        height: 40px;
+
+        .Icon {
+            width: 32px;
+            height: 32px;
+        }
+    }
 }
diff --git a/webapp/src/widgets/buttons/iconButton.tsx b/webapp/src/widgets/buttons/iconButton.tsx
index 280f51ca6..a39e692b0 100644
--- a/webapp/src/widgets/buttons/iconButton.tsx
+++ b/webapp/src/widgets/buttons/iconButton.tsx
@@ -11,7 +11,7 @@ type Props = {
     className?: string
 }
 
-export default class IconButton extends React.PureComponent<Props> {
+export default class cIconButton extends React.PureComponent<Props> {
     render(): JSX.Element {
         let className = 'Button IconButton'
         if (this.props.className) {
diff --git a/webapp/src/widgets/editable.scss b/webapp/src/widgets/editable.scss
index 2680ece3c..d0bec1007 100644
--- a/webapp/src/widgets/editable.scss
+++ b/webapp/src/widgets/editable.scss
@@ -7,7 +7,7 @@
 	    min-width: 100px;
     }
     &::placeholder{
-        color: rgba(var(--main-fg), 0.4);
+        color: rgba(var(--body-color), 0.4);
         opacity: 1;
     }
 }
diff --git a/webapp/src/widgets/emojiPicker.scss b/webapp/src/widgets/emojiPicker.scss
index bb65a50f8..9bf0ce221 100644
--- a/webapp/src/widgets/emojiPicker.scss
+++ b/webapp/src/widgets/emojiPicker.scss
@@ -1,20 +1,20 @@
 .EmojiPicker {
     .emoji-mart {
-        color: rgb(var(--main-fg));
+        color: rgb(var(--body-color));
         background: rgb(var(--main-bg));
-        border-color: rgba(var(--main-fg), 0.16);
+        border-color: rgba(var(--body-color), 0.16);
         .emoji-mart-bar {
-            border: 0 solid rgba(var(--main-fg), 0.16);
+            border: 0 solid rgba(var(--body-color), 0.16);
             border-bottom-width: 1px
         }
         .emoji-mart-search input {
-            border: 1px solid rgba(var(--main-fg), 0.16);
+            border: 1px solid rgba(var(--body-color), 0.16);
         }
         .emoji-mart-category-label span {
             background: rgb(var(--main-bg));
         }
         .emoji-mart-search-icon svg {
-            fill: rgb(var(--main-fg));
+            fill: rgb(var(--body-color));
         }
     }
 }
diff --git a/webapp/src/widgets/icons/add.scss b/webapp/src/widgets/icons/add.scss
index 18d8be3ff..0db2f5754 100644
--- a/webapp/src/widgets/icons/add.scss
+++ b/webapp/src/widgets/icons/add.scss
@@ -1,5 +1,5 @@
 .AddIcon {
-    stroke: rgb(var(--main-fg), 0.5);
+    stroke: rgb(var(--body-color), 0.5);
     stroke-width: 4px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/check.scss b/webapp/src/widgets/icons/check.scss
index 15f1724c1..ae5c0c7fd 100644
--- a/webapp/src/widgets/icons/check.scss
+++ b/webapp/src/widgets/icons/check.scss
@@ -1,5 +1,5 @@
 .CheckIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 8px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/close.scss b/webapp/src/widgets/icons/close.scss
index bd4c18608..f821f3a60 100644
--- a/webapp/src/widgets/icons/close.scss
+++ b/webapp/src/widgets/icons/close.scss
@@ -1,5 +1,5 @@
 .CloseIcon {
-    stroke: rgb(var(--main-fg), 0.5);
+    stroke: rgb(var(--body-color), 0.5);
     stroke-width: 4px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/delete.scss b/webapp/src/widgets/icons/delete.scss
index f4fbfe922..cb20baded 100644
--- a/webapp/src/widgets/icons/delete.scss
+++ b/webapp/src/widgets/icons/delete.scss
@@ -1,5 +1,5 @@
 .DeleteIcon {
-    fill: rgba(var(--main-fg), 0.5);
+    fill: rgba(var(--body-color), 0.5);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/disclosureTriangle.scss b/webapp/src/widgets/icons/disclosureTriangle.scss
index 9dffff683..89d9522c5 100644
--- a/webapp/src/widgets/icons/disclosureTriangle.scss
+++ b/webapp/src/widgets/icons/disclosureTriangle.scss
@@ -1,5 +1,5 @@
 .DisclosureTriangleIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/divider.scss b/webapp/src/widgets/icons/divider.scss
index dbc773a27..91e2be49d 100644
--- a/webapp/src/widgets/icons/divider.scss
+++ b/webapp/src/widgets/icons/divider.scss
@@ -1,5 +1,5 @@
 .DividerIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/dot.scss b/webapp/src/widgets/icons/dot.scss
index 51e38fe4c..297c85e1f 100644
--- a/webapp/src/widgets/icons/dot.scss
+++ b/webapp/src/widgets/icons/dot.scss
@@ -1,5 +1,5 @@
 .DotIcon {
-    fill: rgba(var(--main-fg), 0.5);
+    fill: rgba(var(--body-color), 0.5);
 	width: 24px;
 	height: 24px;
 }
diff --git a/webapp/src/widgets/icons/dropdown.scss b/webapp/src/widgets/icons/dropdown.scss
index 22e567a73..a34d694ac 100644
--- a/webapp/src/widgets/icons/dropdown.scss
+++ b/webapp/src/widgets/icons/dropdown.scss
@@ -1,6 +1,6 @@
 .DropdownIcon {
     fill: none;
-    stroke: rgb(var(--main-fg));
+    stroke: rgb(var(--body-color));
     stroke-width: 4px;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/duplicate.scss b/webapp/src/widgets/icons/duplicate.scss
index a6ac80689..7a6d87c9f 100644
--- a/webapp/src/widgets/icons/duplicate.scss
+++ b/webapp/src/widgets/icons/duplicate.scss
@@ -1,5 +1,5 @@
 .DuplicateIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/emoji.scss b/webapp/src/widgets/icons/emoji.scss
index 00ec5b7a4..156352dd0 100644
--- a/webapp/src/widgets/icons/emoji.scss
+++ b/webapp/src/widgets/icons/emoji.scss
@@ -1,5 +1,5 @@
 .EmojiIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/hamburger.scss b/webapp/src/widgets/icons/hamburger.scss
index 4eb0622d4..580c223ff 100644
--- a/webapp/src/widgets/icons/hamburger.scss
+++ b/webapp/src/widgets/icons/hamburger.scss
@@ -1,5 +1,5 @@
 .HamburgerIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 6px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/hide.scss b/webapp/src/widgets/icons/hide.scss
index ef7b09e30..3750e99e8 100644
--- a/webapp/src/widgets/icons/hide.scss
+++ b/webapp/src/widgets/icons/hide.scss
@@ -1,5 +1,5 @@
 .HideIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/hideSidebar.scss b/webapp/src/widgets/icons/hideSidebar.scss
index 079966d3d..c8a11c52f 100644
--- a/webapp/src/widgets/icons/hideSidebar.scss
+++ b/webapp/src/widgets/icons/hideSidebar.scss
@@ -1,5 +1,5 @@
 .HideSidebarIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 6px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/image.scss b/webapp/src/widgets/icons/image.scss
index b3ef5b0f8..067c04246 100644
--- a/webapp/src/widgets/icons/image.scss
+++ b/webapp/src/widgets/icons/image.scss
@@ -1,5 +1,5 @@
 .ImageIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/options.scss b/webapp/src/widgets/icons/options.scss
index 061640024..575390f02 100644
--- a/webapp/src/widgets/icons/options.scss
+++ b/webapp/src/widgets/icons/options.scss
@@ -1,5 +1,5 @@
 .OptionsIcon {
-    fill: rgba(var(--main-fg), 0.5);
+    fill: rgba(var(--body-color), 0.5);
 	width: 24px;
 	height: 24px;
 }
diff --git a/webapp/src/widgets/icons/show.scss b/webapp/src/widgets/icons/show.scss
index 885a157b0..53a6cd372 100644
--- a/webapp/src/widgets/icons/show.scss
+++ b/webapp/src/widgets/icons/show.scss
@@ -1,5 +1,5 @@
 .ShowIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/showSidebar.scss b/webapp/src/widgets/icons/showSidebar.scss
index 07e5dc4c7..39baab789 100644
--- a/webapp/src/widgets/icons/showSidebar.scss
+++ b/webapp/src/widgets/icons/showSidebar.scss
@@ -1,5 +1,5 @@
 .ShowSidebarIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 6px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/sortDown.scss b/webapp/src/widgets/icons/sortDown.scss
index e1ba1de0f..dfb9b85a4 100644
--- a/webapp/src/widgets/icons/sortDown.scss
+++ b/webapp/src/widgets/icons/sortDown.scss
@@ -1,5 +1,5 @@
 .SortDownIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 8px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/sortUp.scss b/webapp/src/widgets/icons/sortUp.scss
index ec215f57e..11dac528d 100644
--- a/webapp/src/widgets/icons/sortUp.scss
+++ b/webapp/src/widgets/icons/sortUp.scss
@@ -1,5 +1,5 @@
 .SortUpIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 8px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/standardIcon.scss b/webapp/src/widgets/icons/standardIcon.scss
index ae3c110bf..1e71c014a 100644
--- a/webapp/src/widgets/icons/standardIcon.scss
+++ b/webapp/src/widgets/icons/standardIcon.scss
@@ -1,5 +1,5 @@
 .StandardIcon {
-    stroke: rgba(var(--main-fg), 0.5);
+    stroke: rgba(var(--body-color), 0.5);
     stroke-width: 4px;
     fill: none;
 	width: 24px;
diff --git a/webapp/src/widgets/icons/submenuTriangle.scss b/webapp/src/widgets/icons/submenuTriangle.scss
index 1f5f5d696..d05d3cb51 100644
--- a/webapp/src/widgets/icons/submenuTriangle.scss
+++ b/webapp/src/widgets/icons/submenuTriangle.scss
@@ -1,5 +1,5 @@
 .SubmenuTriangleIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/icons/text.scss b/webapp/src/widgets/icons/text.scss
index f8118c38d..cbdb12041 100644
--- a/webapp/src/widgets/icons/text.scss
+++ b/webapp/src/widgets/icons/text.scss
@@ -1,5 +1,5 @@
 .TextIcon {
-    fill: rgba(var(--main-fg), 0.7);
+    fill: rgba(var(--body-color), 0.7);
     stroke: none;
 	width: 24px;
 	height: 24px;
diff --git a/webapp/src/widgets/menu/menu.scss b/webapp/src/widgets/menu/menu.scss
index b185b52f8..38ab489f5 100644
--- a/webapp/src/widgets/menu/menu.scss
+++ b/webapp/src/widgets/menu/menu.scss
@@ -1,18 +1,19 @@
 .Menu {
     display: flex;
     flex-direction: column;
-	position: absolute;
-	z-index: 15;
-	min-width: 180px;
-	background-color: rgb(var(--main-bg));
-    color: rgb(var(--main-fg));
-
-    border-radius: 3px;
-    box-shadow: rgba(var(--main-fg), 0.05) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 3px 6px, rgba(var(--main-fg), 0.2) 0px 9px 24px;
+    position: absolute;
+    z-index: 15;
+    min-width: 180px;
+    background-color: rgb(var(--main-bg));
+    color: rgb(var(--body-color));
+    border-radius: var(--default-rad);
+    box-shadow: var(--elevation-4);
 
     .menu-contents {
         display: flex;
         flex-direction: column;
+        padding: 8px 0;
+        min-width: 240px;
     }
 
     .menu-options {
@@ -26,7 +27,7 @@
         padding: 0;
         margin: 0;
 
-        color: rgb(var(--main-fg));
+        color: rgb(var(--body-color));
 
         >.menu-option {
             display: flex;
@@ -34,15 +35,18 @@
             align-items: center;
 
             font-weight: 400;
-            padding: 2px 10px;
+            height: 32px;
+            padding: 4px 20px;
             cursor: pointer;
 
             &:hover {
-                background: rgba(90, 90, 90, 0.1);
+                background: rgba(var(--button-bg), 0.08);
             }
+
             >* {
-                margin-left: 5px;
+                margin-left: 16px;
             }
+
             >*:first-child {
                 margin-left: 0;
             }
@@ -54,14 +58,16 @@
             }
 
             >.SubmenuTriangleIcon {
-                fill: rgba(var(--main-fg), 0.7);
+                fill: rgba(var(--body-color), 0.7);
             }
 
             >.Icon {
+                opacity: 0.56;
                 width: 16px;
                 height: 16px;
                 line-height: 16px;
             }
+
             >.IconButton .Icon {
                 margin-right: 0;
             }
@@ -78,13 +84,15 @@
         &.top {
             bottom: 100%;
         }
+
         &.left {
             right: 0;
         }
     }
 }
 
-.Menu, .SubMenuOption .SubMenu {
+.Menu,
+.SubMenuOption .SubMenu {
     @media screen and (max-width: 430px) {
         position: fixed;
         top: 0;
@@ -92,7 +100,7 @@
         right: 0;
         bottom: 0;
         min-width: 0;
-        background-color: rgba(var(--main-fg), 0.5);
+        background-color: rgba(var(--body-color), 0.5);
         border-radius: 0;
         padding: 10px;
 
@@ -120,10 +128,12 @@
                 >* {
                     flex: 0 0 auto;
                 }
+
                 >.noicon {
                     width: 16px;
                     height: 16px;
                 }
+
                 >.menu-name {
                     font-size: 16px;
                     justify-content: center;
@@ -131,9 +141,10 @@
             }
         }
     }
+
     @media not screen and (max-width: 430px) {
         .hideOnWidescreen {
-        /* Hide controls (e.g. close button) on larger screens */
+            /* Hide controls (e.g. close button) on larger screens */
             display: none !important;
         }
     }
diff --git a/webapp/src/widgets/menu/separatorOption.scss b/webapp/src/widgets/menu/separatorOption.scss
index 716667446..6cd818a83 100644
--- a/webapp/src/widgets/menu/separatorOption.scss
+++ b/webapp/src/widgets/menu/separatorOption.scss
@@ -1,3 +1,4 @@
 .MenuSeparator {
-	border-bottom: solid 1px rgba(var(--main-fg), 0.16);
+	border-bottom: solid 1px rgba(var(--body-color), 0.16);
+	margin: 8px 0;
 }
diff --git a/webapp/src/widgets/menu/subMenuOption.scss b/webapp/src/widgets/menu/subMenuOption.scss
index 2cd6c2d53..bd1fc3734 100644
--- a/webapp/src/widgets/menu/subMenuOption.scss
+++ b/webapp/src/widgets/menu/subMenuOption.scss
@@ -6,11 +6,11 @@
         z-index: 16;
         min-width: 180px;
         background-color: rgb(var(--main-bg));
-        color: rgb(var(--main-fg));
+        color: rgb(var(--body-color));
         margin: 0 !important;
 
         border-radius: 3px;
-        box-shadow: rgba(var(--main-fg), 0.05) 0px 0px 0px 1px, rgba(var(--main-fg), 0.1) 0px 3px 6px, rgba(var(--main-fg), 0.2) 0px 9px 24px;
+        box-shadow: rgba(var(--body-color), 0.05) 0px 0px 0px 1px, rgba(var(--body-color), 0.1) 0px 3px 6px, rgba(var(--body-color), 0.2) 0px 9px 24px;
         left: 100%;
         &.top {
             bottom: 0;
@@ -22,7 +22,7 @@
 
     @media screen and (max-width: 430px) {
         .SubMenu {
-            background-color: rgba(var(--main-fg), 0.8) !important;
+            background-color: rgba(var(--body-color), 0.8) !important;
         }
     }
 }
diff --git a/webapp/src/widgets/switch.scss b/webapp/src/widgets/switch.scss
index 2352c9dcf..3a1b152d8 100644
--- a/webapp/src/widgets/switch.scss
+++ b/webapp/src/widgets/switch.scss
@@ -7,11 +7,11 @@
 	width: 26px;
 	border-radius: 44px;
 	padding: 2px;
-	background-color: rgba(135, 131, 120, 0.3);
+	background-color: rgba(var(--body-color), 0.24);
 	transition: background 200ms ease 0s, box-shadow 200ms ease 0s;
 
     &.on {
-        background-color: rgba(46, 170, 220);
+        background-color: rgb(var(--button-bg));
         .octo-switch-inner {
             transform: translateX(12px) translateY(0px);
         }
diff --git a/webapp/src/widgets/valueSelector.scss b/webapp/src/widgets/valueSelector.scss
index 2d8b099ab..c5cd7a77b 100644
--- a/webapp/src/widgets/valueSelector.scss
+++ b/webapp/src/widgets/valueSelector.scss
@@ -1,15 +1,16 @@
 .ValueSelector {
     width: 100%;
-    border-radius: 5px;
-    color: rgb(var(--main-fg));
+    border-radius: var(--default-rad);
+    color: rgb(var(--body-color));
+
     &:hover {
-        background-color: rgba(var(--main-fg), 0.1),
+        background-color: rgba(var(--body-color), 0.1),
     }
 
     > .octo-label {
         margin: 0 10px;
         &.empty {
-            color: rgba(var(--main-fg), 0.6);
+            color: rgba(var(--body-color), 0.6);
         }
     }
 
@@ -25,7 +26,7 @@
             .IconButton {
                 background-color: unset;
                 &:hover {
-                    background-color: rgba(var(--main-fg), 0.1);
+                    background-color: rgba(var(--body-color), 0.1);
                 }
             }
         }