diff --git a/Kemkas.Web/Areas/Identity/Pages/Account/Logout.cshtml.cs b/Kemkas.Web/Areas/Identity/Pages/Account/Logout.cshtml.cs
index cde41b3..815f4d0 100644
--- a/Kemkas.Web/Areas/Identity/Pages/Account/Logout.cshtml.cs
+++ b/Kemkas.Web/Areas/Identity/Pages/Account/Logout.cshtml.cs
@@ -13,6 +13,7 @@ using Microsoft.Extensions.Logging;
 
 namespace Kemkas.Web.Areas.Identity.Pages.Account
 {
+    [IgnoreAntiforgeryToken(Order = 1001)]
     public class LogoutModel : PageModel
     {
         private readonly SignInManager<ApplicationUser> _signInManager;
diff --git a/Kemkas.Web/frontend/src/shared/Header.tsx b/Kemkas.Web/frontend/src/shared/Header.tsx
index 5476ed7..4086d24 100644
--- a/Kemkas.Web/frontend/src/shared/Header.tsx
+++ b/Kemkas.Web/frontend/src/shared/Header.tsx
@@ -1,8 +1,15 @@
 import * as React from "react";
 import {useState} from "react";
+import axios from "axios";
+import {Container, Nav, Navbar} from "react-bootstrap";
 
 type LoadingState = "not-started" | "loading" | "finished"
 
+async function logout() {
+    await axios.post("/Identity/Account/Logout")
+    document.location.reload()
+} 
+
 function Header(props: {}) {
     
     let [loading, setLoading] = useState("not-started" as LoadingState);
@@ -19,42 +26,39 @@ function Header(props: {}) {
             })
             .finally(() => setLoading("finished"))
     }
-
+    
     return <header>
-        <nav
-            className="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
-            <div className="container ps-4 pe-4">
-                <a className="navbar-brand" href={userName == null ? "/" : "/karaktereim"}>Kemkas</a>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
-                        data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                        aria-expanded="false" aria-label="Toggle navigation">
-                    <span className="navbar-toggler-icon"></span>
-                </button>
-                {loading !== "finished" ? "Loading..." :
-                    userName == null
-                        ? <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
-                            <ul className="navbar-nav">
-                                <li className="nav-item">
-                                    <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
-                                </li>
-                                <li className="nav-item">
-                                    <a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
-                                </li>
-                            </ul>
-                        </div>
-                        : <div className="navbar-collapse collapse d-sm-inline-flex flex-sm-row-reverse">
-                            <ul className="navbar-nav">
-                                <li className="nav-item">
-                                    <a className="nav-link text-dark" href="/Identity/Account/Manage">Hello {userName}!</a>
-                                </li>
-                                <li className="nav-item">
-                                    <a className="nav-link text-dark" href="/Identity/Account/Logout">Logout</a>
-                                </li>
-                            </ul>
-                        </div>
-                }
-            </div>
-        </nav>
+        <Navbar expand="sm" className="navbar-light bg-white border-bottom box-shadow mb-3">
+            <Container className="ps-4 pe-4">
+                <Navbar.Brand href="/">Kemkas</Navbar.Brand>
+                <Nav.Link className="text-dark" href="/karaktereim">Karaktereim</Nav.Link>
+                <Navbar.Toggle aria-controls="basic-navbar-nav" />
+                <Navbar.Collapse id="basic-navbar-nav" className="d-sm-inline-flex flex-sm-row-reverse">
+                    <Nav>
+                        {loading !== "finished" ? "Loading..." :
+                            userName == null
+                                ? <>
+                                    <li className="nav-item">
+                                        <a className="nav-link text-dark" href="/Identity/Account/Register">Register</a>
+                                    </li>
+                                    <li className="nav-item">
+                                        <a className="nav-link text-dark" href="/Identity/Account/Login">Login</a>
+                                    </li>
+                                </>
+                                : <>
+                                    <li className="nav-item">
+                                        <a className="nav-link text-dark"
+                                           href="/Identity/Account/Manage">Hello {userName}!</a>
+                                    </li>
+                                    <li className="nav-item">
+                                        <button className="nav-link nav text-dark" onClick={logout}>Logout</button>
+                                    </li>
+                                </>
+                        }
+                    </Nav>
+                </Navbar.Collapse>
+            </Container>
+        </Navbar>
     </header>
 }