diff --git a/assets/react/controllers/BarChart.tsx b/assets/react/controllers/BarChart.tsx
index 8b31a6cd9cd049138bd4a38f2740eb36d997c81f..0c256efe6e6d1eafe5b1b8a9405877d41aa142fa 100644
--- a/assets/react/controllers/BarChart.tsx
+++ b/assets/react/controllers/BarChart.tsx
@@ -7,11 +7,14 @@ Chart.register(LinearScale);
 Chart.register(ArcElement);
 Chart.register(...registerables);
 
+import '../../styles/resume.css';
+
 
 export default function BarChart() {
   const defaultDate = new Date();
   let [date, setDate] = React.useState(defaultDate);
-  const [transactions, setTransactions] = React.useState([]);
+  let [transactions, setTransactions] = React.useState([]);
+  
 
   function next() {
     if (date.getMonth() == 11) {
@@ -29,58 +32,94 @@ export default function BarChart() {
     }
   }
 
+  const getDays = (year, month) => {
+    return new Date(year, month+1, 0).getDate();
+  };
+
   React.useEffect(() => {
     apiService.list().then(transactions => setTransactions(transactions.sort((x, y) => {
       let d1 = new Date(x.date);
       let d2 = new Date(y.date);
 
       return d1.getTime() - d2.getTime();
-    })))
-  }, []);
-
-
-  let apiService = new APIService();
-  let myLabels: string[] = [
-    "restaurant",
-    "bar",
-    "store",
-    "groceries",
-    "sport",
-    "restaurant",
-    "transport",
-    "other",
-    "subscription"
-  ];
-  let values = [0,0,0,0,0,0,0,0,0];
-
-  transactions.forEach((x, i) => {
-    const category: string = x.category;
-    const id: number = myLabels.indexOf(category);
-    values[id] += x.amount;
-  })
+    })))}, []);
+
+    console.log(transactions)
+
+    transactions = transactions.filter((transaction, i) => {
+      let trDate = new Date(transaction.date);
+      let trYr =  trDate.getFullYear();
+      let trMonth = trDate.getMonth();
+
+      let month = date.getMonth();
+      let yr = date.getFullYear();
+      return (trYr == yr && month == trMonth);
+    })
+
+    console.log(transactions);
+
 
-  console.log(values);
+  let apiService = new APIService();  
+  let myLabels = Array.from({length : getDays(date.getFullYear(), date.getMonth())}, (x,i) => i+1);
+  const size = getDays(date.getFullYear(), date.getMonth());
+
+  console.log("Size" + size);
+  let values = [...new Array(size)].map(_ => 0);
+  console.log("values : ")
+  console.log([...values])
+  transactions.forEach((transaction) => {
+    console.log(transaction.date); 
+    let trDate = new Date(transaction.date); 
+    let day = trDate.getDate(); 
+    console.log("date " + day);
+    console.log(transaction.amount);
+    console.log("values per day " + values[day])
+    if (transaction.expense) {
+      values[day] = Number((values[day] - parseInt(transaction.amount)));
+    } else {
+      values[day] = Number((values[day] + parseInt(transaction.amount)));
+    }
+    console.log(values);
+  })
 
   const data = {
     labels: myLabels,
     datasets: [{
-      label: 'values',
+      label: '',
       data: values,
       backgroundColor: [
         'rgb(255, 99, 132)',
+        'rgb(255, 99, 4)',
         'rgb(54, 162, 235)',
         'rgb(199, 58, 58)',
         'rgb(51, 255, 255)',
         'rgb(81, 255, 128)',
         'rgb(242, 211, 8)',
         'rgb(242, 133, 8)',
+        'rgb(22, 133, 8)',
       ],
       hoverOffset: 4
-    }]
+    }],
+    options: {
+      scales: {
+        yAxes: [{
+          ticks: {
+            min: Math.min.apply(this, values) - 5,
+            max: Math.max.apply(this, values) + 5,
+          }
+        }]
+      }
+    }
+  }
+
+  const dateToString = (date: Date) => {
+    const months = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin", "Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];
+    return months[date.getMonth()] + " " + date.getFullYear();
   }
 
