diff --git a/modoboa/extensions/stats/static/stats/js/stats.js b/modoboa/extensions/stats/static/stats/js/stats.js
index 29ca9fe59..7a0fd3acd 100644
--- a/modoboa/extensions/stats/static/stats/js/stats.js
+++ b/modoboa/extensions/stats/static/stats/js/stats.js
@@ -1,3 +1,8 @@
+/**
+ * Create an instance of Stats.
+ *
+ * @constructor
+ */
 var Stats = function(options) {
     this.initialize(options);
 };
@@ -45,6 +50,14 @@ Stats.prototype = {
         if (navobj.params.end) {
             $("#id_to").val(navobj.params.end);
         }
+        if (navobj.params.period) {
+            $("input[data-period={0}]".format(navobj.params.period))
+                .attr("checked", true)
+                .parent().addClass("active");
+            if (navobj.params.period == "custom") {
+                $("#custom_period").removeClass("hidden");
+            }
+        }
         $("#custom-period input").datetimepicker({
             format: 'yyyy-mm-dd hh:ii:ss',
             autoclose: true,
@@ -92,9 +105,15 @@ Stats.prototype = {
     change_period: function(e) {
         e.preventDefault();
         var $link = $(e.target).children("input");
+        var period = $link.attr("data-period");
 
-        this.navobj.delparam("start").delparam("end");
-        this.navobj.setparam("period", $link.attr("data-period")).update();
+        if (period != "custom") {
+            $("#custom_period").addClass("hidden");
+            this.navobj.delparam("start").delparam("end");
+            this.navobj.setparam("period", $link.attr("data-period")).update();
+        } else {
+            $("#custom_period").removeClass("hidden");
+        }
     },
 
     /**
diff --git a/modoboa/extensions/stats/templates/stats/index.html b/modoboa/extensions/stats/templates/stats/index.html
index 62a0547ac..44d65ec8e 100644
--- a/modoboa/extensions/stats/templates/stats/index.html
+++ b/modoboa/extensions/stats/templates/stats/index.html
@@ -49,19 +49,19 @@ $(document).ready(function() {
   </div>
 </div>
 
-<div class="row hidden">
-  <div class="col-md-7">
+<div id="custom_period" class="row hidden">
+  <div class="col-sm-7">
     <form class="form-inline">
       <span id="custom-period">
         <div class="form-group">
           <div class="input-group">
-            <div class="input-group-addon"><span class="fa fa-indent-left"></span></div>
+            <div class="input-group-addon"><span class="fa fa-indent"></span></div>
             <input id="id_from" class="form-control" name="date_from" value="{{ start }}" type="text" readonly="readonly" />
           </div>
         </div>
         <div class="form-group">
           <div class="input-group">
-            <div class="input-group-addon"><span class="fa fa-indent-right"></span></div>
+            <div class="input-group-addon"><span class="fa fa-outdent"></span></div>
             <input id="id_to" class="form-control" name="date_to" value="{{ end }}" type="text" readonly="readonly" />
           </div>
         </div>
diff --git a/modoboa/extensions/stats/views.py b/modoboa/extensions/stats/views.py
index 820e16dfd..8bad22af0 100644
--- a/modoboa/extensions/stats/views.py
+++ b/modoboa/extensions/stats/views.py
@@ -29,10 +29,13 @@ def index(request):
             raise NotFound(_("No statistics available"))
 
     graph_sets = events.raiseDictEvent('GetGraphSets')
-    periods = [{"name": "day", "label": _("Day")},
-               {"name": "week", "label": _("Week")},
-               {"name": "month", "label": _("Month")},
-               {"name": "year", "label": _("Year")}]
+    periods = [
+        {"name": "day", "label": _("Day")},
+        {"name": "week", "label": _("Week")},
+        {"name": "month", "label": _("Month")},
+        {"name": "year", "label": _("Year")},
+        {"name": "custom", "label": _("Custom")}
+    ]
     return render(request, 'stats/index.html', {
         "periods": periods,
         "selection": "stats",