diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9d9214624..93df8045c 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -57,6 +57,7 @@
         "playwright": "^1.43.1",
         "postcss": "^8.4.32",
         "prettier": "^3.1.1",
+        "resize-observer-polyfill": "^1.5.1",
         "stylus": "^0.63.0",
         "stylus-loader": "^8.0.0",
         "vite": "^4.1.4",
@@ -5078,6 +5079,12 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "dev": true
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index da72c2064..1f3e69547 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -64,6 +64,7 @@
     "playwright": "^1.43.1",
     "postcss": "^8.4.32",
     "prettier": "^3.1.1",
+    "resize-observer-polyfill": "^1.5.1",
     "stylus": "^0.63.0",
     "stylus-loader": "^8.0.0",
     "vite": "^4.1.4",
diff --git a/frontend/src/components/Dashboard.vue b/frontend/src/components/Dashboard.vue
index 3915210fc..e7ef4da44 100644
--- a/frontend/src/components/Dashboard.vue
+++ b/frontend/src/components/Dashboard.vue
@@ -1,5 +1,4 @@
 <template>
-  <ReportSelectionManager />
   <v-row class="mt-3">
     <v-col>
       <h2 data-testid="legal-name">Welcome, {{ userInfo?.legalName }}.</h2>
@@ -68,53 +67,7 @@
           <v-toolbar-title>Submitted Reports</v-toolbar-title>
         </v-toolbar>
         <v-card-text>
-          <div v-if="!reports.length">No generated reports yet.</div>
-          <div v-if="reports.length">
-            <v-table>
-              <thead>
-                <tr>
-                  <th scope="col" class="font-weight-bold">Reporting Year</th>
-                  <th scope="col" class="font-weight-bold">Submission Date</th>
-                  <th scope="col" class="font-weight-bold text-right pr-8">
-                    Action
-                  </th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="report in reports" :key="report.report_id">
-                  <td :data-testid="'reporting_year-' + report.report_id">
-                    {{ report.reporting_year }}
-                  </td>
-                  <td
-                    :data-testid="'report_published_date-' + report.report_id"
-                  >
-                    {{ formatDateTime(report.create_date) }}
-                  </td>
-                  <td class="text-right">
-                    <v-btn
-                      :data-testid="'view-report-' + report.report_id"
-                      prepend-icon="mdi-eye-outline"
-                      variant="text"
-                      color="link"
-                      @click="viewReport(report)"
-                    >
-                      View
-                    </v-btn>
-                    <v-btn
-                      v-if="report.is_unlocked"
-                      :data-testid="'edit-report-' + report.report_id"
-                      prepend-icon="mdi-eye-outline"
-                      variant="text"
-                      color="link"
-                      @click="editReport(report)"
-                    >
-                      Edit
-                    </v-btn>
-                  </td>
-                </tr>
-              </tbody>
-            </v-table>
-          </div>
+          <ReportsTable />
         </v-card-text>
       </v-card>
     </v-col>
@@ -138,72 +91,20 @@
 </template>
 
 <script lang="ts">
-import ReportSelectionManager from './util/DasboardReportManager.vue';
-import { mapActions, mapState } from 'pinia';
+import ReportsTable from './util/ReportsTable.vue';
+import { mapState } from 'pinia';
 import { authStore } from '../store/modules/auth';
