diff --git a/flake.lock b/flake.lock
index 98dc03b2d5..8d3f456967 100644
--- a/flake.lock
+++ b/flake.lock
@@ -210,11 +210,11 @@
         ]
       },
       "locked": {
-        "lastModified": 1727670871,
-        "narHash": "sha256-ZetKlO/gk068cleMXV4V7E2AMvjEuRpIBSOccgqS/6I=",
+        "lastModified": 1727854413,
+        "narHash": "sha256-5nysqAzKvv2Yn2eKAyR+U1zjZ535NSRuKNapICkDwfg=",
         "owner": "tiiuae",
         "repo": "ghafpkgs",
-        "rev": "b02f0c28ef687985ab32f8ef2aa5ddc137c4472f",
+        "rev": "58ab6179fce5932862707c833b57f4526503399d",
         "type": "github"
       },
       "original": {
diff --git a/modules/desktop/graphics/ewwbar.nix b/modules/desktop/graphics/ewwbar.nix
index 4569640812..bfd58ceb91 100644
--- a/modules/desktop/graphics/ewwbar.nix
+++ b/modules/desktop/graphics/ewwbar.nix
@@ -7,25 +7,51 @@
   ...
 }:
 let
+  inherit (builtins) replaceStrings;
+  inherit (lib) optionalString;
+
   cfg = config.ghaf.graphics.labwc;
+  audio-ctrl = pkgs.callPackage ../../../packages/audio-ctrl { };
 
   launcher-icon = "${pkgs.ghaf-artwork}/icons/launcher.svg";
-  battery-0-icon = "${pkgs.ghaf-artwork}/icons/battery-empty.svg";
-  battery-1-icon = "${pkgs.ghaf-artwork}/icons/battery-almost-empty.svg";
-  battery-2-icon = "${pkgs.ghaf-artwork}/icons/battery-half.svg";
-  battery-3-icon = "${pkgs.ghaf-artwork}/icons/battery-full.svg";
+  security-icon = "${pkgs.ghaf-artwork}/icons/security-green.svg";
+
+  battery-0-icon = "${pkgs.ghaf-artwork}/icons/battery-0.svg";
+  battery-1-icon = "${pkgs.ghaf-artwork}/icons/battery-1.svg";
+  battery-2-icon = "${pkgs.ghaf-artwork}/icons/battery-2.svg";
+  battery-3-icon = "${pkgs.ghaf-artwork}/icons/battery-3.svg";
   battery-charging-icon = "${pkgs.ghaf-artwork}/icons/battery-charging.svg";
-  bluetooth-icon = "${pkgs.ghaf-artwork}/icons/bluetooth.svg";
+
   wifi-0-icon = "${pkgs.ghaf-artwork}/icons/wifi-0.svg";
   wifi-1-icon = "${pkgs.ghaf-artwork}/icons/wifi-1.svg";
   wifi-2-icon = "${pkgs.ghaf-artwork}/icons/wifi-2.svg";
   wifi-3-icon = "${pkgs.ghaf-artwork}/icons/wifi-3.svg";
-  wifi-4-icon = "${pkgs.ghaf-artwork}/icons/wifi-green.svg";
-  security-icon = "${pkgs.ghaf-artwork}/icons/security-green.svg";
+  wifi-4-icon = "${pkgs.ghaf-artwork}/icons/wifi-4.svg";
+
+  volume-0-icon = "${pkgs.ghaf-artwork}/icons/volume-0.svg";
+  volume-1-icon = "${pkgs.ghaf-artwork}/icons/volume-1.svg";
+  volume-2-icon = "${pkgs.ghaf-artwork}/icons/volume-2.svg";
+  volume-3-icon = "${pkgs.ghaf-artwork}/icons/volume-3.svg";
+
+  brightness-0-icon = "${pkgs.ghaf-artwork}/icons/brightness-0.svg";
+  brightness-1-icon = "${pkgs.ghaf-artwork}/icons/brightness-1.svg";
+  brightness-2-icon = "${pkgs.ghaf-artwork}/icons/brightness-2.svg";
+  brightness-3-icon = "${pkgs.ghaf-artwork}/icons/brightness-3.svg";
+  brightness-4-icon = "${pkgs.ghaf-artwork}/icons/brightness-4.svg";
+  brightness-5-icon = "${pkgs.ghaf-artwork}/icons/brightness-5.svg";
+  brightness-6-icon = "${pkgs.ghaf-artwork}/icons/brightness-6.svg";
+  brightness-7-icon = "${pkgs.ghaf-artwork}/icons/brightness-7.svg";
+  brightness-8-icon = "${pkgs.ghaf-artwork}/icons/brightness-8.svg";
+  bluetooth-1-icon = "${pkgs.ghaf-artwork}/icons/bluetooth-1.svg";
+
+  power-icon = "${pkgs.ghaf-artwork}/icons/power.svg";
+  restart-icon = "${pkgs.ghaf-artwork}/icons/restart.svg";
+  suspend-icon = "${pkgs.ghaf-artwork}/icons/suspend.svg";
+
+  arrow-right-icon = "${pkgs.ghaf-artwork}/icons/arrow-right.svg";
 
   # Colors
   ## Background
-  bg-primary = "#121212";
   bg-secondary = "#2B2B2B";
   ## Text
   text-base = "#FFFFFF";
@@ -41,107 +67,285 @@ let
   # Called by eww.yuck for updates and reloads
   eww = "${pkgs.eww}/bin/eww -c /etc/eww";
 
