diff --git a/ai_frame_image_server.py b/ai_frame_image_server.py
index 6777f24..dba86ce 100644
--- a/ai_frame_image_server.py
+++ b/ai_frame_image_server.py
@@ -19,18 +19,21 @@ image_folder = "./output"
 @app.route("/", methods=["GET"])
 def index() -> str:
     """
-    Renders the main HTML template.
-    Args:
-        None
-    Returns:
-        str: The rendered HTML template.
+    Renders the main HTML template with image and prompt.
     """
+    image_filename = "./image.png"
+    image_path = os.path.join(image_folder, image_filename)
+
+    prompt = get_prompt_from_png(image_path)
+
     return render_template(
         "index.html",
-        image="./image.png",
+        image=image_filename,
+        prompt=prompt,
         reload_interval=user_config["frame"]["reload_interval"],
     )
     
+    
 @app.route("/images", methods=["GET"])
 def gallery() -> str:
     """
diff --git a/templates/gallery.html b/templates/gallery.html
index cc65b42..3b53616 100644
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -5,17 +5,37 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Image Archive</title>
     <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            background-color: black;
+            color: white;
+            font-family: sans-serif;
+            padding: 2rem;
+        }
+        h1 {
+            text-align: center;
+            margin-bottom: 2rem;
+        }
         .gallery {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
-            gap: 10px;
+            gap: 20px;
         }
         .gallery img {
             width: 100%;
             height: auto;
-            border-radius: 5px;
+            border-radius: 10px;
             cursor: pointer;
+            transition: transform 0.2s ease;
         }
+        .gallery img:hover {
+            transform: scale(1.02);
+        }
+
         /* Lightbox styles */
         .lightbox {
             display: none;
@@ -24,15 +44,16 @@
             left: 0;
             width: 100%;
             height: 100%;
-            background: rgba(0, 0, 0, 0.8);
+            background: rgba(0, 0, 0, 0.9);
             justify-content: center;
             align-items: center;
             flex-direction: column;
+            z-index: 999;
         }
         .lightbox img {
             max-width: 90%;
-            max-height: 90%;
-            border-radius: 5px;
+            max-height: 80%;
+            border-radius: 10px;
         }
         .lightbox .close {
             position: absolute;
@@ -84,11 +105,10 @@
         <span class="close" onclick="closeLightbox()">&times;</span>
         <span class="arrow left" onclick="prevImage()">&#10094;</span>
         <img id="lightbox-img" src="">
-        <p id="lightbox-prompt"></p> <!-- 👈 Add this line -->
+        <p id="lightbox-prompt"></p>
         <span class="arrow right" onclick="nextImage()">&#10095;</span>
     </div>
 
-
     <script>
         let images = [
             {% for image in images %}
@@ -106,22 +126,20 @@
             document.getElementById("lightbox-prompt").textContent = images[currentIndex].prompt;
             document.getElementById("lightbox").style.display = "flex";
         }
-        
 
         function closeLightbox() {
             document.getElementById("lightbox").style.display = "none";
         }
-        
+
         function nextImage() {
             currentIndex = (currentIndex + 1) % images.length;
             openLightbox(currentIndex);
         }
-        
+
         function prevImage() {
             currentIndex = (currentIndex - 1 + images.length) % images.length;
             openLightbox(currentIndex);
         }
-        
     </script>
 </body>
 </html>
diff --git a/templates/index.html b/templates/index.html
index 478ae6d..2af5bcb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>AI Image of the day</title>
+    <title>AI Image of the Day</title>
     <style>
         * {
             margin: 0;
@@ -12,28 +12,57 @@
         }
         body {
             display: flex;
+            flex-direction: column;
             align-items: center;
             justify-content: center;
             height: 100vh;
             background: black;
+            color: white;
+            font-family: Arial, sans-serif;
+        }
+        .image-container {
+            max-width: 90vw;
+            max-height: 80vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 20px;
         }
         img {
-            width: 100vw;
-            height: 100vh;
+            max-width: 100%;
+            max-height: 100%;
             object-fit: contain;
+            border-radius: 20px;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
+        }
+        .prompt {
+            color: #ccc;
+            font-family: monospace;
+            white-space: pre-wrap;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 15px 20px;
+            border-radius: 10px;
+            max-width: 80vw;
+            text-align: left;
         }
     </style>
     <script>
         setInterval(() => {
             location.reload();
-        }, {{ reload_interval }});  // Refresh every 5 seconds
+        }, {{ reload_interval }});  // Refresh every X ms
     </script>
 </head>
 <body>
     {% if image %}
-        <img src="{{ url_for('images', filename=image) }}" alt="Latest Image">
+        <div class="image-container">
+            <img src="{{ url_for('images', filename=image) }}" alt="Latest Image">
+        </div>
+        {% if prompt %}
+            <div class="prompt">{{ prompt }}</div>
+            <a href="/images" id="archive-link">Archive</a>
+        {% endif %}
     {% else %}
-        <p style="color: white;">No images found</p>
+        <p>No images found</p>
     {% endif %}
 </body>
 </html>
