diff --git a/components/v1/MarketDetailPage/VaultInformationCard.tsx b/components/v1/MarketDetailPage/VaultInformationCard.tsx
index 027e0896..8f65ac58 100644
--- a/components/v1/MarketDetailPage/VaultInformationCard.tsx
+++ b/components/v1/MarketDetailPage/VaultInformationCard.tsx
@@ -5,7 +5,6 @@ import { Metadata } from "../MarketMetadata";
 import { useMarket } from "../swr/useMarket";
 import ToastError from "../../../uikit/toasts/Error";
 import { DEFAULT_CHAIN, useWalletContext } from "../Wallet";
-import MyAssetCard from "./LeveragedTokenMyAssetCard";
 
 /**
  * VaultInformationCardProps is a React Component properties that passed to React Component VaultInformationCard
diff --git a/modules/tokenPage/TokenPageContainer.tsx b/modules/tokenPage/TokenPageContainer.tsx
index 6a5fbd84..817adb29 100644
--- a/modules/tokenPage/TokenPageContainer.tsx
+++ b/modules/tokenPage/TokenPageContainer.tsx
@@ -11,11 +11,11 @@ import TabsList from "./component/TabsList";
 import TabsContentGrid from "./component/TabsContentGrid";
 import PriceInfoCard from "./component/PriceInfoCard";
 import LeveragedTokenBackingCard from "./component/LeveragedTokenBackingCard";
-import LeveragedTokenInfoCard from "./component/LeveragedTokenInfoCard";
-import MyAssetsCard from "./component/MyAssetsCard";
+import LeveragedTokenInfoCard from "./component/TokenInformation/LeveragedTokenInfoCard";
 import VaultInfoCard from "./component/VaultInfoCard";
 import { Root as TabsRoot } from "@radix-ui/react-tabs";
 import { FunctionComponent } from "react";
+import { Calculator } from "./component/Calculator";
 
 type TokenPageContainerProps = {
     chainID: number;
@@ -44,8 +44,8 @@ const TokenPageContainer: FunctionComponent<TokenPageContainerProps> = ({ chainI
 
                             {/* Right Column */}
                             <div className="flex max-w-[540px] flex-col space-y-6">
-                                <MyAssetsCard chainID={chainID} address={tokenAddress} />
                                 <LeveragedTokenInfoCard chainID={chainID} address={tokenAddress} />
+                                <Calculator />
                                 <LeveragedTokenBackingCard chainID={chainID} address={tokenAddress} />
                             </div>
                         </TabsContentGrid>
