diff --git a/html/css/style.css b/html/css/style.css
index fa4de748bdd7fcb0dec31a47b4e8b8689f39cd41..2ae433a9fa4a95cd25cf9e63d82222b16f09d3be 100644
--- a/html/css/style.css
+++ b/html/css/style.css
@@ -90,3 +90,15 @@ body {
   padding-top: 0px;
   height: 100%;
 }
+
+.pen_name {
+  font-size: 1em;
+  display: inline-block;
+  width: 20%;
+  height: 5%
+}
+
+.pen_button {
+  width:20%;
+  height: 70px
+}
diff --git a/html/penalizations.html b/html/penalizations.html
index 14213b576237064dc4c2ac1ce7a5fa14a20cb1db..3d786bbb5128377ce960b6b881ce5c281b52f430 100644
--- a/html/penalizations.html
+++ b/html/penalizations.html
@@ -259,23 +259,75 @@
       </div>
       
       <br>
-      <span id="pen1_name">Penalization 1</span>
-      <button class="btn btn-primary" id = "penalization_button_1" style="width:20%; height: 50px" onclick = "this.blur();penalization1()">ADD</button>
-      <input type="number" id="pen1_count" min="0" max="99" step="1" style="width: 2em" value="0" >
-      <span id="pen1_description">description longer 1</span>
+      <span id="pen1_name" class="pen_name">Step line</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_1" onclick = "this.blur();penalization1()">ADD</button>
+      <input type="number" id="pen1_count" min="0" max="5" step="1" style="width: 2em" value="0" >
+      <span id="pen1_description">Cost 1. Max 5. half of the car remains inside</span>
       <br>
-      <br>
-      <span id="pen2_name">Penalization 2</span>
-      <button class="btn btn-primary" id = "penalization_button_2" style="width:20%; height: 50px" onclick = "this.blur();penalization2()">ADD</button>
+      <span id="pen2_name" class="pen_name">Step repeatedly</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_2"  onclick = "this.blur();penalization2()">ADD</button>
       <input type="number" id="pen2_count" min="0" max="99" step="1" style="width: 2em" value="0" >
-      <span id="pen2_description">desc. 2</span>
-      <br>
+      <span id="pen2_description">Cost 2</span>
       <br>
-      <span id="pen3_name">Penalization 3</span>
-      <button class="btn btn-primary" id = "penalization_button_3" style="width:20%; height: 50px" onclick = "this.blur();penalization3()">ADD</button>
+      <span id="pen3_name" class="pen_name">Out of the road</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_3"  onclick = "this.blur();penalization3()">ADD</button>
       <input type="number" id="pen3_count" min="0" max="99" step="1" style="width: 2em" value="0" >
-      <span id="pen3_description">description 3</span>
+      <span id="pen3_description">Cost 3</span>
+      <br>
+      <span id="pen4_name" class="pen_name">Drive wrong direction</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_4"  onclick = "this.blur();penalization4()">ADD</button>
+      <input type="number" id="pen4_count" min="0" max="99" step="1" style="width: 2em" value="0" >
+      <span id="pen4_description">Cost 3</span>
+      <br>
+      <span id="pen5_name" class="pen_name">Collision with obstacle</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_5"  onclick = "this.blur();penalization5()">ADD</button>
+      <input type="number" id="pen5_count" min="0" max="99" step="1" style="width: 2em" value="0" >
+      <span id="pen5_description">Cost 4</span>
+      <br>
+      <span id="pen6_name" class="pen_name">No overcoming dynamic obstacle</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_6"  onclick = "this.blur();penalization6()">ADD</button>
+      <input type="number" id="pen6_count" min="0" max="1" step="1" style="width: 2em" value="0" >
+      <span id="pen6_description">Cost 3. Max 1</span>
+      <br>
+      <span id="pen7_name" class="pen_name">Overtake not allowed</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_7"  onclick = "this.blur();penalization7()">ADD</button>
+      <input type="number" id="pen7_count" min="0" max="1" step="1" style="width: 2em" value="0" >
+      <span id="pen7_description">Cost 3. Max 1</span>
+      <br>
+      <span id="pen8_name" class="pen_name">Ignore semaphore/sign</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_8"  onclick = "this.blur();penalization8()">ADD</button>
+      <input type="number" id="pen8_count" min="0" max="99" step="1" style="width: 2em" value="0" >
+      <span id="pen8_description">Cost 2</span>
+      <br>
+      <span id="pen9_name" class="pen_name">Stop after sign/semaphore</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_9"  onclick = "this.blur();penalization9()">ADD</button>
+      <input type="number" id="pen9_count" min="0" max="99" step="1" style="width: 2em" value="0" >
+      <span id="pen9_description">Cost 1</span>
+      <br>
+      <span id="pen10_name" class="pen_name">No parking</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_10"  onclick = "this.blur();penalization10()">ADD</button>
+      <input type="number" id="pen10_count" min="0" max="99" step="1" style="width: 2em" value="0" >
+      <span id="pen10_description">Cost 3</span>
+      <br>
+      <span id="pen11_name" class="pen_name">Parking half car out</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_11"  onclick = "this.blur();penalization11()">ADD</button>
+      <input type="number" id="pen11_count" min="0" max="99" step="1" style="width: 2em" value="0" >
+      <span id="pen11_description">Cost 3</span>
+      <br>
+      <span id="pen12_name" class="pen_name">No data feedback</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_12"  onclick = "this.blur();penalization12()">ADD</button>
+      <input type="number" id="pen12_count" min="0" max="1" step="1" style="width: 2em" value="0" >
+      <span id="pen12_description">Cost 2. Max 1.</span>
+      <br>
+      <span id="pen13_name" class="pen_name">No remote start</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_13"  onclick = "this.blur();penalization13()">ADD</button>
+      <input type="number" id="pen13_count" min="0" max="1" step="1" style="width: 2em" value="0" >
+      <span id="pen13_description">Cost 1. Max 1.</span>
       <br>
+      <span id="pen14_name" class="pen_name">No use of car lights</span>
+      <button class="btn btn-primary pen_button" id = "penalization_button_14"  onclick = "this.blur();penalization14()">ADD</button>
+      <input type="number" id="pen14_count" min="0" max="1" step="1" style="width: 2em" value="0" >
+      <span id="pen14_description">Cost 2. Max 1.</span>
       <br>
       <button class="btn btn-success" id = "save_button" style="width:25%; height: 50px" onclick = "this.blur()">Save</button>
       <button class="btn btn-danger" id = "clear_button" style="width:25%; height: 50px" onclick = "this.blur()">Clear</button>