diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -10,28 +10,56 @@
   cursor: pointer;
 }
 
+.btn:hover {
+  transition-duration: 200ms;
+  transition-property: background, color;
+}
+
+.btn:disabled {
+  cursor: not-allowed;
+  color: var(--btn-disabled-color);
+}
+
 .primary {
   background: var(--btn-bg-primary);
   color: var(--fg);
-  transition: 200ms;
 }
 
 .primary:hover {
-  background-color: var(--btn-bg-primary-hover);
-  transition: 200ms;
+  background: var(--btn-bg-primary-hover);
+}
+
+.primary:disabled {
+  background: var(--btn-bg-primary-disabled);
 }
 
 .secondary {
-  background: var(--shades-black-90);
+  background: var(--btn-bg-secondary);
   color: var(--fg);
   border: 1px solid var(--btn-secondary-border);
 }
 
+.secondary:hover {
+  background: var(--btn-bg-secondary-hover);
+}
+
+.secondary:disabled {
+  background: var(--btn-bg-secondary-disabled);
+}
+
 .danger {
   background: var(--btn-bg-danger);
   color: var(--fg);
 }
 
+.danger:hover {
+  background: var(--btn-bg-danger-hover);
+}
+
+.danger:disabled {
+  background: var(--btn-bg-danger-disabled);
+}
+
 .round {
   width: 30px;
   height: 30px;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -62,7 +62,14 @@
   /* Color Theme */
   --btn-bg-primary: var(--violet-dark-100);
   --btn-bg-primary-hover: var(--violet-dark-80);
+  --btn-bg-primary-disabled: var(--shades-black-80);
+  --btn-bg-secondary: var(--shades-black-90);
+  --btn-bg-secondary-hover: var(--shades-black-80);
+  --btn-bg-secondary-disabled: var(--shades-black-90);
   --btn-bg-danger: var(--error-primary);
+  --btn-bg-danger-hover: var(--error-dark-50);
+  --btn-bg-danger-disabled: var(--shades-black-80);
+  --btn-disabled-color: var(--shades-black-60);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);