diff --git a/crates/theme/src/theme.rs b/crates/theme/src/theme.rs
index 49f2d982ba..87b9d9845a 100644
--- a/crates/theme/src/theme.rs
+++ b/crates/theme/src/theme.rs
@@ -860,9 +860,10 @@ pub struct WelcomeStyle {
 pub struct CheckboxStyle {
     pub width: f32,
     pub height: f32,
-    pub unchecked: ContainerStyle,
+    pub default: ContainerStyle,
     pub checked: ContainerStyle,
     pub hovered: ContainerStyle,
+    pub hovered_and_checked: ContainerStyle,
 }
 
 #[derive(Clone, Deserialize, Default)]
diff --git a/crates/welcome/src/welcome.rs b/crates/welcome/src/welcome.rs
index 385a8a5f00..6985b70069 100644
--- a/crates/welcome/src/welcome.rs
+++ b/crates/welcome/src/welcome.rs
@@ -126,11 +126,17 @@ impl WelcomePage {
                 .with_height(style.height)
                 .contained()
                 .with_style(if checked {
-                    style.checked
-                } else if state.hovered() {
-                    style.hovered
+                    if state.hovered() {
+                        style.hovered_and_checked
+                    } else {
+                        style.checked
+                    }
                 } else {
-                    style.unchecked
+                    if state.hovered() {
+                        style.hovered
+                    } else {
+                        style.default
+                    }
                 })
                 .boxed()
         })
diff --git a/styles/src/styleTree/welcome.ts b/styles/src/styleTree/welcome.ts
index f1325514cd..6085782afd 100644
--- a/styles/src/styleTree/welcome.ts
+++ b/styles/src/styleTree/welcome.ts
@@ -6,9 +6,8 @@ export default function welcome(colorScheme: ColorScheme) {
     let layer = colorScheme.highest;
 
     // TODO
-    let checkbox_base = {
-        background: colorScheme.ramps.red(0.5).hex(),
-        cornerRadius: 8,
+    let checkboxBase = {
+        cornerRadius: 4,
         padding: {
             left: 8,
             right: 8,
@@ -26,9 +25,31 @@ export default function welcome(colorScheme: ColorScheme) {
         checkbox: {
             width: 9,
             height: 9,
-            unchecked: checkbox_base,
-            checked: checkbox_base,
-            hovered: checkbox_base
+            default: {
+                ...checkboxBase,
+                background: colorScheme.ramps.blue(0.5).hex(),
+            },
+            checked: {
+                ...checkboxBase,
+                background: colorScheme.ramps.red(0.5).hex(),
+            },
+            hovered: {
+                ...checkboxBase,
+                background: colorScheme.ramps.blue(0.5).hex(),
+
+                border: {
+                    color: colorScheme.ramps.green(0.5).hex(),
+                    width: 1,
+                }
+            },
+            hoveredAndChecked: {
+                ...checkboxBase,
+                background: colorScheme.ramps.red(0.5).hex(),
+                border: {
+                    color: colorScheme.ramps.green(0.5).hex(),
+                    width: 1,
+                }
+            }
         }
     }
 }
\ No newline at end of file