diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/apikeys.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/apikeys.tt
index 22a9b2cf91..e710efdd2c 100644
--- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/apikeys.tt
+++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/apikeys.tt
@@ -1,4 +1,5 @@
 [% USE Koha %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
 <title>Koha &rsaquo; Patrons &rsaquo; API Keys</title>
 [% INCLUDE 'doc-head-close.inc' %]
@@ -8,80 +9,98 @@
 [% INCLUDE 'patron-search.inc' %]
 
 <div id="breadcrumbs">
-  <a href="/cgi-bin/koha/mainpage.pl">Home</a>
-  &rsaquo;
-  <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>
-  &rsaquo;
-  API Keys for [% INCLUDE 'patron-title.inc' %]
+    <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+    &rsaquo;
+    <a href="/cgi-bin/koha/members/members-home.pl">Patrons</a>
+    &rsaquo;
+    API Keys for [% INCLUDE 'patron-title.inc' %]
 </div>
 
 <div id="doc3" class="yui-t2">
-  <div id="bd">
-    <div id="yui-main">
-      <div class="yui-b">
-        [% INCLUDE 'members-toolbar.inc' %]
+    <div id="bd">
+        <div id="yui-main">
+            <div class="yui-b">
+                [% INCLUDE 'members-toolbar.inc' %]
 
-        <h1>API keys for [% INCLUDE 'patron-title.inc' %]</h1>
-        <div>
-          <form action="/cgi-bin/koha/members/apikeys.pl" method="post">
-            <input type="hidden" name="patron_id" value="[% patron.id %]">
-            <input type="hidden" name="op" value="generate">
-            <label for="description">Description: </label>
-            <input type="text" name="description">
-            <button class="btn btn-default btn-sm" type="submit"><i class="fa fa-plus"></i> Generate a new key</span></button>
-          </form>
+                <h1>API keys for [% INCLUDE 'patron-title.inc' %]</h1>
+                <form id="add-api-key" action="/cgi-bin/koha/members/apikeys.pl" method="post" style="display:none">
+                    <input type="hidden" name="patron_id" value="[% patron.id %]" />
+                    <input type="hidden" name="op" value="generate" />
+                    <fieldset class="brief">
+                        <legend>Generate new key</legend>
+                        <ol>
+                            <li>
+                                <label for="description">Description: </label>
+                                <input type="text" name="description" />
+                                <input type="submit" value="Save" />
+                                <a href="#" class="cancel toggle_element" data-element="#add-api-key">Cancel</a>
+                            </li>
+                        </ol>
+                    </fieldset>
+                </form>
+
+                <div id="keys">
+                    [% IF api_keys && api_keys.size > 0 %]
+                        <p>
+                            <button class="btn btn-default btn-xs toggle_element" type="submit" id="show-api-form" data-element="#add-api-key"><i class="fa fa-plus"></i> Generate a new key</button>
+                        </p>
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Key</th>
+                                    <th>Active</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                [% FOREACH key IN api_keys %]
+                                    <tr>
+                                        <td>[% key.description %]</td>
+                                        <td>[% key.value %]</td>
+                                        <td>[% IF key.active %]Yes[% ELSE %]No[% END %]</td>
+                                        <td>
+                                            <form action="/cgi-bin/koha/members/apikeys.pl" method="post">
+                                                <input type="hidden" name="patron_id" value="[% patron.id %]" />
+                                                <input type="hidden" name="key" value="[% key.value %]" />
+                                                <input type="hidden" name="op" value="delete" />
+                                                <button class="btn btn-default btn-xs delete" type="submit"><i class="fa fa-trash"></i> Delete</button>
+                                            </form>
+                                            <form action="/cgi-bin/koha/members/apikeys.pl" method="post">
+                                                <input type="hidden" name="patron_id" value="[% patron.id %]" />
+                                                <input type="hidden" name="key" value="[% key.value %]" />
+                                                [% IF key.active %]
+                                                    <input type="hidden" name="op" value="revoke" />
+                                                    <button class="btn btn-default btn-xs" type="submit"><i class="fa fa-remove"></i> Revoke</button>
+                                                [% ELSE %]
+                                                    <input type="hidden" name="op" value="activate" />
+                                                    <button class="btn btn-default btn-xs" type="submit"><i class="fa fa-play"></i> Activate</button>
+                                                [% END %]
+                                            </form>
+                                        </td>
+                                    </tr>
+                                [% END %]
+                            </tbody>
+                        </table>
+                    [% ELSE %]
+                        <div class="dialog message">No keys defined for the current patron. <a href="#" class="toggle_element" data-element="#add-api-key" id="show-api-form"><i class="fa fa-plus"></i> Generate a new key</div>
+                    [% END %]
+                </div>
+            </div>
         </div>
-
-        <br/>
-
-        <div id="keys">
-        [% IF api_keys && api_keys.size > 0 %]
-          <table>
-            <thead>
-              <tr>
-                <th>Description</th>
-                <th>Key</th>
-                <th>Active</th>
-                <th>Actions</th>
-              </tr>
-            </thead>
-            <tbody>
-              [% FOREACH key IN api_keys %]
-                <tr>
-                  <td>[% key.description %]</td>
-                  <td>[% key.value %]</td>
-                  <td>[% IF key.active %]Yes[% ELSE %]No[% END %]</td>
-                  <td>
-                    <form action="/cgi-bin/koha/members/apikeys.pl" method="post">
-                      <input type="hidden" name="patron_id" value="[% patron.id %]">
-                      <input type="hidden" name="key" value="[% key.value %]">
-                      <input type="hidden" name="op" value="delete">
-                      <button class="btn btn-default btn-sm" type="submit">Delete</button>
-                    </form>
-                    <form action="/cgi-bin/koha/members/apikeys.pl" method="post">
-                      <input type="hidden" name="patron_id" value="[% patron.id %]">
-                      <input type="hidden" name="key" value="[% key.value %]">
-                      [% IF key.active %]
-                        <input type="hidden" name="op" value="revoke">
-                        <button class="btn btn-default btn-sm" type="submit">Revoke</button>
-                      [% ELSE %]
-                        <input type="hidden" name="op" value="activate">
-                        <button class="btn btn-default btn-sm" type="submit">Activate</button>
-                      [% END %]
-                    </form>
-                  </td>
-                </tr>
-              [% END %]
-            </tbody>
-          </table>
-        [% ELSE %]
-            <span class="warn">No keys defined for the current patron.</span>
-        [% END %]
+        <div class="yui-b">
+            [% INCLUDE 'circ-menu.inc' %]
         </div>
-      </div>
     </div>
-    <div class="yui-b">
-      [% INCLUDE 'circ-menu.inc' %]
-    </div>
-  </div>
+
+[% MACRO jsinclude BLOCK %]
+        <script>
+            $(document).ready(function(){
+                $(".delete").on("click", function(e){
+                    return confirmDelete(_("Are you sure you want to delete this key?"));
+                });
+            });
+        </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]
diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-apikeys.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-apikeys.tt
index 13be49b58d..7feecdcda5 100644
--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-apikeys.tt
+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-apikeys.tt
@@ -10,10 +10,10 @@
     <ul class="breadcrumb">
         <li><a href="/cgi-bin/koha/opac-main.pl">Home</a> <span class="divider">&rsaquo;</span></li>
         <li>
