diff --git a/assets/css/pages/gallery.scss b/assets/css/pages/gallery.scss
index 8e0d5ab..cda8aa8 100644
--- a/assets/css/pages/gallery.scss
+++ b/assets/css/pages/gallery.scss
@@ -1,32 +1,37 @@
-div.gallery {
-    margin-bottom: 25px;
-    border: 1px solid #ccc;
-    min-width: 230px;
-    max-width: 320px;
-}
+.gallery-grid {
+    .gallery {
+        margin-bottom: 25px;
+        border: 1px solid #ccc;
+        width: 250px;
 
-div.gallery:hover {
-    border: 1px solid #777;
-}
+        &:hover {
+            border: 1px solid #777;
+        }
 
-div.gallery img {
-    width: 100%;
-    height: auto;
-    margin-top: -20px;
-}
+        a {
+            position: relative;
+            display: block;
 
-div.gallery img:hover {
-    background: #0f1c33;
-    opacity: 0.35;
-}
+            img {
+                width: 100%;
+                height: auto;
 
-div.gallery span.flag-icon{
-    float: right;
-    margin-top: 5px;
-    margin-right: 5px;
-}
+                &:hover {
+                    background: #0f1c33;
+                    opacity: 0.35;
+                }
+            }
+
+            .flag-icon{
+                position: absolute;
+                top: 5px;
+                right: 5px;
+            }
+        }
+    }
 
-div.desc {
-    padding: 15px;
-    text-align: center;
+    .desc {
+        padding: 15px;
+        text-align: center;
+    }
 }
diff --git a/assets/js/app.js b/assets/js/app.js
index 7ff5bfb..87eda17 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -18,3 +18,4 @@ window.moment = moment;
 })(jQuery);
 
 import './pages/landing.js';
+import './pages/gallery';
diff --git a/assets/js/pages/gallery.js b/assets/js/pages/gallery.js
new file mode 100644
index 0000000..a89dbe5
--- /dev/null
+++ b/assets/js/pages/gallery.js
@@ -0,0 +1,10 @@
+import jQuery from 'jquery';
+import Masonry from 'masonry-layout';
+
+jQuery(document).ready(function() {
+    const gallery = new Masonry('.gallery-grid', {
+        itemSelector: '.gallery',
+        columnWidth:  250,
+        gutter: 25
+    });
+});
diff --git a/package.json b/package.json
index 6b2c097..df55c2c 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
         "flag-icon-css": "^3.0.0",
         "font-awesome": "^4.7.0",
         "jquery": "^3.3.1",
+        "masonry-layout": "^4.2.1",
         "moment": "^2.22.2",
         "node-sass": "^4.9.0",
         "popper.js": "^1.14.3",
diff --git a/src/Controller/IndexController.php b/src/Controller/IndexController.php
index 6d3e5bd..5740bc1 100644
--- a/src/Controller/IndexController.php
+++ b/src/Controller/IndexController.php
@@ -157,10 +157,10 @@ private function resizeImage(SplFileInfo $file, $destinationName)
 
             $imagick->resizeImage(453,640, 0, 1, true);
 
