diff --git a/app/src/App.css b/app/src/App.css
index 00b4b5ae..e67c5e3a 100644
--- a/app/src/App.css
+++ b/app/src/App.css
@@ -245,3 +245,8 @@ textarea.otp {
 .divider.inverted {
     color: rgb(255, 255, 255, 0.6) !important;
 }
+
+.video-player {
+    display: block;
+    margin: 0 auto; /* Center the video horizontally */
+}
diff --git a/app/src/components/VideoPlayer.js b/app/src/components/VideoPlayer.js
index 78a601de..6c2d14ca 100644
--- a/app/src/components/VideoPlayer.js
+++ b/app/src/components/VideoPlayer.js
@@ -350,6 +350,7 @@ function VideoPage({videoFile, prevFile, nextFile, fetchVideo, ...props}) {
         </Container>
 
         <video controls
+               class='video-player'
                autoPlay={props.autoplay !== undefined ? props.autoplay : true}
                poster={posterUrl}
                id="player"