diff --git a/GUI/lib/css/style.css b/GUI/lib/css/style.css
index 9e9eed17bde28c143d02987c7aef503fe7a93759..a5f9272bf94798b9c2cb3de6f705700e51631829 100644
--- a/GUI/lib/css/style.css
+++ b/GUI/lib/css/style.css
@@ -14,6 +14,7 @@ body{
     text-align: center;
     -webkit-border-radius: 5px;
     border-radius: 5px;
+    transition: 0.3s;
 }
 .dropArea:hover{
     background-color: #f0f7ff;
diff --git a/GUI/lib/js/index.js b/GUI/lib/js/index.js
index 76ffc1625e9c8f4852439cb1b9f432fd244d4fd8..6010a4115ef76872a50bb232f6ac97adff737588 100644
--- a/GUI/lib/js/index.js
+++ b/GUI/lib/js/index.js
@@ -35,7 +35,7 @@ function drop(e){
     e.preventDefault();      
 
     $('#ots_div').html('<img src="' + loader_gif + '">');
-    $('#ots_div').show();    
+    $('#ots_div').fadeIn('fast');    
 
     var file = e.dataTransfer.items[0].getAsFile();    
       
@@ -61,7 +61,7 @@ function drop(e){
                 var ots = ' {"file_hash": "' + file_hash + '", "ots": "' + response.temporay_ots + '"}';
 
                 $('#ots_div').html(ots);
-                $('#ots_div').show();
+                $('#ots_div').fadeIn('fast');  
 
             }
         });