diff --git a/index.html b/index.html
index 2acd896..f08c7ee 100644
--- a/index.html
+++ b/index.html
@@ -77,6 +77,10 @@
             integrity="sha384-HqC294x+jARmk/wUrzXlnRpiZrmiHJ4BIKph0mrcMJ/cLuMkNDHY0IjbDanCNhcU"
             crossorigin="anonymous"></script>
 
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.31/dist/fancybox.css">
+    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0.31/dist/fancybox.umd.js"
+            integrity="sha384-mfITPNdkUxVtTV4zhg4SDrxOL/aZBoz/p9adHFmaCoLDa43yghU46m5oEkJzLsav"
+            crossorigin="anonymous"></script>
 
     <!-- Explorer App Style -->
     <style>
@@ -235,6 +239,12 @@
                 display: none !important;
             }
         }
+
+        /* Styles for Fancybox */
+        .fancybox__container {
+            z-index: 9999;
+        }
+
     </style>
 </head>
 
@@ -378,14 +388,12 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
 
                         <div class="name-column-buttons">
                             <template v-if="props.row.type === 'content'">
-                                <!-- Markdown Preview Button -->
-                                <b-button v-if="props.row.name.endsWith('.md')"
+                                <!-- Preview Button -->
+                                <b-button v-if="isPreviewSupported(props.row.url)"
                                           tag="a" type="is-text"
+                                          icon-pack="far"
                                           icon-left="image" size="is-medium"
-                                          :href="`#${pathPrefix.replace(/[^/]*$/, '') + props.row.name}?preview=markdown`"
-                                          target="_blank"
-
-                                ></b-button>
+                                          @click="showPreview(props.row.url)"></b-button>
 
                                 <!-- Install Button -->
                                 <b-button v-if="props.row.installUrl"
@@ -493,6 +501,8 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
 
 <!-- Preview App -->
 <div id="preview" style="display: none;">
+
+    <!-- Markdown container   -->
     <zero-md id="preview-markdown" src="#">
         <template>
             <!-- Sensible host style defaults -->
@@ -534,8 +544,17 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
             <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css"/>
         </template>
     </zero-md>
+
+    <!-- Gallery container -->
+    <div id="gallery" style="display: none;">
+        <a v-for="(image, index) in previewImages" :key="index" data-fancybox="gallery" :href="image.url"
+           :data-caption="image.caption">
+            <img :src="image.url" alt="Image" style="display: none;">
+        </a>
+    </div>
 </div>
 
+
 <!-- GitHub Corner -->
 <a href="https://github.com/qoomon/aws-s3-bucket-browser" class="github-corner" aria-label="View source on GitHub">
     <svg width="80" height="80" viewBox="0 0 250 250"
