diff --git a/src/opnsense/www/js/widgets/Services.js b/src/opnsense/www/js/widgets/Services.js
index 92ad0b83245..5c7d7bde1b0 100644
--- a/src/opnsense/www/js/widgets/Services.js
+++ b/src/opnsense/www/js/widgets/Services.js
@@ -38,17 +38,15 @@ export default class Services extends BaseTableWidget {
     }
 
     getMarkup() {
-        let $table = this.createTable('services-table', {
-            headerPosition: 'left',
-            headerBreakpoint: 270
-        });
-        return $(`<div id="services-container"></div>`).append($table);
+        return $(`<div id="services-container" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding: 5px; gap: 5px;"></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;" title="${title}" data-toggle="tooltip">
+                  class="btn btn-xs btn-default srv_status_act2"
+                  style="font-size: 10px; padding: 2px 6px;"
+                  title="${title}" data-toggle="tooltip">
                 <i class="fa fa-fw fa-${icon}"></i>
             </button>
         `).join('');
@@ -62,13 +60,14 @@ export default class Services extends BaseTableWidget {
             return;
         }
 
-        $('.service-status').tooltip('hide');
-        $('.srv_status_act2').tooltip('hide');
+        $('[data-toggle="tooltip"]').tooltip('hide');
 
-        for (const service of data.rows) {
-            let name = service.name;
-            let $description = $(`<div style="font-size: 12px;">${service.description}</div>`);
+        const $container = $('#services-container');
+        $container.empty();
+
+        data.rows.sort((a, b) => a.description.localeCompare(b.description));
 
+        for (const service of data.rows) {
             let actions = [];
             if (service.locked) {
                 actions.push({ action: 'restart', id: service.id, title: this.translations.restart, icon: 'refresh' });
@@ -79,25 +78,52 @@ export default class Services extends BaseTableWidget {
                 actions.push({ action: 'start', id: service.id, title: this.translations.start, icon: 'play' });
             }
 
-            let $buttonContainer = $(`
-                <div style="margin-left: 45%">
-                <span class="label label-opnsense label-opnsense-xs
-                             label-${service.running ? 'success' : 'danger'}
-                             service-status"
-                             data-toggle="tooltip" title="${service.running ? this.translations.running : this.translations.stopped}"
-                             style="font-size: 10px;">
-                    <i class="fa fa-${service.running ? 'play' : 'stop'} fa-fw"></i>
-                </span>
+            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 style="
+                        font-weight: bold;
+                        font-size: 12px;
+                        margin-bottom: 5px;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        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>
                 </div>
             `);
 
-            $buttonContainer.append(this.serviceControl(actions));
-
-            super.updateTable('services-table', [[$description.prop('outerHTML'), $buttonContainer.prop('outerHTML')]], service.id);
+            $container.append($tile);
         }
 
-        $('.service-status').tooltip({container: 'body'});
-        $('.srv_status_act2').tooltip({container: 'body'});
 
         $('.srv_status_act2').on('click', async (event) => {
             this.locked = true;
@@ -120,8 +146,7 @@ export default class Services extends BaseTableWidget {
     }
 
     displayError(message) {
-        const $error = $(`<div class="error-message"><a href="/ui/core/service">${message}</a></div>`);
-        $('#services-table').empty().append($error);
+        const $error = $(`<div class="error-message" style="width: 100%; text-align: center; padding: 10px;"><a href="/ui/core/service">${message}</a></div>`);
+        $('#services-container').empty().append($error);
     }
-
-}
+}
\ No newline at end of file