diff --git a/src/components/coins-amount-and-value-change.tsx b/src/components/coins-amount-and-value-change.tsx
index d7ac5e3..4205d06 100644
--- a/src/components/coins-amount-and-value-change.tsx
+++ b/src/components/coins-amount-and-value-change.tsx
@@ -10,7 +10,16 @@ import {
 } from "@/middlelayers/types";
 import { currencyWrapper } from "@/utils/currency";
 import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from './ui/select'
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "./ui/select";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const prefix = "caaavc";
 
@@ -50,24 +59,26 @@ const App = ({
     responsive: false,
     plugins: {
       title: {
-        display: true,
+        display: false,
+        // text is set for resizing
         text: `Trend of Coin ${getLabel()}`,
       },
       datalabels: {
         display: false,
       },
+      legend: {
+        display: false,
+      },
     },
     scales: {
       x: {
         title: {
-          display: true,
-          text: "Date",
+          display: false,
         },
       },
       y: {
         title: {
-          display: true,
-          text: getLabel(),
+          display: false,
         },
         offset: true,
         ticks: {
@@ -101,9 +112,9 @@ const App = ({
                   .value(),
           borderColor: current.lineColor,
           backgroundColor: current.lineColor,
-          borderWidth: 5,
+          borderWidth: 4,
           tension: 0.1,
-          pointRadius: 1,
+          pointRadius: 0.2,
           pointStyle: "rotRect",
         },
       ],
@@ -131,44 +142,58 @@ const App = ({
   }
 
   return (
-    <>
-      <div className="flex">
-        <ButtonGroup
-          defaultValue="amount"
-          onValueChange={(val: string) => onTypeSelectChange(getWholeKey(val))}
-        >
-          <ButtonGroupItem value="amount">Amount</ButtonGroupItem>
-          <ButtonGroupItem value="value">Value</ButtonGroupItem>
-        </ButtonGroup>
-        <div className="ml-5 mt-1">
-          <Select
-            onValueChange={onCoinSelectChange}
-            value={currentCoinSelected}
+    <div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Trend of Coin {getLabel()}
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex">
+            <ButtonGroup
+              defaultValue="amount"
+              onValueChange={(val: string) =>
+                onTypeSelectChange(getWholeKey(val))
+              }
+            >
+              <ButtonGroupItem value="amount">Amount</ButtonGroupItem>
+              <ButtonGroupItem value="value">Value</ButtonGroupItem>
+            </ButtonGroup>
+            <div className="ml-5">
+              <Select
+                onValueChange={onCoinSelectChange}
+                value={currentCoinSelected}
+              >
+                <SelectTrigger className="w-[120px]">
+                  <SelectValue placeholder="Select Coin" />
+                </SelectTrigger>
+                <SelectContent className="overflow-y-auto max-h-[20rem]">
+                  <SelectGroup>
+                    <SelectLabel>Coins</SelectLabel>
+                    {data.map((d) => (
+                      <SelectItem key={d.coin} value={d.coin}>
+                        {d.coin}
+                      </SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 350),
+            }}
           >
-            <SelectTrigger className="w-[120px]">
-              <SelectValue placeholder="Select Coin" />
-            </SelectTrigger>
-            <SelectContent className="overflow-y-auto max-h-[20rem]">
-              <SelectGroup>
-                <SelectLabel>Coins</SelectLabel>
-                {data.map((d) => (
-                  <SelectItem key={d.coin} value={d.coin}>
-                    {d.coin}
-                  </SelectItem>
-                ))}
-              </SelectGroup>
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 350),
-        }}
-      >
-        <Line options={options} data={chartDataByCoin(currentCoinSelected)} />
-      </div>
-    </>
+            <Line
+              options={options}
+              data={chartDataByCoin(currentCoinSelected)}
+            />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/components/index/index.tsx b/src/components/index/index.tsx
index 87b8825..61c5b76 100644
--- a/src/components/index/index.tsx
+++ b/src/components/index/index.tsx
@@ -35,6 +35,7 @@ import {
   LatestAssetsPercentageData,
   TopCoinsPercentageChangeData,
   TopCoinsRankData,
+  TotalValueData,
 } from "@/middlelayers/types";
 import { useContext, useEffect, useState } from "react";
 import {
@@ -95,9 +96,9 @@ const App = () => {
     timestamps: [],
     data: [],
   } as AssetChangeData);
-  const [totalValueData, setTotalValueData] = useState({
+  const [totalValueData, setTotalValueData] = useState<TotalValueData>({
     totalValue: 0,
-    changePercentage: 0,
+    prevTotalValue: 0,
   });
   const [coinsAmountAndValueChangeData, setCoinsAmountAndValueChangeData] =
     useState([] as CoinsAmountAndValueChangeData);
diff --git a/src/components/latest-assets-percentage.tsx b/src/components/latest-assets-percentage.tsx
index 29fbe5e..511feec 100644
--- a/src/components/latest-assets-percentage.tsx
+++ b/src/components/latest-assets-percentage.tsx
@@ -1,6 +1,7 @@
 import { Doughnut } from "react-chartjs-2";
 import { useWindowSize } from "@/utils/hook";
 import { LatestAssetsPercentageData } from "@/middlelayers/types";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const App = ({ data }: { data: LatestAssetsPercentageData }) => {
   const size = useWindowSize();
@@ -9,7 +10,8 @@ const App = ({ data }: { data: LatestAssetsPercentageData }) => {
     maintainAspectRatio: false,
     responsive: false,
     plugins: {
-      title: { display: true, text: "Percentage of Assets" },
+      // text is set for resizing
+      title: { display: false, text: "Percentage of Assets" },
       legend: { labels: { font: {} } },
       datalabels: {
         color: "white",
@@ -47,13 +49,22 @@ const App = ({ data }: { data: LatestAssetsPercentageData }) => {
 
   return (
     <div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 400),
-        }}
-      >
-        <Doughnut options={options as any} data={lineData()} />
-      </div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Percentage of Assets
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 400),
+            }}
+          >
+            <Doughnut options={options as any} data={lineData()} />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };
diff --git a/src/components/overview/index.css b/src/components/overview/index.css
deleted file mode 100644
index 4f54e64..0000000
--- a/src/components/overview/index.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.nice-hr {
-  margin-top: 20px;
-  margin-bottom: 20px;
-  height: 2px;
-  border: none;
-  background-color: #eeeeee;
-  width: 95%;
-}
diff --git a/src/components/overview/index.tsx b/src/components/overview/index.tsx
index 4df213f..f09002a 100644
--- a/src/components/overview/index.tsx
+++ b/src/components/overview/index.tsx
@@ -1,9 +1,8 @@
-import TotalValue from "../total-value";
+import TotalValue from "../total-value-and-change";
 import LatestAssetsPercentage from "../latest-assets-percentage";
 import CoinsAmountAndValueChange from "../coins-amount-and-value-change";
 import TopCoinsRank from "../top-coins-rank";
 import TopCoinsPercentageChange from "../top-coins-percentage-change";
-import "./index.css";
 
 import {
   AssetChangeData,
@@ -34,7 +33,7 @@ const App = ({
   topCoinsPercentageChangeData: TopCoinsPercentageChangeData;
 }) => {
   return (
-    <>
+    <div className="space-y-2">
       <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-2">
         <TotalValue
           currency={currency}
@@ -43,16 +42,14 @@ const App = ({
         ></TotalValue>
       </div>
       <LatestAssetsPercentage data={latestAssetsPercentageData} />
-      <Separator className="my-6" />
       <CoinsAmountAndValueChange
         currency={currency}
         data={coinsAmountAndValueChangeData}
       />
-      <Separator className="my-6" />
       <TopCoinsRank data={topCoinsRankData} />
-      <Separator className="my-6" />
       <TopCoinsPercentageChange data={topCoinsPercentageChangeData} />
-    </>
+      <div className="mb-2"></div>
+    </div>
   );
 };
 
diff --git a/src/components/system-info.tsx b/src/components/system-info.tsx
index bdff88c..43db77f 100644
--- a/src/components/system-info.tsx
+++ b/src/components/system-info.tsx
@@ -17,6 +17,9 @@ const App = () => {
   const [licenseChanged, setLicenseChanged] = useState<boolean>(false);
   const [saveLicenseLoading, setSaveLicenseLoading] = useState(false);
 
+  // to show hidden function
+  const [versionClickTimes, setVersionClickTimes] = useState<number>(0);
+
   useEffect(() => {
     loadVersion();
     loadLicense();
@@ -64,7 +67,12 @@ const App = () => {
 
       <div className="space-y-3">
         <div className="text-l font-bold text-left">Version</div>
-        <div className="text-sm text-left text-gray-400">{version}</div>
+        <div
+          className="text-sm text-left text-gray-400"
+          onClick={() => setVersionClickTimes(versionClickTimes + 1)}
+        >
+          {version}
+        </div>
       </div>
 
       <div className="space-y-3">
@@ -72,7 +80,7 @@ const App = () => {
         <div className="text-sm text-left text-gray-400">
           Enter License Key To Active Pro Version ( Coming Soon )
         </div>
-        <div className="flex">
+        <div className={versionClickTimes >= 5 ? "flex" : "hidden"}>
           <Input
             id="license"
             value={license ?? ""}
diff --git a/src/components/top-coins-percentage-change.tsx b/src/components/top-coins-percentage-change.tsx
index f165715..1367aa2 100644
--- a/src/components/top-coins-percentage-change.tsx
+++ b/src/components/top-coins-percentage-change.tsx
@@ -8,6 +8,7 @@ import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { BubbleDataPoint, Point } from "chart.js";
 import { legendOnClick } from "@/utils/legend";
 import { ButtonGroup, ButtonGroupItem } from "./ui/button-group";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const prefix = "tcpc";
 
@@ -28,7 +29,7 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => {
     responsive: false,
     plugins: {
       title: {
-        display: true,
+        display: false,
         text: `Change of Top Coins ${getLabel()} Percentage`,
       },
       datalabels: {
@@ -41,13 +42,13 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => {
     scales: {
       x: {
         title: {
-          display: true,
+          display: false,
           text: "Date",
         },
       },
       y: {
         title: {
-          display: true,
+          display: false,
           text: "Percentage",
         },
         offset: true,
@@ -92,9 +93,9 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => {
         data: coinPercentageData(data.timestamps, coin.percentageData),
         borderColor: coin.lineColor,
         backgroundColor: coin.lineColor,
-        borderWidth: 5,
+        borderWidth: 4,
         tension: 0.1,
-        pointRadius: 1,
+        pointRadius: 0.2,
         pointStyle: "rotRect",
       })),
     };
@@ -121,24 +122,35 @@ const App = ({ data }: { data: TopCoinsPercentageChangeData }) => {
   }
 
   return (
-    <>
-      <div>
-        <ButtonGroup
-          defaultValue="value"
-          onValueChange={(val: string) => onTypeSelectChange(getWholeKey(val))}
-        >
-          <ButtonGroupItem value="value">Value</ButtonGroupItem>
-          <ButtonGroupItem value="price">Price</ButtonGroupItem>
-        </ButtonGroup>
-      </div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 350),
-        }}
-      >
-        <Line ref={chartRef} options={options as any} data={lineData()} />
-      </div>
-    </>
+    <div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Change of Top Coins {getLabel()} Percentage
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div>
+            <ButtonGroup
+              defaultValue="value"
+              onValueChange={(val: string) =>
+                onTypeSelectChange(getWholeKey(val))
+              }
+            >
+              <ButtonGroupItem value="value">Value</ButtonGroupItem>
+              <ButtonGroupItem value="price">Price</ButtonGroupItem>
+            </ButtonGroup>
+          </div>
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 350),
+            }}
+          >
+            <Line ref={chartRef} options={options as any} data={lineData()} />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/components/top-coins-rank.tsx b/src/components/top-coins-rank.tsx
index 11ce1ba..f1e8394 100644
--- a/src/components/top-coins-rank.tsx
+++ b/src/components/top-coins-rank.tsx
@@ -7,6 +7,7 @@ import { ChartJSOrUndefined } from "react-chartjs-2/dist/types";
 import { BubbleDataPoint, Point } from "chart.js";
 import _ from "lodash";
 import { legendOnClick } from "@/utils/legend";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const App = ({ data }: { data: TopCoinsRankData }) => {
   const size = useWindowSize();
@@ -24,7 +25,7 @@ const App = ({ data }: { data: TopCoinsRankData }) => {
     responsive: false,
     plugins: {
       title: {
-        display: true,
+        display: false,
         text: "Trend of Top Coins Rank",
       },
       datalabels: {
@@ -37,19 +38,25 @@ const App = ({ data }: { data: TopCoinsRankData }) => {
     scales: {
       x: {
         title: {
-          display: true,
+          display: false,
           text: "Date",
         },
+        ticks: {
+          autoSkip: true,
+        },
       },
       y: {
         title: {
-          display: true,
+          display: false,
           text: "Rank",
         },
         offset: true,
         reverse: true,
         ticks: {
           precision: 0,
+          callback: function (value: number) {
+            return "#" + value;
+          },
         },
         grid: {
           display: false,
@@ -77,24 +84,33 @@ const App = ({ data }: { data: TopCoinsRankData }) => {
         data: coinRankData(data.timestamps, coin.rankData),
         borderColor: coin.lineColor,
         backgroundColor: coin.lineColor,
-        borderWidth: 5,
+        borderWidth: 4,
         tension: 0.1,
-        pointRadius: 1,
+        pointRadius: 0.2,
         pointStyle: "rotRect",
       })),
     };
   }
 
   return (
-    <>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 350),
-        }}
-      >
-        <Line ref={chartRef} options={options as any} data={lineData()} />
-      </div>
-    </>
+    <div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Trend of Top Coins Rank
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 350),
+            }}
+          >
+            <Line ref={chartRef} options={options as any} data={lineData()} />
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/components/total-value.tsx b/src/components/total-value-and-change.tsx
similarity index 88%
rename from src/components/total-value.tsx
rename to src/components/total-value-and-change.tsx
index 21f38e1..c3fca4a 100644
--- a/src/components/total-value.tsx
+++ b/src/components/total-value-and-change.tsx
@@ -239,6 +239,8 @@ const App = ({
     plugins: {
       title: {
         display: false,
+        // text is set for resizing
+        text: "Trend of Asset",
       },
       datalabels: {
         display: false,
@@ -251,7 +253,6 @@ const App = ({
       x: {
         title: {
           display: false,
-          text: "Date",
         },
         ticks: {
           maxTicksLimit: 2,
@@ -317,17 +318,21 @@ const App = ({
             Total Value In {formatCurrencyName()}
           </CardTitle>
           <svg
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 24 24"
+            viewBox="0 0 15 15"
             fill="none"
+            xmlns="http://www.w3.org/2000/svg"
             stroke="currentColor"
             strokeLinecap="round"
             strokeLinejoin="round"
-            strokeWidth="2"
             className="h-4 w-4 text-muted-foreground cursor-pointer"
             onClick={() => setBtcAsBase(!btcAsBase)}
           >
-            <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
+            <path
+              d="M3.35355 1.85355C3.54882 1.65829 3.54882 1.34171 3.35355 1.14645C3.15829 0.951184 2.84171 0.951184 2.64645 1.14645L0.646447 3.14645C0.451184 3.34171 0.451184 3.65829 0.646447 3.85355L2.64645 5.85355C2.84171 6.04882 3.15829 6.04882 3.35355 5.85355C3.54882 5.65829 3.54882 5.34171 3.35355 5.14645L2.20711 4H9.5C11.433 4 13 5.567 13 7.5C13 7.77614 13.2239 8 13.5 8C13.7761 8 14 7.77614 14 7.5C14 5.01472 11.9853 3 9.5 3H2.20711L3.35355 1.85355ZM2 7.5C2 7.22386 1.77614 7 1.5 7C1.22386 7 1 7.22386 1 7.5C1 9.98528 3.01472 12 5.5 12H12.7929L11.6464 13.1464C11.4512 13.3417 11.4512 13.6583 11.6464 13.8536C11.8417 14.0488 12.1583 14.0488 12.3536 13.8536L14.3536 11.8536C14.5488 11.6583 14.5488 11.3417 14.3536 11.1464L12.3536 9.14645C12.1583 8.95118 11.8417 8.95118 11.6464 9.14645C11.4512 9.34171 11.4512 9.65829 11.6464 9.85355L12.7929 11H5.5C3.567 11 2 9.433 2 7.5Z"
+              fill="currentColor"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            ></path>
           </svg>
         </CardHeader>
         <CardContent>
diff --git a/src/components/wallet-analyzer.tsx b/src/components/wallet-analyzer.tsx
index ed731af..a227ebc 100644
--- a/src/components/wallet-analyzer.tsx
+++ b/src/components/wallet-analyzer.tsx
@@ -29,14 +29,13 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
   }
 
   return (
-    <>
+    <div className='space-y-2'>
       <WalletAssetsPercentage
         data={walletAssetsPercentage}
         currency={currency}
       />
-      <Separator className="my-6" />
       <WalletAssetsChange data={walletAssetsChange} currency={currency} />
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/wallet-assets-change.tsx b/src/components/wallet-assets-change.tsx
index 8e1ce84..cddecaa 100644
--- a/src/components/wallet-assets-change.tsx
+++ b/src/components/wallet-assets-change.tsx
@@ -13,6 +13,7 @@ import {
   TableBody,
   Table,
 } from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
 
 const App = ({
   data,
@@ -51,63 +52,73 @@ const App = ({
   }
 
   return (
-    <>
-      <h2 className="text-2xl font-bold text-left py-4 ml-10">Value Changes</h2>
-      <div className="flex justify-center items-center">
-        <div className="w-4/5 overflow-x-auto">
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Wallet Type</TableHead>
-                <TableHead>Wallet Alias</TableHead>
-                <TableHead>Percentage</TableHead>
-                <TableHead className="text-right">Value</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {data.map((d) => (
-                <TableRow key={d.wallet}>
-                  <TableCell className="font-medium">
-                    {!d.walletType || d.walletType === "null"
-                      ? "Unknown"
-                      : tweakWalletType(d.walletType)}
-                  </TableCell>
-                  <TableCell>
-                    {d.walletAlias ??
-                      insertEllipsis(
-                        !d.wallet || d.wallet === "null" ? "Unknown" : d.wallet,
-                        32
-                      )}
-                  </TableCell>
-                  <TableCell
-                    className={`text-${getChangeClassName(
-                      d.changePercentage
-                    )}-500`}
-                  >
-                    {getArrow(d.changePercentage)}
-                    {prettyNumberToLocaleString(
-                      getPositiveValue(d.changePercentage)
-                    )}
-                    %
-                  </TableCell>
-                  <TableCell
-                    className={`text-right text-${getChangeClassName(
-                      d.changePercentage
-                    )}-500`}
-                  >
-                    {getArrow(d.changeValue)}
-                    {currency.symbol}
-                    {prettyNumberToLocaleString(
-                      currencyWrapper(currency)(getPositiveValue(d.changeValue))
-                    )}
-                  </TableCell>
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        </div>
-      </div>
-    </>
+    <div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">Value Changes</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div className="flex ">
+            <div className="w-[100%] overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Wallet Type</TableHead>
+                    <TableHead>Wallet Alias</TableHead>
+                    <TableHead>Percentage</TableHead>
+                    <TableHead className="text-right">Value</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {data.map((d) => (
+                    <TableRow key={d.wallet}>
+                      <TableCell className="font-medium">
+                        {!d.walletType || d.walletType === "null"
+                          ? "Unknown"
+                          : tweakWalletType(d.walletType)}
+                      </TableCell>
+                      <TableCell>
+                        {d.walletAlias ??
+                          insertEllipsis(
+                            !d.wallet || d.wallet === "null"
+                              ? "Unknown"
+                              : d.wallet,
+                            32
+                          )}
+                      </TableCell>
+                      <TableCell
+                        className={`text-${getChangeClassName(
+                          d.changePercentage
+                        )}-500`}
+                      >
+                        {getArrow(d.changePercentage)}
+                        {prettyNumberToLocaleString(
+                          getPositiveValue(d.changePercentage)
+                        )}
+                        %
+                      </TableCell>
+                      <TableCell
+                        className={`text-right text-${getChangeClassName(
+                          d.changePercentage
+                        )}-500`}
+                      >
+                        {getArrow(d.changeValue)}
+                        {currency.symbol}
+                        {prettyNumberToLocaleString(
+                          currencyWrapper(currency)(
+                            getPositiveValue(d.changeValue)
+                          )
+                        )}
+                      </TableCell>
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
   );
 };
 
diff --git a/src/components/wallet-assets-percentage.tsx b/src/components/wallet-assets-percentage.tsx
index ad7121e..3a212dc 100644
--- a/src/components/wallet-assets-percentage.tsx
+++ b/src/components/wallet-assets-percentage.tsx
@@ -7,7 +7,8 @@ import {
 import { currencyWrapper, prettyNumberToLocaleString } from "@/utils/currency";
 import _ from "lodash";
 import { useEffect, useState } from "react";
-import { insertEllipsis } from '@/utils/string'
+import { insertEllipsis } from "@/utils/string";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
 
 const App = ({
   data,
@@ -31,7 +32,7 @@ const App = ({
     barPercentage: 0.9,
     plugins: {
       title: {
-        display: true,
+        display: false,
         text: `Percentage And Total Value of Each Wallet`,
       },
       legend: {
@@ -69,14 +70,18 @@ const App = ({
         },
         grid: {
           display: false,
-        }
-      }
+        },
+      },
     },
   };
 
   function lineData() {
     return {
-      labels: data.map((d) => d.walletAlias ? `${d.walletType}-${d.walletAlias}` : insertEllipsis(d.wallet, 16)),
+      labels: data.map((d) =>
+        d.walletAlias
+          ? `${d.walletType}-${d.walletAlias}`
+          : insertEllipsis(d.wallet, 16)
+      ),
       datasets: [
         {
           alias: "y",
@@ -92,13 +97,22 @@ const App = ({
 
   return (
     <div>
-      <div
-        style={{
-          height: Math.max((size.height || 100) / 2, 400),
-        }}
-      >
-        <Bar options={options as any} data={lineData()} />
-      </div>
+      <Card>
+        <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+          <CardTitle className="text-sm font-medium font-bold">
+            Percentage And Total Value of Each Wallet
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <div
+            style={{
+              height: Math.max((size.height || 100) / 2, 400),
+            }}
+          >
+            <Bar options={options as any} data={lineData()} />
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 };