diff --git a/static/js/users.js b/static/js/users.js
new file mode 100644
index 0000000..23eabff
--- /dev/null
+++ b/static/js/users.js
@@ -0,0 +1,163 @@
+var punchcardWidget;
+var pieOrgWidget;
+var pieApiWidget;
+var overtimeWidget;
+
+var div_day;
+function highlight_punchDay() {
+    if (!(div_day === undefined)) {
+        div_day.removeClass('highlightDay');
+    }
+
+    var curDay = datePickerWidgetPunch.datepicker( "getDate" ).getDay();
+    if (curDay == 7)
+        curDay = 0;
+    div_day = $('[data-daynum="'+curDay+'"]');
+    div_day.addClass('highlightDay')
+}
+
+function updateDatePunch() {
+    var date = datePickerWidgetPunch.datepicker( "getDate" );
+    $.getJSON( url_getUserLogins+"?date="+date.getTime()/1000, function( data ) {
+        if (!(punchcardWidget === undefined)) {
+            punchcardWidget.settings.data = data;
+            punchcardWidget.refresh();
+            highlight_punchDay();
+        } else {
+            punchcardWidget = $('#punchcard').punchcard({
+                data: data,
+                singular: 'login',
+                plural: 'logins',
+                timezones: ['local'],
+                timezoneIndex:0
+            });
+            punchcardWidget = punchcardWidget.data("plugin_" + "punchcard");
+            highlight_punchDay();
+        }
+    });
+}
+function updateDatePieOrg() {
+    var date = datePickerWidgetOrg.datepicker( "getDate" );
+    $.getJSON( url_getTopOrglogin+"?date="+date.getTime()/1000, function( data ) {
+        toPlot = [];
+        for (item of data) { toPlot.push({ label: item[0], data: item[1] }); }
+        if (toPlot.length == 0) {
+            toPlot = [{ label: 'No data', data: 100 }];
+        }
+        if (!pieOrgWidget === undefined) {
+            pieOrgWidget.setData(toPlot);
+            pieOrgWidget.draw();
+        } else {
+            pieOrgWidget = $.plot('#pieOrg', toPlot, {
+                series: {
+                    pie: {
+                        innerRadius: 0.5,
+                        show: true
+                    }
+                }
+            });
+        }
+    });
+}
+function updateDatePieApi() {
+    var date = datePickerWidgetApi.datepicker( "getDate" );
+    $.getJSON( url_getLoginVSCOntribution+"?date="+date.getTime()/1000, function( data ) {
+        toPlot = [
+            {label: 'Login with contribution during the day', data: data[0], color: '#4da74d' },
+            {label: 'Login without contribution during the day', data:data[1], color: '#cb4b4b' }
+        ];
+        if (data[0] == 0 && data[1] == 0) {
+            toPlot = [{ label: 'No data', data: 100 }];
+        }
+
+        if (!pieApiWidget === undefined) {
+            pieApiWidget.setData(toPlot);
+            pieApiWidget.draw();
+        } else {
+            pieApiWidget = $.plot('#pieApi', toPlot, {
+                series: {
+                    pie: {
+                        innerRadius: 0.5,
+                        show: true
+                    }
+                }
+            });
+        }
+    });
+}
+function updateDateOvertime() {
+    var date = datePickerWidgetOvertime.datepicker( "getDate" );
+    var now = new Date();
+    if (date.toDateString() == now.toDateString()) {
+        date = now;
+    } else {
+        date.setTime(date.getTime() + (24*60*60*1000-1)); // include data of selected date
+    }
+    $.getJSON( url_getUserLoginsOvertime+"?date="+parseInt(date.getTime()/1000), function( data ) {
+        temp = [];
+        var i=0;
+        for (item of data) {
+            temp.push([new Date(item[0]*1000), item[1]]);
+        }
+        data = {label: 'Login overtime', data: temp}
+        if (!overtimeWidget === undefined) {
+            overtimeWidget.setData(toPlot);
+            overtimeWidget.draw();
+        } else {
+            overtimeWidget = $.plot('#lineChart', [data], {
+                lines: {
+                    show: true,
+                    steps: true,
+                    fill: true
+                },
+                xaxis: {
+                    mode: "time",
+                    minTickSize: [1, "day"],
+                }
+            });
+        }
+    });
+
+}
+
+$(document).ready(function () {
+
+    var datePickerOptions = {
+        showOn: "button",
+        maxDate: 0,
+        buttonImage: urlIconCalendar,
+        buttonImageOnly: true,
+        buttonText: "Select date",
+        showAnim: "slideDown"
+    };
+    // punch
+    var datePickerOptionsPunch = jQuery.extend({}, datePickerOptions);
+    datePickerOptionsPunch['onSelect'] = updateDatePunch;
+    datePickerWidgetPunch = $( "#datepickerPunch" );
+    datePickerWidgetPunch.datepicker(datePickerOptionsPunch);
+    datePickerWidgetPunch.datepicker("setDate", new Date());
+    // org login
+    var datePickerOptionsOrg = jQuery.extend({}, datePickerOptions);
+    datePickerOptionsOrg['onSelect'] = updateDatePieOrg;
+    datePickerWidgetOrg = $( "#datepickerOrgLogin" );
+    datePickerWidgetOrg.datepicker(datePickerOptionsOrg);
+    datePickerWidgetOrg.datepicker("setDate", new Date());
+    // api
+    var datePickerOptionsApi = jQuery.extend({}, datePickerOptions);
+    datePickerOptionsApi['onSelect'] = updateDatePieApi;
+    datePickerWidgetApi = $( "#datepickerApi" );
+    datePickerWidgetApi.datepicker(datePickerOptionsApi);
+    datePickerWidgetApi.datepicker("setDate", new Date());
+    // overtime
+    var datePickerOptionsOvertime = jQuery.extend({}, datePickerOptions);
+    datePickerOptionsOvertime['onSelect'] = updateDateOvertime;
+    datePickerWidgetOvertime = $( "#datepickerOvertimeLogin" );
+    datePickerWidgetOvertime.datepicker(datePickerOptionsOvertime);
+    datePickerWidgetOvertime.datepicker("setDate", new Date());
+
+    updateDatePunch();
+    updateDatePieOrg();
+    updateDatePieApi();
+    updateDateOvertime();
+
+});
diff --git a/templates/users.html b/templates/users.html
index 152a044..10b651f 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -180,178 +180,16 @@ small {
     <script>
         /* URL */
         var urlIconCalendar = "{{ url_for('static', filename='pics/calendar.gif') }}";
-
+        var url_getUserLogins = "{{ url_for('getUserLogins') }}";
+        var url_getTopOrglogin = "{{ url_for('getTopOrglogin') }}";
+        var url_getLoginVSCOntribution = "{{ url_for('getLoginVSCOntribution') }}";
+        var url_getUserLoginsOvertime = "{{ url_for('getUserLoginsOvertime') }}";
+        
         /* DATA FROM CONF */
 
     </script>
 
-    <script>
-        var punchcardWidget;
-        var pieOrgWidget;
-        var pieApiWidget;
-        var overtimeWidget;
-
-        var div_day;
-        function highlight_punchDay() {
-            if (!(div_day === undefined)) {
-                div_day.removeClass('highlightDay');
-            }
-
-            var curDay = datePickerWidgetPunch.datepicker( "getDate" ).getDay();
-            if (curDay == 7)
-                curDay = 0;
-            div_day = $('[data-daynum="'+curDay+'"]');
-            div_day.addClass('highlightDay')
-        }
-
-        function updateDatePunch() {
-            var date = datePickerWidgetPunch.datepicker( "getDate" );
-            $.getJSON( "{{ url_for('getUserLogins') }}"+"?date="+date.getTime()/1000, function( data ) {
-                if (!(punchcardWidget === undefined)) {
-                    punchcardWidget.settings.data = data;
-                    punchcardWidget.refresh();
-                    highlight_punchDay();
-                } else {
-                    punchcardWidget = $('#punchcard').punchcard({
-                        data: data,
-                        singular: 'login',
-                        plural: 'logins',
-                        timezones: ['local'],
-                        timezoneIndex:0
-                    });
-                    punchcardWidget = punchcardWidget.data("plugin_" + "punchcard");
-                    highlight_punchDay();
-                }
-            });
-        }
-        function updateDatePieOrg() {
-            var date = datePickerWidgetOrg.datepicker( "getDate" );
-            $.getJSON( "{{ url_for('getTopOrglogin') }}"+"?date="+date.getTime()/1000, function( data ) {
-                toPlot = [];
-                for (item of data) { toPlot.push({ label: item[0], data: item[1] }); }
-                if (toPlot.length == 0) {
-                    toPlot = [{ label: 'No data', data: 100 }];
-                }
-                if (!pieOrgWidget === undefined) {
-                    pieOrgWidget.setData(toPlot);
-                    pieOrgWidget.draw();
-                } else {
-                    pieOrgWidget = $.plot('#pieOrg', toPlot, {
-                        series: {
-                            pie: {
-                                innerRadius: 0.5,
-                                show: true
-                            }
-                        }
-                    });
-                }
-            });
-        }
-        function updateDatePieApi() {
-            var date = datePickerWidgetApi.datepicker( "getDate" );
-            $.getJSON( "{{ url_for('getLoginVSCOntribution') }}"+"?date="+date.getTime()/1000, function( data ) {
-                toPlot = [
-                    {label: 'Login with contribution during the day', data: data[0], color: '#4da74d' },
-                    {label: 'Login without contribution during the day', data:data[1], color: '#cb4b4b' }
-                ];
-                if (data[0] == 0 && data[1] == 0) {
-                    toPlot = [{ label: 'No data', data: 100 }];
-                }
-
-                if (!pieApiWidget === undefined) {
-                    pieApiWidget.setData(toPlot);
-                    pieApiWidget.draw();
-                } else {
-                    pieApiWidget = $.plot('#pieApi', toPlot, {
-                        series: {
-                            pie: {
-                                innerRadius: 0.5,
-                                show: true
-                            }
-                        }
-                    });
-                }
-            });
-        }
-        function updateDateOvertime() {
-            var date = datePickerWidgetOvertime.datepicker( "getDate" );
-            var now = new Date();
-            if (date.toDateString() == now.toDateString()) {
-                date = now;
-            } else {
-                date.setTime(date.getTime() + (24*60*60*1000-1)); // include data of selected date
-            }
-            $.getJSON( "{{ url_for('getUserLoginsOvertime') }}"+"?date="+parseInt(date.getTime()/1000), function( data ) {
-                temp = [];
-                var i=0;
-                for (item of data) {
-                    temp.push([new Date(item[0]*1000), item[1]]);
-                }
-                data = {label: 'Login overtime', data: temp}
-                if (!overtimeWidget === undefined) {
-                    overtimeWidget.setData(toPlot);
-                    overtimeWidget.draw();
-                } else {
-                    overtimeWidget = $.plot('#lineChart', [data], {
-                        lines: {
-                            show: true,
-                            steps: true,
-                            fill: true
-                        },
-                        xaxis: {
-                            mode: "time",
-                            minTickSize: [1, "day"],
-                        }
-                    });
-                }
-            });
-
-        }
-    </script>
-
-    <script>
-        $(document).ready(function () {
-
-            var datePickerOptions = {
-                showOn: "button",
-                maxDate: 0,
-                buttonImage: urlIconCalendar,
-                buttonImageOnly: true,
-                buttonText: "Select date",
-                showAnim: "slideDown"
-            };
-            // punch
-            var datePickerOptionsPunch = jQuery.extend({}, datePickerOptions);
-            datePickerOptionsPunch['onSelect'] = updateDatePunch;
-            datePickerWidgetPunch = $( "#datepickerPunch" );
-            datePickerWidgetPunch.datepicker(datePickerOptionsPunch);
-            datePickerWidgetPunch.datepicker("setDate", new Date());
-            // org login
-            var datePickerOptionsOrg = jQuery.extend({}, datePickerOptions);
-            datePickerOptionsOrg['onSelect'] = updateDatePieOrg;
-            datePickerWidgetOrg = $( "#datepickerOrgLogin" );
-            datePickerWidgetOrg.datepicker(datePickerOptionsOrg);
-            datePickerWidgetOrg.datepicker("setDate", new Date());
-            // api
-            var datePickerOptionsApi = jQuery.extend({}, datePickerOptions);
-            datePickerOptionsApi['onSelect'] = updateDatePieApi;
-            datePickerWidgetApi = $( "#datepickerApi" );
-            datePickerWidgetApi.datepicker(datePickerOptionsApi);
-            datePickerWidgetApi.datepicker("setDate", new Date());
-            // overtime
-            var datePickerOptionsOvertime = jQuery.extend({}, datePickerOptions);
-            datePickerOptionsOvertime['onSelect'] = updateDateOvertime;
-            datePickerWidgetOvertime = $( "#datepickerOvertimeLogin" );
-            datePickerWidgetOvertime.datepicker(datePickerOptionsOvertime);
-            datePickerWidgetOvertime.datepicker("setDate", new Date());
-
-            updateDatePunch();
-            updateDatePieOrg();
-            updateDatePieApi();
-            updateDateOvertime();
-
-        });
-    </script>
+    <script src="{{ url_for('static', filename='js/users.js') }}"></script>
 
 </body>