diff --git a/js/nav.footer.js b/js/nav.footer.js
index c84dc3c..74dd3cc 100644
--- a/js/nav.footer.js
+++ b/js/nav.footer.js
@@ -61,14 +61,22 @@ const footer = `
 			async
 		></script>
 		<div class="social-icons">
-			<a href="https://github.com/ChromeGaming/Dot-Box" target="_blank">
+			<a href="https://github.com/ChromeGaming/Dot-Box" class="social" target="_blank">
 				<i class="fab fa-github"></i>
 			</a>
-			<a href="https://discord.gg/2HTCFrSvPB" target="_blank">
+			<a href="https://discord.gg/2HTCFrSvPB" class="social" target="_blank">
 				<i class="fab fa-discord"></i>
 			</a>
 		</div>
 	</div>
+	<style>
+		.author .social-icons .social:hover .fa-github{
+			color: #2b3137;
+		}
+		.author .social-icons .social:hover .fa-discord{
+			color: #7289da;
+		}
+	</style>
 `;
 
 document.addEventListener("DOMContentLoaded", () => {
diff --git a/styles/mainstyle.css b/styles/mainstyle.css
index 08670e5..6803205 100644
--- a/styles/mainstyle.css
+++ b/styles/mainstyle.css
@@ -830,4 +830,26 @@ input[type="number"] {
 
 .hidden {
 	display: none;
-}
\ No newline at end of file
+}
+
+
+.author .social-icons .social:hover .fa-github{
+	color: #2b3137;
+}
+.author .social-icons .social:hover .fa-discord{
+	color: #7289da;
+}
+
+.floating-social .social-icon:hover .fa-twitter {
+	color:#1DA1F2;
+}
+
+.floating-social .social-icon:hover .fa-instagram {
+	background-color: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
+}
+.floating-social .social-icon:hover .fa-facebook {
+	color: #4267B2;
+}
+.floating-social .social-icon:hover .fa-linkedin {
+	color: #0077b5;
+}