diff --git a/docs/changelog.rst b/docs/changelog.rst
index 9a0e9221e3..471c93d8b7 100644
--- a/docs/changelog.rst
+++ b/docs/changelog.rst
@@ -5,6 +5,11 @@ CHANGELOG
 2.87.2+dev (XXXX-XX-XX)
 -----------------------
 
+**Minor improvements**
+
+- Improve sync rando, sync mobile and import views.
+
+
 2.87.2 (2022-09-23)
 -----------------------
 
diff --git a/geotrek/api/templates/mobile/sync_mobile.html b/geotrek/api/templates/mobile/sync_mobile.html
index f689781660..c0f6cefb9b 100644
--- a/geotrek/api/templates/mobile/sync_mobile.html
+++ b/geotrek/api/templates/mobile/sync_mobile.html
@@ -32,29 +32,29 @@
 			    	    	  has_progress = true;
 			    	    	  disable_sync_button(false);
 
-			    	    	  $('#progress-value').show();
-			    	    	  $("#progress-value").removeClass('bar-danger');
-			    	    	  $("#progress-value").parent().addClass("active");
+			    	    	  $("#progress-bar").removeClass('bg-danger');
+                              $("#progress-bar").parent().addClass("active");
 
 			    	    	  if (this.result.current) {
-			    	    		  $("#progress-value").css("width", this.result.current+'%');
+			    	    		  $("#progress-bar").css("width", this.result.current + '%');
 
-			    	    		  if (this.result.current == 100){
-			    	    			  $("#progress-value").parent().removeClass("active");
-			    	    			  $("#progress-value").addClass('bar-success');
-			    	    		  }
+			    	    		  if (this.result.current == 100) {
+                                    $("#progress-bar").parent().removeClass("active");
+                                    $("#progress-bar").addClass('bg-success');
+                                }
 			    	    	  }
 			    	    	  if (this.result.infos) {
-			    	    		  $("#progress-text").text(this.result.infos);
-			    	    	  }
+                                $("#progress-bar").text(this.result.infos);
+                            }
 			    	      }
 			    	      else {
 			    	    	  if (this.status == 'FAILURE'){
 			    	    		  // case of exception in task
-			    	    		  $("#progress-text").text("{% trans 'An error occured' %}");
-			    	    		  $('#exception-message').text(this.result.exc_type + ' : ' + this.result.exc_message)
-			    	    		  $("#progress-value").addClass('bar-danger');
-			    	    		  $("#progress-value").parent().removeClass("active");
+                                $("#progress-bar").text("{% trans 'An error occured' %}");
+                                $('#exception-message').text(this.result.exc_type + ' : ' + this.result.exc_message)
+                                $('#exception-message').show();
+                                $("#progress-bar").addClass('bg-danger');
+                                $("#progress-value").parent().removeClass("active");
 			    	    	  }
 			    	      }
 			    	  });
@@ -70,11 +70,12 @@
 			get_sync_infos();
 
 			$('#btn-confirm')[0].addEventListener('click', function(evt) {
-				$("#progress-value").css("width", '0%');
-				$("#progress-text").text('');
-				$("#progress-value").parent().addClass("active");
-				$("#progress-value").removeClass('bar-success');
-				$("#progress-value").removeClass('bar-danger');
+                $('#exception-message').hide();
+				$("#progress-bar").css("width", '0%');
+                $("#progress-bar").text('');
+                $("#progress-bar").parent().addClass("active");
+                $("#progress-bar").removeClass('bg-success');
+                $("#progress-bar").removeClass('bg-danger');
 
 			    $.post(
 			        $('#form-sync').attr('action'),
@@ -87,10 +88,10 @@
 
 			window.setInterval(function(){
 				get_sync_infos();
-			}, 500);
+			}, 1000);
 		});
 	</script>
-	<link rel="stylesheet" href="{% static 'trekking/css/sync_trek.css' %}" />
+	<link rel="stylesheet" href="{% static 'common/css/sync.css' %}" />
 {% endblock extrahead %}
 
 {% block toolbar %}
@@ -98,22 +99,31 @@
 
 {% block mainpanel %}
 
-	<div id="sync-div" class="col-12 col-sm-3">
-	    <h3>{% trans "Mobile sync" %}</h3>
-		<div class="progress progress-striped active">
-		  <div id="progress-value" class="bar" style="width: 0%;"></div>
-		  <span id="progress-text"></span>
-		</div>
-		{% block mainform %}
-			{% crispy form form.helper %}
-		{% endblock mainform %}
+	<div id="sync-div" class="col-12 col-md-6 offset-md-3">
+        <div class="card">
+            <div class="card-header">
+                <h3>{% trans "Mobile sync" %}</h3>
+            </div>
+
+            <div class="card-body">
+                <div class="progress progress-striped" role="progressbar">
+                    <div class="progress-bar progress-bar-striped" style="width: 0;" id="progress-bar"></div>
+                </div>
+                <div id="exception-message" style="display: none;" class="alert alert-danger">
+                </div>
+            </div>
+            <div class="card-footer">
+                {% block mainform %}
+                    {% crispy form form.helper %}
+                {% endblock mainform %}
+            </div>
+        </div>
 	</div>
 
 	<div id="exception-message" style="display: none;">
 	</div>
 
 	<div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-	    <!-- boostrap 2 modal confirmation -->
 	    <div class="modal-dialog">
 	        <div class="modal-content">
 	            <div class="modal-header">
