diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -13,6 +13,12 @@
 .primary {
   background: var(--btn-bg-primary);
   color: var(--fg);
+  transition: 200ms;
+}
+
+.primary:hover {
+  background-color: var(--btn-bg-primary-hover);
+  transition: 200ms;
 }
 
 .secondary {
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -61,6 +61,7 @@
 
   /* Color Theme */
   --btn-bg-primary: var(--violet-dark-100);
+  --btn-bg-primary-hover: var(--violet-dark-80);
   --btn-bg-danger: var(--error-primary);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);