-          <a href="/cgi-bin/koha/opac-user.pl">
-            [% INCLUDE 'patron-title.inc' category_type=patron.category.category_type firstname=patron.firstname surname=patron.surname othernames=patron.othernames %]
-          </a>
-          <span class="divider">&rsaquo;</span>
+            <a href="/cgi-bin/koha/opac-user.pl">
+                [% INCLUDE 'patron-title.inc' category_type=patron.category.category_type firstname=patron.firstname surname=patron.surname othernames=patron.othernames %]
+            </a>
+            <span class="divider">&rsaquo;</span>
         </li>
         <li><a href="/cgi-bin/koha/opac-apikeys.pl">Your API keys</a></li>
     </ul>
@@ -27,61 +27,79 @@
             </div>
             <div class="span10">
                 <div id="apikeys" class="maincontent">
-                  <h1>Your API keys</h1>
-                  <div>
-                    <form action="/cgi-bin/koha/opac-apikeys.pl" method="post">
-                        <input type="hidden" name="patron_id" value="[% patron.id %]">
-                        <input type="hidden" name="op" value="generate">
-                        <label for="description">Description: </label>
-                        <input type="text" name="description">
-                        <button class="btn btn-default btn-sm" type="submit"><i class="fa fa-plus"></i> Generate a new key</span></button>
+                    <h1>Your API keys</h1>
+                    <p>
+                        <button id="show-api-form" style="display:none" class="btn btn-default btn-sm" type="button"><i class="fa fa-plus"></i> Generate new key</button>
+                    </p>
+                    <form id="add-api-key" action="/cgi-bin/koha/opac-apikeys.pl" method="post">
+                        <fieldset>
+                            <legend>Generate new key</legend>
+                            <input type="hidden" name="patron_id" value="[% patron.id %]" />
+                            <input type="hidden" name="op" value="generate" />
+                            <label for="description">Description: </label>
+                            <input type="text" name="description" />
+                        </fieldset>
+                        <fieldset class="action">
+                            <button class="btn btn-default btn-sm" type="submit">Save</button> <a href="#" style="display:none" class="cancel cancel-api-key">Cancel</a>
+                        </fieldset>
                     </form>
