diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..ba3f236
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,10 @@
+{
+	"singleQuote": false,
+	"endOfLine": "crlf",
+  "tabWidth": 2,
+	"useTabs": false,
+	"trailingComma": "none",
+	"plugins": [
+		"prettier-plugin-tailwindcss"
+	]
+}
diff --git a/src/components/HeaderButton.tsx b/src/components/HeaderButton.tsx
index 8a8dd6c..72c0d83 100644
--- a/src/components/HeaderButton.tsx
+++ b/src/components/HeaderButton.tsx
@@ -1,22 +1,24 @@
 import { useTranslation } from "react-i18next";
-import { Link } from 'preact-router';
+import { Link } from "preact-router";
 
 interface HeaderButtonProps {
-    href: string;
-    Icon: any;
-    translationKey: string;
+	href: string;
+	Icon: any;
+	translationKey: string;
 }
 
 export function HeaderButton(props: HeaderButtonProps) {
-    const { href, Icon, translationKey } = props;
-    const { t } = useTranslation();
+	const { href, Icon, translationKey } = props;
+	const { t } = useTranslation();
 
-    return (
-        <Link href={href}>
-            <div class="p-4 flex flex-row items-center">
-                <Icon class="w-6 h-6"/>
-                <span className="text-text-color text-lg pl-1 font-roboto font-bold">{t(translationKey)}</span>
-            </div>
-        </Link>
-    )
-}
\ No newline at end of file
+	return (
+		<Link href={href}>
+			<div className="group p-4 flex flex-row items-center">
+				<Icon className="group-hover:text-text-hover-color transition duration-500 w-6 h-6" />
+				<span className="group-hover:text-text-hover-color transition duration-500 text-text-color text-lg pl-1 font-roboto font-bold">
+					{t(translationKey)}
+				</span>
+			</div>
+		</Link>
+	);
+}
diff --git a/src/themes/main.css b/src/themes/main.css
index 1a95be5..4dc377f 100644
--- a/src/themes/main.css
+++ b/src/themes/main.css
@@ -6,6 +6,7 @@
     --navbar-height: 60px;
     --navbar-text-color: #7967dd;
     --navbar-link-color: #e0def4;
+    --navbar-link-hover-color: gray;
     --navbar-font: "Roboto";
     --input-text-color: #e0def4;
     --input-placeholder-color: white;
diff --git a/tailwind.config.js b/tailwind.config.js
index 708f618..be2c59a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -10,6 +10,7 @@ export default {
       "navbar-text-color": "var(--navbar-text-color)",
       "navbar-color": "var(--navbar-color)",
       "text-color": "var(--navbar-link-color)",
+      "text-hover-color": "var(--navbar-link-hover-color)",
       "input": "var(--input-background-color)",
       "input-text": "var(--input-text-color)",
       "input-border-color": "var(--input-border-color)"