@@ -57,7 +57,6 @@ const TokenPageContainer: FunctionComponent<TokenPageContainerProps> = ({ chainI
 
                             {/* RightColumn */}
                             <div className="max-w-[540px] flex-col space-y-6">
-                                <MyAssetsCard chainID={chainID} isVault address={tokenAddress} />
                                 <VaultInfoCard chainID={chainID} address={tokenAddress} />
                             </div>
                         </TabsContentGrid>
diff --git a/modules/tokenPage/component/ButtonMintOrRedeem.tsx b/modules/tokenPage/component/ButtonMintOrRedeem.tsx
index ae4c2d9b..7d57060f 100644
--- a/modules/tokenPage/component/ButtonMintOrRedeem.tsx
+++ b/modules/tokenPage/component/ButtonMintOrRedeem.tsx
@@ -1,4 +1,4 @@
-import type { FunctionComponent } from "react";
+import { FunctionComponent, useCallback, useState } from "react";
 import * as Dialog from "@radix-ui/react-dialog";
 import * as Tabs from "@radix-ui/react-tabs";
 import { Metadata } from "./MarketMetadata";
@@ -6,6 +6,7 @@ import MintDialogContent from "./MintDialogContent";
 import RedeemDialogContent from "./RedeemDialogContent";
 import ButtonAlternate from "../../../uikit/button/ButtonAlternate";
 import { customChains } from "../../../components/v1/Wallet";
+import { useHotkeys } from "react-hotkeys-hook";
 
 /**
  * ButtonMintOrRedeemProps is a React Component properties that passed to React Component ButtonMintOrRedeem
@@ -20,15 +21,24 @@ type ButtonMintOrRedeemProps = {
  *
  * @link https://fettblog.eu/typescript-react/components/#functional-components
  */
-const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainID, address }) => {
+function ButtonMintOrRedeem({ chainID, address }: ButtonMintOrRedeemProps) {
     const metadata = Metadata[chainID][address];
+    const [isOpen, setIsOpen] = useState(false);
+
+    useHotkeys("shift+s", () => setIsOpen(true));
+    useHotkeys("esc", () => setIsOpen(false));
 
     return (
-        <Dialog.Root>
+        <Dialog.Root open={isOpen}>
             <Dialog.Trigger asChild>
-                <ButtonAlternate type={chainID === customChains.bsc.id ? "bsc" : "arb"} className="w-full">
-                    Mint or Redeem
-                </ButtonAlternate>
+                <div className="flex align-middle">
+                    <ButtonAlternate onClick={() => setIsOpen(true)} className="mr-4 flex-1" type={chainID === customChains.bsc.id ? "bsc" : "arb"}>
+                        Swap
+                    </ButtonAlternate>
+                    <span className="hidden self-center text-xs text-gray-dark-9 md:block">
+                        Press <kbd>&#8593;</kbd> + <kbd>S</kbd> for quick shortcut
+                    </span>
+                </div>
             </Dialog.Trigger>
             <Dialog.Overlay className="fixed inset-0 z-30 bg-gray-dark-1/60 backdrop-blur dark:bg-black/60" />
             <Dialog.Content className="fixed left-0 bottom-0 z-30 w-screen sm:flex sm:h-screen sm:items-center ">
@@ -44,7 +54,7 @@ const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainI
                                 <h1 className="m-0 text-base font-bold tracking-[-0.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.title}</h1>
                             </div>
                         </div>
-                        <Dialog.Close asChild>
+                        <Dialog.Close asChild onClick={() => setIsOpen(false)}>
                             <button className="button basic h-8 p-0">
                                 <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" className="m-[9.5px] h-[11px] w-[11px] fill-gray-light-12 dark:fill-gray-dark-12">
                                     <path
@@ -78,6 +88,6 @@ const ButtonMintOrRedeem: FunctionComponent<ButtonMintOrRedeemProps> = ({ chainI
             </Dialog.Content>
         </Dialog.Root>
     );
-};
+}
 
 export default ButtonMintOrRedeem;
diff --git a/modules/tokenPage/component/Calculator.tsx b/modules/tokenPage/component/Calculator.tsx
new file mode 100644
index 00000000..7795b16d
--- /dev/null
+++ b/modules/tokenPage/component/Calculator.tsx
@@ -0,0 +1,41 @@
+import { InformationCardTitle, InformationCard, InformationCardSubTitle } from "../../../uikit/card/InformationCard";
+import { Dash, TextLeftDash, TextRightDash } from "../../../uikit/Dash";
+
+function Calculator() {
+    return (
+        <InformationCard>
+            <InformationCardTitle>Calulate My Profit</InformationCardTitle>
+            <InformationCardSubTitle>Let&#180;s try to simulate how much you&#180;ll get if the ETH price is higher or lower when you invested some ETH</InformationCardSubTitle>
+            <Dash>
+                <TextLeftDash className="text-xs font-semibold text-white">You Want To Buy</TextLeftDash>
+            </Dash>
+            <div className=" rounded-xl bg-gray-dark-3 p-3 px-2">
+                <div className="flex justify-between">
+                    <div>
+                        <div className="max-w-fit rounded-lg bg-gray-dark-2 py-2 px-1">
+                            <h3 className=" text-xs font-bold text-white">ETH</h3>
+                        </div>
+                        <span className="text-xs text-gray-dark-10">Mkt. Price $2,380.23</span>
+                    </div>
+                    <div className="flex-col justify-center self-center">
+                        <input type="number" className="max-h-[32px] max-w-[60px] self-center rounded-lg bg-gray-dark-2 text-right text-[16px] font-bold text-white"></input>
+                        <p className="pt-2 text-right text-xs text-gray-dark-10">$2,800</p>
+                    </div>
+                    {
+                        // TODO: add slider
+                    }
+                </div>
+            </div>
+            <Dash>
+                <TextLeftDash className="text-xs font-semibold text-white">Expected Market Price</TextLeftDash>
+                <TextRightDash className="text-sm font-bold text-gray-dark-12">$3,450.34</TextRightDash>
+            </Dash>
+            <Dash>
+                <TextLeftDash className="text-xs font-semibold text-white ">Est. Net Profit Gain</TextLeftDash>
+                <TextRightDash className="text-sm font-bold text-green-dark-11">+$2,800.00</TextRightDash>
+            </Dash>
+        </InformationCard>
+    );
+}
+
+export { Calculator };
diff --git a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
index 7d8ae295..108c9828 100644
--- a/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
+++ b/modules/tokenPage/component/LeveragedTokenBackingCard.tsx
@@ -1,73 +1,104 @@
 import { ethers } from "ethers";
-import type { FunctionComponent } from "react";
+import { FunctionComponent, useEffect, useMemo, useState } from "react";
 import { tokenBalanceFormatter } from "../../../utils/formatters";
 import { Metadata } from "../../../components/v1/MarketMetadata";
 import { useCollateralPerLeveragedToken } from "../../../components/v1/swr/useCollateralPerLeveragedToken";
 import { useDebtPerLeveragedToken } from "../../../components/v1/swr/useDebtPerLeveragedToken";
 import { getProvider } from "../../../components/v1/Wallet";
-import InformationCard from "../../../uikit/card/InformationCard";
+import { InformationCardExtra, InformationCardSubTitle, InformationCardTitle, InformationCard } from "../../../uikit/card/InformationCard";
+import { StatusEnum } from "./TokenInformation/TokenInfoStore";
 
-/**
- * LeveragedTokenBackingCardProps is a React Component properties that passed to React Component LeveragedTokenBackingCard
- */
 type LeveragedTokenBackingCardProps = {
     chainID: number;
     address: string;
 };
 
-/**
- * LeveragedTokenBackingCard is just yet another react component
- *
- * @link https://fettblog.eu/typescript-react/components/#functional-components
- */
+type UiType = {
+    status: StatusEnum;
+    data?: {
+        collateralPerLeveragedToken?: number;
+        debtPerLeveragedToken?: number;
+    };
+    error?: string;
+};
+
 const LeveragedTokenBackingCard: FunctionComponent<LeveragedTokenBackingCardProps> = ({ chainID, address }) => {
-    const provider = getProvider({ chainId: chainID });
+    const provider = useMemo(() => {
+        return getProvider({ chainId: chainID });
+    }, [chainID]);
     const metadata = Metadata[chainID][address];
     const collateralPerTokenResponse = useCollateralPerLeveragedToken({ token: address, vault: metadata.vaultAddress, provider: provider });
     const debtPerTokenResponse = useDebtPerLeveragedToken({ token: address, vault: metadata.vaultAddress, provider: provider });
+    const [uiData, setUiData] = useState<UiType>({
+        status: "loading",
+    });
 
-    // Data
-    const collateral = parseFloat(ethers.utils.formatUnits(collateralPerTokenResponse.data ? collateralPerTokenResponse.data : 0, metadata.collateralDecimals));
-    const debt = parseFloat(ethers.utils.formatUnits(debtPerTokenResponse.data ? debtPerTokenResponse.data : 0, metadata.debtDecimals));
+    useEffect(() => {
+        if (metadata) {
+            if (collateralPerTokenResponse.data && debtPerTokenResponse.data) {
+                setUiData({
+                    status: "loaded",
+                    data: {
+                        collateralPerLeveragedToken: parseFloat(ethers.utils.formatUnits(collateralPerTokenResponse.data ? collateralPerTokenResponse.data : 0, metadata.collateralDecimals)),
+                        debtPerLeveragedToken: parseFloat(ethers.utils.formatUnits(debtPerTokenResponse.data ? debtPerTokenResponse.data : 0, metadata.debtDecimals)),
+                    },
+                });
+            }
+        }
+    }, [collateralPerTokenResponse.data, debtPerTokenResponse.data, metadata]);
 
-    // UI states
-    const showLoading = collateralPerTokenResponse.isLoading || debtPerTokenResponse.isLoading ? true : false;
-    const showError = collateralPerTokenResponse.error || debtPerTokenResponse.error ? true : false;
-    const showData = !showLoading && !showError && collateralPerTokenResponse.data && debtPerTokenResponse.data ? true : false;
+    useEffect(() => {
+        if (collateralPerTokenResponse.error || debtPerTokenResponse.error) {
+            setUiData({
+                status: "error",
+                error: collateralPerTokenResponse?.error?.message || debtPerTokenResponse?.error?.message,
+            });
+        }
+    }, [collateralPerTokenResponse.error, debtPerTokenResponse.error]);
 
     return (
         <InformationCard>
-            <div className="pt-4">
-                <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">Backing per {metadata.title}</h2>
-            </div>
-            <div className="">
-                <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{metadata.title} represents collaterized debt position and can be redeemed at any time.</p>
-            </div>
-            <div className="flex flex-col space-y-6">
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Asset</p>
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Allocation</p>
-                </div>
-
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.collateralSymbol}</p>
-                    {(showLoading || showError) && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && (
-                        <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                            {tokenBalanceFormatter.format(collateral)} {metadata.collateralSymbol}
-                        </p>
-                    )}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.debtSymbol}</p>
-                    {(showLoading || showError) && <p className="h-[16px] w-[100px] animate-pulse rounded-[8px] bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && (
-                        <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                            -{tokenBalanceFormatter.format(debt)} {metadata.debtSymbol}
-                        </p>
-                    )}
-                </div>
-            </div>
+            <InformationCardTitle>Backing per {metadata.title}</InformationCardTitle>
+            <InformationCardSubTitle>{metadata.title} represents collaterized debt position and can be redeemed at any time.</InformationCardSubTitle>
+            {
+                //TODO: simplify table with custom component and custom logic
+            }
+            <table className="text-right">
+                <thead className="bg-gray-dark-3 font-inter text-xs text-gray-dark-10	">
+                    <tr>
+                        <th className="rounded-bl-lg rounded-tl-lg py-2 pl-2 text-left">Token</th>
+                        <th className="py-2">Allocation</th>
+                        <th className="w-[80px] rounded-br-lg rounded-tr-lg py-2 pr-2">Change</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr className="border-b-2 border-dashed border-b-gray-dark-5 px-2">
+                        <td className="py-4 pl-2 text-left">
+                            <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.collateralSymbol}</p>
+                        </td>
+                        <td>
+                            {uiData.status === "loading" && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
+                            {uiData.status === "loaded" && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{tokenBalanceFormatter.format(uiData.data?.collateralPerLeveragedToken || 0)}</p>}
+                        </td>
+                        <td className="pr-2">{0}%</td>
+                    </tr>
+                    <tr>
+                        <td className="py-4 pl-2 text-left">
+                            <p className="text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{metadata.debtSymbol}</p>
+                        </td>
+                        <td>
+                            {uiData.status === "loading" && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
+                            {uiData.status === "loaded" && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">-{tokenBalanceFormatter.format(uiData.data?.debtPerLeveragedToken || 0)}</p>}
+                        </td>
+                        <td className="pr-2">{0}%</td>
+                    </tr>
+                </tbody>
+            </table>
+            <InformationCardExtra className="bg-green-dark-2">
+                <p className=" font-inter text-xs text-white">
+                    &#10003; Last rebalanced at: <span className="font-semibold"> 13-01-2022 03:23AM </span>
+                </p>
+            </InformationCardExtra>
         </InformationCard>
     );
 };
diff --git a/modules/tokenPage/component/LeveragedTokenInfoCard.tsx b/modules/tokenPage/component/LeveragedTokenInfoCard.tsx
deleted file mode 100644
index f60fe872..00000000
--- a/modules/tokenPage/component/LeveragedTokenInfoCard.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { FunctionComponent, useEffect } from "react";
-import toast from "react-hot-toast";
-import { dollarFormatter } from "../../../utils/formatters";
-import { Metadata } from "../../../components/v1/MarketMetadata";
-import { useMarket } from "../../../components/v1/swr/useMarket";
-import ToastError from "../../../uikit/toasts/Error";
-import { chain as Chains } from "wagmi";
-import { customChains, formatAddress, getEtherscanAddressURL } from "../../../components/v1/Wallet";
-import InformationCard from "../../../uikit/card/InformationCard";
-
-/**
- * LeveragedTokenInfoCardProps is a React Component properties that passed to React Component LeveragedTokenInfoCard
- */
-type LeveragedTokenInfoCardProps = {
-    chainID: number;
-    address: string;
-};
-
-/**
- * LeveragedTokenInfoCard is just yet another react component
- *
- * @link https://fettblog.eu/typescript-react/components/#functional-components
- */
-const LeveragedTokenInfoCard: FunctionComponent<LeveragedTokenInfoCardProps> = ({ chainID, address }) => {
-    const metadata = Metadata[chainID][address];
-
-    // Get the market data
-    const marketData = useMarket(chainID, address);
-
-    // Toast error if loading is error
-    useEffect(() => {
-        if (marketData.error) {
-            toast.custom((t) => <ToastError>Failed to load information card data, please try to refresh</ToastError>);
-        }
-    }, [marketData.error]);
-
-    // UI States
-    const showLoading = marketData.isLoading || marketData.error ? true : false;
-    const showData = !showLoading && marketData.data ? true : false;
-
-    return (
-        <InformationCard>
-            <div className="pt-4">
-                <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">Information</h2>
-            </div>
-            <div className="">
-                <p className="text-sm leading-6 text-gray-light-10 dark:text-gray-dark-10">{metadata.informationText}</p>
-            </div>
-            <div className="flex flex-col space-y-6">
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Market cap</p>
-                    {showLoading && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && marketData.data && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{dollarFormatter.format(marketData.data.leveraged_token_market_cap)}</p>}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Leverage ratio</p>
-                    {showLoading && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && marketData.data && <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{marketData.data.leverage_ratio.toFixed(2) + "x"}</p>}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Creation &amp; redemption fees</p>
-                    <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">0.1%</p>
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Management fees</p>
-                    <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-green-light-11 dark:text-green-dark-11">FREE</p>
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Underlying assets</p>
-                    <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                        {metadata.collateralSymbol}, {metadata.debtSymbol}
-                    </p>
-                </div>
-                {/* TODO(bayu): Handle case when capacity is maxed out */}
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Capacity</p>
-                    {showLoading && <p className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></p>}
-                    {showData && marketData.data && (
-                        <p className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                            <span className="text-green-light-11 dark:text-green-dark-11">{marketData.data.leveraged_token_total_collateral.toFixed(2) + metadata.collateralSymbol}</span> / {marketData.data.leveraged_token_max_total_collateral > 0 && <span>{marketData.data.leveraged_token_max_total_collateral.toFixed(2) + metadata.collateralSymbol}</span>}
-                            {marketData.data.leveraged_token_max_total_collateral <= 0 && <span>&#8734;</span>}
-                        </p>
-                    )}
-                </div>
-                <div className="flex flex-row justify-between">
-                    <p className="text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">Contract Address</p>
-                    <a href={getEtherscanAddressURL(chainID === customChains.bsc.id ? customChains.bsc : Chains.arbitrumOne, address)} target="_blank" rel="noopener noreferrer" className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
-                        {formatAddress(address)} &#8599;
-                    </a>
-                </div>
-                {/* Link to buy on uniswap */}
-                {/* <div className="flex flex-row justify-between">
-                    <ButtonLinkBasic href={metadata.uniswapSwapURL} full>
-                        Buy on Uniswap &#8599;
-                    </ButtonLinkBasic>
-                </div> */}
-            </div>
-        </InformationCard>
-    );
-};
-
-export default LeveragedTokenInfoCard;
diff --git a/modules/tokenPage/component/MyAssetsCard.tsx b/modules/tokenPage/component/MyAssetsCard.tsx
index 50661bc6..cc83e366 100644
--- a/modules/tokenPage/component/MyAssetsCard.tsx
+++ b/modules/tokenPage/component/MyAssetsCard.tsx
@@ -9,7 +9,7 @@ import { useTokenBalance } from "../../../components/v1/swr/useTokenBalance";
 import { useVaultExchangeRate } from "../../../components/v1/swr/useVaultExchangeRate";
 import { useWalletContext, getProvider } from "../../../components/v1/Wallet";
 import { AssetsItem } from "./AssetsItem";
-import InformationCard from "../../../uikit/card/InformationCard";
+import { InformationCard } from "../../../uikit/card/InformationCard";
 
 /**
  * MyAssetsCardProps is a React Component properties that passed to React Component MyAssetsCard
@@ -50,18 +50,12 @@ const MyAssetsCard: FunctionComponent<MyAssetsCardProps> = ({ address, isVault =
     if (balance > 0) {
         return (
             <InformationCard>
-                <div className="pt-4">
-                    <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">My Asset</h2>
-                </div>
                 <div className="grid grid-cols-2 gap-4">
                     <AssetsItem icon="balance" title="Token Balance" value={`${tokenBalanceFormatter.format(balance)}`} showData={showData} showLoading={showLoading || showError} />
-                    <AssetsItem icon="value" title="Value (USDC)" value={`${tokenBalanceFormatter.format(value)}`} showData={showData} showLoading={showLoading || showError} />
+                    <AssetsItem icon="value" title="Value" value={`${tokenBalanceFormatter.format(value)}`} showData={showData} showLoading={showLoading || showError} />
                     <AssetsItem icon="return" title="Return" value={`-`} showData={showData} showLoading={showLoading || showError} />
-                    <AssetsItem icon="returnUSD" title="Return (USDC)" value={`-`} showData={showData} showLoading={showLoading || showError} />
+                    <AssetsItem icon="returnUSD" title="Return" value={`-`} showData={showData} showLoading={showLoading || showError} />
                 </div>
-                <ButtonTertiary full onClick={async () => await addTokenToMetamask({ token: tokenType.ETHRISE, chainID: chain.chain.id, isVaultToken: isVault })}>
-                    Add {isVault ? metadata.vaultTitle : metadata.title} to Wallet
-                </ButtonTertiary>
             </InformationCard>
         );
     }
diff --git a/modules/tokenPage/component/PriceInfoCard.tsx b/modules/tokenPage/component/PriceInfoCard.tsx
index 0edbc41b..e82facd4 100644
--- a/modules/tokenPage/component/PriceInfoCard.tsx
+++ b/modules/tokenPage/component/PriceInfoCard.tsx
@@ -2,6 +2,7 @@ import { FunctionComponent } from "react";
 import LeveragedTokenChart from "./LeveragedTokenChart";
 import VaultChart from "./VaultChart";
 import MainButton from "./MainButton";
+import MyAssetsCard from "./MyAssetsCard";
 
 /**
  * PriceInfoCardProps is a React Component properties that passed to React Component PriceInfoCard
@@ -33,7 +34,12 @@ const PriceInfoCard: FunctionComponent<PriceInfoCardProps> = ({ chainID, title,
                     <img className="h-12 w-12" src={logo} alt={title} />
                 </div>
                 {isVault && vaultAddress ? <VaultChart chainID={chainID} address={vaultAddress} /> : <LeveragedTokenChart chainID={chainID} address={tokenAddress} />}
-                <MainButton chainID={chainID} isVault={isVault} tokenAddress={tokenAddress} />
+
+                <div className="mx-4 mt-4 border-t-2 border-dashed border-t-gray-dark-5  pt-2">
+                    <MyAssetsCard chainID={chainID} address={tokenAddress} isVault={isVault} />
+
+                    <MainButton chainID={chainID} isVault={isVault} tokenAddress={tokenAddress} />
+                </div>
             </div>
         </div>
     );
diff --git a/modules/tokenPage/component/TokenInformation/InfoItem.tsx b/modules/tokenPage/component/TokenInformation/InfoItem.tsx
new file mode 100644
index 00000000..ada58165
--- /dev/null
+++ b/modules/tokenPage/component/TokenInformation/InfoItem.tsx
@@ -0,0 +1,23 @@
+import { useTokenInfoStore } from "./TokenInfoStore";
+
+function ContainerInfoItem({ children }: { children?: React.ReactNode }) {
+    return <div>{children}</div>;
+}
+
+function ItemTitle({ children }: { children: React.ReactNode }) {
+    return <p className="mb-2 text-sm leading-4 text-gray-light-10 dark:text-gray-dark-10">{children}</p>;
+}
+
+function ItemInfo({ children }: { children: React.ReactNode }) {
+    const { status } = useTokenInfoStore();
+    switch (status) {
+        case "loading":
+            return <div className="h-4 w-[100px] animate-pulse rounded-lg bg-gray-light-3 dark:bg-gray-dark-3"></div>;
+        case "loaded":
+            return <div className="font-ibm text-xs font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">{children}</div>;
+        default:
+            return null;
+    }
+}
+
+export { ContainerInfoItem, ItemInfo, ItemTitle };
diff --git a/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx b/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
new file mode 100644
index 00000000..0cd73fb7
--- /dev/null
+++ b/modules/tokenPage/component/TokenInformation/LeveragedTokenInfoCard.tsx
@@ -0,0 +1,98 @@
+import { FunctionComponent, useEffect } from "react";
+import toast from "react-hot-toast";
+import { dollarFormatter } from "../../../../utils/formatters";
+import { Metadata } from "../../../../components/v1/MarketMetadata";
+import { useMarket } from "../../../../components/v1/swr/useMarket";
+import ToastError from "../../../../uikit/toasts/Error";
+import { chain as Chains } from "wagmi";
+import { customChains, formatAddress, getEtherscanAddressURL } from "../../../../components/v1/Wallet";
+import { InformationCardSubTitle, InformationCardTitle, InformationCard } from "../../../../uikit/card/InformationCard";
+import { useTokenInfoStore } from "./TokenInfoStore";
+import { ContainerInfoItem, ItemInfo, ItemTitle } from "./InfoItem";
+
+/**
+ * LeveragedTokenInfoCardProps is a React Component properties that passed to React Component LeveragedTokenInfoCard
+ */
+type LeveragedTokenInfoCardProps = {
+    chainID: number;
+    address: string;
+};
+
+/**
+ * LeveragedTokenInfoCard is just yet another react component
+ *
+ * @link https://fettblog.eu/typescript-react/components/#functional-components
+ */
+const LeveragedTokenInfoCard: FunctionComponent<LeveragedTokenInfoCardProps> = ({ chainID, address }) => {
+    const metadata = Metadata[chainID][address];
+
+    // Get the market data
+    const { data: marketData, error } = useMarket(chainID, address);
+    const { setData } = useTokenInfoStore();
+
+    // Toast error if loading is error
+    useEffect(() => {
+        if (error) {
+            toast.custom((t) => <ToastError>Failed to load information card data, please try to refresh</ToastError>);
+        }
+    }, [error]);
+
+    useEffect(() => {
+        if (marketData) {
+            setData(marketData);
+        }
+    }, [marketData, setData]);
+
+    return (
+        <InformationCard>
+            <InformationCardTitle>Informations</InformationCardTitle>
+            <InformationCardSubTitle>{metadata.informationText}</InformationCardSubTitle>
+            <div className="mt-6 flex align-middle">
+                <img className="mr-1" src="/assets/icon/tokenPage/worldIcon.svg" />
+                <span className=" text-base leading-4 text-gray-dark-10">
+                    Arbiscan{" "}
+                    <a href={getEtherscanAddressURL(chainID === customChains.bsc.id ? customChains.bsc : Chains.arbitrumOne, address)} target="_blank" rel="noopener noreferrer" className="font-ibm text-sm font-semibold leading-4 tracking-[-.02em] text-gray-dark-12">
+                        {formatAddress(address)} &#8599;
+                    </a>
+                </span>
+            </div>
+            <div className="grid grid-cols-3 gap-4 border-t-2 border-dashed border-t-gray-dark-5 px-2 pt-4">
+                <ContainerInfoItem>
+                    <ItemTitle>Market cap</ItemTitle>
+                    <ItemInfo>{dollarFormatter.format(marketData?.leveraged_token_market_cap || 0)}</ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Underlying assets</ItemTitle>
+                    <ItemInfo>
+                        {metadata.collateralSymbol}, {metadata.debtSymbol}
+                    </ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Volume</ItemTitle>
+                    <ItemInfo>&#36;{43.9}M</ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Trading Fees</ItemTitle>
+                    <ItemInfo>0.1%</ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Management fees</ItemTitle>
+                    <ItemInfo>
+                        <p className="text-green-dark-11">FREE</p>
+                    </ItemInfo>
+                </ContainerInfoItem>
+                <ContainerInfoItem>
+                    <ItemTitle>Capacity (USDC)</ItemTitle>
+                    <ItemInfo>
+                        <p className="font-ibm text-xs font-semibold leading-4 tracking-[-.02em] text-gray-light-12 dark:text-gray-dark-12">
+                            <span className="text-green-light-11 dark:text-green-dark-11">{marketData?.leveraged_token_total_collateral.toFixed(2) + metadata.collateralSymbol}</span> / {(marketData?.leveraged_token_max_total_collateral || 0) > 0 && <span>{marketData?.leveraged_token_max_total_collateral.toFixed(2) + metadata.collateralSymbol}</span>}
+                            {(marketData?.leveraged_token_max_total_collateral || 0) <= 0 && <span>&#8734;</span>}
+                        </p>
+                    </ItemInfo>
+                </ContainerInfoItem>
+            </div>
+        </InformationCard>
+    );
+};
+
+export default LeveragedTokenInfoCard;
diff --git a/modules/tokenPage/component/TokenInformation/TokenInfoStore.ts b/modules/tokenPage/component/TokenInformation/TokenInfoStore.ts
new file mode 100644
index 00000000..107d3e99
--- /dev/null
+++ b/modules/tokenPage/component/TokenInformation/TokenInfoStore.ts
@@ -0,0 +1,18 @@
+import create from "zustand";
+import { Market } from "../../../../components/v1/swr/snapshot";
+
+export type StatusEnum = "loading" | "loaded" | "error";
+
+export type TokenInfoData = {
+    status: StatusEnum;
+    data?: Market;
+    error?: string;
+    setData: (data: Market) => void;
+    setError: (error: string) => void;
+};
+
+export const useTokenInfoStore = create<TokenInfoData>((set) => ({
+    status: "loading",
+    setData: (data: Market) => set((state) => ({ ...state, data, status: "loaded" })),
+    setError: (error: string) => set((state) => ({ ...state, error, status: "error" })),
+}));
diff --git a/package-lock.json b/package-lock.json
index 9f0e09ce..48f2db10 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,11 +22,13 @@
                 "react": "^17.0.2",
                 "react-dom": "^17.0.2",
                 "react-hot-toast": "2.2.0",
+                "react-hotkeys-hook": "^3.4.6",
                 "react-popper": "^2.2.5",
                 "recharts": "2.1.8",
                 "swr": "1.1.2",
                 "use-persisted-state": "0.3.3",
-                "wagmi": "0.2.8"
+                "wagmi": "0.2.8",
+                "zustand": "^4.0.0-rc.1"
             },
             "devDependencies": {
                 "@babel/core": "^7.15.5",
@@ -19187,6 +19189,23 @@
                 "react-dom": ">=16"
             }
         },
+        "node_modules/react-hotkeys-hook": {
+            "version": "3.4.6",
+            "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.6.tgz",
+            "integrity": "sha512-SiGKHnauaAQglRA7qeiW5LTa0KoT2ssv8YGYKZQoM3P9v5JFEHJdXOSFml1N6K86oKQ8dLCLlxqBqGlSJWGmxQ==",
+            "dependencies": {
+                "hotkeys-js": "3.9.3"
+            },
+            "peerDependencies": {
+                "react": ">=16.8.1",
+                "react-dom": ">=16.8.1"
+            }
+        },
+        "node_modules/react-hotkeys-hook/node_modules/hotkeys-js": {
+            "version": "3.9.3",
+            "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.3.tgz",
+            "integrity": "sha512-s+f0xyvDmf6+DyrFQ2SY+eA7lbvMbjqkqi0I0SpMgnN5tZx7DeH8nsWhkJR4KEq3pxDPHJppDUhdt1rZFW5LeQ=="
+        },
         "node_modules/react-inspector": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -23074,6 +23093,14 @@
                 "react": "^16.8.0 || ^17.0.0"
             }
         },