-  return <div>
-    <p>{date.toString()}</p>
+  return <div className='horizontal'>
+    <h2>Diagramme du flux monétaire</h2>
+    <p>Date : {dateToString(date)}</p>
     <Bar data={data} />
     <button onClick={previous}>Previous</button>
     <button onClick={next}>Next</button>
diff --git a/assets/react/controllers/PieChart.tsx b/assets/react/controllers/PieChart.tsx
index 57f53b21fb393e58da9da6c5b95571c3c6a2ef10..4c87fa4a8525338ff4d2a0162d8c77ec288b004d 100644
--- a/assets/react/controllers/PieChart.tsx
+++ b/assets/react/controllers/PieChart.tsx
@@ -14,22 +14,22 @@ export default function PieChart() {
   React.useEffect(() => {
     apiService.list().then(transactions => setTransactions(transactions))
   }, [])
-  console.log(transactions);
   let values = [0, 0, 0, 0, 0, 0, 0, 0, 0];
   let apiService = new APIService();
   let myLabels: string[] = [
     "restaurant",
     "bar",
-    "store",
+    "stores",
     "groceries",
     "sport",
     "restaurant",
     "transport",
     "other",
-    "subscription"
+    "subscription",
+    "education"
   ];
 
-  transactions.forEach((x, i) => {
+  transactions.forEach((x, i) => {  
     const category: string = x.category;
     const id: number = myLabels.indexOf(category);
     values[id] += x.amount;
@@ -38,36 +38,28 @@ export default function PieChart() {
   const data = {
     labels: myLabels,
     datasets: [{
-      label: 'values',
+      label: 'Montant',
       data: values,
       backgroundColor: [
         'rgb(255, 99, 132)',
+        'rgb(255, 99, 4)',
         'rgb(54, 162, 235)',
         'rgb(199, 58, 58)',
         'rgb(51, 255, 255)',
         'rgb(81, 255, 128)',
         'rgb(242, 211, 8)',
         'rgb(242, 133, 8)',
+        'rgb(22, 133, 8)',
       ],
       hoverOffset: 4
     }],
     options: {
-      responsive: true,
-      plugins: {
-        legend: {
-          position: 'right',
-          rtl: true,
-          labels: {
-            usePointStyle: true,
-            pointStyle: 'circle',
-            padding: 20,
-          }
-        }
-      },
+      responsive: false,
     }
   }
 
-  return <div className="pie-chart">
+  return <div className="horizontal">
+    <h2>Camembert des dépenses totales</h2>
     <Pie data={data}/>
   </div>;
 }
\ No newline at end of file
diff --git a/assets/styles/resume.css b/assets/styles/resume.css
index 33da8df9cfb6bc4eb1fd358b5826d4440efa2b5e..3021c992722813ade37c90f433aea30cece5a054 100644
--- a/assets/styles/resume.css
+++ b/assets/styles/resume.css
@@ -1,6 +1,12 @@
 .pie-chart {
-    height: 400px;
-    aspect-ratio: 1/1;
+    height: 300px;
+}
+
+.horizontal {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
 }
 
 .text {
diff --git a/templates/summary/index.html.twig b/templates/summary/index.html.twig
index 849090e8e76dad847baa6dab501dcd2820c3c072..3074a6d353cadd86a1a7a5d89c5bec6b4c41d8e3 100644
--- a/templates/summary/index.html.twig
+++ b/templates/summary/index.html.twig
@@ -12,6 +12,9 @@
     .example-wrapper code { background: #F5F5F5; padding: 2px 6px; }
 </style>
 
+	<div class="wrapper">
+		<div {{ react_component( 'Menu', {active: 'summary'})}}></div>
+	</div>
 <div class="example-wrapper">
 
     <div {{ react_component('PieChart')}}></div>