var _label=foo
var _assignee = _label

data: {
  epel_assignee: _epel_assignee,
  fedora_assignee: _fedora_assignee
}

diff --git a/ pagure/themes/srcfpo/templates/repo_master_sidebar.html b/ pagure/themes/srcfpo/templates/repo_master_sidebar.html
index f780ae7e0..d9f95c358 100644
--- a/ pagure/themes/srcfpo/templates/repo_master_sidebar.html  
+++ b/ pagure/themes/srcfpo/templates/repo_master_sidebar.html  
@@ -144,36 +144,60 @@
     </div>
   </div>
   {% endif %}
-  <p></p>
-  <br>
-  <br>
-  Bugzilla Overrides:
-  <br>
-  <div class="row">
-    {% if g.authenticated and repo.user.user == g.fas_user.username or pagure_admin %}
-    <div class="col">
-      <form action="" id="change_assignees">
-          <label for="fedora_assignee">Fedora Assignee</label>
-          <input title="Empty input resets assignee" class="form-control" name="fedora_assignee" id="fedora_assignee" value="{{
-                    repo.bzoverride.fedora_assignee if repo.bzoverride.fedora_assignee else repo.user.user }}" size=8/>
-         <br>
-          <label for="epel_assignee">EPEL Assignee</label>
-          <input title="Empty input resets assignee" class="form-control" name="epel_assignee" id="epel_assignee"value="{{
-                    repo.bzoverride.epel_assignee if repo.bzoverride.epel_assignee else repo.user.user }}" 
-                 description="Default assignee for EPEL bugzillas"/>
-        <button class="btn btn-primary" type="submit" title="Update bugzilla overrides" id="update_assignees">
-           Update
-        </button>
-      </form>
+
+  <div>
+    <div class="col-xs-2 line-height-1">
+    <p>Bugzilla Assignee:</p>
+      <ul>
+        <li><span class="bold">Fedora: </span><span id="fedora_assignee_txt">
+        {{ repo.bzoverride.fedora_assignee if repo.bzoverride.fedora_assignee else repo.user.user }}
+        </span>
+        </li>
+        <li><span class="bold">EPEL: </span><span id="epel_assignee_txt">
+        {{ repo.bzoverride.epel_assignee if repo.bzoverride.epel_assignee else repo.user.user }}
+        </span>
+        </li>
+      </ul>
+      {% if g.authenticated and repo.user.user == g.fas_user.username or pagure_admin %}
+        <div class="btn-group">
+          <a href="#" title="Update the bugzill assignee(s)"
+              class="btn btn-sm btn-outline-primary"
+              data-toggle="modal" data-target="#modal_assignee">
+            <i id="update-bz-icon" class="fa fa-fw fa-refresh"></i>
+            Update
+          </a>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+
+  <div class="modal fade" id="modal_assignee" tabindex="-1"
+          role="dialog" aria-labelledby="Bugzilla assignee" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h4 class="modal-title">Bugzilla Assignee</h4>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+            <span class="sr-only">Close</span>
+          </button>
+        </div>
+        <div class="modal-body">
+         <form id="change_assignees">
+            <label for="fedora_assignee">Fedora</label>
+            <input title="Empty input resets assignee" class="form-control" name="fedora_assignee" id="fedora_assignee" value="{{
+                      repo.bzoverride.fedora_assignee if repo.bzoverride.fedora_assignee else repo.user.user }}"/>
+            <label for="epel_assignee">EPEL</label>
+            <input title="Empty input resets assignee" class="form-control" name="epel_assignee" id="epel_assignee" value="{{
+                      repo.bzoverride.epel_assignee if repo.bzoverride.epel_assignee else repo.user.user }}"
+                   description="Default assignee for EPEL bugzillas" />
+            <button class="btn btn-primary" type="submit" title="Update bugzilla overrides" id="update_assignees">
+               Update
+            </button>
+          </form>
+        </div>
+      </div>
     </div>
-    {% else %}
-    <div class="col">
-      Fedora Assignee:<br>
-      {{ repo.bzoverride.fedora_assignee if repo.bzoverride.fedora_assignee else repo.user.user }}
-      <br><br>
-      EPEL Assignee:<br>
-      {{ repo.bzoverride.epel_assignee if repo.bzoverride.epel_assignee else repo.user.user }}
-    {% endif %}
   </div>

   <script type="text/javascript" nonce="{{ g.nonce }}">
@@ -204,28 +228,6 @@
         }
       });

-      $("#update_assignees").click(function(){
-              $.ajax({
-                      url: "{{ url_for('distgit_ns.bzoverride_patch_endpoint', repo=repo.name, namespace=repo.namespace) }}",
-                      type: 'post',
-                      dataType: 'json',
-                      contentType: 'application/json',
-                      data: JSON.stringify({
-                         'epel_assignee': $('#epel_assignee').val(),
-                         'fedora_assignee': $('#fedora_assignee').val()
-                      }),
-                      success: function(res) {
-                              console.log("Successfully changed the bugzilla assignees")
-                      },
-                      error: function(res) {
-                              console.log(JSON.stringify({ 'epel_assignee': $('#epel_assignee').val(), 'fedora_assignee': $('#fedora_assignee').val() }))
-                              console.log("{{ url_for('distgit_ns.bzoverride_patch_endpoint', repo=repo.name, namespace=repo.namespace) }}")
-                             console.log(res.responseText)
-                             console.log(res.getAllResponseHeaders())
-                      }
-              })
-      });
-
       {% if g.authenticated %}
       $(".monitoring-menu a").click(function(){
         var selectedValue = $(this).attr('id');
@@ -253,6 +255,34 @@
       });
       {% endif %}

+      $("#change_assignees").on('submit',  function(){
+        $('html').css('cursor', 'progress');
+        $.ajax({
+          url: "{{ url_for('distgit_ns.bzoverride_patch_endpoint', repo=repo.name, namespace=repo.namespace) }}",
+          type: 'POST',
+          dataType: 'json',
+          contentType: 'application/json',
+          data: JSON.stringify({
+             'epel_assignee': $('#epel_assignee').val(),
+             'fedora_assignee': $('#fedora_assignee').val()
+          }),
+          success: function(res) {
+            console.log("Successfully changed the bugzilla assignees");
+            $("#fedora_assignee_txt").text(res.fedora_assignee);
+            $("#epel_assignee_txt").text(res.epel_assignee);
+            $('#modal_assignee').modal('hide')
+            $('html').css('cursor', 'default');
+            return false;
+          },
+          error: function(res) {
+            alert("Unable to update the bugzilla assignee(s)");
+            $('html').css('cursor', 'default');
+            return false;
+          }
+        })
+        return false;
+      });
+
       {% if g.authenticated and repo.user.user == "orphan" %}
       $("#take-orphan-button").click(function(){