diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000..8af7cf0
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,37 @@
+.content {
+        width: 300px;
+        margin: 0 auto;
+    }
+    input.url_input {
+        width: 190px;
+    }
+    .title {
+        padding-bottom: 10px;
+     }
+    .url_data {
+        padding-top: 10px;
+     }
+     button.copy_short_url {
+         width: 32px;
+         height:32px;
+         padding: 0px;
+         margin: 0;
+         margin-left: 10px;
+     }
+     button.copy_short_url > img {
+        display: block;
+        width: 28px;
+        height: 28px;
+        padding: 0px;
+        margin: 0;
+        margin-left: -6px;
+        margin-top: -4px;
+    }
+    div.short_url_text {
+        width: 205px;
+        height: 32px;
+        padding: 5px;
+        box-sizing: border-box;
+        margin: 0;
+        float: left;
+    }
\ No newline at end of file
diff --git a/templates/index.html.ep b/templates/index.html.ep
index c10db1f..6ba72fc 100644
--- a/templates/index.html.ep
+++ b/templates/index.html.ep
@@ -1,46 +1,8 @@
 <!DOCTYPE HTML>
 <html lang="en">
 <head>
-<meta charset="utf-8">
-<style type="text/css" media="screen">
-    .content {
-        width: 100%
-    }
-    .shorten_form {
-        width: 50%;
-        margin: 0 auto;
-    }
-    .title {
-        width: 50%;
-        margin: 0 auto;
-        padding-bottom: 10px;
-     }
-    .url_data {
-        width: 50%;
-        margin: 0 auto;
-     }
-     button.copy_short_url {
-         width: 32px;
-         height:32px;
-         padding: 0px;
-         margin: 0;
-         margin-left: 10px;
-     }
-     button.copy_short_url > img {
-        display: block;
-        width: 28px;
-        height: 28px;
-        padding: 0px;
-        margin: 0;
-        margin-left: -6px;
-        margin-top: -4px;
-    }
-    textarea.short_url_text {
-        width: 300px;
-        height: 32px;
-    }
-
-</style>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="/css/main.css" media="screen">
 </head>
 <body>
 <div class=content>
@@ -49,14 +11,14 @@
     </div>
     <div class=shorten_form>
         <form method=post>
-            <input type=text name=url>
+            <input type=text name=url class="url_input">
             <input type=submit value=short!>
         </form>
     </div>
     <% if (exists($page_data->{'url'})) { %>
         <div class=url_data>
             <p>source url: <a href='<%== $page_data->{'url'} %>'><%= $page_data->{'url'} %></a></p>
-            <p><textarea autofocus class=short_url_text><%= $page_data->{'shorten_url'} %></textarea><button class="copy_short_url"><img src="/icons/copy2.png"></button></p>
+            <p><div class=short_url_text ><%= $page_data->{'shorten_url'} %></div><button class="copy_short_url"><img src="/icons/copy2.png"></button></p>
         </div>
     <% } %>
 </div>
