diff --git a/components/account/AccountActions.tsx b/components/account/AccountActions.tsx
index f9eabd0c..f3c95772 100644
--- a/components/account/AccountActions.tsx
+++ b/components/account/AccountActions.tsx
@@ -52,7 +52,7 @@ const AccountActions = () => {
   return (
     <>
       {isUnownedAccount ? null : (
-        <div className="grid grid-cols-4">
+        <div className="grid grid-cols-4 border-t border-th-bkg-3">
           <button
             className={`${ACTION_BUTTON_CLASSES} border-r border-th-bkg-3`}
             onClick={() => handleActionModal('deposit')}
diff --git a/components/account/AccountHeroStats.tsx b/components/account/AccountHeroStats.tsx
index a1e9090b..975fddb9 100644
--- a/components/account/AccountHeroStats.tsx
+++ b/components/account/AccountHeroStats.tsx
@@ -29,6 +29,13 @@ const AccountHeroStats = ({ accountValue }: { accountValue: number }) => {
   const router = useRouter()
   const [showPnlHistory, setShowPnlHistory] = useState(false)
 
+  const handleGoToStats = () => {
+    const query = { ...router.query, ['view']: 'account-stats' }
+    router.push({ pathname: router.pathname, query }, undefined, {
+      shallow: true,
+    })
+  }
+
   const maintHealth = useMemo(() => {
     return group && mangoAccount
       ? mangoAccount.getHealthRatioUi(group, HealthType.maint)
@@ -244,9 +251,7 @@ const AccountHeroStats = ({ accountValue }: { accountValue: number }) => {
       </div>
       <button
         className="default-transition flex h-10 w-full items-center justify-between px-4 focus:outline-none disabled:cursor-not-allowed md:px-6 md:hover:bg-th-bkg-2"
-        onClick={() =>
-          router.push('/?view=account-stats', undefined, { shallow: true })
-        }
+        onClick={() => handleGoToStats()}
         disabled={!mangoAccountAddress}
       >
         <p>{t('account:more-account-stats')}</p>
diff --git a/components/account/AccountOverview.tsx b/components/account/AccountOverview.tsx
index fdea1cb7..d40e5fe3 100644
--- a/components/account/AccountOverview.tsx
+++ b/components/account/AccountOverview.tsx
@@ -92,9 +92,7 @@ const AccountOverview = () => {
                 <ConnectEmptyState text={t('governance:connect-wallet')} />
               </div>
             )}
-            <div className="border-t border-th-bkg-3">
-              <AccountActions />
-            </div>
+            <AccountActions />
           </div>
         </div>
         <div className="col-span-12 md:col-span-4">
diff --git a/components/account/AccountPage.tsx b/components/account/AccountPage.tsx
index 729096ad..1be76b54 100644
--- a/components/account/AccountPage.tsx
+++ b/components/account/AccountPage.tsx
@@ -19,7 +19,9 @@ export type ViewToShow =
 
 export const handleViewChange = (view: ViewToShow, router: NextRouter) => {
   const query = { ...router.query, ['view']: view }
-  router.push({ pathname: router.pathname, query })
+  router.push({ pathname: router.pathname, query }, undefined, {
+    shallow: true,
+  })
 }
 
 const AccountPage = () => {
diff --git a/components/account/AccountStats.tsx b/components/account/AccountStats.tsx
index 701c2ad6..f5d3b000 100644
--- a/components/account/AccountStats.tsx
+++ b/components/account/AccountStats.tsx
@@ -6,14 +6,55 @@ import { useTranslation } from 'react-i18next'
 import { formatYAxis } from 'utils/formatting'
 import FundingChart from './FundingChart'
 import VolumeChart from './VolumeChart'
+import { useQuery } from '@tanstack/react-query'
+import useMangoAccount from 'hooks/useMangoAccount'
+import { fetchFundingTotals, fetchVolumeTotals } from 'utils/account'
+import Tooltip from '@components/shared/Tooltip'
+import SheenLoader from '@components/shared/SheenLoader'
+import FormatNumericValue from '@components/shared/FormatNumericValue'
 
 const AccountStats = ({ hideView }: { hideView: () => void }) => {
   const { t } = useTranslation(['common', 'account'])
+  const { mangoAccountAddress } = useMangoAccount()
   const { performanceData, loadingPerformanceData } =
     useAccountPerformanceData()
   const [pnlDaysToShow, setPnlDaysToShow] = useState('1')
   const [interestDaysToShow, setInterestDaysToShow] = useState('1')
 
+  const { data: fundingData, isLoading: loadingFunding } = useQuery(
+    ['funding', mangoAccountAddress],
+    () => fetchFundingTotals(mangoAccountAddress),
+    {
+      cacheTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: false,
+      enabled: !!mangoAccountAddress,
+    },
+  )
+
+  const { data: volumeTotalData, isLoading: loadingVolumeTotalData } = useQuery(
+    ['total-volume', mangoAccountAddress],
+    () => fetchVolumeTotals(mangoAccountAddress),
+    {
+      cacheTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: false,
+      enabled: !!mangoAccountAddress,
+    },
+  )
+
+  const fundingTotalValue = useMemo(() => {
+    if (fundingData?.length && mangoAccountAddress) {
+      return fundingData.reduce(
+        (a, c) => a + c.long_funding + c.short_funding,
+        0,
+      )
+    }
+    return 0.0
+  }, [fundingData, mangoAccountAddress])
+
   const chartData = useMemo(() => {
     if (!performanceData || !performanceData.length) return []
     const chartData = []
@@ -51,6 +92,7 @@ const AccountStats = ({ hideView }: { hideView: () => void }) => {
             title={t('pnl')}
             xKey="time"
             yKey="pnl"
+            small
           />
         </div>
         <div className="col-span-2 border-b border-th-bkg-3 px-6 py-4 md:col-span-1 md:pl-6">
@@ -66,13 +108,57 @@ const AccountStats = ({ hideView }: { hideView: () => void }) => {
             title={t('cumulative-interest-value')}
             xKey="time"
             yKey="interest_value"
+            small
           />
         </div>
-        <div className="col-span-2 h-[400px] border-b border-th-bkg-3 md:col-span-1 md:border-r">
-          <FundingChart />
+        <div className="col-span-2 border-b border-th-bkg-3 md:col-span-1 md:border-r">
+          <div className="border-b border-th-bkg-3 px-4 pb-4 pt-3 md:px-6">
+            <Tooltip
+              content={t('account:tooltip-total-funding')}
+              maxWidth="20rem"
+              placement="top-start"
+              delay={100}
+            >
+              <p className="tooltip-underline text-base leading-tight">
+                {t('account:total-funding-earned')}
+              </p>
+            </Tooltip>
+            {loadingFunding && mangoAccountAddress ? (
+              <SheenLoader className="mt-2">
+                <div className="h-7 w-16 bg-th-bkg-2" />
+              </SheenLoader>
+            ) : (
+              <p className="mt-0.5 text-2xl font-bold text-th-fgd-1">
+                <FormatNumericValue
+                  value={fundingTotalValue}
+                  decimals={2}
+                  isUsd={true}
+                />
+              </p>
+            )}
+          </div>
+          <div className="px-6 py-4">
+            <FundingChart />
+          </div>
         </div>
-        <div className="col-span-2 h-[400px] border-b border-th-bkg-3 md:col-span-1">
-          <VolumeChart />
+        <div className="col-span-2 border-b border-th-bkg-3 md:col-span-1">
+          <div className="border-b border-th-bkg-3 px-4 pb-4 pt-3 md:px-6">
+            <p className="tooltip-underline text-base leading-tight">
+              {t('account:lifetime-volume')}
+            </p>
+            {loadingVolumeTotalData && mangoAccountAddress ? (
+              <SheenLoader className="mt-2">
+                <div className="h-7 w-16 bg-th-bkg-2" />
+              </SheenLoader>
+            ) : (
+              <p className="mt-0.5 text-2xl font-bold text-th-fgd-1">
+                <FormatNumericValue value={volumeTotalData || 0} isUsd />
+              </p>
+            )}
+          </div>
+          <div className="px-6 py-4">
+            <VolumeChart />
+          </div>
         </div>
       </div>
     </>
diff --git a/components/account/AccountValueChart.tsx b/components/account/AccountValueChart.tsx
deleted file mode 100644
index 7ea76e45..00000000
--- a/components/account/AccountValueChart.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import SimpleAreaChart from '@components/shared/SimpleAreaChart'
-import { COLORS } from '../../styles/colors'
-import { IconButton } from '../shared/Button'
-import { ArrowsPointingOutIcon } from '@heroicons/react/20/solid'
-import { Transition } from '@headlessui/react'
-import SheenLoader from '../shared/SheenLoader'
-import useMangoAccount from 'hooks/useMangoAccount'
-import { PerformanceDataItem } from 'types'
-import { useCallback, useMemo, useState } from 'react'
-import { useViewport } from 'hooks/useViewport'
-import { handleViewChange } from './AccountPage'
-import useAccountPerformanceData from 'hooks/useAccountPerformanceData'
-import useThemeWrapper from 'hooks/useThemeWrapper'
-import { useRouter } from 'next/router'
-
-const AccountValueChart = ({
-  accountValue,
-  latestAccountData,
-  rollingDailyData,
-}: {
-  accountValue: number
-  latestAccountData: PerformanceDataItem[]
-  rollingDailyData: PerformanceDataItem[]
-}) => {
-  const { theme } = useThemeWrapper()
-  const router = useRouter()
-  const { mangoAccountAddress } = useMangoAccount()
-  const [showExpandChart, setShowExpandChart] = useState<boolean>(false)
-  const { isTablet } = useViewport()
-  const { performanceLoading: loading } = useAccountPerformanceData()
-
-  const accountValueChange = useMemo(() => {
-    if (!accountValue || !rollingDailyData.length) return 0
-    const accountValueChange = accountValue - rollingDailyData[0].account_equity
-    return accountValueChange
-  }, [accountValue, rollingDailyData])
-
-  const onHoverMenu = (open: boolean, action: string) => {
-    if (
-      (!open && action === 'onMouseEnter') ||
-      (open && action === 'onMouseLeave')
-    ) {
-      setShowExpandChart(!open)
-    }
-  }
-
-  const handleShowAccountValueChart = useCallback(() => {
-    handleViewChange('account-value', router)
-    setShowExpandChart(false)
-  }, [router])
-
-  return !loading ? (
-    rollingDailyData.length ? (
-      <div
-        className="relative mt-4 flex h-40 items-end md:mt-0 md:h-28 md:w-52 lg:w-56"
-        onMouseEnter={() => onHoverMenu(showExpandChart, 'onMouseEnter')}
-        onMouseLeave={() => onHoverMenu(showExpandChart, 'onMouseLeave')}
-      >
-        <SimpleAreaChart
-          color={
-            accountValueChange >= 0 ? COLORS.UP[theme] : COLORS.DOWN[theme]
-          }
-          data={rollingDailyData.concat(latestAccountData)}
-          name="accountValue"
-          xKey="time"
-          yKey="account_equity"
-        />
-        <Transition
-          appear={true}
-          className="absolute bottom-2 right-2"
-          show={showExpandChart || isTablet}
-          enter="transition ease-in duration-300"
-          enterFrom="opacity-0 scale-75"
-          enterTo="opacity-100 scale-100"
-          leave="transition ease-out duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <IconButton
-            className="text-th-fgd-3"
-            hideBg
-            onClick={() => handleShowAccountValueChart()}
-          >
-            <ArrowsPointingOutIcon className="h-5 w-5" />
-          </IconButton>
-        </Transition>
-      </div>
-    ) : null
-  ) : mangoAccountAddress ? (
-    <SheenLoader className="mt-4 flex flex-1 md:mt-0">
-      <div className="h-40 w-full rounded-md bg-th-bkg-2 md:h-20 md:w-52 lg:w-60" />
-    </SheenLoader>
-  ) : null
-}
-
-export default AccountValueChart
diff --git a/components/account/FundingChart.tsx b/components/account/FundingChart.tsx
index 2d5c769a..1e6f001a 100644
--- a/components/account/FundingChart.tsx
+++ b/components/account/FundingChart.tsx
@@ -31,6 +31,7 @@ import { FadeInFadeOut } from '@components/shared/Transitions'
 import ContentBox from '@components/shared/ContentBox'
 import SheenLoader from '@components/shared/SheenLoader'
 import useThemeWrapper from 'hooks/useThemeWrapper'
+import FormatNumericValue from '@components/shared/FormatNumericValue'
 
 type TempDataType = {
   [time: string]: {
@@ -79,7 +80,7 @@ const FundingChart = () => {
     isFetching: fetchingFunding,
     refetch,
   } = useQuery(
-    ['hourly-funding'],
+    ['hourly-funding', mangoAccountAddress],
     () => fetchHourlyFunding(mangoAccountAddress),
     {
       cacheTime: 1000 * 60 * 10,
@@ -167,12 +168,6 @@ const FundingChart = () => {
   const scaleDataTime = (data: HourlyFundingChartData[]) => {
     const scaledData = data.reduce((a: HourlyFundingChartData[], c) => {
       const found = a.find((item) => {
-        // const threshold = daysToShow === '7' ? 14400000 : 86400000
-        // const currentDataTime = new Date(c.time).getTime()
-        // const date = new Date(item.time)
-        // const maxTime = date.getTime() + threshold
-        // return currentDataTime <= maxTime
-
         const currentDataDate = new Date(c.time)
         const itemDate = new Date(item.time)
         return (
@@ -216,123 +211,141 @@ const FundingChart = () => {
     return filtered
   }, [chartData, daysToShow])
 
+  const totalForTimePeriod = useMemo(() => {
+    if (!filteredData.length) return 0
+    return filteredData.reduce((a, c) => a + c.total, 0)
+  }, [filteredData])
+
   return (
     <FadeInFadeOut show={true}>
-      <ContentBox className="px-6 pt-4" hideBorder hidePadding>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-4 md:space-x-6">
-            <h2 className="text-lg">{t('funding')}</h2>
-          </div>
-          <ChartRangeButtons
-            activeValue={daysToShow}
-            names={['24H', '7D', '30D']}
-            values={['1', '7', '30']}
-            onChange={(v) => setDaysToShow(v)}
-          />
-        </div>
+      <ContentBox hideBorder hidePadding>
         {loadingFunding || fetchingFunding ? (
-          <SheenLoader className="mt-4 flex flex-1">
-            <div className={`h-[318px] w-full rounded-lg bg-th-bkg-2`} />
+          <SheenLoader className="flex flex-1">
+            <div className={`h-[350px] w-full rounded-lg bg-th-bkg-2`} />
           </SheenLoader>
-        ) : filteredData.find((d) => Math.abs(d.total) > 0) ? (
-          <div className="-mx-6 mt-6 h-80">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={filteredData}>
-                <Tooltip
-                  cursor={{
-                    fill: 'var(--bkg-2)',
-                    opacity: 0.5,
-                  }}
-                  content={<CustomTooltip />}
-                />
-                <defs>
-                  <linearGradient
-                    id="greenGradientBar"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop
-                      offset="0%"
-                      stopColor={COLORS.UP[theme]}
-                      stopOpacity={1}
-                    />
-                    <stop
-                      offset="100%"
-                      stopColor={COLORS.UP[theme]}
-                      stopOpacity={0.7}
-                    />
-                  </linearGradient>
-                  <linearGradient
-                    id="redGradientBar"
-                    x1="0"
-                    y1="1"
-                    x2="0"
-                    y2="0"
-                  >
-                    <stop
-                      offset="0%"
-                      stopColor={COLORS.DOWN[theme]}
-                      stopOpacity={1}
-                    />
-                    <stop
-                      offset="100%"
-                      stopColor={COLORS.DOWN[theme]}
-                      stopOpacity={0.7}
-                    />
-                  </linearGradient>
-                </defs>
-                <Bar dataKey="total">
-                  {filteredData.map((entry, index) => {
-                    return (
-                      <Cell
-                        key={`cell-${index}`}
-                        fill={
-                          entry['total'] > 0
-                            ? 'url(#greenGradientBar)'
-                            : 'url(#redGradientBar)'
-                        }
-                      />
-                    )
-                  })}
-                </Bar>
-                <XAxis
-                  dataKey="time"
-                  axisLine={false}
-                  dy={10}
-                  minTickGap={20}
-                  padding={{ left: 20, right: 20 }}
-                  tick={{
-                    fill: 'var(--fgd-4)',
-                    fontSize: 10,
-                  }}
-                  tickLine={false}
-                  tickFormatter={(v) => formatDateAxis(v, parseInt(daysToShow))}
-                />
-                <YAxis
-                  dataKey="total"
-                  interval="preserveStartEnd"
-                  axisLine={false}
-                  dx={-10}
-                  padding={{ top: 20, bottom: 20 }}
-                  tick={{
-                    fill: 'var(--fgd-4)',
-                    fontSize: 10,
-                  }}
-                  tickLine={false}
-                  tickFormatter={(v) => formatYAxis(v)}
-                  type="number"
-                />
-                <ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
         ) : (
-          <div className="mt-4 flex h-80 flex-col items-center justify-center rounded-lg border border-th-bkg-3 p-8">
-            <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-            <p>{t('account:no-data')}</p>
-          </div>
+          <>
+            <div className="flex items-start justify-between">
+              <div>
+                <h2 className="mb-0.5 text-base font-normal text-th-fgd-3">
+                  {t('funding')}
+                </h2>
+                {totalForTimePeriod ? (
+                  <span className="font-display text-2xl text-th-fgd-1">
+                    <FormatNumericValue value={totalForTimePeriod} isUsd />
+                  </span>
+                ) : null}
+              </div>
+              <ChartRangeButtons
+                activeValue={daysToShow}
+                names={['24H', '7D', '30D']}
+                values={['1', '7', '30']}
+                onChange={(v) => setDaysToShow(v)}
+              />
+            </div>
+            {filteredData.find((d) => Math.abs(d.total) > 0) ? (
+              <div className="-mx-6 mt-6 h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={filteredData}>
+                    <Tooltip
+                      cursor={{
+                        fill: 'var(--bkg-2)',
+                        opacity: 0.5,
+                      }}
+                      content={<CustomTooltip />}
+                    />
+                    <defs>
+                      <linearGradient
+                        id="greenGradientBar"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor={COLORS.UP[theme]}
+                          stopOpacity={1}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor={COLORS.UP[theme]}
+                          stopOpacity={0.7}
+                        />
+                      </linearGradient>
+                      <linearGradient
+                        id="redGradientBar"
+                        x1="0"
+                        y1="1"
+                        x2="0"
+                        y2="0"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor={COLORS.DOWN[theme]}
+                          stopOpacity={1}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor={COLORS.DOWN[theme]}
+                          stopOpacity={0.7}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <Bar dataKey="total">
+                      {filteredData.map((entry, index) => {
+                        return (
+                          <Cell
+                            key={`cell-${index}`}
+                            fill={
+                              entry['total'] > 0
+                                ? 'url(#greenGradientBar)'
+                                : 'url(#redGradientBar)'
+                            }
+                          />
+                        )
+                      })}
+                    </Bar>
+                    <XAxis
+                      dataKey="time"
+                      axisLine={false}
+                      dy={10}
+                      minTickGap={20}
+                      padding={{ left: 20, right: 20 }}
+                      tick={{
+                        fill: 'var(--fgd-4)',
+                        fontSize: 10,
+                      }}
+                      tickLine={false}
+                      tickFormatter={(v) =>
+                        formatDateAxis(v, parseInt(daysToShow))
+                      }
+                    />
+                    <YAxis
+                      dataKey="total"
+                      interval="preserveStartEnd"
+                      axisLine={false}
+                      dx={-10}
+                      padding={{ top: 20, bottom: 20 }}
+                      tick={{
+                        fill: 'var(--fgd-4)',
+                        fontSize: 10,
+                      }}
+                      tickLine={false}
+                      tickFormatter={(v) => formatYAxis(v)}
+                      type="number"
+                    />
+                    <ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            ) : (
+              <div className="mt-4 flex h-64 flex-col items-center justify-center rounded-lg border border-th-bkg-3 p-8">
+                <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+                <p>{t('account:no-data')}</p>
+              </div>
+            )}
+          </>
         )}
       </ContentBox>
     </FadeInFadeOut>
diff --git a/components/account/VolumeChart.tsx b/components/account/VolumeChart.tsx
index f51ce654..d73ef134 100644
--- a/components/account/VolumeChart.tsx
+++ b/components/account/VolumeChart.tsx
@@ -26,6 +26,7 @@ import useAccountHourlyVolumeStats from 'hooks/useAccountHourlyVolumeStats'
 import useMangoAccount from 'hooks/useMangoAccount'
 import { DAILY_MILLISECONDS } from 'utils/constants'
 import useThemeWrapper from 'hooks/useThemeWrapper'
+import FormatNumericValue from '@components/shared/FormatNumericValue'
 
 const VolumeChart = () => {
   const { t } = useTranslation(['account', 'common', 'stats'])
@@ -141,101 +142,119 @@ const VolumeChart = () => {
     return filtered
   }, [chartData, daysToShow])
 
+  const totalForTimePeriod = useMemo(() => {
+    if (!filteredData.length) return 0
+    return filteredData.reduce((a, c) => a + c.total_volume_usd, 0)
+  }, [filteredData])
+
   return (
     <FadeInFadeOut show={true}>
-      <ContentBox className="px-6 pt-4" hideBorder hidePadding>
-        <div className="flex items-center justify-between">
-          <div className="flex items-center space-x-4 md:space-x-6">
-            <h2 className="text-lg">{t('stats:volume')}</h2>
-          </div>
-          <ChartRangeButtons
-            activeValue={daysToShow}
-            names={['24H', '7D', '30D']}
-            values={['1', '7', '30']}
-            onChange={(v) => setDaysToShow(v)}
-          />
-        </div>
+      <ContentBox hideBorder hidePadding>
         {loading && mangoAccountAddress ? (
-          <SheenLoader className="mt-4 flex flex-1">
-            <div className={`h-[318px] w-full rounded-lg bg-th-bkg-2`} />
+          <SheenLoader className="flex flex-1">
+            <div className={`h-[350px] w-full rounded-lg bg-th-bkg-2`} />
           </SheenLoader>
-        ) : filteredData.find((d) => d.total_volume_usd > 0) ? (
-          <div className="-mx-6 mt-6 h-80">
-            <ResponsiveContainer width="100%" height="100%">
-              <BarChart data={filteredData}>
-                <Tooltip
-                  cursor={{
-                    fill: 'var(--bkg-2)',
-                    opacity: 0.5,
-                  }}
-                  content={<CustomTooltip />}
-                />
-                <defs>
-                  <linearGradient
-                    id="greenGradientBar"
-                    x1="0"
-                    y1="0"
-                    x2="0"
-                    y2="1"
-                  >
-                    <stop
-                      offset="0%"
-                      stopColor={COLORS.UP[theme]}
-                      stopOpacity={1}
-                    />
-                    <stop
-                      offset="100%"
-                      stopColor={COLORS.UP[theme]}
-                      stopOpacity={0.7}
-                    />
-                  </linearGradient>
-                </defs>
-                <Bar dataKey="total_volume_usd">
-                  {filteredData.map((entry, index) => {
-                    return (
-                      <Cell
-                        key={`cell-${index}`}
-                        fill="url(#greenGradientBar)"
-                      />
-                    )
-                  })}
-                </Bar>
-                <XAxis
-                  dataKey="time"
-                  axisLine={false}
-                  dy={10}
-                  minTickGap={20}
-                  padding={{ left: 20, right: 20 }}
-                  tick={{
-                    fill: 'var(--fgd-4)',
-                    fontSize: 10,
-                  }}
-                  tickLine={false}
-                  tickFormatter={(v) => formatDateAxis(v, parseInt(daysToShow))}
-                />
-                <YAxis
-                  dataKey="total_volume_usd"
-                  interval="preserveStartEnd"
-                  axisLine={false}
-                  dx={-10}
-                  padding={{ top: 20, bottom: 20 }}
-                  tick={{
-                    fill: 'var(--fgd-4)',
-                    fontSize: 10,
-                  }}
-                  tickLine={false}
-                  tickFormatter={(v) => formatYAxis(v)}
-                  type="number"
-                />
-                <ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
-              </BarChart>
-            </ResponsiveContainer>
-          </div>
         ) : (
-          <div className="mt-4 flex h-80 flex-col items-center justify-center rounded-lg border border-th-bkg-3 p-8">
-            <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
-            <p>{t('account:no-data')}</p>
-          </div>
+          <>
+            <div className="flex items-start justify-between">
+              <div>
+                <h2 className="mb-0.5 text-base font-normal text-th-fgd-3">
+                  {t('stats:volume')}
+                </h2>
+                {totalForTimePeriod ? (
+                  <span className="font-display text-2xl text-th-fgd-1">
+                    <FormatNumericValue value={totalForTimePeriod} isUsd />
+                  </span>
+                ) : null}
+              </div>
+              <ChartRangeButtons
+                activeValue={daysToShow}
+                names={['24H', '7D', '30D']}
+                values={['1', '7', '30']}
+                onChange={(v) => setDaysToShow(v)}
+              />
+            </div>
+            {filteredData.find((d) => d.total_volume_usd > 0) ? (
+              <div className="-mx-6 mt-6 h-64">
+                <ResponsiveContainer width="100%" height="100%">
+                  <BarChart data={filteredData}>
+                    <Tooltip
+                      cursor={{
+                        fill: 'var(--bkg-2)',
+                        opacity: 0.5,
+                      }}
+                      content={<CustomTooltip />}
+                    />
+                    <defs>
+                      <linearGradient
+                        id="greenGradientBar"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor={COLORS.UP[theme]}
+                          stopOpacity={1}
+                        />
+                        <stop
+                          offset="100%"
+                          stopColor={COLORS.UP[theme]}
+                          stopOpacity={0.7}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <Bar dataKey="total_volume_usd">
+                      {filteredData.map((entry, index) => {
+                        return (
+                          <Cell
+                            key={`cell-${index}`}
+                            fill="url(#greenGradientBar)"
+                          />
+                        )
+                      })}
+                    </Bar>
+                    <XAxis
+                      dataKey="time"
+                      axisLine={false}
+                      dy={10}
+                      minTickGap={20}
+                      padding={{ left: 20, right: 20 }}
+                      tick={{
+                        fill: 'var(--fgd-4)',
+                        fontSize: 10,
+                      }}
+                      tickLine={false}
+                      tickFormatter={(v) =>
+                        formatDateAxis(v, parseInt(daysToShow))
+                      }
+                    />
+                    <YAxis
+                      dataKey="total_volume_usd"
+                      interval="preserveStartEnd"
+                      axisLine={false}
+                      dx={-10}
+                      padding={{ top: 20, bottom: 20 }}
+                      tick={{
+                        fill: 'var(--fgd-4)',
+                        fontSize: 10,
+                      }}
+                      tickLine={false}
+                      tickFormatter={(v) => formatYAxis(v)}
+                      type="number"
+                    />
+                    <ReferenceLine y={0} stroke={COLORS.BKG4[theme]} />
+                  </BarChart>
+                </ResponsiveContainer>
+              </div>
+            ) : (
+              <div className="mt-4 flex h-64 flex-col items-center justify-center rounded-lg border border-th-bkg-3 p-8">
+                <NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
+                <p>{t('account:no-data')}</p>
+              </div>
+            )}
+          </>
         )}
       </ContentBox>
     </FadeInFadeOut>
diff --git a/components/shared/DetailedAreaOrBarChart.tsx b/components/shared/DetailedAreaOrBarChart.tsx
index d9db5266..de2b0af2 100644
--- a/components/shared/DetailedAreaOrBarChart.tsx
+++ b/components/shared/DetailedAreaOrBarChart.tsx
@@ -36,6 +36,8 @@ import useThemeWrapper from 'hooks/useThemeWrapper'
 
 dayjs.extend(relativeTime)
 
+const titleClasses = 'mb-0.5 text-base'
+
 interface DetailedAreaOrBarChartProps {
   chartType?: 'area' | 'bar'
   customTooltip?: ContentType<number, string>
@@ -149,8 +151,6 @@ const DetailedAreaOrBarChart: FunctionComponent<
     return 0
   }
 
-  const titleClasses = `${small ? 'text-sm' : 'mb-0.5 text-base'} text-th-fgd-3`
-
   return (
     <FadeInFadeOut show={true}>
       <ContentBox hideBorder hidePadding>
@@ -203,10 +203,8 @@ const DetailedAreaOrBarChart: FunctionComponent<
                   {mouseData ? (
                     <div>
                       <div
-                        className={`flex ${
-                          small
-                            ? 'h-8 items-center text-2xl'
-                            : 'mb-1 items-end text-4xl'
+                        className={`flex items-end ${
+                          small ? 'h-8 text-2xl' : 'mb-1 text-4xl'
                         } font-display text-th-fgd-1`}
                       >
                         {animationSettings['number-scroll'] ? (
@@ -233,7 +231,7 @@ const DetailedAreaOrBarChart: FunctionComponent<
                           </span>
                         )}
                         {!hideChange ? (
-                          <span className="ml-3">
+                          <span className={`ml-3 ${small ? 'mb-[3px]' : ''}`}>
                             <Change
                               change={calculateChartChange()}
                               decimals={yDecimals}
@@ -258,10 +256,8 @@ const DetailedAreaOrBarChart: FunctionComponent<
                   ) : (
                     <div>
                       <div
-                        className={`flex ${
-                          small
-                            ? 'h-8 items-center text-2xl'
-                            : 'mb-1 items-end text-4xl'
+                        className={`flex items-end ${
+                          small ? 'h-8 text-2xl' : 'mb-1 text-4xl'
                         } font-display text-th-fgd-1`}
                       >
                         {animationSettings['number-scroll'] ? (
@@ -296,7 +292,7 @@ const DetailedAreaOrBarChart: FunctionComponent<
                           </span>
                         )}
                         {!hideChange ? (
-                          <span className="ml-3">
+                          <span className={`ml-3 ${small ? 'mb-[3px]' : ''}`}>
                             <Change
                               change={calculateChartChange()}
                               decimals={yDecimals}