diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 5b0ea8303..1465a1989 100644
--- a/frontend/src/app/app.component.html
+++ b/frontend/src/app/app.component.html
@@ -9,7 +9,7 @@
 
       <img alt="kote" class="filter-white" src="assets/img/kote.svg" width="50">
       <a class="softwaremagico" mat-button routerLink="/">
-        <span class="app-title">Kendo Tournament Manager v2</span>
+        <span class="app-title title">Kendo Tournament Manager v2</span>
         <span class="app-title-reduced">KTM v2</span>
       </a>
       <span class="menu-spacer"></span>
diff --git a/frontend/src/app/app.component.scss b/frontend/src/app/app.component.scss
index 4ed714fee..1abf8e36e 100644
--- a/frontend/src/app/app.component.scss
+++ b/frontend/src/app/app.component.scss
@@ -4,6 +4,10 @@
   font-size: 150%;
 }
 
+.app-title.title {
+  color: var(--title-color);
+}
+
 :host(.dark-mode) {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/basic-colors.scss b/frontend/src/basic-colors.scss
index 0fee2b1c2..074266347 100644
--- a/frontend/src/basic-colors.scss
+++ b/frontend/src/basic-colors.scss
@@ -28,6 +28,11 @@
   --ribbon-border: #ffffff;
   --ribbon-background: #011d4a;
   --focus-element: #00081a;
+  --title-color: white;
+  --link: #001239;
+  --link-visited: #012f67;
+  --link-hover: #8097b3;
+  --link-active: #012f67;
 }
 
 :root .dark-mode {
@@ -58,5 +63,10 @@
   --ribbon-border: #665e83;
   --ribbon-background: #303030;
   --focus-element: #c9c5d3;
+  --title-color: white;
+  --link: #ccc5dd;
+  --link-visited: #afa5d5;
+  --link-hover: #9f98b9;
+  --link-active: #8d7fc3;
 }
 
diff --git a/frontend/src/styles.scss b/frontend/src/styles.scss
index 9abcd0ccc..fcd2f351a 100644
--- a/frontend/src/styles.scss
+++ b/frontend/src/styles.scss
@@ -125,3 +125,23 @@ body {
   font-family: "Square Sans Serif 7";
   src: local("Square Sans Serif 7"), url(./assets/fonts/square_sans_serif_7.ttf) format("truetype");
 }
+
+
+a:link {
+  color: var(--link);
+}
+
+/* visited link */
+a:visited {
+  color: var(--link-visited);
+}
+
+/* mouse over link */
+a:hover {
+  color: var(--link-hover);
+}
+
+/* selected link */
+a:active {
+  color: var(--link-active);
+}