-import { useCodeStore } from '../store/modules/codeStore';
-import { REPORT_STATUS } from '../utils/constant';
-import ApiService from '../common/apiService';
-import { DateTimeFormatter, LocalDate, ZonedDateTime } from '@js-joda/core';
-import { Locale } from '@js-joda/locale_en';
-import {
-  useReportStepperStore,
-  ReportMode,
-} from '../store/modules/reportStepper';
-import { IReport } from '../common/types';
-import { useConfigStore } from '../store/modules/config';
 
 type DashboardData = {
-  reports: IReport[];
   userInfo?: any;
 };
 
 export default {
-  components: { ReportSelectionManager },
-  data: (): DashboardData => ({
-    reports: [],
-  }),
+  components: { ReportsTable },
+  data: (): DashboardData => ({}),
   computed: {
-    ...mapState(useReportStepperStore, ['reportId']),
     ...mapState(authStore, ['userInfo']),
-    ...mapState(useCodeStore, ['naicsCodes']),
-    ...mapState(useConfigStore, ['config']),
-  },
-  async beforeMount() {
-    this.reset();
-    this.loadConfig();
-    this.getReports();
-  },
-  methods: {
-    ...mapActions(useReportStepperStore, ['setReportInfo', 'reset', 'setMode']),
-    ...mapActions(useConfigStore, ['loadConfig']),
-    formatDate(value, format = 'MMMM d, YYYY') {
-      const formatter = DateTimeFormatter.ofPattern(format).withLocale(
-        Locale.ENGLISH,
-      );
-      return LocalDate.parse(value).format(formatter);
-    },
-    formatDateTime(value, format = 'MMMM d, YYYY') {
-      const formatter = DateTimeFormatter.ofPattern(format).withLocale(
-        Locale.ENGLISH,
-      );
-      return ZonedDateTime.parse(value).format(formatter);
-    },
-    async getReports() {
-      this.reports = await ApiService.getReports({
-        report_status: REPORT_STATUS.PUBLISHED,
-      });
-    },
-    async viewReport(report: IReport) {
-      this.setMode(ReportMode.View);
-      await this.setReportInfo(report);
-    },
-    async editReport(report: IReport) {
-      this.setMode(ReportMode.Edit);
-      await this.setReportInfo(report);
-      await this.$router.push({ path: 'generate-report-form' });
-    },
-  },
+  }
 };
 </script>
 
diff --git a/frontend/src/components/__tests__/Dashboard.spec.ts b/frontend/src/components/__tests__/Dashboard.spec.ts
index ac3ccea0c..e6d25bbc5 100644
--- a/frontend/src/components/__tests__/Dashboard.spec.ts
+++ b/frontend/src/components/__tests__/Dashboard.spec.ts
@@ -1,11 +1,9 @@
 import { expect, describe, it, vi, beforeEach } from 'vitest';
 
-import { render, waitFor, fireEvent } from '@testing-library/vue';
+import { render } from '@testing-library/vue';
 import Dashboard from '../Dashboard.vue';
 import { createTestingPinia } from '@pinia/testing';
 import { authStore } from '../../store/modules/auth';
-import { DateTimeFormatter, LocalDate } from '@js-joda/core';
-import { Locale } from '@js-joda/locale_en';
 
 const pinia = createTestingPinia();
 const mockRouterPush = vi.fn();
@@ -13,6 +11,14 @@ const mockRouter = {
   push: (...args) => mockRouterPush(...args),
 };
 
