diff --git a/instance/dashboard.db b/instance/dashboard.db
index 6a3fe75..3c4e49b 100644
Binary files a/instance/dashboard.db and b/instance/dashboard.db differ
diff --git a/static/uploads/Ibex_450.jpg b/static/uploads/Ibex_450.jpg
new file mode 100644
index 0000000..5f3b4b8
Binary files /dev/null and b/static/uploads/Ibex_450.jpg differ
diff --git a/static/uploads/big_buck_bunny_720p_1mb.mp4 b/static/uploads/big_buck_bunny_720p_1mb.mp4
new file mode 100644
index 0000000..ed139d6
Binary files /dev/null and b/static/uploads/big_buck_bunny_720p_1mb.mp4 differ
diff --git a/templates/group_fullscreen.html b/templates/group_fullscreen.html
index 9b82c27..732def5 100644
--- a/templates/group_fullscreen.html
+++ b/templates/group_fullscreen.html
@@ -11,12 +11,12 @@
             align-items: center;
             background-color: black;
         }
-        img {
+        img, video {
             max-width: 100%;
             max-height: 100%;
             display: none;
         }
-        img.active {
+        .active {
             display: block;
         }
     </style>
@@ -24,26 +24,43 @@
 <body>
     <div id="content">
         {% for item in content %}
-            <img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" alt="Content Image" data-duration="{{ item.duration }}">
+            {% if item.file_name.endswith('.mp4') %}
+                <video class="content-item" data-duration="{{ item.duration }}" controls>
+                    <source src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            {% else %}
+                <img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" alt="Content Image" class="content-item" data-duration="{{ item.duration }}">
+            {% endif %}
         {% endfor %}
     </div>
     <script>
-        const images = document.querySelectorAll('#content img');
-        let index = 0;
+        document.addEventListener('DOMContentLoaded', function() {
+            const items = document.querySelectorAll('.content-item');
+            let currentIndex = 0;
 
-        function showNextImage() {
-            images.forEach((img, i) => {
-                img.classList.toggle('active', i === index);
-            });
-            const duration = images[index].getAttribute('data-duration') * 1000;
-            index = (index + 1) % images.length;
-            setTimeout(showNextImage, duration);
-        }
+            function showNextItem() {
+                items.forEach(item => item.classList.remove('active'));
+                const currentItem = items[currentIndex];
+                currentItem.classList.add('active');
 
-        if (images.length > 0) {
-            images[0].classList.add('active');
-            showNextImage();
-        }
+                const duration = parseInt(currentItem.getAttribute('data-duration'), 10) * 1000;
+                if (currentItem.tagName === 'VIDEO') {
+                    currentItem.play();
+                    currentItem.onended = () => {
+                        currentIndex = (currentIndex + 1) % items.length;
+                        showNextItem();
+                    };
+                } else {
+                    setTimeout(() => {
+                        currentIndex = (currentIndex + 1) % items.length;
+                        showNextItem();
+                    }, duration);
+                }
+            }
+
+            showNextItem();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/player_fullscreen.html b/templates/player_fullscreen.html
index 7aa2f0b..ea843ee 100644
--- a/templates/player_fullscreen.html
+++ b/templates/player_fullscreen.html
@@ -11,12 +11,12 @@
             align-items: center;
             background-color: black;
         }
-        img {
+        img, video {
             max-width: 100%;
             max-height: 100%;
             display: none;
         }
-        img.active {
+        .active {
             display: block;
         }
     </style>
@@ -24,26 +24,43 @@
 <body>
     <div id="content">
         {% for item in content %}
-            <img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" alt="Content Image" data-duration="{{ item.duration }}">
+            {% if item.file_name.endswith('.mp4') %}
+                <video class="content-item" data-duration="{{ item.duration }}" controls>
+                    <source src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            {% else %}
+                <img src="{{ url_for('static', filename='uploads/' ~ item.file_name) }}" alt="Content Image" class="content-item" data-duration="{{ item.duration }}">
+            {% endif %}
         {% endfor %}
     </div>
     <script>
-        const images = document.querySelectorAll('#content img');
-        let index = 0;
+        document.addEventListener('DOMContentLoaded', function() {
+            const items = document.querySelectorAll('.content-item');
+            let currentIndex = 0;
 
-        function showNextImage() {
-            images.forEach((img, i) => {
-                img.classList.toggle('active', i === index);
-            });
-            const duration = images[index].getAttribute('data-duration') * 1000;
-            index = (index + 1) % images.length;
-            setTimeout(showNextImage, duration);
-        }
+            function showNextItem() {
+                items.forEach(item => item.classList.remove('active'));
+                const currentItem = items[currentIndex];
+                currentItem.classList.add('active');
 
-        if (images.length > 0) {
-            images[0].classList.add('active');
-            showNextImage();
-        }
+                const duration = parseInt(currentItem.getAttribute('data-duration'), 10) * 1000;
+                if (currentItem.tagName === 'VIDEO') {
+                    currentItem.play();
+                    currentItem.onended = () => {
+                        currentIndex = (currentIndex + 1) % items.length;
+                        showNextItem();
+                    };
+                } else {
+                    setTimeout(() => {
+                        currentIndex = (currentIndex + 1) % items.length;
+                        showNextItem();
+                    }, duration);
+                }
+            }
+
+            showNextItem();
+        });
     </script>
 </body>
 </html>
\ No newline at end of file