-  ewwPopup = pkgs.writeShellScript "popup" ''
-    calendar() {
-        LOCK_FILE="$HOME/.cache/eww-calendar.lock"
+  cliArgs = replaceStrings [ "\n" ] [ " " ] ''
+    --name ${config.ghaf.givc.adminConfig.name}
+    --addr ${config.ghaf.givc.adminConfig.addr}
+    --port ${config.ghaf.givc.adminConfig.port}
+    ${optionalString config.ghaf.givc.enableTls "--cacert /run/givc/ca-cert.pem"}
+    ${optionalString config.ghaf.givc.enableTls "--cert /run/givc/gui-vm-cert.pem"}
+    ${optionalString config.ghaf.givc.enableTls "--key /run/givc/gui-vm-key.pem"}
+    ${optionalString (!config.ghaf.givc.enableTls) "--notls"}
+  '';
 
-        run() {
-            # Update day, month and year before opening the calendar
-            ${eww} update calendar_day=$(date +%d)
-            ${eww} update calendar_month=$(date +%-m)
-            ${eww} update calendar_year=$(date +%Y)
-            ${eww} open --screen $1 calendar --logs
-        }
+  eww-popup = pkgs.writeShellApplication {
+    name = "eww-popup";
+    runtimeInputs = [ ];
+    bashOptions = [ ];
+    text = ''
+      widgets=("calendar" "quick-settings" "power-menu")
+      widgets_to_close=()
 
-        # Open widgets
-        if [[ ! -f "$LOCK_FILE" ]]; then
-            touch "$LOCK_FILE"
-            run $1
-        else
-            ${eww} close calendar
-            rm "$LOCK_FILE"
-        fi
-    }
-
-    if [ "$1" = "wifi" ]; then
-        ${pkgs.nm-launcher}/bin/nm-launcher
-    elif [ "$1" = "calendar" ]; then
-        calendar $2
-    fi
+      close-others(){
+          for widget in "''${widgets[@]}"; do
+              if [ "$widget" != "$1" ]; then
+                  widgets_to_close+=("$widget")
+              fi
+          done
+          ${eww} close "''${widgets_to_close[@]}" >/dev/null 2>&1
+      }
 
-  '';
+      open-widget(){
+          close-others "$1"
+          if [ -z "$2" ]; then
+              ${eww} open --toggle "$1"
+          else
+              ${eww} open --toggle --screen "$2" "$1"
+          fi
+      }
 
-  ewwWifi = pkgs.writeShellScript "wifi" ''
-    grpcurl_cmd_get_active_connection="${pkgs.grpcurl}/bin/grpcurl -plaintext 192.168.100.1:9000 wifimanager.WifiService.GetActiveConnection"
-
-    signal() {
-        signal_level=$(echo "$1" | ${pkgs.jq}/bin/jq '.Signal // empty')
-        echo $signal_level
-    }
-
-    status() {
-        active_connection=$($grpcurl_cmd_get_active_connection)
-        ${eww} update wifi-signal-level=$(signal "$active_connection")
-
-        connected=$(echo "$active_connection" | ${pkgs.jq}/bin/jq -r '.Connection // false')
-        ssid=$(echo "$active_connection" | ${pkgs.jq}/bin/jq -r '.SSID // empty')
-        if [ "$connected" = "false" ] || [ -z "$ssid" ]; then
-            echo No connection
-        else
-            ${eww} update wifi-name=$ssid
-            echo Connected
-        fi
-    }
-
-    [ "$1" = "status" ] && status && exit
-    [ "$1" = "signal" ] && signal && exit
-  '';
+      if [ "$1" = "calendar" ]; then
+          ${eww} update calendar_day="$(date +%d)" calendar_month="$(date +%-m)" calendar_year="$(date +%Y)"
+      fi
+      open-widget "$1" "$2"
+    '';
+  };
 
