diff --git a/components/shared/DetailedAreaChart.tsx b/components/shared/DetailedAreaChart.tsx
new file mode 100644
index 00000000..7536ae45
--- /dev/null
+++ b/components/shared/DetailedAreaChart.tsx
@@ -0,0 +1,281 @@
+import { FunctionComponent, useState } from 'react'
+import dayjs from 'dayjs'
+import relativeTime from 'dayjs/plugin/relativeTime'
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  Tooltip,
+  ResponsiveContainer,
+} from 'recharts'
+import FlipNumbers from 'react-flip-numbers'
+
+import LineChartIcon from '../icons/LineChartIcon'
+import ContentBox from '../shared/ContentBox'
+import { DownTriangle, UpTriangle } from '../shared/DirectionTriangles'
+import { formatFixedDecimals } from '../../utils/numbers'
+import SheenLoader from '../shared/SheenLoader'
+import { COLORS } from '../../styles/colors'
+import { useTheme } from 'next-themes'
+import { IconButton } from './Button'
+import { ArrowLeftIcon } from '@heroicons/react/solid'
+import { FadeInFadeOut } from './Transitions'
+
+dayjs.extend(relativeTime)
+
+interface DetailedAreaChartProps {
+  data: any[]
+  hideChart?: () => void
+  loading?: boolean
+  title?: string
+  xKey: string
+  yKey: string
+}
+
+const DetailedAreaChart: FunctionComponent<DetailedAreaChartProps> = ({
+  data,
+  hideChart,
+  loading,
+  title,
+  xKey,
+  yKey,
+}) => {
+  const [mouseData, setMouseData] = useState<any>(null)
+  const [daysToShow, setDaysToShow] = useState(1)
+  const { theme } = useTheme()
+
+  const handleMouseMove = (coords: any) => {
+    if (coords.activePayload) {
+      setMouseData(coords.activePayload[0].payload)
+    }
+  }
+
+  const handleMouseLeave = () => {
+    setMouseData(null)
+  }
+
+  const calculateChartChange = () => {
+    if (data.length) {
+      if (mouseData) {
+        const index = data.findIndex((d: any) => d[xKey] === mouseData[xKey])
+        return ((data[index][yKey] - data[0][yKey]) / data[0][yKey]) * 100
+      } else
+        return (
+          ((data[data.length - 1][yKey] - data[0][yKey]) / data[0][yKey]) * 100
+        )
+    }
+    return 0
+  }
+
+  return (
+    <FadeInFadeOut show={true}>
+      <ContentBox hideBorder hidePadding>
+        {loading ? (
+          <SheenLoader>
+            <div className="h-[448px] rounded-lg bg-th-bkg-2" />
+          </SheenLoader>
+        ) : data.length ? (
+          <div className="relative">
+            <div className="flex items-start justify-between">
+              <div className="flex flex-col md:flex-row md:items-start md:space-x-6">
+                <IconButton className="mb-6" onClick={hideChart}>
+                  <ArrowLeftIcon className="h-5 w-5" />
+                </IconButton>
+                <div>
+                  <p className="mb-0.5 text-base text-th-fgd-3">{title}</p>
+                  {mouseData ? (
+                    <div>
+                      <div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
+                        <FlipNumbers
+                          height={40}
+                          width={26}
+                          play
+                          numbers={formatFixedDecimals(mouseData[yKey])}
+                        />
+                        <span
+                          className={`ml-3 flex items-center text-sm ${
+                            calculateChartChange() >= 0
+                              ? 'text-th-green'
+                              : 'text-th-red'
+                          }`}
+                        >
+                          {calculateChartChange() >= 0 ? (
+                            <UpTriangle />
+                          ) : (
+                            <DownTriangle />
+                          )}
+                          <span className="ml-1">
+                            {calculateChartChange().toFixed(2)}%
+                          </span>
+                        </span>
+                      </div>
+                      <p className="text-sm text-th-fgd-4">
+                        {dayjs(mouseData[xKey]).format('DD MMM YY, h:mma')}
+                      </p>
+                    </div>
+                  ) : (
+                    <div>
+                      <div className="mb-1 flex items-end text-4xl font-bold text-th-fgd-1">
+                        <FlipNumbers
+                          height={40}
+                          width={26}
+                          play
+                          numbers={formatFixedDecimals(
+                            data[data.length - 1][yKey]
+                          )}
+                        />
+                        <span
+                          className={`ml-3 mt-0 flex items-center text-sm ${
+                            calculateChartChange() >= 0
+                              ? 'text-th-green'
+                              : 'text-th-red'
+                          }`}
+                        >
+                          {calculateChartChange() >= 0 ? (
+                            <UpTriangle />
+                          ) : (
+                            <DownTriangle />
+                          )}
+                          <span className="ml-1">
+                            {calculateChartChange().toFixed(2)}%
+                          </span>
+                        </span>
+                      </div>
+                      <p className="text-sm text-th-fgd-4">
+                        {dayjs(data[data.length - 1][xKey]).format(
+                          'DD MMM YY, h:mma'
+                        )}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+            <div className="-mt-1 h-96 w-auto">
+              <div className="absolute -top-1 right-0 -mb-2 flex justify-end">
+                <button
+                  className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
+                    daysToShow === 1 && 'text-th-primary'
+                  }`}
+                  onClick={() => setDaysToShow(1)}
+                >
+                  24H
+                </button>
+                <button
+                  className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
+                    daysToShow === 7 && 'text-th-primary'
+                  }`}
+                  onClick={() => setDaysToShow(7)}
+                >
+                  7D
+                </button>
+                <button
+                  className={`rounded-md px-3 py-2 font-bold text-th-fgd-4 focus:outline-none md:hover:text-th-primary ${
+                    daysToShow === 30 && 'text-th-primary'
+                  }`}
+                  onClick={() => setDaysToShow(30)}
+                >
+                  30D
+                </button>
+              </div>
+              <div className="-mx-6 mt-6 h-full">
+                <ResponsiveContainer width="100%" height="100%">
+                  <AreaChart
+                    data={data}
+                    onMouseMove={handleMouseMove}
+                    onMouseLeave={handleMouseLeave}
+                  >
+                    <Tooltip
+                      cursor={{
+                        strokeOpacity: 0.09,
+                      }}
+                      content={<></>}
+                    />
+                    <defs>
+                      <linearGradient
+                        id="gradientArea"
+                        x1="0"
+                        y1="0"
+                        x2="0"
+                        y2="1"
+                      >
+                        <stop
+                          offset="0%"
+                          stopColor={
+                            calculateChartChange() >= 0
+                              ? COLORS.GREEN[theme]
+                              : COLORS.RED[theme]
+                          }
+                          stopOpacity={0.15}
+                        />
+                        <stop
+                          offset="99%"
+                          stopColor={
+                            calculateChartChange() >= 0
+                              ? COLORS.GREEN[theme]
+                              : COLORS.RED[theme]
+                          }
+                          stopOpacity={0}
+                        />
+                      </linearGradient>
+                    </defs>
+                    <Area
+                      isAnimationActive={false}
+                      type="monotone"
+                      dataKey={yKey}
+                      stroke={
+                        calculateChartChange() >= 0
+                          ? COLORS.GREEN[theme]
+                          : COLORS.RED[theme]
+                      }
+                      strokeWidth={1.5}
+                      fill="url(#gradientArea)"
+                    />
+                    <XAxis
+                      axisLine={false}
+                      dataKey={xKey}
+                      padding={{ left: 20, right: 20 }}
+                      tick={{
+                        fill:
+                          theme === 'Light'
+                            ? 'rgba(0,0,0,0.4)'
+                            : 'rgba(255,255,255,0.6)',
+                        fontSize: 10,
+                      }}
+                      tickLine={false}
+                    />
+                    <YAxis
+                      axisLine={false}
+                      dataKey={yKey}
+                      type="number"
+                      domain={['dataMin', 'dataMax']}
+                      padding={{ top: 20, bottom: 20 }}
+                      tick={{
+                        fill:
+                          theme === 'Light'
+                            ? 'rgba(0,0,0,0.4)'
+                            : 'rgba(255,255,255,0.6)',
+                        fontSize: 10,
+                      }}
+                      tickLine={false}
+                    />
+                  </AreaChart>
+                </ResponsiveContainer>
+              </div>
+            </div>
+          </div>
+        ) : (
+          <div className="flex h-96 items-center justify-center rounded-lg bg-th-bkg-2 p-4 text-th-fgd-3">
+            <div className="">
+              <LineChartIcon className="mx-auto h-10 w-10 text-th-fgd-4" />
+              <p className="text-th-fgd-4">Chart not available</p>
+            </div>
+          </div>
+        )}
+      </ContentBox>
+    </FadeInFadeOut>
+  )
+}
+
+export default DetailedAreaChart
diff --git a/pages/index.tsx b/pages/index.tsx
index 6197e444..353ad31c 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -10,6 +10,14 @@ import TokenList from '../components/TokenList'
 import mangoStore from '../store/state'
 import { formatDecimal } from '../utils/numbers'
 import FlipNumbers from 'react-flip-numbers'
