diff --git a/src/components/ConnectedAccount/ConnectedAccount.css b/src/components/ConnectedAccount/ConnectedAccount.css
index 299f46d..85b8a56 100644
--- a/src/components/ConnectedAccount/ConnectedAccount.css
+++ b/src/components/ConnectedAccount/ConnectedAccount.css
@@ -30,6 +30,10 @@
         text-align: left;
         color: #969696;
 
+        &:hover {
+          cursor: pointer;
+        }
+
         &[aria-selected] {
           background: #2f2f2f;
           color: white;
diff --git a/src/components/ConnectedAccount/ConnectedAccount.tsx b/src/components/ConnectedAccount/ConnectedAccount.tsx
index 37ecf33..1e3f182 100644
--- a/src/components/ConnectedAccount/ConnectedAccount.tsx
+++ b/src/components/ConnectedAccount/ConnectedAccount.tsx
@@ -2,18 +2,36 @@ import "./ConnectedAccount.css";
 import { WalletCard } from "./WalletCard";
 import { ProgressCircle } from "./ProgressCircle";
 import ArrowRightIcon from "../../assets/icons/arrow-right.svg?react";
+import { useState } from "react";
+import { attributes } from "../../utils/attributes";
+
+type TabType = "weekly" | "daily" | "monthly";
 
 export function ConnectedAccount() {
+  const [tab, setTab] = useState<TabType>("monthly");
+
   return (
     <div className="connected-account">
       <main>
-        <WalletCard></WalletCard>
+        <WalletCard tab={tab}></WalletCard>
       </main>
       <footer>
         <ul>
-          <li>Daily</li>
-          <li aria-selected>Weekly</li>
-          <li>Monthly</li>
+          <li
+            onClick={() => setTab("daily")}
+            {...attributes({ "aria-selected": tab === "daily" })}>
+            Daily
+          </li>
+          <li
+            onClick={() => setTab("weekly")}
+            {...attributes({ "aria-selected": tab === "weekly" })}>
+            Weekly
+          </li>
+          <li
+            onClick={() => setTab("monthly")}
+            {...attributes({ "aria-selected": tab === "monthly" })}>
+            Monthly
+          </li>
         </ul>
         <div>
           <div className="row gap">
diff --git a/src/components/ConnectedAccount/WalletCard.css b/src/components/ConnectedAccount/WalletCard.css
index 90a83ad..5c16606 100644
--- a/src/components/ConnectedAccount/WalletCard.css
+++ b/src/components/ConnectedAccount/WalletCard.css
@@ -202,4 +202,9 @@
       top: 10px;
     }
   }
+
+  .lines {
+    height: 200;
+    transform: scale(1.25);
+  }
 }
diff --git a/src/components/ConnectedAccount/WalletCard.tsx b/src/components/ConnectedAccount/WalletCard.tsx
index 57da438..e88983e 100644
--- a/src/components/ConnectedAccount/WalletCard.tsx
+++ b/src/components/ConnectedAccount/WalletCard.tsx
@@ -1,15 +1,37 @@
 import "./WalletCard.css";
 import ArrowRightIcon from "../../assets/icons/arrow-right.svg?react";
 import ArrowLeftIcon from "../../assets/icons/arrow-left.svg?react";
-import WalletChart from "../../assets/icons/chart.svg?react";
-import WalletLines from "../../assets/icons/lines.svg?react";
-import { useState, ChangeEvent } from "react";
+import { useState, ChangeEvent, useRef, useEffect } from "react";
+
+import * as echarts from "echarts/core";
+import { LineChart } from "echarts/charts";
+import { GridComponent } from "echarts/components";
+import { UniversalTransition } from "echarts/features";
+import { CanvasRenderer } from "echarts/renderers";
 
 const defaultTokenValue = 1540;
 
-export function WalletCard() {
+echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);
+
+type Props = {
+  tab: "weekly" | "daily" | "monthly";
+};
+
+export function WalletCard({ tab }: Props) {
   const [tokenValue, setTokenValue] = useState(defaultTokenValue);
   const [currency, setCurrency] = useState("USD");
+  const div = useRef<HTMLDivElement>(null);
+  const chart = useRef<echarts.EChartsType | null>(null);
+  const [, setRefresher] = useState(Date.now());
+
+  useEffect(() => {
+    if (div.current && !chart.current) {
+      chart.current = echarts.init(div.current, null, {
+        renderer: "svg",
+      });
+      setRefresher(Date.now());
+    }
+  }, [chart, div]);
 
   const onCurrencyChange = async (e: ChangeEvent<HTMLSelectElement>) => {
     const value = e.currentTarget.value;
@@ -25,6 +47,51 @@ export function WalletCard() {
     }
   };
 
+  if (chart.current) {
+    const data = {
+      daily: ["MON", "TUE", "WED", "THU", "WED", "SAT", "SUN"],
+      weekly: ["1", "2", "3", "4", "5", "6"],
+      monthly: ["JAN", "FEB", "MAR", "APR", "MAY", "JUN"],
+    }[tab];
+
+    const option = {
+      color: ["#3EE089"],
+      xAxis: {
+        type: "category",
+        data: data,
+        show: true,
+        splitLine: {
+          show: true,
+          lineStyle: {
+            width: 0.5,
+            type: "dashed",
+          },
+        },
+      },
+      yAxis: {
+        type: "value",
+        show: false,
+      },
+      series: [
+        {
+          data: [220, 932, 401, 934, 1290, 1330, 1450].slice(0, data.length),
+          type: "line",
+          smooth: true,
+          lineStyle: {
+            normal: {
+              color: "#3EE089",
+            },
+          },
+        },
+      ],
+      tooltip: {
+        type: "item",
+      },
+    };
+
+    chart.current.setOption(option);
+  }
+
   return (
     <div className="wallet-card">
       <header>
@@ -46,8 +113,9 @@ export function WalletCard() {
         </section>
 
         <section>
-          <WalletChart></WalletChart>
-          <WalletLines></WalletLines>
+          {/* <WalletChart></WalletChart> */}
+          {/* <WalletLines></WalletLines> */}
+          <div className="lines" ref={div} style={{ height: 200 }}></div>
         </section>
       </main>
 
diff --git a/src/routes/dashboard/wallet.css b/src/routes/dashboard/wallet.css
index 4de4d65..3503b4d 100644
--- a/src/routes/dashboard/wallet.css
+++ b/src/routes/dashboard/wallet.css
@@ -4,12 +4,19 @@
   flex-wrap: wrap;
 
   .card {
+    flex: 1;
     filter: grayscale(30);
     transition: filter 0.5s;
 
     &:hover {
       filter: none;
     }
+
+    > ul li {
+      border-bottom: 1px solid #96969633;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+    }
   }
 
   .buttons {
@@ -65,10 +72,6 @@
     }
   }
 
-  .card {
-    flex: 1;
-  }
-
   .require-assistance {
     max-height: 145px;
     margin-top: 8px;
@@ -105,9 +108,6 @@
     li {
       display: flex;
       gap: 48px;
-      border-bottom: 1px solid #96969633;
-      margin-bottom: 16px;
-      padding-bottom: 16px;
 
       div {
         display: flex;