-  ewwBat = pkgs.writeShellScript "battery" ''
-    BATTERY_PATH="/sys/class/power_supply/BAT0"
-    ENERGY_NOW=$(cat "$BATTERY_PATH/energy_now")
-    POWER_NOW=$(cat "$BATTERY_PATH/power_now")
-
-    remaining() {
-        if [ "$POWER_NOW" -eq 0 ]; then
-            echo ""
-        fi
-
-        TIME_REMAINING=$(echo "scale=2; $ENERGY_NOW / $POWER_NOW" | ${pkgs.bc}/bin/bc )
-
-        HOURS=$(echo "$TIME_REMAINING" | ${pkgs.gawk}/bin/awk '{print int($1)}')
-        MINUTES=$(echo "($TIME_REMAINING - $HOURS) * 60" | ${pkgs.bc}/bin/bc | ${pkgs.gawk}/bin/awk '{printf "%d\n", $1}')
-        
-        # If both hours and minutes are 0, return an empty string
-        if [ "$HOURS" -eq 0 ] && [ "$MINUTES" -eq 0 ]; then
-            echo ""
-        else
-            # Display remaining time in shorthand
-            if [ "$HOURS" -gt 0 ] && [ "$MINUTES" -gt 0 ]; then
-                echo "''${HOURS}h ''${MINUTES}m"
-            elif [ "$HOURS" -gt 0 ]; then
-                echo "''${HOURS}h"
-            else
-                echo "''${MINUTES}m"
-            fi
-        fi
-    }
-
-    [ "$1" = "remaining" ] && remaining && exit
-  '';
+  eww-wifi = pkgs.writeShellApplication {
+    name = "eww-wifi";
+    runtimeInputs = [
+      pkgs.jq
+      pkgs.grpcurl
+    ];
+    bashOptions = [ ];
+    text = ''
+      grpcurl_cmd_get_active_connection="grpcurl -plaintext 192.168.100.1:9000 wifimanager.WifiService.GetActiveConnection"
 
-  ewwStart = pkgs.writeShellScript "ewwStart" ''
-    # Get number of connected displays using wlr-randr
-    connected_monitors=$(${pkgs.wlr-randr}/bin/wlr-randr --json | ${pkgs.jq}/bin/jq 'length')
-    echo Found connected displays: $connected_monitors
-    # Launch Eww bar on each screen
-    ${eww} kill
-    ${eww} daemon
-    for ((screen=0; screen<$connected_monitors; screen++)); do
-        echo Starting ewwbar for display $screen
-        ${eww} open --no-daemonize --screen $screen bar --id bar:$screen --arg screen=$screen
-    done
-  '';
+      signal() {
+          signal_level=$(echo "$1" | jq '.Signal // empty')
+          echo "$signal_level"
+      }
+
+      icon() {
+          if [ "$1" -lt 30 ]; then
+              echo "${wifi-1-icon}"
+          elif [ "$1" -lt 60 ]; then
+              echo "${wifi-2-icon}"
+          elif [ "$1" -lt 80 ]; then
+              echo "${wifi-3-icon}"
+          else
+              echo "${wifi-4-icon}"
+          fi
+      }
+
+      get() {
+          active_connection=$($grpcurl_cmd_get_active_connection)
+
+          signal=$(signal "$active_connection")
+          icon=$(icon "$signal")
+          connected=$(echo "$active_connection" | jq -r '.Connection // false')
+          ssid=$(echo "$active_connection" | jq -r '.SSID // empty')
+
+          if [ "$connected" = "false" ] || [ -z "$ssid" ]; then
+              icon="${wifi-0-icon}"
+          fi
+          echo "{
+              \"connected\": \"$connected\",
+              \"ssid\": \"$ssid\",
+              \"signal\": \"$signal\",
+              \"icon\": \"$icon\"
+          }"
+      }
+
+      [ "$1" = "get" ] && get && exit
+    '';
+  };
+
+  eww-bat = pkgs.writeShellApplication {
+    name = "eww-bat";
+    runtimeInputs = [
+      pkgs.gawk
+      pkgs.bc
+    ];
+    bashOptions = [ ];
+    text = ''
+      BATTERY_PATH="/sys/class/power_supply/BAT0"
+      ENERGY_NOW=$(cat "$BATTERY_PATH/energy_now")
+      POWER_NOW=$(cat "$BATTERY_PATH/power_now")
+      CAPACITY=$(cat "$BATTERY_PATH/capacity")
+      STATUS=$(cat "$BATTERY_PATH/status")
+
+      get() {
+          if [ "$POWER_NOW" -eq 0 ]; then
+          echo "{
+              \"remaining\": { \"hours\": \"0\", \"minutes_total\": \"0\", \"minutes\": \"0\" },
+              \"status\": \"$STATUS\",
+              \"capacity\": \"$CAPACITY\"
+          }"
+              exit
+          fi
+
+          TIME_REMAINING=$(echo "scale=2; $ENERGY_NOW / $POWER_NOW" | bc)
+
+          HOURS=$(echo "$TIME_REMAINING" | awk '{print int($1)}')
+          MINUTES_TOTAL=$(echo "$HOURS * 60" | bc | awk '{printf "%d\n", $1}')
+          MINUTES_REMAINDER=$(echo "($TIME_REMAINING - $HOURS) * 60" | bc | awk '{printf "%d\n", $1}')
+
+          # If both hours and minutes are 0, return 0 for both
+          if [ "$HOURS" -eq 0 ] && [ "$MINUTES" -eq 0 ]; then
+              HOURS=0
+              MINUTES=0
+          fi
+
+          echo "{
+              \"remaining\": { \"hours\": \"$HOURS\", \"minutes_total\": \"$MINUTES_TOTAL\", \"minutes\": \"$MINUTES_REMAINDER\" },
+              \"status\": \"$STATUS\",
+              \"capacity\": \"$CAPACITY\"
+          }"
+      }
+
+      [ "$1" = "get" ] && get && exit
+    '';
+  };
+
+  eww-start = pkgs.writeShellApplication {
+    name = "eww-start";
+    runtimeInputs = [
+      pkgs.wlr-randr
+      pkgs.jq
+    ];
+    bashOptions = [ ];
+    text = ''
+      # Get number of connected displays using wlr-randr
+      connected_monitors=$(wlr-randr --json | jq 'length')
+      echo Found connected displays: "$connected_monitors"
+      # Launch Eww bar on each screen
+      ${eww} kill
+      ${eww} daemon
+      for ((screen=0; screen<connected_monitors; screen++)); do
+          echo Starting ewwbar for display $screen
+          ${eww} open --no-daemonize --screen "$screen" bar --id bar:$screen --arg screen="$screen"
+      done
+    '';
+  };
+
+  eww-brightness = pkgs.writeShellApplication {
+    name = "eww-brightness";
+    runtimeInputs = [
+      pkgs.gawk
+      pkgs.brightnessctl
+    ];
+    bashOptions = [ ];
+    text = ''
+      screen_level() {
+          brightnessctl info | grep -oP '(?<=\().+?(?=%)' | awk '{print $1 + 0.0}'
+      }
+
+      icon() {
+          if [ "$1" -eq 0 ]; then
+              echo "${brightness-0-icon}"
+          elif [ "$1" -lt 12 ]; then
+              echo "${brightness-1-icon}"
+          elif [ "$1" -lt 25 ]; then
+              echo "${brightness-2-icon}"
+          elif [ "$1" -lt 37 ]; then
+              echo "${brightness-3-icon}"
+          elif [ "$1" -lt 50 ]; then
+              echo "${brightness-4-icon}"
+          elif [ "$1" -lt 62 ]; then
+              echo "${brightness-5-icon}"
+          elif [ "$1" -lt 75 ]; then
+              echo "${brightness-6-icon}"
+          elif [ "$1" -lt 87 ]; then
+              echo "${brightness-7-icon}"
+          else
+              echo "${brightness-8-icon}"
+          fi
+      }
+
+      set_screen() {
+          brightnessctl set "$1""%" -q
+          ${eww} update brightness="$(get)"
+      }
+
+      get() {
+          brightness=$(screen_level)
+          icon=$(icon "$brightness")
+          echo "{
+              \"screen\": { \"level\": \"$brightness\" },
+              \"icon\": \"$icon\"
+          }"
+      }
+
+      if [[ "$1" == 'get' ]]; then get; fi
+      if [[ "$1" == 'set_screen' ]]; then set_screen "$2"; fi
+    '';
+  };
+
+  eww-volume = pkgs.writeShellApplication {
+    name = "eww-volume";
+    runtimeInputs = [
+      pkgs.gawk
+      audio-ctrl
+    ];
+    bashOptions = [ ];
+    text = ''
+      volume_level() {
+          audio-ctrl get | awk '{print $1 + 0.0}'
+      }
+
+      icon() {
+          if [ "$1" -eq 0 ]; then
+              echo "${volume-0-icon}"
+          elif [ "$1" -lt 25 ]; then
+              echo "${volume-1-icon}"
+          elif [ "$1" -lt 75 ]; then
+              echo "${volume-2-icon}"
+          else
+              echo "${volume-3-icon}"
+          fi
+      }
+
+      set_volume() {
+          audio-ctrl set "$1"
+          ${eww} update volume="$(get)"
+      }
+
+      get() {
+          volume=$(volume_level)
+          icon=$(icon "$volume")
+          echo "{
+              \"level\": \"$volume\",
+              \"icon\": \"$icon\"
+          }"
+      }
+
+      if [[ "$1" == 'get' ]]; then get; fi
+      if [[ "$1" == 'set_volume' ]]; then set_volume "$2"; fi
+    '';
+  };
+
+  eww-power = pkgs.writeShellApplication {
+    name = "eww-power";
+    runtimeInputs = [ pkgs.givc-cli ];
+    bashOptions = [ ];
+    text = ''
+      # Check if an argument is provided
+      if [ $# -ne 1 ]; then
+      echo "Usage: $0 {reboot|poweroff|suspend}"
+      fi
+
+      # Validate the argument
+      case "$1" in (reboot|poweroff|suspend)
+          # Call the givc-cli command with the provided argument
+          givc-cli ${cliArgs} "$1"
+          ;;
+      *)
+          echo "Invalid argument: $1"
+          echo "Usage: $0 {reboot|poweroff|suspend}"
+          ;;
+      esac
+    '';
+  };
 
 in
 {
@@ -152,16 +356,6 @@ in
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         ;;							   Variables        					     ;;	
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
-        (defvar wifi-signal-level 0)
-        (defvar wifi-name "N/A")
-        (defpoll wifi-status 
-            :interval "5s"
-            :initial "N/A"
-            "${ewwWifi} status")
-        (defpoll battery-remaining 
-            :interval "5s"
-            :initial ""
-            "${ewwBat} remaining")
         (defpoll keyboard_layout :interval "1s" "${pkgs.xorg.setxkbmap}/bin/setxkbmap -query | ${pkgs.gawk}/bin/awk '/layout/{print $2}' | tr a-z A-Z")
         (defpoll time :interval "1s" "date +'%I:%M%p'")
         (defpoll date :interval "1m" "date +'%a %d/%m' | tr a-z A-Z")
@@ -171,16 +365,239 @@ in
             "date '+%-m'")
         (defpoll calendar_year :interval "10h"
             "date '+%Y'")