+import { UpTriangle } from '../components/shared/DirectionTriangles'
+import SimpleAreaChart from '../components/shared/SimpleAreaChart'
+import { COLORS } from '../styles/colors'
+import { useTheme } from 'next-themes'
+import { IconButton } from '../components/shared/Button'
+import { ArrowsExpandIcon } from '@heroicons/react/solid'
+import DetailedAreaChart from '../components/shared/DetailedAreaChart'
+import { Transition } from '@headlessui/react'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -19,44 +27,103 @@ export async function getStaticProps({ locale }: { locale: string }) {
   }
 }
 
+const chartData = [
+  [1, 300],
+  [2, 310],
+  [3, 320],
+  [4, 330],
+  [5, 340],
+  [6, 350],
+  [7, 360],
+  [8, 370],
+  [9, 380],
+  [10, 390],
+]
+
 const Index: NextPage = () => {
   const { t } = useTranslation('common')
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
+  const [showDetailedValueChart, setShowDetailedValueChart] = useState(false)
+  const [showExpandChart, setShowExpandChart] = useState(false)
+  const { theme } = useTheme()
 
-  return (
+  const onHoverMenu = (open: boolean, action: string) => {
+    if (
+      (!open && action === 'onMouseEnter') ||
+      (open && action === 'onMouseLeave')
+    ) {
+      setShowExpandChart(!open)
+    }
+  }
+
+  const handleShowDetailedValueChart = () => {
+    setShowDetailedValueChart(true)
+    setShowExpandChart(false)
+  }
+
+  return !showDetailedValueChart ? (
     <>
-      <div className="mb-8 flex items-end justify-between border-b border-th-bkg-3 pb-8">
-        <div>
-          <p className="mb-1">{t('account-value')}</p>
-          <div className="flex items-center text-5xl font-bold text-th-fgd-1">
-            $
-            {mangoAccount ? (
-              <FlipNumbers
-                height={48}
-                width={32}
-                play
-                delay={0.05}
-                duration={1}
-                numbers={formatDecimal(
-                  toUiDecimals(mangoAccount.getEquity().toNumber()),
-                  2
-                )}
-              />
-            ) : (
-              (0).toFixed(2)
-            )}
+      <div className="mb-8 flex flex-col border-b border-th-bkg-3 pb-8 lg:flex-row lg:items-end lg:justify-between">
+        <div className="mb-4 flex items-center space-x-6 lg:mb-0">
+          <div>
+            <p className="mb-1">{t('account-value')}</p>
+            <div className="flex items-center text-5xl font-bold text-th-fgd-1">
+              $
+              {mangoAccount ? (
+                <FlipNumbers
+                  height={48}
+                  width={32}
+                  play
+                  delay={0.05}
+                  duration={1}
+                  numbers={formatDecimal(
+                    toUiDecimals(mangoAccount.getEquity().toNumber()),
+                    2
+                  )}
+                />
+              ) : (
+                (0).toFixed(2)
+              )}
+            </div>
+            <div className="mt-1 flex items-center space-x-2">
+              <UpTriangle />
+              <p className="mb-0.5 text-th-green">2.13%</p>
+            </div>
+          </div>
+          <div
+            className="relative flex items-end"
+            onMouseEnter={() => onHoverMenu(showExpandChart, 'onMouseEnter')}
+            onMouseLeave={() => onHoverMenu(showExpandChart, 'onMouseLeave')}
+          >
+            <SimpleAreaChart
+              color={COLORS.GREEN[theme]}
+              data={chartData}
+              height={106}
+              name="accountValue"
+              width={240}
+            />
+            <Transition
+              appear={true}
+              className="absolute right-2 bottom-2"
+              show={showExpandChart}
+              enter="transition-all ease-in duration-300"
+              enterFrom="opacity-0 transform scale-75"
+              enterTo="opacity-100 transform scale-100"
+              leave="transition ease-out duration-200"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+              <IconButton
+                className="text-th-fgd-3"
+                hideBg
+                onClick={() => handleShowDetailedValueChart()}
+              >
+                <ArrowsExpandIcon className="h-5 w-5" />
+              </IconButton>
+            </Transition>
           </div>
-          {/* <div className="text-5xl font-bold text-th-fgd-1">
-            $
-            {mangoAccount
-              ? formatDecimal(
-                  toUiDecimals(mangoAccount.getEquity().toNumber()),
-                  2
-                )
-              : (0).toFixed(2)}
-          </div> */}
         </div>
         <AccountActions />
       </div>
@@ -74,6 +141,14 @@ const Index: NextPage = () => {
         />
       ) : null}
     </>
+  ) : (
+    <DetailedAreaChart
+      data={chartData}
+      hideChart={() => setShowDetailedValueChart(false)}
+      title={t('account-value')}
+      xKey="0"
+      yKey="1"
+    />
   )
 }