diff --git a/src/modules/BlockDetails/page.tsx b/src/modules/BlockDetails/page.tsx
index 7a424bf..72b348b 100644
--- a/src/modules/BlockDetails/page.tsx
+++ b/src/modules/BlockDetails/page.tsx
@@ -13,7 +13,7 @@ import {
   getPaginationRowModel,
   useReactTable,
 } from "@tanstack/react-table";
-import React, { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import { EXECUTION_RESOURCES_KEY_MAP } from "@/constants/rpc";
 import dayjs from "dayjs";
@@ -32,21 +32,17 @@ import {
   DataTable,
   TableCell,
   TableHead,
-  TableHeader,
 } from "@/shared/components/dataTable";
 import { ROUTES } from "@/constants/routes";
 import PageHeader from "@/shared/components/PageHeader";
-import DetailsPageContainer from "@/shared/components/DetailsPageContainer";
 import { SectionBox } from "@/shared/components/section/SectionBox";
 import { SectionBoxEntry } from "@/shared/components/section";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/shared/components/tab";
 
 const columnHelper = createColumnHelper<TransactionTableData>();
 
 const eventColumnHelper = createColumnHelper<EventTableData>();
 
-const DataTabs = ["Transactions", "Events", "Messages", "State Updates"];
-const TransactionTypeTabs = ["All", "Invoke", "Deploy Account", "Declare"];
-
 export default function BlockDetails() {
   const navigate = useNavigate();
   const { blockNumber } = useParams<{ blockNumber: string }>();
@@ -54,10 +50,6 @@ export default function BlockDetails() {
   const [transactionsData, setTransactionsData] = useState<
     TransactionTableData[]
   >([]);
-  const [selectedDataTab, setSelectedDataTab] = React.useState(DataTabs[0]);
-  const [selectedTransactionType, setSelectedTransactionType] = React.useState(
-    TransactionTypeTabs[0]
-  );
   const [eventsData, setEventsData] = useState([]);
   const [executionData, setExecutionData] = useState({
     bitwise: 0,
@@ -297,9 +289,8 @@ export default function BlockDetails() {
             // process info for transactions table
             transactions_table_data.push({
               id: padNumber(transactions_table_data.length + 1),
-              hash_display: `${
-                tx.transaction_hash
-              } ( ${formatSnakeCaseToDisplayValue(tx.type)} )`,
+              hash_display: `${tx.transaction_hash
+                } ( ${formatSnakeCaseToDisplayValue(tx.type)} )`,
               type: tx.type,
               status: receipt.statusReceipt,
               hash: tx.transaction_hash,
@@ -320,7 +311,6 @@ export default function BlockDetails() {
         pageIndex: 0,
         pageSize: 20,
       });
-      setSelectedTransactionType(tab);
     },
     [transaction_table]
   );
@@ -406,12 +396,12 @@ export default function BlockDetails() {
                     <td>
                       {BlockReceipt?.l1_gas_price
                         ? formatNumber(
-                            Number(
-                              cairo.felt(
-                                BlockReceipt?.l1_gas_price?.price_in_wei
-                              )
+                          Number(
+                            cairo.felt(
+                              BlockReceipt?.l1_gas_price?.price_in_wei
                             )
                           )
+                        )
                         : 0}{" "}
                       WEI
                     </td>
@@ -421,12 +411,12 @@ export default function BlockDetails() {
                     <td>
                       {BlockReceipt?.l1_gas_price
                         ? formatNumber(
-                            Number(
-                              cairo.felt(
-                                BlockReceipt?.l1_gas_price?.price_in_fri
-                              )
+                          Number(
+                            cairo.felt(
+                              BlockReceipt?.l1_gas_price?.price_in_fri
                             )
                           )
+                        )
                         : 0}{" "}
                       FRI
                     </td>
@@ -443,12 +433,12 @@ export default function BlockDetails() {
                     <td>
                       {BlockReceipt?.l1_data_gas_price
                         ? formatNumber(
-                            Number(
-                              cairo.felt(
-                                BlockReceipt?.l1_data_gas_price?.price_in_wei
-                              )
+                          Number(
+                            cairo.felt(
+                              BlockReceipt?.l1_data_gas_price?.price_in_wei
                             )
                           )
+                        )
                         : 0}{" "}
                       ETH
                     </td>
@@ -458,12 +448,12 @@ export default function BlockDetails() {
                     <td>
                       {BlockReceipt?.l1_data_gas_price
                         ? formatNumber(
-                            Number(
-                              cairo.felt(
-                                BlockReceipt?.l1_data_gas_price?.price_in_fri
-                              )
+                          Number(
+                            cairo.felt(
+                              BlockReceipt?.l1_data_gas_price?.price_in_fri
                             )
                           )
+                        )
                         : 0}{" "}
                       FRI
                     </td>
@@ -547,63 +537,48 @@ export default function BlockDetails() {
           </SectionBox>
         </div>
 
-        <div className="border border-borderGray flex flex-col flex-grow gap-4 p-[15px] rounded-md">
-          <div className="flex flex-col sm:flex-row text-center pt-5">
-            {DataTabs.map((tab, index) => (
-              <div
-                key={index}
-                style={{
-                  backgroundColor: selectedDataTab === tab ? "#8E8E8E" : "#fff",
-                  color: selectedDataTab === tab ? "#fff" : "#000",
-                }}
-                onClick={() => setSelectedDataTab(tab)}
-                className="w-full  border border-b-4 p-2 border-[#8E8E8E] uppercase cursor-pointer"
-              >
-                <p>{tab}</p>
-              </div>
-            ))}
-          </div>
-
-          {selectedDataTab === "Transactions" ? (
-            <div className="flex flex-row text-center">
-              {TransactionTypeTabs.map((tab, index) => (
-                <div
-                  key={index}
-                  style={{
-                    backgroundColor:
-                      selectedTransactionType === tab ? "#F3F3F3" : "#fff",
-                    fontWeight:
-                      selectedTransactionType === tab ? "bold" : "normal",
-                  }}
-                  onClick={() => handleTransactionFilter(tab)}
-                  className="w-fit border border-b-4 py-1 px-4 border-[#DBDBDB] uppercase cursor-pointer"
-                >
-                  <p>{tab}</p>
-                </div>
-              ))}
-            </div>
-          ) : null}
-
-          <div className=" h-full pb-2 w-full">
-            {selectedDataTab === "Transactions" ? (
-              <DataTable
-                table={transaction_table}
-                pagination={transactionsPagination}
-                setPagination={setTransactionsPagination}
-              />
-            ) : selectedDataTab === "Events" ? (
-              <DataTable
-                table={events_table}
-                pagination={eventsPagination}
-                setPagination={setEventsPagination}
-              />
-            ) : (
-              <div className="p-4 text-center">
-                <p className="text-black">No data found</p>
-              </div>
-            )}
-          </div>
-        </div>
+        <Tabs defaultValue="transactions" className="border border-borderGray flex flex-col flex-grow p-[15px] rounded-md">
+          <TabsList>
+            <TabsTrigger value="transactions">Transactions</TabsTrigger>
+            <TabsTrigger value="events">Events</TabsTrigger>
+            <TabsTrigger value="messages">Messages</TabsTrigger>
+            <TabsTrigger value="state-updates">State Updates</TabsTrigger>
+          </TabsList>
+
+          <TabsContent value="transactions">
+            <Tabs defaultValue="all" size="sm" variant="secondary" onValueChange={handleTransactionFilter}>
+              <TabsList>
+                <TabsTrigger value="all">All</TabsTrigger>
+                <TabsTrigger value="invoke">Invoke</TabsTrigger>
+                <TabsTrigger value="deploy-account">Deploy Account</TabsTrigger>
+                <TabsTrigger value="declare">Declare</TabsTrigger>
+              </TabsList>
+            </Tabs>
+
+            <DataTable
+              table={transaction_table}
+              pagination={transactionsPagination}
+              setPagination={setTransactionsPagination}
+              className="p-4"
+            />
+          </TabsContent>
+
+          <TabsContent value="events" className="p-4">
+            <DataTable
+              table={events_table}
+              pagination={eventsPagination}
+              setPagination={setEventsPagination}
+            />
+          </TabsContent>
+
+          <TabsContent value="messages" className="p-4 text-center">
+            <p>No data found</p>
+          </TabsContent>
+
+          <TabsContent value="state-updates" className="p-4 text-center">
+            <p>No data found</p>
+          </TabsContent>
+        </Tabs>
       </div>
     </div>
   );
diff --git a/src/modules/ContractDetails/page.tsx b/src/modules/ContractDetails/page.tsx
index a282497..9941df0 100644
--- a/src/modules/ContractDetails/page.tsx
+++ b/src/modules/ContractDetails/page.tsx
@@ -322,7 +322,7 @@ export default function ContractDetails() {
           </div>
 
           {/* Data Tabs Section */}
-          <Tabs defaultValue="read-contract" className="border relative border-[#8E8E8E] flex flex-col w-full overflow-y-auto max-h-[61.5rem]">
+          <Tabs defaultValue="read-contract" size="sm" variant="secondary">
             <TabsList>
               <TabsTrigger value="read-contract">Read Contract</TabsTrigger>
               <TabsTrigger value="write-contract">Write Contract</TabsTrigger>
diff --git a/src/modules/TransactionDetails/page.tsx b/src/modules/TransactionDetails/page.tsx
index 40d56a2..c3a3aa7 100644
--- a/src/modules/TransactionDetails/page.tsx
+++ b/src/modules/TransactionDetails/page.tsx
@@ -29,15 +29,7 @@ import {
 } from "@/shared/components/breadcrumbs";
 import { ROUTES } from "@/constants/routes";
 import { DataTable, TableCell, TableHead } from "@/shared/components/dataTable";
-
-const DataTabs = [
-  "Calldata",
-  "Events",
-  "Signature",
-  "Internal Calls",
-  "Messages",
-  "Storage Diffs",
-];
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/tab";
 
 interface ParsedEvent {
   transaction_hash: string;
@@ -67,7 +59,6 @@ export default function TransactionDetails() {
   const navigate = useNavigate();
   const { txHash } = useParams<{ txHash: string }>();
   const { isMobile } = useScreen();
-  const [selectedDataTab, setSelectedDataTab] = useState(DataTabs[0]);
   const [executionData, setExecutionData] = useState({
     bitwise: 0,
     pedersen: 0,
@@ -179,8 +170,8 @@ export default function TransactionDetails() {
 
               const eventKey = matchingParsedEvent
                 ? Object.keys(matchingParsedEvent).find((key) =>
-                    key.includes("::")
-                  )
+                  key.includes("::")
+                )
                 : "";
 
               return {
@@ -228,7 +219,7 @@ export default function TransactionDetails() {
       } else {
         const key_map =
           EXECUTION_RESOURCES_KEY_MAP[
-            key as keyof typeof EXECUTION_RESOURCES_KEY_MAP
+          key as keyof typeof EXECUTION_RESOURCES_KEY_MAP
           ];
         if (key_map) {
           setExecutionData((prev) => ({
@@ -606,10 +597,10 @@ export default function TransactionDetails() {
                 <p>
                   {TransactionReceipt?.actual_fee?.amount
                     ? formatNumber(
-                        Number(
-                          cairo.felt(TransactionReceipt?.actual_fee?.amount)
-                        )
+                      Number(
+                        cairo.felt(TransactionReceipt?.actual_fee?.amount)
                       )
+                    )
                     : 0}{" "}
                   {TransactionReceipt?.actual_fee?.unit}
                 </p>
@@ -693,57 +684,48 @@ export default function TransactionDetails() {
               </div>
             </div>
           </div>
-          <div className="border relative border-[#8E8E8E] flex flex-col gap-4 w-full overflow-y-auto max-h-[61.5rem]">
-            <div className="flex sticky top-0 bg-white flex-col sm:flex-row text-center px-4 pt-5 pb-4">
-              {DataTabs.map((tab, index) => (
-                <div
-                  key={index}
-                  style={{
-                    backgroundColor:
-                      selectedDataTab === tab ? "#8E8E8E" : "#fff",
-                    color: selectedDataTab === tab ? "#fff" : "#000",
-                  }}
-                  onClick={() => setSelectedDataTab(tab)}
-                  className="w-full border border-b-4 p-2 border-[#8E8E8E] uppercase cursor-pointer"
-                >
-                  <p>{tab}</p>
-                </div>
-              ))}
-            </div>
 
-            <div className=" h-full pb-2 w-full">
-              {selectedDataTab === "Calldata" ? (
-                <CalldataDisplay calldata={callData} />
-              ) : selectedDataTab === "Events" ? (
-                <DataTable
-                  table={eventsTable}
-                  pagination={eventsPagination}
-                  setPagination={setEventsPagination}
-                />
-              ) : selectedDataTab === "Signature" ? (
-                <ul className="w-full flex flex-col gap-2 p-4">
-                  {TransactionDetails?.signature.map((signature, index) => (
-                    <li
-                      key={index}
-                      className="text-sm py-2 border-b border-[#8E8E8E]"
-                    >
-                      {signature}
-                    </li>
-                  ))}
-                </ul>
-              ) : selectedDataTab === "Storage Diffs" ? (
-                <DataTable
-                  table={storageDiffTable}
-                  pagination={storageDiffPagination}
-                  setPagination={setStorageDiffPagination}
-                />
-              ) : (
-                <div className="p-4 text-center">
-                  <p className="text-black">No data found</p>
-                </div>
-              )}
-            </div>
-          </div>
+          <Tabs defaultValue="calldata" className="border relative border-[#8E8E8E] flex flex-col w-full overflow-y-auto max-h-[61.5rem]">
+            <TabsList>
+              <TabsTrigger value="calldata">Calldata</TabsTrigger>
+              <TabsTrigger value="events">Events</TabsTrigger>
+              <TabsTrigger value="signature">Signature</TabsTrigger>
+              <TabsTrigger value="storage-diffs">Storage Diffs</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="calldata" className="p-4">
+              <CalldataDisplay calldata={callData} />
+            </TabsContent>
+
+            <TabsContent value="events" className="p-4">
+              <DataTable
+                table={eventsTable}
+                pagination={eventsPagination}
+                setPagination={setEventsPagination}
+              />
+            </TabsContent>
+
+            <TabsContent value="signature" className="p-4">
+              <ul className="w-full flex flex-col gap-2 p-4">
+                {TransactionDetails?.signature.map((signature, index) => (
+                  <li
+                    key={index}
+                    className="text-sm py-2 border-b border-[#8E8E8E]"
+                  >
+                    {signature}
+                  </li>
+                ))}
+              </ul>
+            </TabsContent>
+
+            <TabsContent value="storage-diffs" className="p-4">
+              <DataTable
+                table={storageDiffTable}
+                pagination={storageDiffPagination}
+                setPagination={setStorageDiffPagination}
+              />
+            </TabsContent>
+          </Tabs>
         </div>
       </div>
     </div>
diff --git a/src/shared/components/dataTable/index.tsx b/src/shared/components/dataTable/index.tsx
index c599882..4a06261 100644
--- a/src/shared/components/dataTable/index.tsx
+++ b/src/shared/components/dataTable/index.tsx
@@ -81,11 +81,12 @@ interface DataTableProps<T> {
   setPagination: React.Dispatch<
     React.SetStateAction<{ pageIndex: number; pageSize: number }>
   >;
+  className?: string;
 }
 
-function DataTable<T>({ table, pagination, setPagination }: DataTableProps<T>) {
+function DataTable<T>({ table, pagination, setPagination, className }: DataTableProps<T>) {
   return (
-    <div className="flex relative flex-col max-w-screen justify-between h-full sm:w-full w-screen overflow-x-auto">
+    <div className={cn("flex relative flex-col max-w-screen justify-between h-full sm:w-full w-screen overflow-x-auto", className)}>
       <Table>
         <TableHeader>
           {table.getHeaderGroups().map((headerGroup) => (
@@ -94,9 +95,9 @@ function DataTable<T>({ table, pagination, setPagination }: DataTableProps<T>) {
                 return header.isPlaceholder
                   ? null
                   : flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    );
+                    header.column.columnDef.header,
+                    header.getContext()
+                  );
               })}
             </TableRow>
           ))}
diff --git a/src/shared/components/tab.tsx b/src/shared/components/tab.tsx
index bcb392d..95d9299 100644
--- a/src/shared/components/tab.tsx
+++ b/src/shared/components/tab.tsx
@@ -23,11 +23,11 @@ const tabListVariants = cva(
 );
 
 const tabsTriggerVariants = cva(
-  "w-full border border-b-4 bg-[#fff] uppercase cursor-pointer disabled:pointer-events-none disabled:opacity-50",
+  "border border-b-4 bg-[#fff] uppercase cursor-pointer disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        primary: "border-[#8E8E8E] text-[#000] data-[state=active]:bg-[#8E8E8E] data-[state=active]:text-[#fff]",
+        primary: "flex-1 border-[#8E8E8E] text-[#000] data-[state=active]:bg-[#8E8E8E] data-[state=active]:text-[#fff]",
         secondary: "data-[state=active]:font-bold data-[state=active]:bg-[#f3f3f3]",
       },
       size: {