diff --git a/Makefile b/Makefile
index 21cf3e2..da29fe4 100644
--- a/Makefile
+++ b/Makefile
@@ -54,6 +54,10 @@ ifeq ($(WITH_SDDM),yes)
 install: install-sddm
 endif
 
+ifeq ($(WITH_WAYBAR),yes)
+include waybar/build.mk
+endif
+
 install: install-sway install-swaylock
 
 check:
diff --git a/sway-config-fedora.spec.rpkg b/sway-config-fedora.spec.rpkg
index 208bbd7..8935d7a 100644
--- a/sway-config-fedora.spec.rpkg
+++ b/sway-config-fedora.spec.rpkg
@@ -1,7 +1,9 @@
 # vim: ft=spec
 %bcond  initialsetup %[0%{?fedora} >= 40 || 0%{?rhel} >= 10]
 %bcond  sddm 1
+%bcond  waybar 1
 %global sway_ver 1.8
+%global waybar_ver 0.9.24
 
 Name:           {{{ git_name }}}
 Version:        {{{ git_version }}}
@@ -88,6 +90,23 @@ This package contains configuration and dependencies for SDDM
 to use Sway for the greeter display server.
 %endif
 
+%if %{with waybar}
+%package -n     waybar-config-fedora
+Summary:        Fedora Sway Spin configuration for Waybar
+
+Requires:       waybar >= %{waybar_ver}
+Provides:       waybar-config = %{waybar_ver}+%{version}-%{release}
+Conflicts:      waybar-config
+
+%description -n waybar-config-fedora
+%{summary}.
+
+%files -n waybar-config-fedora
+%license LICENSE
+%config(noreplace) %{_sysconfdir}/xdg/waybar/config
+%config(noreplace) %{_sysconfdir}/xdg/waybar/style.css
+%endif
+
 
 %prep
 {{{ git_setup_macro path=$(git rev-parse --show-toplevel) }}}
@@ -98,7 +117,10 @@ to use Sway for the greeter display server.
 
 
 %install
-%make_install PREFIX='%{_prefix}' WITH_INITIALSETUP='%[%{with initialsetup}?"yes":"no"]' WITH_SDDM='%[%{with sddm}?"yes":"no"]'
+%make_install PREFIX='%{_prefix}' \
+    WITH_INITIALSETUP='%[%{with initialsetup}?"yes":"no"]' \
+    WITH_SDDM='%[%{with sddm}?"yes":"no"]' \
+    WITH_WAYBAR='%[%{with waybar}?"yes":"no"]'
 
 
 %files
diff --git a/waybar/build.mk b/waybar/build.mk
new file mode 100644
index 0000000..6d60675
--- /dev/null
+++ b/waybar/build.mk
@@ -0,0 +1,7 @@
+.PHONY: install-waybar
+
+install-waybar:
+	install -D -m 0644 -pv -t $(DESTDIR)$(SYSCONFDIR)/xdg/waybar \
+		waybar/config waybar/style.css
+
+install: install-waybar
diff --git a/waybar/config b/waybar/config
index daad8ab..1938433 100644
--- a/waybar/config
+++ b/waybar/config
@@ -5,9 +5,27 @@
     // "width": 1280, // Waybar width
     "spacing": 4, // Gaps between modules (4px)
     // Choose the order of the modules
-    "modules-left": ["sway/workspaces", "sway/mode", "sway/scratchpad", "custom/media"],
-    "modules-center": ["sway/window"],
-    "modules-right": ["mpd", "idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "keyboard-state", "sway/language", "battery", "battery#bat2", "clock", "tray"],
+    "modules-left": [
+        "sway/workspaces",
+        "sway/mode",
+        "sway/scratchpad"
+    ],
+    "modules-center": [
+        "sway/window"
+    ],
+    "modules-right": [
+        "idle_inhibitor",
+        "pulseaudio",
+        "network",
+        // "cpu",
+        // "memory",
+        // "temperature",
+        // "backlight",
+        "sway/language",
+        "battery",
+        "clock",
+        "tray"
+    ],
     // Modules configuration
     // "sway/workspaces": {
     //     "disable-scroll": true,
@@ -79,7 +97,7 @@
     },
     "tray": {
         // "icon-size": 21,
-        "spacing": 10
+        "spacing": 5
     },
     "clock": {
         // "timezone": "America/New_York",
@@ -104,7 +122,7 @@
     "backlight": {
         // "device": "acpi_video1",
         "format": "{percent}% {icon}",
-        "format-icons": ["", "", "", "", "", "", "", "", ""]
+        "format-icons": ["🌑", "🌘", "🌗", "🌖", "🌕"]
     },
     "battery": {
         "states": {
diff --git a/waybar/style.css b/waybar/style.css
index cf5c5fb..19acc08 100644
--- a/waybar/style.css
+++ b/waybar/style.css
@@ -1,21 +1,111 @@
 * {
-    /* `otf-font-awesome` is required to be installed for icons */
-    font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
+    font-family: 'Noto Sans Mono', 'Font Awesome 6 Free', 'Font Awesome 6 Brands', monospace;
     font-size: 13px;
 }
 
+@define-color inactive_module_color #a9a9a9;
+
 window#waybar {
-    background-color: rgba(43, 48, 59, 0.5);
-    border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+    background-color: rgba(43, 48, 59, 0.8);
+    border-color: rgba(100, 114, 125, 0.5);
+    border-style: solid;
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
 }
 
+window#waybar:not(.bottom):not(.left):not(.right) {
+    border-bottom-width: 2px;
+}
+
+window#waybar.bottom {
+    border-top-width: 2px;
+}
+
 window#waybar.hidden {
     opacity: 0.2;
 }
 
