diff --git a/data/stylesheet/_index.scss b/data/stylesheet/_index.scss
index dda034a08..c6ca006cc 100644
--- a/data/stylesheet/_index.scss
+++ b/data/stylesheet/_index.scss
@@ -24,9 +24,80 @@
     --SILVER-700: #7e8087;
     --SILVER-900: #555761;
 
+    --STRAWBERRY-100: #ff8c82;
     --STRAWBERRY-300: #ed5353;
+    --STRAWBERRY-700: #a10705;
+    --STRAWBERRY-900: #7a0000;
 }
 
+.pill {
+    border: 1px solid var(--SILVER-300);
+    background-color: var(--SILVER-100);
+
+    @media (prefers-color-scheme: dark) {
+        border: 1px solid var(--SILVER-700);
+        background-color: var(--SILVER-900);
+    }
+
+    border-radius: 1rem;
+    font-feature-settings: "tnum";
+    padding: 0 0.5em;
+
+    // SystemCPUView
+    &.core {
+        font-size: 0.85rem;
+    }
+
+    // SystemCPUInfoPopover
+    &.flags {
+        margin: 0.5em;
+    }
+
+    // ProcessInfoHeader
+    &.state {
+        background-color: var(--BLUEBERRY-500);
+        border: none;
+        color: white;
+        font-weight: 700;
+        margin: 0 0.25em;
+    }
+
+    &.warning {
+        background-color: color-mix(in srgb, var(--BANANA-100) 70%, transparent);
+        border: 1px solid color-mix(in srgb, var(--BANANA-300) 70%, transparent);
+        color: var(--BANANA-900);
+
+        @media (prefers-color-scheme: dark) {
+            background-color: color-mix(in srgb, var(--BANANA-900) 70%, transparent);
+            border-color: color-mix(in srgb, var(--BANANA-700) 70%, transparent);
+            color: var(--BANANA-300);
+        }
+    }
+
+    &.strong-warning {
+        background-color: color-mix(in srgb, var(--ORANGE-100) 70%, transparent);
+        border-color: color-mix(in srgb, var(--ORANGE-300) 70%, transparent);
+        color: var(--ORANGE-900);
+
+        @media (prefers-color-scheme: dark) {
+            background-color: color-mix(in srgb, var(--ORANGE-900) 70%, transparent);
+            border: 1px solid color-mix(in srgb, var(--ORANGE-700) 70%, transparent);
+            color: var(--ORANGE-300);
+        }
+    }
+
+    &.critical {
+        background-color: color-mix(in srgb, var(--STRAWBERRY-100) 70%, transparent);
+        border-color: color-mix(in srgb, var(--STRAWBERRY-300) 70%, transparent);
+        color: var(--STRAWBERRY-700);
+
+        @media (prefers-color-scheme: dark) {
+            background-color: color-mix(in srgb, var(--STRAWBERRY-900) 70%, transparent);
+            border: 1px solid color-mix(in srgb, var(--STRAWBERRY-700) 70%, transparent);
+            color: var(--STRAWBERRY-100);
+        }
+    }
+}
 
 roundy-label,
 roundy-label:hover,