+        (defpoll wifi  :interval "5s" :initial "{}" "${eww-wifi}/bin/eww-wifi get")
+        (defpoll battery  :interval "2s" :initial "{}" "${eww-bat}/bin/eww-bat get")
+        (defpoll brightness  :interval "1s" :initial "{}" "${eww-brightness}/bin/eww-brightness get")
+        (defpoll volume  :interval "1s" :initial "{}" "${eww-volume}/bin/eww-volume get")
+        ;; (defpoll bluetooth  :interval "3s" :initial "{}" "${pkgs.bt-launcher}/bin/bt-launcher status")
 
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         ;;							    Widgets        							 ;;	
         ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
         ;; Launcher ;;
         (defwidget launcher []
-            (button :class "taskbar_button"
+            (button :class "icon_button"
                 :onclick "${pkgs.nwg-drawer}/bin/nwg-drawer &"
                 (image :path "${launcher-icon}")))
 
+        ;; Generic slider widget ;;
+        (defwidget sys_slider [?header icon ?settings-icon level onchange ?onclick ?class ?font-icon ?min] 
+        (box :orientation "v"
+            :class "qs-slider"
+            :spacing 10
+            :space-evenly false
+            (label :class "header" 
+                :visible { header != "" && header != "null" ? "true" : "false" } 
+                :text header
+                :hexpand true
+                :halign "start")
+            (box :orientation "h"
+                :space-evenly false
+                (box :class "icon"
+                    :visible {font-icon == "" ? "true" : "false"}
+                    :hexpand false
+                    :style "background-image: url(\"''${icon}\")")
+                (label :class "icon" :visible {font-icon != "" ? "true" : "false"} :text font-icon)
+                (eventbox
+                    :valign "CENTER"
+                    :class "slider"
+                    :hexpand true
+                    (scale
+                        :hexpand true
+                        :orientation "h"
+                        :halign "fill"
+                        :value level
+                        :onchange onchange
+                        :max 101 
+                        :min { min ?: 0 }))
+                (eventbox 
+                    :visible { onclick != "" && onclick != "null" ? "true" : "false" }
+                    :onclick onclick
+                    :class "settings"
+                    (box :class "icon"
+                        :hexpand false
+                        :style "background-image: url(\"''${settings-icon}\")")))
+        ))
+        (defwidget sys_sliders []
+        (box
+            :orientation "v"
+            :spacing 10
+            :hexpand false
+            (sys_slider
+                    :header "Volume"
+                    :icon {volume.icon}
+                    :settings-icon "${arrow-right-icon}"
+                    :level {volume.level}
+                    :onchange "${eww-volume}/bin/eww-volume set_volume {} &")
+            (sys_slider
+                    :header "Display"
+                    :level {brightness.screen.level}
+                    :icon {brightness.icon}
+                    :min "5"
+                    :onchange "${eww-brightness}/bin/eww-brightness set_screen {} &")
+        ))
+        (defwidget widget_button [icon ?title header ?subtitle ?onclick ?font-icon] 
+        (eventbox :class "qs-info-button" :onclick onclick
+        (box :orientation "v"
+            :class "qs-info-button-padding"
+            :spacing 10
+            :space-evenly false
+            (label :class "title" 
+                :visible { title != "" && title != "null" ? "true" : "false" } 
+                :text title
+                :hexpand true
+                :vexpand false
+                :halign "start")
+            (box :orientation "h"
+                :spacing 10
+                :valign "center"
+                :vexpand "false"
+                :space-evenly false
+                (box :class "icon"
+                    :visible {font-icon == "" ? "true" : "false"}
+                    :valign "center"
+                    :halign "start"
+                    :hexpand false
+                    :style "background-image: url(\"''${icon}\")")
+                (label :class "icon" :visible {font-icon != "" ? "true" : "false"} :text font-icon)
+                (box :class "text"
+                    :valign "center"
+                    :orientation "v" 
+                    :spacing 3
+                    :halign "start"
+                    :hexpand true
+                    (label :halign "start" :class "header" :text header)
+                    (label :visible {subtitle != "" ? "true" : "false"} :halign "start" :class "subtitle" :text subtitle :limit-width 13))
+        ))))
+        (defwidget widget_button_small [icon ?onclick ?header] 
+        (eventbox :class "qs-info-button-small"
+            :onclick onclick
+            (box :orientation "h"
+                :space-evenly false
+                (box :class "icon"
+                    :valign "center"
+                    :halign "start"
+                    :hexpand false
+                    :style "background-image: url(\"''${icon}\")")
+                (box :class "text"
+                    :valign "center"
+                    :orientation "v" 
+                    :spacing 3
+                    :halign "start"
+                    :hexpand true
+                    (label :halign "start" :class "header" :text header :visible {header != "" ? "true" : "false"}))
+        )))
+        (defwidget power_menu []
+        (box
+            :orientation "v"
+            :halign "start"
+            :hexpand "false"
+            :vexpand "false"
+            :spacing 10
+            :space-evenly "false"
+            (widget_button
+                    :icon "${power-icon}"
+                    :header "Shutdown"
+                    :onclick "${eww-popup}/bin/eww-popup power-menu; ${eww-power}/bin/eww-power poweroff")
+            (widget_button
+                    :icon "${suspend-icon}"
+                    :header "Suspend"
+                    :onclick "${eww-popup}/bin/eww-popup power-menu; ${eww-power}/bin/eww-power suspend")
+            (widget_button
+                    :icon "${restart-icon}"
+                    :header "Reboot"
+                    :onclick "${eww-popup}/bin/eww-popup power-menu; ${eww-power}/bin/eww-power reboot")
+        ))
+        (defwidget settings_buttons []
+        (box
+            :orientation "v"
+            :spacing 10
+            (box
+                :orientation "h"
+                :space-evenly true
+                :spacing 10
+                (widget_button
+                    :icon {wifi.icon}
+                    :header "WiFi"
+                    :subtitle {wifi.ssid ?: "Not connected"}
+                    :onclick "${eww-popup}/bin/eww-popup quick-settings; ${pkgs.nm-launcher}/bin/nm-launcher &")
+                (widget_button
+                    :icon "${bluetooth-1-icon}"
+                    :header "Bluetooth"
+                    :onclick "${eww-popup}/bin/eww-popup quick-settings; ${pkgs.bt-launcher}/bin/bt-launcher &"))
+        ))
+        (defwidget etc []
+        (box :orientation "h"
+            :space-evenly true
+            :spacing 10
+            (widget_button
+                :visible { EWW_BATTERY != "" ? "true" : "false" }
+                :hexpand true
+                :vexpand true
+                :subtitle { battery.status == 'Charging' ? "Charging" : 
+                            battery.remaining.hours != "0" && battery.remaining.minutes != "0" ? "''${battery.remaining.hours}h ''${battery.remaining.minutes}m" : 
+                            battery.remaining.hours == "0" && battery.remaining.minutes != "0" ? "''${battery.remaining.minutes}m" :
+                            battery.remaining.hours != "0" && battery.remaining.minutes == "0" ? "''${battery.remaining.hours}h" : 
+                            "" }
+                :header {EWW_BATTERY != "" ? "''${EWW_BATTERY.BAT0.capacity}%" : "100%"}
+                :icon {EWW_BATTERY.BAT0.status == 'Charging' ? "${battery-charging-icon}" :
+                        EWW_BATTERY.BAT0.capacity < 10 ? "${battery-0-icon}" :
+                            EWW_BATTERY.BAT0.capacity <= 30 ? "${battery-1-icon}" :
+                                EWW_BATTERY.BAT0.capacity <= 70 ? "${battery-2-icon}" : "${battery-3-icon}"})
+            (box
+                :hexpand true
+                :vexpand true
+                :class "spacer"
+            )
+        ))
+        (defwidget quick-settings-widget []
+        (box :class "quick-settings"  
+            :orientation "v"
+            :space-evenly false
+            (box 
+                :class "wrapper_widget"
+                :space-evenly false
+                :spacing 10
+                :orientation "v"
+                (etc)
+                (sys_sliders)
+                (settings_buttons))))
+
+        (defwidget power-menu-widget []
+        (box :class "quick-settings"  
+            :orientation "v"
+            :space-evenly false
+            (box 
+                :class "wrapper_widget"
+                :space-evenly false
+                :orientation "v"
+                (power_menu))))
+
+        (defwidget hotkey_indicator [icon level] 
+        (box :class "widget"
+            :orientation "h"
+            (box :class "icon"
+                :style "background-image: url(\"''${icon}\")")
+            (box
+                :space-evenly false
+                :class "percent"
+                (label
+                    :visible { level != "" && level != "null" ? "true" : "false" }
+                    :hexpand true
+                    :halign "END"
+                    :text "''${level}%"))))
+
+        (defwidget brightness_hotkey_indicator []
+        (box :class "hotkey-indicator"
+            (hotkey_indicator
+                :icon "${security-icon}"
+                :level {brightness.screen.level})))
+        (defwidget volume_hotkey_indicator []
+        (box :class "hotkey-indicator"
+            (hotkey_indicator
+                :icon "${bluetooth-1-icon}"
+                :level {volume?.level})))
+
         ;; Battery ;;
         (defwidget bat [?capacity ?status ?remaining]
             (tooltip
@@ -188,48 +605,90 @@ in
                         :text { status == 'Charging' ? "''${status} ''${capacity}%" :
                                 status == 'N/A' ? "Battery N/A" :
                                 remaining != "" ? "Battery ''${capacity}% (''${remaining})" : "Battery ''${capacity}%" })
-                (button :class "taskbar_button"
+                (button :class "icon_button"
                     (image :path { status == 'Charging' ? "${battery-charging-icon}" : status == 'N/A' ? "${battery-charging-icon}" :
                                     capacity < 10 ? "${battery-0-icon}" :
                                         capacity <= 30 ? "${battery-1-icon}" :
                                             capacity <= 70 ? "${battery-2-icon}" : "${battery-3-icon}" }))))
+        (defwidget bat-icon-widget [?capacity ?status]
+            (image :path { status == 'Charging' ? "${battery-charging-icon}" : status == 'N/A' ? "${battery-charging-icon}" :
+                    capacity < 10 ? "${battery-0-icon}" :
+                        capacity <= 30 ? "${battery-1-icon}" :
+                            capacity <= 70 ? "${battery-2-icon}" : "${battery-3-icon}" }))
 
         ;; Wifi ;;
         (defwidget wifi []
             (tooltip
             (label  :class "tooltip"
-                    :text {wifi-status != 'No connection' ? "''${wifi-status}: ''${wifi-name}" : "No connection"})
-            (button :class "taskbar_button"
-                    :onclick "${ewwPopup} wifi &"
-                    (image :path {wifi-status == 'No connection' ? "${wifi-0-icon}":
-                            "''${wifi-signal-level ?: -1}" < 0 ? "${wifi-0-icon}" :
-                                "''${wifi-signal-level ?: -1}" < 30 ? "${wifi-1-icon}" :
-                                    "''${wifi-signal-level ?: -1}" < 60 ? "${wifi-2-icon}" :
-                                        "''${wifi-signal-level ?: -1}" < 80 ? "${wifi-3-icon}" : "${wifi-4-icon}"}))))
+                    :text {wifi.connected != 'false' ? "''${wifi.connected}: ''${wifi.ssid}" : "No connection"})
+            (button :class "icon_button"
+                    :onclick "${pkgs.nm-launcher}/bin/nm-launcher &"
+                    (image :path {wifi.connected == "false" ? "${wifi-0-icon}":
+                            "''${wifi.signal ?: -1}" < 0 ? "${wifi-0-icon}" :
+                                "''${wifi.signal ?: -1}" < 30 ? "${wifi-1-icon}" :
+                                    "''${wifi.signal ?: -1}" < 60 ? "${wifi-2-icon}" :
+                                        "''${wifi.signal ?: -1}" < 80 ? "${wifi-3-icon}" : "${wifi-4-icon}"}))))
 
         ;; Bluetooth ;;
         (defwidget bluetooth []
-            (button :class "taskbar_button"
+            (button :class "icon_button"
                 (image 
-                :path "${bluetooth-icon}")))
+                :path "${bluetooth-1-icon}")))
 
         ;; Security ;;
         (defwidget security []
-            (button :class "taskbar_button"
+            (button :class "icon_button"
                 (image 
                 :path "${security-icon}")))
 
+        ;; Quick settings button ;;
+        (defwidget quick-settings-button [screen wifi-icon bat-icon vol-icon bright-icon]
+            (button :class "icon_button" :onclick "${eww-popup}/bin/eww-popup quick-settings ''${screen} &"
+                (box :orientation "h"
+                    :space-evenly "false" 
+                    :spacing 14
+                    :valign "center" 
+                    (box :class "icon"
+                        :hexpand false
+                        :style "background-image: url(\"''${bright-icon}\")")
+                    (box :class "icon"
+                        :hexpand false
+                        :style "background-image: url(\"''${vol-icon}\")")
+                    (box :class "icon"
+                        :hexpand false
+                        :style "background-image: url(\"''${bat-icon}\")")
+                    (box :class "icon"
+                        :hexpand false
+                        :style "background-image: url(\"''${wifi-icon}\")"))))
+
+        ;; Power menu launcher ;;
+        (defwidget power-menu-launcher [screen]
+            (button :class "icon_button icon" 
+                :halign "center" 
+                :valign "center" 
+                :onclick "${eww-popup}/bin/eww-popup power-menu ''${screen} &"
+                (box :class "icon"
+                    :hexpand false
+                    :style "background-image: url(\"${power-icon}\")")))
+
         ;; Control Panel Widgets ;;	
-        (defwidget control []
+        (defwidget control [screen]
             (box :orientation "h" 
                 :space-evenly "false" 
                 :spacing 14
                 :valign "center" 
                 :class "control"
-                (bat    :status {EWW_BATTERY != "" ? EWW_BATTERY.BAT0.status : "N/A"}
-                        :capacity {EWW_BATTERY != "" ? EWW_BATTERY.BAT0.capacity : "100"}
-                        :remaining battery-remaining)
-                (wifi)))
+                (quick-settings-button :screen screen
+                    :bright-icon {brightness.icon}
+                    :vol-icon {volume.icon}
+                    :wifi-icon {wifi.icon}
+                    :bat-icon { EWW_BATTERY.BAT0.status == "Charging" ? "${battery-charging-icon}" : 
+                                EWW_BATTERY.BAT0.status == "" ?         "${battery-charging-icon}" :
+                                EWW_BATTERY.BAT0.capacity < 10 ?        "${battery-0-icon}" :
+                                EWW_BATTERY.BAT0.capacity <= 30 ?       "${battery-1-icon}" :
+                                EWW_BATTERY.BAT0.capacity <= 70 ?       "${battery-2-icon}" : 
+                                                                        "${battery-3-icon}" }
+                    )))
 
         ;; Divider ;;
         (defwidget divider []
@@ -255,16 +714,13 @@ in
         ;; Date ;;
         (defwidget date [screen]
             (button 
-                :onclick "${ewwPopup} calendar ''${screen} &"
-                :class "taskbar_button"
-                (label
-                    :text date
-                    :class "date")))
+                :onclick "${eww-popup}/bin/eww-popup calendar ''${screen} &"
+                :class "icon_button date" date))
 
         ;; Calendar ;;
         (defwidget cal []
         (eventbox
-            :onhoverlost "${ewwPopup} calendar &"
+            :onhoverlost "${eww-popup}/bin/eww-popup calendar &"
             (box :class "cal-box" 
             (box :class "cal-inner-box"
                 (calendar :class "cal" 
@@ -283,7 +739,7 @@ in
                 (launcher)))
 
         ;; Right Widgets ;;
-        (defwidget right [screen]
+        (defwidget datetime-locale [screen]
             (box	
                 :orientation "h"
                 :space-evenly "false" 
@@ -303,9 +759,12 @@ in
                 :halign "end" 
                 :valign "center" 
                 :spacing 14
-                (control)
                 (divider)
-                (right :screen screen)))
+                (control :screen screen)
+                (divider)
+                (datetime-locale :screen screen)
+                (divider)
+                (power-menu-launcher :screen screen)))
 
         ;; Bar ;;
         (defwidget bar [screen]
@@ -325,9 +784,9 @@ in
             :geometry (geometry  
                         :x "0px" 
                         :y "0px" 
-                        :height "4%"
+                        :height "46px"
                         :width "100%" 
-                        :anchor "bottom center")
+                        :anchor "top center")
             :wm-ignore true
             :windowtype "normal"
             :hexpand "false"
@@ -339,65 +798,347 @@ in
         ;; Calendar Window ;;
         (defwindow calendar
             :geometry (geometry :y "0px" 
-                                :x "0px" 
-                                :height "15%" 
-                                :width "16%"
-                                :anchor "bottom right")
+                                :x "0px"
+                                :anchor "top right")
             :stacking "fg"
             (cal))
 
+        ;; Quick settings window ;;
+        (defwindow quick-settings
+            :geometry (geometry :y "0px" 
+                                :x "0px"
+                                :anchor "top right")
+            :stacking "fg"
+            (quick-settings-widget))
+
+        ;; Power menu window ;;
+        (defwindow power-menu
+            :geometry (geometry :y "0px" 
+                                :x "0px"
+                                :anchor "top right")
+            :stacking "fg"
+            (power-menu-widget))
+
+        ;; Hotkey indicator window ;;
+        (defwindow volume-hotkey-indicator
+            :monitor 0
+            :geometry (geometry :y "-200px" 
+                                :x "0px"
+                                :anchor "center")
+            :stacking "overlay"
+            (volume_hotkey_indicator))
+        (defwindow brightness-hotkey-indicator
+            :monitor 0
+            :geometry (geometry :y "-200px" 
+                                :x "0px"
+                                :anchor "center")
+            :stacking "overlay"
+            (brightness_hotkey_indicator))
       '';
 
       # The UNIX file mode bits
       mode = "0644";
     };
     # Main eww bar styling