-            $imageWidth = $imagick->getImageWidth();
+            /*$imageWidth = $imagick->getImageWidth();
             if($imagick->getImageHeight() > $imageWidth * 1.5) {
                 $imagick->cropImage($imageWidth,$imageWidth * 1.5,0,0);
-            }
+            }*/
 
             if(is_writable(dirname($destinationName))) {
                 return $imagick->writeImage($destinationName);
diff --git a/templates/gallery/components/content.html.twig b/templates/gallery/components/content.html.twig
index 5b0e90e..b1cc6e3 100644
--- a/templates/gallery/components/content.html.twig
+++ b/templates/gallery/components/content.html.twig
@@ -6,7 +6,7 @@
                     <span>{% trans %}gallery_title{% endtrans %}</span>
                 </h2>
                 <br>
-                <div class="row">
+                <div class="row gallery-grid">
                     {% for image in images %}
                         {% include 'gallery/components/image.html.twig' %}
                     {% endfor %}
diff --git a/templates/gallery/components/image.html.twig b/templates/gallery/components/image.html.twig
index d5a67ec..9504f7a 100644
--- a/templates/gallery/components/image.html.twig
+++ b/templates/gallery/components/image.html.twig
@@ -1,9 +1,7 @@
-<div class="col">
-    <div class="gallery">
-        <a target="_blank" href="/build/static/gallery/files/{{ image.name }}">
-            <span class="flag-icon flag-icon-{{ image.langcode }}"></span>
-            <img src="/build/static/gallery/preview/{{ image.thumb}}" alt="{{ image.name }}" width="300" height="200">
-        </a>
-        <!--<div class="desc"><span class="label danger">{% trans %}gallery_download_pdf{% endtrans %}</span></div>-->
-    </div>
+<div class="gallery">
+    <a target="_blank" href="/build/static/gallery/files/{{ image.name }}">
+        <span class="flag-icon flag-icon-{{ image.langcode }}"></span>
+        <img src="/build/static/gallery/preview/{{ image.thumb}}" alt="{{ image.name }}" width="300" height="200">
+    </a>
+    <!--<div class="desc"><span class="label danger">{% trans %}gallery_download_pdf{% endtrans %}</span></div>-->
 </div>
diff --git a/yarn.lock b/yarn.lock
index 580e394..1f595ea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1905,6 +1905,10 @@ des.js@^1.0.0:
     inherits "^2.0.1"
     minimalistic-assert "^1.0.0"
 
+desandro-matches-selector@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/desandro-matches-selector/-/desandro-matches-selector-2.0.2.tgz#717beed4dc13e7d8f3762f707a6d58a6774218e1"
+
 destroy@~1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
@@ -2232,6 +2236,10 @@ etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
 
+ev-emitter@^1.0.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/ev-emitter/-/ev-emitter-1.1.1.tgz#8f18b0ce5c76a5d18017f71c0a795c65b9138f2a"
+
 event-emitter@~0.3.5:
   version "0.3.5"
   resolved "https://registry.yarnpkg.com/event-emitter/-/event-emitter-0.3.5.tgz#df8c69eef1647923c7157b9ce83840610b02cc39"
@@ -2555,6 +2563,12 @@ first-chunk-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/first-chunk-stream/-/first-chunk-stream-1.0.0.tgz#59bfb50cd905f60d7c394cd3d9acaab4e6ad934e"
 
+fizzy-ui-utils@^2.0.0:
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/fizzy-ui-utils/-/fizzy-ui-utils-2.0.7.tgz#7df45dcc4eb374a08b65d39bb9a4beedf7330505"
+  dependencies:
+    desandro-matches-selector "^2.0.0"
+
 flag-icon-css@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/flag-icon-css/-/flag-icon-css-3.0.0.tgz#a67cb3913973e38a8117e738ebbe9081049d8127"
@@ -2740,6 +2754,10 @@ get-proxy@^1.0.1:
   dependencies:
     rc "^1.1.2"
 
+get-size@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/get-size/-/get-size-2.0.3.tgz#54a1d0256b20ea7ac646516756202769941ad2ef"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -4024,6 +4042,13 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+masonry-layout@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/masonry-layout/-/masonry-layout-4.2.1.tgz#1c878b85a88866ba6b39b9bd0e162348aed7ce13"
+  dependencies:
+    get-size "^2.0.2"
+    outlayer "^2.1.0"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -4622,6 +4647,14 @@ osenv@0, osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+outlayer@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/outlayer/-/outlayer-2.1.1.tgz#29863b6de10ea5dadfffcadfa0d728907387e9a2"
+  dependencies:
+    ev-emitter "^1.0.0"
+    fizzy-ui-utils "^2.0.0"
+    get-size "^2.0.2"
+
 p-finally@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae"