diff --git a/index.html b/index.html
index 487ea61..71d883f 100644
--- a/index.html
+++ b/index.html
@@ -1,47 +1,184 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
 <head>
 	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 	<title>GitHub &amp; BitBucket HTML Preview</title>
+	
+	<!-- 
+		FIX 1: Favicon 404 
+		Embedded SVG data URI prevents the browser from requesting /favicon.ico 
+	-->
+
 	<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;
-	}
+		/* 
+			Humane Dark Theme 
+			No neon, no gradients. Clean, flat, professional.
+		*/
+		:root {
+			--bg-body: #0d1117;
+			--bg-card: #161b22;
+			--border-color: #30363d;
+			--text-primary: #c9d1d9;
+			--text-secondary: #8b949e;
+			--accent-color: #58a6ff;
+			--input-bg: #0d1117;
+			--code-bg: #21262d;
+			--btn-primary: #238636;
+			--btn-hover: #2ea043;
+			--font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+		}
+
+		body {
+			font-family: var(--font-stack);
+			background-color: var(--bg-body);
+			color: var(--text-primary);
+			margin: 0;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			min-height: 100vh;
+			line-height: 1.5;
+		}
+
+		.container {
+			width: 100%;
+			max-width: 680px;
+			padding: 20px;
+			box-sizing: border-box;
+		}
+
+		#previewform {
+			background-color: var(--bg-card);
+			border: 1px solid var(--border-color);
+			border-radius: 6px;
+			padding: 40px;
+			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+			text-align: center;
+			display: none; /* JS will toggle this */
+		}
+
+		h1 {
+			font-size: 24px;
+			font-weight: 600;
+			margin-top: 0;
+			margin-bottom: 10px;
+		}
+
+		p {
+			color: var(--text-secondary);
+			font-size: 14px;
+			margin-bottom: 20px;
+		}
+
+		.input-group {
+			display: flex;
+			gap: 10px;
+			margin-bottom: 20px;
+		}
+
+		input[type="url"] {
+			flex-grow: 1;
+			background-color: var(--input-bg);
+			border: 1px solid var(--border-color);
+			color: var(--text-primary);
+			padding: 10px 12px;
+			border-radius: 6px;
+			font-size: 14px;
+			outline: none;
+			transition: border-color 0.2s ease;
+		}
+
+		input[type="url"]:focus {
+			border-color: var(--accent-color);
+			box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
+		}
+
+		input[type="submit"] {
+			background-color: var(--btn-primary);
+			color: #ffffff;
+			border: 1px solid rgba(240,246,252,0.1);
+			padding: 10px 20px;
+			border-radius: 6px;
+			font-size: 14px;
+			font-weight: 600;
+			cursor: pointer;
+			transition: background-color 0.2s ease;
+		}
+
+		input[type="submit"]:hover {
+			background-color: var(--btn-hover);
+		}
+
+		.instruction-box {
+			background-color: var(--code-bg);
+			border: 1px solid var(--border-color);
+			border-radius: 6px;
+			padding: 15px;
+			text-align: left;
+			font-size: 13px;
+			color: var(--text-secondary);
+		}
+
+		.instruction-box strong {
+			color: var(--accent-color);
+			font-weight: 600;
+			background: transparent;
+			padding: 0;
+		}
+
+		code {
+			font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
+			word-break: break-all;
+		}
+
+		#footer {
+			margin-top: 30px;
+			font-size: 12px;
+			color: var(--text-secondary);
+		}
+
+		#footer a {
+			color: var(--accent-color);
+			text-decoration: none;
+		}
+
+		#footer a:hover {
+			text-decoration: underline;
+		}
+
+		@media (max-width: 600px) {
+			.input-group {
+				flex-direction: column;
+			}
+			#previewform {
+				padding: 20px;
+			}
+		}
 	</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">
-		</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>
+	<div class="container">
+		<form id="previewform" onsubmit="location.href='/?'+this.file.value;return false">
+			<h1>HTML Preview</h1>
+			<p>View raw HTML files from GitHub or BitBucket directly in your browser.</p>
+			
+			<div class="input-group">
+				<input type="url" id="file" value="" placeholder="https://github.com/user/repo/blob/main/index.html" autofocus>
+				<input type="submit" value="Preview File">
+			</div>
+
+			<div class="instruction-box">
+				<p style="margin:0 0 5px 0; font-size:11px; text-transform:uppercase; letter-spacing:1px;">Manual Usage</p>
+				<code><strong>https://htmlpreview.github.io/?</strong>https://github.com/twbs/bootstrap/blob/gh-pages/index.html</code>
+			</div>
+
+			<div 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>
+			</div>
+		</form>
+	</div>
+	<script src="htmlpreview.js"></script>
 </body>
 </html>
