diff --git a/web/components/portfolio/portfolio-value-graph.tsx b/web/components/portfolio/portfolio-value-graph.tsx
new file mode 100644
index 00000000..558fc5f6
--- /dev/null
+++ b/web/components/portfolio/portfolio-value-graph.tsx
@@ -0,0 +1,83 @@
+import { ResponsiveLine } from '@nivo/line'
+import { PortfolioMetrics } from 'common/user'
+import { formatMoney } from 'common/util/format'
+import { DAY_MS } from 'common/util/time'
+import { last } from 'lodash'
+import { memo } from 'react'
+import { useWindowSize } from 'web/hooks/use-window-size'
+import { formatTime } from 'web/lib/util/time'
+
+export const PortfolioValueGraph = memo(function PortfolioValueGraph(props: {
+  portfolioHistory: PortfolioMetrics[]
+  height?: number
+  period?: string
+}) {
+  const { portfolioHistory, height, period } = props
+
+  const { width } = useWindowSize()
+
+  const portfolioHistoryFiltered = portfolioHistory.filter((p) => {
+    switch (period) {
+      case 'daily':
+        return p.timestamp > Date.now() - 1 * DAY_MS
+      case 'weekly':
+        return p.timestamp > Date.now() - 7 * DAY_MS
+      case 'monthly':
+        return p.timestamp > Date.now() - 30 * DAY_MS
+      case 'allTime':
+        return true
+      default:
+        return true
+    }
+  })
+
+  const points = portfolioHistoryFiltered.map((p) => {
+    return {
+      x: new Date(p.timestamp),
+      y: p.balance + p.investmentValue,
+    }
+  })
+  const data = [{ id: 'Value', data: points, color: '#11b981' }]
+  const numXTickValues = !width || width < 800 ? 2 : 5
+  const numYTickValues = 4
+  const endDate = last(points)?.x
+  const includeTime = period === 'daily'
+  return (
+    <div
+      className="w-full overflow-hidden"
+      style={{ height: height ?? (!width || width >= 800 ? 350 : 250) }}
+    >
+      <ResponsiveLine
+        data={data}
+        margin={{ top: 20, right: 28, bottom: 22, left: 60 }}
+        xScale={{
+          type: 'time',
+          min: points[0].x,
+          max: endDate,
+        }}
+        yScale={{
+          type: 'linear',
+          stacked: false,
+          min: Math.min(...points.map((p) => p.y)),
+        }}
+        gridYValues={numYTickValues}
+        curve="monotoneX"
+        colors={{ datum: 'color' }}
+        axisBottom={{
+          tickValues: numXTickValues,
+          format: (time) => formatTime(+time, includeTime),
+        }}
+        pointBorderColor="#fff"
+        pointSize={points.length > 100 ? 0 : 6}
+        axisLeft={{
+          tickValues: numYTickValues,
+          format: (value) => formatMoney(value),
+        }}
+        enableGridX={!!width && width >= 800}
+        enableGridY={true}
+        enableSlices="x"
+        animate={false}
+      ></ResponsiveLine>
+    </div>
+  )
+})
diff --git a/web/components/portfolio/portfolio-value-section.tsx b/web/components/portfolio/portfolio-value-section.tsx
new file mode 100644
index 00000000..a992e87e
--- /dev/null
+++ b/web/components/portfolio/portfolio-value-section.tsx
@@ -0,0 +1,47 @@
+import { PortfolioMetrics } from 'common/user'
+import { formatMoney } from 'common/util/format'
+import { last } from 'lodash'
+import { memo, useState } from 'react'
+import { Period } from 'web/lib/firebase/users'
+import { Col } from '../layout/col'
+import { Row } from '../layout/row'
+import { PortfolioValueGraph } from './portfolio-value-graph'
+
+export const PortfolioValueSection = memo(
+  function PortfolioValueSection(props: {
+    portfolioHistory: PortfolioMetrics[]
+  }) {
+    const { portfolioHistory } = props
+    const lastPortfolioMetrics = last(portfolioHistory)
+    const [portfolioPeriod] = useState<Period>('allTime')
+
+    if (portfolioHistory.length === 0 || !lastPortfolioMetrics) {
+      return <div> No portfolio history data yet </div>
+    }
+
+    return (
+      <div>
+        <Row className="gap-8">
+          <div className="mb-4 w-full">
+            <Col>
+              <div className="text-sm text-gray-500">Portfolio value</div>
+              <div className="text-lg">
+                {formatMoney(
+                  lastPortfolioMetrics.balance +
+                    lastPortfolioMetrics.investmentValue
+                )}
+              </div>
+            </Col>
+          </div>
+          {
+            //TODO: enable day/week/monthly as data becomes available
+          }
+        </Row>
+        <PortfolioValueGraph
+          portfolioHistory={portfolioHistory}
+          period={portfolioPeriod}
+        />
+      </div>
+    )
+  }
+)
diff --git a/web/components/user-page.tsx b/web/components/user-page.tsx
index cd896c59..2019a9de 100644
--- a/web/components/user-page.tsx
+++ b/web/components/user-page.tsx
@@ -6,7 +6,12 @@ import { LinkIcon } from '@heroicons/react/solid'
 import { PencilIcon } from '@heroicons/react/outline'
 import Confetti from 'react-confetti'
 
