diff --git a/assets/react/controllers/Menu.tsx b/assets/react/controllers/Menu.tsx
index 8f35c2f52a6f93d25f78db9c5df700fc16e92939..a2205270e4791a7538a17cedbc1f718a4d9d34c2 100644
--- a/assets/react/controllers/Menu.tsx
+++ b/assets/react/controllers/Menu.tsx
@@ -7,7 +7,7 @@ export default function Menu() {
     <>
         <div className="profile">
           <h1>SmartSavings</h1>
-          <img src="/img/logo_2.1.1.png" alt="logo" />
+          <img id="taille" src="/img/logo_2.1.1.png" alt="logo" />
         </div>
         <ul>
           <li>
diff --git a/assets/react/controllers/TransactionComponant.tsx b/assets/react/controllers/TransactionComponant.tsx
index 74c603965b19d721e078fd709c5ea6769f0a9fd6..5c47ba407842c72c6248d85969136772b2a146f5 100644
--- a/assets/react/controllers/TransactionComponant.tsx
+++ b/assets/react/controllers/TransactionComponant.tsx
@@ -7,31 +7,103 @@ export default function TransactionComponant(props: {
   description: string;
   amount: number;
   date: string;
-  isEditing: boolean;
   category: string;
+  isEditing: boolean;
 }) {
+  const [location, setLocation] = React.useState(props.location);
+  const [description, setDescription] = React.useState(props.description);
+  const [amount, setAmount] = React.useState(props.amount);
+  const [date, setDate] = React.useState(props.date);
+  const [category, setCategory] = React.useState(props.category);
+
+  const [isEditing, setIsEditing] = React.useState(props.isEditing);
+
+  const persist = () => {
+    console.log("persist");
+    setIsEditing(false);
+  };
+
   return (
     <section className="flex-column" id="container">
       <div className="flex-row item" id="">
-        {props.isEditing ? (
+        {isEditing ? (
           <>
-            <div>lolilol</div>
+            <div>
+              <label htmlFor="location"></label>
+              <input
+                type="text"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+                placeholder="location"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="description"></label>
+              <input
+                type="text"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                placeholder="description"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="category"></label>
+              <input
+                type="text"
+                value={category}
+                onChange={(e) => setCategory(e.target.value)}
+                placeholder="category"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="amount"></label>
+              <input
+                type="number"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                placeholder="amount"
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="date"></label>
+              <input type="date" value={date} 
+              onChange={(e) => setDate(e.target.value)}
+              placeholder="date" required />
+            </div>
+            <div>
+              Revenue : <input type="checkbox" />
+            </div>
+            <div>
+              <img
+                style={{ border: "1px black solid" }}
+                src="img/vert.png"
+                alt="valider"
+                onClick={() => persist()}
+              />
+            </div>
+            <div>
+              <img src="img/faux.png" alt="supprimer" href="" />
+            </div>
           </>
         ) : (
           <>
-            <div>{props.location}</div>
-            <div>{props.description}</div>
-            <div>{props.category} </div>
-            <div>{props.amount} </div>
-            <div>{props.date}</div>
+            <div>{location}</div>
+            <div>{description}</div>
+            <div>{category} </div>
+            <div>{amount} </div>
+            <div>{date}</div>
             <div>
-              <img src="img/263087.png" alt="peinceau" href="" />
+              Revenue : <input type="checkbox" disabled readOnly />
             </div>
             <div>
-              <img src="img/download.png" alt="peinceau" href="" />
+              <img src="img/263087.png" alt="peinceau" href="" />
             </div>
             <div>
-              Revenue : <input type="checkbox" />
+              <img src="img/download.png" alt="peinceau" href="" />
             </div>
           </>
         )}
diff --git a/assets/styles/menu.css b/assets/styles/menu.css
index e8b46cc4de1164348adc96d3583d797bccfb5f87..041af4f7708159b7efb37512b24152e6af0daad8 100644
--- a/assets/styles/menu.css
+++ b/assets/styles/menu.css
@@ -13,7 +13,7 @@ span {
     text-align: center;
 }
 
-img {
+#taille {
     width: 70px;
     height: 70px;
     display: block;
diff --git a/assets/styles/transaction.css b/assets/styles/transaction.css
index 4cccaa1fa95946cf698623529922a3dec8f4d651..18d55e8a41b7ed144c9cfedff9df06c2d2c64a52 100644
--- a/assets/styles/transaction.css
+++ b/assets/styles/transaction.css
@@ -15,11 +15,10 @@
         /* Replace 0 with 25% for 4/row */
         text-align: center;
     }
-    
-    .flex-row :hover {
-        border: 2px solid var(--active-color);
-        /* cursor: pointer; */
-    }
+    /* .flex-row :hover { */
+    /* border: 2px solid var(--active-color); */
+    /* cursor: pointer; */
+    /* } */
     
     .flex-column {
         display: flex;
@@ -61,4 +60,5 @@
         width: 25px;
         height: 25px;
         cursor: pointer;
+        border: "1px black solid"
     }
\ No newline at end of file
diff --git a/public/img/faux.png b/public/img/faux.png
new file mode 100644
index 0000000000000000000000000000000000000000..7bcdff7e6b3ef8437b34dab7a37feee4cb56beef
Binary files /dev/null and b/public/img/faux.png differ
diff --git a/public/img/rouge.jpeg b/public/img/rouge.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..2e68beb4a1496d483e57b1209720a6a4512f9c2d
Binary files /dev/null and b/public/img/rouge.jpeg differ
diff --git a/public/img/vert.png b/public/img/vert.png
new file mode 100644
index 0000000000000000000000000000000000000000..72337f0213d588ebd8ef2009af90982eed18ec45
Binary files /dev/null and b/public/img/vert.png differ