diff --git a/src/components/button/__snapshots__/button.test.js.snap b/src/components/button/__snapshots__/button.test.js.snap
index 60084d1a..0803ead2 100644
--- a/src/components/button/__snapshots__/button.test.js.snap
+++ b/src/components/button/__snapshots__/button.test.js.snap
@@ -44,7 +44,8 @@ exports[`Borderless Button renders 1`] = `
   fill: #00CD51;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: rgba(255,255,255,0.0);
   background-color: rgba(255,255,255,0.0);
   color: #00CD51;
@@ -104,7 +105,7 @@ exports[`Button states renders loading icon 1`] = `
   padding: 4px 12px;
   transition: all 150ms;
   background-color: #00AB44;
-  color: #F6F7F7;
+  color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
   border-color: #00AB44;
@@ -125,18 +126,19 @@ exports[`Button states renders loading icon 1`] = `
 .c0.c0:hover {
   border-color: #42B861;
   background-color: #42B861;
-  color: #F6F7F7;
+  color: #FFFFFF;
   text-decoration: none;
 }
 
 .c0.c0:hover .button-icon {
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00CD51;
   background-color: #00CD51;
-  color: #F6F7F7;
+  color: #FFFFFF;
   box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
 }
 
@@ -147,7 +149,7 @@ exports[`Button states renders loading icon 1`] = `
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
 .c0.c0 .ntd-spinner {
@@ -156,12 +158,12 @@ exports[`Button states renders loading icon 1`] = `
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   animation: ntd-draw 1s linear infinite;
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
   width: 24px;
 }
 
 .c0.c0 .path {
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
 }
 
 .c1 {
@@ -255,7 +257,8 @@ exports[`Button states renders only icon 1`] = `
   fill: #00AB44;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00AB44;
   background-color: #DDFFEB;
   color: #00AB44;
@@ -376,7 +379,8 @@ exports[`Button states renders smaller only icon 1`] = `
   fill: #00AB44;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00AB44;
   background-color: #DDFFEB;
   color: #00AB44;
@@ -468,7 +472,7 @@ exports[`Default Button renders 1`] = `
   padding: 4px 12px;
   transition: all 150ms;
   background-color: #00AB44;
-  color: #F6F7F7;
+  color: #FFFFFF;
   border-width: 1px;
   border-style: solid;
   border-color: #00AB44;
@@ -485,18 +489,19 @@ exports[`Default Button renders 1`] = `
 .c0.c0:hover {
   border-color: #42B861;
   background-color: #42B861;
-  color: #F6F7F7;
+  color: #FFFFFF;
   text-decoration: none;
 }
 
 .c0.c0:hover .button-icon {
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00CD51;
   background-color: #00CD51;
-  color: #F6F7F7;
+  color: #FFFFFF;
   box-shadow: inset 0 4px 4px rgba(0,0,0,0.25);
 }
 
@@ -507,7 +512,7 @@ exports[`Default Button renders 1`] = `
 .c0.c0 .button-icon {
   height: 14px;
   width: 14px;
-  fill: #F6F7F7;
+  fill: #FFFFFF;
 }
 
 .c0.c0 .ntd-spinner {
@@ -516,12 +521,12 @@ exports[`Default Button renders 1`] = `
   stroke-dasharray: 100;
   stroke-dashoffset: 100;
   animation: ntd-draw 1s linear infinite;
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
   width: 24px;
 }
 
 .c0.c0 .path {
-  stroke: #F6F7F7;
+  stroke: #FFFFFF;
 }
 
 <button
@@ -581,7 +586,8 @@ exports[`Hollow Button renders 1`] = `
   fill: #00AB44;
 }
 
-.c0.c0:active {
+.c0.c0:active,
+.c0.c0[aria-expanded="true"] {
   border-color: #00AB44;
   background-color: #DDFFEB;
   color: #00AB44;
diff --git a/src/components/button/button.test.js b/src/components/button/button.test.js
index 50a3f5e5..4196644b 100644
--- a/src/components/button/button.test.js
+++ b/src/components/button/button.test.js
@@ -123,6 +123,20 @@ describe("Button states", () => {
     expect(button).toMatchSnapshot()
   })
 
+  it("renders active styles when active", () => {
+    const { container } = renderWithProviders(<Button label="Test" active />)
+    expect(container.firstChild).toHaveStyleRule("box-shadow", "inset 0 4px 4px rgba(0,0,0,0.25)", {
+      modifier: "&&",
+    })
+  })
+
+  it("renders active styles while its dropdown is expanded", () => {
+    const { container } = renderWithProviders(<Button label="Test" aria-expanded />)
+    expect(container.firstChild).toHaveStyleRule("box-shadow", "inset 0 4px 4px rgba(0,0,0,0.25)", {
+      modifier: '&&[aria-expanded="true"]',
+    })
+  })
+
   it("renders loading icon", () => {
     const { container, getByText, queryByTitle } = renderWithProviders(
       <Button label="Test prop text" icon="plus" isLoading />
@@ -158,7 +172,7 @@ describe("Default Button", () => {
     expect(button).toHaveStyleRule("border-color", "#00AB44", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
 
@@ -176,7 +190,7 @@ describe("Default Button", () => {
     expect(button).toHaveStyleRule("border-color", "#DB162F", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
   })
@@ -184,13 +198,13 @@ describe("Default Button", () => {
   it("renders for warning", () => {
     const { container } = renderWithProviders(<Button label="Test prop text" warning />)
     const button = container.firstChild
-    expect(button).toHaveStyleRule("background-color", "#FF9700", {
+    expect(button).toHaveStyleRule("background-color", "#DF8400", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("border-color", "#FF9700", {
+    expect(button).toHaveStyleRule("border-color", "#DF8400", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
   })
@@ -204,7 +218,7 @@ describe("Default Button", () => {
     expect(button).toHaveStyleRule("border-color", "#526161", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#F6F7F7", {
+    expect(button).toHaveStyleRule("color", "#FFFFFF", {
       modifier: "&&",
     })
   })
@@ -259,10 +273,10 @@ describe("Hollow Button", () => {
     expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("border-color", "#FF9700", {
+    expect(button).toHaveStyleRule("border-color", "#DF8400", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#FF9700", {
+    expect(button).toHaveStyleRule("color", "#DF8400", {
       modifier: "&&",
     })
   })
@@ -336,7 +350,7 @@ describe("Borderless Button", () => {
     expect(button).toHaveStyleRule("border-color", "rgba(255,255,255,0.0)", {
       modifier: "&&",
     })
-    expect(button).toHaveStyleRule("color", "#FF9700", {
+    expect(button).toHaveStyleRule("color", "#DF8400", {
       modifier: "&&",
     })
   })
diff --git a/src/components/button/styled.js b/src/components/button/styled.js
index dfdb6744..40267bc4 100644
--- a/src/components/button/styled.js
+++ b/src/components/button/styled.js
@@ -48,6 +48,8 @@ const getTextColor = props =>
   props.neutral
     ? getColor(props.flavour === HOLLOW ? "text" : "mainBackground")(props)
     : getColor(props.flavour === HOLLOW ? "secondaryColor" : "mainBackground")(props)
+const getBorderHoverColor = props =>
+  props.neutral ? getColor("inputBorderHover")(props) : getColor("primary")(props)
 const getHoverColor = props =>
   props.neutral ? getColor("generic")(props) : getColor("accent")(props)
 
@@ -100,8 +102,8 @@ const colorsByFlavour = ({ flavour = DEFAULT, danger, warning, iconColor, color
       bgHover: getAccentColor,
       bgActive: getAccentColor,
       border: getSpecialColor || getBorderColor,
-      borderHover: getSpecialColorHover || getPrimaryColor,
-      borderActive: getSpecialColorActive || getPrimaryColor,
+      borderHover: getSpecialColorHover || getBorderHoverColor,
+      borderActive: getSpecialColorActive || getBorderHoverColor,
       iconColor: specialIconColor || getSpecialColor || getPrimaryColor,
     },
     [BORDER_LESS]: {
@@ -190,14 +192,11 @@ export const StyledButton = styled.button.attrs(
       }
     }
 
-    &:active {
+    &:active,
+    &[aria-expanded="true"] {
       ${activeStyles}
     }
-    ${props =>
-      props.active &&
-      `
-      ${activeStyles}
-    `}
+    ${props => props.active && activeStyles}
 
     &:focus {
       outline: none;
diff --git a/src/components/drops/drop/index.js b/src/components/drops/drop/index.js
index 8c7fe825..fbbc54d2 100644
--- a/src/components/drops/drop/index.js
+++ b/src/components/drops/drop/index.js
@@ -8,6 +8,7 @@ import useForwardRef from "@/hooks/useForwardRef"
 import useDimensionChange from "./useDimensionChange"
 import useMakeUpdatePosition from "./useMakeUpdatePosition"
 import Container from "./container"
+import { withDropdownDefaults } from "../dropdownStyles"
 import backdropBlur from "@/components/templates/layer/mixins/backdropBlur"
 import styled from "styled-components"
 
@@ -39,8 +40,10 @@ const Drop = ({
   dataDrop = "drop-content",
   ref: parentRef,
   backdropProps = {},
-  ...rest
+  ...props
 }) => {
+  const rest = withDropdownDefaults(props)
+
   const [ref, setRef] = useForwardRef(parentRef)
 
   const updatePosition = useMakeUpdatePosition(
diff --git a/src/components/drops/dropdownStyles.js b/src/components/drops/dropdownStyles.js
new file mode 100644
index 00000000..8fb78dd2
--- /dev/null
+++ b/src/components/drops/dropdownStyles.js
@@ -0,0 +1,12 @@
+export const dropdownBorder = { side: "all", size: "1px", type: "solid", color: "border" }
+
+export const dropdownRound = 1
+
+export const withDropdownDefaults = props =>
+  props.background === "dropdown"
+    ? {
+        ...props,
+        border: props.border === undefined ? dropdownBorder : props.border,
+        round: props.round === undefined ? dropdownRound : props.round,
+      }
+    : props
diff --git a/src/components/drops/dropdownStyles.test.js b/src/components/drops/dropdownStyles.test.js
new file mode 100644
index 00000000..77f98892
--- /dev/null
+++ b/src/components/drops/dropdownStyles.test.js
@@ -0,0 +1,25 @@
+import { dropdownBorder, dropdownRound, withDropdownDefaults } from "./dropdownStyles"
+
+describe("withDropdownDefaults", () => {
+  it("adds the dropdown border and radius to dropdown backgrounds", () => {
+    expect(withDropdownDefaults({ background: "dropdown", padding: [2] })).toEqual({
+      background: "dropdown",
+      padding: [2],
+      border: dropdownBorder,
+      round: dropdownRound,
+    })
+  })
+
+  it("keeps explicit border and radius overrides", () => {
+    expect(withDropdownDefaults({ background: "dropdown", border: false, round: 2 })).toEqual({
+      background: "dropdown",
+      border: false,
+      round: 2,
+    })
+  })
+
+  it("leaves other backgrounds untouched", () => {
+    const props = { background: "tooltip" }
+    expect(withDropdownDefaults(props)).toBe(props)
+  })
+})
diff --git a/src/components/drops/menu/dropdown.js b/src/components/drops/menu/dropdown.js
index 88474a3e..4ca54384 100644
--- a/src/components/drops/menu/dropdown.js
+++ b/src/components/drops/menu/dropdown.js
@@ -6,6 +6,7 @@ import { Text } from "@/components/typography"
 import Search from "@/components/search"
 import Box from "@/components/templates/box"
 import { mergeRefs } from "@/utils"
+import { dropdownBorder, dropdownRound } from "../dropdownStyles"
 
 const Container = styled(Flex)`
   ${({ hideShadow }) =>
@@ -79,6 +80,8 @@ const Dropdown = ({
       as="ul"
       role="listbox"
       background="dropdown"
+      border={dropdownBorder}
+      round={dropdownRound}
       hideShadow={hideShadow}
       padding={[0]}
       margin={[1, 0]}
diff --git a/src/components/icon/assets/add_more_charts.svg b/src/components/icon/assets/add_more_charts.svg
new file mode 100644
index 00000000..700a5a41
--- /dev/null
+++ b/src/components/icon/assets/add_more_charts.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.4562 7C10.4737 7.14875 10.5 7.28875 10.5 7.4375C10.5 9.61625 8.74125 11.375 6.5625 11.375C4.38375 11.375 2.625 9.61625 2.625 7.4375C2.625 5.25875 4.38375 3.5 6.5625 3.5C6.71125 3.5 6.85125 3.52625 7 3.54375V2.65125C6.85125 2.63375 6.71125 2.625 6.5625 2.625C3.91125 2.625 1.75 4.78625 1.75 7.4375C1.75 10.0887 3.91125 12.25 6.5625 12.25C9.21375 12.25 11.375 10.0887 11.375 7.4375C11.375 7.28875 11.3663 7.14875 11.3488 7H10.4562ZM8.75 7H7.875V8.75H8.75V7ZM5.25 8.75V7.875H4.375V8.75H5.25ZM6.125 8.75H7V5.25H6.125V8.75ZM11.375 2.625V0.875H10.5V2.625H8.75V3.5H10.5V5.25H11.375V3.5H13.125V2.625H11.375Z"/>
+</svg>
diff --git a/src/components/icon/assets/columns.svg b/src/components/icon/assets/columns.svg
new file mode 100644
index 00000000..1a27976b
--- /dev/null
+++ b/src/components/icon/assets/columns.svg
@@ -0,0 +1,4 @@
+<!-- Font Awesome Free 7.2.0 "table-columns" by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (CC BY 4.0) -->
+<svg width="448" height="512" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 96C0 60.7 28.7 32 64 32l320 0c35.3 0 64 28.7 64 64l0 320c0 35.3-28.7 64-64 64L64 480c-35.3 0-64-28.7-64-64L0 96zm64 64l0 256 128 0 0-256-128 0zm320 0l-128 0 0 256 128 0 0-256z" />
+</svg>
diff --git a/src/components/icon/assets/dashboard_import.svg b/src/components/icon/assets/dashboard_import.svg
new file mode 100644
index 00000000..1607ba9a
--- /dev/null
+++ b/src/components/icon/assets/dashboard_import.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.35644 2.72222H12.4444V1.55556H8.35644C7.287 1.55556 6.41667 2.42589 6.41667 3.49533V3.88889H1.55556V9.81944C1.55556 11.2692 2.73078 12.4444 4.18056 12.4444H9.81944C11.2692 12.4444 12.4444 11.2692 12.4444 9.81944V3.88889H8.55556V5.05556H11.2778V9.81944C11.2778 10.6237 10.6237 11.2778 9.81944 11.2778H4.18056C3.37633 11.2778 2.72222 10.6237 2.72222 9.81944V5.05556H6.41667V7.92478L5.07889 6.58778C4.851 6.35989 4.48156 6.35989 4.25367 6.58778C4.02578 6.81567 4.02578 7.18511 4.25367 7.413L6.99922 10.1586L9.74478 7.413C9.97267 7.18511 9.97267 6.81567 9.74478 6.58778C9.51689 6.35989 9.14744 6.35989 8.91956 6.58778L7.58178 7.92556V3.49533C7.58333 3.06911 7.93022 2.72222 8.35644 2.72222Z"/>
+</svg>
diff --git a/src/components/icon/assets/nav_reset.svg b/src/components/icon/assets/nav_reset.svg
new file mode 100644
index 00000000..fea55cc8
--- /dev/null
+++ b/src/components/icon/assets/nav_reset.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.3569 2.72222H11.8611C12.1831 2.72222 12.4444 2.46089 12.4444 2.13889C12.4444 1.81689 12.1831 1.55556 11.8611 1.55556H7.77778V5.63889C7.77778 5.96089 8.03911 6.22222 8.36111 6.22222C8.68311 6.22222 8.94444 5.96089 8.94444 5.63889V3.20911C10.3242 3.91922 11.2778 5.34411 11.2778 7C11.2778 9.359 9.359 11.2778 7 11.2778C4.641 11.2778 2.72222 9.359 2.72222 7C2.72222 4.907 4.23422 3.164 6.22222 2.79689V1.61778C3.58478 1.99578 1.55556 4.25756 1.55556 7C1.55556 10.0069 3.99311 12.4444 7 12.4444C10.0069 12.4444 12.4444 10.0069 12.4444 7C12.4444 5.26089 11.627 3.717 10.3569 2.72222Z"/>
+</svg>
diff --git a/src/components/icon/iconsList.js b/src/components/icon/iconsList.js
index 363587ab..61116028 100644
--- a/src/components/icon/iconsList.js
+++ b/src/components/icon/iconsList.js
@@ -1,3 +1,4 @@
+import add_more_charts from "./assets/add_more_charts.svg"
 import add_node from "./assets/add_node.svg"
 import add_user from "./assets/add_user.svg"
 import aggregation_avg from "./assets/aggregation_avg.svg"
@@ -78,6 +79,7 @@ import cluster_spaces from "./assets/cluster_spaces.svg"
 import code from "./assets/code.svg"
 import collapse from "./assets/collapse.svg"
 import collect from "./assets/collect.svg"
+import columns from "./assets/columns.svg"
 import community from "./assets/community.svg"
 import connection_to_cloud from "./assets/connection_to_cloud.svg"
 import connectivityStatusLive from "./assets/connectivity_status_live.svg"
@@ -94,6 +96,7 @@ import cpu from "./assets/cpu.svg"
 import cross_s from "./assets/cross_s.svg"
 import dashboard from "./assets/dashboard.svg"
 import dashboard_add from "./assets/dashboard_add.svg"
+import dashboard_import from "./assets/dashboard_import.svg"
 import dashboards from "./assets/dashboards.svg"
 import data_retention from "./assets/data_retention.svg"
 import database from "./assets/database.svg"
@@ -202,6 +205,7 @@ import monitoring from "./assets/monitoring.svg"
 import more from "./assets/more.svg"
 import nav_arrow_goto from "./assets/nav_arrow_goto.svg"
 import nav_dots from "./assets/nav_dots.svg"
+import nav_reset from "./assets/nav_reset.svg"
 import navLeft from "./assets/nav_left.svg"
 import navRight from "./assets/nav_right.svg"
 import netdata from "./assets/netdata.svg"
@@ -483,6 +487,7 @@ import D from "./assets/D.svg"
 import L from "./assets/L.svg"
 
 export const iconsList = {
+  add_more_charts,
   add_node,
   add_user,
   aggregation_avg,
@@ -563,6 +568,7 @@ export const iconsList = {
   code,
   collapse,
   collect,
+  columns,
   community,
   connection_to_cloud,
   connectivityStatusLive,
@@ -579,6 +585,7 @@ export const iconsList = {
   cross_s,
   dashboard_add,
   dashboard,
+  dashboard_import,
   dashboards,
   data_retention,
   database,
@@ -687,6 +694,7 @@ export const iconsList = {
   more,
   nav_arrow_goto,
   nav_dots,
+  nav_reset,
   navLeft,
   navRight,
   netdata,
diff --git a/src/components/select/index.js b/src/components/select/index.js
index 98dd5f46..af102fc8 100644
--- a/src/components/select/index.js
+++ b/src/components/select/index.js
@@ -240,7 +240,7 @@ const makeCustomStyles = (theme, { minWidth, ...providedStyles } = {}) => ({
     color: getOptionColor(theme, state),
     backgroundColor: getOptionBackground(theme, state),
     ":hover": {
-      backgroundColor: theme.colors.secondaryHighlight,
+      backgroundColor: theme.colors.menuItemHover,
       color: theme.colors.text,
     },
     fontSize,
diff --git a/src/components/table/body/header/cell.js b/src/components/table/body/header/cell.js
index c65469de..927a8df1 100644
--- a/src/components/table/body/header/cell.js
+++ b/src/components/table/body/header/cell.js
@@ -123,7 +123,7 @@ const BodyHeaderCell = ({
       style={enableColumnReordering ? sortableStyle : undefined}
       flex={getColumnFlex(column, header, table.getState().columnSizing?.[column.id] != null)}
       width={`${header.subHeaders.length ? header.subHeaders.reduce((s, h) => s + h.column.getSize(), 0) : column.getSize()}px`}
-      height={{ min: "45px" }}
+      height="40px"
       position="relative"
       {...(column.getCanSort() &&
         coloredSortedColumn &&
diff --git a/src/components/table/body/header/index.js b/src/components/table/body/header/index.js
index 33e9dcab..e64e1747 100644
--- a/src/components/table/body/header/index.js
+++ b/src/components/table/body/header/index.js
@@ -38,7 +38,7 @@ const HeaderGroup = ({ id, headers, testPrefix, rowReverse, enableColumnReorderi
       id={id}
       data-testid={`netdata-table-headRow${testPrefix}`}
       flex
-      background="mainBackground"
+      background="panelBg"
       rowReverse={rowReverse}
     >
       {headers.map((header, index) => (
diff --git a/src/components/table/body/row.js b/src/components/table/body/row.js
index ec5bac58..abaf7d11 100644
--- a/src/components/table/body/row.js
+++ b/src/components/table/body/row.js
@@ -138,7 +138,7 @@ const rerenderSelector = state => ({
 
 const StyledRow = styled(Flex)`
   &:hover .row-content {
-    background: ${getColor("mainBackgroundHover")};
+    background: ${getColor("tableRowBgHover")};
   }
 `
 
@@ -148,9 +148,13 @@ const DirectStyledRow = styled(Flex).attrs({
   background: "mainBackground",
   border: { side: "bottom" },
 })`
+  .row-content {
+    background-color: ${getColor("mainBackground")};
+  }
+
   &:hover,
   &:hover .row-content {
-    background: ${getColor("mainBackgroundHover")};
+    background-color: ${getColor("tableRowBgHover")};
   }
 `
 
@@ -216,7 +220,6 @@ const TableRow = ({
               borderRight: `1px solid ${getColor("border")({ theme })}`,
               zIndex: zIndex || 10,
               flex: `0 0 ${table.getLeftTotalSize()}px`,
-              backgroundColor: getColor("mainBackground")({ theme }),
             }}
           >
             {row.getLeftVisibleCells().map((cell, index) => (
@@ -239,7 +242,6 @@ const TableRow = ({
             display: "flex",
             width: `${table.getCenterTotalSize()}px`,
             flex: "1 0 auto",
-            backgroundColor: getColor("mainBackground")({ theme }),
           }}
         >
           {row.getCenterVisibleCells().map((cell, index) => (
@@ -266,7 +268,6 @@ const TableRow = ({
               zIndex: zIndex || 10,
               flex: `0 0 ${table.getRightTotalSize()}px`,
               flexDirection: "row-reverse",
-              backgroundColor: getColor("mainBackground")({ theme }),
             }}
           >
             {row.getRightVisibleCells().map((cell, index) => (
@@ -296,7 +297,7 @@ const TableRow = ({
             flex={false}
             background="mainBackground"
             _hover={{
-              background: "mainBackgroundHover",
+              background: "tableRowBgHover",
             }}
             className="row-content"
           >
@@ -318,7 +319,7 @@ const TableRow = ({
           flex="grow"
           background="mainBackground"
           _hover={{
-            background: "mainBackgroundHover",
+            background: "tableRowBgHover",
           }}
           className="row-content"
         >
@@ -346,7 +347,7 @@ const TableRow = ({
             flex={false}
             background="mainBackground"
             _hover={{
-              background: "mainBackgroundHover",
+              background: "tableRowBgHover",
             }}
             rowReverse
             className="row-content"
@@ -383,7 +384,7 @@ const TableRow = ({
         flex: true,
         column: true,
         background: "mainBackground",
-        _hover: { background: "mainBackgroundHover" },
+        _hover: { background: "tableRowBgHover" },
         border: { side: "bottom" },
       })}
     >
diff --git a/src/components/table/components/action.js b/src/components/table/components/action.js
index d298d185..d252aa0e 100644
--- a/src/components/table/components/action.js
+++ b/src/components/table/components/action.js
@@ -131,7 +131,7 @@ const Action = ({
           cursor={disabled ? "auto" : "pointer"}
           key={id}
           round
-          background={label ? null : background}
+          background={label ? null : rest["aria-expanded"] ? "borderSecondary" : background}
         >
           <Component {...componentProps} />
         </Flex>
diff --git a/src/components/table/header/actions/columnVisibility/columnsMenu.js b/src/components/table/header/actions/columnVisibility/columnsMenu.js
index 94856433..5b2809cb 100644
--- a/src/components/table/header/actions/columnVisibility/columnsMenu.js
+++ b/src/components/table/header/actions/columnVisibility/columnsMenu.js
@@ -100,7 +100,7 @@ const ColumnsMenu = ({
           }}
           padding={[3, 3, 1]}
         >
-          <Text color="textLite">Edit columns</Text>
+          <Text color="textLite">Show columns</Text>
         </Flex>
 
         <Flex padding={[2, 3]}>
diff --git a/src/components/table/header/actions/columnVisibility/index.js b/src/components/table/header/actions/columnVisibility/index.js
index 7f2ea28b..146edd3c 100644
--- a/src/components/table/header/actions/columnVisibility/index.js
+++ b/src/components/table/header/actions/columnVisibility/index.js
@@ -1,5 +1,7 @@
 import React, { useRef, useMemo } from "react"
 import useToggle from "@/hooks/useToggle"
+import Tooltip from "@/components/drops/tooltip"
+import { Button } from "@/components/button"
 import BulkAction from "../action"
 import ColumnsMenu from "./columnsMenu"
 import { supportedBulkActions } from "../useActions"
@@ -14,6 +16,7 @@ const excludedById = {
 
 const ColumnVisibilityAction = ({
   alwaysEnabled,
+  buttonFlavour,
   columnPinning = {},
   dataGa,
   enableColumnPinning,
@@ -34,6 +37,7 @@ const ColumnVisibilityAction = ({
   const actionRef = useRef()
   const disabled = typeof isDisabled === "function" ? isDisabled() : isDisabled
   const visible = typeof isVisible === "function" ? isVisible() : isVisible
+  const triggerDisabled = (!alwaysEnabled && selectedRows?.length < 1) || disabled
 
   const columnGroups = useMemo(() => {
     const groups = []
@@ -99,20 +103,45 @@ const ColumnVisibilityAction = ({
 
   return (
     <>
-      <BulkAction
-        ref={actionRef}
-        testPrefix={`-bulk${testPrefix}`}
-        visible={visible}
-        id={id}
-        icon={icon}
-        handleAction={() => handleAction(selectedRows, table)}
-        tooltipText={tooltipText}
-        disabled={(!alwaysEnabled && selectedRows?.length < 1) || disabled}
-        background="elementBackground"
-        selectedRows={selectedRows}
-        dataGa={dataGa}
-        {...rest}
-      />
+      {buttonFlavour === "hollow" ? (
+        visible !== false && (
+          <Tooltip content={tooltipText}>
+            <Button
+              ref={actionRef}
+              aria-label={tooltipText}
+              aria-expanded={!!isOpen}
+              data-ga={dataGa}
+              data-testid={`netdata-table-action-${id}-bulk${testPrefix}-bulk`}
+              disabled={triggerDisabled}
+              flavour="hollow"
+              icon={icon}
+              onClick={event => {
+                event.stopPropagation()
+                handleAction(selectedRows, table)
+              }}
+              small
+              type="button"
+            />
+          </Tooltip>
+        )
+      ) : (
+        <BulkAction
+          ref={actionRef}
+          aria-label={tooltipText}
+          aria-expanded={!!isOpen}
+          testPrefix={`-bulk${testPrefix}`}
+          visible={visible}
+          id={id}
+          icon={icon}
+          handleAction={() => handleAction(selectedRows, table)}
+          tooltipText={tooltipText}
+          disabled={triggerDisabled}
+          background="elementBackground"
+          selectedRows={selectedRows}
+          dataGa={dataGa}
+          {...rest}
+        />
+      )}
       <ColumnsMenu
         columns={columns}
         columnGroups={columnGroups}
diff --git a/src/components/table/header/actions/index.js b/src/components/table/header/actions/index.js
index ec252180..c8c540f8 100644
--- a/src/components/table/header/actions/index.js
+++ b/src/components/table/header/actions/index.js
@@ -36,6 +36,7 @@ const useSelectedRowsObserver = (table, { onRowSelected = noop, rowSelection })
 const HeaderActions = ({
   bulkActions,
   columnPinning,
+  columnVisibilityFlavour,
   dataGa,
   enableColumnVisibility,
   enableColumnPinning,
@@ -65,6 +66,7 @@ const HeaderActions = ({
         />
       ))}
       <ColumnVisibility
+        buttonFlavour={columnVisibilityFlavour}
         isVisible={enableColumnVisibility}
         table={table}
         testPrefix={testPrefix}
diff --git a/src/components/table/header/actions/useActions.js b/src/components/table/header/actions/useActions.js
index 1b569971..63c082d9 100644
--- a/src/components/table/header/actions/useActions.js
+++ b/src/components/table/header/actions/useActions.js
@@ -16,7 +16,7 @@ export const supportedBulkActions = {
   userSettings: { icon: "user", confirmation: false, tooltipText: "User Settings" },
   addEntry: { icon: "plus", alwaysEnabled: true, flavour: "default", iconColor: "white" },
   remove: { icon: "removeNode", confirmation: true, confirmLabel: "Yes", declineLabel: "No" },
-  columnVisibility: { icon: "gear", alwaysEnabled: true },
+  columnVisibility: { icon: "columns", alwaysEnabled: true, tooltipText: "Columns" },
 }
 
 export default actions =>
diff --git a/src/components/table/header/index.js b/src/components/table/header/index.js
index 7896ff49..2a816d64 100644
--- a/src/components/table/header/index.js
+++ b/src/components/table/header/index.js
@@ -43,11 +43,12 @@ const Header = ({
       data-noprint
       width="100%"
       zIndex={10}
-      background="mainBackground"
+      background="panelBgGrad"
+      position="relative"
       gap={1}
       alignItems="center"
-      padding={[2, 3]}
-      round={{ side: "top", size: 1 }}
+      padding={[2, 4]}
+      border={{ side: "bottom", color: "border" }}
       flexWrap
       {...tableMeta.bulkActionsStyles}
     >
diff --git a/src/components/table/headerActionsOrder.test.js b/src/components/table/headerActionsOrder.test.js
index 437296bc..94b1b06f 100644
--- a/src/components/table/headerActionsOrder.test.js
+++ b/src/components/table/headerActionsOrder.test.js
@@ -1,4 +1,5 @@
 import React from "react"
+import { fireEvent } from "@testing-library/react"
 import { renderWithProviders } from "testUtilities"
 import Table from "./table"
 
@@ -41,3 +42,36 @@ describe("Table header action order", () => {
     expectBefore(getByTestId("bulk-actions"), getByTestId("trailing-control"))
   })
 })
+
+describe("Table column visibility trigger", () => {
+  it("renders a subtle labelled columns trigger that opens the columns menu", () => {
+    const { getByRole, getByTestId, getByText, queryByText } = renderTable()
+
+    const trigger = getByRole("button", { name: "Columns" })
+    expect(trigger.querySelector('[title="columns"]')).not.toBeNull()
+    expect(trigger.parentElement).not.toBe(getByTestId("bulk-actions"))
+    expect(queryByText("Show columns")).not.toBeInTheDocument()
+
+    fireEvent.click(trigger)
+
+    expect(getByText("Show columns")).toBeInTheDocument()
+  })
+
+  it("renders an outlined columns button when opted in", () => {
+    const { getByRole, getByTestId, getByText } = renderTable({
+      columnVisibilityFlavour: "hollow",
+    })
+
+    const trigger = getByRole("button", { name: "Columns" })
+    expect(trigger.querySelector('[title="columns"]')).not.toBeNull()
+    expect(trigger.parentElement).toBe(getByTestId("bulk-actions"))
+    expect(trigger).toHaveAttribute(
+      "data-testid",
+      "netdata-table-action-columnVisibility-bulk-bulk"
+    )
+
+    fireEvent.click(trigger)
+
+    expect(getByText("Show columns")).toBeInTheDocument()
+  })
+})
diff --git a/src/components/table/index.d.ts b/src/components/table/index.d.ts
index ce222983..cb075be9 100644
--- a/src/components/table/index.d.ts
+++ b/src/components/table/index.d.ts
@@ -138,8 +138,10 @@ export type TableProps<T = any, D = any> = {
   globalFilterFn?: FilterFnOption<T>
   columnVisibility?: VisibilityTableState
   enableColumnVisibility?: boolean
+  columnVisibilityFlavour?: "borderless" | "hollow"
   enableColumnPinning?: boolean
   enableGroupByControl?: boolean
+  bordered?: boolean
   headerActionsBeforeChildren?: boolean
   headerChildren?: ReactNode
   onGlobalSearchChange?: (value: any) => void
diff --git a/src/components/table/table.js b/src/components/table/table.js
index 99eba7fc..86985ed9 100644
--- a/src/components/table/table.js
+++ b/src/components/table/table.js
@@ -45,6 +45,7 @@ const filterFns = {
 const emptyArray = []
 
 const tableDefaultProps = {
+  bordered: true,
   coloredSortedColumn: true,
   enableColumnPinning: false,
   enableColumnReordering: false,
@@ -73,6 +74,7 @@ const tableDefaultProps = {
 
 const Table = memo(props => {
   const {
+    bordered = tableDefaultProps.bordered,
     bulkActions,
     headerChildren,
     headerActionsBeforeChildren = tableDefaultProps.headerActionsBeforeChildren,
@@ -90,6 +92,7 @@ const Table = memo(props => {
 
     enableColumnVisibility = tableDefaultProps.enableColumnVisibility,
     columnVisibility: defaultColumnVisibility,
+    columnVisibilityFlavour,
     onColumnVisibilityChange: visibilityChangeCb = tableDefaultProps.onColumnVisibilityChange,
 
     columnSizing: defaultColumnSizing,
@@ -301,6 +304,7 @@ const Table = memo(props => {
       rowSelection={rowSelection}
       bulkActions={bulkActions}
       columnPinning={columnPinning}
+      columnVisibilityFlavour={columnVisibilityFlavour}
       dataGa={dataGa}
       enableColumnVisibility={enableColumnVisibility}
       enableColumnPinning={enableColumnPinning}
@@ -319,6 +323,8 @@ const Table = memo(props => {
       ref={ref}
       className={className}
       width={width}
+      border={bordered ? { side: "all", color: "border" } : undefined}
+      round={1}
     >
       <Header
         q={globalFilter}
diff --git a/src/components/tabs/__snapshots__/tabs.test.js.snap b/src/components/tabs/__snapshots__/tabs.test.js.snap
index 839d8ea0..fdb4a2ea 100644
--- a/src/components/tabs/__snapshots__/tabs.test.js.snap
+++ b/src/components/tabs/__snapshots__/tabs.test.js.snap
@@ -15,9 +15,9 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   flex-wrap: nowrap;
   align-items: center;
   justify-content: start;
-  padding: 0 2px;
+  padding: 0 16px;
   color: #526161;
-  border-bottom: 1px solid #E4E8E8;
+  border-bottom: 1px solid #DBE1E1;
   overflow-y: hidden;
   overflow-x: auto;
 }
@@ -51,9 +51,8 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   cursor: pointer;
   opacity: 1;
   pointer-events: auto;
-  margin-bottom: -1px;
   border-bottom-color: #42B861;
-  background: #F1FFF7;
+  background: rgba(255,255,255,0.0);
 }
 
 .c4>span {
@@ -75,13 +74,12 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
   cursor: pointer;
   opacity: 1;
   pointer-events: auto;
-  margin-bottom: -1px;
-  border-bottom-color: #E4E8E8;
-  background: #F6F7F7;
+  border-bottom-color: #DBE1E1;
+  background: rgba(255,255,255,0.0);
 }
 
 .c5>span {
-  color: #708585;
+  color: #526161;
 }
 
 .c5:hover {
@@ -98,7 +96,7 @@ exports[`Tabs states  * should render uncontrolled 1`] = `
     flex="0"
     justifycontent="start"
     overflow="[object Object]"
-    padding="0,0.5"
+    padding="0,4"
   >
     <div
       alignitems="center"
diff --git a/src/components/tabs/styled.js b/src/components/tabs/styled.js
index d365d664..74aa8a76 100644
--- a/src/components/tabs/styled.js
+++ b/src/components/tabs/styled.js
@@ -14,7 +14,7 @@ export const StyledTabs = styled(Flex).attrs(props => ({
   flexWrap: false,
   justifyContent: "start",
   alignItems: "center",
-  padding: [0, 0.5],
+  padding: props.column ? [0, 0.5] : [0, 4],
   flex: false,
   border: !props.noDefaultBorder && {
     side: "bottom",
@@ -35,17 +35,17 @@ export const StyledTabs = styled(Flex).attrs(props => ({
 `
 
 const colorsByFlavour = {
-  success: { background: "menuItemSelected", borderColor: "border", color: "menuItem" },
-  warning: { background: "warningSemi", borderColor: "border", color: "menuItem" },
-  error: { background: "errorSemi", borderColor: "border", color: "menuItem" },
-  default: { background: "modalBackground", borderColor: "border", color: "menuItem" },
+  success: { background: "tabActiveBackground", borderColor: "border", color: "tabItem" },
+  warning: { background: "warningSemi", borderColor: "border", color: "tabItem" },
+  error: { background: "errorSemi", borderColor: "border", color: "tabItem" },
+  default: { background: "modalBackground", borderColor: "border", color: "tabItem" },
 }
 
 const activeColorsByFlavour = {
   success: { ...colorsByFlavour.success, borderColor: "primary", color: "primary" },
   warning: { ...colorsByFlavour.warning, borderColor: "warning", color: "warning" },
   error: { ...colorsByFlavour.error, borderColor: "error", color: "error" },
-  default: { background: "menuItemSelected", borderColor: "accent", color: "primary" },
+  default: { background: "tabActiveBackground", borderColor: "accent", color: "primary" },
 }
 
 const hoverColorsByFlavour = {
@@ -61,7 +61,7 @@ const colors = ({ theme, active, green, flavour }) => {
 
   const styles = [
     `border-bottom-color: ${getColor(borderColor)({ theme })};`,
-    `background: ${getColor(background)({ theme })};`,
+    `background: ${getColor(theme.name === "Dark" ? background : ["transparent", "full"])({ theme })};`,
     `& > span { color: ${getColor(color)({ theme })}; }`,
   ]
 
@@ -100,8 +100,6 @@ export const StyledTab = styled(Flex).attrs(props => ({
 
   pointer-events: ${({ disabled }) => (disabled ? "none" : "auto")};
 
-  margin-bottom: -1px;
-
   ${colors}
 `
 
diff --git a/src/components/templates/mixins/background.js b/src/components/templates/mixins/background.js
index 05067a3c..dbbf0986 100644
--- a/src/components/templates/mixins/background.js
+++ b/src/components/templates/mixins/background.js
@@ -7,5 +7,9 @@ export default ({ theme, background, backgroundOpacity }) => {
     ? getRgbColor(background, backgroundOpacity)({ theme })
     : getColor(background)({ theme })
 
-  return value && `background-color: ${value};`
+  if (!value) return value
+
+  return typeof value === "string" && value.startsWith("linear-gradient")
+    ? `background: ${value};`
+    : `background-color: ${value};`
 }
diff --git a/src/components/templates/mixins/background.test.js b/src/components/templates/mixins/background.test.js
index 99afe8a5..24d6e289 100644
--- a/src/components/templates/mixins/background.test.js
+++ b/src/components/templates/mixins/background.test.js
@@ -11,6 +11,18 @@ it("renders color", () => {
   )
 })
 
+it("renders gradient", () => {
+  expect(background({ theme, background: "panelBgGrad" })).toBe(
+    `background: ${theme.colors.panelBgGrad};`
+  )
+})
+
+it("renders unresolved color path", () => {
+  expect(background({ theme, background: ["invalid", "path"] })).toBe(
+    `background-color: invalid,path;`
+  )
+})
+
 it("renders invalid color", () => {
   expect(background({ theme, background: "invalid" })).toBe(`background-color: invalid;`)
 })
diff --git a/src/components/toggle/__snapshots__/toggle.test.js.snap b/src/components/toggle/__snapshots__/toggle.test.js.snap
index 767fe8ba..7217d42e 100644
--- a/src/components/toggle/__snapshots__/toggle.test.js.snap
+++ b/src/components/toggle/__snapshots__/toggle.test.js.snap
@@ -26,8 +26,8 @@ exports[`Toggle test  * should render with labels 1`] = `
   box-sizing: border-box;
   width: 40px;
   height: 20px;
-  background: #F6F7F7;
-  border: 1px solid #E4E8E8;
+  background: #FFFFFF;
+  border: 1px solid #DBE1E1;
   border-radius: 100px;
   transition: unset;
   display: block;
@@ -121,8 +121,8 @@ exports[`Toggle test  * should render with required props 1`] = `
   box-sizing: border-box;
   width: 40px;
   height: 20px;
-  background: #F6F7F7;
-  border: 1px solid #E4E8E8;
+  background: #FFFFFF;
+  border: 1px solid #DBE1E1;
   border-radius: 100px;
   transition: unset;
   display: block;
diff --git a/src/components/toggle/toggle.test.js b/src/components/toggle/toggle.test.js
index 6f5d09c3..9bde3e21 100644
--- a/src/components/toggle/toggle.test.js
+++ b/src/components/toggle/toggle.test.js
@@ -21,7 +21,7 @@ describe("Toggle test", () => {
     expect(checkbox).toBeInTheDocument()
 
     const toggle = getByRole("switch")
-    expect(toggle).toHaveStyleRule("background", "#F6F7F7")
+    expect(toggle).toHaveStyleRule("background", "#FFFFFF")
     expect(toggle).toHaveStyleRule("background-color", "#35414A", { modifier: ":after" })
     expect(container).toMatchSnapshot()
   })
diff --git a/src/index.js b/src/index.js
index ff7fcfec..7a66a799 100644
--- a/src/index.js
+++ b/src/index.js
@@ -73,6 +73,7 @@ export {
   ItemContainer as MenuItemContainer,
 } from "./components/drops/menu/dropdownItem"
 export { default as MenuButton } from "./components/drops/menu/menuButton"
+export { dropdownBorder, dropdownRound } from "./components/drops/dropdownStyles"
 
 export { default as Flex } from "./components/templates/flex"
 export { default as makeFlex } from "./components/templates/flex/flex"
diff --git a/src/theme/dark/colors.js b/src/theme/dark/colors.js
index dcbbf1a7..43f791ac 100644
--- a/src/theme/dark/colors.js
+++ b/src/theme/dark/colors.js
@@ -8,7 +8,7 @@ const appColors = {
   borderSecondary: rawColors.neutral.grey35,
   disabled: rawColors.neutral.grey100,
   disabledBackground: rawColors.neutral.grey100,
-  dropdown: rawColors.neutral.grey40,
+  dropdown: rawColors.neutral.grey30,
   dropdownShadow: rawColors.shadows.dropdownDark,
   elementBackground: rawColors.neutral.grey35,
   elementBackgroundHover: rawColors.neutral.tuna,
@@ -18,8 +18,10 @@ const appColors = {
   modalTabsBackground: rawColors.neutral.grey20,
   modalBackground: rawColors.neutral.grey30,
   modalInfoBackground: rawColors.neutral.grey50,
-  menuItemSelected: rawColors.green.green30,
-  menuItemHover: rawColors.green.green10,
+  menuItemSelected: rawColors.neutral.grey30,
+  menuItemHover: rawColors.neutral.grey40,
+  tabActiveBackground: rawColors.green.green30,
+  tabItem: rawColors.neutral.grey155,
   scrollBarTrack: rawColors.neutral.grey25,
   scrollBarThumb: rawColors.neutral.grey50,
   scrollBarThumbHover: rawColors.neutral.grey100,
@@ -51,7 +53,7 @@ const appColors = {
   successBackground: rawColors.green.green50,
   successText: rawColors.green.green100,
 
-  warning: rawColors.yellow.yellow80,
+  warning: rawColors.yellow.yellow60,
   warningLite: rawColors.yellow.yellow190,
   warningSemi: rawColors.yellow.yellow20,
   warningBackground: rawColors.yellow.yellow60,
@@ -87,7 +89,7 @@ const appColors = {
   tooltipText: rawColors.neutral.grey150,
   tooltipBg: rawColors.neutral.grey10,
   bright: rawColors.neutral.white,
-  text: rawColors.neutral.grey155,
+  text: rawColors.neutral.grey150,
   textLite: rawColors.neutral.grey120,
   textNoFocus: rawColors.neutral.grey105,
   textFocus: rawColors.neutral.grey160,
@@ -100,6 +102,7 @@ const appColors = {
   key: rawColors.neutral.iron,
   panel: rawColors.neutral.limedSpruce,
   panelBg: rawColors.neutral.grey25,
+  panelBgGrad: `linear-gradient(to right, ${rawColors.neutral.grey25} 0%, ${rawColors.neutral.grey15} 50%, ${rawColors.neutral.grey25} 100%)`,
   mainChartBg: rawColors.neutral.grey25,
   mainChartHeaderBg: rawColors.neutral.grey35,
   mainChartBorder: rawColors.neutral.grey25,
@@ -140,12 +143,11 @@ const appColors = {
   idleClear: rawColors.green.green20,
 
   // Table
-  dropdownTable: rawColors.neutral.eerieBlack,
-  tableRowBgHover: rawColors.neutral.grey35,
+  tableRowBgHover: rawColors.neutral.grey25,
   tableRowBg: rawColors.neutral.grey25,
-  tableRowBg2: rawColors.neutral.grey20,
-  tableRowBg2Hover: rawColors.neutral.grey35,
-  columnHighlight: rawColors.green.green30,
+  tableRowBg2: rawColors.neutral.grey25,
+  tableRowBg2Hover: rawColors.neutral.grey25,
+  columnHighlight: rawColors.neutral.grey35,
 
   // Progress Bare
   progressBg: rawColors.neutral.bluebayoux,
diff --git a/src/theme/default/colors.js b/src/theme/default/colors.js
index 59fc2f14..21c8b6de 100644
--- a/src/theme/default/colors.js
+++ b/src/theme/default/colors.js
@@ -4,22 +4,24 @@ const appColors = {
   primary: rawColors.green.green100,
   accent: rawColors.green.chateau,
   main: rawColors.neutral.limedSpruce,
-  border: rawColors.neutral.grey185,
-  borderSecondary: rawColors.neutral.grey180,
+  border: rawColors.neutral.grey180,
+  borderSecondary: rawColors.neutral.grey175,
   disabled: rawColors.neutral.grey160,
   disabledBackground: rawColors.neutral.grey160,
   dropdown: rawColors.neutral.white,
   dropdownShadow: rawColors.shadows.dropdownLight,
   elementBackground: rawColors.neutral.blackhaze,
   elementBackgroundHover: rawColors.neutral.white,
-  mainBackground: rawColors.neutral.grey195,
+  mainBackground: rawColors.neutral.white,
   mainBackgroundDisabled: rawColors.neutral.blackhaze,
   modalHeaderBackground: rawColors.neutral.grey185,
   modalTabsBackground: rawColors.neutral.grey190,
   modalBackground: rawColors.neutral.grey195,
   modalInfoBackground: rawColors.neutral.blackhaze,
-  menuItemSelected: rawColors.green.green196,
-  menuItemHover: rawColors.green.green190,
+  menuItemSelected: rawColors.neutral.grey180,
+  menuItemHover: rawColors.neutral.grey185,
+  tabActiveBackground: rawColors.transparent.full,
+  tabItem: rawColors.neutral.grey100,
   scrollBarTrack: rawColors.neutral.grey190,
   scrollBarThumb: rawColors.neutral.grey170,
   scrollBarThumbHover: rawColors.neutral.grey150,
@@ -49,7 +51,7 @@ const appColors = {
   successBackground: rawColors.green.green50,
   successText: rawColors.green.green100,
 
-  warning: rawColors.yellow.yellow80,
+  warning: rawColors.yellow.yellow70,
   warningLite: rawColors.yellow.yellow190,
   warningSemi: rawColors.yellow.yellow190,
   warningBackground: rawColors.yellow.yellow160,
@@ -97,7 +99,8 @@ const appColors = {
   placeholder: rawColors.neutral.grey140,
   key: rawColors.neutral.regentgrey,
   panel: rawColors.neutral.limedSpruce,
-  panelBg: rawColors.neutral.grey190,
+  panelBg: rawColors.neutral.grey195,
+  panelBgGrad: `linear-gradient(to right, ${rawColors.neutral.grey195} 0%, ${rawColors.neutral.white} 50%, ${rawColors.neutral.grey195} 100%)`,
   mainChartBg: rawColors.neutral.blackhaze,
   mainChartHeaderBg: rawColors.neutral.grey190,
   mainChartBorder: rawColors.neutral.grey185,
@@ -109,7 +112,7 @@ const appColors = {
   spaceHovered: rawColors.neutral.grey180,
   hoverHighlight: rawColors.green.green70,
   menuItem: rawColors.neutral.grey120,
-  topBarBg: rawColors.neutral.grey190,
+  topBarBg: rawColors.neutral.grey195,
   elevationLevelOne: rawColors.neutral.grey185,
 
   // Date picker
@@ -119,8 +122,8 @@ const appColors = {
   dateTimePickerChipAccent: rawColors.violet.violet130,
 
   // Input colors
-  inputBg: rawColors.neutral.grey190,
-  inputBorder: rawColors.neutral.grey185,
+  inputBg: rawColors.neutral.white,
+  inputBorder: rawColors.neutral.grey180,
   inputBorderHover: rawColors.neutral.grey165,
   inputBorderFocus: rawColors.neutral.grey165,
 
@@ -142,11 +145,11 @@ const appColors = {
 
   // Table
   dropdownTable: rawColors.neutral.white,
-  tableRowBg: rawColors.neutral.grey190,
+  tableRowBg: rawColors.neutral.grey195,
   tableRowBgHover: rawColors.neutral.grey180,
   tableRowBg2: rawColors.neutral.grey195,
-  tableRowBg2Hover: rawColors.neutral.grey185,
-  columnHighlight: rawColors.green.green190,
+  tableRowBg2Hover: rawColors.neutral.grey180,
+  columnHighlight: rawColors.neutral.grey190,
 
   // IconButton
   iconColor: rawColors.neutral.limedSpruce,
diff --git a/src/theme/index.test.js b/src/theme/index.test.js
index 85040727..29887b99 100644
--- a/src/theme/index.test.js
+++ b/src/theme/index.test.js
@@ -11,4 +11,13 @@ describe("theme colors", () => {
     expect(DefaultTheme.colors.mapSearchHighlight).toBe(rawColors.blue.blue100)
     expect(DarkTheme.colors.mapSearchHighlight).toBe(rawColors.blue.blue150)
   })
+
+  it("owns a horizontal panel background gradient in both themes", () => {
+    expect(DefaultTheme.colors.panelBgGrad).toBe(
+      `linear-gradient(to right, ${rawColors.neutral.grey195} 0%, ${rawColors.neutral.white} 50%, ${rawColors.neutral.grey195} 100%)`
+    )
+    expect(DarkTheme.colors.panelBgGrad).toBe(
+      `linear-gradient(to right, ${rawColors.neutral.grey25} 0%, ${rawColors.neutral.grey15} 50%, ${rawColors.neutral.grey25} 100%)`
+    )
+  })
 })