diff --git a/src/Components/Dropdowns/Dropdown.scss b/src/Components/Dropdowns/Dropdown.scss
index ff50f89d..36d31ffa 100644
--- a/src/Components/Dropdowns/Dropdown.scss
+++ b/src/Components/Dropdowns/Dropdown.scss
@@ -305,7 +305,7 @@ $dropdown-item--padding-v: $cf-space-2xs;
 
   .cf-dropdown-item.active:not(.cf-dropdown-item__disabled) {
     background-color: #2a2649;
-    border: 1px $cf-lavender solid;
+    border: $cf-item-selected-border;
     border-radius: $cf-border;
   }
 }
diff --git a/src/Components/List/List.scss b/src/Components/List/List.scss
index 69c1ca88..b8d5a0fb 100644
--- a/src/Components/List/List.scss
+++ b/src/Components/List/List.scss
@@ -5,16 +5,17 @@ $list-item--text-opacity: 0.666;
 
 $list-item--divider-color--light: $cf-grey-25;
 $list-item--divider-text--light: rgba($g20-white, 0.4);
-$list-item--background-light: $c-pool;
+$list-item--background-light: $cf-dark-lavender;
 
 $list-item--divider-color--dark: $cf-grey-55;
 $list-item--divider-text--dark: rgba($g0-obsidian, 0.4);
-$list-item--background-dark: $c-pool;
+$list-item--background-dark: $cf-dark-lavender;
 
 .cf-list {
   overflow: hidden;
   border-radius: $cf-radius;
   padding: $cf-border;
+  background: $cf-grey-2;
 
   .cf-dapper-scrollbars--track-y {
     z-index: 2;
@@ -85,19 +86,21 @@ $list-item--background-dark: $c-pool;
 
 .cf-list-item:hover .cf-list-item--highlight,
 .cf-list-item:focus .cf-list-item--highlight {
-  background-color: rgba($cf-grey-95, 0.1);
+  background-color: $cf-grey-3;
 }
 
 .cf-list-item__active .cf-list-item--highlight__light,
 .cf-list-item__active:hover .cf-list-item--highlight__light,
 .cf-list-item__active:focus .cf-list-item--highlight__light {
   background-color: $list-item--background-light;
+  border: $cf-item-selected-border;
 }
 
 .cf-list-item__active .cf-list-item--highlight__dark,
 .cf-list-item__active:hover .cf-list-item--highlight__dark,
 .cf-list-item__active:focus .cf-list-item--highlight__dark {
   background-color: $list-item--background-dark;
+  border: $cf-item-selected-border;
 }
 
 .cf-list-item__light {
@@ -146,7 +149,7 @@ $list-item--background-dark: $c-pool;
 */
 
 .cf-list-divider {
-  color: $cf-grey-35;
+  color: $cf-grey-5;
   border-radius: $cf-radius-sm;
   border-bottom: $cf-border solid $list-item--divider-color--light;
   white-space: nowrap;
diff --git a/src/Components/List/ListIndicator.scss b/src/Components/List/ListIndicator.scss
index 5c591566..21d01754 100644
--- a/src/Components/List/ListIndicator.scss
+++ b/src/Components/List/ListIndicator.scss
@@ -18,20 +18,20 @@
 
 .cf-list-indicator__dot {
   border-radius: 50%;
-  background-color: rgba($cf-grey-95, 0.1);
+  background-color: $cf-grey-4;
 
   .cf-list-indicator--element {
     border-radius: 50%;
     opacity: 0;
     transform: translate(-50%, -50%) scale(0.25, 0.25);
     transition: transform $cf-transition-default, opacity $cf-transition-default;
-    background-color: $g20-white;
+    background-color: $cf-white;
     width: 0.5em;
     height: 0.5em;
   }
 
   &.cf-list-indicator__selected {
-    background-color: $cf-grey-35;
+    background-color: $cf-lavender;
 
     .cf-list-indicator--element {
       transform: translate(-50%, -50%) scale(1, 1);
@@ -47,7 +47,7 @@
 
 .cf-list-indicator__checkbox {
   border-radius: $cf-border;
-  background-color: rgba($cf-grey-95, 0.1);
+  background-color: $cf-grey-4;
 
   .cf-list-indicator--element {
     width: 0.5em;
@@ -60,7 +60,7 @@
   }
 
   &.cf-list-indicator__selected {
-    background-color: $cf-grey-25;
+    background-color: $cf-lavender;
 
     .cf-list-indicator--element {
       opacity: 1;
diff --git a/src/Styles/variables.scss b/src/Styles/variables.scss
index a4abf7b5..61c9d60d 100644
--- a/src/Styles/variables.scss
+++ b/src/Styles/variables.scss
@@ -112,6 +112,11 @@ $c-daisy: #fff6b8;
 $c-magenta: #bf2fe5;
 $c-galaxy: #9394ff;
 
+/*
+  List item variables
+*/
+$cf-item-selected-border: 1px $cf-lavender solid;
+
 /*
   State change variables
 */