Renamed Main to Transactions, because it does make more sense indeed

src/components/Transactions.tsx

@@ -1,6 +1,6 @@
 import { TableContainer, Paper, Table, TableHead, TableRow, TableCell, TableBody } from "@mui/material";
 import React, { useEffect } from "react";
-import "@scss/main.scss";
+import "@scss/transactions.scss";
 
 function createData(
     d: string,
@@ -26,7 +26,7 @@ const rows = [
 ];
 
 
-export default function Main() {
+export default function Transactions() {
     return (
         <div id="tablePage">
             <header>

src/components/index.tsx

@@ -2,8 +2,8 @@ import Login from "@components/Login";
 import ForgotPassword from "@components/ForgotPassword";
 import Reset from "@components/Reset";
 import ErrorPage from "@components/ErrorPage";
-import Main from "@components/Main";
+import Transactions from "@components/Transactions";
 import MetadataSetter from "@components/lib/MetadataSetter";
 import AuthComponent from "@components/lib/AuthComponent";
 
-export { Login, ForgotPassword, Reset, ErrorPage, Main, MetadataSetter, AuthComponent };
+export { Login, ForgotPassword, Reset, ErrorPage, Transactions, MetadataSetter, AuthComponent };

src/index.tsx

@@ -1,15 +1,15 @@
 import * as React from "react";
 import { createRoot } from "react-dom/client";
 import { createBrowserRouter, Navigate, RouterProvider } from "react-router-dom";
-import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Main, AuthComponent } from "@components";
+import { MetadataSetter, ErrorPage, Login, ForgotPassword, Reset, Transactions, AuthComponent } from "@components";
 
 
 const router = createBrowserRouter([
   {
     path: "/",
     element:
-        <MetadataSetter title="Main" bodyClass="main" needsAuth>
+        <MetadataSetter title="Transactions" bodyClass="transactions" needsAuth>
-          <Main />
+          <Transactions />
         </MetadataSetter>,
     errorElement: 
     <MetadataSetter title="Error" bodyClass="error">

src/scss/main.scss

@@ -1,40 +0,0 @@
-@use "variables.module.scss";
-@use "style.scss";
-
-div#tablePage {
-    color: black;
-    display: grid;
-    grid-template-columns: 1fr 6fr;
-    grid-template-rows: 1fr 10fr 1fr;
-
-    width: 100vw;
-    height: 100vh;
-
-    header,
-    footer {
-        grid-column: 1 / span 2;
-    }
-
-    header {
-        grid-row: 1;
-        background: lightcyan;
-    }
-
-    footer {
-        grid-row: 3;
-        background: lightcoral;
-    }
-
-    main {
-        background-color: lightyellow;
-        grid-row: 2;
-        grid-column: 2;
-    }
-
-
-    aside {
-        grid-column: 1;
-        grid-row: 2;
-        background: lightgreen;
-    }
-}

src/scss/transactions.scss

@@ -0,0 +1,40 @@
+@use "variables.module.scss";
+@use "style.scss";
+
+body.transactions {
+    div#tablePage {
+        color: black;
+        display: grid;
+        grid-template-columns: 1fr 6fr;
+        grid-template-rows: 1fr 10fr 1fr;
+
+        width: 100vw;
+        height: 100vh;
+
+        header,
+        footer {
+            grid-column: 1 / span 2;
+        }
+
+        header {
+            grid-row: 1;
+            background: lightcyan;
+        }
+
+        footer {
+            grid-row: 3;
+            background: lightcoral;
+        }
+
+        main {
+            grid-row: 2;
+            grid-column: 2;
+        }
+
+        aside {
+            grid-column: 1;
+            grid-row: 2;
+            background: lightgreen;
+        }
+    }
+}