diff --git a/config/eww/colors.scss b/config/eww/colors.scss
index e2e09082..d5666856 100644
--- a/config/eww/colors.scss
+++ b/config/eww/colors.scss
@@ -1,5 +1,6 @@
 $darkbg: #0b0d16;
-$bg: rgb(40, 42, 54); //rgba(69, 71, 90, 0.3); #0d0f18;
+$bg: rgba(40, 42, 54, 0.8); //rgba(69, 71, 90, 0.3); #0d0f18;
+$bgfull: rgb(40, 42, 54);
 $contrastbg: rgba(189, 147, 249, 0.8);
 $bgSecondary: #11131c;
 $bgSecondaryAlt: #a5b6cf;
diff --git a/config/eww/date/date.scss b/config/eww/date/date.scss
index d77637ee..17a930dd 100644
--- a/config/eww/date/date.scss
+++ b/config/eww/date/date.scss
@@ -1,5 +1,5 @@
 .date {
-  background-color: rgba(40, 42, 54, 0.8);
+  background-color: $bg;
   color: $fg;
   border-radius: 30px;
   border: 2px solid $contrastbg;
@@ -27,11 +27,11 @@
 
 .cal-box {
   font-family: Product Sans;
-  background-color: rgba(40, 42, 54, 0.8);
+  background-color: $bg;
   border-radius: 30px;
   padding: 0 1rem .2rem;
   color: $fg;
-  background-color: $bg;
+  background-color: $bgfull;
   border-bottom: 2px solid $contrastbg;
   border-top: 2px solid $contrastbg;
   margin: 0px 12px 18px 12px;
diff --git a/config/eww/eww.scss b/config/eww/eww.scss
index 63b6b9cf..2fd2a7fc 100644
--- a/config/eww/eww.scss
+++ b/config/eww/eww.scss
@@ -5,4 +5,5 @@
 @import "colors.scss";
 @import "date/date.scss";
 @import "powermenu/powermenu.scss";
+@import "quick-settings/quick-settings.scss";
 @import "traybuttons/traybuttons.scss";
diff --git a/config/eww/eww.yuck b/config/eww/eww.yuck
index d7f34f53..56c6bf59 100644
--- a/config/eww/eww.yuck
+++ b/config/eww/eww.yuck
@@ -2,4 +2,5 @@
 (include "date/date.yuck")
 (include "powermenu/powermenu.yuck")
 (include "closer/closer.yuck")
+(include "quick-settings/quick-settings.yuck")
 (include "traybuttons/traybuttons.yuck")
diff --git a/config/eww/traybuttons/traybuttons.yuck b/config/eww/traybuttons/traybuttons.yuck
index 9a81f23b..0e85a1a6 100644
--- a/config/eww/traybuttons/traybuttons.yuck
+++ b/config/eww/traybuttons/traybuttons.yuck
@@ -14,9 +14,9 @@
 (defvar tablet-ts false)
 (defwidget tablet-toggle []
   (eventbox :class {tablet-ts ? "toggle-on" : "toggle-off"}
-          :onclick {tablet-ts ? "$HYPR_PATH/laptop-mode.sh &" : 
-                                "$HYPR_PATH/tablet-mode.sh &"}
-          :cursor "pointer"
+            :onclick {tablet-ts ? "$HYPR_PATH/laptop-mode.sh &" : 
+                                  "$HYPR_PATH/tablet-mode.sh &"}
+            :cursor "pointer"
     
     (box  :class "tablet-toggle"
           :orientation "h"
@@ -27,8 +27,8 @@
 
 (defwidget heart-toggle []
   (eventbox :class {heart_icon == "󰣐" ? "toggle-on" : "toggle-off"}
-          :onclick "$EWW_PATH/heart.sh"
-          :cursor "pointer"
+            :onclick "$EWW_PATH/heart.sh"
+            :cursor "pointer"
     
     (box  :class "heart-toggle"
           :orientation "h"
@@ -62,11 +62,10 @@
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 
-(defvar quick-settings-ts false)
 (defwidget quick-settings-toggle []
-  (eventbox :class {quick-settings-ts ? "toggle-on" : "toggle-off"}
-          :onclick ""
-          :cursor "pointer"
+  (eventbox :class "toggle-off"
+            :onclick "eww open quick-settings-smol; eww open quick-settings-logo"
+            :cursor "pointer"
 
     (box  :class "quick-settings-toggle"
           :orientation "h"
@@ -90,8 +89,10 @@
 (defvar notif-panel-state false)
 (defwidget notif-panel []
   (eventbox :class {notif-panel-state ? "toggle-on" : "toggle-off"}
-          :onclick {notif-panel-state ? "swaync-client -cp; eww update notif-panel-state=false" : 
-                                        "swaync-client -op; eww update notif-panel-state=true"}
+            :onclick {notif-panel-state ? "swaync-client -cp; eww update notif-panel-state=false" : 
+                                          "swaync-client -op; eww update notif-panel-state=true"}
+            :cursor "pointer"
+
     (box  :class "notif-panel"
           :orientation "h"
       (label :text " ${notif_icon} ")