-import { follow, unfollow, User } from 'web/lib/firebase/users'
+import {
+  follow,
+  unfollow,
+  User,
+  getPortfolioHistory,
+} from 'web/lib/firebase/users'
 import { CreatorContractsList } from './contract/contracts-list'
 import { SEO } from './SEO'
 import { Page } from './page'
@@ -30,6 +35,7 @@ import { getUserBets } from 'web/lib/firebase/bets'
 import { FollowersButton, FollowingButton } from './following-button'
 import { useFollows } from 'web/hooks/use-follows'
 import { FollowButton } from './follow-button'
+import { PortfolioMetrics } from 'common/user'
 
 export function UserLink(props: {
   name: string
@@ -67,6 +73,7 @@ export function UserPage(props: {
     'loading'
   )
   const [usersBets, setUsersBets] = useState<Bet[] | 'loading'>('loading')
+  const [, setUsersPortfolioHistory] = useState<PortfolioMetrics[]>([])
   const [commentsByContract, setCommentsByContract] = useState<
     Map<Contract, Comment[]> | 'loading'
   >('loading')
@@ -83,6 +90,7 @@ export function UserPage(props: {
     getUsersComments(user.id).then(setUsersComments)
     listContracts(user.id).then(setUsersContracts)
     getUserBets(user.id, { includeRedemptions: false }).then(setUsersBets)
+    getPortfolioHistory(user.id).then(setUsersPortfolioHistory)
   }, [user])
 
   // TODO: display comments on groups
@@ -243,6 +251,7 @@ export function UserPage(props: {
         </Col>
 
         <Spacer h={10} />
+
         {usersContracts !== 'loading' && commentsByContract != 'loading' ? (
           <Tabs
             className={'pb-2 pt-1 '}
@@ -284,6 +293,9 @@ export function UserPage(props: {
                 title: 'Bets',
                 content: (
                   <div>
+                    {
+                      // TODO: add portfolio-value-section here
+                    }
                     <BetsList
                       user={user}
                       hideBetsBefore={isCurrentUser ? 0 : JUNE_1_2022}
diff --git a/web/lib/firebase/users.ts b/web/lib/firebase/users.ts
index 97e30aa5..a3bba98a 100644
--- a/web/lib/firebase/users.ts
+++ b/web/lib/firebase/users.ts
@@ -24,7 +24,7 @@ import {
 import { range, throttle, zip } from 'lodash'
 
 import { app } from './init'
-import { PrivateUser, User } from 'common/user'
+import { PortfolioMetrics, PrivateUser, User } from 'common/user'
 import { createUser } from './fn-call'
 import { getValue, getValues, listenForValue, listenForValues } from './utils'
 import { DAY_MS } from 'common/util/time'
@@ -35,7 +35,7 @@ import { filterDefined } from 'common/util/array'
 
 export type { User }
 
-export type LeaderboardPeriod = 'daily' | 'weekly' | 'monthly' | 'allTime'
+export type Period = 'daily' | 'weekly' | 'monthly' | 'allTime'
 
 const db = getFirestore(app)
 export const auth = getAuth(app)
@@ -180,7 +180,7 @@ export function listenForPrivateUsers(
   listenForValues(q, setUsers)
 }
 
-export function getTopTraders(period: LeaderboardPeriod) {
+export function getTopTraders(period: Period) {
   const topTraders = query(
     collection(db, 'users'),
     orderBy('profitCached.' + period, 'desc'),
@@ -190,7 +190,7 @@ export function getTopTraders(period: LeaderboardPeriod) {
   return getValues(topTraders)
 }
 
-export function getTopCreators(period: LeaderboardPeriod) {
+export function getTopCreators(period: Period) {
   const topCreators = query(
     collection(db, 'users'),
     orderBy('creatorVolumeCached.' + period, 'desc'),
@@ -270,6 +270,16 @@ export async function unfollow(userId: string, unfollowedUserId: string) {
   await deleteDoc(followDoc)
 }
 
+export async function getPortfolioHistory(userId: string) {
+  return getValues<PortfolioMetrics>(
+    query(
+      collectionGroup(db, 'portfolioHistory'),
+      where('userId', '==', userId),
+      orderBy('timestamp', 'asc')
+    )
+  )
+}
+
 export function listenForFollows(
   userId: string,
   setFollowIds: (followIds: string[]) => void
diff --git a/web/lib/util/time.ts b/web/lib/util/time.ts
index a5844b34..4bd76b91 100644
--- a/web/lib/util/time.ts
+++ b/web/lib/util/time.ts
@@ -5,3 +5,13 @@ dayjs.extend(relativeTime)
 export function fromNow(time: number) {
   return dayjs(time).fromNow()
 }
+
+export function formatTime(time: number, includeTime: boolean) {
+  const d = dayjs(time)
+
+  if (d.isSame(Date.now(), 'day')) return d.format('ha')
+
+  if (includeTime) return dayjs(time).format('MMM D, ha')
+
+  return dayjs(time).format('MMM D')
+}
diff --git a/web/pages/leaderboards.tsx b/web/pages/leaderboards.tsx
index ed05413a..7e141e72 100644
--- a/web/pages/leaderboards.tsx
+++ b/web/pages/leaderboards.tsx
@@ -4,8 +4,8 @@ import { Page } from 'web/components/page'
 import {
   getTopCreators,
   getTopTraders,
-  LeaderboardPeriod,
   getTopFollowed,
+  Period,
   User,
 } from 'web/lib/firebase/users'
 import { formatMoney } from 'common/util/format'
@@ -20,7 +20,7 @@ export const getStaticProps = fromPropz(getStaticPropz)
 export async function getStaticPropz() {
   return queryLeaderboardUsers('allTime')
 }
-const queryLeaderboardUsers = async (period: LeaderboardPeriod) => {
+const queryLeaderboardUsers = async (period: Period) => {
   const [topTraders, topCreators, topFollowed] = await Promise.all([
     getTopTraders(period).catch(() => {}),
     getTopCreators(period).catch(() => {}),
@@ -50,7 +50,7 @@ export default function Leaderboards(props: {
   const [topTradersState, setTopTraders] = useState(props.topTraders)
   const [topCreatorsState, setTopCreators] = useState(props.topCreators)
   const [isLoading, setLoading] = useState(false)
-  const [period, setPeriod] = useState<LeaderboardPeriod>('allTime')
+  const [period, setPeriod] = useState<Period>('allTime')
 
   useEffect(() => {
     setLoading(true)
@@ -61,7 +61,7 @@ export default function Leaderboards(props: {
     })
   }, [period])
 
-  const LeaderboardWithPeriod = (period: LeaderboardPeriod) => {
+  const LeaderboardWithPeriod = (period: Period) => {
     return (
       <>
         <Col className="mx-4 items-center gap-10 lg:flex-row">
@@ -127,7 +127,7 @@ export default function Leaderboards(props: {
         defaultIndex={0}
         onClick={(title, index) => {
           const period = ['allTime', 'monthly', 'weekly', 'daily'][index]
-          setPeriod(period as LeaderboardPeriod)
+          setPeriod(period as Period)
         }}
         tabs={[
           {