diff --git a/src/index.scss b/src/index.scss
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..e7d9e649170e1ea212ceed0bb473c79133be8c94 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,8 +1,9 @@
+@import "style/fonts.scss";
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: Hiragino Kaku Gothic StdN, sans-serif;
+  font-weight: 800;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/js/components/TopBar/TopBar.js b/src/js/components/TopBar/TopBar.js
index fdc32f4b35000c5430cec5bb1d16ab59aaf01c22..3f066c467b849574ab80cf97cc5d97a671dac0ab 100644
--- a/src/js/components/TopBar/TopBar.js
+++ b/src/js/components/TopBar/TopBar.js
@@ -4,9 +4,6 @@ import {Header} from "antd/lib/layout/layout";
 import {useEffect, useState} from "react";
 
 
-const beige = "#FDE7D3";
-const blue = "#6FACC6";
-
 const TopBar = (props) => {
 
     const [section, setSection] = useState("landingSection");
@@ -21,13 +18,8 @@ const TopBar = (props) => {
     }, [props.currentSection]);
 
 
-    const topBarStyle = {
-        background: section.vscodeSection || section.statsSection || section.featuresSection || section.towerSection || section.octopusSection || section.bottomSection ? blue : beige
-    };
-
-
     return (
-        <Header className={"top-bar"} style={topBarStyle}>
+        <Header className={"top-bar"}>
             <TopLinks section={section}/>
         </Header>
     );
diff --git a/src/js/components/TopLinks/TopLInks.js b/src/js/components/TopLinks/TopLInks.js
index b8d409b78e5b3ff9a0fb910dd17819e03192aee2..0c6a1e50bb71d3abc92d9f6e631c95d7d85bf6cf 100644
--- a/src/js/components/TopLinks/TopLInks.js
+++ b/src/js/components/TopLinks/TopLInks.js
@@ -1,5 +1,4 @@
 import styles from "./TopLinks.module.scss";