-                  </div>
-                  [% IF api_keys && api_keys.size > 0 %]
-                    <table class="table table-bordered table-striped">
-                      <thead>
-                        <tr>
-                          <th>Description</th>
-                          <th>Key</th>
-                          <th>Active</th>
-                          <th>Actions</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        [% FOREACH key IN api_keys %]
-                          <tr>
-                            <td>[% key.description %]</td>
-                            <td>[% key.value %]</td>
-                            <td>[% IF key.active %]Yes[% ELSE %]No[% END %]</td>
-                            <td>
-                              <form action="/cgi-bin/koha/opac-apikeys.pl" method="post" class="form-inline">
-                                <input type="hidden" name="key" value="[% key.value %]">
-                                <input type="hidden" name="op" value="delete">
-                                <button class="btn btn-default btn-sm" type="submit">Delete</button>
-                              </form>
-                              <form action="/cgi-bin/koha/opac-apikeys.pl" method="post" class="form-inline">
-                                <input type="hidden" name="key" value="[% key.value %]">
-                                [% IF key.active %]
-                                  <input type="hidden" name="op" value="revoke">
-                                  <button class="btn btn-default btn-sm" type="submit">Revoke</button>
-                                [% ELSE %]
-                                  <input type="hidden" name="op" value="activate">
-                                  <button class="btn btn-default btn-sm" type="submit">Activate</button>
+                    [% IF api_keys && api_keys.size > 0 %]
+                        <table class="table table-bordered table-striped">
+                            <thead>
+                                <tr>
+                                    <th>Description</th>
+                                    <th>Key</th>
+                                    <th>Active</th>
+                                    <th>Actions</th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                [% FOREACH key IN api_keys %]
+                                    <tr>
+                                        <td>[% key.description %]</td>
+                                        <td>[% key.value %]</td>
+                                        <td>[% IF key.active %]Yes[% ELSE %]No[% END %]</td>
+                                        <td>
+                                            <form action="/cgi-bin/koha/opac-apikeys.pl" method="post" class="form-inline">
+                                                <input type="hidden" name="key" value="[% key.value %]" />
+                                                <input type="hidden" name="op" value="delete" />
+                                                <button class="btn btn-link btn-xs delete-key" type="submit"><i class="fa fa-trash"></i> Delete</button>
+                                            </form>
+                                            <form action="/cgi-bin/koha/opac-apikeys.pl" method="post" class="form-inline">
+                                                <input type="hidden" name="key" value="[% key.value %]" />
+                                                [% IF key.active %]
+                                                    <input type="hidden" name="op" value="revoke" />
+                                                    <button class="btn btn-link btn-xs" type="submit"><i class="fa fa-remove"></i> Revoke</button>
+                                                [% ELSE %]
+                                                    <input type="hidden" name="op" value="activate" />
+                                                    <button class="btn btn-link btn-xs" type="submit"><i class="fa fa-play"></i> Activate</button>
+                                                [% END %]
+                                            </form>
+                                        </td>
+                                    </tr>
                                 [% END %]
-                              </form>
-                            </td>
-                          </tr>
-                        [% END %]
-                      </tbody>
-                    </table>
-                  [% ELSE %]
-                    <span class="warn">No keys defined for the current patron.</span>
-                  [% END %]
+                            </tbody>
+                        </table>
+                    [% ELSE %]
+                        <p>No keys defined for the current patron.</p>
+                    [% END %]
                 </div> <!-- /#apikeys -->
             </div> <!-- /.span10 -->
         </div> <!-- /.row-fluid -->
     </div> <!-- /.container-fluid -->
 </div> <!-- /#main -->
 
-[% BLOCK jsinclude %][% END %]
+[% BLOCK jsinclude %]
+    <script>
+        $(document).ready(function(){
+            $("#add-api-key, #show-api-form, .cancel-api-key").toggle();
+            $("#show-api-form, .cancel-api-key").on("click", function(){
+                $("#add-api-key, #show-api-form").toggle();
+            });
+            $(".delete-key").on("click", function(){
+                return confirm(_("Are you sure you want to delete this key?"));
+            });
+        });
+    </script>
+[% END %]
 [% INCLUDE 'opac-bottom.inc' %]
diff --git a/opac/opac-apikeys.pl b/opac/opac-apikeys.pl
index 5dbd18ccb4..7a776f3063 100755
--- a/opac/opac-apikeys.pl
+++ b/opac/opac-apikeys.pl
@@ -40,7 +40,7 @@ my $patron_id = $loggedinuser;
 my $patron = Koha::Patrons->find( $patron_id );
 
 if ( not defined $patron
-    or C4::Context->preference('AllowPatronsManageAPIKeysInOPAC') )
+    or !C4::Context->preference('AllowPatronsManageAPIKeysInOPAC') )
 {
     # patron_id invalid -> exit
     print $cgi->redirect("/cgi-bin/koha/errors/404.pl");    # escape early