diff --git a/imagehosting/templates/imagehosting/all.html b/imagehosting/templates/imagehosting/all.html
index 0b6ecb0..ba0054a 100644
--- a/imagehosting/templates/imagehosting/all.html
+++ b/imagehosting/templates/imagehosting/all.html
@@ -11,7 +11,9 @@
   <script>
   // resizer();
     // $(function() {resizer(); })
-    $(window).load(function() {resizer(); $('#page-preloader').delay(350).fadeOut('slow');})
+    $(window).load(function() {resizer();
+      $('.spinner').fadeOut();
+      $('#page-preloader').delay(350).fadeOut('slow');})
 
     // $(window).on("load", function() {resizer(); });
     $(window).resize(function() { resizer(); })
diff --git a/imagehosting/templates/imagehosting/base.html b/imagehosting/templates/imagehosting/base.html
index efb4102..b76f24c 100644
--- a/imagehosting/templates/imagehosting/base.html
+++ b/imagehosting/templates/imagehosting/base.html
@@ -92,6 +92,15 @@
           background: #000;
           z-index: 100500;
       }
+      #page-preloader .spinner {
+          width: 32px;
+          height: 32px;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          background: url('https://raw.githubusercontent.com/niklausgerber/PreLoadMe/master/img/status.gif') no-repeat 50% 50%;
+          margin: -16px 0 0 -16px;
+      }
 
       @media screen and (max-width: 450px) {
 
@@ -101,7 +110,7 @@
     </style>
   </head>
   <body>
-    <div id="page-preloader"><span class="spinner"></span></div>
+
     <div class='header'> <a href="{% url 'all_posts' %}" class='logo'>LOGO </a>
       <a href="{% url 'image_new' %}" class='right-menu'>new image</a>
       <a href="{% url 'all_posts' %}" class='right-menu'>all images</a>
@@ -113,6 +122,7 @@
         </ul>
       </ul>
     </div>
+    <div id="page-preloader"><span class="spinner"></span></div>
     {% block content %}
     {% endblock%}
   </body>
