diff --git a/server.go b/server.go
index f920e57..2606c6b 100644
--- a/server.go
+++ b/server.go
@@ -167,9 +167,11 @@ func (s *Server) ViewHandler() httprouter.Handle {
 			struct {
 				ID  string
 				URL string
+				Ori string
 			}{
 				ID:  u.ID,
 				URL: fullURL.String(),
+				Ori: u.URL,
 			},
 		)
 	}
diff --git a/templates/edit.html b/templates/edit.html
index 4ae9379..c3adb33 100644
--- a/templates/edit.html
+++ b/templates/edit.html
@@ -6,8 +6,8 @@
       <form class="mt-10" action="/e/{{.ID}}" method="POST">
         <div class="form-group input-group">
           <input class="form-input column col-1" type="text" name="id" value="{{.ID}}" />
-          <input class="form-input" type="text" name="url" value="{{.URL}}" placeholder="Enter long url here..." />
-          <button class="btn btn-primary" type="submit">Edit</button>
+          <input class="form-input" id="input-url" type="text" name="url" value="{{.URL}}" placeholder="Enter long url here..." />
+          <button class="btn btn-primary" id="submit" type="submit">OK</button>
           <a class="btn btn-action" href="/u/{{.ID}}">
             <i class="icon icon-forward">View</i>
           </a>
@@ -17,3 +17,20 @@
   </div>
 </section>
 {{end}}
+{{define "scripts"}}
+<script src="/js/jquery.min.js"></script>
+<script>
+$(document).ready(function() {
+  $("#input-url").focus(function() {
+    $("#submit").removeAttr("data-tooltip", "Please enter long url").removeClass("tooltip tooltip-left");
+  });
+
+  $("#submit").click(function() {
+    if ($("#input-url").val().trim() === "") {
+      $(this).attr("data-tooltip", "Please enter long url").addClass("tooltip tooltip-left");
+      return false;
+    }
+  });
+});
+</script>
+{{end}}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index 9446c45..b822c85 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -3,31 +3,51 @@
   <div class="columns">
     <div class="column">
       {{ range $URL := .URLList }}
-        <div class="input-group mb-5">
-          <span class="input-group-addon d-inline-block">
-            {{ $URL.ID }}
-            <i class="icon icon-forward"></i>
-            {{ $URL.URL -}}
-          </span>
-          <a class="btn btn-action btn-primary" href="/u/{{$URL.ID}}">
+      <div class="input-group col-12">
+        <span class="input-group-addon col-8 d-inline-block text-ellipsis">
+          {{ $URL.ID }}
+          <i class="icon icon-forward"></i>
+          {{ $URL.URL -}}
+        </span>
+        <div class="popover popover-right">
+          <a class="btn btn-action btn-primary tooltip tooltip-left" data-tooltip="View Detail" href="/u/{{$URL.ID}}">
             <i class="icon icon-forward">View</i>
           </a>
-          <a class="btn btn-action" href="/e/{{$URL.ID}}">
-            <i class="icon icon-edit">Edit</i>
-          </a>
-          <a class="btn btn-action" href="/d/{{$URL.ID}}">
-            <i class="icon icon-delete">Delete</i>
-          </a>
         </div>
+        <a class="btn btn-action hide-md" href="/e/{{$URL.ID}}">
+          <i class="icon icon-edit">Edit</i>
+        </a>
+        <a class="btn btn-action hide-lg" href="/d/{{$URL.ID}}">
+          <i class="icon icon-delete">Delete</i>
+        </a>
+      </div>
       {{end}}
       <form class="mt-10" action="" method="POST">
         <div class="form-group input-group">
           <label class="form-label" for="input-url"></label>
-          <input class="form-input" id="input-url" type="text" name="url" placeholder="Enter long url here..." autofocus>
-          <button class="btn btn-primary" type="submit">Shorten</button>
+          <input class="form-input" id="input-url" type="text" name="url" placeholder="Enter long url here..."
+            autofocus>
+          <button class="btn btn-primary" id="submit" type="submit">Shorten</button>
         </div>
       </form>
     </div>
   </div>
 </section>
 {{end}}
+{{define "scripts"}}
+<script src="/js/jquery.min.js"></script>
+<script>
+$(document).ready(function() {
+  $("#input-url").focus(function() {
+    $("#submit").removeAttr("data-tooltip", "Please enter long url").removeClass("tooltip tooltip-left");
+  });
+
+  $("#submit").click(function() {
+    if ($("#input-url").val().trim() === "") {
+      $(this).attr("data-tooltip", "Please enter long url").addClass("tooltip tooltip-left");
+      return false;
+    }
+  });
+});
+</script>
+{{end}}
\ No newline at end of file
diff --git a/templates/view.html b/templates/view.html
index 392e3f8..35a17d5 100644
--- a/templates/view.html
+++ b/templates/view.html
@@ -2,9 +2,10 @@
 <section class="container">
   <div class="columns">
     <div class="column">
-       <p>Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
+       <p class="text-ellipsis text-secondary">Your short url is: <a href="/r/{{.ID}}">{{.ID}}</a></p>
+       <p class="text-ellipsis text-secondary">Your full url is: <a href="{{.Ori}}">{{.Ori}}</a></p>
        <div class="form-group input-group">
-         <input class="form-input" id="input-url" value="{{.URL}}" readonly />
+         <input class="form-input text-ellipsis" id="input-url" value="{{.URL}}" readonly />
          <button class="btn btn-primary hide" id="btn-copy" data-clipboard-target="#input-url">Copy</button>
          <a class="btn btn-action" href="/e/{{.ID}}">
           <i class="icon icon-edit">Edit</i>
@@ -30,6 +31,12 @@ $(document).ready(function() {
     }, timeout || 3000);
   };
 
+  var padShortURL = function() {
+    var domain = window.location.origin;
+    var short = $("#input-url").val().replace(domain, "");
+    $("#input-url").val(domain + short);
+  };
+
   clipboard.on("success", function(e) {
     e.clearSelection();
     displayTooltip("#btn-copy", "Copied!");
@@ -40,6 +47,8 @@ $(document).ready(function() {
   });
 
   $("#btn-copy").removeClass("hide");
+
+  padShortURL();
 });
 </script>
 {{end}}