diff --git a/assets/css/default.css b/assets/css/default.css
index 9788e9f71..98c688871 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -5,6 +5,17 @@ body {
     Arial, sans-serif;
 }
 
+.length-watch-page{
+  position: relative;
+  background-color: rgba(35, 35, 35, 0.75);
+  color: #fff;
+  border-radius: 2px;
+  padding: 4px;
+  font-size: 20px;
+  right: 0.25em;
+  bottom: 0.25em;
+}
+
 #contents {
   display: flex;
   flex-direction: column;
diff --git a/src/invidious/views/watch.ecr b/src/invidious/views/watch.ecr
index 666eb3b0b..5822b0352 100644
--- a/src/invidious/views/watch.ecr
+++ b/src/invidious/views/watch.ecr
@@ -85,7 +85,15 @@ we're going to need to do it here in order to allow for translations.
                 <i class="icon ion-md-headset"></i>
             </a>
         <% end %>
+        <span class="length-watch-page"> 
+            <% if (video.length_seconds // 60) < 60 %>
+                <%= video.length_seconds // 60 %> min 
+            <% else %>
+                <%= video.length_seconds // 3600 %> hr <%= (video.length_seconds % 3600) // 60 %> min 
+            <% end %>
+        </span>
     </h1>
+    
 
     <% if !video.is_listed %>
         <h3>