diff --git a/coinmanager/coinc/static/coinc/main.js b/coinmanager/coinc/static/coinc/main.js
index 115af2f..74d02d5 100644
--- a/coinmanager/coinc/static/coinc/main.js
+++ b/coinmanager/coinc/static/coinc/main.js
@@ -28,8 +28,7 @@ let settings = {
     buy_only:     false,
     checked:      false,
     ec:           false,
-    exists:       true
-}
+    exists:       true }
 
 
 //
@@ -46,11 +45,9 @@ function escape_html (string) {
         "'": ''',
         '/': '/',
         '`': '`',
-        '=': '='
-    };
+        '=': '=' };
     return String(string).replace(/[&<>"'`=\/]/g, function (s) {
-        return entity_map[s];
-    });
+        return entity_map[s]; });
 }
 
 /* return a datetime YYYY.MM.DD */
@@ -64,7 +61,6 @@ function get_datetime() {
 
 // manage user login
 function render_login(name, color) {
-
     new Cookie('coinc-name', name)
     render_login_color(color);
 
@@ -81,8 +77,8 @@ function render_login(name, color) {
 
 // manage login colors
 function render_login_color(color) {
-
     new Cookie('coinc-color', color);
+
     if ($('nav.navbar').css('display') == 'block') {
         $('nav.navbar').prop('style', 'background-color:' + color + ' !important; display: block;');
     } else {
@@ -103,6 +99,7 @@ function render_found() {
             found_on = get_datetime();
         }
         $('#found_on').val(found_on);
+
     } else {
         save_settings();
         $('#found_by option[selected=selected]').html('');
@@ -145,21 +142,24 @@ function render_response(data, td, set) {
 
     /* add or update marker (and name) if found */
     if (set['found'] && set['found_by'] && set['exists']) {
+
         div_class = set['found_by'];
         $(td).find('div.coin span').html('').html('✔');
 
         /* add/update name */
         if ([201, 202, 203].includes(data['value'])) {
+
             let c = String(value).substring(2,3);
             if ('name' in data) {
-                let name = escape_html(data['name']);
 
                 /* look for div.special123_name */
+                let name = escape_html(data['name']);
                 let div_special_name = $(td).find('div.special' + c + '_name');
                 if (div_special_name.length == 0) {
 
                     /* append div if not found */
                     $(td).append('<div class="special' + c + '_name three_lines">' + name + '</div>');
+
                 } else if (div_special_name.length == 1) {
 
                     /* only insert inner html */
@@ -175,8 +175,7 @@ function render_response(data, td, set) {
 
     /* remove marker if not exists */
     if (!set['exists'] || !set['found']) {
-        $(td).find('div.coin span').html('');
-    }
+        $(td).find('div.coin span').html(''); }
 
     /* apply td styles */
     $(td).removeClass();
@@ -192,8 +191,7 @@ function render_response(data, td, set) {
 function save_settings() {
 
     let checkboxes = $('#found, #buy_only, #checked, #ec, #exists').map(function() {
-        return { [$(this).prop('id')]: $(this).prop('checked') }
-    }).get();
+        return { [$(this).prop('id')]: $(this).prop('checked') } }).get();
     for (let box of checkboxes) {
         for (let item in box) { settings[item] = box[item]; }
     }
@@ -278,13 +276,14 @@ $(document).ready(function() {
                     add_coin_name(args);
                 }
 
+                /* make a POST request to ./add/coin */
                 function add_coin_name(args, response='') {
                     let data = args['data'];
                     let td = args['td'];
                     if (response) {
-                        data['name'] = response['name'].trim().substring(0, 79);
-                    }
+                        data['name'] = response['name'].trim().substring(0, 79); }
                     $(td).css('cursor', 'progress');
+
                     $.ajax({
                         type:     'POST',
                         url:      'add/coin',
@@ -302,7 +301,6 @@ $(document).ready(function() {
                         }
                     });
                 }
-
             });
         });
     });
@@ -319,9 +317,7 @@ $(document).ready(function() {
 
     // button #advanced_options
     $('#show_advanced_options').click(function() {
-        $('#advanced_options').slideToggle();
-    });
-
+        $('#advanced_options').slideToggle(); });
 
 
     //
@@ -330,106 +326,70 @@ $(document).ready(function() {
 
     // checkbox #found
     $('#found').change(function() {
-        render_found();
+        render_found(); });
+
+    // checkbox #exists
+    $('#exists').change(function() {
+
+        if (this.checked === true) {
+
+            save_settings();
+
+            // remove values
+            $('#found_by, #found_on, #circulation').each(function() {
+                $(this).val(''); });
+
+            // disable settings
+            $('#found, #buy_only, #checked, #ec').each(function() {
+                $(this).prop('checked', false); });
+            $('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
+                $(this).prop('disabled', 'disabled'); });
+
+        // checkbox #exists not checked
+        } else {
+
+            // restore values
+            $('#found_by').val(settings['found_by']);
+            $('#found_on').val(settings['found_on']);
+            $('#circulation').val(settings['circulation']);
+
+            // restore settings
+            $('#found_now, #found, #buy_only, #checked, #ec').each(function() {
+                let setting = $(this).prop('id');
+                $(this).prop('checked', settings[setting]); });
+
+            // enable settings
+            $('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
+                $(this).prop('disabled', ''); });
+
+            render_found();
+        }
     });
 
-  // checkbox #exists
-  $('#exists').change(function() {
+    // select username on change
+    $('nav.navbar select').on('change', function() {
+        let color = $('nav.navbar option[value=' + this.value + ']').attr('color');
+        $('nav.navbar option[selected=selected]').removeAttr('selected');
+        render_login(this.value, color); });
 
-    if (this.checked === true) {
-
-      // save settings
-      save_settings();
-
-      // remove values
-      $('#found_by, #found_on, #circulation').each(function() {
-          $(this).val('');
-      });
-
-      // disable settings
-      $('#found, #buy_only, #checked, #ec').each(function() {
-          $(this).prop('checked', false);
-      });
-      $('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
-          $(this).prop('disabled', 'disabled');
-      });
-
-    // checkbox #exists not checked
-    } else {
-
-      // restore values
-      $('#found_by').val(settings['found_by']);
-      $('#found_on').val(settings['found_on']);
-      $('#circulation').val(settings['circulation']);
-
-      // restore settings
-      $('#found_now, #found, #buy_only, #checked, #ec').each(function() {
-        let setting = $(this).prop('id');
-        $(this).prop('checked', settings[setting]);
-      });
-
-      // enable settings
-      $('#found, #found_by, #found_on, #circulation, #buy_only, #checked, #ec').each(function() {
-        $(this).prop('disabled', '');
-      });
-
-      // do post processing
-      render_found();
-
-    }
-  });
-
-  // select username on change
-  $('nav.navbar select').on('change', function() {
-    let color = $('nav.navbar option[value=' + this.value + ']').attr('color');
-    $('nav.navbar option[selected=selected]').removeAttr('selected');
-    render_login(this.value, color);
-  });
-
-// datepicker TODO make it nicer
-  $.datepicker.setDefaults( $.datepicker.regional['de'] );
-  $('input[name=found_on]').datepicker({
-    defaultDate: new Date(),
-    dateFormat: 'dd.mm.yy'
-  });
-
-
-
-    //
-    // Modals
-    //
-
-    // hide modal add user
-    function hide_modal(modal_id) { $('#' + modal_id).fadeOut('fast'); }
+    // datepicker TODO make it nicer
+    $.datepicker.setDefaults( $.datepicker.regional['de'] );
+    $('input[name=found_on]').datepicker({
+        defaultDate: new Date(),
+        dateFormat:  'dd.mm.yy' });
 
     // modal #add_user
     $('#show_add_user').click(function() {
-        $('#modal_add_user').fadeIn('fast');
+        let args = '';
+        let modal = new Modal('add_user', add_user, args);
+        modal.show();
 
-        $(document).on('click', function(event) {
-            if ($('#modal_add_user').is(':visible')) {
-                if ($(event.target).attr('id') === 'modal_add_user') { hide_modal(); }
-            }
-        });
-
-        // detect ESC keypress
-        $(document).keypress(function(event) {
-            if (event.keyCode == 27) { // ESC is pressed
-                hide_modal();
-                $(document).off('keypress');
-            }
-        });
-
-        // button #close_modal_add_user
-        $('#close_modal_add_user').click(function() { hide_modal(); });
-
-        // button #add_user
-        $('#add_user').click(function() {
-
-            let name = encodeURIComponent($('#text_user')
-                .val().trim().substring(0, 19).replace(' ', '-'));
-            let color = encodeURIComponent($('#text_color')
-                .val().trim().substring(0, 9 ).replace(' ', '-'));
+        function add_user(args='', response='') {
+            console.log(response);
+            let name  = encodeURIComponent(response['name']
+                .trim().substring(0, 19).replace(' ', '-'));
+            let color = encodeURIComponent(response['color']
+                .trim().substring(0, 9 ).replace(' ', '-'));
 
             $.ajax({
                 type: 'GET',
@@ -438,19 +398,16 @@ $(document).ready(function() {
                 success: function(response) {
 
                     if (response.status === 0) {
-                        $('#response').fadeOut('fast');
-                        hide_modal();
                         render_login(name, color);
-
+                        detach('add_user');
                     } else {
                         $('#response').html(response.message);
                         $('#response').css('color', 'red');
                     }
                 }
             });
-        });
+        }
     });
-    // end modal #add_user
 
 
     //
diff --git a/coinmanager/coinc/templates/coinc/controlbar.html b/coinmanager/coinc/templates/coinc/controlbar.html
index 92c8949..4f758fe 100644
--- a/coinmanager/coinc/templates/coinc/controlbar.html
+++ b/coinmanager/coinc/templates/coinc/controlbar.html
@@ -56,28 +56,28 @@
       </nav>
 
       <!-- modal add_user -->
-      <div id="modal_add_user" class="modal-container">
+      <div id="add_user" class="modal-container">
         <div class="modal-dialog" role="document">
           <div class="modal-content">
             <div class="modal-header">
               <h5 class="modal-title">Name hinzufügen</h5>
-              <button id="close_modal_add_user" type="button" class="close" data-dismiss="modal" aria-label="Close">
+              <button id="add_user_close" type="button" class="close" data-dismiss="modal" aria-label="Close">
                 <span aria-hidden="true">×</span>
               </button>
             </div>
             <div class="modal-body">
               <div class="form-group">
                 <label for="text_user">Name</label>
-                <input type="text" name="user" id="text_user" class="form-control">
+                <input type="text" name="name" id="add_user_name" class="form-control">
               </div>
               <div class="form-group">
                 <label for="text_color">Farbe</label>
-                <input type="text" name="color" id="text_color" class="form-control">
+                <input type="text" name="color" id="add_user_color" class="form-control">
               </div>
             </div>
             <div class="modal-footer">
               <span id="response"></span>
-              <button type="button" id="add_user" class="btn btn-primary">+ Name hinzufügen</button>
+              <button type="button" id="add_user_action" class="btn btn-primary">+ Name hinzufügen</button>
             </div>
           </div>
         </div>