diff --git a/src/api/api.py b/src/api/api.py
index 5bcae6a..c2bd89a 100644
--- a/src/api/api.py
+++ b/src/api/api.py
@@ -316,7 +316,18 @@ scheduler.start()
 # Frontend
 @app.route('/', methods=['GET'])
 def root_route():
-    return render_template('index.html', now=datetime.utcnow())
+    # Get a list of video files and thumbnails
+    video_files = [file for file in os.listdir(f'{rec_path}/vod/') if file.endswith(('.mp4', '.mkv', '.avi'))]
+    thumbnails_path = f'{rec_path}/thumb/'
+    thumbnails = [file for file in os.listdir(thumbnails_path) if file.endswith('.png')]
+    # Get the full file paths
+    thumbnail_paths = [os.path.join(thumbnails_path, file) for file in thumbnails]
+    # Sort the file paths by modification time in reverse order
+    sorted_thumbnails_paths = sorted(thumbnail_paths, key=lambda x: os.path.getmtime(x), reverse=True)
+    # Extract file names from sorted paths
+    sorted_thumbnails = [os.path.basename(file) for file in sorted_thumbnails_paths]
+    thumbnails = [file for file in os.listdir(f'{rec_path}/thumb/') if file.endswith('.png')]
+    return render_template('index.html', now=datetime.utcnow(), video_files=video_files, thumbnails=sorted_thumbnails)
 
 # API
 @app.route('/about', methods=['GET'])
@@ -378,23 +389,5 @@ def video_watch_route(file_name_no_extension):
     logger_content.warning(str(video_path) + ' player')
     return render_template('watch.html', video_file=video_file, thumb_file=thumb_file)
 
-# Gallery
-@app.route("/gallery", methods=['GET'])
-def gallery_route():
-    # Get a list of video files and thumbnails
-    video_files = [file for file in os.listdir(f'{rec_path}/vod/') if file.endswith(('.mp4', '.mkv', '.avi'))]
-    
-    thumbnails_path = f'{rec_path}/thumb/'
-    thumbnails = [file for file in os.listdir(thumbnails_path) if file.endswith('.png')]
-    # Get the full file paths 
-    thumbnail_paths = [os.path.join(thumbnails_path, file) for file in thumbnails]
-    # Sort the file paths by modification time in reverse order 
-    sorted_thumbnails_paths = sorted(thumbnail_paths, key=lambda x: os.path.getmtime(x), reverse=True) 
-    # Extract file names from sorted paths
-    sorted_thumbnails = [os.path.basename(file) for file in sorted_thumbnails_paths]
-    
-    thumbnails = [file for file in os.listdir(f'{rec_path}/thumb/') if file.endswith('.png')]
-    return render_template('gallery.html', video_files=video_files, thumbnails=sorted_thumbnails)
-
 def create_app():
    return app
