diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 1600c0b..c6e4fc5 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -761,7 +761,7 @@
   width: 52px;
   height: 52px;
   border-radius: var(--radius-full);
-  background-color: var(--color-accent);
+  background-color: var(--module-accent, var(--color-btn-primary));
   color: #ffffff;
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -783,7 +783,7 @@
 }
 
 .fab-main:hover {
-  background-color: var(--color-accent-hover);
+  background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
 }
 
 .fab-main:active {
diff --git a/public/styles/layout.css b/public/styles/layout.css
index cff0133..24418ac 100644
--- a/public/styles/layout.css
+++ b/public/styles/layout.css
@@ -192,7 +192,7 @@
   width: 52px;
   height: 52px;
   border-radius: var(--radius-full);
-  background-color: var(--color-accent);
+  background-color: var(--module-accent, var(--color-btn-primary));
   color: #ffffff;
   box-shadow: var(--shadow-lg);
   display: flex;
@@ -206,7 +206,7 @@
 }
 
 .page-fab:hover {
-  background-color: var(--color-accent-hover);
+  background-color: color-mix(in srgb, var(--module-accent, var(--color-btn-primary)) 85%, black);
 }
 
 .page-fab:active {
@@ -783,6 +783,7 @@
   z-index: calc(var(--z-nav) - 1);
   transition:
     transform var(--transition-fast),
+    background-color var(--transition-fast),
     box-shadow var(--transition-fast);
 }