@@ -699,22 +718,18 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
     const initialHashValueParams = new URLSearchParams(initialHashValue.replace(/^.*?(\?|$)/, ''))
     // preview mode
     if (initialHashValueParams.get('preview')) {
-        document.getElementById('app').remove()
-        document.getElementById('preview').style.display = 'block'
-
         const filePath = initialHashValue.replace(/\?.*$/, '')
         const fileUrl = urlFromFilePath(filePath)
 
         const previewFormat = initialHashValueParams.get('preview')
-        const previewElement = document.querySelector(`#preview > #preview-${previewFormat}`);
-        ;// remove all other preview elements
-        [...document.querySelectorAll('#preview > *')]
-            .filter(element => element.id !== previewElement?.id)
-            .forEach(element => element.remove())
-        // set source of preview element
+
         switch (previewFormat) {
             case 'markdown':
-                previewElement.src = fileUrl
+                document.getElementById('preview').style.display = 'block'
+                document.querySelector(`#preview-markdown`).src = fileUrl
+                break
+            case 'images':
+                app.showImagePreview(fileUrl)
                 break
             default:
                 alert(`Unsupported preview for ${previewFormat} files!`)
@@ -729,6 +744,10 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
         document.getElementById('preview').remove()
         document.getElementById('app').style.display = 'block'
 
+        function matchFileEnding(fileUrl, endings) {
+            return endings.some(ending => fileUrl.toLowerCase().endsWith(ending.toLowerCase()))
+        }
+
         const app = Vue.createApp({
             data() {
                 return {
@@ -743,6 +762,9 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
 
                     windowWidth: window.innerWidth,
 
+                    supportedImagePreviewFormats: ['jpg', 'jpeg', 'png'],
+                    supportedMarkdownPreviewFormats: ['md'],
+
                     downloadAllFilesCount: null,
                     downloadAllFilesReceivedCount: null,
                     downloadAllFilesProgress: null,
@@ -809,9 +831,75 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
                         this.refresh()
                     }
                 },
+                isPreviewSupported(fileUrl) {
+                    return matchFileEnding(fileUrl, this.supportedImagePreviewFormats) ||
+                        matchFileEnding(fileUrl, this.supportedMarkdownPreviewFormats)
+                },
+                showPreview(fileUrl) {
+                    if (matchFileEnding(fileUrl, this.supportedImagePreviewFormats)) {
+                        this.showImagePreview(fileUrl)
+                    } else if (matchFileEnding(fileUrl, this.supportedMarkdownPreviewFormats)) {
+                        this.showMarkdownPreview(fileUrl)
+                    }
+                },
+                showImagePreview(url) {
+                    if (Fancybox.getInstance()) {
+                        Fancybox.close();
+                    }
+                    this.previewImages = this.pathContentTableData
+                        .filter(item => this.supportedImagePreviewFormats.some(format => item.url?.toLowerCase().endsWith(format)))
+                        .map(item => ({
+                            url: item.url,
+                            caption: item.name
+                        }));
+
+                    console.log("Preview images:", this.previewImages);
+
+                    this.$nextTick(() => {
+                        Fancybox.show(this.previewImages.map(image => ({
+                            src: image.url,
+                            caption: image.caption,
+                            preload: false
+                        })), {
+                            on: {
+                                "Carousel.ready": (fancybox) => {
+                                    const index = fancybox.carousel.slides.findIndex(slide => slide.src === url);
+                                    if (index !== -1) {
+                                        fancybox.carousel.slideTo(index);
+                                    }
+                                }
+                            },
+                            Thumbs: {
+                                type: "classic"
+                            },
+                            Carousel: {
+                                infinite: false,
+                            },
+                            Toolbar: {
+                                display: {
+                                    left: ["infobar"],
+                                    middle: [
+                                        "zoomIn",
+                                        "zoomOut",
+                                        "toggle1to1",
+                                        "rotateCCW",
+                                        "rotateCW",
+                                        "flipX",
+                                        "flipY"
+                                    ],
+                                    right: ["slideshow", "download", "thumbs", "close"]
+                                }
+                            }
+                        });
+                    });
+                },
+                showMarkdownPreview(url) {
+                    window.open(
+                        `#${url.replace(config.bucketUrl, '').replace(/^\//, '')}?preview=markdown`,
+                        '_blank'
+                    ).focus()
+                },
                 async downloadAllFiles() {
-
-
                     const archiveFiles = this.pathContentTableData
                         .filter(item => item.type === 'content')
                         .map(item => item.url);
@@ -823,8 +911,8 @@ <h2 class="subtitle" v-html="config.subtitleHTML"></h2>
                     let totalContentLength = 0;
                     let totalReceivedLength = 0;
 
-                    const archiveName = this.pathPrefix.split('/')
-                        .filter(part => part.trim()).pop();
+                    const archiveName = decodeURIComponent(this.pathPrefix.split('/')
+                        .filter(part => part.trim()).pop());
                     console.debug(`create archive for ${archiveName}...`)
                     const archiveData = []
                     const archive = new fflate.Zip((err, data, final) => {