diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml
index 23319ae..98a9662 100644
--- a/components/StyledIconButton.qml
+++ b/components/StyledIconButton.qml
@@ -10,6 +10,8 @@ RoundButton {
         source: "../assets/lucide.woff"
     }
 
+    property alias border: rect.border
+
     font.family: loader.font.family
     font.pixelSize: 16
     radius: 8
@@ -31,6 +33,14 @@ RoundButton {
     }
 
     background: Rectangle {
+        id: rect
+        border.color: control.hovered ? Theme.palette.primary : Theme.palette.base100
+        Behavior on border.color {
+            ColorAnimation {
+                duration: 100
+            }
+        }
+        border.width: 2
         color: control.hovered ? Theme.palette.primary : Theme.palette.base100
         Behavior on color {
             ColorAnimation {
diff --git a/modules/bar/components/Caffeine.qml b/modules/bar/components/Caffeine.qml
index dd5588c..82861f9 100644
--- a/modules/bar/components/Caffeine.qml
+++ b/modules/bar/components/Caffeine.qml
@@ -1,26 +1,15 @@
+import qs.components
 import qs.config
 import qs.constants
 import qs.services
-import qs.widgets
 
-StyledButton {
+StyledIconButton {
     id: root
 
-    border.color: Caffeine.enabled ? Theme.palette.secondary : 'transparent'
-    border.width: 2
+    border.color: Caffeine.enabled ? Theme.palette.secondary : root.hovered ? Theme.palette.primary : Theme.palette.base100
+    text: Icons.coffee
 
     onClicked: {
         Caffeine.toggle();
     }
-
-    content: StyledText {
-        id: text
-
-        font.family: Theme.lucide.font.family
-        font.pixelSize: Dimensions.caffeine.fontSize
-        font.bold: true
-        text: Icons.coffee
-
-        color: root.containsMouse ? Theme.palette.base300 : Theme.palette.basecontent
-    }
 }