diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml
index f003aa7..98a9662 100644
--- a/components/StyledIconButton.qml
+++ b/components/StyledIconButton.qml
@@ -34,6 +34,13 @@ 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
-    }
 }