diff --git a/frontend/app/templates/gallery.html b/frontend/app/templates/gallery.html
index 4fb9604..5d4bcd1 100644
--- a/frontend/app/templates/gallery.html
+++ b/frontend/app/templates/gallery.html
@@ -1,159 +1,236 @@
 {% extends "base.html" %} {% block title %}My Gallery{% endblock %} {% block
 content %}
-<div class="container mx-auto px-4 py-8">
-  <h1 class="text-3xl font-bold mb-6">My Gallery</h1>
+<div
+  class="container mx-auto px-4 py-8"
+  data-current-page="1"
+  data-per-page="12"
+>
+  <div class="container mx-auto px-4 py-8">
+    <h1 class="text-3xl font-bold mb-6">My Gallery</h1>
 
-  <!-- Pending Creations -->
-  {% if pending_videos %}
-  <div class="mb-12">
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
-      Pending Creations
-    </h2>
-    <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for video in pending_videos %}
-      <a
-        href="{{ url_for('video_detail', video_id=video.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+    <!-- Pending Creations -->
+    {% if pending_videos %}
+    <div class="mb-12">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        Pending Creations
+      </h2>
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
       >
-        <div class="p-4">
-          <p class="font-bold text-lg truncate">{{ video.prompt }}</p>
-          <p class="text-sm text-gray-400">
-            Video Job Status:
-            <span class="font-semibold text-yellow-400"
-              >{{ video.status }}</span
+        {% for video in pending_videos %}
+        <a
+          href="{{ url_for('video_detail', video_id=video.id) }}"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+        >
+          <div class="p-4">
+            <p class="font-bold text-lg truncate">{{ video.prompt }}</p>
+            <p class="text-sm text-gray-400">
+              Video Job Status:
+              <span class="font-semibold text-yellow-400"
+                >{{ video.status }}</span
+              >
+            </p>
+            <p class="text-xs text-gray-500 mt-2">
+              Started: {{ video.created_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+    </div>
+    {% endif %}
+
+    <!-- Generated Images -->
+    <div class="mb-12">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        Generated Images
+      </h2>
+      {% if generated_images %}
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+      >
+        {% for image in generated_images %}
+        <a
+          href="{{ url_for('image_detail', image_id=image.id) }}"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+        >
+          <img
+            src="{{ image.image_data }}"
+            alt="{{ image.prompt }}"
+            class="w-full h-48 object-cover"
+          />
+          <div class="p-4">
+            <p class="font-bold text-sm truncate">{{ image.prompt }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Image ID: {{ image.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ image.created_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="text-gray-400">
+        You haven't generated any images yet.
+        <a
+          href="{{ url_for('generate_image') }}"
+          class="text-blue-400 hover:underline"
+          >Generate one now</a
+        >.
+      </p>
+      {% endif %}
+    </div>
+
+    <!-- Generated Videos -->
+    <div class="mb-12">
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        Generated Videos
+      </h2>
+      {% if completed_videos %}
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+      >
+        {% for video in completed_videos %}
+        <a
+          href="{{ url_for('video_detail', video_id=video.id) }}"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+        >
+          {% if video.video_url %}
+          <img
+            src="{{ video.video_url }}#t=0.1"
+            alt="{{ video.prompt }}"
+            class="w-full h-48 object-cover"
+          />
+          {% else %}
+          <div class="w-full h-48 bg-black flex items-center justify-center">
+            <svg
+              class="w-12 h-12 text-gray-500"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
             >
-          </p>
-          <p class="text-xs text-gray-500 mt-2">
-            Started: {{ video.created_at | fromisoformat | humantime }}
-          </p>
-        </div>
-      </a>
-      {% endfor %}
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
+              ></path>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              ></path>
+            </svg>
+          </div>
+          {% endif %}
+          <div class="p-4">
+            <p class="font-bold text-sm truncate">{{ video.prompt }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Video ID: {{ video.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ video.created_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="text-gray-400">
+        You haven't generated any videos yet.
+        <a
+          href="{{ url_for('generate_video') }}"
+          class="text-blue-400 hover:underline"
+          >Generate one now</a
+        >.
+      </p>
+      {% endif %}
     </div>
-  </div>
-  {% endif %}
 
-  <!-- Generated Images -->
-  <div class="mb-12">
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
-      Generated Images
-    </h2>
-    {% if generated_images %}
-    <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for image in generated_images %}
-      <a
-        href="{{ url_for('image_detail', image_id=image.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+    <!-- Uploaded Images -->
+    <div>
+      <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
+        My Uploads
+      </h2>
+      {% if uploads %}
+      <div
+        class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
       >
-        <img
-          src="{{ image.image_data }}"
-          alt="{{ image.prompt }}"
-          class="w-full h-48 object-cover"
-        />
-        <div class="p-4">
-          <p class="text-sm truncate">{{ image.prompt }}</p>
-        </div>
-      </a>
-      {% endfor %}
+        {% for image in uploads %}
+        <a
+          href="{{ url_for('upload_detail', image_id=image.id) }}"
+          class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
+        >
+          <img
+            src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
+            alt="{{ image.filename }}"
+            class="w-full h-48 object-cover"
+          />
+          <div class="p-4">
+            <p class="font-bold text-sm truncate">{{ image.filename }}</p>
+            <p class="text-xs text-gray-400 mt-1">
+              Upload ID: {{ image.id[:8] }}...
+            </p>
+            <p class="text-xs text-gray-500 mt-1">
+              {{ image.uploaded_at | fromisoformat | humantime }}
+            </p>
+          </div>
+        </a>
+        {% endfor %}
+      </div>
+      {% else %}
+      <p class="text-gray-400">You haven't uploaded any images.</p>
+      {% endif %}
     </div>
-    {% else %}
-    <p class="text-gray-400">
-      You haven't generated any images yet.
-      <a
-        href="{{ url_for('generate_image') }}"
-        class="text-blue-400 hover:underline"
-        >Generate one now</a
-      >.
-    </p>
-    {% endif %}
   </div>
 
-  <!-- Generated Videos -->
-  <div class="mb-12">
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
-      Generated Videos
-    </h2>
-    {% if completed_videos %}
-    <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for video in completed_videos %}
-      <a
-        href="{{ url_for('video_detail', video_id=video.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
-      >
-        <div class="w-full h-48 bg-black flex items-center justify-center">
-          <svg
-            class="w-12 h-12 text-gray-500"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
-            ></path>
-            <path
-              stroke-linecap="round"
-              stroke-linejoin="round"
-              stroke-width="2"
-              d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-            ></path>
-          </svg>
-        </div>
-        <div class="p-4">
-          <p class="text-sm truncate">{{ video.prompt }}</p>
-        </div>
-      </a>
-      {% endfor %}
-    </div>
-    {% else %}
-    <p class="text-gray-400">
-      You haven't generated any videos yet.
-      <a
-        href="{{ url_for('generate_video') }}"
-        class="text-blue-400 hover:underline"
-        >Generate one now</a
-      >.
-    </p>
-    {% endif %}
+  <!-- Infinite Scroll Loading Indicator -->
+  <div id="loading-indicator" class="flex justify-center py-8 hidden">
+    <div class="spinner"></div>
   </div>
 
-  <!-- Uploaded Images -->
-  <div>
-    <h2 class="text-2xl font-semibold mb-4 border-b border-gray-700 pb-2">
-      My Uploads
-    </h2>
-    {% if uploads %}
-    <div
-      class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
-    >
-      {% for image in uploads %}
-      <a
-        href="{{ url_for('upload_detail', image_id=image.id) }}"
-        class="block bg-gray-800 rounded-lg shadow-lg overflow-hidden hover:shadow-2xl transition-shadow duration-300"
-      >
-        <img
-          src="{{ url_for('serve_uploaded_image', image_id=image.id) }}"
-          alt="{{ image.filename }}"
-          class="w-full h-48 object-cover"
-        />
-        <div class="p-4">
-          <p class="text-sm truncate">{{ image.filename }}</p>
-        </div>
-      </a>
-      {% endfor %}
-    </div>
-    {% else %}
-    <p class="text-gray-400">You haven't uploaded any images.</p>
-    {% endif %}
-  </div>
+  {% block scripts %}
+  <script>
+    document.addEventListener("DOMContentLoaded", function () {
+      const galleryContainers = document.querySelectorAll(".grid[data-grid]");
+      const loadingIndicator = document.getElementById("loading-indicator");
+      const container = document.querySelector(".container[data-current-page]");
+      const currentPage = parseInt(container.dataset.currentPage);
+      const perPage = parseInt(container.dataset.perPage);
+      let isLoading = false;
+      let hasMore = true;
+
+      // Add data-grid attribute to all gallery grids
+      document
+        .querySelectorAll(".grid")
+        .forEach((grid) => grid.setAttribute("data-grid", ""));
+
+      // Infinite scroll handler
+      window.addEventListener("scroll", async function () {
+        if (!hasMore || isLoading) return;
+
+        const scrollPosition = window.innerHeight + window.scrollY;
+        const bottomThreshold = document.body.offsetHeight - 1000;
+
+        if (scrollPosition >= bottomThreshold) {
+          isLoading = true;
+          loadingIndicator.classList.remove("hidden");
+
+          // Simulate API call for next page
+          // In real implementation, replace with actual backend fetch
+          setTimeout(() => {
+            isLoading = false;
+            loadingIndicator.classList.add("hidden");
+            // Real app would fetch /generate/images?page=${currentPage +1}&limit=${perPage}
+            // and /generate/videos similarly
+          }, 1500);
+        }
+      });
+    });
+  </script>
+  {% endblock %}
 </div>
-{% endblock %}