+        "node_modules/use-sync-external-store": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+            "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==",
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/util": {
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -24417,6 +24444,29 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/zustand": {
+            "version": "4.0.0-rc.1",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.0.0-rc.1.tgz",
+            "integrity": "sha512-qgcs7zLqBdHu0PuT3GW4WCIY5SgXdsv30GQMu9Qpp1BA2aS+sNS8l4x0hWuyEhjXkN+701aGWawhKDv6oWJAcw==",
+            "dependencies": {
+                "use-sync-external-store": "1.1.0"
+            },
+            "engines": {
+                "node": ">=12.7.0"
+            },
+            "peerDependencies": {
+                "immer": ">=9.0",
+                "react": ">=16.8"
+            },
+            "peerDependenciesMeta": {
+                "immer": {
+                    "optional": true
+                },
+                "react": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
@@ -38832,6 +38882,21 @@
                 "goober": "^2.1.1"
             }
         },
+        "react-hotkeys-hook": {
+            "version": "3.4.6",
+            "resolved": "https://registry.npmjs.org/react-hotkeys-hook/-/react-hotkeys-hook-3.4.6.tgz",
+            "integrity": "sha512-SiGKHnauaAQglRA7qeiW5LTa0KoT2ssv8YGYKZQoM3P9v5JFEHJdXOSFml1N6K86oKQ8dLCLlxqBqGlSJWGmxQ==",
+            "requires": {
+                "hotkeys-js": "3.9.3"
+            },
+            "dependencies": {
+                "hotkeys-js": {
+                    "version": "3.9.3",
+                    "resolved": "https://registry.npmjs.org/hotkeys-js/-/hotkeys-js-3.9.3.tgz",
+                    "integrity": "sha512-s+f0xyvDmf6+DyrFQ2SY+eA7lbvMbjqkqi0I0SpMgnN5tZx7DeH8nsWhkJR4KEq3pxDPHJppDUhdt1rZFW5LeQ=="
+                }
+            }
+        },
         "react-inspector": {
             "version": "5.1.1",
             "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -41859,6 +41924,12 @@
                 "object-assign": "^4.1.1"
             }
         },