-import {useEffect, useState} from "react";
 
 const chosenSectionStyle = {
     textDecoration: "none",
diff --git a/src/js/components/TopLinks/TopLinks.module.scss b/src/js/components/TopLinks/TopLinks.module.scss
index 76907fd31f12304eef5b0d8554344dbc5d293b77..04de87b1b249df4f3f146c89b226b471a38507b4 100644
--- a/src/js/components/TopLinks/TopLinks.module.scss
+++ b/src/js/components/TopLinks/TopLinks.module.scss
@@ -19,7 +19,7 @@
 
   .Links {
     padding-left: 5%;
-
+    max-width: 30vw;
     display: flex;
     flex-direction: row;
 
@@ -31,7 +31,7 @@
       min-width: fit-content;
 
       a {
-        font-size: 0.9vw;
+        font-size: 0.8vw;
         color: $primary_black;
 
       }
diff --git a/src/js/pages/MainPage,module.scss b/src/js/pages/MainPage,module.scss
index d2b8868e246b85d226a6afa51e858d7155a3fd4a..279dbf2f9a39e9681879f54583bf6700a39c78cd 100644
--- a/src/js/pages/MainPage,module.scss
+++ b/src/js/pages/MainPage,module.scss
@@ -10,6 +10,8 @@ html {
     position: fixed;
     z-index: 1;
     width: 100%;
+    font-family: $primary_font;
+
 
 }
 
diff --git a/src/js/pages/MainPage.js b/src/js/pages/MainPage.js
index c7dc8feb5e414881dfaa5e9775cb9d8fda7ec44a..43d4f1d5fd87cc5910d4011c877c7a187a53b232 100644
--- a/src/js/pages/MainPage.js
+++ b/src/js/pages/MainPage.js
@@ -5,7 +5,6 @@ import LandingSection from "../sections/LandingSection/LandingSection";
 import VscodeSection from "../sections/VscodeSection/VscodeSection";
 
 
-import TopLinks from "../components/TopLinks/TopLInks";
 import CloudSection from "../sections/CloudSection/CloudSection";
 import StatsSection from "../sections/StatsSection/StatsSection";
 import FeatureSection from "../sections/FeatureSection/FeatureSection";
@@ -17,7 +16,7 @@ import {useElementOnScreen} from "../utils/utils";
 import TopBar from "../components/TopBar/TopBar";
 import {Content} from "antd/lib/layout/layout";
 
-const {HContent, Footer} = Layout;
+const { Footer} = Layout;
 
 
 
@@ -44,7 +43,7 @@ const MainPage = () => {
     currentSection["cloudSection"] = useElementOnScreen(cloudSectionRef, {
         root: null,
         rootMargin: "0px",
-        threshold: 0.9
+        threshold: 0.7
     });
 
     const statsSectionRef = React.createRef();
diff --git a/src/js/sections/BottomSection/BottomSection.module.scss b/src/js/sections/BottomSection/BottomSection.module.scss
index 2a1927f24f08c50069e015ca2d531e93ce984602..a508ac423defd4aa3d18c4558c5eda04f71c2155 100644
--- a/src/js/sections/BottomSection/BottomSection.module.scss
+++ b/src/js/sections/BottomSection/BottomSection.module.scss
@@ -30,8 +30,8 @@
 
 
     .Title {
-      font-size: 3em;
-      text-align: center;
+      font-size: 2.5em;
+      text-align: left;
     }
 
     .Caption {
@@ -110,7 +110,6 @@
 
     .ContactLinks {
       max-width: 20%;
-      align-items: center;
 
 
       display: flex;
@@ -132,6 +131,7 @@
       }
 
       .SmallCaption {
+        text-align: left;
         color: white;
         font-size: 1em;
       }
diff --git a/src/js/sections/CloudSection/CloudSection.module.scss b/src/js/sections/CloudSection/CloudSection.module.scss
index 4215895c4ca818dd575e97be6a56464e16bcfeff..f82dcb8880c3a79f776370a5c2c9a310433d0b9d 100644
--- a/src/js/sections/CloudSection/CloudSection.module.scss
+++ b/src/js/sections/CloudSection/CloudSection.module.scss
@@ -18,6 +18,8 @@
   .UpperBlock {
     padding-top: 5%;
     font-size: 2.5em;
+    max-width: 40%;
+    text-align: center;
 
   }
 
@@ -31,6 +33,7 @@
     padding-top: 5%;
     font-size: 2rem;
     max-width: 30%;
+    line-height: 2.5rem;
 
     .Caption {
       padding-top: 10px;
diff --git a/src/js/sections/LandingSection/LandingSection.module.scss b/src/js/sections/LandingSection/LandingSection.module.scss
index 30e962e28fcc7da9120f413bf1fc4037fd7d967a..1ee0c3fda280248cc4309d737e19a2fc7a74e9df 100644
--- a/src/js/sections/LandingSection/LandingSection.module.scss
+++ b/src/js/sections/LandingSection/LandingSection.module.scss
@@ -32,7 +32,8 @@
       font-size: 7rem;
 
       .Caption {
-        font-size: 2rem;
+        font-size: 1.7rem;
+        text-align: center;
       }
 
     }
diff --git a/src/js/sections/TowerSection/TowerSection.js b/src/js/sections/TowerSection/TowerSection.js
index f6e3a8c7633f86f71c32b4bac3b9433bb8e226be..a44b27b2835364f701e9d41f5d07ed77b7e7211e 100644
--- a/src/js/sections/TowerSection/TowerSection.js
+++ b/src/js/sections/TowerSection/TowerSection.js
@@ -3,7 +3,6 @@ import {Col, Row} from "antd";
 import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
 
 import towerImage from "../../../assets/props/donjon.svg";
-import {useElementOnScreen} from "../../utils/utils";
 
 const black = "#1D2C38";
 const white = "white";
diff --git a/src/js/sections/TowerSection/TowerSection.module.scss b/src/js/sections/TowerSection/TowerSection.module.scss
index 4e5c1383aa2382b482dc9d1d0d4938ee5166e636..baba939375f52997202bcc09d89f615408077c13 100644
--- a/src/js/sections/TowerSection/TowerSection.module.scss
+++ b/src/js/sections/TowerSection/TowerSection.module.scss
@@ -6,15 +6,15 @@
   background: $primary_lightblue;
   background-size: 100% 100%;
   position: relative;
-  min-height: 70vh;
+  min-height: 80vh;
 
   .LeftSide {
     padding-top: 10%;
     padding-left: 50%;
 
     .TowerImage {
-      max-width: 40vw;
-      max-height: 45vh;
+      max-width: 50vw;
+      max-height: 50vh;
     }
   }
 
@@ -26,6 +26,7 @@
     padding-right: 30%;
     vertical-align: middle;
     line-height: 4em;
+    max-width: 90%;
 
     .Title {
 
@@ -37,6 +38,7 @@
       line-height: 1em;
       color: white;
       padding-top: 5%;
+      max-width: 70%;
     }
   }
 
diff --git a/src/js/sections/VscodeSection/VscodeSection.js b/src/js/sections/VscodeSection/VscodeSection.js
index 02902606d7ca2a40fd9da9a14ee1c5a9dd30e8da..eea7485e132d54f2cd84639fe022e8c62329f6fd 100644
--- a/src/js/sections/VscodeSection/VscodeSection.js
+++ b/src/js/sections/VscodeSection/VscodeSection.js
@@ -3,7 +3,6 @@ import {Col, Row} from "antd";
 import MultiColoredText from "../../components/MultiColoredText/MultiColoredText";
 
 import vscodeImage from "../../../assets/main/vscode_screen.png";
-import {useEffect, useRef, useState} from "react";
 
 const black = "#1D2C38";
 const white = "white";
diff --git a/src/js/utils/utils.js b/src/js/utils/utils.js
index ee19cb5c01cad618d3a6b344bda40113e2cd3b3f..77a01cc67cf1d973b045275689b2010d56b76168 100644
--- a/src/js/utils/utils.js
+++ b/src/js/utils/utils.js
@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from "react";
+import {useEffect, useState} from "react";
 
 export const useElementOnScreen = (ref, options) => {
     const [isVisible, setVisible] = useState(false);
@@ -10,9 +10,10 @@ export const useElementOnScreen = (ref, options) => {
 
     useEffect(() => {
         const observer = new IntersectionObserver(callbackFunction, options);
-        if(ref.current) observer.observe(ref.current)
+        const current = ref.current;
+        if(current) observer.observe(current)
         return () => {
-            if(ref.current) observer.unobserve(ref.current)
+            if(current) observer.unobserve(current)
         }
     }, [ref, options]);
 
diff --git a/src/style/fonts.scss b/src/style/fonts.scss
index 520dd6b6533dfd348714d0da33330021340cf3f7..2275db594a0bd04556b3766131b21144ff4b0748 100644
--- a/src/style/fonts.scss
+++ b/src/style/fonts.scss
@@ -1,2 +1,2 @@
-$primary_font: Hiragino Kaku Gothic StdN 800;
+$primary_font: Hiragino Kaku Gothic StdN;
 $primary_font_weight: 800;
\ No newline at end of file