diff --git a/assets/styles/but.css b/assets/styles/but.css
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..16ba4360baf98c514c646e3837d436ae74780849 100644
--- a/assets/styles/but.css
+++ b/assets/styles/but.css
@@ -0,0 +1,39 @@
+span {
+    font-size: 20px;
+    text-align: center;
+}
+
+.flex-row {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    align-items: center;
+    padding: 0 10px 0 10px;
+    margin-bottom: 2px;
+    text-decoration: none;
+    color: black;
+    flex-wrap: wrap;
+}
+
+.flex-row div {
+    flex: 1 1 25%;
+    /* Replace 0 with 25% for 4/row */
+    /* text-align: center; */
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+}
+
+#container {
+    padding: 10px;
+    border: 3px solid;
+    border-color: black;
+    border-radius: 5px;
+}
+
+h1 {
+    text-align: center;
+    font-size: 30px;
+}
\ No newline at end of file
diff --git a/assets/styles/transaction.css b/assets/styles/transaction.css
index 078df5d3942f4bc20717fb99a66651d52ce58549..27f64df522a92a2f9f521ffabd97390b4e9464e6 100644
--- a/assets/styles/transaction.css
+++ b/assets/styles/transaction.css
@@ -39,26 +39,6 @@
         justify-content: space-between;
     }
     
-    .location {
-        color: blue;
-    }
-    
-    .description {
-        color: red;
-    }
-    
-    .amount {
-        color: green;
-    }
-    
-    .date {
-        color: purple;
-    }
-    
-    .category {
-        color: orange;
-    }
-
     .icone {
         cursor: pointer;
         border: 1px black solid;
diff --git a/public/img/voiture.jpg b/public/img/voiture.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..00c8c2ab10d3fc7e32c1a7017fefc037fe5db195
Binary files /dev/null and b/public/img/voiture.jpg differ
diff --git a/templates/but.html.twig b/templates/but.html.twig
index 1c1c97772d0e5902131d90b9dc6ba7ed6d064060..450da88283017108fbe70c7ae1f7b43a0dab231e 100644
--- a/templates/but.html.twig
+++ b/templates/but.html.twig
@@ -8,15 +8,31 @@
 
 {% block stylesheets %}
 	{{ parent() }}
-	
+
 {% endblock %}
 
 {% block body %}
 	<div class="wrapper">
 		<div {{ react_component( 'Menu', {active: 'but'} )}}></div>
 	</div>
-    <div style="display: flex;justify-grow: 1;flex-direction: column;margin-left: 225px; ">
+	<div style="display: flex; justify-grow: 1; flex-direction: column; margin-left: 225px;  ">
 		<h1>But</h1>
-	</div>
+		<div>
+			<span>Je souhaite vraiment acheter cette voiture :
+			</span>
+		</div>
+		<div>
+			<img src="./img/voiture.jpg"/>
+		</div>
 
+		<div>
+			<span>Elle coute : 463 775 $
+			</span>
+		</div>
+		<div>
+			<span>Je pourrais donc l'acheter dans : 123 annees !
+			</span>
+		</div>
+
+	</div>
 {% endblock %}