diff --git a/src/components/table/TanStackTable.module.scss b/src/components/table/TanStackTable.module.scss
index e69de29..b677d47 100644
--- a/src/components/table/TanStackTable.module.scss
+++ b/src/components/table/TanStackTable.module.scss
@@ -0,0 +1,27 @@
+@use "@/theme/sass/helper" as *;
+.responsive_table {
+  width: 100%;
+  .table {
+    width: 100%;
+    thead {
+      tr {
+        th {
+          text-align: start;
+          padding-inline: rem(10);
+          padding-block: rem(4);
+          min-height: rem(40);
+        }
+      }
+    }
+    tbody {
+      tr {
+        td {
+          text-align: start;
+          padding-inline: rem(10);
+          padding-block: rem(4);
+          min-height: rem(40);
+        }
+      }
+    }
+  }
+}
diff --git a/src/components/table/TanStackTable.tsx b/src/components/table/TanStackTable.tsx
index 6955e09..2b6e297 100644
--- a/src/components/table/TanStackTable.tsx
+++ b/src/components/table/TanStackTable.tsx
@@ -5,6 +5,7 @@ import {
   getCoreRowModel,
   flexRender,
 } from "@tanstack/react-table";
+import global from "../../../src/theme/global/global.module.scss";
 import styles from "./TanStackTable.module.scss";
 import { useEffect, useState } from "react";
 import ReviewModal from "../reviewModal/ReviewModal";
@@ -92,13 +93,13 @@ const TanStackTable = ({ data }: any) => {
 
   return (
     <>
-      <div className="w3-container">
-        <table className="w3-table-all">
+      <div className={styles.responsive_table}>
+        <table className={styles.table}>
           <thead>
             {table.getHeaderGroups().map((headerGroup: any) => (
               <tr key={headerGroup?.id}>
                 {headerGroup.headers.map((header: any) => (
-                  <th key={header?.id}>
+                  <th key={header?.id} className={global.body2}>
                     {flexRender(
                       header.column.columnDef.header,
                       header.getContext()