diff --git a/app/src/displays/color-dot/color-dot.vue b/app/src/displays/color-dot/color-dot.vue
index 826e6a8d72..028c688c73 100644
--- a/app/src/displays/color-dot/color-dot.vue
+++ b/app/src/displays/color-dot/color-dot.vue
@@ -1,8 +1,7 @@
 <template>
 	<div class="color-dot">
 		<value-null v-if="value === null" />
-		<div class="dot" :style="styles"></div>
-		<span v-if="isHex(value) === false">{{ displayValue }}</span>
+		<div class="dot" :style="styles" v-tooltip="displayValue"></div>
 	</div>
 </template>
 
@@ -27,13 +26,9 @@ export default defineComponent({
 			type: Array as PropType<Choice[]>,
 			default: () => [],
 		},
-		defaultBackground: {
+		defaultColor: {
 			type: String,
-			default: '#eceff1',
-		},
-		defaultForeground: {
-			type: String,
-			default: '#263238',
+			default: '#B0BEC5',
 		},
 	},
 	setup(props) {
@@ -44,8 +39,7 @@ export default defineComponent({
 		});
 
 		const displayValue = computed(() => {
-			if (!currentChoice.value) return formatTitle(props.value);
-			return currentChoice.value.text;
+			return formatTitle(props.value);
 		});
 
 		const styles = computed(() => {
@@ -53,7 +47,7 @@ export default defineComponent({
 				return { backgroundColor: props.value || props.defaultForeground };
 			}
 			return {
-				backgroundColor: currentChoice.value?.color || props.defaultForeground,
+				backgroundColor: currentChoice.value?.color || props.defaultColor,
 			};
 		});
 
diff --git a/app/src/displays/color-dot/index.ts b/app/src/displays/color-dot/index.ts
index 4ab33da325..c02663b3b4 100644
--- a/app/src/displays/color-dot/index.ts
+++ b/app/src/displays/color-dot/index.ts
@@ -18,7 +18,7 @@ export default defineDisplay(({ i18n }) => ({
 				width: 'half',
 			},
 			schema: {
-				default_value: '#eceff1',
+				default_value: '#B0BEC5',
 			},
 		},
 		{