diff --git a/src/modules/dashboard/components/DashboardTable.tsx b/src/modules/dashboard/components/DashboardTable.tsx
index 2fdcb76..1f7bc15 100644
--- a/src/modules/dashboard/components/DashboardTable.tsx
+++ b/src/modules/dashboard/components/DashboardTable.tsx
@@ -1,68 +1,70 @@
 "use client";
 import React from "react";
 
-import { Table, Center } from "@mantine/core"
+import { Table, Center, ScrollArea } from "@mantine/core";
 import { Table as ReactTable, flexRender } from "@tanstack/react-table";
 
 interface Props<TData> {
-    table: ReactTable<TData>
+	table: ReactTable<TData>;
 }
 
-export default function DashboardTable<T>({table}: Props<T>) {
+export default function DashboardTable<T>({ table }: Props<T>) {
 	return (
-		<Table verticalSpacing="xs" horizontalSpacing="xs">
-			{/* Thead */}
-			<Table.Thead>
-				{table.getHeaderGroups().map((headerGroup) => (
-					<Table.Tr key={headerGroup.id}>
-						{headerGroup.headers.map((header) => (
-							<Table.Th
-								key={header.id}
-								style={{
-									maxWidth: `${header.column.columnDef.maxSize}px`,
-									width: `${header.getSize()}`,
-								}}
-							>
-								{header.isPlaceholder
-									? null
-									: flexRender(
-											header.column.columnDef.header,
-											header.getContext()
-									  )}
-							</Table.Th>
-						))}
-					</Table.Tr>
-				))}
-			</Table.Thead>
-
-			{/* Tbody */}
-			<Table.Tbody>
-				{table.getRowModel().rows.length > 0 ? (
-					table.getRowModel().rows.map((row) => (
-						<Table.Tr key={row.id}>
-							{row.getVisibleCells().map((cell) => (
-								<Table.Td
-									key={cell.id}
+		<ScrollArea.Autosize>
+			<Table verticalSpacing="xs" horizontalSpacing="xs">
+				{/* Thead */}
+				<Table.Thead>
+					{table.getHeaderGroups().map((headerGroup) => (
+						<Table.Tr key={headerGroup.id}>
+							{headerGroup.headers.map((header) => (
+								<Table.Th
+									key={header.id}
 									style={{
-										maxWidth: `${cell.column.columnDef.maxSize}px`,
+										maxWidth: `${header.column.columnDef.maxSize}px`,
+										width: `${header.getSize()}`,
 									}}
 								>
-									{flexRender(
-										cell.column.columnDef.cell,
-										cell.getContext()
-									)}
-								</Table.Td>
+									{header.isPlaceholder
+										? null
+										: flexRender(
+												header.column.columnDef.header,
+												header.getContext()
+										  )}
+								</Table.Th>
 							))}
 						</Table.Tr>
-					))
-				) : (
-					<Table.Tr>
-						<Table.Td colSpan={table.getAllColumns().length}>
-							<Center>- No Data -</Center>
-						</Table.Td>
-					</Table.Tr>
-				)}
-			</Table.Tbody>
-		</Table>
+					))}
+				</Table.Thead>
+
+				{/* Tbody */}
+				<Table.Tbody>
+					{table.getRowModel().rows.length > 0 ? (
+						table.getRowModel().rows.map((row) => (
+							<Table.Tr key={row.id}>
+								{row.getVisibleCells().map((cell) => (
+									<Table.Td
+										key={cell.id}
+										style={{
+											maxWidth: `${cell.column.columnDef.maxSize}px`,
+										}}
+									>
+										{flexRender(
+											cell.column.columnDef.cell,
+											cell.getContext()
+										)}
+									</Table.Td>
+								))}
+							</Table.Tr>
+						))
+					) : (
+						<Table.Tr>
+							<Table.Td colSpan={table.getAllColumns().length}>
+								<Center>- No Data -</Center>
+							</Table.Td>
+						</Table.Tr>
+					)}
+				</Table.Tbody>
+			</Table>
+		</ScrollArea.Autosize>
 	);
 }