diff --git a/index.html b/index.html
index f418fb4..47521b0 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,9 @@
 	<title>Glyph Tools</title>
 	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 	<link href="styles.css" rel="stylesheet">
+
 </head>
 
 <body>
@@ -60,7 +62,8 @@ <h2 class="h5 mb-0">Hex ↔ Emoji Converter</h2>
 					<div class="card-body">
 						<p class="card-text">Convert between hexadecimal values and emojis/symbols.</p>
 						<div class="mb-3">
-							<button id="conversionModeButton" class="btn btn-outline-primary w-100">
+							<button id="conversionModeButton"
+								class="btn btn-outline-primary w-100 conversion-mode-text">
 								Hex to Emoji
 							</button>
 						</div>
@@ -97,12 +100,29 @@ <h2 class="h5 mb-0">Generated Glyph</h2>
 			</div>
 		</div>
 
-		<footer class="mt-5 text-center">
-			<p class="text-muted">
-				<a href="https://github.com/NhanAZ/glyph" target="_blank" class="text-decoration-none">
-					<i class="fab fa-github me-2"></i>Contribute on GitHub
-				</a>
-			</p>
+		<footer class="container mt-5 mb-3">
+			<div class="row justify-content-center">
+				<div class="col-md-8">
+					<div class="d-flex justify-content-center flex-wrap gap-3">
+						<a href="https://github.com/NhanAZ/glyph" class="text-decoration-none text-muted"
+							target="_blank" rel="noopener noreferrer">
+							<i class="fab fa-github me-2"></i>Contribute on GitHub
+						</a>
+						<a href="https://wiki.bedrock.dev/concepts/emojis.html" class="text-decoration-none text-muted"
+							target="_blank" rel="noopener noreferrer">
+							<i class="fas fa-book me-2"></i>Emojis & Symbols Docs
+						</a>
+						<a href="https://discord.gg/j2X83ujT6c" class="text-decoration-none text-muted" target="_blank"
+							rel="noopener noreferrer">
+							<i class="fab fa-discord me-2"></i>Join our Discord
+						</a>
+						<a href="https://github.com/NhanAZ" class="text-decoration-none text-muted" target="_blank"
+							rel="noopener noreferrer">
+							<i class="fas fa-user me-2"></i>Author's GitHub Profile
+						</a>
+					</div>
+				</div>
+			</div>
 		</footer>
 	</div>
 
diff --git a/script.js b/script.js
index bbdb410..7a21031 100644
--- a/script.js
+++ b/script.js
@@ -1,5 +1,22 @@
 const GRID = 16;
+let isHexToEmoji = true;
 
+// Utility functions
+function showCopyNotification(element) {
+	const notification = element.querySelector('.copy-notification');
+	notification.style.opacity = '1';
+	setTimeout(() => {
+		notification.style.opacity = '0';
+	}, 1000);
+}
+
+function updateCopyButtonState() {
+	const output = document.getElementById('converterOutput');
+	const copyButton = document.getElementById('copyButton');
+	copyButton.disabled = output.value.trim() === '';
+}
+
+// Glyph-related functions
 function Glyph(glyph = "E0") {
 	const filename = `glyph_${glyph}`;
 	const startChar = parseInt(filename.split("_").pop() + "00", 16);
@@ -30,14 +47,6 @@ function Glyph(glyph = "E0") {
 	});
 }
 
