diff --git a/frontend/public/index.html b/frontend/public/index.html
index fa21ab4..8be889f 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -31,7 +31,10 @@
     <title>BA - Marco Camenzind</title>
   </head>
   <body>
-    <noscript>Diese Anwendung funktioniert leider nur mit JavaScript. Bitte aktivieren JavaScript in den Einstellungen</noscript>
+    <noscript
+      >Diese Anwendung funktioniert leider nur mit JavaScript. Bitte aktivieren
+      JavaScript in den Einstellungen</noscript
+    >
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 9b36b7b..b31da3c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -81,7 +81,6 @@ h1 {
   margin-bottom: 0.7em;
 }
 
-
 .errorMessage {
   color: var(--error);
   max-width: 60%;
diff --git a/frontend/src/App.js b/frontend/src/App.jsx
similarity index 100%
rename from frontend/src/App.js
rename to frontend/src/App.jsx
diff --git a/frontend/src/Footer.css b/frontend/src/Footer.css
index 03f9900..d9e9235 100644
--- a/frontend/src/Footer.css
+++ b/frontend/src/Footer.css
@@ -92,45 +92,6 @@
   color: #b1b1b1;
 }
 
-/* Social Icons */
-.social-icon-link {
-  color: var(--forth);
-  font-size: 24px;
-}
-
-.social-media {
-  max-width: 1000px;
-  width: 100%;
-}
-
-.social-media-wrap {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 99%;
-  max-width: 1000px;
-  margin: 40px auto 0 auto;
-}
-
-.social-icons {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 240px;
-}
-
-.social-logo {
-  color: var(--forth);
-  justify-self: start;
-  margin-left: 20px;
-  cursor: pointer;
-  text-decoration: none;
-  font-size: 2rem;
-  display: flex;
-  align-self: center;
-  margin-bottom: 16px;
-}
-
 @media screen and (max-width: 820px) {
   .footer-links {
     padding-top: 2rem;
@@ -148,7 +109,4 @@
     flex-direction: column;
   }
 
-  .social-media-wrap {
-    flex-direction: column;
-  }
 }
diff --git a/frontend/src/Footer.js b/frontend/src/Footer.jsx
similarity index 100%
rename from frontend/src/Footer.js
rename to frontend/src/Footer.jsx
diff --git a/frontend/src/auth/PrivateRoute.js b/frontend/src/auth/PrivateRoute.jsx
similarity index 100%
rename from frontend/src/auth/PrivateRoute.js
rename to frontend/src/auth/PrivateRoute.jsx
diff --git a/frontend/src/components/Author.js b/frontend/src/components/Author.js
deleted file mode 100644
index 8ea89dd..0000000
--- a/frontend/src/components/Author.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from "react";
-
-function AuthorDate() {
-  return <div></div>;
-}
-
-export default AuthorDate;
diff --git a/frontend/src/components/BehaviorNormal.js b/frontend/src/components/BehaviorNormal.jsx
similarity index 100%
rename from frontend/src/components/BehaviorNormal.js
rename to frontend/src/components/BehaviorNormal.jsx
diff --git a/frontend/src/components/BehaviorPhone.js b/frontend/src/components/BehaviorPhone.jsx
similarity index 88%
rename from frontend/src/components/BehaviorPhone.js
rename to frontend/src/components/BehaviorPhone.jsx
index 92cc8f0..f0a23b8 100644
--- a/frontend/src/components/BehaviorPhone.js
+++ b/frontend/src/components/BehaviorPhone.jsx
@@ -11,7 +11,7 @@ export default function BehaviorPhone(props) {
         Sie sich vor, dass Sie gerade am Telefonieren sind. Verwenden Sie bitte
         kein Headset oder Ähnliches.
       </p>
-      <GeneratedPassword genPassword={props.genPassword}/>
+      <GeneratedPassword genPassword={props.genPassword} />
     </>
   );
 }
