diff --git a/resources/public/css/screen.css b/resources/public/css/screen.css
index b9f3c61..8ddc6bd 100644
--- a/resources/public/css/screen.css
+++ b/resources/public/css/screen.css
@@ -3,10 +3,13 @@
 
 .thumbnail-image {
   display: block;
-  margin: 10px;
+  margin: 2px;
   border: 1px solid #ccc;
   float: left; }
 
+.thumbnail-image:hover {
+  opacity: 0.9; }
+
 .detail-image img {
   max-width: 100%; }
 
diff --git a/resources/scss/screen.scss b/resources/scss/screen.scss
index 98f5e85..5c54cb0 100644
--- a/resources/scss/screen.scss
+++ b/resources/scss/screen.scss
@@ -4,10 +4,13 @@
 
 .thumbnail-image {
   display: block;
-  margin: 10px;
+  margin: 2px;
   border: 1px solid #ccc;
   float: left;
 }
+.thumbnail-image:hover {
+  opacity: 0.9;
+}
 
 .detail-image {
   img {
diff --git a/resources/templates/index.html b/resources/templates/index.html
index 5fca254..d62e969 100644
--- a/resources/templates/index.html
+++ b/resources/templates/index.html
@@ -29,7 +29,7 @@
 <hr>
 {% endif %}
 
-<div class="clearfix">
+<div class="clearfix d-flex justify-content-center flex-wrap">
   {% for image in images %}
     <a href="/show/{{ image.id }}" class="thumbnail-image">
       <img src="/images/thumbnails/{{ image.hash }}.png" alt="{{ image.title }}">