+        "use-sync-external-store": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.1.0.tgz",
+            "integrity": "sha512-SEnieB2FPKEVne66NpXPd1Np4R1lTNKfjuy3XdIoPQKYBAFdzbzSZlSn1KJZUiihQLQC5Znot4SBz1EOTBwQAQ==",
+            "requires": {}
+        },
         "util": {
             "version": "0.11.1",
             "resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@@ -42950,6 +43021,14 @@
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "dev": true
         },
+        "zustand": {
+            "version": "4.0.0-rc.1",
+            "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.0.0-rc.1.tgz",
+            "integrity": "sha512-qgcs7zLqBdHu0PuT3GW4WCIY5SgXdsv30GQMu9Qpp1BA2aS+sNS8l4x0hWuyEhjXkN+701aGWawhKDv6oWJAcw==",
+            "requires": {
+                "use-sync-external-store": "1.1.0"
+            }
+        },
         "zwitch": {
             "version": "1.0.5",
             "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz",
diff --git a/package.json b/package.json
index cbc8e1f8..9acda84f 100644
--- a/package.json
+++ b/package.json
@@ -40,11 +40,13 @@
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-hot-toast": "2.2.0",
+        "react-hotkeys-hook": "^3.4.6",
         "react-popper": "^2.2.5",
         "recharts": "2.1.8",
         "swr": "1.1.2",
         "use-persisted-state": "0.3.3",
-        "wagmi": "0.2.8"
+        "wagmi": "0.2.8",
+        "zustand": "^4.0.0-rc.1"
     },
     "devDependencies": {
         "@babel/core": "^7.15.5",
diff --git a/public/assets/icon/tokenPage/worldIcon.svg b/public/assets/icon/tokenPage/worldIcon.svg
new file mode 100644
index 00000000..a601393c
--- /dev/null
+++ b/public/assets/icon/tokenPage/worldIcon.svg
@@ -0,0 +1,9 @@
+<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50039 2.30039C4.35237 2.30039 1.80039 4.85237 1.80039 8.00039C1.80039 11.1484 4.35237 13.7004 7.50039 13.7004C10.6484 13.7004 13.2004 11.1484 13.2004 8.00039C13.2004 4.85237 10.6484 2.30039 7.50039 2.30039ZM0.900391 8.00039C0.900391 4.35531 3.85531 1.40039 7.50039 1.40039C11.1455 1.40039 14.1004 4.35531 14.1004 8.00039C14.1004 11.6455 11.1455 14.6004 7.50039 14.6004C3.85531 14.6004 0.900391 11.6455 0.900391 8.00039Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.5004 8.40034H1.50037V7.60034H13.5004V8.40034Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.10034 14.0004V2.00037H7.90034V14.0004H7.10034Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.3754 8.00035C10.3754 5.8276 9.59407 3.67815 8.06226 2.25693L8.53836 1.74377C10.24 3.32255 11.0754 5.6731 11.0754 8.00035C11.0754 10.3276 10.24 12.6782 8.53836 14.2569L8.06226 13.7438C9.59407 12.3225 10.3754 10.1731 10.3754 8.00035Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.00012 8.00037C4.00012 5.67648 4.80829 3.32714 6.45811 1.74756L6.9422 2.25318C5.45863 3.67359 4.70012 5.82426 4.70012 8.00037C4.70013 10.1765 5.45865 12.3271 6.94222 13.7476L6.45812 14.2532C4.80831 12.6736 4.00013 10.3243 4.00012 8.00037Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50038 4.45837C9.66971 4.45837 11.8757 4.85952 13.3711 5.69485C13.5398 5.78911 13.6002 6.00234 13.5059 6.17109C13.4117 6.33985 13.1985 6.40023 13.0297 6.30596C11.6798 5.55192 9.60842 5.15837 7.50038 5.15837C5.39234 5.15837 3.32095 5.55192 1.97107 6.30596C1.80231 6.40023 1.58909 6.33985 1.49482 6.17109C1.40055 6.00234 1.46094 5.78911 1.62969 5.69485C3.12509 4.85952 5.33106 4.45837 7.50038 4.45837Z" fill="#EDEDED"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.50038 11.3503C9.66971 11.3503 11.8757 10.9492 13.3711 10.1139C13.5398 10.0196 13.6002 9.80638 13.5059 9.63762C13.4117 9.46887 13.1985 9.40848 13.0297 9.50275C11.6798 10.2568 9.60842 10.6503 7.50038 10.6503C5.39234 10.6503 3.32095 10.2568 1.97107 9.50275C1.80231 9.40848 1.58909 9.46887 1.49482 9.63762C1.40055 9.80638 1.46094 10.0196 1.62969 10.1139C3.12509 10.9492 5.33106 11.3503 7.50038 11.3503Z" fill="#EDEDED"/>
+</svg>
diff --git a/styles/globals.css b/styles/globals.css
index 5adca884..f9edff73 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -461,3 +461,15 @@ html {
         background-position: 0% 50%;
     }
 }
