diff --git a/demos/src/Examples/Community/React/MentionList.scss b/demos/src/Examples/Community/React/MentionList.scss
index e909db98e..89d6e650b 100644
--- a/demos/src/Examples/Community/React/MentionList.scss
+++ b/demos/src/Examples/Community/React/MentionList.scss
@@ -1,12 +1,13 @@
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -17,11 +18,11 @@
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
diff --git a/demos/src/Examples/Community/Vue/MentionList.vue b/demos/src/Examples/Community/Vue/MentionList.vue
index 26437b847..0dedfc3b9 100644
--- a/demos/src/Examples/Community/Vue/MentionList.vue
+++ b/demos/src/Examples/Community/Vue/MentionList.vue
@@ -83,14 +83,15 @@ export default {
 
 <style lang="scss">
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -101,12 +102,12 @@ export default {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 </style>
diff --git a/demos/src/Experiments/Commands/Vue/CommandsList.vue b/demos/src/Experiments/Commands/Vue/CommandsList.vue
index 8465d2dc3..e9989c43b 100644
--- a/demos/src/Experiments/Commands/Vue/CommandsList.vue
+++ b/demos/src/Experiments/Commands/Vue/CommandsList.vue
@@ -83,14 +83,15 @@ export default {
 
 <style lang="scss">
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -101,12 +102,12 @@ export default {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 </style>
diff --git a/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue b/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
index 111826c22..35b5c7cb2 100644
--- a/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
+++ b/demos/src/GuideNodeViews/DragHandle/Vue/Component.vue
@@ -31,7 +31,7 @@ export default {
   border-radius: 0.5rem;
   background: white;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 
diff --git a/demos/src/Nodes/Mention/Vue/MentionList.vue b/demos/src/Nodes/Mention/Vue/MentionList.vue
index 26437b847..0dedfc3b9 100644
--- a/demos/src/Nodes/Mention/Vue/MentionList.vue
+++ b/demos/src/Nodes/Mention/Vue/MentionList.vue
@@ -83,14 +83,15 @@ export default {
 
 <style lang="scss">
 .items {
+  padding: 0.2rem;
   position: relative;
-  border-radius: 0.25rem;
-  background: white;
-  color: rgba(black, 0.8);
+  border-radius: 0.5rem;
+  background: #FFF;
+  color: rgba(0, 0, 0, 0.8);
   overflow: hidden;
   font-size: 0.9rem;
   box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.1),
+    0 0 0 1px rgba(0, 0, 0, 0.05),
     0px 10px 20px rgba(0, 0, 0, 0.1),
   ;
 }
@@ -101,12 +102,12 @@ export default {
   text-align: left;
   background: transparent;
   border: none;
-  padding: 0.2rem 0.5rem;
+  padding: 0.2rem 0.4rem;
 
   &.is-selected,
   &:hover {
-    color: #A975FF;
-    background: rgba(#A975FF, 0.1);
+    border-radius: 0.4rem;
+    background: rgba(0, 0, 0, 0.05);
   }
 }
 </style>