diff --git a/config/matugen/config.toml b/config/matugen/config.toml
index 7f6ac27..c77f57b 100644
--- a/config/matugen/config.toml
+++ b/config/matugen/config.toml
@@ -4,3 +4,7 @@ version_check = false
 [templates.hyprland]
 input_path = '~/.config/matugen/templates/hyprland/colors.lua'
 output_path = '~/.config/hypr/hyprland/colors.lua'
+
+[templates.wlogout]
+input_path = '~/.config/matugen/templates/wlogout/style.css'
+output_path = '~/.config/wlogout/style.css'
diff --git a/config/matugen/templates/colors.json b/config/matugen/templates/colors.json
deleted file mode 100644
index 25f80e8..0000000
--- a/config/matugen/templates/colors.json
+++ /dev/null
@@ -1,51 +0,0 @@
-{
-  "background": "{{colors.background.default.hex}}",
-  "error": "{{colors.error.default.hex}}",
-  "error_container": "{{colors.error_container.default.hex}}",
-  "inverse_on_surface": "{{colors.inverse_on_surface.default.hex}}",
-  "inverse_primary": "{{colors.inverse_primary.default.hex}}",
-  "inverse_surface": "{{colors.inverse_surface.default.hex}}",
-  "on_background": "{{colors.on_background.default.hex}}",
-  "on_error": "{{colors.on_error.default.hex}}",
-  "on_error_container": "{{colors.on_error_container.default.hex}}",
-  "on_primary": "{{colors.on_primary.default.hex}}",
-  "on_primary_container": "{{colors.on_primary_container.default.hex}}",
-  "on_primary_fixed": "{{colors.on_primary_fixed.default.hex}}",
-  "on_primary_fixed_variant": "{{colors.on_primary_fixed_variant.default.hex}}",
-  "on_secondary": "{{colors.on_secondary.default.hex}}",
-  "on_secondary_container": "{{colors.on_secondary_container.default.hex}}",
-  "on_secondary_fixed": "{{colors.on_secondary_fixed.default.hex}}",
-  "on_secondary_fixed_variant": "{{colors.on_secondary_fixed_variant.default.hex}}",
-  "on_surface": "{{colors.on_surface.default.hex}}",
-  "on_surface_variant": "{{colors.on_surface_variant.default.hex}}",
-  "on_tertiary": "{{colors.on_tertiary.default.hex}}",
-  "on_tertiary_container": "{{colors.on_tertiary_container.default.hex}}",
-  "on_tertiary_fixed": "{{colors.on_tertiary_fixed.default.hex}}",
-  "on_tertiary_fixed_variant": "{{colors.on_tertiary_fixed_variant.default.hex}}",
-  "outline": "{{colors.outline.default.hex}}",
-  "outline_variant": "{{colors.outline_variant.default.hex}}",
-  "primary": "{{colors.primary.default.hex}}",
-  "primary_container": "{{colors.primary_container.default.hex}}",
-  "primary_fixed": "{{colors.primary_fixed.default.hex}}",
-  "primary_fixed_dim": "{{colors.primary_fixed_dim.default.hex}}",
-  "scrim": "{{colors.scrim.default.hex}}",
-  "secondary": "{{colors.secondary.default.hex}}",
-  "secondary_container": "{{colors.secondary_container.default.hex}}",
-  "secondary_fixed": "{{colors.secondary_fixed.default.hex}}",
-  "secondary_fixed_dim": "{{colors.secondary_fixed_dim.default.hex}}",
-  "shadow": "{{colors.shadow.default.hex}}",
-  "surface": "{{colors.surface.default.hex}}",
-  "surface_bright": "{{colors.surface_bright.default.hex}}",
-  "surface_container": "{{colors.surface_container.default.hex}}",
-  "surface_container_high": "{{colors.surface_container_high.default.hex}}",
-  "surface_container_highest": "{{colors.surface_container_highest.default.hex}}",
-  "surface_container_low": "{{colors.surface_container_low.default.hex}}",
-  "surface_container_lowest": "{{colors.surface_container_lowest.default.hex}}",
-  "surface_dim": "{{colors.surface_dim.default.hex}}",
-  "surface_tint": "{{colors.surface_tint.default.hex}}",
-  "surface_variant": "{{colors.surface_variant.default.hex}}",
-  "tertiary": "{{colors.tertiary.default.hex}}",
-  "tertiary_container": "{{colors.tertiary_container.default.hex}}",
-  "tertiary_fixed": "{{colors.tertiary_fixed.default.hex}}",
-  "tertiary_fixed_dim": "{{colors.tertiary_fixed_dim.default.hex}}"
-}
diff --git a/config/matugen/templates/gtk-3.0/gtk.css b/config/matugen/templates/gtk-3.0/gtk.css
deleted file mode 100644
index 0d8cb9c..0000000
--- a/config/matugen/templates/gtk-3.0/gtk.css
+++ /dev/null
@@ -1,38 +0,0 @@
-/*
-* GTK colors generated with Matugen
-* The source template is here: ~/.config/matugen/templates/gtk-3.0/gtk.css
-*/
-
-/* Accents */
-@define-color accent_color {{colors.primary.default.hex}};
-@define-color accent_fg_color {{colors.on_primary.default.hex}};
-@define-color accent_bg_color {{colors.primary.default.hex}};
-@define-color destructive_bg_color {{colors.error_container.default.hex}};
-@define-color destructive_fg_color {{colors.on_error_container.default.hex}};
-@define-color destructive_color {{colors.error.default.hex}};
-@define-color success_bg_color #374B3E;
-@define-color success_fg_color #D1E9D6;
-@define-color success_color #B5CCBA;
-/* Base surfaces */
-@define-color window_bg_color {{colors.background.default.hex}};
-@define-color window_fg_color {{colors.on_background.default.hex}};
-@define-color headerbar_bg_color {{colors.surface_container.default.hex}};
-@define-color headerbar_backdrop_color {{colors.surface_container.default.hex}};
-@define-color headerbar_fg_color {{colors.on_surface.default.hex}};
-@define-color card_bg_color {{colors.surface_container.default.hex}};
-@define-color card_fg_color {{colors.on_surface.default.hex}};
-@define-color sidebar_bg_color {{colors.surface_container.default.hex}};
-@define-color sidebar_fg_color {{colors.on_surface.default.hex}};
-@define-color secondary_sidebar_bg_color {{colors.surface_container_low.default.hex}};
-@define-color secondary_sidebar_fg_color {{colors.on_surface.default.hex}};
-@define-color sidebar_border_color @sidebar_bg_color;
-@define-color sidebar_backdrop_color @sidebar_bg_color;
-@define-color view_bg_color {{colors.surface_container_lowest.default.hex}};
-@define-color view_fg_color {{colors.on_surface.default.hex}};
-@define-color overview_bg_color {{colors.surface_container_lowest.default.hex}};
-@define-color overview_fg_color {{colors.on_surface.default.hex}};
-/* Popups */
-@define-color popover_bg_color {{colors.surface_container_highest.default.hex}};
-@define-color popover_fg_color {{colors.on_surface.default.hex}};
-@define-color dialog_bg_color {{colors.surface_container_high.default.hex}};
-@define-color dialog_fg_color {{colors.on_surface.default.hex}};
diff --git a/config/matugen/templates/gtk-4.0/gtk.css b/config/matugen/templates/gtk-4.0/gtk.css
deleted file mode 100644
index 6f24e30..0000000
--- a/config/matugen/templates/gtk-4.0/gtk.css
+++ /dev/null
@@ -1,541 +0,0 @@
-/*
-* GTK colors generated with Matugen
-* The source template is here: ~/.config/matugen/templates/gtk-4.0/gtk.css
-*/
-
-@media (prefers-color-scheme: light) {
-    /* Accents */
-    @define-color accent_color {{colors.primary.light.hex}};
-    @define-color accent_hover_color rgba({{colors.primary.light.red}}, {{colors.primary.light.green}}, {{colors.primary.light.blue}}, 0.08);
-    @define-color accent_vibrant_hover_color rgba({{colors.primary.light.red}}, {{colors.primary.light.green}}, {{colors.primary.light.blue}}, 0.18);
-    @define-color accent_active_color rgba({{colors.primary.light.red}}, {{colors.primary.light.green}}, {{colors.primary.light.blue}}, 0.1);
-    @define-color accent_vibrant_active_color rgba({{colors.primary.light.red}}, {{colors.primary.light.green}}, {{colors.primary.light.blue}}, 0.26);
-    @define-color accent_fg_color {{colors.on_primary.light.hex}};
-    @define-color accent_bg_color {{colors.primary.light.hex}};
-    @define-color destructive_bg_color {{colors.error_container.light.hex}};
-    @define-color destructive_fg_color {{colors.on_error_container.light.hex}};
-    @define-color destructive_color {{colors.error.light.hex}};
-    @define-color success_bg_color #B5CCBA;
-    @define-color success_fg_color #213528;
-    @define-color success_color #374B3E;
-    /* Base surfaces */
-    @define-color window_bg_color {{colors.background.light.hex}};
-    @define-color window_fg_color {{colors.on_background.light.hex}};
-    @define-color headerbar_bg_color {{colors.surface_container.light.hex}};
-    @define-color headerbar_backdrop_color {{colors.surface_container.light.hex}};
-    @define-color headerbar_fg_color {{colors.on_surface.light.hex}};
-    @define-color card_bg_color {{colors.surface_container.light.hex}};
-    @define-color card_fg_color {{colors.on_surface.light.hex}};
-    @define-color sidebar_bg_color {{colors.background.light.hex}};
-    @define-color sidebar_fg_color {{colors.on_surface.light.hex}};
-    @define-color sidebar_row_active_bg_color {{colors.secondary_container.light.hex}};
-    @define-color sidebar_row_active_fg_color {{colors.on_secondary_container.light.hex}};
-    @define-color secondary_sidebar_bg_color {{colors.surface_container_low.light.hex}};
-    @define-color secondary_sidebar_backdrop_color {{colors.surface_container_low.light.hex}};
-    @define-color secondary_sidebar_fg_color {{colors.on_surface_variant.light.hex}};
-    @define-color sidebar_border_color @sidebar_bg_color;
-    @define-color sidebar_backdrop_color @sidebar_bg_color;
-    @define-color view_bg_color {{colors.surface_container_lowest.light.hex}};
-    @define-color view_fg_color {{colors.on_surface.light.hex}};
-    @define-color overview_bg_color {{colors.surface_container_lowest.light.hex}};
-    @define-color overview_fg_color {{colors.on_surface.light.hex}};
-    /* Popups */
-    @define-color popover_bg_color {{colors.surface_container_highest.light.hex}};
-    @define-color popover_fg_color {{colors.on_surface.light.hex}};
-    @define-color popover_fg_hover_color rgba({{colors.on_surface.light.red}}, {{colors.on_surface.light.green}}, {{colors.on_surface.light.blue}}, 0.08);
-    @define-color dialog_bg_color {{colors.surface_container_high.light.hex}};
-    @define-color dialog_fg_color {{colors.on_surface.light.hex}};
-    @define-color thumbnail_bg_color {{colors.surface_container_high.light.hex}};
-    @define-color thumbnail_fg_color {{colors.on_surface.light.hex}};
-
-    /* Material */
-    @define-color inverse_on_surface {{colors.inverse_on_surface.light.hex}};
-    @define-color inverse_primary {{colors.inverse_primary.light.hex}};
-    @define-color inverse_surface {{colors.inverse_surface.light.hex}};
-    @define-color surface_container_highest {{colors.surface_container_highest.light.hex}};
-    @define-color surface_container_high {{colors.surface_container_high.light.hex}};
-    @define-color on_surface_variant {{colors.on_surface_variant.light.hex}};
-    @define-color surface_variant {{colors.surface_variant.light.hex}};
-
-    @define-color outline {{colors.outline.light.hex}};
-
-    /* Material state layers */
-    @define-color inverse_on_surface_hover rgba({{colors.inverse_on_surface.light.red}}, {{colors.inverse_on_surface.light.green}}, {{colors.inverse_on_surface.light.blue}}, 0.08);
-    @define-color inverse_on_surface_active rgba({{colors.inverse_on_surface.light.red}}, {{colors.inverse_on_surface.light.green}}, {{colors.inverse_on_surface.light.blue}}, 0.18);
-    @define-color inverse_primary_hover rgba({{colors.inverse_primary.light.red}}, {{colors.inverse_primary.light.green}}, {{colors.inverse_primary.light.blue}}, 0.08);
-    @define-color inverse_primary_active rgba({{colors.inverse_primary.light.red}}, {{colors.inverse_primary.light.green}}, {{colors.inverse_primary.light.blue}}, 0.18);
-}
-
-@media (prefers-color-scheme: dark) {
-    /* Accents */
-    @define-color accent_color {{colors.primary.dark.hex}};
-    @define-color accent_hover_color rgba({{colors.primary.dark.red}}, {{colors.primary.dark.green}}, {{colors.primary.dark.blue}}, 0.08);
-    @define-color accent_vibrant_hover_color rgba({{colors.primary.dark.red}}, {{colors.primary.dark.green}}, {{colors.primary.dark.blue}}, 0.18);
-    @define-color accent_active_color rgba({{colors.primary.dark.red}}, {{colors.primary.dark.green}}, {{colors.primary.dark.blue}}, 0.1);
-    @define-color accent_vibrant_active_color rgba({{colors.primary.dark.red}}, {{colors.primary.dark.green}}, {{colors.primary.dark.blue}}, 0.2);
-    @define-color accent_fg_color {{colors.on_primary.dark.hex}};
-    @define-color accent_bg_color {{colors.primary.dark.hex}};
-    @define-color destructive_bg_color {{colors.error_container.dark.hex}};
-    @define-color destructive_fg_color {{colors.on_error_container.dark.hex}};
-    @define-color destructive_color {{colors.error.dark.hex}};
-    @define-color success_bg_color #374B3E;
-    @define-color success_fg_color #D1E9D6;
-    @define-color success_color #B5CCBA;
-    /* Base surfaces */
-    @define-color window_bg_color {{colors.background.dark.hex}};
-    @define-color window_fg_color {{colors.on_background.dark.hex}};
-    @define-color headerbar_bg_color {{colors.surface_container.dark.hex}};
-    @define-color headerbar_backdrop_color {{colors.surface_container.dark.hex}};
-    @define-color headerbar_fg_color {{colors.on_surface.dark.hex}};
-    @define-color card_bg_color {{colors.surface_container.dark.hex}};
-    @define-color card_fg_color {{colors.on_surface.dark.hex}};
-    @define-color sidebar_bg_color {{colors.background.dark.hex}};
-    @define-color sidebar_fg_color {{colors.on_surface.dark.hex}};
-    @define-color sidebar_row_active_bg_color {{colors.secondary_container.dark.hex}};
-    @define-color sidebar_row_active_fg_color {{colors.on_secondary_container.dark.hex}};
-    @define-color secondary_sidebar_bg_color {{colors.surface_container_low.dark.hex}};
-    @define-color secondary_sidebar_backdrop_color {{colors.surface_container_low.dark.hex}};
-    @define-color secondary_sidebar_fg_color {{colors.on_surface_variant.dark.hex}};
-    @define-color sidebar_border_color @sidebar_bg_color;
-    @define-color sidebar_backdrop_color @sidebar_bg_color;
-    @define-color view_bg_color {{colors.surface_container_lowest.dark.hex}};
-    @define-color view_fg_color {{colors.on_surface.dark.hex}};
-    @define-color overview_bg_color {{colors.surface_container_lowest.dark.hex}};
-    @define-color overview_fg_color {{colors.on_surface.dark.hex}};
-    /* Popups */
-    @define-color popover_bg_color {{colors.surface_container_highest.dark.hex}};
-    @define-color popover_fg_color {{colors.on_surface.dark.hex}};
-    @define-color popover_fg_hover_color rgba({{colors.on_surface.dark.red}}, {{colors.on_surface.dark.green}}, {{colors.on_surface.dark.blue}}, 0.08);
-    @define-color dialog_bg_color {{colors.surface_container_high.dark.hex}};
-    @define-color dialog_fg_color {{colors.on_surface.dark.hex}};
-    @define-color thumbnail_bg_color {{colors.surface_container_high.dark.hex}};
-    @define-color thumbnail_fg_color {{colors.on_surface.dark.hex}};
-
-    /* Material */
-    @define-color inverse_on_surface {{colors.inverse_on_surface.dark.hex}};
-    @define-color inverse_primary {{colors.inverse_primary.dark.hex}};
-    @define-color inverse_surface {{colors.inverse_surface.dark.hex}};
-    @define-color surface_container_highest {{colors.surface_container_highest.dark.hex}};
-    @define-color surface_container_high {{colors.surface_container_high.dark.hex}};
-    @define-color on_surface_variant {{colors.on_surface_variant.dark.hex}};
-    @define-color surface_variant {{colors.surface_variant.dark.hex}};
-
-    @define-color outline {{colors.outline.dark.hex}};
-
-    /* Material state layers */
-    @define-color inverse_on_surface_hover rgba({{colors.inverse_on_surface.dark.red}}, {{colors.inverse_on_surface.dark.green}}, {{colors.inverse_on_surface.dark.blue}}, 0.08);
-    @define-color inverse_on_surface_active rgba({{colors.inverse_on_surface.dark.red}}, {{colors.inverse_on_surface.dark.green}}, {{colors.inverse_on_surface.dark.blue}}, 0.18);
-    @define-color inverse_primary_hover rgba({{colors.inverse_primary.dark.red}}, {{colors.inverse_primary.dark.green}}, {{colors.inverse_primary.dark.blue}}, 0.08);
-    @define-color inverse_primary_active rgba({{colors.inverse_primary.dark.red}}, {{colors.inverse_primary.dark.green}}, {{colors.inverse_primary.dark.blue}}, 0.18);
-}
-
-* {
-  caret-color: @accent_color;
-}
-
-window {
-  background: @window_bg_color;
-}
-
-.text-button {
-  border-radius: 999px;
-}
-
-.text-button,
-.text-button * {
-  font-weight: 500;
-}
-
-splitbutton {
-  background-color: transparent;
-}
-
-splitbutton button {
-  border-top-left-radius: 999px;
-  border-bottom-left-radius: 999px;
-  border-top-right-radius: 4px;
-  border-bottom-right-radius: 4px;
-}
-
-splitbutton separator {
-  color: transparent;
-}
-
-splitbutton menubutton {
-  border-top-left-radius: 4px;
-  border-bottom-left-radius: 4px;
-  border-top-right-radius: 999px;
-  border-bottom-right-radius: 999px;
-}
-
-.popup-menu-item {
-  background-color: transparent;
-  border-radius: 999px;
-}
-
-#NautilusPathBar #NautilusPathButton *,
-.nautilus-pathbar .nautilus-path-button * {
-    color: @sidebar_row_active_fg_color;
-    font-weight: 400;
-}
-
-#NautilusPathBar #NautilusPathButton,
-.nautilus-pathbar .nautilus-path-button {
-    background: @accent_active_color;
-    border-radius: 4px;
-    margin: 0;
-    margin-right: 2px;
-}
-
-#NautilusPathBar #NautilusPathButton:hover,
-.nautilus-pathbar .nautilus-path-button:hover {
-    background: @accent_vibrant_hover_color;
-}
-
-#NautilusPathBar #NautilusPathButton:active,
-.nautilus-pathbar .nautilus-path-button:active {
-    background: @accent_vibrant_active_color;
-}
-
-#NautilusPathButton,
-.nautilus-pathbar {
-    background: transparent;
-}
-
-#NautilusPathBar box box:first-child #NautilusPathButton,
-.nautilus-pathbar box box:first-child .nautilus-path-button {
-    border-radius: 24px 4px 4px 24px;
-}
-
-#NautilusPathBar box box:last-child #NautilusPathButton,
-.nautilus-pathbar box box:last-child .nautilus-path-button {
-    border-radius: 4px 24px 24px 4px;
-}
-
-#NautilusPathBar #NautilusPathButton.current-dir.current-dir,
-.nautilus-pathbar .nautilus-path-button.current-dir.current-dir {
-    border-radius: 999px;
-}
-
-#NautilusPathBar .dim-label,
-.nautilus-pathbar .dim-label {
-    font-size: 0;
-}
-
-#NautilusPathBar button .dim-label,
-.nautilus-pathbar button .dim-label {
-    font-size: 14px;
-    opacity: 100%;
-}
-
-#NautilusPathBar button,
-.nautilus-pathbar button {
-    border-radius: 8px;
-}
-#NautilusPathBar button:checked,
-.nautilus-pathbar button:checked {
-    background: @accent_vibrant_hover_color;
-}
-
-headerbar button {
-  border-radius: 999px;
-}
-
-headerbar >windowhandle box stack > box:nth-child(2) {
-	background: @accent_active_color;
-	border-radius: 8px;
-}
-
-.nautilus-list-view,
-.nautilus-grid-view {
-  background: @secondary_sidebar_bg_color;
-  border-radius: 16px;
-}
-
-.navigation-sidebar row * {
-  color: @sidebar_fg_color;
-  font-weight: 500;
-  font-size: 13px;
-}
-
-.navigation-sidebar row {
-  border-radius: 999px;
-  padding: 2px;
-}
-
-.navigation-sidebar row:hover {
-  background: @accent_hover_color;
-}
-
-.navigation-sidebar row:active {
-  background: @accent_active_color;
-}
-
-.navigation-sidebar row:selected {
-  background: @sidebar_row_active_bg_color;
-}
-
-.navigation-sidebar row:selected * {
-  color: @sidebar_row_active_fg_color;
-}
-
-banner widget {
-  border-radius: 16px 0 0 16px;
-  margin-bottom: 8px;
-  background-color: @secondary_sidebar_bg_color;
-}
-
-.boxed-list {
-  box-shadow: none;
-  background-color: @window_bg_color;
-}
-
-.boxed-list row {
-  background: @card_bg_color;
-  border-radius: 4px;
-  border: none;
-  margin-bottom: 2px;
-}
-
-.boxed-list row.activatable:hover {
-  background-color: @thumbnail_bg_color;
-}
-
-.boxed-list row.activatable:active {
-  background-color: @popover_bg_color;
-}
-
-.horizontal>listview>row {
-  background-color: transparent;
-}
-
-.boxed-list row:insensitive {
-  background-color: @card_bg_color;
-}
-
-.text-button.toggle {
-  border-radius: 4px;
-  background-color: @surface_container_highest;
-  margin-left: 2px;
-}
-
-.text-button.toggle:hover {
-  background-color: @surface_variant;
-}
-
-.text-button.toggle:active {
-  background-color: @surface_container_highest;
-}
-
-.text-button.toggle * {
-  color: @on_surface_variant;
-  font-weight: 400;
-}
-
-.boxed-list row:first-child {
-  border-radius: 16px 16px 4px 4px;
-}
-
-.boxed-list row:last-child {
-  border-radius: 4px 4px 16px 16px;
-  margin-bottom: 0;
-}
-
-.text-button.toggle:first-child {
-  border-radius: 16px 4px 4px 16px;
-}
-
-.text-button.toggle:last-child {
-  border-radius: 4px 16px 16px 4px;
-}
-
-.boxed-list row:first-child:last-child,
-.text-button.toggle:first-child:last-child {
-  border-radius: 16px;
-}
-
-.text-button.toggle:checked {
-  background-color: @accent_bg_color;
-  border-radius: 999px;
-}
-
-.text-button.toggle:checked * {
-  color: @accent_fg_color;
-  font-weight: 500;
-}
-
-button.back {
-  border-radius: 999px;
-  background-color: @accent_hover_color;
-  padding-left: 4px;
-  padding-right: 6px;
-}
-
-button.back * {
-  font-size: 12px;
-}
-
-button.back:hover {
-  background-color: @accent_hover_color;
-}
-
-button.back:active {
-  background-color: @accent_active_color;
-}
-
-/* switch */
-
-switch {
-  background: @secondary_sidebar_bg_color;
-  border: @outline 2px solid;
-  padding: 0;
-}
-
-switch:checked {
-  background: @accent_color;
-  border-color: @accent_color;
-}
-
-switch slider {
-  background: @outline;
-  margin: 3px;
-  min-width: 0;
-  min-height: 0;
-}
-
-switch:checked slider {
-  background: @accent_fg_color;
-  outline: transparent 2px solid;
-  margin: 0px;
-}
-
-/* toast */
-
-toast {
-  border-radius: 999px;
-  padding: 6px 6px 6px 10px;
-  background-color: @inverse_surface;
-  color: @inverse_on_surface;
-}
-
-toast .heading {
-  font-weight: 400;
-}
-
-toast button {
-  background-color: transparent;
-  color: @inverse_primary;
-}
-
-toast button:hover {
-  background-color: @inverse_primary_hover;
-}
-
-toast button:active {
-  background-color: @inverse_primary_active;
-}
-
-toast button:last-child {
-  color: @inverse_on_surface;
-}
-
-toast button:last-child:hover {
-  background-color: @inverse_on_surface_hover;
-}
-
-toast button:last-child:active {
-  background-color: @inverse_on_surface_active;
-}
-
-.collapse-spacing.vertical {
-  padding-bottom: 0;
-}
-
-tabbox {
-  padding: 0;
-}
-
-tabbox tabboxchild tab,
-tabbox tabboxchild {
-  background: transparent;
-  padding: 0 8px 3px;
-  border-radius: 999px;
-}
-
-tabbox tabboxchild tab {
-  padding: 3px 8px;
-}
-
-tab:hover {
-  background: @accent_hover_color;
-}
-
-tab:active,
-tab:selected {
-  background: @accent_active_color;
-}
-
-tab .tab-title {
-  padding: 0 12px;
-  color: @secondary_sidebar_fg_color;
-}
-
-tab .tab-title label {
-  border: none;
-  font-weight: 500;
-}
-
-tab:selected .tab-title label {
-  padding: 6px 0;
-  color: @accent_color;
-}
-
-/* popup menu */
-
-popover listview.view row,
-popover listview.view row:first-child,
-popover listview.view row:last-child {
-  background: transparent;
-  border-radius: 8px;
-}
-
-popover contents,
-popover arrow {
-  background: @secondary_sidebar_bg_color;
-}
-
-popover listview.view row:hover {
-  background: @popover_fg_hover_color;
-}
-
-popover listview.view row:active {
-  background: @popover_fg_active_color;
-}
-
-modelbutton {
-  padding: 2px 10px;
-}
-
-modelbutton * {
-  color: @popover_fg_color;
-}
-
-modelbutton:hover {
-  background-color: @popover_fg_hover_color;
-}
-
-tooltip {
-  background-color: @inverse_surface;
-  color: @inverse_on_surface;
-  font-size: 11px;
-  padding: 5px 9px;
-}
-
-/* search */
-
-.entry-completion.entry-completion.entry-completion contents {
-	padding: 0;
-}
-.image-button.flat arrow {
-  background: transparent;
-}
diff --git a/config/matugen/templates/wlogout/style.css b/config/matugen/templates/wlogout/style.css
new file mode 100644
index 0000000..603c7d9
--- /dev/null
+++ b/config/matugen/templates/wlogout/style.css
@@ -0,0 +1,66 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │                    WLOGOUT                    │
+ *          ╰───────────────────────────────────────────────╯
+*/
+window {
+    font-family: monospace;
+    font-size: 14pt;
+    color: {{colors.on_background.default.hex}}; /* text */
+    background-color: {{colors.primary.background.hex}}60;
+}
+
+button {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 25%;
+    border: none;
+    background-color: transparent;
+    margin: 5px;
+    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    border-radius: 40px;
+}
+
+button:hover {
+    background-color: {{colors.primary.default.hex}};
+}
+
+button:focus {
+    background-color: {{colors.primary.default.hex}}80;
+    color: {{colors.on_primary.default.hex}};
+}
+
+#lock {
+    background-image: image(url("./lock.png"));
+}
+#lock:focus {
+    background-image: image(url("./lock-hover.png"));
+}
+
+#logout {
+    background-image: image(url("./logout.png"));
+}
+#logout:focus {
+    background-image: image(url("./logout-hover.png"));
+}
+
+#suspend {
+    background-image: image(url("./sleep.png"));
+}
+#suspend:focus {
+    background-image: image(url("./sleep-hover.png"));
+}
+
+#shutdown {
+    background-image: image(url("./power.png"));
+}
+#shutdown:focus {
+    background-image: image(url("./power-hover.png"));
+}
+
+#reboot {
+    background-image: image(url("./restart.png"));
+}
+#reboot:focus {
+    background-image: image(url("./restart-hover.png"));
+}
diff --git a/config/wlogout/layout b/config/wlogout/layout
new file mode 100755
index 0000000..86b2184
--- /dev/null
+++ b/config/wlogout/layout
@@ -0,0 +1,30 @@
+{
+    "label" : "lock",
+    "action" : "hyprlock",
+    "text" : "Lock",
+    "keybind" : "l"
+}
+{
+    "label" : "reboot",
+    "action" : "systemctl reboot",
+    "text" : "Reboot",
+    "keybind" : "r"
+}
+{
+    "label" : "shutdown",
+    "action" : "systemctl poweroff",
+    "text" : "Shutdown",
+    "keybind" : "s"
+}
+{
+    "label" : "logout",
+    "action" : "hyprctl dispatch exit 0",
+    "text" : "Logout",
+    "keybind" : "e"
+}
+{
+    "label" : "suspend",
+    "action" : "systemctl suspend",
+    "text" : "Suspend",
+    "keybind" : "u"
+}
diff --git a/config/wlogout/lock-hover.png b/config/wlogout/lock-hover.png
new file mode 100755
index 0000000..8fb86fe
Binary files /dev/null and b/config/wlogout/lock-hover.png differ
diff --git a/config/wlogout/lock.png b/config/wlogout/lock.png
new file mode 100755
index 0000000..430451c
Binary files /dev/null and b/config/wlogout/lock.png differ
diff --git a/config/wlogout/logout-hover.png b/config/wlogout/logout-hover.png
new file mode 100755
index 0000000..9e570a9
Binary files /dev/null and b/config/wlogout/logout-hover.png differ
diff --git a/config/wlogout/logout.png b/config/wlogout/logout.png
new file mode 100755
index 0000000..128c995
Binary files /dev/null and b/config/wlogout/logout.png differ
diff --git a/config/wlogout/power-hover.png b/config/wlogout/power-hover.png
new file mode 100755
index 0000000..122d331
Binary files /dev/null and b/config/wlogout/power-hover.png differ
diff --git a/config/wlogout/power.png b/config/wlogout/power.png
new file mode 100755
index 0000000..ce56166
Binary files /dev/null and b/config/wlogout/power.png differ
diff --git a/config/wlogout/restart-hover.png b/config/wlogout/restart-hover.png
new file mode 100755
index 0000000..3e18536
Binary files /dev/null and b/config/wlogout/restart-hover.png differ
diff --git a/config/wlogout/restart.png b/config/wlogout/restart.png
new file mode 100755
index 0000000..7855d40
Binary files /dev/null and b/config/wlogout/restart.png differ
diff --git a/config/wlogout/sleep-hover.png b/config/wlogout/sleep-hover.png
new file mode 100755
index 0000000..0fd3bad
Binary files /dev/null and b/config/wlogout/sleep-hover.png differ
diff --git a/config/wlogout/sleep.png b/config/wlogout/sleep.png
new file mode 100755
index 0000000..6a3d607
Binary files /dev/null and b/config/wlogout/sleep.png differ
diff --git a/config/wlogout/style.css b/config/wlogout/style.css
new file mode 100644
index 0000000..57a89f2
--- /dev/null
+++ b/config/wlogout/style.css
@@ -0,0 +1,66 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │                    WLOGOUT                    │
+ *          ╰───────────────────────────────────────────────╯
+*/
+window {
+    font-family: monospace;
+    font-size: 14pt;
+    color: #ffffff; /* text */
+    background-color: rgba(20, 20, 20, 0.5);
+}
+
+button {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 25%;
+    border: none;
+    background-color: transparent;
+    margin: 5px;
+    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    border-radius: 40px;
+}
+
+button:hover {
+    background-color: rgba(22, 116, 185, 0.5);
+}
+
+button:focus {
+    background-color: rgb(22, 116, 185);
+    color: rgb(230, 230, 230);
+}
+
+#lock {
+    background-image: image(url("./lock.png"));
+}
+#lock:focus {
+    background-image: image(url("./lock-hover.png"));
+}
+
+#logout {
+    background-image: image(url("./logout.png"));
+}
+#logout:focus {
+    background-image: image(url("./logout-hover.png"));
+}
+
+#suspend {
+    background-image: image(url("./sleep.png"));
+}
+#suspend:focus {
+    background-image: image(url("./sleep-hover.png"));
+}
+
+#shutdown {
+    background-image: image(url("./power.png"));
+}
+#shutdown:focus {
+    background-image: image(url("./power-hover.png"));
+}
+
+#reboot {
+    background-image: image(url("./restart.png"));
+}
+#reboot:focus {
+    background-image: image(url("./restart-hover.png"));
+}