diff --git a/frontend/src/components/BehaviorStanding.js b/frontend/src/components/BehaviorStanding.js
deleted file mode 100644
index e3c1486..0000000
--- a/frontend/src/components/BehaviorStanding.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from "react";
-import "../App.css";
-import GeneratedPassword from "./GeneratedPassword"
-
-export default function BehaviorStanding(props) {
-  return (
-    <>
-      <p>
-        In dieser Situation geht es darum, dass Sie das Passwort im Stehen eingeben. Stehen Sie also vor den Computer und geben Sie den Benutzernamen und das Passwort wie gewohnt ein.
-      </p>
-      <GeneratedPassword genPassword={props.genPassword}/>
-    </>
-  );
-}
diff --git a/frontend/src/components/BehaviorStanding.jsx b/frontend/src/components/BehaviorStanding.jsx
new file mode 100644
index 0000000..8aa77d5
--- /dev/null
+++ b/frontend/src/components/BehaviorStanding.jsx
@@ -0,0 +1,16 @@
+import React from "react";
+import "../App.css";
+import GeneratedPassword from "./GeneratedPassword";
+
+export default function BehaviorStanding(props) {
+  return (
+    <>
+      <p>
+        In dieser Situation geht es darum, dass Sie das Passwort im Stehen
+        eingeben. Stehen Sie also vor den Computer und geben Sie den
+        Benutzernamen und das Passwort wie gewohnt ein.
+      </p>
+      <GeneratedPassword genPassword={props.genPassword} />
+    </>
+  );
+}
diff --git a/frontend/src/components/BehaviorStudyEnd.js b/frontend/src/components/BehaviorStudyEnd.jsx
similarity index 54%
rename from frontend/src/components/BehaviorStudyEnd.js
rename to frontend/src/components/BehaviorStudyEnd.jsx
index 432d206..a79f3c4 100644
--- a/frontend/src/components/BehaviorStudyEnd.js
+++ b/frontend/src/components/BehaviorStudyEnd.jsx
@@ -5,10 +5,13 @@ export default function BehaviorStudyEnd() {
   return (
     <>
       <p>
-        Vielen Dank, dass Sie an der Studie teilgenommen haben. Sie helfen mir mit Ihrer Teilnahme enorm für die Bachelorthesis weiter.
+        Vielen Dank, dass Sie an der Studie teilgenommen haben. Sie helfen mir
+        mit Ihrer Teilnahme enorm für die Bachelorthesis weiter.
       </p>
       <p>
-        Damit ich möglichst aussagekräftige Ergebnisse erhalte, ist es für mich wichtig, dass Sie mehrmals an der Studie teilnehmen. Daher bitte ich Sie, dass Sie zu einem anderen Zeitpunkt die Studie wiederholen.
+        Damit ich möglichst aussagekräftige Ergebnisse erhalte, ist es für mich
+        wichtig, dass Sie mehrmals an der Studie teilnehmen. Daher bitte ich
+        Sie, dass Sie zu einem anderen Zeitpunkt die Studie wiederholen.
       </p>
     </>
   );
diff --git a/frontend/src/components/BehaviorStudyInfo.js b/frontend/src/components/BehaviorStudyInfo.jsx
similarity index 99%
rename from frontend/src/components/BehaviorStudyInfo.js
rename to frontend/src/components/BehaviorStudyInfo.jsx
index eaea777..15d2324 100644
--- a/frontend/src/components/BehaviorStudyInfo.js
+++ b/frontend/src/components/BehaviorStudyInfo.jsx
@@ -14,7 +14,6 @@ export default function BehaviorStudyInfo() {
         Bitte klicken Sie auf weiter, um mit der Studie zu beginnen. Bitte lesen
         Sie die jeweilige Aufgabe jeweils genau.
       </p>
-
     </>
   );
 }
diff --git a/frontend/src/components/Button.css b/frontend/src/components/Button.css
index 19143fe..0319108 100644
--- a/frontend/src/components/Button.css
+++ b/frontend/src/components/Button.css
@@ -31,7 +31,7 @@
   font-size: 1.3em;
 }
 
