diff --git a/app/templates/views/organizations/organization/index.html b/app/templates/views/organizations/organization/index.html
index e054421a4..5f280b052 100644
--- a/app/templates/views/organizations/organization/index.html
+++ b/app/templates/views/organizations/organization/index.html
@@ -26,24 +26,39 @@
     <div id="message"></div>
   </div>
   <div id="totalMessageTable" class="margin-bottom-3"></div>
-  <div class="grid-row">
-    <div class="grid-col-12 tablet:grid-col-6">
-      <div class="usa-card margin-bottom-3">
-        <div class="usa-card__container">
-          <div class="usa-card__body padding-2">
-            <p class="margin-0">
-              <strong>Services:</strong> {{ total_services }} (Live: {{ live_services }} - Trial: {{ trial_services }} - Suspended: {{ suspended_services }})
-            </p>
-            <p class="margin-0">
-              <strong>Agreement:</strong> Jan 1 - Dec 31
-            </p>
+  <div class="grid-row margin-bottom-3 maxw-tablet">
+    <div class="grid-col-12 tablet:grid-col-6 margin-bottom-2 tablet:margin-bottom-0 tablet:padding-right-1">
+      <div class="usa-summary-box height-full" role="region">
+        <div class="usa-summary-box__body">
+          <div class="usa-summary-box__text">
+            <div class="display-flex flex-align-end">
+              <div class="flex-1">
+                <div class="text-base-dark text-uppercase font-sans-3xs text-ls-1 margin-bottom-05">Total Services</div>
+                <div class="font-sans-xl text-bold text-primary-darker line-height-sans-1">{{ total_services }}</div>
+              </div>
+              <div class="text-base-dark font-body-2xs line-height-sans-3">
+                <span class="text-success-dark text-bold">{{ live_services }}</span> Live
+                <span class="margin-left-1 text-warning-dark text-bold">{{ trial_services }}</span> Trial
+                <span class="margin-left-1 text-base-dark text-bold">{{ suspended_services }}</span> Suspended
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="grid-col-12 tablet:grid-col-6 tablet:padding-left-1">
+      <div class="usa-summary-box height-full" role="region">
+        <div class="usa-summary-box__body">
+          <div class="usa-summary-box__text">
+            <div class="text-base-dark text-uppercase font-sans-3xs text-ls-1 margin-bottom-05">Agreement Period</div>
+            <div class="font-sans-xl text-bold text-primary-darker">Jan 1 - Dec 31</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 
-  <div class="margin-top-5 margin-bottom-5">
+  <div class="margin-bottom-5">
     <h2 class="font-heading-lg">What is a service?</h2>
     <p class="usa-body">
       When you join Notify, you're added to a service. This is your organization's workspace for sending text messages and emails. Within your service, you can: