diff --git a/client/modules/About/About.styles.js b/client/modules/About/About.styles.js
index 0714e39608..b47a65c32e 100644
--- a/client/modules/About/About.styles.js
+++ b/client/modules/About/About.styles.js
@@ -1,8 +1,23 @@
-import styled from 'styled-components';
+import styled, { createGlobalStyle } from 'styled-components';
 import { remSize, prop } from '../../theme';
 
+export const GlobalStyle = createGlobalStyle`
+  html, body, #root {
+    background-color: ${prop('backgroundColor')};
+    color: ${prop('primaryTextColor')};
+    min-height: 100vh;
+    width: 100vw;
+    margin: 0;
+    padding: 0;
+    transition: background-color 0.3s, color 0.3s;
+    font-family: inherit;
+  }
+`;
+
 export const AboutPageContent = styled.div`
   margin: ${remSize(42)} ${remSize(295)};
+  color: ${prop('primaryTextColor')};
+  background-color: ${prop('backgroundColor')};
 
   @media (max-width: 1279px) {
     margin: ${remSize(20)};
@@ -16,6 +31,7 @@ export const Intro = styled.div`
   & h1 {
     font-size: ${remSize(32)};
     font-weight: 700;
+    color: ${prop('primaryTextColor')};
   }
 
   & a {
@@ -26,6 +42,8 @@ export const Intro = styled.div`
     align-items: center;
     width: ${remSize(110)};
     justify-content: space-evenly;
+    color: ${prop('primaryTextColor')};
+    text-decoration: none;
 
     &:hover {
       color: ${prop('Button.primary.default.background')};
@@ -52,6 +70,7 @@ export const IntroHeadline = styled.div`
     font-weight: 550;
     font-size: ${remSize(24)};
     margin: ${remSize(24)};
+    color: ${prop('primaryTextColor')};
   }
 
   & svg {
@@ -74,9 +93,11 @@ export const IntroDescription = styled.div`
   line-height: ${remSize(27)};
   font-size: ${remSize(16)};
   margin: ${remSize(24)} 0;
+  color: ${prop('primaryTextColor')};
 
   p {
     margin-bottom: ${remSize(24)};
+    color: ${prop('primaryTextColor')};
   }
 `;
 
@@ -87,6 +108,7 @@ export const Section = styled.div`
     font-size: ${remSize(24)};
     padding-bottom: ${remSize(30)};
     font-weight: 600;
+    color: ${prop('primaryTextColor')};
   }
 
   @media (max-width: 769px) {
@@ -116,16 +138,19 @@ export const SectionItem = styled.div`
 
   & p {
     margin-top: ${remSize(7)};
+    color: ${prop('primaryTextColor')};
   }
 
   & a {
     font-weight: 700;
     font-size: ${remSize(16)};
     text-decoration: underline;
+    color: ${prop('primaryTextColor')};
 
     &:hover {
       text-decoration: underline;
       text-decoration-thickness: 0.1em;
+      color: ${prop('Button.primary.hover.background')};
     }
   }
 
@@ -155,6 +180,7 @@ export const Contact = styled.div`
   & h2 {
     font-size: ${remSize(24)};
     font-weight: 600;
+    color: ${prop('primaryTextColor')};
   }
 
   & div {
@@ -167,6 +193,7 @@ export const Contact = styled.div`
 
 export const ContactTitle = styled.p`
   width: 50%;
+  color: ${prop('primaryTextColor')};
 
   @media (max-width: 769px) {
     width: 30%;
@@ -175,6 +202,7 @@ export const ContactTitle = styled.p`
 
 export const ContactHandles = styled.p`
   width: 50%;
+  color: ${prop('primaryTextColor')};
 
   & a {
     color: ${prop('logoColor')};
@@ -182,6 +210,7 @@ export const ContactHandles = styled.p`
 
     &:hover {
       text-decoration: underline;
+      color: ${prop('Button.primary.hover.background')};
     }
   }
 
@@ -191,7 +220,7 @@ export const ContactHandles = styled.p`
 `;
 
 export const Footer = styled.div`
-  border-top: 0.1rem dashed;
+  border-top: 0.1rem dashed ${prop('primaryTextColor')};
   padding: 0 ${remSize(20)} ${remSize(70)} 0;
   width: 100%;
   font-size: ${remSize(16)};
@@ -210,11 +239,13 @@ export const Footer = styled.div`
     &:hover {
       text-decoration: underline;
       text-decoration-thickness: 0.1em;
+      color: ${prop('Button.primary.hover.background')};
     }
   }
 
   & p {
     padding: ${remSize(20)} 9.5% 0 0;
+    color: ${prop('primaryTextColor')};
   }
 
   @media (max-width: 770px) {
diff --git a/client/modules/About/pages/About.jsx b/client/modules/About/pages/About.jsx
index 5690aba0a0..5683ff3f99 100644
--- a/client/modules/About/pages/About.jsx
+++ b/client/modules/About/pages/About.jsx
@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 
 import {
+  GlobalStyle,
   AboutPageContent,
   Intro,
   IntroHeadline,
@@ -57,8 +58,9 @@ const About = () => {
 
   return (
     <RootPage>
+      <GlobalStyle />
       <Helmet>
-        <title> {t('About.TitleHelmet')} </title>
+        <title>{t('About.TitleHelmet')}</title>
       </Helmet>
 
       <Nav layout="dashboard" />