diff --git a/resources/css/app.css b/resources/css/app.css
index bf506dbda..f9965994e 100644
--- a/resources/css/app.css
+++ b/resources/css/app.css
@@ -4751,42 +4751,14 @@ @container service-domains (max-width: 980px) {
     }
 
     .data-table-row.service-domains-overview-grid {
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        gap: 0.75rem;
-    }
-
-    .data-table-row.service-domains-overview-grid > :first-child {
-        grid-column: 1 / -1;
-    }
-
-    .service-domain-detail {
-        justify-content: space-between;
-        gap: 0.5rem;
-    }
-
-    .service-domain-detail-label {
-        display: inline;
-        color: var(--coollabs-fg-dim);
-    }
-}
-
-@container service-domains (max-width: 600px) {
-    .data-table-row.service-domains-overview-grid {
-        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-columns: minmax(0, 1fr) auto auto;
+        grid-template-areas: "domain dns actions" "summary summary summary";
         gap: 0.625rem 0.75rem;
-        padding: 0.875rem;
+        padding: 0.75rem;
     }
 
     .data-table-row.service-domains-overview-grid > :first-child {
-        grid-column: 1 / -1;
-    }
-
-    .data-table-row.service-domains-overview-grid > :first-child a,
-    .data-table-row.service-domains-overview-grid > :first-child span[title] {
-        overflow: visible;
-        white-space: normal;
-        overflow-wrap: anywhere;
-        line-height: 1.35;
+        grid-area: domain;
     }
 
     .service-domain-detail,
@@ -4796,7 +4768,7 @@ @container service-domains (max-width: 600px) {
 
     .service-domain-mobile-summary {
         display: flex;
-        grid-column: 1 / -1;
+        grid-area: summary;
         flex-wrap: wrap;
         align-items: center;
         gap: 0.375rem 0.75rem;
@@ -4812,10 +4784,43 @@ @container service-domains (max-width: 600px) {
     }
 
     .service-domain-dns {
+        grid-area: dns;
+        justify-self: end;
+    }
+
+    .service-domain-actions {
+        grid-area: actions;
+        justify-self: end;
+    }
+}
+
+@container service-domains (max-width: 600px) {
+    .data-table-row.service-domains-overview-grid {
+        grid-template-columns: minmax(0, 1fr) auto;
+        grid-template-areas: "domain domain" "summary summary" "dns actions";
+        gap: 0.625rem 0.75rem;
+        padding: 0.875rem;
+    }
+
+    .data-table-row.service-domains-overview-grid > :first-child {
+        grid-area: domain;
+    }
+
+    .data-table-row.service-domains-overview-grid > :first-child a,
+    .data-table-row.service-domains-overview-grid > :first-child span[title] {
+        overflow: visible;
+        white-space: normal;
+        overflow-wrap: anywhere;
+        line-height: 1.35;
+    }
+
+    .service-domain-dns {
+        grid-area: dns;
         justify-self: start;
     }
 
     .service-domain-actions {
+        grid-area: actions;
         justify-self: end;
     }
 
diff --git a/tests/Feature/ApplicationDomainsTest.php b/tests/Feature/ApplicationDomainsTest.php
index 9063f57b0..51b2b0ae8 100644
--- a/tests/Feature/ApplicationDomainsTest.php
+++ b/tests/Feature/ApplicationDomainsTest.php
@@ -1894,6 +1894,16 @@
         ->not->toContain('title="No domains for this service"');
 });
 
+it('uses a compact two row domain card at medium widths', function () {
+    $css = file_get_contents(resource_path('css/app.css'));
+
+    expect($css)
+        ->toContain('@container service-domains (max-width: 980px)')
+        ->toContain('grid-template-columns: minmax(0, 1fr) auto auto;')
+        ->toContain('grid-template-areas: "domain dns actions" "summary summary summary";')
+        ->toContain('grid-area: summary;');
+});
+
 it('uses concise search indexing headers in application and service domain tables', function () {
     $applicationView = file_get_contents(resource_path('views/livewire/project/application/domains.blade.php'));
     $serviceView = file_get_contents(resource_path('views/livewire/project/service/partials/domain-table.blade.php'));