diff --git a/src/api/static/css/root.css b/src/api/static/css/root.css
index b22d6f9..d99c0d5 100644
--- a/src/api/static/css/root.css
+++ b/src/api/static/css/root.css
@@ -1,5 +1,7 @@
 body {
     margin: 0;
+    padding: 0;
+
     font-family: Arial, Helvetica, sans-serif;
     background: black;
     padding-top: 50px;
@@ -34,3 +36,58 @@ a:hover {
 video {
 	width: 100%;
 }
+
+.gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+}
+
+.gallery .gallery-item {
+    overflow: hidden;
+    position: relative;
+    cursor: pointer;
+    box-sizing: border-box;
+}
+
+.gallery img {
+    width: 100%;
+    display: block;
+    -webkit-filter: grayscale(0);
+    filter: grayscale(0);
+    transition: all 100ms ease-out;
+}
+
+.gallery .gallery-item:hover img {
+    transform: scale(1.03);
+    -webkit-filter: grayscale(1);
+    filter: grayscale(1);
+}
+
+.overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.gallery .gallery-item:hover .overlay {
+    opacity: 1;
+}
+
+.overlay-content {
+    text-align: center;
+    color: #fff;
+}
+
+.image-link {
+    display: block;
+    text-decoration: none;
+    color: inherit;
+}
diff --git a/src/api/templates/gallery.html b/src/api/templates/gallery.html
deleted file mode 100644
index 4062bfc..0000000
--- a/src/api/templates/gallery.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            margin: 0;
-            padding: 0;
-            background-color: #212529;
-            color: #fff;
-        }
-        
-        .gallery {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
-        }
-        
-        .gallery .gallery-item {
-            overflow: hidden;
-            position: relative;
-            cursor: pointer;
-            box-sizing: border-box;
-        }
-        
-        .gallery img {
-            width: 100%;
-            display: block;
-	    -webkit-filter: grayscale(0);
-            filter: grayscale(0);
-            transition: all 100ms ease-out;
-        }
-        
-        .gallery .gallery-item:hover img {
-            transform: scale(1.03);
-	    -webkit-filter: grayscale(1);
-            filter: grayscale(1);
-        }
-        
-        .overlay {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            opacity: 0;
-            transition: opacity 0.3s ease;
-        }
-        
-        .gallery .gallery-item:hover .overlay {
-            opacity: 1;
-        }
-        
-        .overlay-content {
-            text-align: center;
-            color: #fff;
-        }
-        
-        .image-link {
-            display: block;
-            text-decoration: none;
-            color: inherit;
-        }             
-    </style>
-    <title>DeflaxTV Video Gallery</title>
-</head>
-<body>
-
-<div class="gallery">
-
-    {% for thumbnail in thumbnails %}
-    <div class="gallery-item">
-        <a href="{{ url_for('video_watch_route', file_name_no_extension=thumbnail[:-4]) }}" class="image-link" target="_blank">
-            <img src="{{ url_for('thumb_route', file_name=thumbnail) }}" alt="{{ thumbnail }}">
-            <div class="overlay">
-                <div class="overlay-content">
-                    <h3>Play</h3>
-                    <p>{{ thumbnail[:-4] }}</p>
-            </div>
-        </div>
-        </a>
-    </div>
-    {% endfor %}
-</div>
-
-</body>
-</html>
diff --git a/src/api/templates/index.html b/src/api/templates/index.html
index c37e1dd..441a14e 100644
--- a/src/api/templates/index.html
+++ b/src/api/templates/index.html
@@ -218,7 +218,7 @@ document.addEventListener('DOMContentLoaded', () => {
     </div>
       <div class="col-xs-12 col-md-5 d-none d-md-block">
         <div class="content">
-	  <h2>PVC playlist</h2>
+	  <h2>Records</h2>
           <iframe width="100%" height="480" src="https://www.youtube.com/embed/videoseries?si=RdMNZq4hYudlCW37&amp;list=PLVB9xwlHyW_LhxubZ9HL8wzx1mmDNBj0z" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
         </div>
       </div>
@@ -242,7 +242,21 @@ document.addEventListener('DOMContentLoaded', () => {
     <div class="col-md-10 d-none d-md-block">
       <div class="content">
         <h2>Video Archive</h2>
-        <iframe width="100%" height="700" src="https://api.deflax.net/gallery" title="Video Archive" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+	<div class="gallery">
+          {% for thumbnail in thumbnails %}
+          <div class="gallery-item">
+              <a href="{{ url_for('video_watch_route', file_name_no_extension=thumbnail[:-4]) }}" class="image-link" target="_blank">
+                  <img src="{{ url_for('thumb_route', file_name=thumbnail) }}" alt="{{ thumbnail }}">
+                  <div class="overlay">
+                    <div class="overlay-content">
+                      <h3>Play</h3>
+                      <p>{{ thumbnail[:-4] }}</p>
+                  </div>
+              </div>
+              </a>
+          </div>
+          {% endfor %}
+	</div>
       </div>
     </div>
     <div class="col-md-1 d-none d-md-block">