-function showCopyNotification(element) {
-	const notification = element.querySelector('.copy-notification');
-	notification.style.opacity = '1';
-	setTimeout(() => {
-		notification.style.opacity = '0';
-	}, 1000);
-}
-
 function initializeGlyph() {
 	const glyphOutput = document.getElementById('glyph-output');
 	if (glyphOutput.innerHTML.trim() === '') {
@@ -45,55 +54,7 @@ function initializeGlyph() {
 	}
 }
 
-window.onload = () => {
-	initializeGlyph();
-};
-
-document.getElementById('glyph-input').addEventListener('input', function () {
-    const glyphInput = this.value.trim();
-    const glyphSuccessMsg = document.getElementById('glyphSuccessMsg');
-    const glyphErrorMsg = document.getElementById('glyphErrorMsg');
-
-    if (/^[A-Fa-f0-9]{1,2}$/.test(glyphInput)) {
-        Glyph(glyphInput || "E0");
-        glyphSuccessMsg.textContent = 'Glyph generated successfully!';
-        glyphSuccessMsg.classList.remove('d-none');
-        glyphErrorMsg.classList.add('d-none');
-    } else {
-        glyphErrorMsg.textContent = 'Please enter a valid hex value (1-2 hex digits).';
-        glyphErrorMsg.classList.remove('d-none');
-        glyphSuccessMsg.classList.add('d-none');
-    }
-});
-
-let isHexToEmoji = true;
-
-document.getElementById('conversionModeButton').addEventListener('click', function () {
-	isHexToEmoji = !isHexToEmoji;
-	this.textContent = isHexToEmoji ? "Hex to Emoji" : "Emoji to Hex";
-	document.getElementById('inputPrefix').style.display = isHexToEmoji ? "inline-block" : "none";
-	document.getElementById('converterInput').placeholder = isHexToEmoji ? "Enter hex value" : "Enter emoji/symbol";
-	document.getElementById('converterOutput').value = '';
-	updateCopyButtonState();
-});
-
-function convert() {
-	const input = document.getElementById('converterInput').value.trim();
-	const errorMsg = document.getElementById('errorMsg');
-	const successMsg = document.getElementById('successMsg');
-	const output = document.getElementById('converterOutput');
-	errorMsg.classList.add('d-none');
-	successMsg.classList.add('d-none');
-	output.value = '';
-
-	if (isHexToEmoji) {
-		convertHexToEmoji(input);
-	} else {
-		convertEmojiToHex(input);
-	}
-	updateCopyButtonState();
-}
-
+// Converter functions
 function convertHexToEmoji(input) {
 	if (/^[0-9A-Fa-f]{1,6}$/.test(input)) {
 		try {
@@ -123,6 +84,23 @@ function convertEmojiToHex(input) {
 	}
 }
 
+function convert() {
+	const input = document.getElementById('converterInput').value.trim();
+	const errorMsg = document.getElementById('errorMsg');
+	const successMsg = document.getElementById('successMsg');
+	const output = document.getElementById('converterOutput');
+	errorMsg.classList.add('d-none');
+	successMsg.classList.add('d-none');
+	output.value = '';
+
+	if (isHexToEmoji) {
+		convertHexToEmoji(input);
+	} else {
+		convertEmojiToHex(input);
+	}
+	updateCopyButtonState();
+}
+
 function copyOutput() {
 	const output = document.getElementById('converterOutput');
 	const copyButton = document.getElementById('copyButton');
@@ -143,11 +121,36 @@ function copyOutput() {
 	});
 }
 
-function updateCopyButtonState() {
-	const output = document.getElementById('converterOutput');
-	const copyButton = document.getElementById('copyButton');
-	copyButton.disabled = output.value.trim() === '';
-}
+// Event listeners
+window.onload = () => {
+	initializeGlyph();
+};
+
+document.getElementById('glyph-input').addEventListener('input', function () {
+	const glyphInput = this.value.trim();
+	const glyphSuccessMsg = document.getElementById('glyphSuccessMsg');
+	const glyphErrorMsg = document.getElementById('glyphErrorMsg');
+
+	if (/^[A-Fa-f0-9]{1,2}$/.test(glyphInput)) {
+		Glyph(glyphInput || "E0");
+		glyphSuccessMsg.textContent = 'Glyph generated successfully!';
+		glyphSuccessMsg.classList.remove('d-none');
+		glyphErrorMsg.classList.add('d-none');
+	} else {
+		glyphErrorMsg.textContent = 'Please enter a valid hex value (1-2 hex digits).';
+		glyphErrorMsg.classList.remove('d-none');
+		glyphSuccessMsg.classList.add('d-none');
+	}
+});
+
+document.getElementById('conversionModeButton').addEventListener('click', function () {
+	isHexToEmoji = !isHexToEmoji;
+	this.textContent = isHexToEmoji ? "Hex to Emoji" : "Emoji to Hex";
+	document.getElementById('inputPrefix').style.display = isHexToEmoji ? "inline-block" : "none";
+	document.getElementById('converterInput').placeholder = isHexToEmoji ? "Enter hex value" : "Enter emoji/symbol";
+	document.getElementById('converterOutput').value = '';
+	updateCopyButtonState();
+});
 
 document.getElementById('convertButton').addEventListener('click', convert);
 document.getElementById('copyButton').addEventListener('click', copyOutput);
diff --git a/styles.css b/styles.css
index 01705fc..502575f 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,4 @@
+/* Base styles */
 body {
 	background-color: #f8f9fa;
 }
@@ -6,6 +7,7 @@ body {
 	max-width: 1200px;
 }
 
+/* Card styles */
 .card {
 	border: none;
 	border-radius: 15px;
@@ -22,6 +24,7 @@ body {
 	border-bottom: none;
 }
 
+/* Button styles */
 .btn-primary {
 	background-color: #4a89dc;
 	border-color: #4a89dc;
@@ -42,6 +45,11 @@ body {
 	color: white;
 }
 
+#conversionModeButton {
+	transition: all 0.3s ease;
+}
+
+/* Glyph output styles */
 #glyph-output {
 	display: grid;
 	grid-template-columns: repeat(16, minmax(30px, 1fr));
@@ -72,6 +80,7 @@ body {
 	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
+/* Tooltip styles */
 .tooltip {
 	position: absolute;
 	bottom: 100%;
@@ -93,6 +102,7 @@ body {
 	transform: translateX(-50%) translateY(-5px);
 }
 
+/* Copy notification styles */
 .copy-notification {
 	position: absolute;
 	background-color: rgba(0, 0, 0, 0.7);
@@ -121,27 +131,36 @@ body {
 	}
 }
 
-#conversionModeButton {
-	transition: all 0.3s ease;
+/* Description styles */
+.glyph-description {
+	text-align: justify;
+	color: #6c757d;
+	font-size: 0.9em;
 }
 
-@media (max-width: 767.98px) {
-	#glyph-output {
-		font-size: 0.8em;
-	}
+.glyph-input-label {
+	font-weight: bold;
+}
 
-	#convertButton {
-		width: 100%;
-		margin-top: 10px;
-	}
+.conversion-mode-text {
+	font-weight: bold;
 }
 
-@media (min-width: 768px) {
-	#glyph-output {
-		overflow-x: visible;
-	}
+/* Footer styles */
+footer {
+	border-top: 1px solid #dee2e6;
+	padding-top: 20px;
+}
+
+footer a {
+	transition: color 0.3s ease;
 }
 
+footer a:hover {
+	color: #007bff !important;
+}
+
+/* Media queries */
 @media (max-width: 767.98px) {
 	#glyph-output {
 		font-size: 0.8em;
@@ -151,38 +170,33 @@ body {
 		flex-wrap: wrap;
 	}
 
-	#convertButton {
+	#convertButton,
+	#generate-glyph {
 		width: 100%;
 		margin-top: 10px;
-		border-top-left-radius: 0.25rem !important;
-		border-top-right-radius: 0.25rem !important;
+		border-radius: 0.25rem !important;
 	}
 
-	#converterInput {
-		border-bottom-right-radius: 0.25rem !important;
+	#converterInput,
+	#glyph-input {
+		border-radius: 0.25rem !important;
 	}
-}
 
-@media (min-width: 768px) {
-	#glyph-output {
-		overflow-x: visible;
+	#copyButton {
+		border-top-left-radius: 0 !important;
+		border-bottom-left-radius: 0 !important;
 	}
-}
 
-@media (max-width: 767.98px) {
-	#generate-glyph {
-		width: 100%;
-		margin-top: 10px;
-		border-top-left-radius: 0.25rem !important;
-		border-top-right-radius: 0.25rem !important;
-	}
-
-	#glyph-input {
-		border-bottom-right-radius: 0.25rem !important;
+	.input-group> :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
+		margin-left: 0;
 	}
 }
 
 @media (min-width: 768px) {
+	#glyph-output {
+		overflow-x: visible;
+	}
+
 	.converter-input-group {
 		display: flex;
 	}
@@ -198,19 +212,7 @@ body {
 	#inputPrefix {
 		width: auto;
 	}
-}
-
-.glyph-description {
-	text-align: justify;
-	color: #6c757d;
-	font-size: 0.9em;
-}
 
-.glyph-input-label {
-	font-weight: bold;
-}
-
-@media (min-width: 768px) {
 	.glyph-description {
 		padding-right: 1rem;
 		padding-left: 1rem;
