diff --git a/database/migrations/2021_01_19_224339_image_details.php b/database/migrations/2021_01_19_224339_image_details.php
index d65203a..1d8a6e2 100644
--- a/database/migrations/2021_01_19_224339_image_details.php
+++ b/database/migrations/2021_01_19_224339_image_details.php
@@ -18,7 +18,7 @@ class ImageDetails extends Migration
             $table->dateTime("DateTimeOriginal")->nullable()->default(null);
             $table->integer("rating")->default(100);
             $table->string("name")->nullable()->default(null);
-            $table->string("description")->nullable()->default(null);
+            $table->mediumText("description")->nullable()->default(null);
         });
     }
 
diff --git a/resources/views/themes/gallery/gallery-detail/list.blade.php b/resources/views/themes/gallery/gallery-detail/list.blade.php
index 3ebc7c9..c185a56 100644
--- a/resources/views/themes/gallery/gallery-detail/list.blade.php
+++ b/resources/views/themes/gallery/gallery-detail/list.blade.php
@@ -1,22 +1,36 @@
 @extends('layout/template')
 
 @section('content')
-    <div class="row" style="background-color: #607c89;min-height: calc(100vh - 200px);padding-top:20px;">
+    <div class="row" style="background-color: #607c89;min-height: calc(100vh - 300px);padding-top:20px;">
         <div class="col-md-12" style="text-align: center;">
             <div>
                 <div class="fotorama" data-nav="thumbs" data-keyboard="true" data-ratio="800/600" data-width="1200" data-maxheight="80%" data-allowfullscreen="true">
                     @foreach($images as $image)
-                        <a href="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=big"><img src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=pixel"></a>
+                        <a href="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=big" data-description="{{ $image->description }}" data-name="{{ $image->name }}"><img src="/{{ $tenant->url }}/{{ $gallery->url }}/{{ $image->id }}/file?size=pixel"></a>
                     @endforeach
                 </div>
             </div>
 
         </div>
     </div>
+    <div class="row">
+        <div class="col-md-12">
+            <h1 id="filename"></h1>
+            <p id="description"></p>
+        </div>
+    </div>
 
 @endsection
 
 @section('js')
+    <script>
+        $('.fotorama').on('fotorama:show', function (e, fotorama) {
+            console.log(e.type, fotorama.activeFrame);
+            $("#filename").html(fotorama.activeFrame.name);
+            $("#description").html(fotorama.activeFrame.description);
+        });
+
+    </script>
     <link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
     <style type="text/css">