-.btn--full{
+.btn--full {
   padding: 12px 26px;
   margin: 0 auto;
   font-size: 1.5em;
@@ -44,4 +44,3 @@
   color: var(--secondary);
   transition: 250ms;
 }
-
diff --git a/frontend/src/components/Button.js b/frontend/src/components/Button.jsx
similarity index 100%
rename from frontend/src/components/Button.js
rename to frontend/src/components/Button.jsx
diff --git a/frontend/src/components/ErrorMessage.js b/frontend/src/components/ErrorMessage.jsx
similarity index 100%
rename from frontend/src/components/ErrorMessage.js
rename to frontend/src/components/ErrorMessage.jsx
diff --git a/frontend/src/components/GeneratedPassword.js b/frontend/src/components/GeneratedPassword.jsx
similarity index 91%
rename from frontend/src/components/GeneratedPassword.js
rename to frontend/src/components/GeneratedPassword.jsx
index 722fc2a..f2b8ea9 100644
--- a/frontend/src/components/GeneratedPassword.js
+++ b/frontend/src/components/GeneratedPassword.jsx
@@ -2,8 +2,6 @@ import React from "react";
 import "../App.css";
 
 export default function GeneratedPassword(props) {
-
-  const genPassword = "PASSWORT_MANUELL"
   const handleOnCopyEvent = (e) => {
     e.preventDefault();
     return false;
diff --git a/frontend/src/components/HeroSection.js b/frontend/src/components/HeroSection.jsx
similarity index 100%
rename from frontend/src/components/HeroSection.js
rename to frontend/src/components/HeroSection.jsx
diff --git a/frontend/src/components/InputField.js b/frontend/src/components/InputField.jsx
similarity index 100%
rename from frontend/src/components/InputField.js
rename to frontend/src/components/InputField.jsx
diff --git a/frontend/src/components/Navbar.js b/frontend/src/components/Navbar.jsx
similarity index 100%
rename from frontend/src/components/Navbar.js
rename to frontend/src/components/Navbar.jsx
diff --git a/frontend/src/components/SubmitField.js b/frontend/src/components/SubmitField.jsx
similarity index 100%
rename from frontend/src/components/SubmitField.js
rename to frontend/src/components/SubmitField.jsx
diff --git a/frontend/src/components/pages/Home.js b/frontend/src/components/pages/Home.jsx
similarity index 100%
rename from frontend/src/components/pages/Home.js
rename to frontend/src/components/pages/Home.jsx
diff --git a/frontend/src/components/pages/Lizenzen.js b/frontend/src/components/pages/Lizenzen.js
deleted file mode 100644
index 959f660..0000000
--- a/frontend/src/components/pages/Lizenzen.js
+++ /dev/null
@@ -1,49 +0,0 @@
-import React from "react";
-import "../../App.css";
-import Footer from "../../Footer";
-
-export default function Lizenzen() {
-  return (
-    <>
-      <div className="sitePage license">
-        <h1>Lizenzen und Bildnachweise</h1>
-        <p>
-          Nachfolgend sollen die verwendeten Bibliotheken inklusive der Lizenz
-          aufgeführt werden. Neben den Bibliotheken sollen vorallem auch
-          Bildnachweise notiert werden.
-        </p>
-        <h2>Verwendete Bibliotheken</h2>
-        <h3>Frontend</h3>
-        <ul>
-          <li>
-            ReactJS (MIT-Lizenz):{" "}
-            <a href="https://github.com/facebook/react">
-              https://github.com/facebook/react
-            </a>{" "}
-          </li>
-          <li>Behametrics Web-Logger (MIT-Lizenz): <a href="https://gitlab.com/behametrics/logger-web">https://gitlab.com/behametrics/logger-web</a></li>
-          <li>Fortawesome Icons (CC-BY-4.0): <a href="https://github.com/FortAwesome/Font-Awesome">https://github.com/FortAwesome/Font-Awesome</a></li>
-          <li>React-Token-Auth (ISC-Lizenz): <a href="https://github.com/obabichev/react-token-auth">https://github.com/obabichev/react-token-auth</a></li>
-          <li>react-router-dom (MIT-Lizenz)<a href="https://github.com/ReactTraining/react-router">https://github.com/ReactTraining/react-router</a></li>
-        </ul>
-        <h3>Backend</h3>
-        <ul>
-          <li>Flask (BSD-3-Lizenz): <a href="https://github.com/pallets/flask/">https://github.com/pallets/flask/</a></li>
-          <li>flask-sqlalchemy (BSD-3-Lizenz): <a href="https://github.com/pallets/flask-sqlalchemy">https://github.com/pallets/flask-sqlalchemy</a></li>
-          <li>flask-praetorian (MIT-Lizenz): <a href="https://github.com/dusktreader/flask-praetorian">https://github.com/dusktreader/flask-praetorian</a></li>
-          <li>Flask-CORS (MIT-Lizenz): <a href="https://github.com/corydolphin/flask-cors">https://github.com/corydolphin/flask-cors</a></li>
-          <li>Behametrics Serverimplementierung (MIT-Lizenz)<a href="https://gitlab.com/behametrics/server">https://gitlab.com/behametrics/server</a></li>
-        </ul>
-        <h2>Bildnachweise</h2>
-        <ul className="bildnachweise">
-          <li>
-            Originalbild für die Startseite: <a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
-              https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
-            </a>
-          </li>
-        </ul>
-      </div>
-      <Footer />
-    </>
-  );
-}
diff --git a/frontend/src/components/pages/Lizenzen.jsx b/frontend/src/components/pages/Lizenzen.jsx
new file mode 100644
index 0000000..dbd7b38
--- /dev/null
+++ b/frontend/src/components/pages/Lizenzen.jsx
@@ -0,0 +1,95 @@
+import React from "react";
+import "../../App.css";
+import Footer from "../../Footer";
+
+export default function Lizenzen() {
+  return (
+    <>
+      <div className="sitePage license">
+        <h1>Lizenzen und Bildnachweise</h1>
+        <p>
+          Nachfolgend sollen die verwendeten Bibliotheken inklusive der Lizenz
+          aufgeführt werden. Neben den Bibliotheken sollen vorallem auch
+          Bildnachweise notiert werden.
+        </p>
+        <h2>Verwendete Bibliotheken</h2>
+        <h3>Frontend</h3>
+        <ul>
+          <li>
+            ReactJS (MIT-Lizenz):{" "}
+            <a href="https://github.com/facebook/react">
+              https://github.com/facebook/react
+            </a>{" "}
+          </li>
+          <li>
+            Behametrics Web-Logger (MIT-Lizenz):{" "}
+            <a href="https://gitlab.com/behametrics/logger-web">
+              https://gitlab.com/behametrics/logger-web
+            </a>
+          </li>
+          <li>
+            Fortawesome Icons (CC-BY-4.0):{" "}
+            <a href="https://github.com/FortAwesome/Font-Awesome">
+              https://github.com/FortAwesome/Font-Awesome
+            </a>
+          </li>
+          <li>
+            React-Token-Auth (ISC-Lizenz):{" "}
+            <a href="https://github.com/obabichev/react-token-auth">
+              https://github.com/obabichev/react-token-auth
+            </a>
+          </li>
+          <li>
+            react-router-dom (MIT-Lizenz)
+            <a href="https://github.com/ReactTraining/react-router">
+              https://github.com/ReactTraining/react-router
+            </a>
+          </li>
+        </ul>
+        <h3>Backend</h3>
+        <ul>
+          <li>
+            Flask (BSD-3-Lizenz):{" "}
+            <a href="https://github.com/pallets/flask/">
+              https://github.com/pallets/flask/
+            </a>
+          </li>
+          <li>
+            flask-sqlalchemy (BSD-3-Lizenz):{" "}
+            <a href="https://github.com/pallets/flask-sqlalchemy">
+              https://github.com/pallets/flask-sqlalchemy
+            </a>
+          </li>
+          <li>
+            flask-praetorian (MIT-Lizenz):{" "}
+            <a href="https://github.com/dusktreader/flask-praetorian">
+              https://github.com/dusktreader/flask-praetorian
+            </a>
+          </li>
+          <li>
+            Flask-CORS (MIT-Lizenz):{" "}
+            <a href="https://github.com/corydolphin/flask-cors">
+              https://github.com/corydolphin/flask-cors
+            </a>
+          </li>
+          <li>
+            Behametrics Serverimplementierung (MIT-Lizenz)
+            <a href="https://gitlab.com/behametrics/server">
+              https://gitlab.com/behametrics/server
+            </a>
+          </li>
+        </ul>
+        <h2>Bildnachweise</h2>
+        <ul className="bildnachweise">
+          <li>
+            Originalbild für die Startseite:{" "}
+            <a href="https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/">
+              https://pixabay.com/illustrations/virtual-identity-digital-identity-69996/
+            </a>
+          </li>
+        </ul>
+      </div>
+      <Footer />
+    </>
+  );
+}
diff --git a/frontend/src/components/pages/Login.js b/frontend/src/components/pages/Login.jsx
similarity index 100%
rename from frontend/src/components/pages/Login.js
rename to frontend/src/components/pages/Login.jsx
diff --git a/frontend/src/components/pages/Manual.js b/frontend/src/components/pages/Manual.jsx
similarity index 91%
rename from frontend/src/components/pages/Manual.js
rename to frontend/src/components/pages/Manual.jsx
index e5d9ac8..d86d436 100644
--- a/frontend/src/components/pages/Manual.js
+++ b/frontend/src/components/pages/Manual.jsx
@@ -33,13 +33,11 @@ export default function Manual() {
           Studie.
         </p>
         <h2>War schon einmal hier</h2>
-        <p>
-          Wenn Sie schon einmal hier waren, gibt es zwei mögliche Zustände:
-        </p>
-          <ul>
-            <li>Sie sind noch eingeloggt</li>
-            <li>Sie sind nicht mehr eingeloggt</li>
-          </ul>
+        <p>Wenn Sie schon einmal hier waren, gibt es zwei mögliche Zustände:</p>
+        <ul>
+          <li>Sie sind noch eingeloggt</li>
+          <li>Sie sind nicht mehr eingeloggt</li>
+        </ul>
         <p>
           Sofern Sie noch nicht eingeloggt sind, können Sie sich anmelden mit
           ihrem gewählten Benutzernamen und dem Passwort. Sie landen dann direkt
diff --git a/frontend/src/components/pages/Privacy.js b/frontend/src/components/pages/Privacy.jsx
similarity index 100%
rename from frontend/src/components/pages/Privacy.js
rename to frontend/src/components/pages/Privacy.jsx
diff --git a/frontend/src/components/pages/Register.js b/frontend/src/components/pages/Register.jsx
similarity index 100%
rename from frontend/src/components/pages/Register.js
rename to frontend/src/components/pages/Register.jsx
diff --git a/frontend/src/components/pages/Secret.js b/frontend/src/components/pages/Secret.jsx
similarity index 100%
rename from frontend/src/components/pages/Secret.js
rename to frontend/src/components/pages/Secret.jsx
diff --git a/frontend/src/components/pages/Study.js b/frontend/src/components/pages/Study.jsx
similarity index 100%
rename from frontend/src/components/pages/Study.js
rename to frontend/src/components/pages/Study.jsx
diff --git a/frontend/src/components/pages/Ueber.js b/frontend/src/components/pages/Ueber.jsx
similarity index 100%
rename from frontend/src/components/pages/Ueber.js
rename to frontend/src/components/pages/Ueber.jsx
diff --git a/frontend/src/components/pages/Umfrage.js b/frontend/src/components/pages/Umfrage.jsx
similarity index 100%
rename from frontend/src/components/pages/Umfrage.js
rename to frontend/src/components/pages/Umfrage.jsx
