diff --git a/ags/lib/widgets/separator.tsx b/ags/lib/widgets/separator.tsx
deleted file mode 100644
index 8be585d..0000000
--- a/ags/lib/widgets/separator.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { Gio } from "astal";
-
-export default function Separator() {
-    return <image
-        cssClasses={["separator"]}
-        gicon={Gio.Icon.new_for_string("switch-on-symbolic")}
-    />
-}
\ No newline at end of file
diff --git a/ags/styles/components/_bar.scss b/ags/styles/components/_bar.scss
index fbf80b3..013a2fc 100644
--- a/ags/styles/components/_bar.scss
+++ b/ags/styles/components/_bar.scss
@@ -1,26 +1,23 @@
 @use '../theme_colors.scss' as *;
 
 window.bar {
-    font-weight: bold;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    background: color-mix(in srgb, $base00, transparent 85%);
+    margin: 0;
 
-    >box {
-        border-radius: 10px;
+    * {
+        color: $base0A;
     }
 
-    >.inner {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-        background: $base00;
-        padding: 0.1rem 1rem;
-        margin: 0;
-
-        *:not(.separator) { color: $base0B; }
+    >button, >label, >menubutton {
+        padding: 0.15rem 0.25rem;
     }
 
     .tray .item {
         padding: 0;
         margin: 0;
-        background: $base00;
+        background: transparent;
 
         image {
             padding: 0;
@@ -28,5 +25,7 @@ window.bar {
         }
     }
 
-    calendar>header { border: none; }
-}
+    calendar>header {
+        border: none;
+    }
+}
\ No newline at end of file
diff --git a/ags/styles/components/_battery_info.scss b/ags/styles/components/_battery_info.scss
index b71d3c1..d2b7a09 100644
--- a/ags/styles/components/_battery_info.scss
+++ b/ags/styles/components/_battery_info.scss
@@ -12,7 +12,7 @@ window.battery_info {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
         padding: 0.75rem 3rem;
         margin: 0;
 
@@ -22,7 +22,7 @@ window.battery_info {
 
         * { 
             transition: all 0.2s ease-in-out;
-            color: $base0B;
+            color: $base0A;
         }
     }
 
@@ -33,7 +33,7 @@ window.battery_info {
 
 window.battery_info button {
     transition: all 0.2s ease-in-out;
-    background: $base00;
+    background: color-mix(in srgb, $base00, transparent 15%);
     border: 2px solid $base01;
     margin: 5px;
 
@@ -41,7 +41,7 @@ window.battery_info button {
         background: $base01;
 
         * {
-            color: $base0B;
+            color: $base0A;
         }
     }
 
@@ -50,7 +50,7 @@ window.battery_info button {
         border: 2px solid $base00;
 
         * {
-            color: $base0B;
+            color: $base0A;
         }
     }
 }
diff --git a/ags/styles/components/_clipboard.scss b/ags/styles/components/_clipboard.scss
index 0e170d2..8639937 100644
--- a/ags/styles/components/_clipboard.scss
+++ b/ags/styles/components/_clipboard.scss
@@ -2,8 +2,7 @@
 
 .clipboard {
     entry {
-        background: $base00;
-        color: $base0B;
+        color: $base0A;
         padding: 8px 12px;
         border: none;
 
@@ -15,23 +14,37 @@
     }
 
     .entry.primary {
-        background: $base01;
+        background: $base0A;
+
+        .content {
+            color: $base00;
+        }
 
         &:focus {
+            background: color-mix(in srgb, $base00, transparent 15%);
+        }
+
+        &:hover {
             background: $base00;
+
+            .content {
+                color: $base0A;
+            }
         }
     }
 
     .entry {
         padding: 10px;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
         border-radius: 8px;
         transition: background 0.2s ease;
 
-        &:hover { background: $base01; }
+        &:hover {
+            background: $base01;
+        }
 
         .content {
-            color: $base0B;
+            color: $base0A;
             font-size: 14px;
             font-weight: 600;
         }
@@ -40,7 +53,7 @@
     .not-found {
         border: 1px solid $base07;
         background: $base01;
-        color: $base0B;
+        color: $base0A;
         font-size: 14px;
         padding: 10px;
         border-radius: 8px;
@@ -49,4 +62,4 @@
             margin-bottom: 8px;
         }
     }
-}
+}
\ No newline at end of file
diff --git a/ags/styles/components/_launcher.scss b/ags/styles/components/_launcher.scss
index 938eb23..91875c6 100644
--- a/ags/styles/components/_launcher.scss
+++ b/ags/styles/components/_launcher.scss
@@ -2,8 +2,7 @@
 
 .launcher {
     entry {
-        background: $base00;
-        color: $base0B;
+        background: color-mix(in srgb, $base00, transparent 75%);
         padding: 8px 12px;
         border: none;
 
@@ -16,7 +15,7 @@
 
     .application {
         padding: 10px;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
         border-radius: 8px;
         transition: background 0.2s ease;
 
@@ -29,20 +28,20 @@
         }
 
         .name {
-            color: $base0B;
+            color: $base0A;
             font-size: 14px;
             font-weight: 600;
         }
 
         .description {
-            color: $base0B;
+            color: $base0C;
             font-size: 12px;
         }
     }
 
     .not-found {
         background: $base01;
-        color: $base0B;
+        color: $base0A;
         font-size: 14px;
         padding: 10px;
         border-radius: 8px;
diff --git a/ags/styles/components/_quick_settings.scss b/ags/styles/components/_quick_settings.scss
index 1b93c39..509bc9b 100644
--- a/ags/styles/components/_quick_settings.scss
+++ b/ags/styles/components/_quick_settings.scss
@@ -12,13 +12,13 @@ window.quick_settings {
     >.inner {
         border-bottom-left-radius: 0;
         border-bottom-right-radius: 0;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
         padding: 0.75rem 3rem;
         margin: 0;
 
         * { 
             transition: all 0.2s ease-in-out;
-            color: $base0B;
+            color: $base0A;
         }
     }
 
@@ -29,11 +29,11 @@ window.quick_settings {
 
 window.qs_bluetooth {
     >.inner {
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
         padding: 0.75rem 3rem;
         border-radius: 10px;
     
-        * { color: $base0B; }
+        * { color: $base0A; }
     }
 
     .device {
@@ -56,7 +56,11 @@ window.quick_settings button, window.qs_bluetooth button {
     }
 
     &.active {
-        background: $base01;
+        background: $base0A;
         border: 0.5px solid $base00;
+
+        * {
+            color: $base01;
+        }
     }
 }
diff --git a/ags/styles/components/_shortcuts.scss b/ags/styles/components/_shortcuts.scss
index 7b5bff6..21300d7 100644
--- a/ags/styles/components/_shortcuts.scss
+++ b/ags/styles/components/_shortcuts.scss
@@ -3,7 +3,7 @@
 .shortcuts {
     .entry {
         padding: 10px;
-        background: $base00;
+        background: color-mix(in srgb, $base00, transparent 15%);
         border-radius: 8px;
         transition: background 0.2s ease;
 
@@ -11,12 +11,12 @@
             background: $base01;
 
             >.kbd {
-                background: $base00;
+                background: color-mix(in srgb, $base00, transparent 15%);
             }
         }
 
         label {
-            color: $base0B;
+            color: $base0A;
             font-size: 14px;
             font-weight: 600;
         }
@@ -29,13 +29,13 @@
             margin: 0 2px;
 
             background: $base01;
-            color: $base0B;
+            color: $base0A;
         }
     }
 
     .not-found {
         background: $base01;
-        color: $base0B;
+        color: $base0A;
         font-size: 14px;
         padding: 10px;
         border-radius: 8px;
diff --git a/ags/styles/style.scss b/ags/styles/style.scss
index 1807570..e8245b5 100644
--- a/ags/styles/style.scss
+++ b/ags/styles/style.scss
@@ -14,7 +14,7 @@ separator {
 }
 
 popover>contents, calendar {
-    background: $base00;
+    background: color-mix(in srgb, $base00, transparent 15%);
 }
 
 button, button:hover {
diff --git a/ags/widget/bar/bar.tsx b/ags/widget/bar/bar.tsx
index 9e8099d..23e675a 100644
--- a/ags/widget/bar/bar.tsx
+++ b/ags/widget/bar/bar.tsx
@@ -7,12 +7,9 @@ import { BatteryInfo } from "./components/battery";
 import Workspace from "./components/workspace";
 import DateTime from "@lib/widgets/datetime";
 import TrayView from "./components/tray";
-import Separator from "@/lib/widgets/separator";
 
 export default function Bar(monitor_id: number) {
     const { BOTTOM, LEFT, RIGHT } = Astal.WindowAnchor
-    const CENTER = Gtk.Align.CENTER;
-
     const battery = Battery.get_default();
 
     const openQuickSettings = (_self: Gtk.Button, state: Gdk.ButtonEvent) => {
@@ -25,27 +22,27 @@ export default function Bar(monitor_id: number) {
         name={`bar_${monitor_id}`}
         monitor={monitor_id}
         cssClasses={["bar"]}
-        exclusivity={Astal.Exclusivity.IGNORE}
+        exclusivity={Astal.Exclusivity.EXCLUSIVE}
         anchor={BOTTOM | LEFT | RIGHT}
-        application={App}>
-        <box halign={CENTER} cssClasses={["inner"]}>
-            {[
-                Workspace(),
+        application={App}
+        hexpand
+    >
+        <centerbox hexpand>
+            {Workspace()}
+            <box>
                 <menubutton hasFrame={false}>
                     <DateTime format="%d.%m.%Y %H:%M:%S" interval={1000} />
                     <popover>
                         <Gtk.Calendar />
                     </popover>
-                </menubutton>,
-                BatteryInfo({ battery }),
-                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />,
-                NetworkInfo(),
-                TrayView()
-            ].reduce((acc, it) => <>
-                {acc}
-                {Separator()}
-                {it}
-            </>)}
-        </box>
+                </menubutton>
+                {BatteryInfo({ battery })}
+                {NetworkInfo()}
+            </box>
+            <box>
+                <button hasFrame={false} iconName={"applications-system-symbolic"} onButtonPressed={openQuickSettings} />
+                {TrayView()}
+            </box>
+        </centerbox>
     </window>
 }
diff --git a/ags/widget/bar/components/battery.tsx b/ags/widget/bar/components/battery.tsx
index 4c2edd6..7c86ca4 100644
--- a/ags/widget/bar/components/battery.tsx
+++ b/ags/widget/bar/components/battery.tsx
@@ -11,16 +11,14 @@ export function BatteryInfo({ battery }: { battery: Battery.Device }) {
     const charging = bind(battery, "charging");
 
     return (
-        <box>
-            {percentage.as(p => <button hasFrame={false}>
-                <box onButtonPressed={(_self, event) =>
-                    openOnButton(event, Gdk.BUTTON_PRIMARY)
-                        (() => App.toggle_window("battery_info"))
-                }>
-                    <label>{percentage.as(p => `${p}%`)}</label>
-                    <image iconName={getBatteryIcon(p, charging)} />
-                </box>
-            </button>)}
-        </box>
+        <button hasFrame={false}>
+            {percentage.as(p => <box onButtonPressed={(_self, event) =>
+                openOnButton(event, Gdk.BUTTON_PRIMARY)
+                    (() => App.toggle_window("battery_info"))
+            }>
+                <label>{percentage.as(p => `${p}%`)}</label>
+                <image iconName={getBatteryIcon(p, charging)} />
+            </box>)}
+        </button>
     );
 };
\ No newline at end of file
diff --git a/ags/widget/bar/components/network_info.tsx b/ags/widget/bar/components/network_info.tsx
index b3e2243..5d0b172 100644
--- a/ags/widget/bar/components/network_info.tsx
+++ b/ags/widget/bar/components/network_info.tsx
@@ -70,8 +70,10 @@ export default function NetworkInfo() {
     const binding = bind(currentConn);
 
     return binding.as(Boolean) ? <box spacing={3}>
-        {binding.as(getConnection)}
-        TX: {dataBinding.as(data => toHumanReadable(data.totalTx / 4, "B/s"))}
-        RX: {dataBinding.as(data => toHumanReadable(data.totalRx / 4, "B/s"))}
+        {binding.as(getConnection).as(data => data && <label label={data} />)}
+        {dataBinding.as(data => <>
+            <label label={`TX: ${toHumanReadable(data.totalTx / 4, "B/s")}`} />
+            <label label={`RX: ${toHumanReadable(data.totalRx / 4, "B/s")}`} />
+        </>)}
     </box> : <label>No network</label>
 }