-    environment.etc."eww/eww.css" = {
+    environment.etc."eww/eww.scss" = {
       text = ''
         * { all: unset; }
 
-        .eww_bar {
-            background-color: ${bg-primary};
-            padding: 0.3em 1.25em 0.3em 1.25em;
-            border-radius: 4px;
-            margin: 0.3em 1.25em 1.25em 1.25em;
+        $bg-primary: #121212;
+        $widget-bg: #1A1A1A;
+        $widget-hover: #282828;
+
+        @mixin unset($rec: false) {
+            all: unset;
+
+            @if $rec {
+                * {
+                    all: unset
+                }
+            }
         }
 
-        .taskbar_button {
+        @mixin widget($bg: #161616, $padding: 10px, $radius: 12px){
+            border-radius: $radius;
+            background-color: $bg;
+            padding: $padding;
+        }
+
+        @mixin wrapper_widget(){
+            @include widget($padding: 14px, $radius: 6px, $bg: $bg-primary);
+        }
+
+        @mixin floating_widget($margin: 0em 0.3em 0em 0em){
+            @include unset($rec: true);
+            border-radius: 6px;
+            margin: $margin;
+
+            .wrapper_widget { @include wrapper_widget; }
+            box-shadow: 0px 32px 64px 0px rgba(0, 0, 0, 0.24);
+        }
+
+        @mixin icon(){
+            background-color: transparent;
+            background-repeat: no-repeat;
+            background-position: center;
+            min-height: 24px;
+            min-width: 24px;
+            font-family: Fira Code;
+            font-size: 1.5em;
+            color: #FFFFFF;
+        }
+
+        @mixin icon-button($bg: transparent, $hover-bg: $widget-hover) {
+            @include unset($rec: true);
+            @include icon;
+
             border-radius: 0.25em;
             padding: 0.3em;
-            background-color: ${bg-primary};
+            background-color: $bg;
+
+            .icon{
+                @include icon;
+            }
+
+            &:hover {
+                transition: 200ms linear background-color;
+                background-color: $hover-bg;
+            }
+
+            &:active {
+                transition: 200ms linear background-color;
+                background-color: #1F1F1F;
+            }
+        }
+
+        @mixin slider($slider-width: 225px, $slider-height: 2px, $thumb: true, $thumb-width: 1em, $focusable: true, $radius: 7px, $shadows: true, $trough-bg: #282828) {
+            trough {
+                border-radius: $radius;
+                border: 0;
+                background-color: $trough-bg;
+                min-height: $slider-height;
+                min-width: $slider-width;
+                margin: $thumb-width;
+
+                highlight,
+                progress {
+                    background-color: ${stroke-success};
+                    border-radius: $radius;
+                }
+            }
+
+            slider {
+                box-shadow: none;
+                background-color: #D3D3D3;
+                border: 0 solid transparent;
+                border-radius: 50%;
+                min-height: $thumb-width;
+                min-width: $thumb-width;
+                margin: -($thumb-width / 2) 0;
+            }
+
+            &:hover {
+                slider {
+                    @if $thumb {
+                        background-color: #D3D3D3;
+
+                        @if $shadows {
+                            box-shadow: 0 0 3px 0 $bg-primary;
+                        }
+                    }
+                }
+            }
+
+            &:disabled {
+
+                highlight,
+                progress {
+                    background-color: transparentize(#D3D3D3, 0.4);
+                    background-image: none;
+                }
+            }
+
+            @if $focusable {
+                trough:focus {
+                    box-shadow: inset 0 0 0 1 $bg-primary;
+
+                    slider {
+                        @if $thumb {
+                            background-color: red;
+                            box-shadow: inset 0 0 0 1 $bg-primary;
+                        }
+                    }
+                }
+
+            }
+        }
+
+        @mixin sys-sliders () {
+            .slider{ @include slider; }
+
+            .header {
+                font-size: 0.8em;
+                font-weight: 500;
+                font-family: Inter;
+            }
+
+            .settings{
+                @include icon-button;
+                margin-left: 0.15em;
+
+                .icon{
+                    @include icon;
+                }
+            }
+
+            .icon{
+                background-color: transparent;
+                background-repeat: no-repeat;
+                background-position: center;
+                min-height: 24px;
+                min-width: 24px;
+                margin-right: 0.15em;
+            }
+        }
+
+        @mixin widget-button() {
+            @include unset($rec: true);
+
+            border-radius: 50%;
+            padding: 0.2em;
+            background-color: transparent;
             background-repeat: no-repeat;
             background-position: center;
+            min-height: 24px;
+            min-width: 24px;
+
+            &:hover {
+                transition: 200ms linear background-color;
+                background-color: $widget-hover;
+            }
+
+            &:disabled {
+                background-color: transparentize($widget-hover, 0.4);
+                background-image: none;
+            }
         }
 
-        .wifi_0_icon {
-            background-image: url('${wifi-0-icon}');
+        @mixin qs-widget($min-height: 70px, $min-width: 150px, $radius: 0.75em, $bg: $widget-bg) {
+            min-height: $min-height;
+            min-width: $min-width;
+            border-radius: $radius;
+            background-color: $bg;
         }
 
-        .wifi_1_icon {
-            background-image: url('${wifi-1-icon}');
+        @mixin qs-info-button($min-width: 145px, $radius: 0.75em, $bg: $widget-bg, $padding: 1em, $icon-padding: 0.3em) {
+            @include unset($rec: true);
+            @include qs-widget ();
+
+            .qs-info-button-padding {
+                padding: $padding;
+            }
+
+            .title {
+                font-size: 0.8em;
+                font-weight: 500;
+                font-family: Inter;
+            }
+
+            &:hover {
+                transition: 200ms linear background-color;
+                background-color: $widget-hover;
+            }
+
+            &:active {
+                transition: 200ms linear background-color;
+                background-color: #1F1F1F;
+            }
+
+            .icon {
+                background-color: transparent;
+                background-repeat: no-repeat;
+                background-position: center;
+                min-height: 24px;
+                min-width: 24px;
+                padding: $icon-padding;
+            }
+
+            .text {
+                color: ${text-base};
+                font-family: "Inter";
+                
+                .header {
+                    font-weight: 600;
+                    font-size: 0.9em;
+                }
+
+                .subtitle {
+                    font-weight: 400;
+                    font-size: 0.7em;
+                    min-height: 0px;
+                }
+            }
         }
 
-        .wifi_2_icon {
-            background-image: url('${wifi-2-icon}');
+        .qs-widget{ @include qs-widget; }
+
+        .wrapper_widget { @include wrapper_widget; }
+
+        .icon { @include icon; }
+
+        .quick-settings{
+            @include floating_widget;
         }
 
-        .wifi_3_icon {
-            background-image: url('${wifi-3-icon}');
+        .qs-slider{ 
+            @include sys-sliders;
+            @include qs-widget;
+            padding: 0.625em;
         }
 
-        .wifi_4_icon {
-            background-image: url('${wifi-4-icon}');
+        .hotkey-indicator{
+            @include floating_widget($margin: 0);
+
+            .widget{
+                @include widget;
+            }
+
+            .percent{
+                margin-left: 1em;
+                min-width: 2.6em;
+            }
+            
+            .icon{
+                background-color: $bg-primary;
+                background-repeat: no-repeat;
+                background-position: center;
+                min-height: 24px;
+                min-width: 24px;
+                margin-right: 1em;
+
+            }
         }
 
-        .taskbar_button:hover {
-            transition: 200ms linear background-color;
-            background-color: ${bg-secondary};
+        .widget-button { @include widget-button; }
+
+        .qs-info-button {@include qs-info-button; }
+
+        .qs-info-button-small {
+            @include qs-info-button($min-width: 75px, $padding: 0.3em, $icon-padding: 0.1em);
+        }
+
+        .eww_bar {
+            background-color: $bg-primary;
+            padding: 0.2em 1em 0.2em 1em;
+            margin-bottom: 0.3em;
+        }
+
+        .icon_button {
+            @include icon-button;
         }
 
         .tooltip {
-            background-color: ${bg-primary};
+            background-color: $bg-primary;
             color: ${text-base};
             font-family: "Inter";
             font-size: 1em;
@@ -416,7 +1157,7 @@ in
         .time {
             padding: 0.4em 0.25em;
             border-radius: 0.25em;
-            background-color: ${bg-primary};
+            background-color: $bg-primary;
             font-family: "Inter";
             font-weight: ${font-bold};
             font-size: 1em;
@@ -435,18 +1176,20 @@ in
         .keyboard-layout {
             padding: 0.4em 0.25em;
             border-radius: 4px;
-            background-color: ${bg-primary};
+            background-color: $bg-primary;
             font-family: "Inter";
             font-weight: ${font-bold};
             font-size: 1em;
             color: ${text-base};
         }
 
+        .spacer {
+            background-color: transparent;
+        }
+
         .cal-box {
-            margin: 0 1.25em 0 1.25em;
-            background-color: ${bg-primary};
-            padding: 0px;
-            border-radius: 4px;
+            @include floating_widget;
+            background-color: $bg-primary;
         }
 
         .cal {
@@ -456,7 +1199,7 @@ in
         }
 
         .cal-box .cal-inner-box {
-            padding: 0px;
+            @include wrapper_widget;
         }
 
         calendar.header {
@@ -480,7 +1223,7 @@ in
         }
 
         calendar:indeterminate {
-            color: ${bg-primary};
+            color: $bg-primary;
         }
 
       '';
@@ -494,10 +1237,10 @@ in
       description = "ewwbar";
       serviceConfig = {
         Type = "forking";
-        ExecStart = "${ewwStart}";
+        ExecStart = "${eww-start}/bin/eww-start";
         Environment = "XDG_CACHE_HOME=/tmp/.ewwcache";
         Restart = "always";
-        RestartSec = 5;
+        RestartSec = 1;
       };
       wantedBy = [ "ghaf-session.target" ];
       partOf = [ "ghaf-session.target" ];