diff --git a/src/components/common/table/index.tsx b/src/components/common/table/index.tsx
index 6a57e76..7fe9de0 100644
--- a/src/components/common/table/index.tsx
+++ b/src/components/common/table/index.tsx
@@ -15,10 +15,12 @@ const App = ({
   columns,
   data,
   onRowClick,
+  colorChangedOnRowClick,
 }: {
   columns: ColumnData[];
   data: ({ id: string | number } & unknown)[];
   onRowClick?: (id: string | number) => unknown;
+  colorChangedOnRowClick?: boolean;
 }) => {
   const randomId = useMemo(() => "" + Math.floor(Math.random() * 1000000), []);
   const getColStyle = (column: ColumnData): React.CSSProperties => {
@@ -40,10 +42,15 @@ const App = ({
     const realId = (i: string | number) => "row-" + i + "-" + randomId;
 
     // set clicked background
-    if (clickedRow !== null) {
-      document.getElementById(realId(clickedRow))?.classList.remove("clicked");
+    if (colorChangedOnRowClick) {
+      if (clickedRow !== null) {
+        document
+          .getElementById(realId(clickedRow))
+          ?.classList.remove("clicked");
+      }
+      document.getElementById(realId(idx))?.classList.add("clicked");
     }
-    document.getElementById(realId(idx))?.classList.add("clicked");
+
     setClickedRow(idx);
   }
 
diff --git a/src/components/historical-data/index.css b/src/components/historical-data/index.css
index e69de29..8664503 100644
--- a/src/components/historical-data/index.css
+++ b/src/components/historical-data/index.css
@@ -0,0 +1,64 @@
+.historical-data-card {
+  width: 60%;
+  height: 50px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  padding: 10px 20px;
+  margin-bottom: 15px;
+  cursor: pointer;
+  box-shadow: 0 0 5px #ccc;
+
+  min-width: 390px;
+}
+
+.historical-data-card:hover {
+  box-shadow: 0 0 5px #aaa;
+
+  .historical-data-card-bottom .historical-data-card-bottom-operations {
+    display: flex;
+  }
+}
+
+.historical-data-card-total {
+  font-size: 1.4rem;
+  font-weight: 500;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  float: right;
+}
+
+.historical-data-card-created-at {
+  float: left;
+
+  margin-right: 10px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* left bottom */
+.historical-data-card-bottom {
+  width: 100%;
+  height: 40px;
+  align-items: center;
+
+  position: relative;
+
+  display: flex;
+}
+
+.historical-data-card-bottom-operations {
+  display: none;
+}
+
+/* fix bottom right */
+.historical-data-card-bottom-changes {
+  position: absolute;
+  font-size: 0.9em;
+  top: 5px;
+  right: 0;
+  color: gray;
+}
diff --git a/src/components/historical-data/index.tsx b/src/components/historical-data/index.tsx
index ddb66b6..1e43aac 100644
--- a/src/components/historical-data/index.tsx
+++ b/src/components/historical-data/index.tsx
@@ -13,6 +13,7 @@ import { toast } from "react-hot-toast";
 import { LoadingContext } from "../../App";
 import { timestampToDate } from "../../utils/date";
 import { currencyWrapper } from "../../utils/currency";
+import Modal from "../common/modal";
 
 type RankData = {
   id: number;
@@ -33,59 +34,10 @@ const App = ({
   const [data, setData] = useState([] as HistoricalData[]);
   const [rankData, setRankData] = useState([] as RankData[]);
   const { setLoading } = useContext(LoadingContext);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const columns = [
-    {
-      key: "createdAt",
-      dataIndex: "createdAt",
-      title: "Date",
-      render: (id: number | string) => (
-        <>
-          {timestampToDate(
-            new Date(
-              _(data).find((d) => d.id === id)!.createdAt as string
-            ).getTime(),
-            true
-          )}
-        </>
-      ),
-    },
-    {
-      key: "total",
-      dataIndex: "total",
-      title: "Total",
-      render: (id: number | string) => {
-        const curData = _(data).find((d) => d.id === id);
-
-        return (
-          <>
-            {curData
-              ? currency.symbol +
-                currencyWrapper(currency)(curData.total).toFixed(2)
-              : "-"}
-          </>
-        );
-      },
-    },
-    {
-      title: "Opt",
-      dataIndex: "id",
-      key: "operations",
-      render: (id: number | string) => (
-        <a href="#" onClick={() => onDeleteClick(id as string)}>
-          <img
-            src={deleteIcon}
-            alt="delete"
-            style={{
-              border: 0,
-              height: 20,
-              width: 20,
-            }}
-          />
-        </a>
-      ),
-    },
-  ];
+  const [pageNum, setPageNum] = useState(1);
+  const pageSize = 10;
 
   const rankColumns = [
     {
@@ -186,12 +138,109 @@ const App = ({
         .sortBy("rank")
         .value()
     );
+
+    setIsModalOpen(true);
+  }
+
+  function onModalClose() {
+    setIsModalOpen(false);
+  }
+
+  function getUpOrDown(val: number) {
+    const p = val > 0 ? "+" : val === 0 ? "" : "-";
+    return p;
+  }
+
+  function renderHistoricalDataList() {
+    // split data into pages
+    const idx = (pageNum - 1) * pageSize;
+    return _(data)
+      .slice(idx, idx + pageSize)
+      .map((d, idx) => {
+        return (
+          <div
+            key={d.id}
+            className="historical-data-card"
+            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 +
+                  currencyWrapper(currency)(d.total).toFixed(2)}
+              </div>
+            </div>
+
+            <div className="historical-data-card-bottom">
+              <div className="historical-data-card-bottom-operations">
+                <a href="#" onClick={() => onDeleteClick(d.id)}>
+                  <img
+                    src={deleteIcon}
+                    alt="delete"
+                    style={{
+                      border: 0,
+                      height: 20,
+                      width: 20,
+                    }}
+                  />
+                </a>
+              </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 +
+                    currencyWrapper(currency)(
+                      Math.abs(d.total - data[idx + 1].total)
+                    ).toFixed(2)
+                  : ""}
+              </div>
+            </div>
+          </div>
+        );
+      })
+      .value();
+  }
+
+  function page() {
+    return _(data.length / pageSize)
+      .range()
+      .map((i) => {
+        const curPageNum = i + 1;
+
+        return (
+          <a
+            href="#"
+            key={"his-page-" + curPageNum}
+            onClick={() => setPageNum(curPageNum)}
+            style={{
+              color: curPageNum === pageNum ? "rgb(37, 37, 244)" : "gray",
+              marginRight: 10,
+            }}
+          >
+            {curPageNum}
+          </a>
+        );
+      })
+      .value();
   }
 
   return (
     <div>
-      <h2>Historical Data</h2>
-      <div className="historical-data">
+      <h2
+        style={{
+          marginBottom: 5,
+        }}
+      >
+        Historical Data
+      </h2>
+      <Modal visible={isModalOpen} onClose={onModalClose}>
         <div
           id="detail-view"
           style={{
@@ -201,18 +250,38 @@ const App = ({
           }}
         >
           <Table data={rankData} columns={rankColumns} />
-          <h3>👆 Details</h3>
         </div>
-        <div
-          id="simple-view"
+      </Modal>
+      <div
+        style={{
+          marginBottom: 10,
+          color: "gray",
+        }}
+      >
+        <a
+          href="#"
+          onClick={() => (pageNum > 1 ? setPageNum(pageNum - 1) : null)}
           style={{
-            display: "inline-block",
-            verticalAlign: "top",
+            marginRight: 10,
+            color: "gray",
           }}
         >
-          <Table data={data} columns={columns} onRowClick={onRowClick} />
-        </div>
+          {"<"}
+        </a>
+        {page()}
+        <a
+          href="#"
+          onClick={() =>
+            pageNum < data.length / pageSize ? setPageNum(pageNum + 1) : null
+          }
+          style={{
+            color: "gray",
+          }}
+        >
+          {">"}
+        </a>
       </div>
+      <div className="historical-data">{renderHistoricalDataList()}</div>
     </div>
   );
 };
diff --git a/src/components/index/index.tsx b/src/components/index/index.tsx
index 33ba6d1..e04f7d3 100644
--- a/src/components/index/index.tsx
+++ b/src/components/index/index.tsx
@@ -198,7 +198,7 @@ const App = () => {
     setTopCoinsPercentageChangeData(tcpcd);
 
     const lra = await queryLastRefreshAt();
-    setLastRefreshAt(lra)
+    setLastRefreshAt(lra);
   }
 
   function loadAllData(size = 10) {
@@ -256,7 +256,11 @@ const App = () => {
       <ReactTooltip
         id="last-refresh-at"
         place="bottom"
-        content={lastRefreshAt ? "Last Refresh At: " + lastRefreshAt : "Never Refresh Before"}
+        content={
+          lastRefreshAt
+            ? "Last Refresh At: " + lastRefreshAt
+            : "Never Refresh Before"
+        }
       />
       <div className="top-buttons-wrapper">
         <div className="left-buttons">
@@ -281,7 +285,10 @@ const App = () => {
           </div>
         </div>
         <div className="right-buttons">
-          <div style={{ display: "inline-block" }} data-tooltip-id="last-refresh-at">
+          <div
+            style={{ display: "inline-block" }}
+            data-tooltip-id="last-refresh-at"
+          >
             <RefreshData
               afterRefresh={() => {
                 loadAllData(querySize);