diff --git a/src/components/Logout/Logout.tsx b/src/components/Logout/Logout.tsx
new file mode 100644
index 0000000..3ad9e19
--- /dev/null
+++ b/src/components/Logout/Logout.tsx
@@ -0,0 +1,37 @@
+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 interface state {
+  logged_in: {
+    value: boolean;
+  };
+}
+export default function Logout() {
+  const logged_in = useSelector((state: state) => state.logged_in.value);
+  const dispatch = useDispatch();
+
+  async function login() {
+    await dispatch(toggle());
+    await console.log("test " + logged_in);
+  }
+
+  if (!logged_in) {
+    return <div></div>;
+  } else {
+    return (
+      <div style={{ paddingTop: 384 }}>
+        <Button
+          onClick={login}
+          value="Log out"
+          variant="contained"
+          style={styles.logout_button}
+        >
+          <p style={styles.text}>Log Out</p>
+        </Button>
+      </div>
+    );
+  }
+}
diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
index 38f1266..3d8189b 100644
--- a/src/components/Sidebar/Sidebar.tsx
+++ b/src/components/Sidebar/Sidebar.tsx
@@ -1,8 +1,8 @@
 import React from "react";
 import styles from "../../styles";
 import SidebarButton from "../SidebarButton/SidebarButton";
-import { redirect } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
+import Logout from "../Logout/Logout";
 export interface state {
   minimized: {
     value: boolean;
@@ -18,6 +18,7 @@ export default function Sidebar() {
       <SidebarButton onClick={() => navigate("/Products")} name="Products" />
       <SidebarButton onClick={() => navigate("/Inventory")} name="Inventory" />
       <SidebarButton onClick={() => navigate("/Logs")} name="Logs" />
+      <Logout />
     </div>
   );
 }
diff --git a/src/styles.tsx b/src/styles.tsx
index a2a7f5f..c78deb2 100644
--- a/src/styles.tsx
+++ b/src/styles.tsx
@@ -57,6 +57,18 @@ const styles: { [key: string]: React.CSSProperties } = {
     padding: 8,
     borderRadius: 16,
   },
+  logout_button: {
+    backgroundColor: "#0b2322",
+    width: 256,
+    height: 64,
+    border: "none",
+    padding: 8,
+    borderRadius: 16,
+    borderTopLeftRadius: 32,
+    borderBottomLeftRadius: 32,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  },
   sidebar_button: {
     backgroundColor: "#0b2322",
     width: 256,