+
+kbd {
+    color: #707070;
+    border-radius: 4px;
+    background-color: #232323;
+    display: inline-block;
+    font-size: 0.85em;
+    font-weight: 700;
+    line-height: 1;
+    padding: 2px 4px;
+    white-space: nowrap;
+}
diff --git a/uikit/Dash.tsx b/uikit/Dash.tsx
new file mode 100644
index 00000000..7971d6b7
--- /dev/null
+++ b/uikit/Dash.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+
+function Dash({ children }: { children?: React.ReactNode }) {
+    if (children) {
+        return (
+            <div className="flex align-middle ">
+                <div className="order-2 flex-1 self-center  border-t-2 border-dashed border-t-gray-dark-5 text-white" />
+                {children}
+            </div>
+        );
+    }
+    return <div className="border-t-2 border-dashed border-t-gray-dark-5 " />;
+}
+
+function TextLeftDash({ children, className }: { children: React.ReactNode; className?: string }) {
+    return <div className={`order-1  self-start ${className || ""}`}>{children}</div>;
+}
+
+function TextRightDash({ children, className }: { children: React.ReactNode; className?: string }) {
+    return <div className={`order-3  self-start ${className || ""}`}>{children}</div>;
+}
+
+export { Dash, TextLeftDash, TextRightDash };
diff --git a/uikit/card/InformationCard.tsx b/uikit/card/InformationCard.tsx
index cca2203c..0a4a149a 100644
--- a/uikit/card/InformationCard.tsx
+++ b/uikit/card/InformationCard.tsx
@@ -1,20 +1,29 @@
 import type { FunctionComponent, ReactNode } from "react";
 
