Added and polished the header bar

src/components/Header/Header.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import AppLogo from "../Icons/AppLogo/AppLogo";
+import Login from "../Login/Login";
 import styles from "../../styles";
 
 export default function Header() {
@@ -9,7 +10,9 @@ export default function Header() {
         <AppLogo size={64} color="#6f9b78" />
         <p style={styles.logo_title}>Ivy</p>
       </div>
-      <div style={styles.header_right}></div>
+      <div style={styles.header_right}>
+        <Login />
+      </div>
     </div>
   );
 }

src/components/Login/Login.tsx

@@ -1,5 +1,49 @@
-import React from "react";
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { toggle } from "../../Features/Login/LoginSlice";
+import { Button } from "@mui/material";
+import styles from "../../styles";
 
-export default function Login() {
-  return <div>{"Login"}</div>;
+export interface state {
+  logged_in: {
+    value: boolean;
+  };
+}
+export default function Login() {
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  const [status, setStatus] = useState("Not logged in");
+  const dispatch = useDispatch();
+
+  async function login() {
+    await dispatch(toggle());
+    if (logged_in) {
+      setStatus("Logged in");
+    } else {
+      setStatus("Not logged in");
+    }
+    await console.log("test " + logged_in);
+  }
+
+  if (logged_in) {
+    return <p style={styles.text}>Welcome Jophiel</p>;
+  } else {
+    return (
+      <div>
+        <Button
+          onClick={login}
+          value="Login"
+          style={{
+            backgroundColor: "#9e8500",
+            width: 128,
+            height: 32,
+            border: "none",
+            padding: 8,
+            borderRadius: 16,
+          }}
+        >
+          <p style={styles.text}>Login</p>
+        </Button>
+      </div>
+    );
+  }
 }