+vi.mock('../../common/apiService', () => ({
+  default: {
+    getReports: async () => {
+      return [];
+    },
+  },
+}));
+
 const wrappedRender = async () => {
   return render(Dashboard, {
     global: {
@@ -24,17 +30,6 @@ const wrappedRender = async () => {
   });
 };
 
-const mockGetReports = vi.fn();
-const mockGetReport = vi.fn();
-vi.mock('../../common/apiService', () => ({
-  default: {
-    getReports: async () => {
-      return mockGetReports();
-    },
-    getReport: (...args) => mockGetReport(...args),
-  },
-}));
-
 const auth = authStore();
 
 describe('Dashboard', () => {
@@ -44,72 +39,7 @@ describe('Dashboard', () => {
   });
 
   it('should user name', async () => {
-    mockGetReports.mockReturnValue([]);
     const { getByTestId } = await wrappedRender();
     expect(getByTestId('legal-name')).toHaveTextContent('Welcome, Test');
   });
-
-  it('should display correct records', async () => {
-    mockGetReports.mockReturnValue([
-      {
-        report_id: 'id1',
-        report_start_date: '2023-01-01',
-        report_end_date: '2023-02-01',
-        reporting_year: 2023,
-        create_date: new Date().toISOString(),
-      },
-    ]);
-    const { getByTestId } = await wrappedRender();
-    await waitFor(() => {
-      expect(mockGetReports).toHaveBeenCalled();
-    });
-
-    expect(getByTestId('reporting_year-id1')).toHaveTextContent('2023');
-    expect(getByTestId('report_published_date-id1')).toHaveTextContent(
-      LocalDate.now().format(
-        DateTimeFormatter.ofPattern('MMMM d, YYYY').withLocale(Locale.ENGLISH),
-      ),
-    );
-  });
-  it('should open report details', async () => {
-    mockGetReports.mockReturnValue([
-      {
-        report_id: 'id1',
-        report_start_date: '2023-01-01',
-        report_end_date: '2023-02-01',
-        create_date: new Date().toISOString(),
-      },
-    ]);
-    const { getByTestId } = await wrappedRender();
-    await waitFor(() => {
-      expect(mockGetReports).toHaveBeenCalled();
-    });
-
-    const viewReportButton = getByTestId('view-report-id1');
-    await fireEvent.click(viewReportButton);
-  });
-  it('should open report in edit mode', async () => {
-    mockGetReports.mockReturnValue([
-      {
-        report_id: 'id1',
-        report_start_date: '2023-01-01',
-        report_end_date: '2023-02-01',
-        create_date: new Date().toISOString(),
-        is_unlocked: true,
-      },
-    ]);
-    const { getByTestId } = await wrappedRender();
-    await waitFor(() => {
-      expect(mockGetReports).toHaveBeenCalled();
-    });
-
-    const editReportButton = getByTestId('edit-report-id1');
-    await waitFor(() => {
-      expect(editReportButton).toBeInTheDocument();
-    });
-    await fireEvent.click(editReportButton);
-    expect(mockRouterPush).toHaveBeenCalledWith({
-      path: 'generate-report-form',
-    });
-  });
 });
diff --git a/frontend/src/components/util/ReportsTable.vue b/frontend/src/components/util/ReportsTable.vue
new file mode 100644
index 000000000..1fc0ca91d
--- /dev/null
+++ b/frontend/src/components/util/ReportsTable.vue
@@ -0,0 +1,118 @@
+<template>
+  <ReportSelectionManager />
+  <v-data-table
+    :headers="headers"
+    :items="reports"
+    :items-per-page="5"
+    no-data-text="No generated reports yet."
+    :loading="isLoading"
+    loading-text="Loading reports..."
+  >
+    <template v-slot:item="{ item }">
+      <tr>
+        <td :data-testid="`reporting_year-${item.report_id}`">
+          {{ item.reporting_year }}
+        </td>
+        <td :data-testid="`report_published_date-${item.report_id}`">
+          {{ formatDateTime(item.create_date) }}
+        </td>
+        <td class="actions">
+          <v-btn
+            :data-testid="`view-report-${item.report_id}`"
+            prepend-icon="mdi-eye-outline"
+            variant="text"
+            color="link"
+            @click="viewReport(item)"
+          >
+            View
+          </v-btn>
+          <v-btn
+            v-if="item.is_unlocked"
+            :data-testid="`edit-report-${item.report_id}`"
+            prepend-icon="mdi-eye-outline"
+            variant="text"
+            color="link"
+            @click="editReport(item)"
+          >
+            Edit
+          </v-btn>
+        </td>
+      </tr>
+    </template>
+  </v-data-table>
+</template>
+
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue';
+import { IReport } from '../../common/types';
+import ReportSelectionManager from './DasboardReportManager.vue';
+import { REPORT_STATUS } from '../../utils/constant';
+import ApiService from '../../common/apiService';
+import {
+  ReportMode,
+  useReportStepperStore,
+} from '../../store/modules/reportStepper';
+import { useConfigStore } from '../../store/modules/config';
+import { DateTimeFormatter, ZonedDateTime } from '@js-joda/core';
+import { Locale } from '@js-joda/locale_en';
+import { useRouter } from 'vue-router';
+
+const { setReportInfo, setMode, reset } = useReportStepperStore();
+const { loadConfig } = useConfigStore();
+const router = useRouter();
+
+const headers: any = [
+  { title: 'Reporting Year', key: 'reporting_year', sortable: false },
+  {
+    title: 'Submission Date',
+    key: 'create_date',
+    sortable: false,
+  },
+  { title: 'Action', sortable: false, key: 'actions', align: 'end' },
+];
+
+const reports = ref<IReport[]>([]);
+const isLoading = ref(true);
+
+onBeforeMount(async () => {
+  await reset();
+  await loadConfig();
+  await getReports();
+});
+
+const getReports = async () => {
+  reports.value = await ApiService.getReports({
+    report_status: REPORT_STATUS.PUBLISHED,
+  });
+  isLoading.value = false;
+};
+
+const formatDateTime = (value, format = 'MMMM d, YYYY') => {
+  const formatter = DateTimeFormatter.ofPattern(format).withLocale(
+    Locale.ENGLISH,
+  );
+  return ZonedDateTime.parse(value).format(formatter);
+};
+
+const viewReport = async (report: IReport) => {
+  setMode(ReportMode.View);
+  await setReportInfo(report);
+};
+const editReport = async (report: IReport) => {
+  setMode(ReportMode.Edit);
+  await setReportInfo(report);
+  await router.push({ path: 'generate-report-form' });
+};
+</script>
+
+<style>
+.v-data-table-header__content {
+  font-weight: 700 !important;
+  margin-right: 15px;
+}
+
+.actions {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/frontend/src/components/util/__tests__/ReportsTable.spec.ts b/frontend/src/components/util/__tests__/ReportsTable.spec.ts
new file mode 100644
index 000000000..1f64dc75c
--- /dev/null
+++ b/frontend/src/components/util/__tests__/ReportsTable.spec.ts
@@ -0,0 +1,113 @@
+import { expect, describe, it, vi, beforeEach } from 'vitest';
+
+import { render, waitFor, fireEvent } from '@testing-library/vue';
+import { createTestingPinia } from '@pinia/testing';
+import { DateTimeFormatter, LocalDate } from '@js-joda/core';
+import { Locale } from '@js-joda/locale_en';
+import { createVuetify } from 'vuetify';
+import * as components from 'vuetify/components';
+import * as directives from 'vuetify/directives';
+import ReportsTable from '../ReportsTable.vue';
+
+const vuetify = createVuetify({
+  components,
+  directives,
+});
+
+const pinia = createTestingPinia();
+const mockRouterPush = vi.fn();
+vi.mock('vue-router', () => ({
+    useRouter: () => ({
+        push: mockRouterPush
+    })
+}))
+
+global.ResizeObserver = require('resize-observer-polyfill');
+
+const wrappedRender = async () => {
+  return render(ReportsTable, {
+    global: {
+      plugins: [pinia, vuetify]
+    },
+  });
+};
+
+const mockGetReports = vi.fn();
+const mockGetReport = vi.fn();
+vi.mock('../../../common/apiService', () => ({
+  default: {
+    getReports: async () => {
+      return mockGetReports();
+    },
+    getReport: (...args) => mockGetReport(...args),
+  },
+}));
+
+describe('ReportsTable', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+  it('should display correct records', async () => {
+    mockGetReports.mockReturnValue([
+      {
+        report_id: 'id1',
+        report_start_date: '2023-01-01',
+        report_end_date: '2023-02-01',
+        reporting_year: 2023,
+        create_date: new Date().toISOString(),
+      },
+    ]);
+    const { getByTestId } = await wrappedRender();
+    await waitFor(() => {
+      expect(mockGetReports).toHaveBeenCalled();
+    });
+
+    expect(getByTestId('reporting_year-id1')).toHaveTextContent('2023');
+    expect(getByTestId('report_published_date-id1')).toHaveTextContent(
+      LocalDate.now().format(
+        DateTimeFormatter.ofPattern('MMMM d, YYYY').withLocale(Locale.ENGLISH),
+      ),
+    );
+  });
+  it('should open report details', async () => {
+    mockGetReports.mockReturnValue([
+      {
+        report_id: 'id1',
+        report_start_date: '2023-01-01',
+        report_end_date: '2023-02-01',
+        create_date: new Date().toISOString(),
+      },
+    ]);
+    const { getByTestId } = await wrappedRender();
+    await waitFor(() => {
+      expect(mockGetReports).toHaveBeenCalled();
+    });
+
+    const viewReportButton = getByTestId('view-report-id1');
+    await fireEvent.click(viewReportButton);
+  });
+  it('should open report in edit mode', async () => {
+    mockGetReports.mockReturnValue([
+      {
+        report_id: 'id1',
+        report_start_date: '2023-01-01',
+        report_end_date: '2023-02-01',
+        create_date: new Date().toISOString(),
+        is_unlocked: true,
+      },
+    ]);
+    const { getByTestId } = await wrappedRender();
+    await waitFor(() => {
+      expect(mockGetReports).toHaveBeenCalled();
+    });
+
+    const editReportButton = getByTestId('edit-report-id1');
+    await waitFor(() => {
+      expect(editReportButton).toBeInTheDocument();
+    });
+    await fireEvent.click(editReportButton);
+    expect(mockRouterPush).toHaveBeenCalledWith({
+      path: 'generate-report-form',
+    });
+  });
+});