diff --git a/README.md b/README.md
index 642a7edea..aed7c9b4b 100644
--- a/README.md
+++ b/README.md
@@ -8,7 +8,7 @@
 [![GitHub commit activity](https://img.shields.io/github/commit-activity/y/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![GitHub last commit](https://img.shields.io/github/last-commit/softwaremagico/KendoTournamentManager)](https://github.com/softwaremagico/KendoTournamentManager)
 [![CircleCI](https://circleci.com/gh/softwaremagico/KendoTournamentManager.svg?style=shield)](https://circleci.com/gh/softwaremagico/KendoTournamentManager)
-[![Time](https://img.shields.io/badge/development-653.5h-blueviolet.svg)]()
+[![Time](https://img.shields.io/badge/development-654h-blueviolet.svg)]()
 
 [![Powered by](https://img.shields.io/badge/powered%20by%20java-orange.svg?logo=OpenJDK&logoColor=white)]()
 [![Vulnerabilities](https://sonarcloud.io/api/project_badges/measure?project=kendo-tournament-backend&metric=vulnerabilities)](https://sonarcloud.io/summary/new_code?id=kendo-tournament-backend)
diff --git a/frontend/src/app/components/basic/member-selector/member-selector.component.scss b/frontend/src/app/components/basic/member-selector/member-selector.component.scss
index 432815032..e04b8394e 100644
--- a/frontend/src/app/components/basic/member-selector/member-selector.component.scss
+++ b/frontend/src/app/components/basic/member-selector/member-selector.component.scss
@@ -11,7 +11,7 @@
   max-height: 450px;
   min-height: 350px;
   height: 350px;
-  border-color: #c3d1e1;
+  border-color: var(--dragable-area);
   border-radius: 15px;
   border-style: dotted;
 }
@@ -25,7 +25,7 @@
 
 .representative-user {
   min-height: 100px;
-  border-color: #c3d1e1;
+  border-color: var(--dragable-area);
   border-radius: 15px;
   border-style: dotted;
 }
diff --git a/frontend/src/app/components/fight/duel/user-score/fault/fault.component.scss b/frontend/src/app/components/fight/duel/user-score/fault/fault.component.scss
index f36f33e2b..9d0b31c7f 100644
--- a/frontend/src/app/components/fight/duel/user-score/fault/fault.component.scss
+++ b/frontend/src/app/components/fight/duel/user-score/fault/fault.component.scss
@@ -21,8 +21,8 @@
 .fault .tooltiptext {
   visibility: hidden;
   width: 200px;
-  background-color: #555555;
-  color: #ffffff;
+  background-color: var(--tooltip-background);
+  color: var(--tooltip-text);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
diff --git a/frontend/src/app/components/fight/duel/user-score/score/score.component.scss b/frontend/src/app/components/fight/duel/user-score/score/score.component.scss
index 3d14c6c5b..61ba41371 100644
--- a/frontend/src/app/components/fight/duel/user-score/score/score.component.scss
+++ b/frontend/src/app/components/fight/duel/user-score/score/score.component.scss
@@ -29,8 +29,8 @@
   visibility: hidden;
   width: 120px;
   min-height: 50px;
-  background-color: #555555;
-  color: #ffffff;
+  background-color: var(--tooltip-background);
+  color: var(--tooltip-text);
   text-align: center;
   padding: 5px 0;
   border-radius: 6px;
diff --git a/frontend/src/app/components/fight/duel/user-score/user-score.component.scss b/frontend/src/app/components/fight/duel/user-score/user-score.component.scss
index 4c232092f..6e8c63081 100644
--- a/frontend/src/app/components/fight/duel/user-score/user-score.component.scss
+++ b/frontend/src/app/components/fight/duel/user-score/user-score.component.scss
@@ -8,6 +8,7 @@
 .user-name {
   width: 100%;
   padding-right: 20px;
+  color: var(--text-color);
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/frontend/src/app/components/fight/fight.component.scss b/frontend/src/app/components/fight/fight.component.scss
index aea0f4327..aeb977756 100644
--- a/frontend/src/app/components/fight/fight.component.scss
+++ b/frontend/src/app/components/fight/fight.component.scss
@@ -1,6 +1,6 @@
 .fight {
   border-width: 2px;
-  border-color: var(--border-color);
+  border-color: var(--fight-border-color);
   border-style: solid;
   padding: 5px;
   width: 100%;
@@ -19,9 +19,9 @@
   text-align: center;
   padding: 20px;
   border-width: 2px;
-  border-color: var(--background-color);
+  border-color: var(--ribbon-border);
   border-style: solid;
-  background-color: var(--contrast-color);
+  background-color: var(--ribbon-background);
 }
 
 .red-ribbon {
@@ -39,10 +39,10 @@
   text-align: center;
   padding: 20px;
   border-width: 2px;
-  border-color: var(--background-color);
+  border-color: var(--ribbon-border);
   border-style: solid;
   text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
-  background-color: var(--contrast-color);
+  background-color: var(--ribbon-background);
 }
 
 .white-ribbon {
diff --git a/frontend/src/basic-colors.scss b/frontend/src/basic-colors.scss
index aaee504f9..34a142b0a 100644
--- a/frontend/src/basic-colors.scss
+++ b/frontend/src/basic-colors.scss
@@ -20,17 +20,23 @@
   --card-shadow2: rgba(1, 47, 103, 0.14);
   --card-shadow3: rgba(1, 47, 103, 0.12);
   --table-header-color: #ffffff;
-  --table-header-text:  #001239;
+  --table-header-text: #001239;
+  --dragable-area: #c3d1e1;
+  --fight-border-color: #011d4a;
+  --tooltip-text: #ffffff;
+  --tooltip-background: #555555;
+  --ribbon-border: #ffffff;
+  --ribbon-background: #011d4a;
 }
 
 :root .dark-mode {
   margin: 0;
-  --text-color: #ffffff;
+  --text-color: #c9c5d3;
   --secondary-text-color: #b0a3d5;
   --primay-color: #5f4ca1;
   --selected-color: #ffffff;
-  --hightligh-color: #5f4ca1;
-  --contrast-color: #1f1836;
+  --hightligh-color: #45367d;
+  --contrast-color: #5f4ca1;
   --border-color: #5f4ca1;
   --hover-color: #b0a3d5;
   --score-color: #b0a3d5;
@@ -42,7 +48,13 @@
   --card-shadow1: rgba(176, 163, 213, 0.6);
   --card-shadow2: rgba(176, 163, 213, 0.5);
   --card-shadow3: rgba(176, 163, 213, 0.3);
-  --table-header-color: #e9e3fa;
-  --table-header-text:  #424049;
+  --table-header-color: #a3a2d5;
+  --table-header-text: #424049;
+  --dragable-area: #c3d1e1;
+  --fight-border-color: #665e83;
+  --tooltip-text: #c9c5d3;
+  --tooltip-background: #564f6e;
+  --ribbon-border: #665e83;
+  --ribbon-background: #303030;
 }