-/**
- * InformationCardProps is a React Component properties that passed to React Component InformationCard
- */
 type InformationCardProps = {
     children: ReactNode;
     className?: string;
 };
 
-/**
- * InformationCard is just yet another react component
- *
- * @link https://fettblog.eu/typescript-react/components/#functional-components
- */
 const InformationCard: FunctionComponent<InformationCardProps> = ({ children, className }) => {
-    return <div className={`flex w-full flex-col space-y-6 rounded-[16px] bg-gray-light-2 px-4 pb-4 dark:bg-gray-dark-2 ${className || ""}`}>{children}</div>;
+    return <div className={`flex w-full flex-col space-y-6 rounded-[16px] bg-gray-light-2 px-4 pt-4 pb-4 dark:bg-gray-dark-2 ${className || ""}`}>{children}</div>;
 };
 
-export default InformationCard;
+const InformationCardTitle = ({ children }: { children: ReactNode }) => {
+    return <h2 className="text-base font-bold leading-4 text-gray-light-12 dark:text-gray-dark-12">{children}</h2>;
+};
+
+const InformationCardSubTitle = ({ children }: { children: ReactNode }) => {
+    // TODO: elipsis on overflow
+    return <p className="text-sm leading-6  dark:text-gray-dark-10">{children}</p>;
+};
+
+const InformationCardExtra = ({ children, className }: { children: ReactNode; className?: string }) => {
+    return (
+        <div style={{ marginBottom: "-1rem !important" }} className={`-m-4 rounded-b-2xl py-2 px-4 text-sm leading-6 text-white dark:text-gray-dark-10 ${className || ""}`}>
+            {children}
+        </div>
+    );
+};
+
+export { InformationCardTitle, InformationCardSubTitle, InformationCardExtra, InformationCard };