diff --git a/frontend/pages/breakdown/breakdown.py b/frontend/pages/breakdown/breakdown.py
index 41ebd36..475aa3b 100644
--- a/frontend/pages/breakdown/breakdown.py
+++ b/frontend/pages/breakdown/breakdown.py
@@ -7,9 +7,10 @@
 from app import app
 from pages.breakdown import breakdown_callbacks
 
-
 df = pd.read_csv('pages/breakdown/dummies.csv')
 
+# df = pd.read_csv('pages/breakdown/Transactions_2022Q1.csv')
+
 layout = dbc.Container([
     dbc.Row([
         dbc.Col(html.H1("Breakdown Dashboard",
@@ -30,13 +31,7 @@
             dcc.Graph(id = 'yearly_spending_graph', figure={})
         ], width = {'size':6}),
         
-        dbc.Col(html.P('Lorem ipsum dolor sit amet, consectetur adipiscing elit,\
-                       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
-                       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\
-                       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\
-                       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\
-                       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\
-                       deserunt mollit anim id est laborum.', className='text-right text-primary, mb-4'),
+        dbc.Col(html.P('Shows your spending over the selected year.', className='text-right text-primary, mb-4'),
                 width = {'size': 3,'offset' : 1})
         
     ]),
@@ -54,13 +49,7 @@
             dcc.Graph(id = 'yearly_saving_graph', figure={})
         ], width = {'size':6}),
         
-        dbc.Col(html.P('Lorem ipsum dolor sit amet, consectetur adipiscing elit,\
-                       sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\
-                       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris\
-                       nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in\
-                       reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.\
-                       Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia\
-                       deserunt mollit anim id est laborum.', className='text-right text-primary, mb-4'),
+        dbc.Col(html.P('Shows your saving over the selected year.', className='text-right text-primary, mb-4'),
                 width = {'size': 3, 'offset': 1})
         
     ])
diff --git a/frontend/pages/dashboard/dashboard.py b/frontend/pages/dashboard/dashboard.py
index de5379f..f65b3f3 100644
--- a/frontend/pages/dashboard/dashboard.py
+++ b/frontend/pages/dashboard/dashboard.py
@@ -1,6 +1,76 @@
-import dash_html_components as html
-import dash_core_components as dcc
+import dash
+from dash import dcc, html
 import dash_bootstrap_components as dbc
 from pages.dashboard import dashboard_callbacks
+import pandas as pd
+import dash_table
+from datetime import datetime as dt
 
-layout = dbc.Container()
\ No newline at end of file
+
+df = pd.read_csv('pages/dashboard/Transactions_2022Q1.csv')
+df.drop(['enrich', 'transactionDate', 'subClass', 'connection','links.self', 'links.account', 'links.institution', 'links.connection', 'subClass.code'],axis = 1, inplace=True)
+df['postDate'] = pd.to_datetime(df['postDate'],errors="coerce")
+df.set_index('postDate', inplace=True)
+
+layout = dbc.Container([
+
+    dbc.Row([
+        html.H1("YOUR SPENDING BREAKDOWN",
+            className='text-center text-primary mb-4'),  
+
+        html.H3("SPENDING CATEGORIZATION",
+            className='text-center text-primary mb-4')
+        ]),
+
+    dbc.Row([
+
+        dbc.Col(
+            html.P('Chart shows categories of spending over a period.', className='text-right text-primary, mb-4'),
+            width = {'size': 3,'offset' : 0}),
+
+        dbc.Col([
+            dcc.DatePickerRange(
+                id='transaction_range',
+                calendar_orientation='horizontal',
+                day_size=35,
+                end_date_placeholder_text="End",
+                with_portal=False,
+                first_day_of_week=0,
+                reopen_calendar_on_clear=True,
+                is_RTL=False, 
+                clearable=True,
+                number_of_months_shown=1, 
+                min_date_allowed=dt(2022, 1, 1),
+                max_date_allowed=dt(2022, 3, 31),
+                initial_visible_month=dt(2022, 1, 1),
+                start_date=dt(2022, 1, 1).date(),
+                end_date=dt(2022, 3, 31).date(),
+                display_format='MMM Do, YY',
+                month_format='MMMM, YYYY',
+                minimum_nights=1,
+                persistence=True,
+                persisted_props=['start_date'],
+                persistence_type='session',
+
+                updatemode='singledate'
+                )  
+            ],width = {'size': 5,'offset' : 1}),
+
+            dcc.Graph(id = 'piechart', figure={})
+            
+        ]),
+
+    dbc.Row(
+        dash_table.DataTable(
+            id = 'transaction_table',
+            data = df.to_dict('records'), 
+            columns = [{"name": i, "id": i} for i in df.columns],
+            style_cell = {'textAlign':'left'},
+            style_header={
+            'backgroundColor': '#4f8fe3',
+            'fontWeight': 'bold'
+            },
+            page_size=20
+            )
+        )
+])
diff --git a/frontend/pages/dashboard/dashboard_callbacks.py b/frontend/pages/dashboard/dashboard_callbacks.py
index 709fe8f..3d27e4e 100644
--- a/frontend/pages/dashboard/dashboard_callbacks.py
+++ b/frontend/pages/dashboard/dashboard_callbacks.py
@@ -1,3 +1,54 @@
+import dash
 from classes.api import API
 from dash.dependencies import Input, Output, State
-from app import app
\ No newline at end of file
+from app import app
+import pandas as pd
+import plotly
+import plotly.express as px
+
+
+
+
+df = pd.read_csv('pages/dashboard/Transactions_2022Q1.csv')
+
+@app.callback(
+    Output("transaction_table", "data"),
+    [
+        Input("transaction_range", "start_date"),
+        Input("transaction_range", "end_date"),
+    ],
+)
+def update_table(start_date, end_date):
+
+    data = df.to_dict("records")
+    if start_date and end_date:
+        mask = (df['postDate'] >= start_date) & (df['postDate'] <= end_date)
+        data = df.loc[mask].to_dict("records")
+    return data
+
+
+@app.callback(
+    Output('piechart', 'figure'),
+    [
+    Input("transaction_range", "start_date"),
+    Input("transaction_range", "end_date"),
+    ],
+)
+def update_graph(start_date, end_date):
+
+    if start_date and end_date:
+        mask = (df['postDate'] >= start_date) & (df['postDate'] <= end_date)
+        data = df.loc[mask]
+
+    data = data[data['direction'] == 'debit']
+    data['amount'] = data['amount'].astype('float64')
+    data['amount'] = data['amount'].abs()
+
+    fig_pie = px.pie(
+        data_frame = data,
+        names = "subClass.title",
+        values = 'amount',
+        hole = .3,
+        labels = "subClass.title"
+    )
+    return fig_pie
\ No newline at end of file
diff --git a/frontend/pages/dashboard/dummies.csv b/frontend/pages/dashboard/dummies.csv
new file mode 100644
index 0000000..d1b0a2e
--- /dev/null
+++ b/frontend/pages/dashboard/dummies.csv
@@ -0,0 +1,253 @@
+Amount,Categories,Month,Year
+1795,Rent,Jan,2020
+1113,Food,Jan,2020
+296,Entertainment,Jan,2020
+157,Clothes,Jan,2020
+206,Energy,Jan,2020
+182,Phone,Jan,2020
+223,Others,Jan,2020
+1621,Rent,Feb,2020
+1189,Food,Feb,2020
+221,Entertainment,Feb,2020
+153,Clothes,Feb,2020
+242,Energy,Feb,2020
+200,Phone,Feb,2020
+231,Others,Feb,2020
+1512,Rent,March,2020
+1098,Food,March,2020
+266,Entertainment,March,2020
+180,Clothes,March,2020
+200,Energy,March,2020
+190,Phone,March,2020
+269,Others,March,2020
+1637,Rent,Apr,2020
+1126,Food,Apr,2020
+262,Entertainment,Apr,2020
+170,Clothes,Apr,2020
+205,Energy,Apr,2020
+159,Phone,Apr,2020
+228,Others,Apr,2020
+1549,Rent,May,2020
+1118,Food,May,2020
+290,Entertainment,May,2020
+184,Clothes,May,2020
+239,Energy,May,2020
+160,Phone,May,2020
+220,Others,May,2020
+1974,Rent,Jun,2020
+1032,Food,Jun,2020
+227,Entertainment,Jun,2020
+178,Clothes,Jun,2020
+227,Energy,Jun,2020
+161,Phone,Jun,2020
+268,Others,Jun,2020
+1849,Rent,Jul,2020
+1019,Food,Jul,2020
+267,Entertainment,Jul,2020
+172,Clothes,Jul,2020
+210,Energy,Jul,2020
+198,Phone,Jul,2020
+239,Others,Jul,2020
+1774,Rent,Aug,2020
+1200,Food,Aug,2020
+249,Entertainment,Aug,2020
+154,Clothes,Aug,2020
+204,Energy,Aug,2020
+192,Phone,Aug,2020
+291,Others,Aug,2020
+1576,Rent,Sep,2020
+1002,Food,Sep,2020
+231,Entertainment,Sep,2020
+175,Clothes,Sep,2020
+202,Energy,Sep,2020
+173,Phone,Sep,2020
+294,Others,Sep,2020
+1932,Rent,Oct,2020
+1109,Food,Oct,2020
+274,Entertainment,Oct,2020
+187,Clothes,Oct,2020
+245,Energy,Oct,2020
+190,Phone,Oct,2020
+255,Others,Oct,2020
+1760,Rent,Nov,2020
+1170,Food,Nov,2020
+243,Entertainment,Nov,2020
+171,Clothes,Nov,2020
+205,Energy,Nov,2020
+173,Phone,Nov,2020
+229,Others,Nov,2020
+1794,Rent,Dec,2020
+1137,Food,Dec,2020
+278,Entertainment,Dec,2020
+172,Clothes,Dec,2020
+225,Energy,Dec,2020
+182,Phone,Dec,2020
+272,Others,Dec,2020
+1689,Rent,Jan,2021
+1169,Food,Jan,2021
+230,Entertainment,Jan,2021
+167,Clothes,Jan,2021
+230,Energy,Jan,2021
+183,Phone,Jan,2021
+236,Others,Jan,2021
+1852,Rent,Feb,2021
+1173,Food,Feb,2021
+261,Entertainment,Feb,2021
+182,Clothes,Feb,2021
+206,Energy,Feb,2021
+172,Phone,Feb,2021
+252,Others,Feb,2021
+1903,Rent,March,2021
+1194,Food,March,2021
+268,Entertainment,March,2021
+191,Clothes,March,2021
+233,Energy,March,2021
+181,Phone,March,2021
+221,Others,March,2021
+1596,Rent,Apr,2021
+1031,Food,Apr,2021
+211,Entertainment,Apr,2021
+151,Clothes,Apr,2021
+248,Energy,Apr,2021
+151,Phone,Apr,2021
+212,Others,Apr,2021
+1652,Rent,May,2021
+1184,Food,May,2021
+203,Entertainment,May,2021
+171,Clothes,May,2021
+226,Energy,May,2021
+173,Phone,May,2021
+217,Others,May,2021
+1845,Rent,Jun,2021
+1161,Food,Jun,2021
+288,Entertainment,Jun,2021
+190,Clothes,Jun,2021
+250,Energy,Jun,2021
+183,Phone,Jun,2021
+287,Others,Jun,2021
+1951,Rent,Jul,2021
+1025,Food,Jul,2021
+277,Entertainment,Jul,2021
+156,Clothes,Jul,2021
+244,Energy,Jul,2021
+194,Phone,Jul,2021
+207,Others,Jul,2021
+1924,Rent,Aug,2021
+1173,Food,Aug,2021
+269,Entertainment,Aug,2021
+199,Clothes,Aug,2021
+221,Energy,Aug,2021
+165,Phone,Aug,2021
+269,Others,Aug,2021
+1729,Rent,Sep,2021
+1031,Food,Sep,2021
+240,Entertainment,Sep,2021
+193,Clothes,Sep,2021
+205,Energy,Sep,2021
+198,Phone,Sep,2021
+268,Others,Sep,2021
+1790,Rent,Oct,2021
+1156,Food,Oct,2021
+243,Entertainment,Oct,2021
+169,Clothes,Oct,2021
+227,Energy,Oct,2021
+171,Phone,Oct,2021
+259,Others,Oct,2021
+1669,Rent,Nov,2021
+1072,Food,Nov,2021
+232,Entertainment,Nov,2021
+152,Clothes,Nov,2021
+203,Energy,Nov,2021
+165,Phone,Nov,2021
+250,Others,Nov,2021
+1765,Rent,Dec,2021
+1191,Food,Dec,2021
+282,Entertainment,Dec,2021
+166,Clothes,Dec,2021
+247,Energy,Dec,2021
+176,Phone,Dec,2021
+260,Others,Dec,2021
+1611,Rent,Jan,2022
+1099,Food,Jan,2022
+216,Entertainment,Jan,2022
+197,Clothes,Jan,2022
+235,Energy,Jan,2022
+156,Phone,Jan,2022
+213,Others,Jan,2022
+1712,Rent,Feb,2022
+1143,Food,Feb,2022
+258,Entertainment,Feb,2022
+177,Clothes,Feb,2022
+208,Energy,Feb,2022
+174,Phone,Feb,2022
+291,Others,Feb,2022
+1549,Rent,March,2022
+1104,Food,March,2022
+239,Entertainment,March,2022
+166,Clothes,March,2022
+210,Energy,March,2022
+152,Phone,March,2022
+288,Others,March,2022
+1771,Rent,Apr,2022
+1029,Food,Apr,2022
+223,Entertainment,Apr,2022
+166,Clothes,Apr,2022
+236,Energy,Apr,2022
+153,Phone,Apr,2022
+282,Others,Apr,2022
+1943,Rent,May,2022
+1034,Food,May,2022
+295,Entertainment,May,2022
+191,Clothes,May,2022
+247,Energy,May,2022
+168,Phone,May,2022
+222,Others,May,2022
+1559,Rent,Jun,2022
+1001,Food,Jun,2022
+244,Entertainment,Jun,2022
+200,Clothes,Jun,2022
+234,Energy,Jun,2022
+180,Phone,Jun,2022
+293,Others,Jun,2022
+1745,Rent,Jul,2022
+1176,Food,Jul,2022
+246,Entertainment,Jul,2022
+185,Clothes,Jul,2022
+250,Energy,Jul,2022
+193,Phone,Jul,2022
+236,Others,Jul,2022
+1857,Rent,Aug,2022
+1065,Food,Aug,2022
+213,Entertainment,Aug,2022
+164,Clothes,Aug,2022
+230,Energy,Aug,2022
+184,Phone,Aug,2022
+253,Others,Aug,2022
+1519,Rent,Sep,2022
+1069,Food,Sep,2022
+206,Entertainment,Sep,2022
+154,Clothes,Sep,2022
+248,Energy,Sep,2022
+177,Phone,Sep,2022
+205,Others,Sep,2022
+1507,Rent,Oct,2022
+1161,Food,Oct,2022
+285,Entertainment,Oct,2022
+191,Clothes,Oct,2022
+207,Energy,Oct,2022
+167,Phone,Oct,2022
+262,Others,Oct,2022
+1587,Rent,Nov,2022
+1109,Food,Nov,2022
+264,Entertainment,Nov,2022
+182,Clothes,Nov,2022
+235,Energy,Nov,2022
+197,Phone,Nov,2022
+232,Others,Nov,2022
+1547,Rent,Dec,2022
+1034,Food,Dec,2022
+214,Entertainment,Dec,2022
+176,Clothes,Dec,2022
+239,Energy,Dec,2022
+199,Phone,Dec,2022
+291,Others,Dec,2022