looks better

components/StyledIconButton.qml

@@ -0,0 +1,38 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+RoundButton {
+    id: control
+
+    radius: 8
+    font.family: Theme.lucide.font.family
+    font.pixelSize: 15
+    font.bold: true
+    padding: 8
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    contentItem: Text {
+        text: control.text
+        color: control.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+        Behavior on color {
+            ColorAnimation {
+                duration: 100
+            }
+        }
+        font: control.font
+    }
+
+    background: Rectangle {
+        color: control.hovered ? Theme.palette.primary : Theme.palette.base100
+        Behavior on color {
+            ColorAnimation {
+                duration: 100
+            }
+        }
+        radius: control.radius
+    }
+}

modules/pomodoro/Pomodoro.qml

@@ -1,5 +1,6 @@
 pragma ComponentBehavior: Bound
 
+import qs.components
 import qs.config
 import qs.constants
 import qs.services
@@ -49,29 +50,32 @@ StyledWindow {
                 font.pixelSize: 22
             }
 
+            Item {
+                implicitWidth: circle.width
+                implicitHeight: circle.height
+
                 Circle {
                     id: circle
                     radius: 150
-                color: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
+                    borderColor: Theme.palette.base100
+                    strokeColor: Pomodoro.state == "timer" ? Theme.palette.primary : Theme.palette.warning
+                    strokeWidth: 12
+                    fillColor: button.hovered ? Theme.palette.primary : "transparent"
                     percentage: (Pomodoro.state == "timer" ? (Pomodoro.initialTime - Pomodoro.remainingTime) : Pomodoro.remainingTime) / Pomodoro.initialTime % 1
-
-                WrapperRectangle {
-                    color: "transparent"
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                    ColumnLayout {
-                        spacing: 18
-                        StyledButton {
-
-                            Layout.alignment: Qt.AlignHCenter
-
-                            focus: root.visible
-
-                            content: LucideIcon {
-                                text: Pomodoro.running ? Icons.square : Icons.play
-                                font.pixelSize: 20
                 }
 
+                StyledIconButton {
+                    id: button
+
+                    anchors.centerIn: circle
+
+                    radius: 9999
+
+                    focus: root.visible
+                    text: Pomodoro.running ? Icons.square : Icons.play
+                    font.pixelSize: 48
+
+                    background: undefined
                     onClicked: {
                         Pomodoro.toggle();
                     }
@@ -89,6 +93,8 @@ StyledWindow {
                         Pomodoro.reset();
                     }
                 }
+            }
+
             StyledText {
                 Layout.alignment: Qt.AlignHCenter
                 text: {
@@ -97,9 +103,6 @@ StyledWindow {
                 }
                 font.pixelSize: 16
             }
-                    }
-                }
-            }
 
             StyledButton {
 

modules/storybook/Storybook.qml

@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 
 import qs.components
 import qs.config
+import qs.constants
 import qs.services
 import qs.widgets
 import Quickshell.Hyprland
@@ -45,9 +46,21 @@ StyledWindow {
                 Layout.alignment: Qt.AlignHCenter
                 text: "Components"
                 font.pixelSize: 24
+                font.bold: true
+                font.underline: true
                 bottomPadding: 24
             }
 
+            ColumnLayout {
+                StyledText {
+                    text: "Switch"
+                    font.pixelSize: 18
+                }
+                StyledIconButton {
+                    text: Icons.square
+                }
+            }
+
             ColumnLayout {
                 StyledText {
                     text: "Switch"

widgets/Circle.qml

@@ -7,7 +7,10 @@ Item {
 
     property int radius: 0
     property double percentage: 0
-    property alias color: path.strokeColor
+    property alias borderColor: fill.strokeColor
+    property alias strokeColor: path.strokeColor
+    property alias strokeWidth: path.strokeWidth
+    property alias fillColor: fill.fillColor
 
     implicitWidth: radius * 2
     implicitHeight: radius * 2
@@ -17,6 +20,8 @@ Item {
         preferredRendererType: Shape.CurveRenderer
 
         ShapePath {
+            id: fill
+
             fillColor: Theme.palette.base100
             strokeColor: Theme.palette.base200
             strokeWidth: 8
@@ -34,8 +39,8 @@ Item {
             id: path
 
             fillColor: "transparent"
-            strokeWidth: 8
-            strokeColor: "white"
+            strokeWidth: 0
+            strokeColor: "transparent"
             capStyle: ShapePath.RoundCap
 
             PathAngleArc {