+button {
+    /* reset all builtin/theme styles */
+    all: unset;
+    /* Restore some properties */
+    min-height: 24px;
+    min-width: 16px;
+    padding: 0 10px;
+    transition: all 200ms ease-out;
+}
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+button:hover {
+    background: inherit;
+}
+
+window#waybar:not(.bottom):not(.left):not(.right) button:hover{
+    box-shadow: inset 0 -2px;
+}
+
+window#waybar.bottom button:hover {
+    box-shadow: inset 0 2px;
+}
+
+/*
+ * Common module rules
+ */
+
+.modules-left > widget > label,
+.modules-center > widget > label,
+.modules-right > widget > label {
+    color: inherit;
+    margin: 0;
+    padding: 0 10px;
+}
+
+.modules-left > widget > box,
+.modules-center > widget > box,
+.modules-right > widget > box {
+    color: inherit;
+    margin: 0;
+    padding: 0;
+}
+
+/* If the leftmost module is a box, omit left margin and padding */
+.modules-left > widget:first-child > box {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+/* If the rightmost module is a box, omit right margin and padding */
+.modules-right > widget:last-child > box {
+    margin-right: 0;
+    padding-right: 0;
+}
+
+/*
+ * Uncomment to draw module underlines
+ */
+/*
+window#waybar:not(.bottom):not(.left):not(.right) .modules-left > widget > label,
+window#waybar:not(.bottom):not(.left):not(.right) .modules-center > widget > label,
+window#waybar:not(.bottom):not(.left):not(.right) .modules-right > widget > label {
+    box-shadow: inset 0 -2px;
+}
+
+window#waybar.bottom .modules-left > widget > label,
+window#waybar.bottom .modules-center > widget > label,
+window#waybar.bottom .modules-right > widget > label {
+    box-shadow: inset 0 2px;
+}
+
+window#waybar #window {
+    box-shadow: none;
+}
+*/
+
+/*
+ * Workspace state and focused window rules
+ */
+
 /*
 window#waybar.empty {
     background-color: transparent;
@@ -23,7 +113,6 @@ window#waybar.empty {
 window#waybar.solo {
     background-color: #FFFFFF;
 }
-*/
 
 window#waybar.termite {
     background-color: #3F3F3F;
@@ -33,23 +122,13 @@ window#waybar.chromium {
     background-color: #000000;
     border: none;
 }
+*/
 
-button {
-    /* Use box-shadow instead of border so the text isn't offset */
-    box-shadow: inset 0 -3px transparent;
-    /* Avoid rounded borders under each button name */
-    border: none;
-    border-radius: 0;
-}
-
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-button:hover {
-    background: inherit;
-    box-shadow: inset 0 -3px #ffffff;
-}
+/*
+ * Styles and colors for important states
+ */
 
 #workspaces button {
-    padding: 0 5px;
     background-color: transparent;
     color: #ffffff;
 }
@@ -60,7 +139,14 @@ button:hover {
 
 #workspaces button.focused {
     background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
+}
+
+window#waybar:not(.bottom):not(.left):not(.right) #workspaces button.focused {
+    box-shadow: inset 0 -2px;
+}
+
+window#waybar.bottom #workspaces button.focused {
+    box-shadow: inset 0 2px;
 }
 
 #workspaces button.urgent {
@@ -69,56 +155,23 @@ button:hover {
 
 #mode {
     background-color: #64727D;
-    border-bottom: 3px solid #ffffff;
 }
 
-#clock,
-#battery,
-#cpu,
-#memory,
-#disk,
-#temperature,
-#backlight,
-#network,
-#pulseaudio,
-#wireplumber,
-#custom-media,
-#tray,
-#mode,
-#idle_inhibitor,
-#scratchpad,
-#mpd {
+window#waybar:not(.bottom):not(.left):not(.right) #mode {
+    box-shadow: inset 0 -2px;
+}
+
+window#waybar.bottom #mode {
+    box-shadow: inset 0 2px;
+}
+
+#image {
+    margin: 0;
     padding: 0 10px;
