diff --git a/components/stats/MangoStats.tsx b/components/stats/MangoStats.tsx
index 9553f8e7..1586ddec 100644
--- a/components/stats/MangoStats.tsx
+++ b/components/stats/MangoStats.tsx
@@ -1,31 +1,15 @@
-import SheenLoader from '@components/shared/SheenLoader'
-import mangoStore, { TokenStatsItem } from '@store/mangoStore'
-import useMangoGroup from 'hooks/useMangoGroup'
-import { useTranslation } from 'next-i18next'
-import dynamic from 'next/dynamic'
-import { useMemo } from 'react'
-import dayjs from 'dayjs'
-import { numberCompacter } from 'utils/numbers'
+import mangoStore from '@store/mangoStore'
+import TotalDepositBorrowCharts from './TotalDepositBorrowCharts'
+// import { useTranslation } from 'next-i18next'
 // import { PerpMarket } from '@blockworks-foundation/mango-v4'
-const DetailedAreaChart = dynamic(
-  () => import('@components/shared/DetailedAreaChart'),
-  { ssr: false }
-)
-
-interface TotalValueItem {
-  date: string
-  borrowValue: number
-  depositValue: number
-}
 
 const MangoStats = () => {
-  const { t } = useTranslation(['common', 'token', 'trade'])
+  // const { t } = useTranslation(['common', 'token', 'trade'])
   const tokenStats = mangoStore((s) => s.tokenStats.data)
   const loadingStats = mangoStore((s) => s.tokenStats.loading)
   // const perpStats = mangoStore((s) => s.perpStats.data)
   // const loadingPerpStats = mangoStore((s) => s.perpStats.loading)
   // const perpMarkets = mangoStore((s) => s.perpMarkets)
-  const { group } = useMangoGroup()
 
   // const totalFeeValues = useMemo(() => {
   //   if (!perpStats.length) return []
@@ -72,111 +56,12 @@ const MangoStats = () => {
   //   }, 0)
   // }, [perpMarkets])
 
-  const totalDepositBorrowValues = useMemo(() => {
-    if (!tokenStats) return []
-    const values: TotalValueItem[] = tokenStats.reduce(
-      (a: TotalValueItem[], c: TokenStatsItem) => {
-        const hasDate = a.find((d: TotalValueItem) => d.date === c.date_hour)
-        if (!hasDate) {
-          a.push({
-            date: c.date_hour,
-            depositValue: Math.floor(c.total_deposits * c.price),
-            borrowValue: Math.floor(c.total_borrows * c.price),
-          })
-        } else {
-          hasDate.depositValue =
-            hasDate.depositValue + Math.floor(c.total_deposits * c.price)
-          hasDate.borrowValue =
-            hasDate.borrowValue + Math.floor(c.total_borrows * c.price)
-        }
-        return a
-      },
-      []
-    )
-    return values.reverse()
-  }, [tokenStats])
-
-  const banks = useMemo(() => {
-    if (group) {
-      const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
-        key,
-        value,
-      }))
-      return rawBanks
-    }
-    return []
-  }, [group])
-
-  const [currentTotalDepositValue, currentTotalBorrowValue] = useMemo(() => {
-    if (banks.length) {
-      return [
-        banks.reduce(
-          (a, c) => a + c.value[0].uiPrice * c.value[0].uiDeposits(),
-          0
-        ),
-        banks.reduce(
-          (a, c) => a + c.value[0].uiPrice * c.value[0].uiBorrows(),
-          0
-        ),
-      ]
-    }
-    return [0, 0]
-  }, [banks])
-
   return (
     <div className="grid grid-cols-2">
-      {loadingStats ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
-          <SheenLoader className="flex flex-1">
-            <div className="h-96 w-full rounded-lg bg-th-bkg-2" />
-          </SheenLoader>
-        </div>
-      ) : totalDepositBorrowValues.length ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
-          <DetailedAreaChart
-            data={totalDepositBorrowValues.concat([
-              {
-                date: dayjs().toISOString(),
-                depositValue: Math.floor(currentTotalDepositValue),
-                borrowValue: Math.floor(currentTotalBorrowValue),
-              },
-            ])}
-            daysToShow={'999'}
-            heightClass="h-64"
-            prefix="$"
-            tickFormat={(x) => `$${numberCompacter.format(x)}`}
-            title={t('total-deposit-value')}
-            xKey="date"
-            yKey={'depositValue'}
-          />
-        </div>
-      ) : null}
-      {loadingStats ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
-          <SheenLoader className="flex flex-1">
-            <div className="h-96 w-full rounded-lg bg-th-bkg-2" />
-          </SheenLoader>
-        </div>
-      ) : totalDepositBorrowValues.length ? (
-        <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
-          <DetailedAreaChart
-            data={totalDepositBorrowValues.concat([
-              {
-                date: dayjs().toISOString(),
-                borrowValue: Math.floor(currentTotalBorrowValue),
-                depositValue: Math.floor(currentTotalDepositValue),
-              },
-            ])}
-            daysToShow={'999'}
-            heightClass="h-64"
-            prefix="$"
-            tickFormat={(x) => `$${numberCompacter.format(x)}`}
-            title={t('total-borrow-value')}
-            xKey="date"
-            yKey={'borrowValue'}
-          />
-        </div>
-      ) : null}
+      <TotalDepositBorrowCharts
+        tokenStats={tokenStats}
+        loadingStats={loadingStats}
+      />
       {/* uncomment below when perps launch */}
 
       {/* {loadingPerpStats ? (
diff --git a/components/stats/TotalDepositBorrowCharts.tsx b/components/stats/TotalDepositBorrowCharts.tsx
new file mode 100644
index 00000000..d7487954
--- /dev/null
+++ b/components/stats/TotalDepositBorrowCharts.tsx
@@ -0,0 +1,170 @@
+import SheenLoader from '@components/shared/SheenLoader'
+import { TokenStatsItem } from '@store/mangoStore'
+import useMangoGroup from 'hooks/useMangoGroup'
+import { useTranslation } from 'next-i18next'
+import dynamic from 'next/dynamic'
+import { useMemo, useState } from 'react'
+import dayjs from 'dayjs'
+import { numberCompacter } from 'utils/numbers'
+const DetailedAreaChart = dynamic(
+  () => import('@components/shared/DetailedAreaChart'),
+  { ssr: false }
+)
+
+interface TotalValueItem {
+  date: string
+  borrowValue: number
+  depositValue: number
+}
+
+const TotalDepositBorrowCharts = ({
+  tokenStats,
+  loadingStats,
+}: {
+  tokenStats: TokenStatsItem[] | null
+  loadingStats: boolean
+}) => {
+  const { t } = useTranslation(['common', 'token', 'trade'])
+  const [borrowDaysToShow, setBorrowDaysToShow] = useState('30')
+  const [depositDaysToShow, setDepositDaysToShow] = useState('30')
+  const { group } = useMangoGroup()
+
+  const totalDepositBorrowValues = useMemo(() => {
+    if (!tokenStats) return []
+    const values: TotalValueItem[] = tokenStats.reduce(
+      (a: TotalValueItem[], c: TokenStatsItem) => {
+        const hasDate = a.find((d: TotalValueItem) => d.date === c.date_hour)
+        if (!hasDate) {
+          a.push({
+            date: c.date_hour,
+            depositValue: Math.floor(c.total_deposits * c.price),
+            borrowValue: Math.floor(c.total_borrows * c.price),
+          })
+        } else {
+          hasDate.depositValue =
+            hasDate.depositValue + Math.floor(c.total_deposits * c.price)
+          hasDate.borrowValue =
+            hasDate.borrowValue + Math.floor(c.total_borrows * c.price)
+        }
+        return a
+      },
+      []
+    )
+    return values.reverse()
+  }, [tokenStats])
+
+  const filteredBorrowValues = useMemo(() => {
+    if (!totalDepositBorrowValues) return []
+    if (borrowDaysToShow !== '30') {
+      const seconds = Number(borrowDaysToShow) * 86400
+      const data = totalDepositBorrowValues.filter((d) => {
+        const dataTime = new Date(d.date).getTime() / 1000
+        const now = new Date().getTime() / 1000
+        const limit = now - seconds
+        return dataTime >= limit
+      })
+      return data
+    }
+    return totalDepositBorrowValues
+  }, [totalDepositBorrowValues, borrowDaysToShow])
+
+  const filteredDepositValues = useMemo(() => {
+    if (!totalDepositBorrowValues) return []
+    if (depositDaysToShow !== '30') {
+      const seconds = Number(depositDaysToShow) * 86400
+      const data = totalDepositBorrowValues.filter((d) => {
+        const dataTime = new Date(d.date).getTime() / 1000
+        const now = new Date().getTime() / 1000
+        const limit = now - seconds
+        return dataTime >= limit
+      })
+      return data
+    }
+    return totalDepositBorrowValues
+  }, [totalDepositBorrowValues, depositDaysToShow])
+
+  const banks = useMemo(() => {
+    if (group) {
+      const rawBanks = Array.from(group?.banksMapByName, ([key, value]) => ({
+        key,
+        value,
+      }))
+      return rawBanks
+    }
+    return []
+  }, [group])
+
+  const [currentTotalDepositValue, currentTotalBorrowValue] = useMemo(() => {
+    if (banks.length) {
+      return [
+        banks.reduce(
+          (a, c) => a + c.value[0].uiPrice * c.value[0].uiDeposits(),
+          0
+        ),
+        banks.reduce(
+          (a, c) => a + c.value[0].uiPrice * c.value[0].uiBorrows(),
+          0
+        ),
+      ]
+    }
+    return [0, 0]
+  }, [banks])
+
+  return loadingStats ? (
+    <>
+      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
+        <SheenLoader className="flex flex-1">
+          <div className="h-96 w-full rounded-lg bg-th-bkg-2" />
+        </SheenLoader>
+      </div>
+      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
+        <SheenLoader className="flex flex-1">
+          <div className="h-96 w-full rounded-lg bg-th-bkg-2" />
+        </SheenLoader>
+      </div>
+    </>
+  ) : totalDepositBorrowValues.length ? (
+    <>
+      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1">
+        <DetailedAreaChart
+          data={filteredDepositValues.concat([
+            {
+              date: dayjs().toISOString(),
+              depositValue: Math.floor(currentTotalDepositValue),
+              borrowValue: Math.floor(currentTotalBorrowValue),
+            },
+          ])}
+          daysToShow={depositDaysToShow}
+          setDaysToShow={setDepositDaysToShow}
+          heightClass="h-64"
+          prefix="$"
+          tickFormat={(x) => `$${numberCompacter.format(x)}`}
+          title={t('total-deposit-value')}
+          xKey="date"
+          yKey={'depositValue'}
+        />
+      </div>
+      <div className="col-span-2 border-b border-th-bkg-3 py-4 px-6 md:col-span-1 md:border-l md:pl-6">
+        <DetailedAreaChart
+          data={filteredBorrowValues.concat([
+            {
+              date: dayjs().toISOString(),
+              borrowValue: Math.floor(currentTotalBorrowValue),
+              depositValue: Math.floor(currentTotalDepositValue),
+            },
+          ])}
+          daysToShow={borrowDaysToShow}
+          setDaysToShow={setBorrowDaysToShow}
+          heightClass="h-64"
+          prefix="$"
+          tickFormat={(x) => `$${numberCompacter.format(x)}`}
+          title={t('total-borrow-value')}
+          xKey="date"
+          yKey={'borrowValue'}
+        />
+      </div>
+    </>
+  ) : null
+}
+
+export default TotalDepositBorrowCharts