diff --git a/assets/react/controllers/Menu.tsx b/assets/react/controllers/Menu.tsx
index 3eade34a3883a50102ac5211262d823d3876da75..9409a57e15a31a259fab5e486daa235ec4caa5c8 100644
--- a/assets/react/controllers/Menu.tsx
+++ b/assets/react/controllers/Menu.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 
 import '../../styles/menu.css';
 
-export default function Menu() {
+export default function Menu(props: {active: string}) {
   return (
     <>
         <div className="profile">
@@ -11,17 +11,17 @@ export default function Menu() {
         </div>
         <ul>
           <li>
-            <a href="/summury" >
+            <a href="/summary" className={props.active === "summary" ? " active" : null}>
               <span className="item">Résumé</span>
             </a>
           </li>
           <li>
-            <a href="/transaction">
+            <a href="/transaction" className={props.active === "transaction" ? " active" : null}>
               <span className="item">Transactions</span>
             </a>
           </li>
           <li>
-            <a href="/but#">
+            <a href="/but" className={props.active === "but" ? " active" : null}>
               <span className="item">But</span>
             </a>
           </li>
diff --git a/templates/transaction/index.html.twig b/templates/transaction/index.html.twig
index 8921458c8d924d0e0b711ec2d0c067b62218f798..2256137906a39ff27e5bb5ce00d5a06b2591dd6d 100644
--- a/templates/transaction/index.html.twig
+++ b/templates/transaction/index.html.twig
@@ -15,7 +15,7 @@
 {% block body %}
 
 	<div class="wrapper">
-		<div {{ react_component( 'Menu')}}></div>
+		<div {{ react_component( 'Menu', {active: 'transaction'})}}></div>
 	</div>
 
 	<div style="display: flex;justify-grow: 1;flex-direction: column;margin-left: 225px; ">