diff --git a/client/src/App.scss b/client/src/App.scss
index 1b22f23b8ee88f8b0a6a21c5f35b824aeae6e0a2..bf618bc5fdc38d0aa8aa123be7167f05b98eee77 100644
--- a/client/src/App.scss
+++ b/client/src/App.scss
@@ -1,5 +1,6 @@
 
 @use 'styles/settings';
+@use 'styles/mixins';
 
 html {
     scroll-behavior: smooth;
@@ -7,5 +8,8 @@ html {
 
 body {
     color: settings.$body-color;
+    @include mixins.breakpoint(medium) {
+        color: black;
+    }
 }
 
diff --git a/client/src/styles/mixins.scss b/client/src/styles/mixins.scss
index 582ea2b83e29bab53998d350c991d892511db478..47cd839d2643089ec9b46a1377e747d0390cae21 100644
--- a/client/src/styles/mixins.scss
+++ b/client/src/styles/mixins.scss
@@ -1,6 +1,6 @@
 
-@use 'functions';
-@use 'settings';
+@use 'functions.scss';
+@use 'settings.scss';
 
 @mixin breakpoint($bp) {
     @media screen and (min-width: functions.getFrom(settings.$breakpoints, $bp)) {