diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
new file mode 100644
index 000000000..90a4bbb6f
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAMetrics.vue
@@ -0,0 +1,54 @@
+<script setup>
+// defineProps({
+//   keepAlive: {
+//     type: Boolean,
+//     default: true,
+//   },
+// });
+</script>
+
+<template>
+  <div
+    class="flex w-full gap-14 bg-white dark:bg-slate-900 rounded-xl border border-slate-75 dark:border-slate-700/50 px-6 py-4 max-h-[92px] h-full"
+  >
+    <div class="flex flex-col items-start justify-center min-w-[160px] gap-2">
+      <span
+        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+      >
+        Hit rate
+        <fluent-icon
+          v-tooltip.right="`Hit rate`"
+          size="14"
+          icon="information"
+          type="outline"
+          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        />
+      </span>
+      <span
+        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
+      >
+        12%
+      </span>
+    </div>
+    <div class="border border-slate-75 dark:border-slate-700/50 h-full w-px" />
+    <div class="flex flex-col gap-2 items-start justify-center min-w-[160px]">
+      <span
+        class="inline-flex items-center gap-1 tracking-[-0.6%] text-sm text-slate-700 dark:text-slate-200 font-medium"
+      >
+        No. of breaches
+        <fluent-icon
+          v-tooltip.right="`No of breaches`"
+          size="14"
+          icon="information"
+          type="outline"
+          class="flex-shrink-0 hidden text-sm font-normal sm:flex sm:font-medium text-slate-500 dark:text-slate-500"
+        />
+      </span>
+      <span
+        class="text-2xl font-medium text-slate-900 dark:text-slate-25 tracking-[-1.5%]"
+      >
+        5
+      </span>
+    </div>
+  </div>
+</template>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
index b917cf5ef..fa83baa53 100644
--- a/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLAReports.vue
@@ -1,11 +1,17 @@
 <template>
-  <div class="flex-1 overflow-auto p-4">
-    <h1>SLA Reports</h1>
+  <div class="flex flex-col flex-1 overflow-auto p-4 font-inter gap-6">
+    <SLAMetrics />
+    <SLATable />
   </div>
 </template>
 <script>
-import { defineComponent, ref, watch, watchEffect } from 'vue';
+import SLAMetrics from './SLAMetrics.vue';
+import SLATable from './SLATable.vue';
 export default {
   name: 'SLAReports',
+  components: {
+    SLAMetrics,
+    SLATable,
+  },
 };
 </script>
diff --git a/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue b/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue
new file mode 100644
index 000000000..b930037cf
--- /dev/null
+++ b/app/javascript/dashboard/routes/dashboard/settings/reports/SLATable.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="min-w-full border rounded-xl border-slate-75 dark:border-slate-800/50"
+  >
+    <!-- Header -->
+    <div
+      class="grid content-center h-12 grid-cols-12 gap-4 px-6 py-0 border-b bg-slate-25 border-slate-75 dark:border-slate-800 rounded-t-xl dark:bg-slate-900"
+    >
+      <div
+        class="flex items-center font-medium capitalize text-xs py-2 px-0 tracking-[10%] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+      >
+        POLICY BREACHED
+      </div>
+      <div
+        class="flex items-center col-span-6 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        CONVERSATION
+      </div>
+      <div
+        class="flex items-center px-0 text-xs font-medium text-left capitalize col-span-2py-2 text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        AGENT
+      </div>
+      <div
+        class="col-span-2 px-0 py-2 text-xs font-medium text-left capitalize text-slate-700 dark:text-slate-100 rtl:text-right"
+      />
+    </div>
+    <div
+      class="grid content-center h-16 grid-cols-12 gap-4 px-6 py-0 bg-white border-b border-slate-75 dark:border-slate-800/50 dark:bg-slate-900"
+    >
+      <div
+        class="flex items-center capitalize py-2 px-0 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 text-left rtl:text-right col-span-2"
+      >
+        Premium SLA
+      </div>
+      <div
+        class="flex items-center col-span-6 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        #198 with John Doe
+      </div>
+      <div
+        class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        Elijah
+      </div>
+      <div
+        class="flex items-center col-span-2 px-0 py-2 text-sm tracking-[0.5] text-slate-700 dark:text-slate-100 rtl:text-right"
+      >
+        <woot-button color-scheme="secondary" variant="link">
+          View details
+        </woot-button>
+      </div>
+    </div>
+  </div>
+</template>