diff --git a/front/components/progressBar.tsx b/front/components/progressBar.tsx
index c5997df..d219c0a 100644
--- a/front/components/progressBar.tsx
+++ b/front/components/progressBar.tsx
@@ -1,20 +1,22 @@
 import React from "react";
+import { View } from "react-native";
 
 const ProgressBar = (
   props: { 
     progress: number; 
     maxValue: number; 
     barWidth: number;
+    title?: string;
   }) =>
 {
-    const { progress, maxValue, barWidth } = props;
+    const { progress, maxValue, barWidth, title } = props;
 
     const containerStyles = {
         height: 20,
         width: `${barWidth}%`,
         backgroundColor: "#e0e0de",
         borderRadius: 50,
-        margin: 50
+        margin: 20
       }
     
       function computePercent(progress: number, maxValue: number) 
@@ -36,10 +38,24 @@ const ProgressBar = (
         fontWeight: 'bold'
       }
 
+    if (title != null) {
+      // put the title in the middle TODO
+      return (
+        <div style={containerStyles}>
+          <div style={fillerStyles}>
+            <span style={labelStyles}>
+              {`${computePercent(progress, maxValue)}%`}
+            </span>
+          </div>
+        </div>
+    );
+    }
     return (
         <div style={containerStyles}>
           <div style={fillerStyles}>
-            <span style={labelStyles}>{`${computePercent(progress, maxValue)}%`}</span>
+            <span style={labelStyles}>
+              {`${computePercent(progress, maxValue)}%`}
+            </span>
           </div>
         </div>
     );