diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
index e04fc850f..cee943322 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/LiveReports.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="flex-1 overflow-auto p-4">
-    <div class="row">
+    <div class="flex">
       <open-conversations />
 
-      <div class="column small-12 medium-4 flex">
+      <div class="flex-1 w-full max-w-full md:w-[35%] md:max-w-[35%] flex">
         <metric-card
           :header="$t('OVERVIEW_REPORTS.AGENT_STATUS.HEADER')"
           class="flex-1"
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue
index 7acb9004f..6f8148b92 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/components/LiveReports/OpenConversations.vue
@@ -50,9 +50,11 @@ export default {
 </script>
 
 <template>
-  <div class="column small-12 medium-8 conversation-metric">
+  <div
+    class="flex-1 w-full max-w-full md:w-[65%] md:max-w-[65%] conversation-metric"
+  >
     <metric-card
-      class="overflow-visible min-h-[150px]"
+      class="!overflow-visible min-h-[150px]"
       :header="$t('OVERVIEW_REPORTS.ACCOUNT_CONVERSATIONS.HEADER')"
       :is-loading="uiFlags.isFetchingAccountConversationMetric"
       loading-message="Loading metrics"