diff --git a/nixos/home/desktop/hyprland/icons/lock_white.png b/nixos/home/desktop/hyprland/icons/lock_white.png
new file mode 100644
index 0000000..2925c26
Binary files /dev/null and b/nixos/home/desktop/hyprland/icons/lock_white.png differ
diff --git a/nixos/home/desktop/hyprland/icons/logout_white.png b/nixos/home/desktop/hyprland/icons/logout_white.png
new file mode 100644
index 0000000..33ecdc1
Binary files /dev/null and b/nixos/home/desktop/hyprland/icons/logout_white.png differ
diff --git a/nixos/home/desktop/hyprland/icons/reboot_white.png b/nixos/home/desktop/hyprland/icons/reboot_white.png
new file mode 100644
index 0000000..e4a6987
Binary files /dev/null and b/nixos/home/desktop/hyprland/icons/reboot_white.png differ
diff --git a/nixos/home/desktop/hyprland/icons/shutdown_white.png b/nixos/home/desktop/hyprland/icons/shutdown_white.png
new file mode 100644
index 0000000..a8892ae
Binary files /dev/null and b/nixos/home/desktop/hyprland/icons/shutdown_white.png differ
diff --git a/nixos/home/desktop/hyprland/wlogout.nix b/nixos/home/desktop/hyprland/wlogout.nix
index e0a8643..3fc0ec1 100644
--- a/nixos/home/desktop/hyprland/wlogout.nix
+++ b/nixos/home/desktop/hyprland/wlogout.nix
@@ -2,6 +2,7 @@
   lib,
   config,
   pkgs,
+  userSettings,
   ...
 }: {
   options = {
@@ -9,6 +10,13 @@
   };
 
   config = lib.mkIf config.desktop.hyprland.wlogout.enable {
+    home.file = {
+      ".config/wlogout/icons/lock.png".source = ./icons/lock_white.png;
+      ".config/wlogout/icons/logout.png".source = ./icons/logout_white.png;
+      ".config/wlogout/icons/shutdown.png".source = ./icons/shutdown_white.png;
+      ".config/wlogout/icons/reboot.png".source = ./icons/reboot_white.png;
+    };
+
     programs.wlogout = {
       enable = true;
       layout = [
@@ -40,10 +48,13 @@
           "keybind" = "r";
         }
       ];
-      style = 
-      let
+      style = let
         fntSize = "40";
         BtnCol = config.lib.stylix.colors.base01;
+        Main-bg = config.lib.stylix.colors.base02;
+        Wb-act-bg = config.lib.stylix.colors.base05; # base05 is light blue color
+        Wb-hvr-bg = config.lib.stylix.colors.base07; # base07 is blue color
+
         active_rad = "40";
         y_hvr = "5";
         x_hvr = "5";
@@ -51,16 +62,6 @@
         y_mgn = "5";
         x_mgn = "5";
       in ''
-        @define-color bar-bg rgba(0, 0, 0, 0);
-
-        @define-color main-bg #11111b;
-        @define-color main-fg #cdd6f4;
-
-        @define-color wb-act-bg #a6adc8;
-        @define-color wb-act-fg #313244;
-
-        @define-color wb-hvr-bg #f5c2e7;
-        @define-color wb-hvr-fg #313244;
         * {
             background-image: none;
             font-size: ${fntSize}px;
@@ -72,7 +73,7 @@
 
         button {
             color: #${BtnCol};
-            background-color: @main-bg;
+            background-color: #${Main-bg};
             outline-style: none;
             border: none;
             border-width: 0px;
@@ -86,12 +87,12 @@
         }
 
         button:focus {
-            background-color: @wb-act-bg;
+            background-color: #${Wb-act-bg};
             background-size: 20%;
         }
 
         button:hover {
-            background-color: @wb-hvr-bg;
+            background-color: #${Wb-hvr-bg};
             background-size: 25%;
             border-radius: ${active_rad}px;
             animation: gradient_f 20s ease-in infinite;
@@ -119,29 +120,29 @@
         }
 
         #lock {
+            background-image: image(url("/home/${userSettings.username}/.config/wlogout/icons/lock.png"), url("${pkgs.wlogout}/share/wlogout/icons/lock.png"));
             border-radius: ${button_rad}px 0px 0px 0px;
             margin : ${y_mgn}px 0px 0px ${x_mgn}px;
         }
 
         #logout {
+            background-image: image(url("/home/${userSettings.username}/.config/wlogout/icons/logout.png"), url("${pkgs.wlogout}/share/wlogout/icons/logout.png"));
             border-radius: 0px 0px 0px ${button_rad}px;
             margin : 0px 0px ${y_mgn}px ${x_mgn}px;
         }
 
         #shutdown {
+            background-image: image(url("/home/${userSettings.username}/.config/wlogout/icons/shutdown.png"), url("${pkgs.wlogout}/share/wlogout/icons/shutdown.png"));
             border-radius: 0px ${button_rad}px 0px 0px;
             margin : ${y_mgn}px ${x_mgn}px 0px 0px;
         }
 
         #reboot {
+            background-image: image(url("/home/${userSettings.username}/.config/wlogout/icons/reboot.png"), url("${pkgs.wlogout}/share/wlogout/icons/reboot.png"));
             border-radius: 0px 0px ${button_rad}px 0px;
             margin : 0px ${x_mgn}px ${y_mgn}px 0px;
         }
       '';
     };
-
-    home.packages = [
-      pkgs.wlogout
-    ];
   };
 }