diff --git a/client/src/components/HeaderComponent.js b/client/src/components/HeaderComponent.js
index 3b0ba605..9c6d42f1 100644
--- a/client/src/components/HeaderComponent.js
+++ b/client/src/components/HeaderComponent.js
@@ -1,23 +1,27 @@
 import "../style/Header.sass";
-import {Component} from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faGear} from "@fortawesome/free-solid-svg-icons";
 import DropdownComponent, {toggleDropdown} from "./DropdownComponent";
+import {useState} from "react";
 
-class HeaderComponent extends Component {
+function HeaderComponent() {
 
-    render() {
-        return (
-            <header>
-                <div className="header-main">
-                    <h2>Netzwerkanalyse</h2>
-                    <FontAwesomeIcon icon={faGear} className="settings" onClick={toggleDropdown}/>
-                </div>
-                <DropdownComponent/>
-            </header>
-        )
+    const [icon, setIcon] = useState(faGear);
+
+    function switchDropdown() {
+        toggleDropdown(setIcon);
     }
 
+    return (
+        <header>
+            <div className="header-main">
+                <h2>Netzwerkanalyse</h2>
+                <FontAwesomeIcon icon={icon} className="settings" onClick={switchDropdown}/>
+            </div>
+            <DropdownComponent/>
+        </header>
+    )
+
 }
 
 export default HeaderComponent;
\ No newline at end of file