diff --git a/src/main/resources/static/css/base.css b/src/main/resources/static/css/base.css
index 5f78068..0d2a556 100644
--- a/src/main/resources/static/css/base.css
+++ b/src/main/resources/static/css/base.css
@@ -1,5 +1,4 @@
 body {
-    box-sizing: border-box;
     width: 100vw;
     height: 100vh;
     margin: 0;
@@ -13,6 +12,9 @@ body {
     );
     background-size: 200% 200%;
     animation: gradient-move 15s ease alternate infinite;
+    font-family: Roboto;
+    -webkit-text-size-adjust: 100%;
+    -webkit-font-smoothing: antialiased;
 }
 
 @keyframes gradient-move {
@@ -29,4 +31,111 @@ body {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
+}
+
+button {
+    width: 100%;
+    background-color: #3498db;
+    border: 0;
+    padding: 10px 0;
+    margin: 10px 0;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+}
+
+.inp * {
+    box-sizing: border-box;
+}
+
+.inp {
+    display: grid;
+    position: relative;
+    margin: auto;
+    width: 800px;
+    border-radius: 3px;
+    overflow: hidden;
+}
+
+.inp.short {
+    display: block;
+    width: 300px;
+}
+
+.inp .label {
+    position: absolute;
+    top: 20px;
+    left: 12px;
+    font-size: 16px;
+    color: rgba(0, 0, 0, 0.5);
+    font-weight: 500;
+    transform-origin: 0 0;
+    transform: translate3d(0, 0, 0);
+    transition: all 0.2s ease;
+    pointer-events: none;
+}
+
+.inp .focus-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.05);
+    z-index: -1;
+    transform: scaleX(0);
+    transform-origin: left;
+}
+
+.inp input {
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    width: 100%;
+    border: 0;
+    font-family: inherit;
+    padding: 16px 12px 0 12px;
+    height: 56px;
+    font-size: 16px;
+    font-weight: 400;
+    background: rgba(0, 0, 0, 0.02);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.3);
+    color: #000;
+    transition: all 0.15s ease;
+}
+
+.inp input:hover {
+    background: rgba(0, 0, 0, 0.04);
+    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
+.inp input:not(:-moz-placeholder-shown) + .label {
+    color: rgba(0, 0, 0, 0.5);
+    transform: translate3d(0, -12px, 0) scale(0.75);
+}
+
+.inp input:not(:-ms-input-placeholder) + .label {
+    color: rgba(0, 0, 0, 0.5);
+    transform: translate3d(0, -12px, 0) scale(0.75);
+}
+
+.inp input:not(:placeholder-shown) + .label {
+    color: rgba(0, 0, 0, 0.5);
+    transform: translate3d(0, -12px, 0) scale(0.75);
+}
+
+.inp input:focus {
+    background: rgba(0, 0, 0, 0.05);
+    outline: none;
+    box-shadow: inset 0 -2px 0 #0077FF;
+}
+
+.inp input:focus + .label {
+    color: #0077FF;
+    transform: translate3d(0, -12px, 0) scale(0.75);
+}
+
+.inp input:focus + .label + .focus-bg {
+    transform: scaleX(1);
+    transition: all 0.1s ease;
 }
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index fbc9b55..74f8eb8 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -7,11 +7,23 @@
 </head>
 <body>
 	<div class="box">
-		<input type="text" id="long">
-		<button type="button" id="generate">生成</button>
-		<input type="text" id="short">
+		<label for="long" class="inp">
+			<input type="text" id="long" placeholder="&nbsp;">
+			<span class="label">长链接</span>
+			<span class="focus-bg"></span>
+		</label>
+		<button type="button" id="generate">生成短链接</button>
+		<div style="text-align: center;">
+			<label for="short" class="inp short">
+				<input type="text" id="short" placeholder="&nbsp;">
+				<span class="label">短链接</span>
+				<span class="focus-bg"></span>
+			</label>
+			<button type="button" id="copy" style="width:100px;" data-clipboard-action="copy" data-clipboard-target="#short">Copy</button>
+		</div>
 	</div>
 	<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
+	<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.8/dist/clipboard.min.js"></script>
 	<script>
 		$('#generate').click(() => {
 			let longURL = $('#long').val();
@@ -31,6 +43,14 @@
 				alert('请输入原始链接');
 			}
 		})
+		let clipboard = new ClipboardJS('#copy');
+		clipboard.on('success', function (e) {
+			e.clearSelection();
+			$('#copy').text('Copied!');
+			setTimeout(() => {
+				$('#copy').text('Copy');
+			}, 2000)
+		});
 	</script>
 </body>
 </html>
\ No newline at end of file
