diff --git a/app/lending/components/cTokenRow.tsx b/app/lending/components/cTokenRow.tsx
new file mode 100644
index 00000000..6e02e6b4
--- /dev/null
+++ b/app/lending/components/cTokenRow.tsx
@@ -0,0 +1,64 @@
+import Button from "@/components/button/button";
+import Container from "@/components/container/container";
+import Icon from "@/components/icon/icon";
+import Spacer from "@/components/layout/spacer";
+import Text from "@/components/text";
+import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens";
+import { formatBalance } from "@/utils/tokenBalances.utils";
+
+export const CTokenRow = ({
+  cToken,
+  onClick,
+}: {
+  cToken: CTokenWithUserData;
+  onClick: () => void;
+}) => [
+  <>
+    <Icon icon={{ url: cToken.underlying.logoURI, size: 30 }} />
+    <Spacer width="10px" />
+    <Text theme="primary-dark" key={cToken.name + cToken.name}>
+      {cToken.underlying.name}
+    </Text>
+  </>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.supplyApy"}>
+    {cToken.supplyApy + "%"}
+  </Text>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.balance"}>
+    {formatBalance(
+      cToken.userDetails?.balanceOfUnderlying ?? "0",
+      cToken.underlying.decimals,
+      {
+        commify: true,
+      }
+    )}
+  </Text>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.ubalance"}>
+    {formatBalance(
+      cToken.userDetails?.supplyBalanceInUnderlying ?? "0",
+      cToken.underlying.decimals,
+      {
+        commify: true,
+      }
+    )}
+  </Text>,
+  <Text theme="primary-dark" key={cToken.name + "cToken.CF"}>
+    {formatBalance(cToken.collateralFactor, 16) + "%"}
+  </Text>,
+  <Container key={cToken.name + "Test"} direction="row">
+    <Button
+      key={cToken.name + "cToken.supply"}
+      color="primary"
+      onClick={onClick}
+    >
+      Supply
+    </Button>
+    <Spacer width="10px" />
+    <Button
+      key={cToken.name + "cToken.withdraw"}
+      color="secondary"
+      onClick={onClick}
+    >
+      Withdraw
+    </Button>
+  </Container>,
+];
diff --git a/app/lending/components/highlightCard.module.scss b/app/lending/components/highlightCard.module.scss
new file mode 100644
index 00000000..d601f67a
--- /dev/null
+++ b/app/lending/components/highlightCard.module.scss
@@ -0,0 +1,39 @@
+.container {
+  background: var(--card-sub-surface-color, #dfdfdf);
+  box-shadow: 6px 6px 0px 0px rgba(17, 17, 17, 0.15);
+
+  margin: 0 auto;
+  //   width: 920px;
+  //   height: 320px;
+  width: 100%;
+  padding-bottom: 1rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.header {
+  background: var(--card-primary-color);
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.amounts {
+  padding: 1rem 2rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.actions {
+  padding: 1rem 2rem;
+  display: flex;
+  width: 70%;
+  gap: 2rem;
+}
+
+.logo {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  transform: translate(16%, 16%);
+}
diff --git a/app/lending/components/highlightCard.tsx b/app/lending/components/highlightCard.tsx
new file mode 100644
index 00000000..fc112c24
--- /dev/null
+++ b/app/lending/components/highlightCard.tsx
@@ -0,0 +1,100 @@
+import styles from "./highlightCard.module.scss";
+import Button from "@/components/button/button";
+import Image from "next/image";
+import Item from "./item";
+import Icon from "@/components/icon/icon";
+interface Props {
+  token: {
+    name: string;
+    imgUrl: string;
+    supplyAPR: string;
+    borrowAPR: string;
+    walletBalance?: string;
+    amountStaked?: string;
+    outStandingDebt?: string;
+    supply: () => void;
+    borrow: () => void;
+  };
+}
+const HighlightCard = (props: Props) => {
+  return (
+    <div className={styles.container}>
+      <Image
+        className={styles.logo}
+        src={props.token.imgUrl}
+        alt={"logo"}
+        height={200}
+        width={200}
+      />
+      <div className={styles.header}>
+        <Item name="Asset" value={props.token.name} theme="primary-light" />
+        <Item
+          name="Supply APR"
+          value={props.token.supplyAPR}
+          theme="primary-light"
+        />
+        <Item
+          name="Borrow APR"
+          value={props.token.borrowAPR}
+          theme="primary-light"
+        />
+      </div>
+      <div className={styles.amounts}>
+        <Item
+          name="Wallet Balance"
+          value={props.token.walletBalance ?? "0"}
+          postChild={
+            <Icon
+              themed
+              icon={{
+                url: "/tokens/note.svg",
+                size: 24,
+              }}
+            />
+          }
+        />
+        <Item
+          name="Amount Staked"
+          value={props.token.amountStaked ?? "0"}
+          postChild={
+            <Icon
+              themed
+              icon={{
+                url: "/tokens/note.svg",
+                size: 24,
+              }}
+            />
+          }
+        />
+        <Item
+          name="Outstanding Debt"
+          value={props.token.outStandingDebt ?? "0"}
+        />
+      </div>
+
+      <div className={styles.actions}>
+        <Button
+          fontFamily="proto_mono"
+          width={"fill"}
+          height={"large"}
+          fontSize={"lg"}
+          onClick={props.token.supply}
+        >
+          Stake note
+        </Button>
+
+        <Button
+          fontFamily="proto_mono"
+          width={"fill"}
+          height={"large"}
+          fontSize={"lg"}
+          onClick={props.token.borrow}
+        >
+          borrow note
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default HighlightCard;
diff --git a/app/lending/components/item.module.scss b/app/lending/components/item.module.scss
new file mode 100644
index 00000000..ef86b2d7
--- /dev/null
+++ b/app/lending/components/item.module.scss
@@ -0,0 +1,18 @@
+.item {
+  display: flex;
+  flex-grow: 1;
+  width: 100%;
+  flex-direction: column;
+}
+
+.title {
+  font-size: 16px;
+}
+
+.value {
+  font-size: 32px !important;
+}
+
+.postChild {
+  margin-left: -1rem;
+}
diff --git a/app/lending/components/item.tsx b/app/lending/components/item.tsx
new file mode 100644
index 00000000..eaa67c05
--- /dev/null
+++ b/app/lending/components/item.tsx
@@ -0,0 +1,28 @@
+import styles from "./item.module.scss";
+import Text from "@/components/text";
+
+type ItemProps = {
+  name: string;
+  value: string;
+  postChild?: React.ReactNode;
+  theme?:
+    | "primary-light"
+    | "primary-dark"
+    | "secondary-light"
+    | "secondary-dark"
+    | undefined;
+};
+
+const Item = ({ name, value, theme, postChild }: ItemProps) => (
+  <div className={styles.item}>
+    <Text className={styles.title} theme={theme} font="proto_mono">
+      {name}
+    </Text>
+    <Text className={styles.value} theme={theme} font="proto_mono">
+      {value}{" "}
+      {postChild && <span className={styles.postChild}>{postChild}</span>}
+    </Text>
+  </div>
+);
+
+export default Item;
diff --git a/app/lending/components/modal/modal.module.scss b/app/lending/components/modal/modal.module.scss
new file mode 100644
index 00000000..5bd218ec
--- /dev/null
+++ b/app/lending/components/modal/modal.module.scss
@@ -0,0 +1,26 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  //   min-height: 42rem;
+  margin: 0 -15px;
+  margin-bottom: -15px;
+}
+
+.card {
+  border-radius: var(--border-radius, 0px);
+  background: var(--card-surface-color, #f1f1f1);
+  padding: 1rem;
+  gap: 10px;
+  /* old */
+  box-shadow: -3px -3px 0px 0px rgba(17, 17, 17, 0.2) inset,
+    2px 2px 0px 0px rgba(255, 255, 255, 0.4) inset;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  align-items: center;
+  width: 100%;
+  padding: 1rem;
+}
diff --git a/app/lending/components/modal/modal.tsx b/app/lending/components/modal/modal.tsx
new file mode 100644
index 00000000..a9356b44
--- /dev/null
+++ b/app/lending/components/modal/modal.tsx
@@ -0,0 +1,292 @@
+import Button from "@/components/button/button";
+import Text from "@/components/text";
+import Input from "@/components/input/input";
+import { CTokenLendingTxTypes } from "@/hooks/lending/interfaces/lendingTxTypes";
+import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens";
+import { maxAmountForLendingTx } from "@/utils/clm/limits.utils";
+import { UserLMPosition } from "@/hooks/lending/interfaces/userPositions";
+import styles from "./modal.module.scss";
+import Tabs from "@/components/tabs/tabs";
+import Image from "next/image";
+import Container from "@/components/container/container";
+import { formatBalance } from "@/utils/tokenBalances.utils";
+import Icon from "@/components/icon/icon";
+import Spacer from "@/components/layout/spacer";
+interface Props {
+  selectedToken: CTokenWithUserData | null;
+  transaction: {
+    performTx: (amount: string, txType: CTokenLendingTxTypes) => void;
+    canPerformTx: (amount: string, txType: CTokenLendingTxTypes) => boolean;
+  };
+  currentAction: CTokenLendingTxTypes;
+  setCurrentAction: (action: CTokenLendingTxTypes) => void;
+  amount: string;
+  setAmount: (amount: string) => void;
+  clmPosition: {
+    position: UserLMPosition;
+    general: {
+      maxAccountLiquidity: string;
+      outstandingDebt: string;
+      percentLimitUsed: string;
+      netApr: string;
+    };
+  };
+}
+
+interface LSProps {
+  action: CTokenLendingTxTypes;
+}
+export const LendingModal = ({
+  selectedToken,
+  transaction,
+  currentAction,
+  setCurrentAction,
+  amount,
+  setAmount,
+  clmPosition,
+}: Props) => {
+  const LendingActionSwitch = ({ action }: LSProps) => (
+    <Button
+      color={action === currentAction ? "accent" : "primary"}
+      onClick={() => setCurrentAction(action)}
+    >
+      {action}
+    </Button>
+  );
+
+  function data() {
+    if (selectedToken == null) {
+      return <Text>No Active Token</Text>;
+    }
+
+    return (
+      <>
+        <Text size="lg" font="proto_mono">
+          {selectedToken.symbol}
+        </Text>
+        <Text size="sm">name: {selectedToken.name}</Text>
+        <Text size="sm">Address: {selectedToken.address}</Text>
+        <Text size="sm">BorrowApy: {selectedToken.borrowApy}</Text>
+        <Text size="sm">BorrowCap: {selectedToken.borrowCap}</Text>
+        <Text size="sm">Cash: {selectedToken.cash}</Text>
+        <Text size="sm">
+          CollateralFactor: {selectedToken.collateralFactor}
+        </Text>
+        <Text size="sm">Decimals: {selectedToken.decimals}</Text>
+        <Text size="sm">DistApy: {selectedToken.distApy}</Text>
+        <Text size="sm">Exchange Rate: {selectedToken.exchangeRate}</Text>
+        <Text size="sm">IsListed: {selectedToken.isListed ? "yes" : "no"}</Text>
+        <Text size="sm">Liquidity: {selectedToken.liquidity}</Text>
+        <Text size="sm">Underlying Price: {selectedToken.price}</Text>
+        <Text size="sm">Supply Apy: {selectedToken.supplyApy}</Text>
+        <h1>----</h1>
+        <Text size="lg" font="proto_mono">
+          Underlying:
+        </Text>
+        <Text size="sm">Address: {selectedToken.underlying.address}</Text>
+        <Text size="sm">Decimals: {selectedToken.underlying.decimals}</Text>
+        <Text size="sm">Symbol: {selectedToken.underlying.symbol}</Text>
+        <Text size="sm">Name: {selectedToken.underlying.name}</Text>
+        <h1>----</h1>
+        <Text size="lg" font="proto_mono">
+          User Data:
+        </Text>
+        <Text size="sm">
+          CToken Balance: {selectedToken.userDetails?.balanceOfCToken}
+        </Text>
+        <Text size="sm">
+          Underlying Balance: {selectedToken.userDetails?.balanceOfUnderlying}
+        </Text>
+        <Text size="sm">
+          Borrow Balance: {selectedToken.userDetails?.borrowBalance}
+        </Text>
+        <Text size="sm">Rewards: {selectedToken.userDetails?.rewards}</Text>
+        <Text size="sm">
+          Is Collateral:{" "}
+          {selectedToken.userDetails?.isCollateral ? "yes" : "no"}
+        </Text>
+        <Text size="sm">
+          Supply Balance In Underlying:{" "}
+          {selectedToken.userDetails?.supplyBalanceInUnderlying}
+        </Text>
+        <Text size="sm">
+          Allowance Underlying: {selectedToken.userDetails?.underlyingAllowance}
+        </Text>
+        <Input
+          type="amount"
+          balance={maxAmountForLendingTx(
+            currentAction,
+            selectedToken,
+            clmPosition.position
+          )}
+          decimals={selectedToken.underlying.decimals}
+          value={amount}
+          onChange={(val) => {
+            setAmount(val.target.value);
+          }}
+        />
+        <div style={{ display: "flex", flexDirection: "row" }}>
+          <LendingActionSwitch action={CTokenLendingTxTypes.SUPPLY} />
+          <LendingActionSwitch action={CTokenLendingTxTypes.WITHDRAW} />
+          <LendingActionSwitch action={CTokenLendingTxTypes.BORROW} />
+          <LendingActionSwitch action={CTokenLendingTxTypes.REPAY} />
+        </div>
+        <Button
+          disabled={!transaction.canPerformTx(amount, currentAction)}
+          onClick={() => transaction.performTx(amount, currentAction)}
+        >
+          CONFIRM
+        </Button>
+      </>
+    );
+  }
+
+  function Content(token: CTokenWithUserData) {
+    return (
+      <div className={styles.content}>
+        <Spacer height="20px" />
+        <Image
+          src={token.underlying.logoURI}
+          width={50}
+          height={50}
+          alt={"Transaction"}
+        />
+        <Spacer height="10px" />
+
+        <Text font="proto_mono" size="lg">
+          {token.symbol}
+        </Text>
+        <Spacer height="20px" />
+
+        <Container width="100%" gap={20}>
+          <Container className={styles.card} padding="md" width="100%">
+            <Card name="Dist APR" value={token.borrowApy + "%"} />
+            <Card name="Supply APR" value={token.supplyApy + "%"} />
+            <Card
+              name="Collateral Factor"
+              value={formatBalance(token.collateralFactor, 18)}
+            />
+          </Container>
+          <Container className={styles.card} padding="md" width="100%">
+            <Card
+              name="Wallet Balance"
+              value={formatBalance(
+                token.userDetails?.balanceOfUnderlying ?? "0",
+                token.underlying.decimals,
+                {
+                  commify: true,
+                }
+              )}
+              note
+            />
+
+            <Card
+              name="Supplied Amount"
+              value={formatBalance(
+                token.userDetails?.supplyBalanceInUnderlying ?? "0",
+                token.underlying.decimals,
+                {
+                  commify: true,
+                }
+              )}
+              note
+            />
+
+            <Card
+              name="Account Liquidity Remaining"
+              value={
+                clmPosition.general.maxAccountLiquidity === "0"
+                  ? "0"
+                  : formatBalance(
+                      clmPosition.general.maxAccountLiquidity,
+                      token.underlying.decimals,
+                      {
+                        commify: true,
+                      }
+                    )
+              }
+              note
+            />
+          </Container>
+        </Container>
+        <Spacer height="70px" />
+        <div
+          style={{
+            width: "100%",
+          }}
+        >
+          <Input
+            type="amount"
+            balance="0"
+            decimals={token.underlying.decimals}
+            onChange={(val) => {
+              setAmount(val.target.value);
+            }}
+            placeholder="0.0"
+            value={amount}
+          />
+          <Spacer height="20px" />
+          <Button
+            width={"fill"}
+            disabled={!transaction.canPerformTx(amount, currentAction)}
+            onClick={() => transaction.performTx(amount, currentAction)}
+          >
+            CONFIRM
+          </Button>
+        </div>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.container}>
+      {selectedToken ? (
+        <>
+          <Tabs
+            tabs={[
+              {
+                title: "Stake",
+                content: Content(selectedToken),
+              },
+              {
+                title: "withdraw",
+                content: Content(selectedToken),
+              },
+            ]}
+          />
+        </>
+      ) : (
+        <Text>No Active Token</Text>
+      )}
+    </div>
+  );
+};
+
+const Card = ({
+  name,
+  value,
+  note,
+}: {
+  name: string;
+  value: string;
+  note?: boolean;
+}) => (
+  <Container direction="row" gap="auto">
+    <Text size="sm" font="proto_mono">
+      {name}
+    </Text>
+    <Text size="sm" font="proto_mono">
+      {value}{" "}
+      <span>
+        {note && (
+          <Icon
+            themed
+            icon={{
+              url: "/tokens/note.svg",
+              size: 14,
+            }}
+          />
+        )}
+      </span>
+    </Text>
+  </Container>
+);
diff --git a/app/lending/components/outlineCard.module.scss b/app/lending/components/outlineCard.module.scss
new file mode 100644
index 00000000..30554270
--- /dev/null
+++ b/app/lending/components/outlineCard.module.scss
@@ -0,0 +1,32 @@
+.container {
+  width: 100%;
+  aspect-ratio: 1;
+  border-top: 1px solid var(--card-primary-color);
+  border-bottom: 1px solid var(--card-primary-color);
+  position: relative;
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  gap: 10px;
+  &::before {
+    content: "";
+    position: absolute;
+    top: -1px;
+    left: 0;
+    width: calc(100% - 1px);
+    height: 10px;
+    border-left: 1px solid var(--card-primary-color);
+    border-right: 1px solid var(--card-primary-color);
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: calc(100% - 1px);
+    height: 10px;
+    border-left: 1px solid var(--card-primary-color);
+    border-right: 1px solid var(--card-primary-color);
+  }
+}
diff --git a/app/lending/components/outlineCard.tsx b/app/lending/components/outlineCard.tsx
new file mode 100644
index 00000000..2948d1cb
--- /dev/null
+++ b/app/lending/components/outlineCard.tsx
@@ -0,0 +1,9 @@
+import styles from "./outlineCard.module.scss";
+interface Props {
+  children: React.ReactNode;
+}
+const OutlineCard = (props: Props) => {
+  return <div className={styles.container}>{props.children}</div>;
+};
+
+export default OutlineCard;
diff --git a/app/lending/lending.module.scss b/app/lending/lending.module.scss
new file mode 100644
index 00000000..b052b7ef
--- /dev/null
+++ b/app/lending/lending.module.scss
@@ -0,0 +1,42 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-size: 42px !important;
+  padding-left: 4rem;
+  text-align: left;
+  width: 100%;
+  max-width: 1500px;
+}
+
+.grid {
+  display: flex;
+  gap: 2rem;
+  padding: 2rem;
+  padding-top: 0rem;
+  max-width: 1500px;
+}
+
+.highlightCard {
+  max-width: 1000px;
+  width: 100%;
+  display: flex;
+  justify-content: stretch;
+}
+
+.mainTable {
+  max-width: 1000px;
+  width: 100%;
+  display: flex;
+  justify-content: stretch;
+}
+
+.widget1 {
+  //   width: 70%;
+}
+
+.widget2 {
+}
diff --git a/app/lending/page.tsx b/app/lending/page.tsx
index 973c9926..faf94596 100644
--- a/app/lending/page.tsx
+++ b/app/lending/page.tsx
@@ -1,18 +1,23 @@
 "use client";
 
 import Button from "@/components/button/button";
+import styles from "./lending.module.scss";
 import Icon from "@/components/icon/icon";
 import Input from "@/components/input/input";
 import Spacer from "@/components/layout/spacer";
 import Modal from "@/components/modal/modal";
 import Table from "@/components/table/table";
-import { CTokenLendingTxTypes } from "@/hooks/lending/interfaces/lendingTxTypes";
-import { CTokenWithUserData } from "@/hooks/lending/interfaces/tokens";
-import { maxAmountForLendingTx } from "@/utils/clm/limits.utils";
+
 import { formatBalance } from "@/utils/tokenBalances.utils";
 import { useLendingCombo } from "./utils";
 import Text from "@/components/text";
 import Container from "@/components/container/container";
+import HighlightCard from "./components/highlightCard";
+import OutlineCard from "./components/outlineCard";
+import Item from "./components/item";
+import LoadingIcon from "@/components/loader/loading";
+import { LendingModal } from "./components/modal/modal";
+import { CTokenRow } from "./components/cTokenRow";
 
 interface LendingProps {
   Asset: string;
@@ -28,7 +33,8 @@ interface LendingProps {
 }
 
 export default function LendingPage() {
-  const { cTokens, clmPosition, transaction, selection } = useLendingCombo();
+  const { cTokens, clmPosition, transaction, selection, isLoading } =
+    useLendingCombo();
   const { cNote, rwas } = cTokens;
   const {
     currentAction,
@@ -40,229 +46,206 @@ export default function LendingPage() {
     amount,
     setAmount,
   } = selection;
-  interface LSProps {
-    action: CTokenLendingTxTypes;
-  }
-  const LendingActionSwitch = ({ action }: LSProps) => (
-    <Button
-      color={action === currentAction ? "accent" : "primary"}
-      onClick={() => setCurrentAction(action)}
-    >
-      {action}
-    </Button>
-  );
-
-  const CTokenRow = ({ cToken }: { cToken: CTokenWithUserData }) => [
-    <>
-      <Icon icon={{ url: cToken.underlying.logoURI, size: 30 }} />
-      <Spacer width="10px" />
-      <Text theme="primary-dark" key={cToken.name + cToken.name}>
-        {cToken.underlying.name}
-      </Text>
-    </>,
-    <Text theme="primary-dark" key={cToken.name + "cToken.supplyApy"}>
-      {cToken.supplyApy + "%"}
-    </Text>,
-    <Text theme="primary-dark" key={cToken.name + "cToken.balance"}>
-      {formatBalance(
-        cToken.userDetails?.balanceOfUnderlying ?? "0",
-        cToken.underlying.decimals,
-        {
-          commify: true,
-        }
-      )}
-    </Text>,
-    <Text theme="primary-dark" key={cToken.name + "cToken.ubalance"}>
-      {formatBalance(
-        cToken.userDetails?.supplyBalanceInUnderlying ?? "0",
-        cToken.underlying.decimals,
-        {
-          commify: true,
-        }
-      )}
-    </Text>,
-    <Text theme="primary-dark" key={cToken.name + "cToken.CF"}>
-      {formatBalance(cToken.collateralFactor, 16) + "%"}
-    </Text>,
-    <Container key={cToken.name + "Test"} direction="row">
-      <Button
-        key={cToken.name + "cToken.supply"}
-        color="primary"
-        onClick={() => {
-          setSelectedToken(cToken);
-          setModalOpen(true);
-        }}
-      >
-        Supply
-      </Button>
-      ,
-      <Button
-        key={cToken.name + "cToken.siwthdraw"}
-        color="secondary"
-        onClick={() => {
-          setSelectedToken(cToken);
-          setModalOpen(true);
-        }}
-      >
-        Withdraw
-      </Button>
-    </Container>,
-  ];
 
   return (
-    <div>
-      <Text size="x-lg" font="proto_mono">
+    <div className={styles.container}>
+      <Text size="x-lg" font="proto_mono" className={styles.title}>
         Lending
       </Text>
 
-      <Modal open={modalOpen} onClose={() => setModalOpen(false)}>
-        <>
-          {selectedToken && (
-            <>
-              <Text size="lg" font="proto_mono">
-                {selectedToken.symbol}
-              </Text>
-              <Text size="sm">name: {selectedToken.name}</Text>
-              <Text size="sm">Address: {selectedToken.address}</Text>
-              <Text size="sm">BorrowApy: {selectedToken.borrowApy}</Text>
-              <Text size="sm">BorrowCap: {selectedToken.borrowCap}</Text>
-              <Text size="sm">Cash: {selectedToken.cash}</Text>
-              <Text size="sm">
-                CollateralFactor: {selectedToken.collateralFactor}
-              </Text>
-              <Text size="sm">Decimals: {selectedToken.decimals}</Text>
-              <Text size="sm">DistApy: {selectedToken.distApy}</Text>
-              <Text size="sm">Exchange Rate: {selectedToken.exchangeRate}</Text>
-              <Text size="sm">
-                IsListed: {selectedToken.isListed ? "yes" : "no"}
-              </Text>
-              <Text size="sm">Liquidity: {selectedToken.liquidity}</Text>
-              <Text size="sm">Underlying Price: {selectedToken.price}</Text>
-              <Text size="sm">Supply Apy: {selectedToken.supplyApy}</Text>
-              <h1>----</h1>
-              <Text size="lg" font="proto_mono">
-                Underlying:
-              </Text>
-              <Text size="sm">Address: {selectedToken.underlying.address}</Text>
-              <Text size="sm">
-                Decimals: {selectedToken.underlying.decimals}
-              </Text>
-              <Text size="sm">Symbol: {selectedToken.underlying.symbol}</Text>
-              <Text size="sm">Name: {selectedToken.underlying.name}</Text>
-              <h1>----</h1>
-              <Text size="lg" font="proto_mono">
-                User Data:
-              </Text>
-              <Text size="sm">
-                CToken Balance: {selectedToken.userDetails?.balanceOfCToken}
-              </Text>
-              <Text size="sm">
-                Underlying Balance:{" "}
-                {selectedToken.userDetails?.balanceOfUnderlying}
-              </Text>
-              <Text size="sm">
-                Borrow Balance: {selectedToken.userDetails?.borrowBalance}
-              </Text>
-              <Text size="sm">
-                Rewards: {selectedToken.userDetails?.rewards}
-              </Text>
-              <Text size="sm">
-                Is Collateral:{" "}
-                {selectedToken.userDetails?.isCollateral ? "yes" : "no"}
-              </Text>
-              <Text size="sm">
-                Supply Balance In Underlying:{" "}
-                {selectedToken.userDetails?.supplyBalanceInUnderlying}
-              </Text>
-              <Text size="sm">
-                Allowance Underlying:{" "}
-                {selectedToken.userDetails?.underlyingAllowance}
-              </Text>
-              <Input
-                type="amount"
-                balance={maxAmountForLendingTx(
-                  currentAction,
-                  selectedToken,
-                  clmPosition.position
-                )}
-                decimals={selectedToken.underlying.decimals}
-                value={amount}
-                onChange={(val) => {
-                  setAmount(val.target.value);
+      <Modal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        title="Lending"
+        width="32rem"
+      >
+        <LendingModal
+          selectedToken={selectedToken}
+          transaction={transaction}
+          amount={amount}
+          setAmount={setAmount}
+          currentAction={currentAction}
+          setCurrentAction={setCurrentAction}
+          clmPosition={clmPosition}
+        />
+      </Modal>
+
+      <Container className={styles.grid} direction="row">
+        <Container gap={54}>
+          <div className={styles.highlightCard}>
+            {isLoading ? (
+              <Container
+                width="1000px"
+                height="300px"
+                center={{
+                  horizontal: true,
+                  vertical: true,
+                }}
+              >
+                <LoadingIcon />
+              </Container>
+            ) : cNote ? (
+              <HighlightCard
+                token={{
+                  name: cNote.symbol,
+                  imgUrl: cNote.underlying.logoURI,
+                  supplyAPR: cNote.supplyApy + "%",
+                  borrowAPR: cNote.borrowApy + "%",
+                  walletBalance: formatBalance(
+                    cNote.userDetails?.balanceOfUnderlying ?? "0",
+                    cNote.underlying.decimals,
+                    {
+                      commify: true,
+                    }
+                  ),
+                  amountStaked: formatBalance(
+                    cNote.userDetails?.supplyBalanceInUnderlying ?? "0",
+                    cNote.underlying.decimals,
+                    {
+                      commify: true,
+                    }
+                  ),
+                  outStandingDebt: formatBalance(
+                    cNote.userDetails?.borrowBalance ?? "0",
+                    cNote.underlying.decimals,
+                    {
+                      commify: true,
+                    }
+                  ),
+                  supply: () => {
+                    setSelectedToken(cNote);
+                    setModalOpen(true);
+                  },
+
+                  borrow: () => {
+                    setSelectedToken(cNote);
+                    setModalOpen(true);
+                  },
                 }}
               />
-              <div style={{ display: "flex", flexDirection: "row" }}>
-                <LendingActionSwitch action={CTokenLendingTxTypes.SUPPLY} />
-                <LendingActionSwitch action={CTokenLendingTxTypes.WITHDRAW} />
-                <LendingActionSwitch action={CTokenLendingTxTypes.BORROW} />
-                <LendingActionSwitch action={CTokenLendingTxTypes.REPAY} />
-              </div>
-              <Button
-                disabled={!transaction.canPerformTx(amount, currentAction)}
-                onClick={() => transaction.performTx(amount, currentAction)}
+            ) : (
+              <Text>No Supply Tokens Found</Text>
+            )}
+          </div>
+          <div className={styles.mainTable}>
+            {isLoading ? (
+              <Container
+                width="1000px"
+                height="200px"
+                center={{
+                  horizontal: true,
+                  vertical: true,
+                }}
               >
-                CONFIRM
-              </Button>
-            </>
-          )}
-        </>
-      </Modal>
-      <section>
-        {" "}
-        <Text size="lg" font="proto_mono">
-          USER POSITION
-        </Text>
-        <Text size="lg" font="proto_mono">
-          Maximum Account Liquidity: {}
-          {formatBalance(clmPosition.general.maxAccountLiquidity, 18, {
-            commify: true,
-            precision: 2,
-          })}
-        </Text>
-        <Text size="lg" font="proto_mono">
-          Outstanding Debt:{" "}
-          {formatBalance(clmPosition.general.outstandingDebt, 18, {
-            commify: true,
-            precision: 2,
-          })}
-        </Text>
-        <Text size="lg" font="proto_mono">
-          Percent Limit Used: {clmPosition.general.percentLimitUsed + "%"}
-        </Text>
-        <Text size="lg" font="proto_mono">
-          Average Apr: {clmPosition.general.netApr + "%"}
-        </Text>{" "}
-      </section>
-      {cNote && (
-        <Table
-          columns={7}
-          title="CNOTE"
-          headers={[
-            "Asset",
-            "APR",
-            "Wallet Balance",
-            "Supplied Amount",
-            "Collateral Factor",
-            "",
-          ]}
-          data={[CTokenRow({ cToken: cNote })]}
-        />
-      )}
-      {rwas.length > 0 && (
-        <Table
-          columns={7}
-          title="RWAS"
-          headers={[
-            "Asset",
-            "APR",
-            "Wallet Balance",
-            "Supplied Amount",
-            "Collateral Factor",
-            "",
-          ]}
-          data={[...rwas.map((cToken) => CTokenRow({ cToken }))]}
-        />
-      )}
+                <LoadingIcon />
+              </Container>
+            ) : rwas.length > 0 ? (
+              <Table
+                columns={7}
+                title="RWAS"
+                headers={[
+                  "Asset",
+                  "APR",
+                  "Wallet Balance",
+                  "Supplied Amount",
+                  "Collateral Factor",
+                  "",
+                ]}
+                data={[
+                  ...rwas.map((cToken) =>
+                    CTokenRow({
+                      cToken,
+                      onClick: () => {
+                        setSelectedToken(cToken);
+                        setModalOpen(true);
+                      },
+                    })
+                  ),
+                ]}
+              />
+            ) : (
+              <Text>No RWAS tokens available</Text>
+            )}
+          </div>
+        </Container>
+
+        <Container gap={20}>
+          <div className={styles.widget1}>
+            <OutlineCard>
+              <Item
+                name="Note in circulation"
+                value="10,234,234,234"
+                postChild={
+                  <Icon
+                    themed
+                    icon={{
+                      url: "/tokens/note.svg",
+                      size: 24,
+                    }}
+                  />
+                }
+              />
+              <Item
+                name="Value of rwas on canto"
+                value="3,435,215"
+                postChild={
+                  <Icon
+                    themed
+                    icon={{
+                      url: "/tokens/note.svg",
+                      size: 24,
+                    }}
+                  />
+                }
+              />
+              <Item
+                name="Price of Note"
+                value="1.50"
+                postChild={
+                  <Icon
+                    themed
+                    icon={{
+                      url: "/tokens/note.svg",
+                      size: 24,
+                    }}
+                  />
+                }
+              />
+            </OutlineCard>
+          </div>
+
+          <div className={styles.widget2}>
+            <OutlineCard>
+              <Item
+                name="Outstanding Debt"
+                value={formatBalance(clmPosition.general.outstandingDebt, 18, {
+                  commify: true,
+                  precision: 2,
+                })}
+              />
+              <Item
+                name="Average APR"
+                value={clmPosition.general.netApr + "%"}
+              />
+              <Item
+                name="Percent Limit Used"
+                value={clmPosition.general.percentLimitUsed}
+              />
+              <Item
+                name="Maximum Account Liquidity"
+                value={formatBalance(
+                  clmPosition.general.maxAccountLiquidity,
+                  18,
+                  {
+                    commify: true,
+                    precision: 2,
+                  }
+                )}
+              />
+            </OutlineCard>
+          </div>
+        </Container>
+      </Container>
     </div>
   );
 }
diff --git a/app/lending/utils.tsx b/app/lending/utils.tsx
index b84d7d68..917b40a3 100644
--- a/app/lending/utils.tsx
+++ b/app/lending/utils.tsx
@@ -19,6 +19,7 @@ interface LendingComboReturn {
     cNote: CTokenWithUserData | undefined;
     rwas: CTokenWithUserData[];
   };
+  isLoading: boolean;
   clmPosition: {
     position: UserLMPosition;
     general: {
@@ -47,7 +48,7 @@ export function useLendingCombo(): LendingComboReturn {
   // params for useLending hook
   const { data: signer } = useWalletClient();
   const chainId = signer?.chain.id === 7701 ? 7701 : 7700;
-  const { cTokens, position, loading, transaction } = useLending({
+  const { cTokens, position, isLoading, transaction } = useLending({
     chainId,
     lmType: "lending",
     userEthAddress: signer?.account.address,
@@ -125,6 +126,7 @@ export function useLendingCombo(): LendingComboReturn {
       cNote,
       rwas,
     },
+    isLoading,
     clmPosition: {
       position,
       general: {
diff --git a/components/loader/loading.tsx b/components/loader/loading.tsx
index ddcb3b89..63dd5468 100644
--- a/components/loader/loading.tsx
+++ b/components/loader/loading.tsx
@@ -9,6 +9,7 @@ interface Props {
 const LoadingIcon = ({ size, className }: Props) => {
   return (
     <Icon
+      themed
       icon={{
         url: "loader.svg",
         size: size,
diff --git a/components/modal/modal.module.scss b/components/modal/modal.module.scss
index 5114b01d..74adf016 100644
--- a/components/modal/modal.module.scss
+++ b/components/modal/modal.module.scss
@@ -103,6 +103,7 @@
   justify-content: flex-start;
   padding: 0 16px;
   font-size: 25px;
+  height: 40px;
 }
 
 .close {
@@ -111,6 +112,7 @@
   right: 6px;
   cursor: pointer;
   transition: transform 0.2s ease-out;
+  z-index: 30;
   &:hover {
     transform: rotateZ(90deg);
   }
diff --git a/components/modal/modal.tsx b/components/modal/modal.tsx
index 1cca52d8..9afa679a 100644
--- a/components/modal/modal.tsx
+++ b/components/modal/modal.tsx
@@ -4,6 +4,7 @@ import React, { useEffect } from "react";
 import { useScrollLock } from "../utils/scrollLock";
 import Icon from "../icon/icon";
 import Container from "../container/container";
+import Text from "../text";
 
 interface Props {
   open: boolean;
@@ -59,7 +60,9 @@ const Modal = ({ onClose, children, title, width, height, open }: Props) => {
 
           {title && (
             <div className={styles.header}>
-              <h3 className={styles.title}>{title}</h3>
+              <Text font="proto_mono" size="lg" className={styles.title}>
+                {title}
+              </Text>
             </div>
           )}
           <div className={styles.body}>{children}</div>
diff --git a/components/transactions/TxItem.tsx b/components/transactions/TxItem.tsx
index 1d4cb0cc..a5c369f3 100644
--- a/components/transactions/TxItem.tsx
+++ b/components/transactions/TxItem.tsx
@@ -121,7 +121,7 @@ const TxItem = (props: TxItemProps) => {
             </Text>
           )}
           {props.tx.tx.bridge && props.tx.tx.bridge.lastStatus !== "NONE" && (
-            <>
+            <Container>
               <Text size="sm" theme="secondary-dark">
                 Bridge Status - {props.tx.tx.bridge.lastStatus.toLowerCase()}
               </Text>
@@ -131,7 +131,7 @@ const TxItem = (props: TxItemProps) => {
                   {formatSecondsToMinutes(props.tx.tx.bridge.timeLeft)}
                 </Text>
               )}
-            </>
+            </Container>
           )}
         </Container>
       </Container>
diff --git a/components/transactions/transactions.module.scss b/components/transactions/transactions.module.scss
index 25940c75..6c114ad1 100644
--- a/components/transactions/transactions.module.scss
+++ b/components/transactions/transactions.module.scss
@@ -21,7 +21,6 @@
   align-items: center;
   width: 100%;
   cursor: pointer;
-
   user-select: none;
 
   &:hover {
@@ -31,7 +30,7 @@
 
 .collapsable {
   overflow-x: hidden;
-  overflow-y: scroll;
+  overflow-y: hidden;
   max-height: 0;
   transition: max-height 0.5s linear;
   position: relative;
diff --git a/hooks/lending/interfaces/hookParams.ts b/hooks/lending/interfaces/hookParams.ts
index 8205fc3d..e382c41b 100644
--- a/hooks/lending/interfaces/hookParams.ts
+++ b/hooks/lending/interfaces/hookParams.ts
@@ -13,7 +13,7 @@ export interface LendingHookInputParams {
 export interface LendingHookReturn {
   cTokens: CTokenWithUserData[];
   position: UserLMPosition;
-  loading: boolean;
+  isLoading: boolean;
   transaction: {
     canPerformLendingTx: (
       txParams: CTokenLendingTransactionParams
diff --git a/hooks/lending/useLending.ts b/hooks/lending/useLending.ts
index 861b0c2a..c7b9ea9d 100644
--- a/hooks/lending/useLending.ts
+++ b/hooks/lending/useLending.ts
@@ -101,7 +101,7 @@ export default function useLending(
   return {
     cTokens,
     position,
-    loading: loadingCTokens,
+    isLoading: loadingCTokens,
     transaction: {
       canPerformLendingTx,
       createNewLendingFlow: createNewCTokenLendingFlow,
diff --git a/provider/rainbowProvider.tsx b/provider/rainbowProvider.tsx
index 1efb18ef..83c4eca6 100644
--- a/provider/rainbowProvider.tsx
+++ b/provider/rainbowProvider.tsx
@@ -1,5 +1,14 @@
 import "@rainbow-me/rainbowkit/styles.css";
-import { getDefaultWallets, RainbowKitProvider } from "@rainbow-me/rainbowkit";
+import {
+  connectorsForWallets,
+  getDefaultWallets,
+  RainbowKitProvider,
+} from "@rainbow-me/rainbowkit";
+import {
+  injectedWallet,
+  rainbowWallet,
+  walletConnectWallet,
+} from "@rainbow-me/rainbowkit/wallets";
 import { Chain, configureChains, createConfig, WagmiConfig } from "wagmi";
 import { publicProvider } from "wagmi/providers/public";
 import * as EVM_CHAINS from "@/config/networks/evm";
@@ -51,9 +60,22 @@ const { connectors } = getDefaultWallets({
   projectId: process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID as string,
   chains,
 });
+
+const specificConnectors = connectorsForWallets([
+  {
+    groupName: "Recommended",
+    wallets: [
+      injectedWallet({
+        chains,
+      }),
+    ],
+  },
+]);
+
 const wagmiConfig = createConfig({
   autoConnect: true,
-  connectors,
+  //   connectors,
+  connectors: specificConnectors,
   publicClient,
 });