diff --git a/templates/default/assets/css/post.css b/templates/default/assets/css/post.css
index 34edbde..f222ff8 100644
--- a/templates/default/assets/css/post.css
+++ b/templates/default/assets/css/post.css
@@ -139,4 +139,22 @@ tr, th, td {
 #toc-box .li-6 {
     font-size: 11px;
     padding-left: 50px;
+}
+
+.image-preview-wrap {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    background: rgba(0, 0, 0, 0.7);
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+
+.image-preview-img {
+    max-width: 90%;
+    max-height: 90%;
 }
\ No newline at end of file
diff --git a/templates/default/assets/js/post.js b/templates/default/assets/js/post.js
index 301eedc..a7813f4 100644
--- a/templates/default/assets/js/post.js
+++ b/templates/default/assets/js/post.js
@@ -52,4 +52,24 @@ function backToTop() {
         top: 0,
         behavior: 'smooth'
     })
-}
\ No newline at end of file
+}
+
+// image preview
+const contentImages = document.querySelectorAll("#post-content img");
+contentImages.forEach((img) => {
+    img.style.cursor = "pointer";
+    img.addEventListener("click", () => {
+        openPreview(img);
+    })
+});
+
+function openPreview(img) {
+    const src = img.getAttribute("src");
+
+    document.getElementById("image-preview-img").setAttribute("src", src);
+    document.getElementById("image-preview-wrap").style.display = "flex";
+}
+
+function closePreview() {
+    document.getElementById("image-preview-wrap").style.display = "none";
+}
diff --git a/templates/default/html/post.html b/templates/default/html/post.html
index cf0a7fb..86b3567 100644
--- a/templates/default/html/post.html
+++ b/templates/default/html/post.html
@@ -100,6 +100,11 @@
                 {{ .post.content }}
             </div>
         </div>
+
+        <!-- image preview -->
+        <div class="image-preview-wrap" id="image-preview-wrap" onclick="closePreview()">
+            <img class="image-preview-img" id="image-preview-img" src="">
+        </div>
     </div>
     {{ end }}