diff --git a/frontend/public/index.html b/frontend/public/index.html
index 09cc580..e2973eb 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -13,13 +13,6 @@
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link
-      rel="stylesheet"
-      href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
-      integrity="sha384-xxzQGERXS00kBmZW/6qxqJPyxW3UR0BPsL4c8ILaIWXva5kFi7TxkIIaMiKtqV1Q"
-      crossorigin="anonymous"
-    />
 
         <link
       href="https://fonts.googleapis.com/css2?family=PT+Sans:wght@700&display=swap"
diff --git a/frontend/src/Footer.js b/frontend/src/Footer.js
index fd00757..c911a56 100644
--- a/frontend/src/Footer.js
+++ b/frontend/src/Footer.js
@@ -2,6 +2,7 @@ import React from "react";
 import { Button } from "./components/Button";
 import { Link } from "react-router-dom";
 import "./Footer.css";
+import "@fortawesome/fontawesome-free/css/all.css"
 
 function Footer() {
   return (
diff --git a/frontend/src/components/HeroSection.css b/frontend/src/components/HeroSection.css
index ea213ee..2755e63 100644
--- a/frontend/src/components/HeroSection.css
+++ b/frontend/src/components/HeroSection.css
@@ -40,7 +40,7 @@ video {
   margin: 6px;
 }
 
-.fa-play-cirecle {
+.fa-play-circle {
   margin-left: 4px;
 }
 
diff --git a/frontend/src/components/HeroSection.js b/frontend/src/components/HeroSection.js
index 15b6f13..549f103 100644
--- a/frontend/src/components/HeroSection.js
+++ b/frontend/src/components/HeroSection.js
@@ -2,11 +2,12 @@ import React from 'react';
 import '../App.css';
 import { Button } from './Button';
 import './HeroSection.css';
+import '@fortawesome/fontawesome-free/css/all.css'
 
 function HeroSection() {
     return (
         <div className='hero-container'>
-            <h1>ADVENTURE AWAITS</h1>
+            <h1>ADVENTURE wartet</h1>
             <p>What are you waiting for?</p>
             <div className="hero-btns">
                 <Button
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.js
index 89ea386..9ee07f1 100644
--- a/frontend/src/components/Navbar.js
+++ b/frontend/src/components/Navbar.js
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { Button } from './Button';
 import { Link } from 'react-router-dom';
 import './Navbar.css';
+import '@fortawesome/fontawesome-free/css/all.css'
 
 function Navbar() {
   const [click, setClick] = useState(false);