diff --git a/src/core/api.jsx b/src/core/api.jsx
index 410670b..4ce3dc2 100644
--- a/src/core/api.jsx
+++ b/src/core/api.jsx
@@ -97,7 +97,8 @@ const api = () => {
         deleteTemplate: (id, callback) => apiCall(DELETE, `template/${id}`, callback),
         uploadImport: (payload, callback) => apiCall(POST, 'import', callback, payload),
         getInsights: (callback) => apiCall(GET, 'dash/insights', callback),
-        getCreditCardStatements: (id, callback) => apiCall(GET, `dash/credit-card-statement/${id}`, callback),
+        getCreditCardBills: (id, callback) => apiCall(GET, `dash/credit-card-bills/${id}`, callback),
+        getBalanceHistory: (callback) => apiCall(GET, 'dash/balance-history', callback),
         challenge: (callback) => apiCall(GET, 'profile/challenge', callback),
     };
 };
diff --git a/src/dashboard/balance-history.jsx b/src/dashboard/balance-history.jsx
new file mode 100644
index 0000000..8929bf1
--- /dev/null
+++ b/src/dashboard/balance-history.jsx
@@ -0,0 +1,37 @@
+import { BarChart } from '@mui/x-charts';
+import { HorizontalLoader } from '../core/loader';
+import { useEffect, useState } from 'react';
+import api from '../core/api';
+import dayjs from 'dayjs';
+import Title from '../core/title';
+
+const BalanceHistory = ({ setRoute }) => {
+    const [ balanceHistory, setBalanceHistory ] = useState();
+    const { getBalanceHistory } = api();
+
+    useEffect(() => {
+        setRoute('balance-history');
+        getBalanceHistory((response) => setBalanceHistory(response));
+    }, []);
+
+    const BalanceChart = () => (
+        <BarChart
+            series={balanceHistory.series}
+            xAxis={[{
+                data: balanceHistory.xaxis.map((str) => dayjs.utc(str).format('MMM YY')),
+                scaleType: 'band',
+            }]}
+            sx={{ ['.MuiChartsLegend-root'] : { 'display': 'none' } }}
+            margin={{ top: 10, left: 53, right: 0, bottom: 40 }}
+            tooltip={{ trigger: 'item' }}
+        />
+    );
+
+    return (
+        <>
+            <Title>Balance History</Title>
+            { !balanceHistory ? <HorizontalLoader /> : <BalanceChart /> }
+        </>
+    )
+};
+export default BalanceHistory;
diff --git a/src/dashboard/credit-card-statements.jsx b/src/dashboard/credit-card-bills.jsx
similarity index 86%
rename from src/dashboard/credit-card-statements.jsx
rename to src/dashboard/credit-card-bills.jsx
index c6e16d1..1ab0936 100644
--- a/src/dashboard/credit-card-statements.jsx
+++ b/src/dashboard/credit-card-bills.jsx
@@ -26,13 +26,13 @@ const GridBox = styled.div`
     margin-bottom: ${props => props.isMobile ? '.5rem' : '1rem' };
 `;
 
