From 2143bb92e46fcf6c8f363085b63c327e3fa4de49 Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Mon, 9 Sep 2024 11:11:25 +0200
Subject: [PATCH 01/13] Split Tables

---
 src/ui/src/components/Dashboard/index.tsx | 10 +++--
 src/ui/src/components/Dashboard/style.ts  | 52 ++++++++++++++---------
 2 files changed, 39 insertions(+), 23 deletions(-)

diff --git a/src/ui/src/components/Dashboard/index.tsx b/src/ui/src/components/Dashboard/index.tsx
index 7ed5907b..46e78e68 100644
--- a/src/ui/src/components/Dashboard/index.tsx
+++ b/src/ui/src/components/Dashboard/index.tsx
@@ -33,15 +33,19 @@ const Dashboard = () => {
 
     return (
         <Grid container className={classes.dashboard}>
-            <Grid item xs={12} md={6} className={classes.supplyTablePadding}>
+            <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
                 <Typography className={classes.tableTitle}> Supplying </Typography>
                 <SuppliedTokenTable tableData={suppliedMarkets}/>
             </Grid>
-            <Grid item xs={12} md={6} className={classes.borrowTablePadding}>
+            <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
                 <Typography className={classes.tableTitle}> Borrowing </Typography>
                 <BorrowedTokenTable tableData={borrowedMarkets} />
             </Grid>
-            <Grid item xs={12} >
+            <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
+                <Typography className={classes.tableTitle}> Markets </Typography>
+                <AllMarketTokenTable tableData={allMarkets} />
+            </Grid>
+            <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
                 <Typography className={classes.tableTitle}> Markets </Typography>
                 <AllMarketTokenTable tableData={allMarkets} />
             </Grid>
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 54398302..22a3c600 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -171,42 +171,54 @@ export const useStyles = makeStyles({
     fontWeight: "400",
     fontSize: "0.875rem",
   },
-  dashboard: {
-    background: "#F9FAFC",
-    padding: "0px 6.25rem 10.125rem",
-    "@media(max-width: 1024px)": {
-      padding: "0px 4rem 10.125rem",
-    },
-    "@media(max-width: 900px)": {
-      padding: "0px 2rem 10.125rem",
-    },
-    "@media(max-width: 768px)": {
-      padding: "0px 4rem 10.125rem",
-    },
-    "@media(max-width: 501px)": {
-      padding: "0px 1rem 10.125rem",
+    compositionOne: {
     },
+  dashboard: {
+        paddingLeft: '6.25rem',
+        paddingRight: '6.25rem',
+        '@media(max-width: 1024px)': {
+            paddingLeft: '4rem',
+            paddingRight: '4rem',
+        },
+        '@media(max-width: 900px)': {
+            paddingLeft: '2rem',
+            paddingRight: '2rem',
+        },
+        '@media(max-width: 768px)': {
+            paddingLeft: '4rem',
+            paddingRight: '4rem',
+        },
+        '@media(max-width: 501px)': {
+            paddingLeft: '1rem',
+            paddingRight: '1rem',
+        },
   },
   borrowTablePadding: {
+    "@media(max-width: 600px)": {
+      paddingRight: "1.975rem",
+    },
     "@media(min-width: 900px)": {
-      paddingLeft: "0.875rem",
+      paddingRight: "0.975rem",
     },
     "@media(min-width: 1024px)": {
-      paddingLeft: "0.9375rem",
+      paddingRight: "0.9375rem",
     },
     "@media(min-width: 1200px)": {
-      paddingLeft: "1.875rem",
+      paddingRight: "0.875rem",
     },
   },
   supplyTablePadding: {
+    "@media(min-width: 600px)": {
+      paddingRight: "1rem",
+    },
     "@media(min-width: 900px)": {
-      paddingRight: "0.875rem",
+      paddingRight: "2rem",
     },
     "@media(min-width: 1024px)": {
-      paddingRight: "0.9375rem",
+      paddingRight: "2rem",
     },
     "@media(min-width: 1200px)": {
-      paddingRight: "1.875rem",
+      paddingRight: "3rem",
     },
   },
   tableTitle: {

From 2e96cbb6ce0d493f9e75b9bd54a97d0b903901db Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Mon, 9 Sep 2024 11:58:18 +0200
Subject: [PATCH 02/13] Add separate tables for borrow & supply markets

---
 ...enTable.tsx => BorrowMarketTokenTable.tsx} |   4 +-
 .../Dashboard/SupplyMarketTokenTable.tsx      | 231 ++++++++++++++++++
 src/ui/src/components/Dashboard/index.tsx     |  11 +-
 3 files changed, 239 insertions(+), 7 deletions(-)
 rename src/ui/src/components/Dashboard/{AllMarketTokenTable.tsx => BorrowMarketTokenTable.tsx} (99%)
 create mode 100644 src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx

diff --git a/src/ui/src/components/Dashboard/AllMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
similarity index 99%
rename from src/ui/src/components/Dashboard/AllMarketTokenTable.tsx
rename to src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 850785ce..98829396 100644
--- a/src/ui/src/components/Dashboard/AllMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -23,7 +23,7 @@ import TableSkeleton from "../Skeleton";
 
 import { useStyles } from "./style";
 
-const AllMarketTokenTable = (props) => {
+const BorrowMarketTokenTable = (props) => {
   const classes = useStyles();
   const { tableData } = props;
   const { address } = useSelector((state: any) => state.addWallet.account);
@@ -228,4 +228,4 @@ const AllMarketTokenTable = (props) => {
   );
 };
 
-export default AllMarketTokenTable;
+export default BorrowMarketTokenTable;
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
new file mode 100644
index 00000000..18f047f5
--- /dev/null
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -0,0 +1,231 @@
+/* eslint-disable no-nested-ternary */
+/* eslint-disable import/extensions */
+/* eslint-disable import/no-unresolved */
+// eslint-disable-next-line no-use-before-define
+import React, { useState } from "react";
+import { useSelector } from "react-redux";
+
+import { decimals } from "tezoslendingplatformjs";
+import BigNumber from "bignumber.js";
+
+import Table from "@mui/material/Table";
+import TableBody from "@mui/material/TableBody";
+import TableCell from "@mui/material/TableCell";
+import TableContainer from "@mui/material/TableContainer";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import { Typography } from "@mui/material";
+
+import { decimalify, nFormatter, roundValue } from "../../util";
+
+import AllMarketModal from "../AllMarketModal";
+import TableSkeleton from "../Skeleton";
+
+import { useStyles } from "./style";
+
+const SupplyMarketTokenTable = (props) => {
+  const classes = useStyles();
+  const { tableData } = props;
+  const { address } = useSelector((state: any) => state.addWallet.account);
+
+  const [tokenDetails, setTokenDetails] = useState();
+  const [openMktModal, setMktModal] = useState(false);
+
+  const closeModal = () => {
+    setMktModal(false);
+  };
+
+  const handleClickMktModal = (item) => {
+    setTokenDetails(item);
+    setMktModal(true);
+  };
+
+  return (
+    <TableContainer className={`${classes.root} ${classes.tableCon}`}>
+      {tokenDetails && (
+        <AllMarketModal
+          open={openMktModal}
+          close={closeModal}
+          tokenDetails={tokenDetails}
+        />
+      )}
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell> Token </TableCell>
+            <TableCell align="center"> Market Size </TableCell>
+            <TableCell align="center"> Total Borrowed </TableCell>
+            <TableCell align="center"> Supply APY </TableCell>
+            <TableCell align="center"> Borrow APY </TableCell>
+            <TableCell align="center"> Wallet </TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
+          {tableData?.map((data) => (
+            <React.Fragment key={data.title}>
+              {(address && data.walletBalance) ||
+              (!address && data.marketSize) ? (
+                <TableRow
+                  key={data.title}
+                  onClick={() => handleClickMktModal(data)}
+                >
+                  <TableCell>
+                    <div>
+                      <div className={classes.token}>
+                        <img
+                          src={data.logo}
+                          alt={`${data.title}-Icon`}
+                          className={classes.img}
+                        />
+
+                        <div className={classes.tokenTitle}>
+                          <Typography className={classes.tokenName}>
+                            {" "}
+                            {data.name}{" "}
+                          </Typography>
+                          <Typography className={classes.faintFont}>
+                            {" "}
+                            {data.title}{" "}
+                          </Typography>
+                        </div>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell align="center">
+                    <span className={classes.clearFont}>
+                      {data.marketSize > 0
+                          ? decimalify(
+                                data.marketSize.toString(),
+                                decimals[data.title],
+                                decimals[data.title],
+                            ) < 0.01
+                              ? '>0.00'
+                              : nFormatter(
+                                    decimalify(
+                                        data.marketSize.toString(),
+                                        decimals[data.title],
+                                        decimals[data.title],
+                                    ),
+                                )
+                          : '0'}{" "}
+                      {data.title}
+                    </span>{" "}
+                    <br />
+                    <span className={classes.faintFont}>
+                      $
+                      {data.marketSize > 0
+                        ? nFormatter(
+                            decimalify(
+                              (data.marketSize * data.usdPrice).toString(),
+                              decimals[data.title],
+                              decimals[data.title],
+                            ),
+                          )
+                        : "0.00"}
+                    </span>
+                  </TableCell>
+                  <TableCell align="center">
+                    <span className={classes.clearFont}>
+                      {data.totalBorrowed > 0
+                            ? decimalify(
+                                  data.totalBorrowed.toString(),
+                                  decimals[data.title],
+                                  decimals[data.title],
+                              ) < 0.01
+                                ? '>0.00'
+                                : nFormatter(
+                                      decimalify(
+                                          data.totalBorrowed.toString(),
+                                          decimals[data.title],
+                                          decimals[data.title],
+                                      ),
+                                  )
+                            : '0'}{" "}
+                      {data.title}
+                    </span>{" "}
+                    <br />
+                    <span className={classes.faintFont}>
+                      $
+                      {data.totalBorrowed > 0
+                        ? nFormatter(
+                            decimalify(
+                              (data.totalBorrowed * data.usdPrice).toString(),
+                              decimals[data.title],
+                              decimals[data.title],
+                            ),
+                          )
+                        : "0.00"}
+                    </span>
+                  </TableCell>
+                  <TableCell align="center" className={classes.clearFont}>
+                    <span>
+                      {data.supplyRate > 0
+                        ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
+                          new BigNumber(data.supplyRate).gt(
+                            new BigNumber(10000000000000000),
+                          )
+                          ? roundValue(decimalify(data.supplyRate, 18))
+                          : "<0.01"
+                        : "0"}
+                      %
+                    </span>
+                  </TableCell>
+                  <TableCell align="center" className={classes.clearFont}>
+                    <span>
+                      {data.borrowRate > 0
+                        ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
+                          new BigNumber(data.borrowRate).gt(
+                            new BigNumber(10000000000000000),
+                          )
+                          ? roundValue(decimalify(data.borrowRate, 18))
+                          : "<0.01"
+                        : "0"}
+                      %
+                    </span>
+                  </TableCell>
+                  <TableCell align="center">
+                    <span className={classes.clearFont}>
+                      {data.walletBalance > 0
+                            ? decimalify(
+                                  data.walletBalance.toString(),
+                                  decimals[data.title],
+                                  decimals[data.title],
+                              ) < 0.01
+                                ? '>0.00'
+                                : nFormatter(
+                                      decimalify(
+                                          data.walletBalance.toString(),
+                                          decimals[data.title],
+                                          decimals[data.title],
+                                      ),
+                                  )
+                            : '0'}{" "}
+                      {data.title}
+                    </span>{" "}
+                    <br />
+                    <span className={classes.faintFont}>
+                      $
+                      {data.walletBalance > 0
+                        ? nFormatter(
+                            decimalify(
+                              (data.walletBalance * data.usdPrice).toString(),
+                              decimals[data.title],
+                              decimals[data.title],
+                            ),
+                          )
+                        : "0.00"}
+                    </span>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                <TableSkeleton index={data.title} cell={6} />
+              )}
+            </React.Fragment>
+          ))}
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+export default SupplyMarketTokenTable;
diff --git a/src/ui/src/components/Dashboard/index.tsx b/src/ui/src/components/Dashboard/index.tsx
index 46e78e68..6bf7db67 100644
--- a/src/ui/src/components/Dashboard/index.tsx
+++ b/src/ui/src/components/Dashboard/index.tsx
@@ -9,7 +9,8 @@ import { Typography } from '@mui/material';
 
 import BorrowedTokenTable from './BorrowedTokenTable';
 import SuppliedTokenTable from './SuppliedTokenTable';
-import AllMarketTokenTable from './AllMarketTokenTable';
+import BorrowMarketTokenTable from './BorrowMarketTokenTable';
+import SupplyMarketTokenTable from './SupplyMarketTokenTable';
 
 import { borrowedMarketAction, allMarketAction, suppliedMarketAction } from '../../reduxContent/market/actions';
 
@@ -42,12 +43,12 @@ const Dashboard = () => {
                 <BorrowedTokenTable tableData={borrowedMarkets} />
             </Grid>
             <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
-                <Typography className={classes.tableTitle}> Markets </Typography>
-                <AllMarketTokenTable tableData={allMarkets} />
+                <Typography className={classes.tableTitle}> Assets to Supply </Typography>
+                <SupplyMarketTokenTable tableData={allMarkets} />
             </Grid>
             <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
-                <Typography className={classes.tableTitle}> Markets </Typography>
-                <AllMarketTokenTable tableData={allMarkets} />
+                <Typography className={classes.tableTitle}> Assets to Borrow </Typography>
+                <BorrowMarketTokenTable tableData={allMarkets} />
             </Grid>
         </Grid>
     );

From eef8375a5192d6bb4a6bc621a27f30cc3255df4e Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Mon, 9 Sep 2024 12:02:29 +0200
Subject: [PATCH 03/13] Supply table

---
 .../Dashboard/SupplyMarketTokenTable.tsx      | 94 ++-----------------
 1 file changed, 6 insertions(+), 88 deletions(-)

diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index 18f047f5..ab75e19f 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -53,11 +53,8 @@ const SupplyMarketTokenTable = (props) => {
         <TableHead>
           <TableRow>
             <TableCell> Token </TableCell>
-            <TableCell align="center"> Market Size </TableCell>
-            <TableCell align="center"> Total Borrowed </TableCell>
-            <TableCell align="center"> Supply APY </TableCell>
-            <TableCell align="center"> Borrow APY </TableCell>
             <TableCell align="center"> Wallet </TableCell>
+            <TableCell align="center"> Supply APY </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -93,49 +90,16 @@ const SupplyMarketTokenTable = (props) => {
                   </TableCell>
                   <TableCell align="center">
                     <span className={classes.clearFont}>
-                      {data.marketSize > 0
-                          ? decimalify(
-                                data.marketSize.toString(),
-                                decimals[data.title],
-                                decimals[data.title],
-                            ) < 0.01
-                              ? '>0.00'
-                              : nFormatter(
-                                    decimalify(
-                                        data.marketSize.toString(),
-                                        decimals[data.title],
-                                        decimals[data.title],
-                                    ),
-                                )
-                          : '0'}{" "}
-                      {data.title}
-                    </span>{" "}
-                    <br />
-                    <span className={classes.faintFont}>
-                      $
-                      {data.marketSize > 0
-                        ? nFormatter(
-                            decimalify(
-                              (data.marketSize * data.usdPrice).toString(),
-                              decimals[data.title],
-                              decimals[data.title],
-                            ),
-                          )
-                        : "0.00"}
-                    </span>
-                  </TableCell>
-                  <TableCell align="center">
-                    <span className={classes.clearFont}>
-                      {data.totalBorrowed > 0
+                      {data.walletBalance > 0
                             ? decimalify(
-                                  data.totalBorrowed.toString(),
+                                  data.walletBalance.toString(),
                                   decimals[data.title],
                                   decimals[data.title],
                               ) < 0.01
                                 ? '>0.00'
                                 : nFormatter(
                                       decimalify(
-                                          data.totalBorrowed.toString(),
+                                          data.walletBalance.toString(),
                                           decimals[data.title],
                                           decimals[data.title],
                                       ),
@@ -146,10 +110,10 @@ const SupplyMarketTokenTable = (props) => {
                     <br />
                     <span className={classes.faintFont}>
                       $
-                      {data.totalBorrowed > 0
+                      {data.walletBalance > 0
                         ? nFormatter(
                             decimalify(
-                              (data.totalBorrowed * data.usdPrice).toString(),
+                              (data.walletBalance * data.usdPrice).toString(),
                               decimals[data.title],
                               decimals[data.title],
                             ),
@@ -170,52 +134,6 @@ const SupplyMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-                  <TableCell align="center" className={classes.clearFont}>
-                    <span>
-                      {data.borrowRate > 0
-                        ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
-                          new BigNumber(data.borrowRate).gt(
-                            new BigNumber(10000000000000000),
-                          )
-                          ? roundValue(decimalify(data.borrowRate, 18))
-                          : "<0.01"
-                        : "0"}
-                      %
-                    </span>
-                  </TableCell>
-                  <TableCell align="center">
-                    <span className={classes.clearFont}>
-                      {data.walletBalance > 0
-                            ? decimalify(
-                                  data.walletBalance.toString(),
-                                  decimals[data.title],
-                                  decimals[data.title],
-                              ) < 0.01
-                                ? '>0.00'
-                                : nFormatter(
-                                      decimalify(
-                                          data.walletBalance.toString(),
-                                          decimals[data.title],
-                                          decimals[data.title],
-                                      ),
-                                  )
-                            : '0'}{" "}
-                      {data.title}
-                    </span>{" "}
-                    <br />
-                    <span className={classes.faintFont}>
-                      $
-                      {data.walletBalance > 0
-                        ? nFormatter(
-                            decimalify(
-                              (data.walletBalance * data.usdPrice).toString(),
-                              decimals[data.title],
-                              decimals[data.title],
-                            ),
-                          )
-                        : "0.00"}
-                    </span>
-                  </TableCell>
                 </TableRow>
               ) : (
                 <TableSkeleton index={data.title} cell={6} />

From ef0371b3fdd57069fc8af949c9eb11fcc608124a Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Wed, 11 Sep 2024 11:31:44 +0200
Subject: [PATCH 04/13] Borrow Market Table data columns

---
 .../Dashboard/BorrowMarketTokenTable.tsx      | 88 +------------------
 1 file changed, 3 insertions(+), 85 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 98829396..32e589cc 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -53,11 +53,8 @@ const BorrowMarketTokenTable = (props) => {
         <TableHead>
           <TableRow>
             <TableCell> Token </TableCell>
-            <TableCell align="center"> Market Size </TableCell>
-            <TableCell align="center"> Total Borrowed </TableCell>
-            <TableCell align="center"> Supply APY </TableCell>
+            <TableCell align="center"> Available </TableCell>
             <TableCell align="center"> Borrow APY </TableCell>
-            <TableCell align="center"> Wallet </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -102,7 +99,7 @@ const BorrowMarketTokenTable = (props) => {
                               ? '>0.00'
                               : nFormatter(
                                     decimalify(
-                                        data.marketSize.toString(),
+                                        (data.marketSize - data.totalBorrowed).toString(),
                                         decimals[data.title],
                                         decimals[data.title],
                                     ),
@@ -116,7 +113,7 @@ const BorrowMarketTokenTable = (props) => {
                       {data.marketSize > 0
                         ? nFormatter(
                             decimalify(
-                              (data.marketSize * data.usdPrice).toString(),
+                              ((data.marketSize - data.totalBorrowed) * data.usdPrice).toString(),
                               decimals[data.title],
                               decimals[data.title],
                             ),
@@ -124,52 +121,6 @@ const BorrowMarketTokenTable = (props) => {
                         : "0.00"}
                     </span>
                   </TableCell>
-                  <TableCell align="center">
-                    <span className={classes.clearFont}>
-                      {data.totalBorrowed > 0
-                            ? decimalify(
-                                  data.totalBorrowed.toString(),
-                                  decimals[data.title],
-                                  decimals[data.title],
-                              ) < 0.01
-                                ? '>0.00'
-                                : nFormatter(
-                                      decimalify(
-                                          data.totalBorrowed.toString(),
-                                          decimals[data.title],
-                                          decimals[data.title],
-                                      ),
-                                  )
-                            : '0'}{" "}
-                      {data.title}
-                    </span>{" "}
-                    <br />
-                    <span className={classes.faintFont}>
-                      $
-                      {data.totalBorrowed > 0
-                        ? nFormatter(
-                            decimalify(
-                              (data.totalBorrowed * data.usdPrice).toString(),
-                              decimals[data.title],
-                              decimals[data.title],
-                            ),
-                          )
-                        : "0.00"}
-                    </span>
-                  </TableCell>
-                  <TableCell align="center" className={classes.clearFont}>
-                    <span>
-                      {data.supplyRate > 0
-                        ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
-                          new BigNumber(data.supplyRate).gt(
-                            new BigNumber(10000000000000000),
-                          )
-                          ? roundValue(decimalify(data.supplyRate, 18))
-                          : "<0.01"
-                        : "0"}
-                      %
-                    </span>
-                  </TableCell>
                   <TableCell align="center" className={classes.clearFont}>
                     <span>
                       {data.borrowRate > 0
@@ -183,39 +134,6 @@ const BorrowMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-                  <TableCell align="center">
-                    <span className={classes.clearFont}>
-                      {data.walletBalance > 0
-                            ? decimalify(
-                                  data.walletBalance.toString(),
-                                  decimals[data.title],
-                                  decimals[data.title],
-                              ) < 0.01
-                                ? '>0.00'
-                                : nFormatter(
-                                      decimalify(
-                                          data.walletBalance.toString(),
-                                          decimals[data.title],
-                                          decimals[data.title],
-                                      ),
-                                  )
-                            : '0'}{" "}
-                      {data.title}
-                    </span>{" "}
-                    <br />
-                    <span className={classes.faintFont}>
-                      $
-                      {data.walletBalance > 0
-                        ? nFormatter(
-                            decimalify(
-                              (data.walletBalance * data.usdPrice).toString(),
-                              decimals[data.title],
-                              decimals[data.title],
-                            ),
-                          )
-                        : "0.00"}
-                    </span>
-                  </TableCell>
                 </TableRow>
               ) : (
                 <TableSkeleton index={data.title} cell={6} />

From 446aeb4f73ee327108e03a6e0d098d57ad27374a Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Wed, 11 Sep 2024 12:18:14 +0200
Subject: [PATCH 05/13] Buttons WIP

---
 .../Dashboard/BorrowMarketTokenTable.tsx      | 21 ++++++++++++++++++-
 .../Dashboard/SupplyMarketTokenTable.tsx      | 14 ++++++++++++-
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 32e589cc..37889d9c 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -14,7 +14,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { Typography } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 
 import { decimalify, nFormatter, roundValue } from "../../util";
 
@@ -134,6 +134,25 @@ const BorrowMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
+                    <TableCell align="center" className={classes.clearFont}>
+                        <span>
+                            <Button
+                                variant="contained"
+                                size="small"
+                                sx={ { marginRight: "10%" } }
+                                onClick={() => handleClickMktModal(data)}
+                            >
+                                Borrow
+                            </Button>
+                            <Button
+                                variant="contained"
+                                size="small"
+                                onClick={() => handleClickMktModal(data)}
+                            >
+                                Details
+                            </Button>
+                        </span>
+                    </TableCell>
                 </TableRow>
               ) : (
                 <TableSkeleton index={data.title} cell={6} />
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index ab75e19f..2ae0c4f8 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -14,7 +14,7 @@ import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
 import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
-import { Typography } from "@mui/material";
+import { Button, Typography } from "@mui/material";
 
 import { decimalify, nFormatter, roundValue } from "../../util";
 
@@ -134,6 +134,18 @@ const SupplyMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
+                    <TableCell align="center" className={classes.clearFont}>
+                        <span>
+                            <Button
+                                variant="contained"
+                                size="medium"
+                                sx={ { width: "100%" } }
+                                onClick={() => handleClickMktModal(data)}
+                            >
+                                Supply
+                            </Button>
+                        </span>
+                    </TableCell>
                 </TableRow>
               ) : (
                 <TableSkeleton index={data.title} cell={6} />

From 5633113092b699e5942b148e5df259ff076a71e7 Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Fri, 20 Sep 2024 11:37:30 +0200
Subject: [PATCH 06/13] Switch WIP

---
 .../Dashboard/BorrowMarketTokenTable.tsx      |  2 +-
 .../Dashboard/BorrowedTokenTable.tsx          |  6 +-
 .../Dashboard/SuppliedTokenTable.tsx          |  6 +-
 .../Dashboard/SupplyMarketTokenTable.tsx      | 12 +--
 src/ui/src/components/Dashboard/style.ts      | 76 +++++++++++-------
 src/ui/src/components/Switch/index.js         | 78 +++++++++++++++++--
 6 files changed, 133 insertions(+), 47 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 37889d9c..168e5ea0 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -134,7 +134,7 @@ const BorrowMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-                    <TableCell align="center" className={classes.clearFont}>
+		  <TableCell align="center" sx={{padding: "0px",width: "150%"}}>
                         <span>
                             <Button
                                 variant="contained"
diff --git a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
index 45955d39..bf62ad87 100644
--- a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
@@ -97,7 +97,7 @@ const BorrowedTokenTable = (props) => {
                     {borrowedData &&
                         borrowedData.map((data) => (
                             <TableRow key={data.title} onClick={() => handleClickMktModal(data)}>
-                                <TableCell>
+				<TableCell className={classes.firstCell}>
                                     <div>
                                         <div className={classes.token}>
                                             <img src={data.logo} alt={`${data.title}-Icon`} className={classes.img} />
@@ -110,7 +110,7 @@ const BorrowedTokenTable = (props) => {
                                     </div>
                                 </TableCell>
                                 <TableCell align="center" className={classes.clearFont}>
-                                    <span>
+				    <span className={classes.clearFont}>
                                         {data.rate > 0
                                             ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
                                               new BigNumber(data.rate).gt(new BigNumber(10000000000000000))
@@ -159,7 +159,7 @@ const BorrowedTokenTable = (props) => {
                                         )}
                                     </span>
                                 </TableCell>
-                                <TableCell align="center">
+				  <TableCell align="center" className={classes.fourthCell}>
                                     <span className={classes.clearFont}>{checkLimitUsed(data)}%</span>
                                 </TableCell>
                             </TableRow>
diff --git a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
index 6816aeb8..e26d3983 100644
--- a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
@@ -89,7 +89,7 @@ const SuppliedTokenTable = (props) => {
                         <TableCell> Token </TableCell>
                         <TableCell align="center"> APY </TableCell>
                         <TableCell align="center"> Balance </TableCell>
-                        <TableCell align="right" className={classes.collateralPadding}>
+                        <TableCell align="center" className={classes.collateralPadding}>
                             Collateral{' '}
                             <img src={questionCircleIcon} alt={'questionIcon'} className={classes.questionCircleIcon} />
                         </TableCell>
@@ -114,7 +114,7 @@ const SuppliedTokenTable = (props) => {
                     {suppliedData &&
                         suppliedData.map((data) => (
                             <TableRow key={data.title} onClick={(event) => handleClickMktModal(data, event)}>
-                                <TableCell>
+				<TableCell className={classes.firstCell}>
                                     <div>
                                         <div className={classes.token}>
                                             <img src={data.fLogo} alt={`${data.title}-Icon`} className={classes.img} />
@@ -178,7 +178,7 @@ const SuppliedTokenTable = (props) => {
                                             : '0.00'}
                                     </span>
                                 </TableCell>
-                                <TableCell align="right" className={classes.switchPadding}>
+				  <TableCell align="center" className={classes.switchPadding}>
                                     <Switch data={data} />
                                 </TableCell>
                             </TableRow>
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index 2ae0c4f8..94a35d96 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -41,7 +41,7 @@ const SupplyMarketTokenTable = (props) => {
   };
 
   return (
-    <TableContainer className={`${classes.root} ${classes.tableCon}`}>
+    <TableContainer  className={`${classes.root} ${classes.tableCon}`}>
       {tokenDetails && (
         <AllMarketModal
           open={openMktModal}
@@ -49,7 +49,7 @@ const SupplyMarketTokenTable = (props) => {
           tokenDetails={tokenDetails}
         />
       )}
-      <Table>
+      <Table size="medium" sx={{marginRight: "0px",}}>
         <TableHead>
           <TableRow>
             <TableCell> Token </TableCell>
@@ -66,7 +66,7 @@ const SupplyMarketTokenTable = (props) => {
                   key={data.title}
                   onClick={() => handleClickMktModal(data)}
                 >
-                  <TableCell>
+		<TableCell className={classes.firstCell}>
                     <div>
                       <div className={classes.token}>
                         <img
@@ -88,7 +88,7 @@ const SupplyMarketTokenTable = (props) => {
                       </div>
                     </div>
                   </TableCell>
-                  <TableCell align="center">
+		<TableCell align="center" className={classes.clearFont}>
                     <span className={classes.clearFont}>
                       {data.walletBalance > 0
                             ? decimalify(
@@ -134,12 +134,12 @@ const SupplyMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-                    <TableCell align="center" className={classes.clearFont}>
+		  <TableCell align="" className={classes.fourthCell}>
                         <span>
                             <Button
                                 variant="contained"
                                 size="medium"
-                                sx={ { width: "100%" } }
+				className={classes.supplyButton}
                                 onClick={() => handleClickMktModal(data)}
                             >
                                 Supply
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 22a3c600..5fc03903 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -3,6 +3,7 @@ import { makeStyles } from "@mui/styles";
 
 export const useStyles = makeStyles({
   root: {
+
     "& .MuiTypography-root": {
       "@media(max-width: 501px)": {
         fontSize: "0.75rem",
@@ -12,20 +13,24 @@ export const useStyles = makeStyles({
       },
     },
     "& .MuiTable-root": {
+	  flexDirection: "column",
+	  width: "100%",
+	  alignItems: "center",
+	  justifyContent: "center",
       "& .MuiTableRow-root": {
-        "& .MuiTableCell-root:first-of-type": {
-          padding: "1.25rem",
-          paddingLeft: ".75rem",
-          "@media(min-width: 1200px)": {
-            paddingLeft: "1.5rem",
-          },
-        },
         "& .MuiTableCell-root:last-of-type": {
-          paddingRight: ".75rem",
-          "@media(min-width: 1200px)": {
-            paddingRight: "2.75rem",
-          },
+		display: "block",
+		//marginLeft: "10px",
+		//marginRight: "-100px",
+		paddingLeft: "0px",
+		paddingRight: "0px",
+		//width : "150%",
+        },
+        "& .MuiTableCell-root:first-of-type": {
+          paddingLeft: "0.75rem",
         },
+          paddingRight: "0rem",
+          marginRight: "0rem",
       },
     },
     "& .MuiTableCell-root": {
@@ -89,6 +94,7 @@ export const useStyles = makeStyles({
     },
   },
   tableCon: {
+    padding: "0px",
     background: "#fff",
     borderBottom: "0",
     borderRadius: "1rem",
@@ -103,21 +109,24 @@ export const useStyles = makeStyles({
     marginBottom: "-3px",
   },
   img: {
-    width: "2.5rem",
-    height: "2.5rem",
-    marginRight: "12px",
-    "@media (min-width: 769px) and (max-width: 1024px)": {
-      width: "2.5rem",
-      height: "2.5rem",
-    },
-    "@media(max-width: 768px)": {
-      width: "2.5rem",
-      height: "2.5rem",
-    },
-    "@media(max-width: 501px)": {
-      width: "2.5rem",
-      height: "2.5rem",
-    },
+	  //width: "7%",
+	  //height: "7%",
+    	  // marginRight: "20%",
+	   width: "2.5rem",
+    	   height: "2.5rem",
+    	   marginRight: "1rem",
+    	   "@media (min-width: 769px) and (max-width: 1024px)": {
+    	     width: "2.5rem",
+    	     height: "2.5rem",
+    	   },
+    	   "@media(max-width: 768px)": {
+    	     width: "2.5rem",
+    	     height: "2.5rem",
+    	   },
+    	   "@media(max-width: 501px)": {
+    	     width: "2.5rem",
+    	     height: "2.5rem",
+    	   },
   },
   tokenSymbol: {
     display: "inline",
@@ -140,6 +149,7 @@ export const useStyles = makeStyles({
     alignItems: "center",
     alignContent: "center",
     alignText: "center",
+    padding: "0px",
   },
   tokenTitle: {
     display: "flex",
@@ -221,6 +231,20 @@ export const useStyles = makeStyles({
       paddingRight: "3rem",
     },
   },
+   firstCell: {
+     width: "10%",
+   },
+   secondCell: {
+   },
+   thirdCell: {
+   },
+   fourthCell: {
+	
+   },
+   supplyButton: {
+	   left: "2rem",
+	   width: "100%",
+   },
   tableTitle: {
     color: "#000",
     opacity: "0.87",
diff --git a/src/ui/src/components/Switch/index.js b/src/ui/src/components/Switch/index.js
index f7d9185f..5f94afa3 100644
--- a/src/ui/src/components/Switch/index.js
+++ b/src/ui/src/components/Switch/index.js
@@ -3,7 +3,56 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { useSwitch } from '@mui/core/SwitchUnstyled';
+import  MuiSwitch from '@mui/material/Switch';
 
+const CustomSwitch = styled((props) => (
+  <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+))(({ theme }) => ({
+  width: 42,
+  height: 26,
+  padding: 0,
+  '& .MuiSwitch-switchBase': {
+    padding: 0,
+    marginTop: 2.5,
+    margin: 2,
+    transitionDuration: '300ms',
+    transform: 'translateX(1px) scale(0.5)',
+    color: '#79747E',
+    '&.Mui-checked': {
+	    width: "22px",
+	    height: "22px",
+      transform: 'translateX(18px)',
+       color: '#EADDFF',
+      '& + .MuiSwitch-track': {
+      border: '0px solid red',
+    backgroundColor: '#9F329F',
+        opacity: 1,
+        border: 0,
+      },
+      '&.Mui-disabled': {
+      border: '6px solid #fff',
+        opacity: 0.5,
+      },
+    },
+    '&.Mui-focusVisible .MuiSwitch-thumb': {
+    },
+    '&.Mui-disabled + .MuiSwitch-thumb': {
+    },
+  },
+  '& .MuiSwitch-thumb': {
+    boxSizing: 'border-box',
+  },
+  '& .MuiSwitch-track': {
+      border: '2px solid #79747E',
+    borderRadius: 26 / 2,
+    backgroundColor: '#E6E0E9',
+    opacity: 1,
+    transition: theme.transitions.create(['background-color'], {
+      duration: 500,
+    }),
+  },
+}));
+	
 const BasicSwitchRoot = styled('span')(`
   font-size: 0;
   position: relative;
@@ -13,6 +62,7 @@ const BasicSwitchRoot = styled('span')(`
   background: #E0E0E0;
   border-radius: 16px;
   cursor: pointer;
+  border: 10px;
 
   &.Switch-disabled {
     opacity: 0.4;
@@ -20,12 +70,15 @@ const BasicSwitchRoot = styled('span')(`
   }
 
   &.Switch-checked {
-    background: #39E4B8;
+    border: 2px solid red;
+    color: red;
+    background: blue;
   }
 `);
 
 const BasicSwitchInput = styled('input')(`
   cursor: inherit;
+  border: 200px;
   position: absolute;
   width: 100%;
   height: 100%;
@@ -42,21 +95,30 @@ const BasicSwitchThumb = styled('span')(`
   height: 12px;
   top: 1.8px;
   left: 3px;
+  Border: 2px;
   border-radius: 50%;
   background-color: #FFF;
   position: relative;
   transition: all 200ms ease;
 
+    color: black;
   &.Switch-focusVisible {
     background-color: rgba(255,255,255,1);
     box-shadow: 0 0 1px 8px rgba(0,0,0,0.25);
+    color: black;
   }
 
   &.Switch-checked {
     left: 25px;
     top: 1.8px;
     background-color: #FFF;
+    color: black;
   }
+
+  &.Mui-checked {
+    color: black;
+  }
+
 `);
 
 function BasicSwitch(props) {
@@ -69,13 +131,13 @@ function BasicSwitch(props) {
         'Switch-disabled': disabled,
         'Switch-focusVisible': focusVisible
     };
-
-    return (
-        <BasicSwitchRoot className={clsx(stateClasses)}>
-            <BasicSwitchThumb className={clsx(stateClasses)} />
-            <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-        </BasicSwitchRoot>
-    );
+	return (<CustomSwitch />);
+   // return (
+   //     <BasicSwitchRoot className={clsx(stateClasses)}>
+   //         <BasicSwitchThumb className={clsx(stateClasses)} />
+   //         <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
+   //     </BasicSwitchRoot>
+   // );
 }
 export default function Switch(props) {
     const { data } = props;

From 2636031cf5f7846223e4f9716b20f90d4da39f56 Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Mon, 23 Sep 2024 16:08:51 +0200
Subject: [PATCH 07/13] Add tab option to modal

---
 src/ui/src/components/AllMarketModal/index.js              | 3 ++-
 src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx | 1 +
 src/ui/src/components/DashboardModal/index.js              | 3 ++-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/ui/src/components/AllMarketModal/index.js b/src/ui/src/components/AllMarketModal/index.js
index 2b8eec36..b79876bb 100644
--- a/src/ui/src/components/AllMarketModal/index.js
+++ b/src/ui/src/components/AllMarketModal/index.js
@@ -23,7 +23,7 @@ const AllMarketModal = (props) => {
     const classes = useStyles();
     const dispatch = useDispatch();
 
-    const { open, close, tokenDetails } = props;
+    const { open, close, tokenDetails, tab} = props;
 
     const { account } = useSelector((state) => state.addWallet);
     const { protocolAddresses, comptroller } = useSelector((state) => state.nodes);
@@ -171,6 +171,7 @@ const AllMarketModal = (props) => {
                 APYTextTwo="Borrow APY"
                 CurrentStateText= "Currently Supplying"
                 CurrentStateTextTwo= "Currently Borrowing"
+		tab={tab ? tab : "one"}
                 open={open}
                 close={close}
                 tokenDetails={tokenDetails}
diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 168e5ea0..91df8fc0 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -47,6 +47,7 @@ const BorrowMarketTokenTable = (props) => {
           open={openMktModal}
           close={closeModal}
           tokenDetails={tokenDetails}
+	  tab="two"
         />
       )}
       <Table>
diff --git a/src/ui/src/components/DashboardModal/index.js b/src/ui/src/components/DashboardModal/index.js
index b8510b1a..e825e225 100644
--- a/src/ui/src/components/DashboardModal/index.js
+++ b/src/ui/src/components/DashboardModal/index.js
@@ -61,9 +61,10 @@ const DashboardModal = (props) => {
         errorText,
         pendingLimit,
         pendingLimitUsed,
+	tab,
     } = props;
 
-    const [tabValue, setTabValue] = useState('one');
+    const [tabValue, setTabValue] = useState(tab);
     const [tokenValue, setTokenValue] = useState('');
     const [limit, setLimit] = useState('');
     const [limitUsed, setLimitUsed] = useState('');

From 8d2af4d964b744c28378c78b7473c27effb305ce Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Mon, 30 Sep 2024 11:31:52 +0200
Subject: [PATCH 08/13] Fix background highlight

---
 .../Dashboard/BorrowMarketTokenTable.tsx      |  11 +-
 .../Dashboard/BorrowedTokenTable.tsx          |   2 +-
 .../Dashboard/SupplyMarketTokenTable.tsx      |   5 +-
 src/ui/src/components/Dashboard/style.ts      |   3 +-
 src/ui/src/components/Switch/index.js         | 110 +++---------------
 5 files changed, 29 insertions(+), 102 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 91df8fc0..caf481f3 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -56,6 +56,7 @@ const BorrowMarketTokenTable = (props) => {
             <TableCell> Token </TableCell>
             <TableCell align="center"> Available </TableCell>
             <TableCell align="center"> Borrow APY </TableCell>
+            <TableCell align="center"> </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -67,7 +68,7 @@ const BorrowMarketTokenTable = (props) => {
                   key={data.title}
                   onClick={() => handleClickMktModal(data)}
                 >
-                  <TableCell>
+		<TableCell className={classes.firstCell}>
                     <div>
                       <div className={classes.token}>
                         <img
@@ -135,11 +136,11 @@ const BorrowMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-		  <TableCell align="center" sx={{padding: "0px",width: "150%"}}>
+		  <TableCell align="center" >
                         <span>
                             <Button
                                 variant="contained"
-                                size="small"
+                                size="medium"
                                 sx={ { marginRight: "10%" } }
                                 onClick={() => handleClickMktModal(data)}
                             >
@@ -147,7 +148,7 @@ const BorrowMarketTokenTable = (props) => {
                             </Button>
                             <Button
                                 variant="contained"
-                                size="small"
+                                size="medium"
                                 onClick={() => handleClickMktModal(data)}
                             >
                                 Details
@@ -156,7 +157,7 @@ const BorrowMarketTokenTable = (props) => {
                     </TableCell>
                 </TableRow>
               ) : (
-                <TableSkeleton index={data.title} cell={6} />
+                <TableSkeleton index={data.title} cell={4} />
               )}
             </React.Fragment>
           ))}
diff --git a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
index bf62ad87..78fd15e3 100644
--- a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
@@ -159,7 +159,7 @@ const BorrowedTokenTable = (props) => {
                                         )}
                                     </span>
                                 </TableCell>
-				  <TableCell align="center" className={classes.fourthCell}>
+				  <TableCell align="center">
                                     <span className={classes.clearFont}>{checkLimitUsed(data)}%</span>
                                 </TableCell>
                             </TableRow>
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index 94a35d96..e154e9e4 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -55,6 +55,7 @@ const SupplyMarketTokenTable = (props) => {
             <TableCell> Token </TableCell>
             <TableCell align="center"> Wallet </TableCell>
             <TableCell align="center"> Supply APY </TableCell>
+            <TableCell align="center">  </TableCell>
           </TableRow>
         </TableHead>
         <TableBody>
@@ -134,7 +135,7 @@ const SupplyMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-		  <TableCell align="" className={classes.fourthCell}>
+		  <TableCell align="center" className={classes.fourthCell}>
                         <span>
                             <Button
                                 variant="contained"
@@ -148,7 +149,7 @@ const SupplyMarketTokenTable = (props) => {
                     </TableCell>
                 </TableRow>
               ) : (
-                <TableSkeleton index={data.title} cell={6} />
+                <TableSkeleton index={data.title} cell={4} />
               )}
             </React.Fragment>
           ))}
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 5fc03903..f1b0dc50 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -239,10 +239,9 @@ export const useStyles = makeStyles({
    thirdCell: {
    },
    fourthCell: {
-	
+     width: "50%",
    },
    supplyButton: {
-	   left: "2rem",
 	   width: "100%",
    },
   tableTitle: {
diff --git a/src/ui/src/components/Switch/index.js b/src/ui/src/components/Switch/index.js
index 5f94afa3..64868f0d 100644
--- a/src/ui/src/components/Switch/index.js
+++ b/src/ui/src/components/Switch/index.js
@@ -53,101 +53,27 @@ const CustomSwitch = styled((props) => (
   },
 }));
 	
-const BasicSwitchRoot = styled('span')(`
-  font-size: 0;
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 16px;
-  background: #E0E0E0;
-  border-radius: 16px;
-  cursor: pointer;
-  border: 10px;
-
-  &.Switch-disabled {
-    opacity: 0.4;
-    cursor: not-allowed;
-  }
-
-  &.Switch-checked {
-    border: 2px solid red;
-    color: red;
-    background: blue;
-  }
-`);
-
-const BasicSwitchInput = styled('input')(`
-  cursor: inherit;
-  border: 200px;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  z-index: 1;
-  margin: 0;
-`);
-
-const BasicSwitchThumb = styled('span')(`
-  display: block;
-  width: 12px;
-  height: 12px;
-  top: 1.8px;
-  left: 3px;
-  Border: 2px;
-  border-radius: 50%;
-  background-color: #FFF;
-  position: relative;
-  transition: all 200ms ease;
-
-    color: black;
-  &.Switch-focusVisible {
-    background-color: rgba(255,255,255,1);
-    box-shadow: 0 0 1px 8px rgba(0,0,0,0.25);
-    color: black;
-  }
-
-  &.Switch-checked {
-    left: 25px;
-    top: 1.8px;
-    background-color: #FFF;
-    color: black;
-  }
-
-  &.Mui-checked {
-    color: black;
-  }
-
-`);
-
 function BasicSwitch(props) {
-    const {
-        getInputProps, checked, disabled, focusVisible
-    } = useSwitch(props);
+  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
 
-    const stateClasses = {
-        'Switch-checked': checked,
-        'Switch-disabled': disabled,
-        'Switch-focusVisible': focusVisible
-    };
-	return (<CustomSwitch />);
-   // return (
-   //     <BasicSwitchRoot className={clsx(stateClasses)}>
-   //         <BasicSwitchThumb className={clsx(stateClasses)} />
-   //         <BasicSwitchInput {...getInputProps()} aria-label="Demo switch" />
-   //     </BasicSwitchRoot>
-   // );
+  return (
+    <CustomSwitch
+      checked={checked}
+      disabled={disabled}
+      {...getInputProps()} 
+    />
+  );
 }
+
 export default function Switch(props) {
-    const { data } = props;
+  const { data } = props;
 
-    return (
-        <div>
-            <BasicSwitch
-                checked={data.collateral}
-                inputProps={{ 'aria-label': 'controlled' }}
-            />
-        </div>
-    );
+  return (
+    <div>
+      <BasicSwitch
+        checked={data.collateral} 
+        inputProps={{ 'aria-label': 'custom switch' }} 
+      />
+    </div>
+  );
 }

From 5411ba400f3fe5f9f72bf5b1bdfc693a1bf3c761 Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Wed, 23 Oct 2024 16:12:54 +0530
Subject: [PATCH 09/13] Available

---
 src/ui/src/components/Constants/index.js      |  8 ++-
 .../Dashboard/BorrowMarketTokenTable.tsx      | 50 +++++++++++++------
 .../Dashboard/SupplyMarketTokenTable.tsx      |  5 +-
 src/ui/src/components/Dashboard/style.ts      | 24 ++++-----
 src/ui/src/components/Switch/index.js         |  8 +--
 src/ui/src/reduxContent/market/actions.js     |  6 ++-
 src/util/src/TezosLendingPlatform.ts          |  7 ++-
 src/util/src/enum.ts                          |  4 +-
 src/util/src/types.ts                         |  1 +
 9 files changed, 77 insertions(+), 36 deletions(-)

diff --git a/src/ui/src/components/Constants/index.js b/src/ui/src/components/Constants/index.js
index 7c8ae70d..99114be9 100644
--- a/src/ui/src/components/Constants/index.js
+++ b/src/ui/src/components/Constants/index.js
@@ -1,4 +1,4 @@
-import { AssetType } from 'tezoslendingplatformjs';
+import { AssetType, testnetAddresses, mainnetAddresses } from 'tezoslendingplatformjs';
 import fUSDtz from '../../assets/fusdtz.svg';
 import fXTZ from '../../assets/fXTZ.svg';
 import fUSDT from '../../assets/fusdt.svg';
@@ -21,6 +21,8 @@ import XTZ from '../../assets/XTZ.svg';
 // import fOXTZ from '../../assets/foxtz.svg';
 // import fWTZ from '../../assets/fwtz.svg';
 
+const addresses = process.env.REACT_APP_ENV=="dev"? testnetAddresses : mainnetAddresses;
+
 export const tokens = [
     {
         title: 'XTZ',
@@ -29,6 +31,7 @@ export const tokens = [
         fLogo: fXTZ,
         banner: 'Tez',
         assetType: AssetType.XTZ,
+	address: ''
     },
     {
         title: 'USDtz',
@@ -37,6 +40,7 @@ export const tokens = [
         fLogo: fUSDtz,
         banner: 'USDtz',
         assetType: AssetType.USD,
+	address: addresses.underlying.USD?.address ?? ''
     },
     {
         title: 'USDt',
@@ -45,6 +49,7 @@ export const tokens = [
         fLogo: fUSDT,
         banner: 'USDt',
         assetType: AssetType.USDT,
+	address: addresses.underlying.USDT?.address ?? ''
     },
     {
         title: 'tzBTC',
@@ -54,6 +59,7 @@ export const tokens = [
         banner: 'tzBTC',
         assetType: AssetType.TZBTC,
         visibilityThreshold: 0.0000001,
+	address: addresses.underlying.TZBTC?.address ?? ''
     }
     // {
     //     title: 'BTCtz', logo: BTCtz, fLogo: fBTCtz, banner: 'BTCtz', assetType: AssetType.BTC
diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index caf481f3..23907ecd 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -35,9 +35,14 @@ const BorrowMarketTokenTable = (props) => {
     setMktModal(false);
   };
 
+  const handleClickDetails = (address) => {
+    const tzktUrl = process.env.REACT_APP_ENV=="dev"? `https://ghostnet.tzkt.io/${address}` : `https://tzkt.io/${address}`;
+    window.open(tzktUrl, '_blank'); 
+  };
+
   const handleClickMktModal = (item) => {
-    setTokenDetails(item);
-    setMktModal(true);
+	      setTokenDetails(item);
+	      setMktModal(true);
   };
 
   return (
@@ -66,7 +71,6 @@ const BorrowMarketTokenTable = (props) => {
               (!address && data.marketSize) ? (
                 <TableRow
                   key={data.title}
-                  onClick={() => handleClickMktModal(data)}
                 >
 		<TableCell className={classes.firstCell}>
                     <div>
@@ -94,17 +98,17 @@ const BorrowMarketTokenTable = (props) => {
                     <span className={classes.clearFont}>
                       {data.marketSize > 0
                           ? decimalify(
-                                data.marketSize.toString(),
+                                data.available.toString(),
                                 decimals[data.title],
                                 decimals[data.title],
                             ) < 0.01
                               ? '>0.00'
                               : nFormatter(
-                                    decimalify(
-                                        (data.marketSize - data.totalBorrowed).toString(),
-                                        decimals[data.title],
-                                        decimals[data.title],
-                                    ),
+					decimalify(
+						data.available.toString(),
+						decimals[data.title],
+						decimals[data.title],
+					    )
                                 )
                           : '0'}{" "}
                       {data.title}
@@ -136,22 +140,40 @@ const BorrowMarketTokenTable = (props) => {
                       %
                     </span>
                   </TableCell>
-		  <TableCell align="center" >
+		  <TableCell align="center" className={classes.fifthCell}>
                         <span>
                             <Button
                                 variant="contained"
                                 size="medium"
-                                sx={ { marginRight: "10%" } }
+				sx={ { marginRight: "0%",
+				       borderRadius: "8px",
+				       right: "18%", } }
                                 onClick={() => handleClickMktModal(data)}
                             >
-                                Borrow
+				    B
+				    <Typography textTransform={'lowercase'}>
+				    orrow
+				</Typography>
                             </Button>
                             <Button
                                 variant="contained"
                                 size="medium"
-                                onClick={() => handleClickMktModal(data)}
+                                onClick={() => handleClickDetails(data.address)}
+				sx={ { 
+					color: "#2C2C2C",
+					border: "1px solid #2C2C2C",
+					borderRadius: "8px",
+					backgroundColor: "#F2F3F7",
+				        '&:hover': {
+					    backgroundColor: 'lightgrey',
+					    boxShadow: 'none',
+					  },
+				} }
                             >
-                                Details
+				    D
+				    <Typography textTransform={'lowercase'}>
+                                etails
+				</Typography>
                             </Button>
                         </span>
                     </TableCell>
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index e154e9e4..6834e513 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -143,7 +143,10 @@ const SupplyMarketTokenTable = (props) => {
 				className={classes.supplyButton}
                                 onClick={() => handleClickMktModal(data)}
                             >
-                                Supply
+                                S
+				    <Typography textTransform={'lowercase'}>
+                                   upply
+				</Typography>
                             </Button>
                         </span>
                     </TableCell>
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index f1b0dc50..c05fe712 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -18,17 +18,6 @@ export const useStyles = makeStyles({
 	  alignItems: "center",
 	  justifyContent: "center",
       "& .MuiTableRow-root": {
-        "& .MuiTableCell-root:last-of-type": {
-		display: "block",
-		//marginLeft: "10px",
-		//marginRight: "-100px",
-		paddingLeft: "0px",
-		paddingRight: "0px",
-		//width : "150%",
-        },
-        "& .MuiTableCell-root:first-of-type": {
-          paddingLeft: "0.75rem",
-        },
           paddingRight: "0rem",
           marginRight: "0rem",
       },
@@ -70,6 +59,8 @@ export const useStyles = makeStyles({
     "& .MuiTableBody-root ": {
       "& .MuiTableRow-root:last-of-type": {
         "& .MuiTableCell-root": {
+	  padding: "-10px",
+	  marginRight: "10px",
           borderBottom: "0",
         },
       },
@@ -239,10 +230,17 @@ export const useStyles = makeStyles({
    thirdCell: {
    },
    fourthCell: {
-     width: "50%",
+     width: "30%",
+   },
+   fifthCell: {
+	   width: "30%",
+	   right: "10px",
    },
    supplyButton: {
-	   width: "100%",
+	   borderRadius: "8px",
+	   marginRight: "30%",
+	   marginLeft: "10%",
+	   width: "50%",
    },
   tableTitle: {
     color: "#000",
diff --git a/src/ui/src/components/Switch/index.js b/src/ui/src/components/Switch/index.js
index 64868f0d..19e47824 100644
--- a/src/ui/src/components/Switch/index.js
+++ b/src/ui/src/components/Switch/index.js
@@ -13,15 +13,17 @@ const CustomSwitch = styled((props) => (
   padding: 0,
   '& .MuiSwitch-switchBase': {
     padding: 0,
-    marginTop: 2.5,
-    margin: 2,
+    margin: 2.9,
     transitionDuration: '300ms',
     transform: 'translateX(1px) scale(0.5)',
     color: '#79747E',
     '&.Mui-checked': {
+	    padding: 0,
+	    margin: 2,
 	    width: "22px",
 	    height: "22px",
-      transform: 'translateX(18px)',
+
+      transform: 'translateX(18px) scale(1)',
        color: '#EADDFF',
       '& + .MuiSwitch-track': {
       border: '0px solid red',
diff --git a/src/ui/src/reduxContent/market/actions.js b/src/ui/src/reduxContent/market/actions.js
index bba6e5e5..5b48808c 100644
--- a/src/ui/src/reduxContent/market/actions.js
+++ b/src/ui/src/reduxContent/market/actions.js
@@ -40,6 +40,7 @@ export const allMarketAction = (account, markets) => (dispatch) => {
                 .toFixed(4);
             token.marketSize = markets[token.assetType].supply.totalAmount.toString();
             token.totalBorrowed = markets[token.assetType].borrow.totalAmount.toString();
+	    token.available = markets[token.assetType].available;
             token.supplyRate = markets[token.assetType].supply.rate.toString();
             token.borrowRate = markets[token.assetType].borrow.rate.toString();
             token.borrowRateFn = markets[token.assetType].borrow.rateFn;
@@ -72,6 +73,7 @@ export const suppliedMarketAction = (markets) => (dispatch) => {
             logo,
             fLogo,
             usdPrice,
+	    address,
             walletBalance,
             collateralFactor,
             supply,
@@ -83,6 +85,7 @@ export const suppliedMarketAction = (markets) => (dispatch) => {
             logo,
             fLogo,
             usdPrice,
+	    address,
             walletBalance,
             collateralFactor,
             ...supply,
@@ -104,13 +107,14 @@ export const suppliedMarketAction = (markets) => (dispatch) => {
 export const borrowedMarketAction = (markets) => (dispatch) => {
     // eslint-disable-next-line object-curly-newline
     const borrowedTokens = markets.map(
-        ({ assetType, banner, title, name, logo, usdPrice, walletBalance, collateralFactor, borrow }) => ({
+        ({ assetType, banner, title, name, logo, address, usdPrice, walletBalance, collateralFactor, borrow }) => ({
             assetType,
             banner,
             title,
             name,
             logo,
             usdPrice,
+	    address,
             walletBalance,
             collateralFactor,
             ...borrow,
diff --git a/src/util/src/TezosLendingPlatform.ts b/src/util/src/TezosLendingPlatform.ts
index b70233ba..e1a5d472 100644
--- a/src/util/src/TezosLendingPlatform.ts
+++ b/src/util/src/TezosLendingPlatform.ts
@@ -96,7 +96,11 @@ export namespace TezosLendingPlatform {
             rate: FToken.getBorrowRateApy(fToken, rateModel),
             rateFn: FToken.getDynamicBorrowRateApyFn(fToken, rateModel),
         };
-
+	const available =  FToken.applyExchangeRate(
+                        supply.totalAmount.minus(borrow.totalAmount).minus(fToken.totalReserves),
+		fToken);
+	    
+	console.log("!!! " + underlying.assetType + ": " + " Supply bigint " + supply.totalAmount + ", borrow bigint " + borrow.totalAmount + ", supply - borrow bigint " + borrow.totalAmount.minus(supply.totalAmount)  + ", available BigNumber " + available);
         return {
             currentPrice: price,
             address: address,
@@ -105,6 +109,7 @@ export namespace TezosLendingPlatform {
             cashUsd: comptroller.markets[underlying.assetType].price.multiply(FToken.GetCash(fToken)),
             supply: supply,
             borrow: borrow,
+	    available: available,
             dailyInterestPaid: bigInt('0'), // TODO: parse this
             reserves: fToken.totalReserves,
             reserveFactor: fToken.reserveFactorMantissa.toJSNumber(),
diff --git a/src/util/src/enum.ts b/src/util/src/enum.ts
index 4cf1118a..b787eed1 100644
--- a/src/util/src/enum.ts
+++ b/src/util/src/enum.ts
@@ -12,11 +12,11 @@ export enum AssetType {
     WTZ = "WTZ",
     OXTZ = "OXTZ",
     USDT = "USDT",
-    TZBTC= "TZBTC"
+    TZBTC = "TZBTC"
 }
 
 export enum TokenStandard {
     XTZ = 0,
     FA12,
     FA2
-}
\ No newline at end of file
+}
diff --git a/src/util/src/types.ts b/src/util/src/types.ts
index 02559e2d..c889a8bf 100644
--- a/src/util/src/types.ts
+++ b/src/util/src/types.ts
@@ -175,6 +175,7 @@ export interface Market {
     cashUsd: bigInt.BigInteger;
     supply: MarketData;
     borrow: MarketData;
+    available: BigNumber;
     dailyInterestPaid: bigInt.BigInteger;
     reserves: bigInt.BigInteger;
     currentPrice: bigInt.BigInteger;

From 91a4a209b22df0a47c96c33dcb1b0aeb62415802 Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Wed, 23 Oct 2024 16:18:45 +0530
Subject: [PATCH 10/13] Cleanup

---
 .../Dashboard/BorrowMarketTokenTable.tsx      | 327 ++++++-------
 .../Dashboard/BorrowedTokenTable.tsx          |   6 +-
 .../Dashboard/SuppliedTokenTable.tsx          |   4 +-
 .../Dashboard/SupplyMarketTokenTable.tsx      | 274 +++++------
 src/ui/src/components/Dashboard/index.tsx     |   6 +-
 src/ui/src/components/Dashboard/style.ts      | 462 +++++++++---------
 src/ui/src/components/Switch/index.js         | 109 ++---
 src/util/src/TezosLendingPlatform.ts          |   1 -
 8 files changed, 570 insertions(+), 619 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 23907ecd..62f60bae 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -2,191 +2,174 @@
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
 // eslint-disable-next-line no-use-before-define
-import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 
-import { decimals } from "tezoslendingplatformjs";
-import BigNumber from "bignumber.js";
+import { decimals } from 'tezoslendingplatformjs';
+import BigNumber from 'bignumber.js';
 
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import { Button, Typography } from "@mui/material";
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { Button, Typography } from '@mui/material';
 
-import { decimalify, nFormatter, roundValue } from "../../util";
+import { decimalify, nFormatter, roundValue } from '../../util';
 
-import AllMarketModal from "../AllMarketModal";
-import TableSkeleton from "../Skeleton";
+import AllMarketModal from '../AllMarketModal';
+import TableSkeleton from '../Skeleton';
 
-import { useStyles } from "./style";
+import { useStyles } from './style';
 
 const BorrowMarketTokenTable = (props) => {
-  const classes = useStyles();
-  const { tableData } = props;
-  const { address } = useSelector((state: any) => state.addWallet.account);
+    const classes = useStyles();
+    const { tableData } = props;
+    const { address } = useSelector((state: any) => state.addWallet.account);
 
-  const [tokenDetails, setTokenDetails] = useState();
-  const [openMktModal, setMktModal] = useState(false);
+    const [tokenDetails, setTokenDetails] = useState();
+    const [openMktModal, setMktModal] = useState(false);
 
-  const closeModal = () => {
-    setMktModal(false);
-  };
+    const closeModal = () => {
+        setMktModal(false);
+    };
 
-  const handleClickDetails = (address) => {
-    const tzktUrl = process.env.REACT_APP_ENV=="dev"? `https://ghostnet.tzkt.io/${address}` : `https://tzkt.io/${address}`;
-    window.open(tzktUrl, '_blank'); 
-  };
+    const handleClickDetails = (address) => {
+        const tzktUrl =
+            process.env.REACT_APP_ENV == 'dev' ? `https://ghostnet.tzkt.io/${address}` : `https://tzkt.io/${address}`;
+        window.open(tzktUrl, '_blank');
+    };
 
-  const handleClickMktModal = (item) => {
-	      setTokenDetails(item);
-	      setMktModal(true);
-  };
+    const handleClickMktModal = (item) => {
+        setTokenDetails(item);
+        setMktModal(true);
+    };
 
-  return (
-    <TableContainer className={`${classes.root} ${classes.tableCon}`}>
-      {tokenDetails && (
-        <AllMarketModal
-          open={openMktModal}
-          close={closeModal}
-          tokenDetails={tokenDetails}
-	  tab="two"
-        />
-      )}
-      <Table>
-        <TableHead>
-          <TableRow>
-            <TableCell> Token </TableCell>
-            <TableCell align="center"> Available </TableCell>
-            <TableCell align="center"> Borrow APY </TableCell>
-            <TableCell align="center"> </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {tableData?.map((data) => (
-            <React.Fragment key={data.title}>
-              {(address && data.walletBalance) ||
-              (!address && data.marketSize) ? (
-                <TableRow
-                  key={data.title}
-                >
-		<TableCell className={classes.firstCell}>
-                    <div>
-                      <div className={classes.token}>
-                        <img
-                          src={data.logo}
-                          alt={`${data.title}-Icon`}
-                          className={classes.img}
-                        />
+    return (
+        <TableContainer className={`${classes.root} ${classes.tableCon}`}>
+            {tokenDetails && (
+                <AllMarketModal open={openMktModal} close={closeModal} tokenDetails={tokenDetails} tab="two" />
+            )}
+            <Table>
+                <TableHead>
+                    <TableRow>
+                        <TableCell> Token </TableCell>
+                        <TableCell align="center"> Available </TableCell>
+                        <TableCell align="center"> Borrow APY </TableCell>
+                        <TableCell align="center"> </TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {tableData?.map((data) => (
+                        <React.Fragment key={data.title}>
+                            {(address && data.walletBalance) || (!address && data.marketSize) ? (
+                                <TableRow key={data.title}>
+                                    <TableCell className={classes.firstCell}>
+                                        <div>
+                                            <div className={classes.token}>
+                                                <img
+                                                    src={data.logo}
+                                                    alt={`${data.title}-Icon`}
+                                                    className={classes.img}
+                                                />
 
-                        <div className={classes.tokenTitle}>
-                          <Typography className={classes.tokenName}>
-                            {" "}
-                            {data.name}{" "}
-                          </Typography>
-                          <Typography className={classes.faintFont}>
-                            {" "}
-                            {data.title}{" "}
-                          </Typography>
-                        </div>
-                      </div>
-                    </div>
-                  </TableCell>
-                  <TableCell align="center">
-                    <span className={classes.clearFont}>
-                      {data.marketSize > 0
-                          ? decimalify(
-                                data.available.toString(),
-                                decimals[data.title],
-                                decimals[data.title],
-                            ) < 0.01
-                              ? '>0.00'
-                              : nFormatter(
-					decimalify(
-						data.available.toString(),
-						decimals[data.title],
-						decimals[data.title],
-					    )
-                                )
-                          : '0'}{" "}
-                      {data.title}
-                    </span>{" "}
-                    <br />
-                    <span className={classes.faintFont}>
-                      $
-                      {data.marketSize > 0
-                        ? nFormatter(
-                            decimalify(
-                              ((data.marketSize - data.totalBorrowed) * data.usdPrice).toString(),
-                              decimals[data.title],
-                              decimals[data.title],
-                            ),
-                          )
-                        : "0.00"}
-                    </span>
-                  </TableCell>
-                  <TableCell align="center" className={classes.clearFont}>
-                    <span>
-                      {data.borrowRate > 0
-                        ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
-                          new BigNumber(data.borrowRate).gt(
-                            new BigNumber(10000000000000000),
-                          )
-                          ? roundValue(decimalify(data.borrowRate, 18))
-                          : "<0.01"
-                        : "0"}
-                      %
-                    </span>
-                  </TableCell>
-		  <TableCell align="center" className={classes.fifthCell}>
-                        <span>
-                            <Button
-                                variant="contained"
-                                size="medium"
-				sx={ { marginRight: "0%",
-				       borderRadius: "8px",
-				       right: "18%", } }
-                                onClick={() => handleClickMktModal(data)}
-                            >
-				    B
-				    <Typography textTransform={'lowercase'}>
-				    orrow
-				</Typography>
-                            </Button>
-                            <Button
-                                variant="contained"
-                                size="medium"
-                                onClick={() => handleClickDetails(data.address)}
-				sx={ { 
-					color: "#2C2C2C",
-					border: "1px solid #2C2C2C",
-					borderRadius: "8px",
-					backgroundColor: "#F2F3F7",
-				        '&:hover': {
-					    backgroundColor: 'lightgrey',
-					    boxShadow: 'none',
-					  },
-				} }
-                            >
-				    D
-				    <Typography textTransform={'lowercase'}>
-                                etails
-				</Typography>
-                            </Button>
-                        </span>
-                    </TableCell>
-                </TableRow>
-              ) : (
-                <TableSkeleton index={data.title} cell={4} />
-              )}
-            </React.Fragment>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
+                                                <div className={classes.tokenTitle}>
+                                                    <Typography className={classes.tokenName}> {data.name} </Typography>
+                                                    <Typography className={classes.faintFont}>
+                                                        {' '}
+                                                        {data.title}{' '}
+                                                    </Typography>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableCell>
+                                    <TableCell align="center">
+                                        <span className={classes.clearFont}>
+                                            {data.marketSize > 0
+                                                ? decimalify(
+                                                      data.available.toString(),
+                                                      decimals[data.title],
+                                                      decimals[data.title],
+                                                  ) < 0.01
+                                                    ? '>0.00'
+                                                    : nFormatter(
+                                                          decimalify(
+                                                              data.available.toString(),
+                                                              decimals[data.title],
+                                                              decimals[data.title],
+                                                          ),
+                                                      )
+                                                : '0'}{' '}
+                                            {data.title}
+                                        </span>{' '}
+                                        <br />
+                                        <span className={classes.faintFont}>
+                                            $
+                                            {data.marketSize > 0
+                                                ? nFormatter(
+                                                      decimalify(
+                                                          (
+                                                              (data.marketSize - data.totalBorrowed) *
+                                                              data.usdPrice
+                                                          ).toString(),
+                                                          decimals[data.title],
+                                                          decimals[data.title],
+                                                      ),
+                                                  )
+                                                : '0.00'}
+                                        </span>
+                                    </TableCell>
+                                    <TableCell align="center" className={classes.clearFont}>
+                                        <span>
+                                            {data.borrowRate > 0
+                                                ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
+                                                  new BigNumber(data.borrowRate).gt(new BigNumber(10000000000000000))
+                                                    ? roundValue(decimalify(data.borrowRate, 18))
+                                                    : '<0.01'
+                                                : '0'}
+                                            %
+                                        </span>
+                                    </TableCell>
+                                    <TableCell align="center" className={classes.fifthCell}>
+                                        <span>
+                                            <Button
+                                                variant="contained"
+                                                size="medium"
+                                                sx={{ marginRight: '0%', borderRadius: '8px', right: '18%' }}
+                                                onClick={() => handleClickMktModal(data)}
+                                            >
+                                                B<Typography textTransform={'lowercase'}>orrow</Typography>
+                                            </Button>
+                                            <Button
+                                                variant="contained"
+                                                size="medium"
+                                                onClick={() => handleClickDetails(data.address)}
+                                                sx={{
+                                                    color: '#2C2C2C',
+                                                    border: '1px solid #2C2C2C',
+                                                    borderRadius: '8px',
+                                                    backgroundColor: '#F2F3F7',
+                                                    '&:hover': {
+                                                        backgroundColor: 'lightgrey',
+                                                        boxShadow: 'none',
+                                                    },
+                                                }}
+                                            >
+                                                D<Typography textTransform={'lowercase'}>etails</Typography>
+                                            </Button>
+                                        </span>
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                <TableSkeleton index={data.title} cell={4} />
+                            )}
+                        </React.Fragment>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
 };
 
 export default BorrowMarketTokenTable;
diff --git a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
index 78fd15e3..98550363 100644
--- a/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowedTokenTable.tsx
@@ -97,7 +97,7 @@ const BorrowedTokenTable = (props) => {
                     {borrowedData &&
                         borrowedData.map((data) => (
                             <TableRow key={data.title} onClick={() => handleClickMktModal(data)}>
-				<TableCell className={classes.firstCell}>
+                                <TableCell className={classes.firstCell}>
                                     <div>
                                         <div className={classes.token}>
                                             <img src={data.logo} alt={`${data.title}-Icon`} className={classes.img} />
@@ -110,7 +110,7 @@ const BorrowedTokenTable = (props) => {
                                     </div>
                                 </TableCell>
                                 <TableCell align="center" className={classes.clearFont}>
-				    <span className={classes.clearFont}>
+                                    <span className={classes.clearFont}>
                                         {data.rate > 0
                                             ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
                                               new BigNumber(data.rate).gt(new BigNumber(10000000000000000))
@@ -159,7 +159,7 @@ const BorrowedTokenTable = (props) => {
                                         )}
                                     </span>
                                 </TableCell>
-				  <TableCell align="center">
+                                <TableCell align="center">
                                     <span className={classes.clearFont}>{checkLimitUsed(data)}%</span>
                                 </TableCell>
                             </TableRow>
diff --git a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
index e26d3983..107952dc 100644
--- a/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SuppliedTokenTable.tsx
@@ -114,7 +114,7 @@ const SuppliedTokenTable = (props) => {
                     {suppliedData &&
                         suppliedData.map((data) => (
                             <TableRow key={data.title} onClick={(event) => handleClickMktModal(data, event)}>
-				<TableCell className={classes.firstCell}>
+                                <TableCell className={classes.firstCell}>
                                     <div>
                                         <div className={classes.token}>
                                             <img src={data.fLogo} alt={`${data.title}-Icon`} className={classes.img} />
@@ -178,7 +178,7 @@ const SuppliedTokenTable = (props) => {
                                             : '0.00'}
                                     </span>
                                 </TableCell>
-				  <TableCell align="center" className={classes.switchPadding}>
+                                <TableCell align="center" className={classes.switchPadding}>
                                     <Switch data={data} />
                                 </TableCell>
                             </TableRow>
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index 6834e513..005c0875 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -2,164 +2,146 @@
 /* eslint-disable import/extensions */
 /* eslint-disable import/no-unresolved */
 // eslint-disable-next-line no-use-before-define
-import React, { useState } from "react";
-import { useSelector } from "react-redux";
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 
-import { decimals } from "tezoslendingplatformjs";
-import BigNumber from "bignumber.js";
+import { decimals } from 'tezoslendingplatformjs';
+import BigNumber from 'bignumber.js';
 
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
-import { Button, Typography } from "@mui/material";
+import Table from '@mui/material/Table';
+import TableBody from '@mui/material/TableBody';
+import TableCell from '@mui/material/TableCell';
+import TableContainer from '@mui/material/TableContainer';
+import TableHead from '@mui/material/TableHead';
+import TableRow from '@mui/material/TableRow';
+import { Button, Typography } from '@mui/material';
 
-import { decimalify, nFormatter, roundValue } from "../../util";
+import { decimalify, nFormatter, roundValue } from '../../util';
 
-import AllMarketModal from "../AllMarketModal";
-import TableSkeleton from "../Skeleton";
+import AllMarketModal from '../AllMarketModal';
+import TableSkeleton from '../Skeleton';
 
-import { useStyles } from "./style";
+import { useStyles } from './style';
 
 const SupplyMarketTokenTable = (props) => {
-  const classes = useStyles();
-  const { tableData } = props;
-  const { address } = useSelector((state: any) => state.addWallet.account);
+    const classes = useStyles();
+    const { tableData } = props;
+    const { address } = useSelector((state: any) => state.addWallet.account);
 
-  const [tokenDetails, setTokenDetails] = useState();
-  const [openMktModal, setMktModal] = useState(false);
+    const [tokenDetails, setTokenDetails] = useState();
+    const [openMktModal, setMktModal] = useState(false);
 
-  const closeModal = () => {
-    setMktModal(false);
-  };
+    const closeModal = () => {
+        setMktModal(false);
+    };
 
-  const handleClickMktModal = (item) => {
-    setTokenDetails(item);
-    setMktModal(true);
-  };
+    const handleClickMktModal = (item) => {
+        setTokenDetails(item);
+        setMktModal(true);
+    };
 
-  return (
-    <TableContainer  className={`${classes.root} ${classes.tableCon}`}>
-      {tokenDetails && (
-        <AllMarketModal
-          open={openMktModal}
-          close={closeModal}
-          tokenDetails={tokenDetails}
-        />
-      )}
-      <Table size="medium" sx={{marginRight: "0px",}}>
-        <TableHead>
-          <TableRow>
-            <TableCell> Token </TableCell>
-            <TableCell align="center"> Wallet </TableCell>
-            <TableCell align="center"> Supply APY </TableCell>
-            <TableCell align="center">  </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {tableData?.map((data) => (
-            <React.Fragment key={data.title}>
-              {(address && data.walletBalance) ||
-              (!address && data.marketSize) ? (
-                <TableRow
-                  key={data.title}
-                  onClick={() => handleClickMktModal(data)}
-                >
-		<TableCell className={classes.firstCell}>
-                    <div>
-                      <div className={classes.token}>
-                        <img
-                          src={data.logo}
-                          alt={`${data.title}-Icon`}
-                          className={classes.img}
-                        />
+    return (
+        <TableContainer className={`${classes.root} ${classes.tableCon}`}>
+            {tokenDetails && <AllMarketModal open={openMktModal} close={closeModal} tokenDetails={tokenDetails} />}
+            <Table size="medium" sx={{ marginRight: '0px' }}>
+                <TableHead>
+                    <TableRow>
+                        <TableCell> Token </TableCell>
+                        <TableCell align="center"> Wallet </TableCell>
+                        <TableCell align="center"> Supply APY </TableCell>
+                        <TableCell align="center"> </TableCell>
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {tableData?.map((data) => (
+                        <React.Fragment key={data.title}>
+                            {(address && data.walletBalance) || (!address && data.marketSize) ? (
+                                <TableRow key={data.title} onClick={() => handleClickMktModal(data)}>
+                                    <TableCell className={classes.firstCell}>
+                                        <div>
+                                            <div className={classes.token}>
+                                                <img
+                                                    src={data.logo}
+                                                    alt={`${data.title}-Icon`}
+                                                    className={classes.img}
+                                                />
 
-                        <div className={classes.tokenTitle}>
-                          <Typography className={classes.tokenName}>
-                            {" "}
-                            {data.name}{" "}
-                          </Typography>
-                          <Typography className={classes.faintFont}>
-                            {" "}
-                            {data.title}{" "}
-                          </Typography>
-                        </div>
-                      </div>
-                    </div>
-                  </TableCell>
-		<TableCell align="center" className={classes.clearFont}>
-                    <span className={classes.clearFont}>
-                      {data.walletBalance > 0
-                            ? decimalify(
-                                  data.walletBalance.toString(),
-                                  decimals[data.title],
-                                  decimals[data.title],
-                              ) < 0.01
-                                ? '>0.00'
-                                : nFormatter(
-                                      decimalify(
-                                          data.walletBalance.toString(),
-                                          decimals[data.title],
-                                          decimals[data.title],
-                                      ),
-                                  )
-                            : '0'}{" "}
-                      {data.title}
-                    </span>{" "}
-                    <br />
-                    <span className={classes.faintFont}>
-                      $
-                      {data.walletBalance > 0
-                        ? nFormatter(
-                            decimalify(
-                              (data.walletBalance * data.usdPrice).toString(),
-                              decimals[data.title],
-                              decimals[data.title],
-                            ),
-                          )
-                        : "0.00"}
-                    </span>
-                  </TableCell>
-                  <TableCell align="center" className={classes.clearFont}>
-                    <span>
-                      {data.supplyRate > 0
-                        ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
-                          new BigNumber(data.supplyRate).gt(
-                            new BigNumber(10000000000000000),
-                          )
-                          ? roundValue(decimalify(data.supplyRate, 18))
-                          : "<0.01"
-                        : "0"}
-                      %
-                    </span>
-                  </TableCell>
-		  <TableCell align="center" className={classes.fourthCell}>
-                        <span>
-                            <Button
-                                variant="contained"
-                                size="medium"
-				className={classes.supplyButton}
-                                onClick={() => handleClickMktModal(data)}
-                            >
-                                S
-				    <Typography textTransform={'lowercase'}>
-                                   upply
-				</Typography>
-                            </Button>
-                        </span>
-                    </TableCell>
-                </TableRow>
-              ) : (
-                <TableSkeleton index={data.title} cell={4} />
-              )}
-            </React.Fragment>
-          ))}
-        </TableBody>
-      </Table>
-    </TableContainer>
-  );
+                                                <div className={classes.tokenTitle}>
+                                                    <Typography className={classes.tokenName}> {data.name} </Typography>
+                                                    <Typography className={classes.faintFont}>
+                                                        {' '}
+                                                        {data.title}{' '}
+                                                    </Typography>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </TableCell>
+                                    <TableCell align="center" className={classes.clearFont}>
+                                        <span className={classes.clearFont}>
+                                            {data.walletBalance > 0
+                                                ? decimalify(
+                                                      data.walletBalance.toString(),
+                                                      decimals[data.title],
+                                                      decimals[data.title],
+                                                  ) < 0.01
+                                                    ? '>0.00'
+                                                    : nFormatter(
+                                                          decimalify(
+                                                              data.walletBalance.toString(),
+                                                              decimals[data.title],
+                                                              decimals[data.title],
+                                                          ),
+                                                      )
+                                                : '0'}{' '}
+                                            {data.title}
+                                        </span>{' '}
+                                        <br />
+                                        <span className={classes.faintFont}>
+                                            $
+                                            {data.walletBalance > 0
+                                                ? nFormatter(
+                                                      decimalify(
+                                                          (data.walletBalance * data.usdPrice).toString(),
+                                                          decimals[data.title],
+                                                          decimals[data.title],
+                                                      ),
+                                                  )
+                                                : '0.00'}
+                                        </span>
+                                    </TableCell>
+                                    <TableCell align="center" className={classes.clearFont}>
+                                        <span>
+                                            {data.supplyRate > 0
+                                                ? // checks if rate is lower than 0.1% (all rates lower than 0.01% is shown as <0.01%)
+                                                  new BigNumber(data.supplyRate).gt(new BigNumber(10000000000000000))
+                                                    ? roundValue(decimalify(data.supplyRate, 18))
+                                                    : '<0.01'
+                                                : '0'}
+                                            %
+                                        </span>
+                                    </TableCell>
+                                    <TableCell align="center" className={classes.fourthCell}>
+                                        <span>
+                                            <Button
+                                                variant="contained"
+                                                size="medium"
+                                                className={classes.supplyButton}
+                                                onClick={() => handleClickMktModal(data)}
+                                            >
+                                                S<Typography textTransform={'lowercase'}>upply</Typography>
+                                            </Button>
+                                        </span>
+                                    </TableCell>
+                                </TableRow>
+                            ) : (
+                                <TableSkeleton index={data.title} cell={4} />
+                            )}
+                        </React.Fragment>
+                    ))}
+                </TableBody>
+            </Table>
+        </TableContainer>
+    );
 };
 
 export default SupplyMarketTokenTable;
diff --git a/src/ui/src/components/Dashboard/index.tsx b/src/ui/src/components/Dashboard/index.tsx
index 6bf7db67..84a2a47d 100644
--- a/src/ui/src/components/Dashboard/index.tsx
+++ b/src/ui/src/components/Dashboard/index.tsx
@@ -25,7 +25,9 @@ const Dashboard = () => {
     const { suppliedMarkets, borrowedMarkets, allMarkets } = useSelector((state: any) => state.market);
 
     useEffect(() => {
-        if (!markets) { return; }
+        if (!markets) {
+            return;
+        }
         dispatch(allMarketAction(account, markets));
 
         dispatch(suppliedMarketAction(allMarkets));
@@ -36,7 +38,7 @@ const Dashboard = () => {
         <Grid container className={classes.dashboard}>
             <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
                 <Typography className={classes.tableTitle}> Supplying </Typography>
-                <SuppliedTokenTable tableData={suppliedMarkets}/>
+                <SuppliedTokenTable tableData={suppliedMarkets} />
             </Grid>
             <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
                 <Typography className={classes.tableTitle}> Borrowing </Typography>
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index c05fe712..0b168de2 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -1,180 +1,178 @@
 /* eslint-disable import/prefer-default-export */
-import { makeStyles } from "@mui/styles";
+import { makeStyles } from '@mui/styles';
 
 export const useStyles = makeStyles({
-  root: {
-
-    "& .MuiTypography-root": {
-      "@media(max-width: 501px)": {
-        fontSize: "0.75rem",
-      },
-      "@media(max-width: 320px)": {
-        fontSize: "0.625rem",
-      },
-    },
-    "& .MuiTable-root": {
-	  flexDirection: "column",
-	  width: "100%",
-	  alignItems: "center",
-	  justifyContent: "center",
-      "& .MuiTableRow-root": {
-          paddingRight: "0rem",
-          marginRight: "0rem",
-      },
-    },
-    "& .MuiTableCell-root": {
-      color: "#000",
-      borderBottom: "1px solid #E0E0E0",
-      padding: ".75rem",
-      whiteSpace: "nowrap",
-      "@media(min-width: 1200px)": {
-        paddingLeft: "1.5rem",
-      },
-      "@media(max-width: 501px)": {
-        padding: ".5rem",
-      },
-    },
-    "& .MuiTableHead-root ": {
-      "& .MuiTableRow-root": {
-        height: "3.5rem",
-      },
-      "& .MuiTableCell-root": {
-        color: "#000",
-        opacity: "0.6",
-        fontSize: ".875rem",
-        "@media(min-width: 768px)": {
-          minWidth: "5.5625rem",
+    root: {
+        '& .MuiTypography-root': {
+            '@media(max-width: 501px)': {
+                fontSize: '0.75rem',
+            },
+            '@media(max-width: 320px)': {
+                fontSize: '0.625rem',
+            },
         },
-        "@media(max-width: 1200px)": {
-          fontSize: "0.75rem",
+        '& .MuiTable-root': {
+            flexDirection: 'column',
+            width: '100%',
+            alignItems: 'center',
+            justifyContent: 'center',
+            '& .MuiTableRow-root': {
+                paddingRight: '0rem',
+                marginRight: '0rem',
+            },
         },
-        "@media(max-width: 501px)": {
-          fontSize: "0.625rem",
+        '& .MuiTableCell-root': {
+            color: '#000',
+            borderBottom: '1px solid #E0E0E0',
+            padding: '.75rem',
+            whiteSpace: 'nowrap',
+            '@media(min-width: 1200px)': {
+                paddingLeft: '1.5rem',
+            },
+            '@media(max-width: 501px)': {
+                padding: '.5rem',
+            },
         },
-        "@media(max-width: 320px)": {
-          fontSize: "0.75rem",
+        '& .MuiTableHead-root ': {
+            '& .MuiTableRow-root': {
+                height: '3.5rem',
+            },
+            '& .MuiTableCell-root': {
+                color: '#000',
+                opacity: '0.6',
+                fontSize: '.875rem',
+                '@media(min-width: 768px)': {
+                    minWidth: '5.5625rem',
+                },
+                '@media(max-width: 1200px)': {
+                    fontSize: '0.75rem',
+                },
+                '@media(max-width: 501px)': {
+                    fontSize: '0.625rem',
+                },
+                '@media(max-width: 320px)': {
+                    fontSize: '0.75rem',
+                },
+            },
         },
-      },
-    },
-    "& .MuiTableBody-root ": {
-      "& .MuiTableRow-root:last-of-type": {
-        "& .MuiTableCell-root": {
-	  padding: "-10px",
-	  marginRight: "10px",
-          borderBottom: "0",
+        '& .MuiTableBody-root ': {
+            '& .MuiTableRow-root:last-of-type': {
+                '& .MuiTableCell-root': {
+                    padding: '-10px',
+                    marginRight: '10px',
+                    borderBottom: '0',
+                },
+            },
+            '& .MuiTableRow-root': {
+                height: '4.5rem',
+                '&:hover': {
+                    background: '#DDF5FC66',
+                },
+            },
+            '& .MuiTableCell-root': {
+                fontWeight: '400',
+                '@media(min-width: 1200px)': {
+                    fontSize: '1rem',
+                },
+                '@media(max-width: 768px)': {
+                    fontSize: '0.875rem',
+                },
+                '@media(max-width: 501px)': {
+                    fontSize: '0.75rem',
+                },
+            },
         },
-      },
-      "& .MuiTableRow-root": {
-        height: "4.5rem",
-        "&:hover": {
-          background: "#DDF5FC66",
+    },
+    tableCon: {
+        padding: '0px',
+        background: '#fff',
+        borderBottom: '0',
+        borderRadius: '1rem',
+        '&::-webkit-scrollbar': {
+            display: 'none',
         },
-      },
-      "& .MuiTableCell-root": {
-        fontWeight: "400",
-        "@media(min-width: 1200px)": {
-          fontSize: "1rem",
+        boxShadow: '2px 4px 23px 5px rgba(163,163,163,0.096)',
+    },
+    questionCircleIcon: {
+        width: '1rem',
+        height: '1rem',
+        marginBottom: '-3px',
+    },
+    img: {
+        //width: "7%",
+        //height: "7%",
+        // marginRight: "20%",
+        width: '2.5rem',
+        height: '2.5rem',
+        marginRight: '1rem',
+        '@media (min-width: 769px) and (max-width: 1024px)': {
+            width: '2.5rem',
+            height: '2.5rem',
         },
-        "@media(max-width: 768px)": {
-          fontSize: "0.875rem",
+        '@media(max-width: 768px)': {
+            width: '2.5rem',
+            height: '2.5rem',
         },
-        "@media(max-width: 501px)": {
-          fontSize: "0.75rem",
+        '@media(max-width: 501px)': {
+            width: '2.5rem',
+            height: '2.5rem',
         },
-      },
     },
-  },
-  tableCon: {
-    padding: "0px",
-    background: "#fff",
-    borderBottom: "0",
-    borderRadius: "1rem",
-    "&::-webkit-scrollbar": {
-      display: "none",
+    tokenSymbol: {
+        display: 'inline',
+        color: '#000',
+        opacity: '0.6',
+        fontSize: '1rem',
+        fontWeight: '400',
+        letterSpacing: '0.005em',
+        lineHeight: '1.875rem',
+        '@media(max-width: 1200px)': {
+            fontSize: '1rem',
+        },
+        '@media(max-width: 768px)': {
+            fontSize: '1rem',
+        },
     },
-    boxShadow: "2px 4px 23px 5px rgba(163,163,163,0.096)",
-  },
-  questionCircleIcon: {
-    width: "1rem",
-    height: "1rem",
-    marginBottom: "-3px",
-  },
-  img: {
-	  //width: "7%",
-	  //height: "7%",
-    	  // marginRight: "20%",
-	   width: "2.5rem",
-    	   height: "2.5rem",
-    	   marginRight: "1rem",
-    	   "@media (min-width: 769px) and (max-width: 1024px)": {
-    	     width: "2.5rem",
-    	     height: "2.5rem",
-    	   },
-    	   "@media(max-width: 768px)": {
-    	     width: "2.5rem",
-    	     height: "2.5rem",
-    	   },
-    	   "@media(max-width: 501px)": {
-    	     width: "2.5rem",
-    	     height: "2.5rem",
-    	   },
-  },
-  tokenSymbol: {
-    display: "inline",
-    color: "#000",
-    opacity: "0.6",
-    fontSize: "1rem",
-    fontWeight: "400",
-    letterSpacing: "0.005em",
-    lineHeight: "1.875rem",
-    "@media(max-width: 1200px)": {
-      fontSize: "1rem",
+    token: {
+        display: 'flex',
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignContent: 'center',
+        alignText: 'center',
+        padding: '0px',
     },
-    "@media(max-width: 768px)": {
-      fontSize: "1rem",
+    tokenTitle: {
+        display: 'flex',
+        flexDirection: 'column',
     },
-  },
-  token: {
-    display: "flex",
-    flexDirection: "row",
-    alignItems: "center",
-    alignContent: "center",
-    alignText: "center",
-    padding: "0px",
-  },
-  tokenTitle: {
-    display: "flex",
-    flexDirection: "column",
-  },
-  tokenName: {
-    display: "inline",
-    color: "#000",
-    opacity: "0.87",
-    fontSize: "1rem",
-    fontWeight: "400",
-    letterSpacing: "0.005em",
-    lineHeight: "1.875rem",
-    "@media(max-width: 1200px)": {
-      fontSize: "1rem",
+    tokenName: {
+        display: 'inline',
+        color: '#000',
+        opacity: '0.87',
+        fontSize: '1rem',
+        fontWeight: '400',
+        letterSpacing: '0.005em',
+        lineHeight: '1.875rem',
+        '@media(max-width: 1200px)': {
+            fontSize: '1rem',
+        },
+        '@media(max-width: 768px)': {
+            fontSize: '1rem',
+        },
     },
-    "@media(max-width: 768px)": {
-      fontSize: "1rem",
+    clearFont: {
+        color: '#000',
+        opacity: '0.87',
+        fontWeight: '400',
     },
-  },
-  clearFont: {
-    color: "#000",
-    opacity: "0.87",
-    fontWeight: "400",
-  },
-  faintFont: {
-    color: "#000",
-    opacity: "0.6",
-    fontWeight: "400",
-    fontSize: "0.875rem",
-  },
-    compositionOne: {
+    faintFont: {
+        color: '#000',
+        opacity: '0.6',
+        fontWeight: '400',
+        fontSize: '0.875rem',
     },
-  dashboard: {
+    compositionOne: {},
+    dashboard: {
         paddingLeft: '6.25rem',
         paddingRight: '6.25rem',
         '@media(max-width: 1024px)': {
@@ -193,90 +191,88 @@ export const useStyles = makeStyles({
             paddingLeft: '1rem',
             paddingRight: '1rem',
         },
-  },
-  borrowTablePadding: {
-    "@media(max-width: 600px)": {
-      paddingRight: "1.975rem",
-    },
-    "@media(min-width: 900px)": {
-      paddingRight: "0.975rem",
-    },
-    "@media(min-width: 1024px)": {
-      paddingRight: "0.9375rem",
     },
-    "@media(min-width: 1200px)": {
-      paddingRight: "0.875rem",
-    },
-  },
-  supplyTablePadding: {
-    "@media(min-width: 600px)": {
-      paddingRight: "1rem",
+    borrowTablePadding: {
+        '@media(max-width: 600px)': {
+            paddingRight: '1.975rem',
+        },
+        '@media(min-width: 900px)': {
+            paddingRight: '0.975rem',
+        },
+        '@media(min-width: 1024px)': {
+            paddingRight: '0.9375rem',
+        },
+        '@media(min-width: 1200px)': {
+            paddingRight: '0.875rem',
+        },
     },
-    "@media(min-width: 900px)": {
-      paddingRight: "2rem",
+    supplyTablePadding: {
+        '@media(min-width: 600px)': {
+            paddingRight: '1rem',
+        },
+        '@media(min-width: 900px)': {
+            paddingRight: '2rem',
+        },
+        '@media(min-width: 1024px)': {
+            paddingRight: '2rem',
+        },
+        '@media(min-width: 1200px)': {
+            paddingRight: '3rem',
+        },
     },
-    "@media(min-width: 1024px)": {
-      paddingRight: "2rem",
+    firstCell: {
+        width: '10%',
     },
-    "@media(min-width: 1200px)": {
-      paddingRight: "3rem",
+    secondCell: {},
+    thirdCell: {},
+    fourthCell: {
+        width: '30%',
     },
-  },
-   firstCell: {
-     width: "10%",
-   },
-   secondCell: {
-   },
-   thirdCell: {
-   },
-   fourthCell: {
-     width: "30%",
-   },
-   fifthCell: {
-	   width: "30%",
-	   right: "10px",
-   },
-   supplyButton: {
-	   borderRadius: "8px",
-	   marginRight: "30%",
-	   marginLeft: "10%",
-	   width: "50%",
-   },
-  tableTitle: {
-    color: "#000",
-    opacity: "0.87",
-    padding: " 1.5rem 0 .5rem",
-    fontSize: "1.25rem",
-    fontWeight: "500",
-    lineHeight: "30px",
-  },
-  emptyStateText: {
-    color: "#000",
-    fontSize: "1rem",
-    fontWeight: "400",
-    lineHeight: "30px",
-    letterSpacing: "0.005em",
-    "@media(min-width: 768px)": {
-      padding: "21px 35px 21px 30px !important",
+    fifthCell: {
+        width: '30%',
+        right: '10px',
     },
-  },
-  collateralPadding: {
-    "@media(min-width: 968px)": {
-      paddingRight: ".5rem !important",
+    supplyButton: {
+        borderRadius: '8px',
+        marginRight: '30%',
+        marginLeft: '10%',
+        width: '50%',
     },
-    "@media(min-width: 1200px)": {
-      paddingRight: "2rem !important",
+    tableTitle: {
+        color: '#000',
+        opacity: '0.87',
+        padding: ' 1.5rem 0 .5rem',
+        fontSize: '1.25rem',
+        fontWeight: '500',
+        lineHeight: '30px',
     },
-  },
-  switchPadding: {
-    "@media(min-width: 501px)": {
-      paddingRight: "2.5rem !important",
+    emptyStateText: {
+        color: '#000',
+        fontSize: '1rem',
+        fontWeight: '400',
+        lineHeight: '30px',
+        letterSpacing: '0.005em',
+        '@media(min-width: 768px)': {
+            padding: '21px 35px 21px 30px !important',
+        },
     },
-    "@media(min-width: 968px)": {
-      paddingRight: "2rem !important",
+    collateralPadding: {
+        '@media(min-width: 968px)': {
+            paddingRight: '.5rem !important',
+        },
+        '@media(min-width: 1200px)': {
+            paddingRight: '2rem !important',
+        },
     },
-    "@media(min-width: 1200px)": {
-      paddingRight: "4rem !important",
+    switchPadding: {
+        '@media(min-width: 501px)': {
+            paddingRight: '2.5rem !important',
+        },
+        '@media(min-width: 968px)': {
+            paddingRight: '2rem !important',
+        },
+        '@media(min-width: 1200px)': {
+            paddingRight: '4rem !important',
+        },
     },
-  },
 });
diff --git a/src/ui/src/components/Switch/index.js b/src/ui/src/components/Switch/index.js
index 19e47824..bd0caa83 100644
--- a/src/ui/src/components/Switch/index.js
+++ b/src/ui/src/components/Switch/index.js
@@ -3,79 +3,68 @@ import * as React from 'react';
 import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { useSwitch } from '@mui/core/SwitchUnstyled';
-import  MuiSwitch from '@mui/material/Switch';
+import MuiSwitch from '@mui/material/Switch';
 
 const CustomSwitch = styled((props) => (
-  <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
+    <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
 ))(({ theme }) => ({
-  width: 42,
-  height: 26,
-  padding: 0,
-  '& .MuiSwitch-switchBase': {
+    width: 42,
+    height: 26,
     padding: 0,
-    margin: 2.9,
-    transitionDuration: '300ms',
-    transform: 'translateX(1px) scale(0.5)',
-    color: '#79747E',
-    '&.Mui-checked': {
-	    padding: 0,
-	    margin: 2,
-	    width: "22px",
-	    height: "22px",
+    '& .MuiSwitch-switchBase': {
+        padding: 0,
+        margin: 2.9,
+        transitionDuration: '300ms',
+        transform: 'translateX(1px) scale(0.5)',
+        color: '#79747E',
+        '&.Mui-checked': {
+            padding: 0,
+            margin: 2,
+            width: '22px',
+            height: '22px',
 
-      transform: 'translateX(18px) scale(1)',
-       color: '#EADDFF',
-      '& + .MuiSwitch-track': {
-      border: '0px solid red',
-    backgroundColor: '#9F329F',
-        opacity: 1,
-        border: 0,
-      },
-      '&.Mui-disabled': {
-      border: '6px solid #fff',
-        opacity: 0.5,
-      },
+            transform: 'translateX(18px) scale(1)',
+            color: '#EADDFF',
+            '& + .MuiSwitch-track': {
+                border: '0px solid red',
+                backgroundColor: '#9F329F',
+                opacity: 1,
+                border: 0,
+            },
+            '&.Mui-disabled': {
+                border: '6px solid #fff',
+                opacity: 0.5,
+            },
+        },
+        '&.Mui-focusVisible .MuiSwitch-thumb': {},
+        '&.Mui-disabled + .MuiSwitch-thumb': {},
     },
-    '&.Mui-focusVisible .MuiSwitch-thumb': {
+    '& .MuiSwitch-thumb': {
+        boxSizing: 'border-box',
     },
-    '&.Mui-disabled + .MuiSwitch-thumb': {
+    '& .MuiSwitch-track': {
+        border: '2px solid #79747E',
+        borderRadius: 26 / 2,
+        backgroundColor: '#E6E0E9',
+        opacity: 1,
+        transition: theme.transitions.create(['background-color'], {
+            duration: 500,
+        }),
     },
-  },
-  '& .MuiSwitch-thumb': {
-    boxSizing: 'border-box',
-  },
-  '& .MuiSwitch-track': {
-      border: '2px solid #79747E',
-    borderRadius: 26 / 2,
-    backgroundColor: '#E6E0E9',
-    opacity: 1,
-    transition: theme.transitions.create(['background-color'], {
-      duration: 500,
-    }),
-  },
 }));
-	
+
 function BasicSwitch(props) {
-  const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+    const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
 
-  return (
-    <CustomSwitch
-      checked={checked}
-      disabled={disabled}
-      {...getInputProps()} 
-    />
-  );
+    return <CustomSwitch checked={checked} disabled={disabled} {...getInputProps()} />;
 }
 
 export default function Switch(props) {
-  const { data } = props;
+    const { data } = props;
 
-  return (
-    <div>
-      <BasicSwitch
-        checked={data.collateral} 
-        inputProps={{ 'aria-label': 'custom switch' }} 
-      />
-    </div>
-  );
+    return (
+        <div>
+            <BasicSwitch checked={data.collateral} inputProps={{ 'aria-label': 'custom switch' }} />
+        </div>
+    );
 }
diff --git a/src/util/src/TezosLendingPlatform.ts b/src/util/src/TezosLendingPlatform.ts
index e1a5d472..4767ed74 100644
--- a/src/util/src/TezosLendingPlatform.ts
+++ b/src/util/src/TezosLendingPlatform.ts
@@ -100,7 +100,6 @@ export namespace TezosLendingPlatform {
                         supply.totalAmount.minus(borrow.totalAmount).minus(fToken.totalReserves),
 		fToken);
 	    
-	console.log("!!! " + underlying.assetType + ": " + " Supply bigint " + supply.totalAmount + ", borrow bigint " + borrow.totalAmount + ", supply - borrow bigint " + borrow.totalAmount.minus(supply.totalAmount)  + ", available BigNumber " + available);
         return {
             currentPrice: price,
             address: address,

From a5e43f7b0ca52fd7d31e6e34ade845dbd401b889 Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Fri, 1 Nov 2024 18:49:39 +0530
Subject: [PATCH 11/13] spacing

---
 src/ui/src/components/Dashboard/index.tsx | 10 +++++++---
 src/ui/src/components/Dashboard/style.ts  | 17 +++++++++++++----
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/ui/src/components/Dashboard/index.tsx b/src/ui/src/components/Dashboard/index.tsx
index 84a2a47d..c939d78c 100644
--- a/src/ui/src/components/Dashboard/index.tsx
+++ b/src/ui/src/components/Dashboard/index.tsx
@@ -5,7 +5,7 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import Grid from '@mui/material/Grid';
-import { Typography } from '@mui/material';
+import { Box, Typography } from '@mui/material';
 
 import BorrowedTokenTable from './BorrowedTokenTable';
 import SuppliedTokenTable from './SuppliedTokenTable';
@@ -45,11 +45,15 @@ const Dashboard = () => {
                 <BorrowedTokenTable tableData={borrowedMarkets} />
             </Grid>
             <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
-                <Typography className={classes.tableTitle}> Assets to Supply </Typography>
+		<Box sx={{width: "100vw", display:"inline-block"}} >
+			<Typography noWrap={false} className={classes.tableTitle}> Assets to Supply </Typography>
+	        </Box>
                 <SupplyMarketTokenTable tableData={allMarkets} />
             </Grid>
             <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
-                <Typography className={classes.tableTitle}> Assets to Borrow </Typography>
+		<Box sx={{width: "100vw", display:"inline-block"}} >
+			<Typography noWrap={false} className={classes.tableTitle}>Assets to Borrow</Typography>
+	        </Box>
                 <BorrowMarketTokenTable tableData={allMarkets} />
             </Grid>
         </Grid>
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 0b168de2..cc77f8b9 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -194,16 +194,16 @@ export const useStyles = makeStyles({
     },
     borrowTablePadding: {
         '@media(max-width: 600px)': {
-            paddingRight: '1.975rem',
+            paddingLeft: '0.975rem',
         },
         '@media(min-width: 900px)': {
-            paddingRight: '0.975rem',
+            paddingLeft: '0.975rem',
         },
         '@media(min-width: 1024px)': {
-            paddingRight: '0.9375rem',
+            paddingLeft: '0.9375rem',
         },
         '@media(min-width: 1200px)': {
-            paddingRight: '0.875rem',
+            paddingLeft: '0.875rem',
         },
     },
     supplyTablePadding: {
@@ -238,6 +238,15 @@ export const useStyles = makeStyles({
         marginLeft: '10%',
         width: '50%',
     },
+    tableTitle2: {
+        color: '#000',
+        opacity: '0.87',
+        padding: ' 1.5rem 0 .5rem',
+	display: 'inline-block',
+        fontSize: '1.25rem',
+        fontWeight: '500',
+        lineHeight: '30px',
+    },
     tableTitle: {
         color: '#000',
         opacity: '0.87',

From cdbfa569d761537070b4ecd98c7dd5ad7bc23bbf Mon Sep 17 00:00:00 2001
From: Siddharth Vaderaa <svaderaa@gmail.com>
Date: Wed, 27 Nov 2024 12:10:32 +0530
Subject: [PATCH 12/13] One column view

---
 .../Dashboard/BorrowMarketTokenTable.tsx      | 14 +------
 src/ui/src/components/Dashboard/index.tsx     | 16 +++-----
 src/ui/src/components/Dashboard/style.ts      | 40 ++++++++++++++-----
 src/ui/src/components/Switch/index.js         | 33 ++++++++++-----
 4 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index 62f60bae..d6913906 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -136,7 +136,7 @@ const BorrowMarketTokenTable = (props) => {
                                             <Button
                                                 variant="contained"
                                                 size="medium"
-                                                sx={{ marginRight: '0%', borderRadius: '8px', right: '18%' }}
+						className={classes.borrowButton}
                                                 onClick={() => handleClickMktModal(data)}
                                             >
                                                 B<Typography textTransform={'lowercase'}>orrow</Typography>
@@ -144,17 +144,7 @@ const BorrowMarketTokenTable = (props) => {
                                             <Button
                                                 variant="contained"
                                                 size="medium"
-                                                onClick={() => handleClickDetails(data.address)}
-                                                sx={{
-                                                    color: '#2C2C2C',
-                                                    border: '1px solid #2C2C2C',
-                                                    borderRadius: '8px',
-                                                    backgroundColor: '#F2F3F7',
-                                                    '&:hover': {
-                                                        backgroundColor: 'lightgrey',
-                                                        boxShadow: 'none',
-                                                    },
-                                                }}
+						className={classes.detailsButton}
                                             >
                                                 D<Typography textTransform={'lowercase'}>etails</Typography>
                                             </Button>
diff --git a/src/ui/src/components/Dashboard/index.tsx b/src/ui/src/components/Dashboard/index.tsx
index c939d78c..ecb79ae9 100644
--- a/src/ui/src/components/Dashboard/index.tsx
+++ b/src/ui/src/components/Dashboard/index.tsx
@@ -36,24 +36,20 @@ const Dashboard = () => {
 
     return (
         <Grid container className={classes.dashboard}>
-            <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
+            <Grid item xs={12} md={6} className={classes.supplyTablePadding}>
                 <Typography className={classes.tableTitle}> Supplying </Typography>
                 <SuppliedTokenTable tableData={suppliedMarkets} />
             </Grid>
-            <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
+            <Grid item xs={12} md={6} sx={{ margin: { xs: 0 } }} className={classes.borrowTablePadding}>
                 <Typography className={classes.tableTitle}> Borrowing </Typography>
                 <BorrowedTokenTable tableData={borrowedMarkets} />
             </Grid>
-            <Grid item xs={6} md={6} className={classes.supplyTablePadding}>
-		<Box sx={{width: "100vw", display:"inline-block"}} >
-			<Typography noWrap={false} className={classes.tableTitle}> Assets to Supply </Typography>
-	        </Box>
+            <Grid item xs={12} md={6} className={classes.supplyTablePadding}>
+		<Typography noWrap={false} className={classes.tableTitle}> Assets to Supply </Typography>
                 <SupplyMarketTokenTable tableData={allMarkets} />
             </Grid>
-            <Grid item xs={6} md={6} className={classes.borrowTablePadding}>
-		<Box sx={{width: "100vw", display:"inline-block"}} >
-			<Typography noWrap={false} className={classes.tableTitle}>Assets to Borrow</Typography>
-	        </Box>
+            <Grid item xs={12} md={6} sx={{ margin: { xs: 0 } }} className={classes.borrowTablePadding}>
+		<Typography noWrap={false} className={classes.tableTitle}>Assets to Borrow</Typography>
                 <BorrowMarketTokenTable tableData={allMarkets} />
             </Grid>
         </Grid>
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index cc77f8b9..1a1483fa 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -145,6 +145,28 @@ export const useStyles = makeStyles({
         display: 'flex',
         flexDirection: 'column',
     },
+    borrowButton: {
+        marginRight: '0%',
+        borderRadius: '8px',
+        right: '10%',
+        '@media(max-width: 900px)': {
+		right: '10%'
+        },
+        '@media(max-width: 768px)': {
+        },
+        '@media(max-width: 501px)': {
+        },
+    },
+    detailsButton: {
+       color: '#2C2C2C',
+       border: '1px solid #2C2C2C',
+       borderRadius: '8px',
+       backgroundColor: '#F2F3F7',
+       '&:hover': {
+           backgroundColor: 'lightgrey',
+           boxShadow: 'none',
+       },
+    },
     tokenName: {
         display: 'inline',
         color: '#000',
@@ -193,12 +215,12 @@ export const useStyles = makeStyles({
         },
     },
     borrowTablePadding: {
-        '@media(max-width: 600px)': {
-            paddingLeft: '0.975rem',
-        },
-        '@media(min-width: 900px)': {
-            paddingLeft: '0.975rem',
-        },
+	'@media(min-width: 600px)': {
+	    paddingRight: '1rem',
+	},
+	'@media(min-width: 900px)': {
+	    paddingRight: '2rem',
+	},
         '@media(min-width: 1024px)': {
             paddingLeft: '0.9375rem',
         },
@@ -234,9 +256,9 @@ export const useStyles = makeStyles({
     },
     supplyButton: {
         borderRadius: '8px',
-        marginRight: '30%',
-        marginLeft: '10%',
-        width: '50%',
+        marginRight: '50%',
+        marginLeft: '0%',
+        width: '80%',
     },
     tableTitle2: {
         color: '#000',
diff --git a/src/ui/src/components/Switch/index.js b/src/ui/src/components/Switch/index.js
index bd0caa83..6bf96c1b 100644
--- a/src/ui/src/components/Switch/index.js
+++ b/src/ui/src/components/Switch/index.js
@@ -1,13 +1,19 @@
 // eslint-disable-next-line no-use-before-define
-import * as React from 'react';
-import clsx from 'clsx';
+import React, { forwardRef } from 'react';
 import { styled } from '@mui/system';
 import { useSwitch } from '@mui/core/SwitchUnstyled';
 import MuiSwitch from '@mui/material/Switch';
 
-const CustomSwitch = styled((props) => (
-    <MuiSwitch focusVisibleClassName=".Mui-focusVisible" disableRipple {...props} />
-))(({ theme }) => ({
+const CustomSwitch = styled(
+    forwardRef((props, ref) => (
+        <MuiSwitch
+            focusVisibleClassName=".Mui-focusVisible"
+            disableRipple
+            ref={ref} 
+            {...props}
+        />
+    )),
+)(({ theme }) => ({
     width: 42,
     height: 26,
     padding: 0,
@@ -22,7 +28,6 @@ const CustomSwitch = styled((props) => (
             margin: 2,
             width: '22px',
             height: '22px',
-
             transform: 'translateX(18px) scale(1)',
             color: '#EADDFF',
             '& + .MuiSwitch-track': {
@@ -53,12 +58,20 @@ const CustomSwitch = styled((props) => (
     },
 }));
 
-function BasicSwitch(props) {
-    const { getInputProps, checked, disabled, focusVisible } = useSwitch(props);
+const BasicSwitch = forwardRef((props, ref) => {
+    const { getInputProps, checked, disabled } = useSwitch(props);
 
-    return <CustomSwitch checked={checked} disabled={disabled} {...getInputProps()} />;
-}
+    return (
+        <CustomSwitch
+            ref={ref} 
+            checked={checked}
+            disabled={disabled}
+            {...getInputProps()}
+        />
+    );
+});
 
+// Switch component
 export default function Switch(props) {
     const { data } = props;
 

From 68b6dd45af765ea432f9b8bfdac0e52e4b32e49a Mon Sep 17 00:00:00 2001
From: "ilya.razievskij" <ilya.razievskij@gmail.com>
Date: Tue, 21 Jan 2025 11:35:10 +0200
Subject: [PATCH 13/13] feat: sticky columns

---
 .../Dashboard/BorrowMarketTokenTable.tsx      | 69 ++++++++++---------
 .../Dashboard/SupplyMarketTokenTable.tsx      | 36 +++++-----
 src/ui/src/components/Dashboard/style.ts      | 33 +++++++--
 3 files changed, 80 insertions(+), 58 deletions(-)

diff --git a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
index d6913906..9015904b 100644
--- a/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/BorrowMarketTokenTable.tsx
@@ -54,10 +54,13 @@ const BorrowMarketTokenTable = (props) => {
             <Table>
                 <TableHead>
                     <TableRow>
-                        <TableCell> Token </TableCell>
+                        <TableCell className={classes.stickyCellLeft}>
+                            Token
+                        </TableCell>
                         <TableCell align="center"> Available </TableCell>
                         <TableCell align="center"> Borrow APY </TableCell>
-                        <TableCell align="center"> </TableCell>
+                        <TableCell align="center" className={classes.stickyCellRight}> </TableCell>
+                        <TableCell align="center" className={classes.fifthCell}> </TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -65,22 +68,20 @@ const BorrowMarketTokenTable = (props) => {
                         <React.Fragment key={data.title}>
                             {(address && data.walletBalance) || (!address && data.marketSize) ? (
                                 <TableRow key={data.title}>
-                                    <TableCell className={classes.firstCell}>
-                                        <div>
-                                            <div className={classes.token}>
-                                                <img
-                                                    src={data.logo}
-                                                    alt={`${data.title}-Icon`}
-                                                    className={classes.img}
-                                                />
+                                    <TableCell className={`${classes.firstCell} ${classes.stickyCellLeft}`}>
+                                        <div className={classes.token}>
+                                            <img
+                                                src={data.logo}
+                                                alt={`${data.title}-Icon`}
+                                                className={classes.img}
+                                            />
 
-                                                <div className={classes.tokenTitle}>
-                                                    <Typography className={classes.tokenName}> {data.name} </Typography>
-                                                    <Typography className={classes.faintFont}>
-                                                        {' '}
-                                                        {data.title}{' '}
-                                                    </Typography>
-                                                </div>
+                                            <div className={classes.tokenTitle}>
+                                                <Typography className={classes.tokenName}> {data.name} </Typography>
+                                                <Typography className={classes.faintFont}>
+                                                    {' '}
+                                                    {data.title}{' '}
+                                                </Typography>
                                             </div>
                                         </div>
                                     </TableCell>
@@ -131,24 +132,24 @@ const BorrowMarketTokenTable = (props) => {
                                             %
                                         </span>
                                     </TableCell>
-                                    <TableCell align="center" className={classes.fifthCell}>
-                                        <span>
-                                            <Button
-                                                variant="contained"
-                                                size="medium"
-						className={classes.borrowButton}
-                                                onClick={() => handleClickMktModal(data)}
-                                            >
-                                                B<Typography textTransform={'lowercase'}>orrow</Typography>
-                                            </Button>
-                                            <Button
-                                                variant="contained"
-                                                size="medium"
-						className={classes.detailsButton}
-                                            >
+                                    <TableCell className={classes.stickyCellRight}>
+                                        <Button
+                                            variant="contained"
+                                            size="medium"
+                                            className={classes.borrowButton}
+                                            onClick={() => handleClickMktModal(data)}
+                                        >
+                                            B<Typography textTransform={'lowercase'}>orrow</Typography>
+                                        </Button>
+                                    </TableCell>
+                                    <TableCell className={classes.fifthCell}>
+                                        <Button
+                                            variant="contained"
+                                            size="medium"
+						                    className={classes.detailsButton}
+                                        >
                                                 D<Typography textTransform={'lowercase'}>etails</Typography>
-                                            </Button>
-                                        </span>
+                                        </Button>
                                     </TableCell>
                                 </TableRow>
                             ) : (
diff --git a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
index 005c0875..129e9b9c 100644
--- a/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
+++ b/src/ui/src/components/Dashboard/SupplyMarketTokenTable.tsx
@@ -46,10 +46,12 @@ const SupplyMarketTokenTable = (props) => {
             <Table size="medium" sx={{ marginRight: '0px' }}>
                 <TableHead>
                     <TableRow>
-                        <TableCell> Token </TableCell>
+                        <TableCell className={classes.stickyCellLeft}>
+                            Token
+                        </TableCell>
                         <TableCell align="center"> Wallet </TableCell>
                         <TableCell align="center"> Supply APY </TableCell>
-                        <TableCell align="center"> </TableCell>
+                        <TableCell className={classes.stickyCellRight} align="center"> </TableCell>
                     </TableRow>
                 </TableHead>
                 <TableBody>
@@ -57,22 +59,20 @@ const SupplyMarketTokenTable = (props) => {
                         <React.Fragment key={data.title}>
                             {(address && data.walletBalance) || (!address && data.marketSize) ? (
                                 <TableRow key={data.title} onClick={() => handleClickMktModal(data)}>
-                                    <TableCell className={classes.firstCell}>
-                                        <div>
-                                            <div className={classes.token}>
-                                                <img
-                                                    src={data.logo}
-                                                    alt={`${data.title}-Icon`}
-                                                    className={classes.img}
-                                                />
+                                    <TableCell className={`${classes.firstCell} ${classes.stickyCellLeft}`}>
+                                        <div className={classes.token}>
+                                            <img
+                                                src={data.logo}
+                                                alt={`${data.title}-Icon`}
+                                                className={classes.img}
+                                            />
 
-                                                <div className={classes.tokenTitle}>
-                                                    <Typography className={classes.tokenName}> {data.name} </Typography>
-                                                    <Typography className={classes.faintFont}>
-                                                        {' '}
-                                                        {data.title}{' '}
-                                                    </Typography>
-                                                </div>
+                                            <div className={classes.tokenTitle}>
+                                                <Typography className={classes.tokenName}> {data.name} </Typography>
+                                                <Typography className={classes.faintFont}>
+                                                    {' '}
+                                                    {data.title}{' '}
+                                                </Typography>
                                             </div>
                                         </div>
                                     </TableCell>
@@ -120,7 +120,7 @@ const SupplyMarketTokenTable = (props) => {
                                             %
                                         </span>
                                     </TableCell>
-                                    <TableCell align="center" className={classes.fourthCell}>
+                                    <TableCell align="center" className={`${classes.fourthCell} ${classes.stickyCellRight}`}>
                                         <span>
                                             <Button
                                                 variant="contained"
diff --git a/src/ui/src/components/Dashboard/style.ts b/src/ui/src/components/Dashboard/style.ts
index 1f4d0a5c..045d1b77 100644
--- a/src/ui/src/components/Dashboard/style.ts
+++ b/src/ui/src/components/Dashboard/style.ts
@@ -151,12 +151,9 @@ export const useStyles = makeStyles({
     borrowButton: {
         marginRight: '0%',
         borderRadius: '8px',
-        right: '10%',
-        '@media(max-width: 900px)': {
-            right: '10%',
-        },
         '@media(max-width: 768px)': {},
         '@media(max-width: 501px)': {},
+        width: '80%'
     },
     detailsButton: {
         color: '#2C2C2C',
@@ -167,6 +164,7 @@ export const useStyles = makeStyles({
             backgroundColor: 'lightgrey',
             boxShadow: 'none',
         },
+        width: '80%'
     },
     tokenName: {
         display: 'inline',
@@ -252,12 +250,17 @@ export const useStyles = makeStyles({
         width: '30%',
     },
     fifthCell: {
-        width: '30%',
+        width: '15%',
         right: '10px',
+        '@media(max-width: 1300px)': {
+            opacity: '1 !important',
+        },
+        paddingLeft: '1px !important',
+        backgroundColor: '#ECF4FF'
     },
     supplyButton: {
         borderRadius: '8px',
-        marginRight: '50%',
+        marginRight: '25%',
         marginLeft: '0%',
         width: '80%',
     },
@@ -307,4 +310,22 @@ export const useStyles = makeStyles({
             paddingRight: '4rem !important',
         },
     },
+    stickyCellLeft: {
+        '@media(max-width: 1300px)': {
+            position: 'sticky',
+            zIndex: 2,
+            left: 0,
+            opacity: '1 !important',
+        },
+        backgroundColor: '#ECF4FF'
+    },
+    stickyCellRight: {
+        '@media(max-width: 1300px)': {
+            position: 'sticky',
+            zIndex: 2,
+            right: 0,
+            opacity: '1 !important',
+        },
+        backgroundColor: '#ECF4FF'
+    },
 });