diff --git a/hypr-configs/hyprland/eww/assets/scss/_modules.scss b/hypr-configs/hyprland/eww/assets/scss/_modules.scss
index c96d147..8922979 100644
--- a/hypr-configs/hyprland/eww/assets/scss/_modules.scss
+++ b/hypr-configs/hyprland/eww/assets/scss/_modules.scss
@@ -109,3 +109,27 @@
     }
   }
 }
+
+.timer {
+  @extend .panel-widget;
+
+  font-size: $text-2xl;
+
+  .timer-controls {
+    button {
+      padding: $p-base;
+      margin: $m-base;
+      border-radius: $rounded;
+
+      background-color: $accent;
+
+      &:hover {
+        background-color: $surface2;
+      }
+    }
+
+    label {
+      @extend .icon;
+    }
+  }
+}
diff --git a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss
index 1c821ed..a07aa6b 100644
--- a/hypr-configs/hyprland/eww/assets/scss/_tokens.scss
+++ b/hypr-configs/hyprland/eww/assets/scss/_tokens.scss
@@ -1,12 +1,26 @@
-$rounded: 0.8em;
+$rounded: 0.8rem;
 
-$widget-padding: 0.75em 0.65em;
-$widget-margin: 0.2em;
+$widget-padding: 0.75rem 0.65rem;
+$widget-margin: 0.2rem;
 
-$panel-widget-margin: 0.4em;
+$panel-widget-margin: 0.4rem;
 
-$icon-size: 1.25em;
-$font-size: 1.2em;
+$icon-size: 1.25rem;
+
+$text-base: 1.2rem;
+$text-lg: 1.4rem;
+$text-xl: 1.8rem;
+$text-2xl: 2.6rem;
+
+$m-base: 0.4rem;
+$m-lg: 1.5rem;
+$m-xl: 2rem;
+$m-2xl: 3rem;
+
+$p-base: 1rem;
+$p-lg: 1.5rem;
+$p-xl: 2rem;
+$p-2xl: 3rem;
 
 $design-tokens: (
   font-sizes: (
diff --git a/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss b/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss
index b6c897e..c1d4018 100644
--- a/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss
+++ b/hypr-configs/hyprland/eww/assets/scss/windows/_control-panel.scss
@@ -32,21 +32,6 @@
   font-family: "Symbols Nerd font";
   padding: 5px;
 }
-.timer {
-  font-size: 40px;
-}
-
-.timer_butt button {
-  background-color: $accent;
-  margin: 5px;
-  padding: 10px;
-  border-radius: 5px;
-}
-
-.timer_butt label {
-  color: $base;
-  font-size: 20px;
-}
 
 .unbarwidget {
   padding: 5px;
diff --git a/hypr-configs/hyprland/eww/eww.yuck b/hypr-configs/hyprland/eww/eww.yuck
index 2fc0471..f824962 100644
--- a/hypr-configs/hyprland/eww/eww.yuck
+++ b/hypr-configs/hyprland/eww/eww.yuck
@@ -6,6 +6,7 @@
 (include "./src/-components/_stats.yuck")
 
 (include "./src/-modules/_language.yuck")
+(include "./src/-modules/_timer.yuck")
 (include "./src/-modules/_system-tray.yuck")
 (include "./src/-modules/_workspaces.yuck")
 (include "./src/-modules/_time.yuck")
diff --git a/hypr-configs/hyprland/eww/src/-modules/_timer.yuck b/hypr-configs/hyprland/eww/src/-modules/_timer.yuck
new file mode 100644
index 0000000..154c781
--- /dev/null
+++ b/hypr-configs/hyprland/eww/src/-modules/_timer.yuck
@@ -0,0 +1,15 @@
+(defwidget Timer []
+  (box
+    :orientation "v"
+    :class "timer"
+    :space-evenly false
+    
+    (label :valign "center" :vexpand true :text timerdis)
+    
+    (box
+      :orientation "h"
+      :class "timer-controls"
+      
+      (button :onclick "./scripts/python/timer.py timedec" (label :text "-"))
+      (button :onclick "./scripts/python/timer.py toggle" (label  :text { !matches(timerdis, ":") ? "󱎫" : "󱫎"}))
+      (button :onclick "./scripts/python/timer.py timeinc" (label :text "+")))))
diff --git a/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck b/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck
index d982dab..88abc21 100644
--- a/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck
+++ b/hypr-configs/hyprland/eww/src/windows/_control-panel.yuck
@@ -253,21 +253,6 @@
         ;; (label :halign "start" :text "${weatherjson.precipMM} mm")
       ))))
 
-(defwidget Timer []
-  (box
-    :orientation "v"
-    :class "panel-widget"
-    :space-evenly false
-    
-    (label :class "timer" :valign "center" :vexpand true :text timerdis)
-    (box
-      :orientation "h"
-      :class "timer_butt"
-      :valign "end"
-      (button :onclick "./scripts/python/timer.py timedec" (label :text "-"))
-      (button :onclick "./scripts/python/timer.py toggle" (label :style "padding-right: 3px;" :text { !matches(timerdis, ":") ? "󱎫" : "󱫎"}))
-      (button :onclick "./scripts/python/timer.py timeinc" (label :text "+")))))
-
 (defwidget BigSliders []
   (box
     :class "panel-widget"