diff --git a/packages/canon/src/components/Checkbox/styles.css b/packages/canon/src/components/Checkbox/styles.css
index 4c382863c2..e4ac30a447 100644
--- a/packages/canon/src/components/Checkbox/styles.css
+++ b/packages/canon/src/components/Checkbox/styles.css
@@ -7,6 +7,7 @@
   font-size: var(--canon-font-size-xs);
   font-family: var(--canon-font-regular);
   color: var(--canon-text-primary);
+  user-select: none;
 
   & .checkbox {
     all: unset;
@@ -18,6 +19,7 @@
     box-shadow: inset 0 0 0 1px var(--canon-outline);
     cursor: pointer;
     border-radius: 2px;
+    transition: all 0.2s ease-in-out;
 
     &[data-state='unchecked'] {
       & .checkbox-indicator {
@@ -36,4 +38,10 @@
     justify-content: center;
     color: var(--canon-text-primary-on-accent);
   }
+
+  &:hover {
+    & .checkbox {
+      box-shadow: inset 0 0 0 1px var(--canon-outline-hover);
+    }
+  }
 }
diff --git a/packages/canon/src/css/core.css b/packages/canon/src/css/core.css
index 95e4b6ce5b..fca36ede8b 100644
--- a/packages/canon/src/css/core.css
+++ b/packages/canon/src/css/core.css
@@ -108,8 +108,8 @@
   --canon-surface-2: #1a1a1a;
 
   /* Outlines */
-  --canon-outline: rgba(255, 255, 255, 0.1);
-  --canon-outline-hover: rgba(255, 255, 255, 0.2);
+  --canon-outline: rgba(255, 255, 255, 0.2);
+  --canon-outline-hover: rgba(255, 255, 255, 0.4);
   --canon-outline-focus: #fff;
 
   /* States - Add more states */