diff --git a/public/css/main.css b/public/css/main.css
index 8af7cf0..1aa525d 100644
--- a/public/css/main.css
+++ b/public/css/main.css
@@ -12,26 +12,25 @@
         padding-top: 10px;
      }
      button.copy_short_url {
-         width: 32px;
-         height:32px;
+         width:58px;
+         height:28px;
          padding: 0px;
-         margin: 0;
-         margin-left: 10px;
+         margin: 0 0 0 5px;
      }
      button.copy_short_url > img {
         display: block;
-        width: 28px;
-        height: 28px;
+        width: 23px;
+        height: 23px;
         padding: 0px;
-        margin: 0;
-        margin-left: -6px;
-        margin-top: -4px;
+        margin: -2px 0 0 14px;
     }
     div.short_url_text {
-        width: 205px;
-        height: 32px;
+        width: 203px;
+        height: 28px;
         padding: 5px;
         box-sizing: border-box;
         margin: 0;
         float: left;
+        border: 1px solid #c3bbbb;
+        border-radius: 2px
     }
\ No newline at end of file
diff --git a/templates/index.html.ep b/templates/index.html.ep
index 6ba72fc..fe520ea 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -18,26 +18,25 @@
     <% if (exists($page_data->{'url'})) { %>
         <div class=url_data>
             <p>source url: <a href='<%== $page_data->{'url'} %>'><%= $page_data->{'url'} %></a></p>
-            <p><div class=short_url_text ><%= $page_data->{'shorten_url'} %></div><button class="copy_short_url"><img src="/icons/copy2.png"></button></p>
+            <p><div id='short_url_container' class=short_url_text ><%= $page_data->{'shorten_url'} %></div>
+            <button class="copy_short_url" onclick="CopyToClipboard('short_url_container')"><img src="/icons/copy2.png"></button></p>
         </div>
     <% } %>
 </div>
 </body>
 <script>
-var copyTextareaBtn = document.querySelector('.copy_short_url');
+function CopyToClipboard(containerid) {
+if (document.selection) {
+    var range = document.body.createTextRange();
+    range.moveToElementText(document.getElementById(containerid));
+    range.select().createTextRange();
+    document.execCommand("copy");
 
-copyTextareaBtn.addEventListener('click', function(event) {
-  var copyTextarea = document.querySelector('.short_url_text');
-  copyTextarea.focus();
-  copyTextarea.select();
-
-  try {
-    var successful = document.execCommand('copy');
-    var msg = successful ? 'successful' : 'unsuccessful';
-    console.log('Copying text command was ' + msg);
-  } catch (err) {
-    console.log('Oops, unable to copy');
-  }
-});
+} else if (window.getSelection) {
+    var range = document.createRange();
+     range.selectNode(document.getElementById(containerid));
+     window.getSelection().addRange(range);
+     document.execCommand("copy");
+}}
 </script>
 </html>
\ No newline at end of file