diff --git a/geotrek/trekking/static/trekking/css/sync_trek.css b/geotrek/common/static/common/css/sync.css
similarity index 100%
rename from geotrek/trekking/static/trekking/css/sync_trek.css
rename to geotrek/common/static/common/css/sync.css
diff --git a/geotrek/common/templates/common/import_dataset.html b/geotrek/common/templates/common/import_dataset.html
index ba592443eb..c789e278c5 100644
--- a/geotrek/common/templates/common/import_dataset.html
+++ b/geotrek/common/templates/common/import_dataset.html
@@ -2,56 +2,56 @@
 {% load static crispy_forms_tags i18n %}
 
 {% block extrahead %}
-<script type="text/javascript" src="{% static "common/js/import.js" %}"></script>
-<link rel="stylesheet" href="{% static "common/css/import.css" %}" />
+    <script type="text/javascript" src="{% static "common/js/import.js" %}"></script>
+    <link rel="stylesheet" href="{% static "common/css/import.css" %}"/>
 {% endblock extrahead %}
 
 {% block toolbar %}
 {% endblock toolbar %}
 
 {% block mainpanel %}
-<div id="import-forms" class="col-12 col-sm-3">
-	{% block mainform %}
-	{% if form %}
-		{% crispy form form.helper %}
-	{% endif %}
-	{% if encoding_error %}
-		<p style="color: red;">
-			{% trans "Decoding error. Please check encoding and use only ASCII in file names." %}
-		</p>
-	{% endif %}
-	{% if form_without_file %}
-		{% crispy form_without_file form_without_file.helper%}
-	{% endif %}
-	{% if form_suricate %}
-		{% crispy form_suricate form_suricate.helper%}
-	{% endif %}
-	{% if not form and not form_without_file and not form_suricate %}
-		<p>{% trans "No parser available." %}</p>
-	{% endif %}
-	{% endblock mainform %}
-</div>
-<div id="progress-bars" class="col-12 col-sm-5">
-</div>
+    <div id="import-forms" class="col-12 col-md-6 offset-md-3">
+        {% block mainform %}
+            {% if form %}
+                {% crispy form form.helper %}
+            {% endif %}
+            {% if encoding_error %}
+                <p style="color: red;">
+                    {% trans "Decoding error. Please check encoding and use only ASCII in file names." %}
+                </p>
+            {% endif %}
+            {% if form_without_file %}
+                {% crispy form_without_file form_without_file.helper %}
+            {% endif %}
+            {% if form_suricate %}
+                {% crispy form_suricate form_suricate.helper %}
+            {% endif %}
+            {% if not form and not form_without_file and not form_suricate %}
+                <p>{% trans "No parser available." %}</p>
+            {% endif %}
+        {% endblock mainform %}
+        <div id="progress-bars" class="col-12">
+        </div>
+    </div>
 
-<script id="import-template" type="text/template">
-	<div id="progress-tpl">
-		<button type="button" class="close" data-dismiss="alert">&times;</button>
-		<div class="description">
-			<span class="parser"></span>
-			<span class="filename">
-			</span>
-		</div>
-		<div class="pull-left">
-			<span></span>
-		</div>
-		<div class="progress progress-striped active">
-			<div class="bar"></div>
-		</div>
-		<div class="alert">
-			<span></span>
-		</div>
-		<hr></hr>
-	</div>
-</script>
+    <script id="import-template" type="text/template">
+        <div id="progress-tpl">
+            <button type="button" class="close" data-dismiss="alert">&times;</button>
+            <div class="description">
+                <span class="parser"></span>
+                <span class="filename">
+        </span>
+            </div>
+            <div class="pull-left">
+                <span></span>
+            </div>
+            <div class="progress progress-striped active">
+                <div class="bar"></div>
+            </div>
+            <div class="alert">
+                <span></span>
+            </div>
+            <hr></hr>
+        </div>
+    </script>
 {% endblock mainpanel %}
diff --git a/geotrek/common/templates/common/sync_rando.html b/geotrek/common/templates/common/sync_rando.html
index 50dd449e7c..ad4c2164c0 100644
--- a/geotrek/common/templates/common/sync_rando.html
+++ b/geotrek/common/templates/common/sync_rando.html
@@ -89,10 +89,10 @@
 
             window.setInterval(function () {
                 get_sync_infos();
-            }, 500);
+            }, 1000);
         });
     </script>
-    <link rel="stylesheet" href="{% static 'trekking/css/sync_trek.css' %}"/>
+    <link rel="stylesheet" href="{% static 'common/css/sync.css' %}"/>
 {% endblock extrahead %}
 
 {% block toolbar %}
@@ -122,7 +122,6 @@ <h3>{% trans "Public web site sync" %}</h3>
 
     <div class="modal fade" id="confirm-submit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
          aria-hidden="true">
-        <!-- boostrap 2 modal confirmation -->
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">