diff --git a/src/opnsense/www/js/widgets/BaseWidget.js b/src/opnsense/www/js/widgets/BaseWidget.js
index 525c898eff..09b6688be5 100644
--- a/src/opnsense/www/js/widgets/BaseWidget.js
+++ b/src/opnsense/www/js/widgets/BaseWidget.js
@@ -297,8 +297,8 @@ class BaseWidget {
         id = this.sanitizeSelector(id);
         let $container = $(`
             <span class="transition-icon-container">
-                <i class="fa fa-spinner fa-spin hide transition-spinner" id="spinner-${id}" style="font-size: 13px;"></i>
-                <i class="fa fa-check checkmark hide transition-check" id="check-${id}" style="font-size: 13px;"></i>
+                <i class="fa fa-fw fa-spinner fa-spin hide transition-spinner" id="spinner-${id}" style="font-size: 13px;"></i>
+                <i class="fa fa-fw fa-check checkmark hide transition-check" id="check-${id}" style="font-size: 13px;"></i>
             </span>
         `);
 
diff --git a/src/opnsense/www/js/widgets/Metadata/Core.xml b/src/opnsense/www/js/widgets/Metadata/Core.xml
index 262b7abee3..29c2343901 100644
--- a/src/opnsense/www/js/widgets/Metadata/Core.xml
+++ b/src/opnsense/www/js/widgets/Metadata/Core.xml
@@ -304,8 +304,8 @@
         <translations>
             <title>Services</title>
             <noservices>No services found</noservices>
-            <running>Running</running>
-            <stopped>Stopped</stopped>
+            <running>running</running>
+            <stopped>stopped</stopped>
             <restart>Restart</restart>
             <stop>Stop</stop>
             <start>Start</start>
diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js
index ff89a19ac6..7764e30ad5 100644
--- a/src/opnsense/www/js/widgets/Services.js
+++ b/src/opnsense/www/js/widgets/Services.js
@@ -38,17 +38,16 @@ export default class Services extends BaseTableWidget {
     }
 
     getMarkup() {
-        return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 5px; gap: 5px;"></div>`);
+        return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 1px; gap: 1px;"></div>`);
     }
 
     serviceControl(actions) {
         return actions.map(({ action, id, title, icon }) => `
-            <button data-service_action="${action}" data-service="${id}"
-                  class="btn btn-xs btn-default srv_status_act2"
-                  style="font-size: 10px; padding: 2px 6px;"
+            <span data-service_action="${action}" data-service="${id}"
+                  class="srv_status_act2"
                   title="${title}" data-toggle="tooltip">
                 <i class="fa fa-fw fa-${icon}"></i>
-            </button>
+            </span>
         `).join('');
     }
 
@@ -79,45 +78,20 @@ export default class Services extends BaseTableWidget {
             }
 
             let statusColor = service.running ? 'success' : 'danger';
-            let statusIcon = service.running ? 'play' : 'stop';
             let statusTitle = service.running ? this.translations.running : this.translations.stopped;
 
             let $tile = $(`
-                <div class="service-tile" style="
-                    border: 1px solid #e5e5e5;
-                    border-radius: 4px;
-                    padding: 8px;
-                    display: flex;
-                    flex-direction: column;
-                    align-items: center;
-                    background-color: #fff;
-                    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
-                ">
+                <div class="service-tile alert-${statusColor}" style="display: flex; align-items: center;">
                     <div style="
-                        font-weight: bold;
-                        font-size: 12px;
-                        margin-bottom: 5px;
+                        padding: 4px;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
+                        color: #fff;
                         width: 100%;
-                        text-align: center;
-                        color: #555;
-                    " title="${service.description}" data-toggle="tooltip">${service.description}</div>
-                    <div style="display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 0px; width: 100%;">
-                        <div style="text-align: right; padding-right: 10px;">
-                            <span class="label label-opnsense label-opnsense-xs label-${statusColor} service-status"
-                                data-toggle="tooltip" title="${statusTitle}"
-                                style="font-size: 10px; padding: 3px 6px;">
-                                <i class="fa fa-${statusIcon} fa-fw"></i>
-                            </span>
-                        </div>
-                        <div style="text-align: left;">
-                            <div class="btn-group" role="group">
-                                ${this.serviceControl(actions)}
-                            </div>
-                        </div>
-                    </div>
+                        text-align: left;
+                    " title="${service.description} (${statusTitle})" data-toggle="tooltip">${service.description}</div>
+                    ${this.serviceControl(actions)}
                 </div>
             `);