diff --git a/src/components/coin-analytics.tsx b/src/components/coin-analytics.tsx
index 4f7d03f..30c8efe 100644
--- a/src/components/coin-analytics.tsx
+++ b/src/components/coin-analytics.tsx
@@ -73,7 +73,6 @@ const App = ({
   const pageSize = 20;
 
   const [dataPage, setDataPage] = useState<number>(0);
-  const [maxDataPage, setMaxDataPage] = useState<number>(0);
 
   const [actions, setActions] = useState<AssetAction[]>([]);
   const [latestAsset, setLatestAsset] = useState<Asset | undefined>();
@@ -116,11 +115,12 @@ const App = ({
       setWalletAliasMap(wam);
     });
 
-    // update max page
+  }, [actions]);
+
+  const maxDataPage = useMemo(() => {
     // - 0.000000000001 is for float number precision
     const mp = Math.floor(actions.length / pageSize - 0.000000000001);
-    // set max data page
-    setMaxDataPage(mp >= 0 ? mp : 0);
+    return mp >= 0 ? mp : 0;
   }, [actions]);
 
   const breakevenPrice = useMemo(
diff --git a/src/components/comparison.tsx b/src/components/comparison.tsx
index cba9173..c5c69ec 100644
--- a/src/components/comparison.tsx
+++ b/src/components/comparison.tsx
@@ -360,7 +360,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
         <div className="col-start-2 col-end-4">
           <Select onValueChange={onBaseSelectChange} value={baseId}>
             <SelectTrigger className="w-[150px]">
-              <SelectValue placeholder="Select Base Date" />
+              <SelectValue placeholder="Base Date" />
             </SelectTrigger>
             <SelectContent className="overflow-y-auto max-h-[20rem]">
               <SelectGroup>
@@ -377,7 +377,7 @@ const App = ({ currency }: { currency: CurrencyRateDetail }) => {
         <div className="col-end-7 col-span-2">
           <Select onValueChange={onHeadSelectChange} value={headId}>
             <SelectTrigger className="w-[150px]">
-              <SelectValue placeholder="Select Head Date" />
+              <SelectValue placeholder="Head Date" />
             </SelectTrigger>
             <SelectContent className="overflow-y-auto max-h-[20rem]">
               <SelectGroup>
diff --git a/src/components/historical-data/index.tsx b/src/components/historical-data/index.tsx
index 69a0264..9a62e31 100644
--- a/src/components/historical-data/index.tsx
+++ b/src/components/historical-data/index.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   deleteHistoricalDataByUUID,
   deleteHistoricalDataDetailById,
@@ -24,6 +24,18 @@ import ImageStack from "../common/image-stack";
 import { getImageApiPath } from "@/utils/app";
 import UnknownLogo from "@/assets/icons/unknown-logo.svg";
 import bluebird from "bluebird";
+import { Button } from "../ui/button";
+import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
+import { Card, CardContent, CardHeader, CardTitle } from "../ui/card";
 
 type RankData = {
   id: number;
@@ -53,22 +65,23 @@ const App = ({
 
   const wsize = useWindowSize();
 
-  const [pageNum, setPageNum] = useState(1);
+  const [dataPage, setDataPage] = useState<number>(0);
+
   const pageSize = 10;
 
   useEffect(() => {
     const symbols = _(data)
       .map((d) => d.assets)
       .flatten()
-      .sortBy(d=>d.createdAt)
+      .sortBy((d) => d.createdAt)
       .reverse()
-      .uniqBy(d=>d.symbol)
-      .map(d=>({
+      .uniqBy((d) => d.symbol)
+      .map((d) => ({
         symbol: d.symbol,
         price: d.price,
       }))
       .value();
-      
+
     downloadCoinLogos(symbols);
 
     getLogoMap(data).then((m) => setLogoMap(m));
@@ -78,6 +91,12 @@ const App = ({
     loadAllData();
   }, []);
 
+  const maxDataPage = useMemo(() => {
+    // - 0.000000000001 is for float number precision
+    const mp = Math.floor(data.length / pageSize - 0.000000000001);
+    return mp >= 0 ? mp : 0;
+  }, [data]);
+
   async function getLogoMap(d: HistoricalData[]) {
     const acd = await getAppCacheDir();
     const kvs = await bluebird.map(
@@ -183,104 +202,136 @@ const App = ({
     return p;
   }
 
+  function renderHistoricalDataListV2() {
+    return (
+      data
+        .map((d, idx) => {
+          return (
+            <Card className="group" key={"historical-card-" + idx}>
+              <CardHeader className="flex flex-row items-center justify-between space-y-0 pt-3">
+                <CardTitle className="text-sm font-medium pt-0">
+                  <div className="grid gap-4 grid-cols-12">
+                    <div className="col-span-10">
+                      {timestampToDate(new Date(d.createdAt).getTime(), true)}
+                    </div>
+                    <div className="col-span-1 text-xl text-right">
+                      {currency.symbol +
+                        prettyNumberToLocaleString(
+                          currencyWrapper(currency)(d.total)
+                        )}
+                    </div>
+                  </div>
+                </CardTitle>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-4">
+                  <div className="col-span-2">todo</div>
+                  <div className="col-span-2">
+                    <div
+                      style={{
+                        color:
+                          d.total - data[idx + 1]?.total > 0 ? "green" : "red",
+                      }}
+                    >
+                      {idx < data.length - 1
+                        ? getUpOrDown(d.total - data[idx + 1].total) +
+                          currency.symbol +
+                          prettyNumberToLocaleString(
+                            currencyWrapper(currency)(
+                              Math.abs(d.total - data[idx + 1].total)
+                            )
+                          )
+                        : ""}
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          );
+        })
+        // TODO: slice first for better performance
+        .slice(dataPage * pageSize, (dataPage + 1) * pageSize)
+    );
+  }
+
   function renderHistoricalDataList() {
     // split data into pages
-    const idx = (pageNum - 1) * pageSize;
-    return _(data)
-      .map((d, idx) => {
-        return (
-          <div
-            key={d.id}
-            className="historical-data-card group"
-            onClick={() => onRowClick(d.id)}
-          >
-            <div>
-              <div className="historical-data-card-created-at">
-                {timestampToDate(new Date(d.createdAt).getTime(), true)}
-              </div>
-              <div className="historical-data-card-total">
-                {currency.symbol +
-                  prettyNumberToLocaleString(
-                    currencyWrapper(currency)(d.total)
-                  )}
+    return (
+      _(data)
+        .map((d, idx) => {
+          return (
+            <div
+              key={d.id}
+              className="historical-data-card group"
+              onClick={() => onRowClick(d.id)}
+            >
+              <div>
+                <div className="historical-data-card-created-at">
+                  {timestampToDate(new Date(d.createdAt).getTime(), true)}
+                </div>
+                <div className="historical-data-card-total">
+                  {currency.symbol +
+                    prettyNumberToLocaleString(
+                      currencyWrapper(currency)(d.total)
+                    )}
+                </div>
               </div>
-            </div>
 
-            <div className="historical-data-card-bottom">
-              <div className="hidden group-hover:inline-block">
-                <a onClick={() => onHistoricalDataDeleteClick(d.id)}>
-                  <img
-                    src={DeleteIcon}
-                    alt="delete"
-                    style={{
-                      border: 0,
-                      height: 20,
-                      width: 20,
-                    }}
+              <div className="historical-data-card-bottom">
+                <div className="hidden group-hover:inline-block">
+                  <a onClick={() => onHistoricalDataDeleteClick(d.id)}>
+                    <img
+                      src={DeleteIcon}
+                      alt="delete"
+                      style={{
+                        border: 0,
+                        height: 20,
+                        width: 20,
+                      }}
+                    />
+                  </a>
+                </div>
+                <div
+                  style={{
+                    position: "absolute",
+                    left: "30%",
+                  }}
+                >
+                  <ImageStack
+                    imageSrcs={_(d.assets)
+                      .sortBy("value")
+                      .reverse()
+                      .take(7)
+                      .map((a) => logoMap[a.symbol] || UnknownLogo)
+                      .value()}
+                    imageWidth={25}
+                    imageHeight={25}
                   />
-                </a>
-              </div>
-              <div
-                style={{
-                  position: "absolute",
-                  left: "30%",
-                }}
-              >
-                <ImageStack
-                  imageSrcs={_(d.assets)
-                    .sortBy("value")
-                    .reverse()
-                    .take(7)
-                    .map((a) => logoMap[a.symbol] || UnknownLogo)
-                    .value()}
-                  imageWidth={25}
-                  imageHeight={25}
-                />
-              </div>
-              <div
-                className="historical-data-card-bottom-changes"
-                style={{
-                  color: d.total - data[idx + 1]?.total > 0 ? "green" : "red",
-                }}
-              >
-                {idx < data.length - 1
-                  ? getUpOrDown(d.total - data[idx + 1].total) +
-                    currency.symbol +
-                    prettyNumberToLocaleString(
-                      currencyWrapper(currency)(
-                        Math.abs(d.total - data[idx + 1].total)
+                </div>
+                <div
+                  className="historical-data-card-bottom-changes"
+                  style={{
+                    color: d.total - data[idx + 1]?.total > 0 ? "green" : "red",
+                  }}
+                >
+                  {idx < data.length - 1
+                    ? getUpOrDown(d.total - data[idx + 1].total) +
+                      currency.symbol +
+                      prettyNumberToLocaleString(
+                        currencyWrapper(currency)(
+                          Math.abs(d.total - data[idx + 1].total)
+                        )
                       )
-                    )
-                  : ""}
+                    : ""}
+                </div>
               </div>
             </div>
-          </div>
-        );
-      })
-      .slice(idx, idx + pageSize)
-      .value();
-  }
-
-  function page() {
-    return _(data.length / pageSize)
-      .range()
-      .map((i) => {
-        const curPageNum = i + 1;
-
-        return (
-          <a
-            key={"his-page-" + curPageNum}
-            onClick={() => setPageNum(curPageNum)}
-            style={{
-              color: curPageNum === pageNum ? "black" : "gray",
-              marginRight: 10,
-            }}
-          >
-            {curPageNum}
-          </a>
-        );
-      })
-      .value();
+          );
+        })
+        // TODO: slice first for better performance
+        .slice(dataPage * pageSize, (dataPage + 1) * pageSize)
+        .value()
+    );
   }
 
   function renderDetailPage(data: RankData[]) {
@@ -421,28 +472,48 @@ const App = ({
           </table>
         </div>
       </Modal>
-      <div className="flex justify-center items-center mb-5 text-gray-500 cursor-pointer">
-        <a
-          onClick={() => (pageNum > 1 ? setPageNum(pageNum - 1) : null)}
-          style={{
-            marginRight: 10,
-            color: "gray",
-          }}
-        >
-          {"<"}
-        </a>
-        {page()}
-        <a
-          onClick={() =>
-            pageNum < data.length / pageSize ? setPageNum(pageNum + 1) : null
-          }
-          style={{
-            color: "gray",
-          }}
-        >
-          {">"}
-        </a>
+      <div className="flex justify-center items-center mb-3 cursor-pointer">
+        <div className="flex space-x-0 items-center">
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setDataPage(Math.max(dataPage - 1, 0))}
+            disabled={dataPage <= 0}
+          >
+            <ChevronLeftIcon />
+          </Button>
+          <div className="text-gray-800 text-sm">
+            <Select
+              value={dataPage + ""}
+              onValueChange={(v) => {
+                setDataPage(+v);
+              }}
+            >
+              <SelectTrigger className="border-none shadow-none focus:ring-0">
+                <SelectValue placeholder="Select Page" />
+              </SelectTrigger>
+              <SelectContent className="overflow-y-auto max-h-[20rem]">
+                <SelectGroup>
+                  {_.range(maxDataPage + 1).map((s) => (
+                    <SelectItem key={"historical-idx-" + s} value={s + ""}>
+                      {s + 1} {"/"} {maxDataPage + 1}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setDataPage(Math.min(dataPage + 1, maxDataPage))}
+            disabled={dataPage >= maxDataPage}
+          >
+            <ChevronRightIcon />
+          </Button>
+        </div>
       </div>
+      {/* <div>{renderHistoricalDataListV2()}</div> */}
       <div className="historical-data">{renderHistoricalDataList()}</div>
     </div>
   );
diff --git a/src/components/latest-assets-percentage.tsx b/src/components/latest-assets-percentage.tsx
index 8db6ca2..a16c59b 100644
--- a/src/components/latest-assets-percentage.tsx
+++ b/src/components/latest-assets-percentage.tsx
@@ -5,7 +5,7 @@ import {
 } from "@/middlelayers/types";
 import { Card, CardContent } from "./ui/card";
 import _ from "lodash";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { appCacheDir as getAppCacheDir } from "@tauri-apps/api/path";
 import { Table, TableBody, TableCell, TableRow } from "./ui/table";
 import { getImageApiPath } from "@/utils/app";
@@ -31,7 +31,6 @@ const App = ({
   data: LatestAssetsPercentageData;
 }) => {
   const [dataPage, setDataPage] = useState<number>(0);
-  const [maxDataPage, setMaxDataPage] = useState<number>(0);
   const [logoMap, setLogoMap] = useState<{ [x: string]: string }>({});
   const pageSize = 5;
   const navigate = useNavigate();
@@ -57,15 +56,16 @@ const App = ({
         .value()
     );
 
-    // - 0.000000000001 is for float number precision
-    const mp = Math.floor(data.length / pageSize - 0.000000000001)
-    // set max data page
-    setMaxDataPage(mp >= 0 ? mp : 0);
-
     // set logo map
     getLogoMap(data).then((m) => setLogoMap(m));
   }, [data]);
 
+  const maxDataPage = useMemo(() => {
+    // - 0.000000000001 is for float number precision
+    const mp = Math.floor(data.length / pageSize - 0.000000000001);
+    return mp >= 0 ? mp : 0;
+  }, [data]);
+
   async function getLogoMap(d: LatestAssetsPercentageData) {
     const acd = await getAppCacheDir();
     const kvs = await bluebird.map(d, async (coin) => {