diff --git a/src/App.scss b/src/App.scss
index c43f134..b95adb9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,10 +1,16 @@
-@import '~antd/dist/antd.css';
+@import 'antd/dist/antd.variable.min.css';
+@import './colors.scss';
 
 .App {
   text-align: center;
+  background-color: $secondary;
 }
 
 .App .App-content {
   display: flex;
   justify-content: center;
 }
+
+article {
+  margin: 2em;
+}
diff --git a/src/App.tsx b/src/App.tsx
index a3a1f07..588dd98 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -6,11 +6,21 @@ import { Main } from './pages/Main';
 import { Registration } from './pages/Registration';
 import { IntlProvider } from 'react-intl';
 import { localization } from './constants/localization';
+import { Header } from './components/Header';
+import { ConfigProvider } from 'antd';
 
 export default function App() {
   const language = useRecoilValue(currentLanguage)
+
+  ConfigProvider.config({
+    theme: {
+      primaryColor: '#21b635',
+    }
+  });
+
   return (
     <IntlProvider locale={language} messages={localization[language]}>
+      <Header />
       <Router>
         <Switch>
           <Route exact path="/:page">
diff --git a/src/colors.scss b/src/colors.scss
new file mode 100644
index 0000000..888631a
--- /dev/null
+++ b/src/colors.scss
@@ -0,0 +1,2 @@
+$primary: #21b635;
+$secondary: #98cc9f;
diff --git a/src/components/styles/header.scss b/src/components/styles/header.scss
index 4d7700e..e0c19a5 100644
--- a/src/components/styles/header.scss
+++ b/src/components/styles/header.scss
@@ -1,5 +1,7 @@
+@import '../../colors.scss';
+
 .App-header {
-  background-color: #282c34;
+  background-color: $primary;
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/index.scss b/src/index.scss
index ec2585e..e36b1ee 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,3 +1,5 @@
+@import './colors.scss';
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -5,6 +7,7 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: $secondary !important;
 }
 
 code {
diff --git a/src/index.tsx b/src/index.tsx
index 31bfa72..63c0a49 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,11 +3,14 @@ import ReactDOM from 'react-dom';
 import { RecoilRoot } from 'recoil';
 import './index.scss';
 import App from './App';
+import { ConfigProvider } from 'antd';
 
 ReactDOM.render(
   <React.StrictMode>
     <RecoilRoot>
-      <App />
+      <ConfigProvider>
+        <App />
+      </ConfigProvider>
     </RecoilRoot>
   </React.StrictMode>,
   document.getElementById('root')