diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index bf34798b..2f8b4cda 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -86,6 +86,7 @@ main {
 .breadcrumbs {
   height: 3em;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  overflow: hidden;
 }
 
 .breadcrumbs span,
@@ -111,18 +112,50 @@ main {
 
 #progress {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 3px;
-  z-index: 9999999999;
+  top: 4.5em;
+  right:1em;
+  width: 50%;
+  height: 2em;
+  z-index: 99998;
+  background:#fff;
+  border:0.1em solid #6F6F6F;
+  border-radius: 0.5em;
 }
 
 #progress div {
   height: 100%;
-  background-color: #40c4ff;
+  background-color: #6F6F6F;
   width: 0;
   transition: .2s ease width;
+  border-radius: 0.2em 0em 0em 0.2em;
+}
+
+#progress div span {
+  position: fixed;
+  height: 100%; 
+  weight: 100%;
+  right:calc(25vw-0.25em);
+  font-size: 1.8em;
+  background: transparent;
+  color:blue;
+}
+
+@media (max-width: 736px) {
+#progress {
+  height: 1em;
+  border-radius: 0.25em;
+  border:1px solid #6F6F6F;
+}
+
+#progress div {
+  border-radius: 0.1em 0em 0em 0.1em;
+}
+
+#progress div span {
+  height: 100%; 
+  right:calc(25vw-0.2em);
+  font-size: 0.8em;
+}
 }
 
 .break-word {