-    color: #ffffff;
-}
-
-#window,
-#workspaces {
-    margin: 0 4px;
-}
-
-/* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #workspaces {
-    margin-left: 0;
-}
-
-/* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #workspaces {
-    margin-right: 0;
-}
-
-#clock {
-    background-color: #64727D;
-}
-
-#battery {
-    background-color: #ffffff;
-    color: #000000;
 }
 
 #battery.charging, #battery.plugged {
-    color: #ffffff;
-    background-color: #26A65B;
+    color: #32cd32;
 }
 
 @keyframes blink {
@@ -129,8 +182,7 @@ button:hover {
 }
 
 #battery.critical:not(.charging) {
-    background-color: #f53c3c;
-    color: #ffffff;
+    color: #f53c3c;
     animation-name: blink;
     animation-duration: 0.5s;
     animation-timing-function: linear;
@@ -138,128 +190,60 @@ button:hover {
     animation-direction: alternate;
 }
 
-label:focus {
-    background-color: #000000;
-}
-
-#cpu {
-    background-color: #2ecc71;
-    color: #000000;
-}
-
-#memory {
-    background-color: #9b59b6;
-}
-
-#disk {
-    background-color: #964B00;
-}
-
-#backlight {
-    background-color: #90b1b1;
-}
-
-#network {
-    background-color: #2980b9;
-}
-
-#network.disconnected {
-    background-color: #f53c3c;
-}
-
-#pulseaudio {
-    background-color: #f1c40f;
-    color: #000000;
-}
-
-#pulseaudio.muted {
-    background-color: #90b1b1;
-    color: #2a5c45;
-}
-
-#wireplumber {
-    background-color: #fff0f5;
-    color: #000000;
-}
-
+#network.disconnected,
+#pulseaudio.muted,
 #wireplumber.muted {
-    background-color: #f53c3c;
-}
-
-#custom-media {
-    background-color: #66cc99;
-    color: #2a5c45;
-    min-width: 100px;
-}
-
-#custom-media.custom-spotify {
-    background-color: #66cc99;
-}
-
-#custom-media.custom-vlc {
-    background-color: #ffa000;
-}
-
-#temperature {
-    background-color: #f0932b;
-}
-
-#temperature.critical {
-    background-color: #eb4d4b;
+    color: @inactive_module_color;
 }
 
 #tray {
-    background-color: #2980b9;
+    padding: 0 5px;
 }
 
 #tray > .passive {
     -gtk-icon-effect: dim;
 }
 
+@keyframes needs-attention {
+    to {
+        background-color: rgba(235, 77, 75, 0.5);
+    }
+}
+
 #tray > .needs-attention {
     -gtk-icon-effect: highlight;
-    background-color: #eb4d4b;
+    animation-name: needs-attention;
+    animation-duration: 1s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+    background-color: transparent;
 }
 
 #idle_inhibitor {
-    background-color: #2d3436;
+    color: @inactive_module_color;
 }
 
 #idle_inhibitor.activated {
-    background-color: #ecf0f1;
-    color: #2d3436;
-}
-
-#mpd {
-    background-color: #66cc99;
-    color: #2a5c45;
-}
-
-#mpd.disconnected {
-    background-color: #f53c3c;
+    color: inherit;
 }
 
+#mpd.disconnected,
+#mpd.paused,
 #mpd.stopped {
-    background-color: #90b1b1;
+    color: @inactive_module_color;
 }
 
-#mpd.paused {
-    background-color: #51a37a;
+#cpu.high,
+#temperature.critical {
+    color: #eb4d4b;
 }
 
 #language {
-    background: #00b093;
-    color: #740864;
-    padding: 0 5px;
-    margin: 0 5px;
     min-width: 16px;
 }
 
 #keyboard-state {
-    background: #97e1ad;
-    color: #000000;
-    padding: 0 0px;
-    margin: 0 5px;
     min-width: 16px;
 }
 
@@ -278,3 +262,54 @@ label:focus {
 #scratchpad.empty {
 	background-color: transparent;
 }
+
+/*
+ * Less important colors.
+ * Uncomment this if you want more colorful bar
+ */
+/*
+#cpu {
+    color: #2ecc71;
+}
+
+#memory {
+    color: #ba55d3;
+}
+
+#disk {
+    color: #964B00;
+}
+
+#backlight {
+    color: #90b1b1;
+}
+
+#network {
+    color: #00bfff;
+}
+
+#pulseaudio,
+#wireplumber {
+    color: #f1c40f;
+}
+
+#temperature {
+    color: #f0932b;
+}
+
+#mpd {
+    color: #66cc99;
+}
+
+#mpd.paused {
+    color: #51a37a;
+}
+
+#language {
+    color: #00b093;
+}
+
+#keyboard-state {
+    color: #97e1ad;
+}
+*/