diff --git a/index.html b/index.html
index 487ea61..534704f 100644
--- a/index.html
+++ b/index.html
@@ -2,45 +2,221 @@
 <html>
 <head>
 	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>GitHub &amp; BitBucket HTML Preview</title>
 	<style>
-	body {
-		font: 12px 'Helvetica Neue', Helvetica, Arial, freesans, clean, sans-serif;
-		color: #333;
-	}
-	h1 {
-		font-size: 20px;
-	}
-	a {
-		color: #666;
-	}
-	#previewform {
-		display: none;
-		padding: 20px; 
-		text-align: center;
-	}
-	strong {
-		color: #333;
-		background-color: #FAFFA6;
-		padding: 0.1em;
-	}
-	#footer {
-		margin: 20px 0;
-		font-size: 10px;
-		color: #666;
-	}
+		* {
+			margin: 0;
+			padding: 0;
+			box-sizing: border-box;
+		}
+
+		body {
+			font: 16px 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			min-height: 100vh;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			color: #2d3748;
+			padding: 20px;
+		}
+
+		#previewform {
+			display: block;
+			max-width: 700px;
+			width: 100%;
+			margin: 0 auto;
+			padding: 40px;
+			background: rgba(255, 255, 255, 0.95);
+			border-radius: 20px;
+			box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+			backdrop-filter: blur(10px);
+			transition: transform 0.3s ease, box-shadow 0.3s ease;
+		}
+
+		#previewform:hover {
+			transform: translateY(-5px);
+			box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4);
+		}
+
+		h1 {
+			font-size: 32px;
+			font-weight: 700;
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			-webkit-background-clip: text;
+			background-clip: text;
+			color: transparent;
+			margin-bottom: 20px;
+			text-align: center;
+		}
+
+		p {
+			margin: 20px 0;
+			line-height: 1.6;
+		}
+
+		a {
+			color: #667eea;
+			text-decoration: none;
+			font-weight: 500;
+			transition: color 0.3s ease;
+			border-bottom: 2px solid transparent;
+		}
+
+		a:hover {
+			color: #764ba2;
+			border-bottom-color: #764ba2;
+		}
+
+		strong {
+			color: #fff;
+			background: linear-gradient(135deg, #667eea, #764ba2);
+			padding: 0.2em 0.4em;
+			border-radius: 6px;
+			font-weight: 600;
+			display: inline-block;
+		}
+
+		#footer {
+			margin: 30px 0 0;
+			font-size: 12px;
+			color: #a0aec0;
+			text-align: center;
+			border-top: 1px solid #e2e8f0;
+			padding-top: 20px;
+		}
+
+		input[type="url"] {
+			width: 100%;
+			padding: 14px 18px;
+			font-size: 14px;
+			border: 2px solid #e2e8f0;
+			border-radius: 12px;
+			background: white;
+			transition: all 0.3s ease;
+			font-family: inherit;
+			margin: 10px 0;
+		}
+
+		input[type="url"]:focus {
+			outline: none;
+			border-color: #667eea;
+			box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+		}
+
+		input[type="submit"] {
+			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+			color: white;
+			border: none;
+			padding: 14px 32px;
+			font-size: 16px;
+			font-weight: 600;
+			border-radius: 12px;
+			cursor: pointer;
+			transition: transform 0.2s ease, box-shadow 0.2s ease;
+			font-family: inherit;
+			width: auto;
+			min-width: 150px;
+		}
+
+		input[type="submit"]:hover {
+			transform: translateY(-2px);
+			box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+		}
+
+		input[type="submit"]:active {
+			transform: translateY(0);
+		}
+
+		code {
+			background: #f7fafc;
+			padding: 4px 8px;
+			border-radius: 6px;
+			font-family: 'Courier New', monospace;
+			font-size: 13px;
+			color: #667eea;
+			border: 1px solid #e2e8f0;
+		}
+
+		.input-group {
+			display: flex;
+			gap: 12px;
+			align-items: center;
+			flex-wrap: wrap;
+			margin: 20px 0;
+		}
+
+		.input-group input[type="url"] {
+			flex: 1;
+			min-width: 200px;
+		}
+
+		.badge {
+			display: inline-block;
+			background: #edf2f7;
+			color: #4a5568;
+			padding: 4px 8px;
+			border-radius: 6px;
+			font-size: 12px;
+			font-weight: 500;
+		}
+
+		@media (max-width: 640px) {
+			#previewform {
+				padding: 24px;
+			}
+
+			h1 {
+				font-size: 24px;
+			}
+
+			.input-group {
+				flex-direction: column;
+			}
+
+			input[type="submit"] {
+				width: 100%;
+			}
+		}
+
+		@keyframes fadeIn {
+			from {
+				opacity: 0;
+				transform: translateY(20px);
+			}
+			to {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+
+		#previewform {
+			animation: fadeIn 0.6s ease-out;
+		}
 	</style>
 </head>
 <body>
 	<form id="previewform" onsubmit="location.href='/?'+this.file.value;return false">
-		<h1>GitHub &amp; BitBucket HTML Preview</h1>
-		<p>
-			Enter URL of the HTML file to preview:
-			<input type="url" id="file" value="" placeholder="e.g. https://github.com/user/repo/blob/master/index.html" size="60" autofocus>
-			<input type="submit" value="Preview">
+		<h1>🚀 GitHub &amp; BitBucket HTML Preview</h1>
+		<p style="text-align: center; color: #718096;">
+			Preview HTML files from GitHub or BitBucket instantly
+		</p>
+		
+		<div class="input-group">
+			<input type="url" id="file" value="" placeholder="https://github.com/user/repo/blob/master/index.html" autofocus>
+			<input type="submit" value="Preview →">
+		</div>
+		
+		<p style="font-size: 14px;">
+			💡 <strong>Quick tip</strong> — Just prepend to any GitHub HTML file URL:<br>
+			<code>http://htmlpreview.github.io/?</code><span class="badge">your-file-url</span>
+		</p>
+		
+		<p id="footer">
+			Developed with ❤️ by <a href="https://github.com/niutech">niu tech</a> | 
+			Contribute on <a href="https://github.com/htmlpreview/htmlpreview.github.com">GitHub</a>
 		</p>
-		<p>or prepend to the URL: <code><strong>http://htmlpreview.github.io/?</strong>https://github.com/twbs/bootstrap/blob/gh-pages/2.3.2/index.html</code></p>
-		<p id="footer">Developed by <a href="https://github.com/niutech">niu tech</a> | Contribute on <a href="https://github.com/htmlpreview/htmlpreview.github.com">GitHub</a></p>
 	</form>
 	<script src="/htmlpreview.js"></script>
 </body>
