diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 254fae8..2a1e19e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -9,7 +9,9 @@
     <div class="detail-content">
         <div class="detail-top">
             {{ if .Params.image }}
-                <div class="detail-image" style="background-image: url('{{ .Params.image }}');"></div>
+                <div class="detail-image-container">
+                    <img src="{{ .Params.image }}" alt="{{ .Title }}" class="detail-image">
+                </div>
             {{ else }}
                 <div class="detail-image-placeholder" style="background-color:{{ if eq .Params.category "Books" }}#004d40{{ else if eq .Params.category "Movies" }}#01579b{{ else if eq .Params.category "TV Series" }}#4a148c{{ else if eq .Params.category "Recipes" }}#b71c1c{{ else if eq .Params.category "YouTube" }}#f44336{{ else }}#546e7a{{ end }}">
                     <div class="placeholder-initial">{{ substr .Title 0 1 }}</div>
@@ -103,23 +105,43 @@
         flex-direction: row;
     }
 }
-.detail-image, .detail-image-placeholder {
-    height: 300px;
+.detail-image-container {
     width: 100%;
-    background-size: cover;
-    background-position: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+    background: #f5f5f5;
+    border-radius: 8px 8px 0 0;
+    overflow: hidden;
 }
-@media (min-width: 768px) {
-    .detail-image, .detail-image-placeholder {
-        width: 40%;
-        height: auto;
-    }
+.detail-image {
+    max-width: 100%;
+    max-height: 400px;
+    object-fit: contain;
+    border-radius: 4px;
+    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
 }
 .detail-image-placeholder {
+    height: 300px;
+    width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
+    border-radius: 8px 8px 0 0;
+}
+@media (min-width: 768px) {
+    .detail-image-container {
+        padding: 40px;
+    }
+    .detail-image {
+        max-height: 500px;
+    }
+    .detail-image-placeholder {
+        width: 40%;
+        height: 350px;
+    }
 }
 .placeholder-initial {
     font-size: 5rem;