diff --git a/src/app/page.css b/src/app/page.css
index ef91a98..5c6185a 100644
--- a/src/app/page.css
+++ b/src/app/page.css
@@ -156,6 +156,23 @@ h1 {
 	border-bottom: 1px dashed var(--pink-accent);
 }
 
+.social-links button {
+	background: none;
+	border: none;
+	font-family: inherit;
+	font-size: 0.8rem;
+	color: var(--text-main);
+	padding: 2px 6px;
+	margin: 0 6px;
+	border-bottom: 1px dashed transparent;
+	transition: all 0.3s ease;
+}
+
+.social-links button:hover {
+	color: var(--pink-accent);
+	border-bottom: 1px dashed var(--pink-accent);
+}
+
 .title {
 	font-size: 0.95rem;
 	font-style: italic;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 3b84bbf..8d49622 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,7 +24,7 @@ function Content() {
 
 				<nav className="social-links">
 					<a href={TWITTER_LINK} target="_blank" rel="noopener noreferrer">twitter</a> •
-					<a onClick={toggleModal}>discord</a> •
+					<button onClick={toggleModal}>discord</button> •
 					<a href={STEAM_LINK} target="_blank" rel="noopener noreferrer">steam</a>
 				</nav>