diff --git a/app/views/my/_sidebar.html.erb b/app/views/my/_sidebar.html.erb
index e962538b5..0a0d4e9da 100644
--- a/app/views/my/_sidebar.html.erb
+++ b/app/views/my/_sidebar.html.erb
@@ -21,10 +21,13 @@
 <% if Setting.rest_api_enabled? %>
 <h4><%= l(:label_api_access_key) %></h4>
 <div>
-  <%= link_to l(:button_show), my_api_key_path, :remote => true %>
-  <pre id='api-access-key' class='autoscroll'></pre>
+  <%= link_to l(:button_show), my_api_key_path, :remote => true, :id => 'toggle-api-access-key' %>
+  <%= link_to_function l(:button_copy), "copyTextToClipboard(getElementById('api-access-key'))",
+                       :id => 'copy-api-access-key',
+                       :class => ['icon', 'icon-copy'],
+                       :style => 'display:none;' %>
+  <pre id='api-access-key' class='autoscroll' style="display:none;"></pre>
 </div>
-<%= javascript_tag("$('#api-access-key').hide();") %>
 <p>
 <% if @user.api_token %>
 <%= l(:label_api_access_key_created_on, distance_of_time_in_words(Time.now, @user.api_token.created_on)) %>
diff --git a/app/views/my/show_api_key.js.erb b/app/views/my/show_api_key.js.erb
index 73b0ee029..8e1fd78d6 100644
--- a/app/views/my/show_api_key.js.erb
+++ b/app/views/my/show_api_key.js.erb
@@ -1 +1,11 @@
-$('#api-access-key').html('<%= escape_javascript @user.api_key %>').toggle();
+var api_access_key = '<%= escape_javascript @user.api_key %>';
+$('#api-access-key').html(api_access_key);
+$('#api-access-key').attr('data-clipboard-text', api_access_key);
+$('#api-access-key, #copy-api-access-key').toggle();
+var label_show = '<%= escape_javascript l(:button_show) %>';
+if($('#toggle-api-access-key').text() == label_show){
+  $('#toggle-api-access-key').text('<%= escape_javascript l(:button_hide) %>');
+}
+else{
+  $('#toggle-api-access-key').text(label_show);
+}
diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css
index 0c4102459..e6ff98251 100644
--- a/public/stylesheets/application.css
+++ b/public/stylesheets/application.css
@@ -111,6 +111,7 @@ div#wrapper, div#wrapper2, div#wrapper3 { min-height: inherit; }
 #sidebar a.icon-only:hover {opacity: 1;}
 #sidebar span.icon-warning {margin-left: 5px;}
 #sidebar li input[type=checkbox] {height: 20px;}
+#sidebar #copy-api-access-key {float:right;}
 
 #content { flex-grow: 1; background-color: #fff; margin: 0px; padding: 10px 16px 10px 16px; overflow-x: auto;}
 html>body #content { min-height: 600px; }