-const CreditCardStatements = ({ setRoute }) => {
-    const uri = '/dash/credit-card-statements';
+const CreditCardBills = ({ setRoute }) => {
+    const uri = '/dash/credit-card-bills';
     const location = useLocation();
     const navigate = useNavigate();
     const accounts = state.useState(state.accounts)[0];
-    const { getCreditCardStatements } = api();
-    const [ statements, setStatements ] = useState();
+    const { getCreditCardBills } = api();
+    const [ bills, setBills ] = useState();
     const [ selectedAccount, setSelectedAccount ] = state.useState(state.selectedAccount);
     const setFilterModel = state.useState(state.filterModel)[1];
 
@@ -47,7 +47,7 @@ const CreditCardStatements = ({ setRoute }) => {
         if (match) {
             const account = getCreditAccounts().find(a => a.id === parseInt(match[0]));
             if (account) {
-                setRoute(`credit-card-statements/${match[0]}`);
+                setRoute(`credit-card-bills/${match[0]}`);
                 setSelectedAccount(account);
                 return;
             }
@@ -60,11 +60,11 @@ const CreditCardStatements = ({ setRoute }) => {
 
     useEffect(() => {
         if (selectedAccount && getCreditAccounts().find(({ id }) => id === selectedAccount.id)) {
-            getCreditCardStatements(selectedAccount.id, (response) => setStatements(response));
+            getCreditCardBills(selectedAccount.id, (response) => setBills(response));
         }
     }, [ selectedAccount ]);
 
-    const StatementGrid = () => {
+    const BillGrid = () => {
         const theme = useTheme();
         const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
         const [ paginationModel, setPaginationModel ] = useState();
@@ -81,7 +81,7 @@ const CreditCardStatements = ({ setRoute }) => {
         ];
 
         const handlePagination = (n) => setPaginationModel(
-            paginationModel ? n : { ...n, page: Math.floor(statements.length / n.pageSize) }
+            paginationModel ? n : { ...n, page: Math.floor(bills.length / n.pageSize) }
         );
 
         const handleDoubleClick = ({ row }) => {
@@ -107,7 +107,7 @@ const CreditCardStatements = ({ setRoute }) => {
                     disableColumnMenu
                     hideFooterSelectedRowCount
                     density="compact"
-                    rows={statements}
+                    rows={bills}
                     columns={columns}
                     paginationModel={paginationModel}
                     onPaginationModelChange={handlePagination}
@@ -121,13 +121,13 @@ const CreditCardStatements = ({ setRoute }) => {
 
     return (
         <Root spacing={3} pb={3}>
-            <Title>Credit Card Statements</Title>
+            <Title>Credit Card Bills</Title>
             <AccountSelector
                 accountFilter={({ type }) => type === 'Credit' }
                 handleChange={({ target }) => navigate(`${uri}/${target.value}`)}
             />
-            { !statements ? <HorizontalLoader /> : <StatementGrid /> }
+            { !bills ? <HorizontalLoader /> : <BillGrid /> }
         </Root>
     );
 };
-export default CreditCardStatements;
+export default CreditCardBills;
diff --git a/src/dashboard/dashboard.jsx b/src/dashboard/dashboard.jsx
index 2cc1e20..24f0308 100644
--- a/src/dashboard/dashboard.jsx
+++ b/src/dashboard/dashboard.jsx
@@ -1,7 +1,8 @@
 import { Routes, Route, Navigate } from 'react-router-dom';
 import Summary from './summary';
 import Insights from './insights';
-import CreditCardStatements from './credit-card-statements';
+import CreditCardBills from './credit-card-bills';
+import BalanceHistory from './balance-history';
 import state from '../core/state';
 
 const Dashboard = () => {
@@ -10,7 +11,8 @@ const Dashboard = () => {
         <Routes>
             <Route path="summary" element={<Summary setRoute={setRoute} /> } />
             <Route path="insights/*" element={<Insights setRoute={setRoute} /> } />
-            <Route path="credit-card-statements/*" element={<CreditCardStatements setRoute={setRoute} /> } />
+            <Route path="credit-card-bills/*" element={<CreditCardBills setRoute={setRoute} /> } />
+            <Route path="balance-history" element={<BalanceHistory setRoute={setRoute} />} />
             <Route path="" element={<Navigate to={route} />} />
         </Routes>
     );
diff --git a/src/nav-bar/main-menu.jsx b/src/nav-bar/main-menu.jsx
index dbfcc37..ffbfe3a 100644
--- a/src/nav-bar/main-menu.jsx
+++ b/src/nav-bar/main-menu.jsx
@@ -47,8 +47,9 @@ const NavBar = () => {
             link: '/dash',
             children: [
                 { label: 'Summary', link: '/dash/summary' },
+                { label: 'Balance History', link: '/dash/balance-history' },
                 { label: 'Past Year Insights', link: '/dash/insights' },
-                { label: 'Credit Card Statements', link: '/dash/credit-card-statements' },
+                { label: 'Credit Card Bills', link: '/dash/credit-card-bills' },
             ],
         },
         {