@@ -35,12 +106,10 @@ roundy-label:selected:focus,
 roundy-label:hover:selected {
     margin: 0 3px;
 
-    .value {
+    .pill {
+        border: none;
         color: #{'alpha(@text_color, 0.7)'};
-        font-feature-settings: "tnum";
         font-weight: 700;
-        border-radius: 10px;
-        padding: 0 6px;
         background-color: var(--SILVER-300);
 
         @media (prefers-color-scheme: dark) {
@@ -48,21 +117,21 @@ roundy-label:hover:selected {
         }
     }
 
-    &.green .value {
+    &.green .pill {
         background-color: color-mix(in srgb, var(--LIME-300) 60%, transparent);
     }
 
-    &.blue .value {
+    &.blue .pill {
         background-color: color-mix(in srgb, var(--BLUEBERRY-300) 60%, transparent);
     }
 
     &.username {
-        &-other .value {
+        &-other .pill {
             background-color: var(--BANANA-300);
             color: #381F00;
         }
 
-        &-root .value {
+        &-root .pill {
             background-color: var(--STRAWBERRY-300);
             color: var(--SILVER-100);
         }
@@ -90,80 +159,6 @@ header.small-label {
     text-transform: uppercase;
 }
 
-.state_badge,
-.state_badge:hover,
-.state_badge:selected,
-.state_badge:selected:focus,
-.state_badge:hover:selected {
-    background-image: none;
-    background-color: var(--BLUEBERRY-500);
-    box-shadow: none;
-    color: white;
-    font-weight: 700;
-    border-radius: 10px;
-    padding: 0 6px;
-    margin: 0 3px;
-    border-width: 0;
-}
-
-.core_badge {
-    border-radius: 8px;
-    padding-right: 4px;
-    padding-left: 2px;
-    font-size: 10px;
-    border: 1px solid var(--SILVER-300);
-    background-color: var(--SILVER-100);
-
-    @media (prefers-color-scheme: dark) {
-        border: 1px solid var(--SILVER-700);
-        background-color: var(--SILVER-900);
-    }
-
-
-    &-mild-warning {
-        background-color: color-mix(in srgb, var(--BANANA-100) 70%, transparent);
-        color: var(--BANANA-900);
-        border: 1px solid color-mix(in srgb, var(--BANANA-300) 70%, transparent);
-
-        @media (prefers-color-scheme: dark) {
-            background-color: color-mix(in srgb, var(--BANANA-900) 70%, transparent);
-            color: var(--BANANA-300);
-            border: 1px solid color-mix(in srgb, var(--BANANA-700) 70%, transparent);
-        }
-    }
-
-    &-strong-warning {
-        background-color: color-mix(in srgb, var(--ORANGE-100) 70%, transparent);
-        color: var(--ORANGE-900);
-        border: 1px solid color-mix(in srgb, var(--ORANGE-300) 70%, transparent);
-
-        @media (prefers-color-scheme: dark) {
-            background-color: color-mix(in srgb, var(--ORANGE-900) 70%, transparent);
-            color: var(--ORANGE-300);
-            border: 1px solid color-mix(in srgb, var(--ORANGE-700) 70%, transparent);
-        }
-    }
-
-    &-critical-warning {
-        background-color: color-mix(in srgb, var(--STRAWBERRY-100) 70%, transparent);
-        color: var(--STRAWBERRY-700);
-        border: 1px solid color-mix(in srgb, var(--STRAWBERRY-300) 70%, transparent);
-
-        @media (prefers-color-scheme: dark) {
-            background-color: color-mix(in srgb, var(--STRAWBERRY-900) 70%, transparent);
-            color: var(--STRAWBERRY-100);
-            border: 1px solid color-mix(in srgb, var(--STRAWBERRY-700) 70%, transparent);
-        }
-    }
-}
-
-.flags_badge {
-    @extend .core_badge;
-    font-size: 12px;
-    padding: 1px 4px;
-
-}
-
 .command_wrapper {
     background-color: #fdf6e3;
     border-radius: 3px;
diff --git a/src/Views/ProcessView/ProcessInfoView/ProcessInfoHeader.vala b/src/Views/ProcessView/ProcessInfoView/ProcessInfoHeader.vala
index 32319055d..57d8462ed 100644
--- a/src/Views/ProcessView/ProcessInfoView/ProcessInfoHeader.vala
+++ b/src/Views/ProcessView/ProcessInfoView/ProcessInfoHeader.vala
@@ -27,7 +27,8 @@ public class Monitor.ProcessInfoHeader : Gtk.Grid {
             halign = START,
             valign = END
         };
-        state.add_css_class ("state_badge");
+        state.add_css_class ("pill");
+        state.add_css_class ("state");
 
         var icon_container = new Gtk.Overlay () {
             child = icon
diff --git a/src/Views/SystemView/SystemCPUInfoPopover.vala b/src/Views/SystemView/SystemCPUInfoPopover.vala
index a6ba8bc4d..d8163ed4c 100755
--- a/src/Views/SystemView/SystemCPUInfoPopover.vala
+++ b/src/Views/SystemView/SystemCPUInfoPopover.vala
@@ -129,13 +129,10 @@ public class Monitor.SystemCPUInfoPopover : Gtk.Box {
         var flag_label = new Gtk.Label (flag) {
             halign = Gtk.Align.START,
             valign = Gtk.Align.CENTER,
-            wrap = true,
-            margin_top = 6,
-            margin_bottom = 6,
-            margin_start = 6,
-            margin_end = 6,
+            wrap = true
         };
-        flag_label.add_css_class ("flags_badge");
+        flag_label.add_css_class ("pill");
+        flag_label.add_css_class ("flags");
 
 
         grid.attach (flag_label, 0, 0, 1, 1);
diff --git a/src/Views/SystemView/SystemCPUView.vala b/src/Views/SystemView/SystemCPUView.vala
index 66ef1296e..75b3af965 100644
--- a/src/Views/SystemView/SystemCPUView.vala
+++ b/src/Views/SystemView/SystemCPUView.vala
@@ -99,29 +99,19 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
 
             cpu_prev_util = cpu_prev_util + core_percentage_reversed;
 
-            string percentage_formatted = ("% 3d%%").printf ((int) core_percentage);
-            core_label_list[i].set_text (percentage_formatted);
-
-            core_label_list[i].remove_css_class ("core_badge-mild-warning");
-            core_label_list[i].remove_css_class ("core_badge-strong-warning");
-            core_label_list[i].remove_css_class ("core_badge-critical-warning");
+            core_label_list[i].label = ("% 3d%%").printf ((int) core_percentage);
+            core_label_list[i].css_classes = {"pill", "core"};
 
             if (core_percentage > 75.0) {
-                core_label_list[i].add_css_class ("core_badge-mild-warning");
-                core_label_list[i].remove_css_class ("core_badge-strong-warning");
-                core_label_list[i].remove_css_class ("core_badge-critical-warning");
+                core_label_list[i].add_css_class ("warning");
             }
 
             if (core_percentage > 85.0) {
-                core_label_list[i].add_css_class ("core_badge-strong-warning");
-                core_label_list[i].remove_css_class ("core_badge-mild-warning");
-                core_label_list[i].remove_css_class ("core_badge-critical-warning");
+                core_label_list[i].add_css_class ("strong-warning");
             }
 
             if (core_percentage > 90.0) {
-                core_label_list[i].add_css_class ("core_badge-critical-warning");
-                core_label_list[i].remove_css_class ("core_badge-mild-warning");
-                core_label_list[i].remove_css_class ("core_badge-strong-warning");
+                core_label_list[i].add_css_class ("critical");
             }
         }
 
@@ -145,8 +135,6 @@ public class Monitor.SystemCPUView : Monitor.WidgetResource {
             var core_label = new Gtk.Label (Utils.NO_DATA) {
                 width_chars = 4
             };
-            core_label.add_css_class ("core_badge");
-            // core_label.set_text (Utils.NO_DATA);
             core_label_list.add (core_label);
 
             grid.attach (core_label, column, row, 1, 1);
diff --git a/src/Widgets/Labels/LabelRoundy.vala b/src/Widgets/Labels/LabelRoundy.vala
index a9c44360a..457d0736a 100644
--- a/src/Widgets/Labels/LabelRoundy.vala
+++ b/src/Widgets/Labels/LabelRoundy.vala
@@ -32,7 +32,7 @@ public class Monitor.LabelRoundy : Gtk.Box {
         val = new Gtk.Label (Utils.NO_DATA) {
             selectable = true
         };
-        val.add_css_class ("value");
+        val.add_css_class ("pill");
 
         var header_label = new Granite.HeaderLabel (title) {
             mnemonic_widget = val