diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
index 4db4781..7b7c8d7 100644
--- a/src/components/Clock.tsx
+++ b/src/components/Clock.tsx
@@ -1,16 +1,15 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCheck, faDownload, faShareAlt} from "@fortawesome/free-solid-svg-icons";
+import {faDownload, faShareAlt} from "@fortawesome/free-solid-svg-icons";
 import React, {useContext, useEffect, useState} from "react";
 import {TvSeriesDetails} from "../tmdb/types";
 import {lookup, lookupRuntime} from "../tmdb/api";
 import {encodeItems, formatTime, Item, timesOf, useForceUpdate} from "../utils";
-import Loader from "./Loader";
-import "./Clock.scss";
 import ImportModal from "./ui/ImportModal";
 import {ModalContext} from "./context/ModalContext";
 import {AppContext} from "./context/AppContext";
-import SimpleModal from "./ui/SimpleModal";
 import WageModal from "./ui/WageModal";
+import Loader from "./Loader";
+import "./Clock.scss";
 
 const Clock = ({items}: { items: Item[] }) => {
 
@@ -56,17 +55,17 @@ const Clock = ({items}: { items: Item[] }) => {
     <div className={"Clock" + (!finished ? " Loading" : "")}>
       <div>
         <div className={"TitleWrapper"}>
-          {isSharedData && <div className={"TitleNotice"} onClick={() => { window.location.href = window.location.origin }}>this could be you</div>}
+          {isSharedData && <div className={"TitleNotice"} onClick={() => window.location.href = window.location.origin}>this could be you</div>}
           <div className="Title">{isSharedData ? "⤿ someone" : "you've"} wasted over</div>
         </div>
         <div className="Main">{formatTime(time)}</div>
         {!finished ? <Loader/> : <>
-          <div className="Or">or</div>
+          <div className="Or">OR</div>
           <div className="Days">{(time / 60 / 24).toFixed(1)} days</div>
           <div className="Wage">
             <div className={"WageEarned"}>{(time / 60 * (wage <= 0 ? 12 : wage)).toLocaleString("en-US", {maximumFractionDigits: 0})}{currency}</div>
             <div onClick={event => {
-              openModal(<WageModal wage={wage} setWage={setWage} currency={currency} setCurrency={setCurrency} />);
+              openModal(<WageModal wage={wage} setWage={setWage} currency={currency} setCurrency={setCurrency}/>);
             }} className={"WageAmount"}>at {wage <= 0 ? "minimum wage" : wage + currency + "/h"}</div>
           </div>
         </>}
@@ -90,9 +89,9 @@ const Clock = ({items}: { items: Item[] }) => {
                 .then(() => console.log("Successful copy"))
                 .catch((error) => console.log("Error copying", error));
             }
-          }}><FontAwesomeIcon icon={faShareAlt}/> share your history
-          </div>
-          : <div className="Button" onClick={event => openModal(<ImportModal/>)}>
+          }}><FontAwesomeIcon icon={faShareAlt}/> share your history</div>
+          :
+          <div className="Button" onClick={event => openModal(<ImportModal/>)}>
             <FontAwesomeIcon icon={faDownload}/> import this history
           </div>}
       </div>
diff --git a/src/components/ui/ContextMenu.scss b/src/components/ui/ContextMenu.scss
index b4777c1..32996ce 100644
--- a/src/components/ui/ContextMenu.scss
+++ b/src/components/ui/ContextMenu.scss
@@ -1,131 +1,158 @@
 .ContextMenu {
-  position: relative;
-
-  .ContextWindow {
-
-    position: absolute;
-    top: 70px;
-    right: 10px;
-
-    width: 200px;
-    height: auto;
-    border-radius: 20px;
-    background: var(--background-border);
-
-    font-family: "Poppins", sans-serif;
-
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-    padding: 10px;
-
-    hr {
-      opacity: 50%;
-      width: 80%;
-      margin: auto;
-    }
-
-    .Button {
-      display: flex;
-      justify-content: flex-start;
-      gap: 20px;
-      padding: 0 0 0 20px;
-      align-items: center;
-      height: 40px;
-      width: 90%;
-
-      margin: auto;
-      border-radius: 10px;
-
-      cursor: pointer;
-
-      transition: background-color ease .2s;
-      &:hover {
-        background: var(--background-popup-secondary);
-      }
-
-      .ButtonIcon {
-        color: var(--text-primary);
-      }
-
-      .ButtonTitle {
-        color: var(--text-primary);
-        text-align: center;
-      }
-    }
-
-    .S9gUrf-YoZ4jf {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-    }
-
-    .SignedInAs {
-      color: var(--text-secondary);
-      font-size: 12px;
-      text-align: center;
-    }
-
-    .UserName {
-      color: var(--text-primary);
-      font-size: 16px;
-      text-align: center;
-    }
-
-    &:not(.Visible) {
-      display: none;
-
-      animation: modal-fadeout-wrapper .15s ease-out forwards;
-
-      @keyframes modal-fadeout-wrapper {
-        from {
-          display: grid;
-        }
-        to {
-          display: none;
-          opacity: 0;
-        }
-      }
-    }
-
-    &.Visible {
-      animation: modal-fadein-wrapper .15s ease-out forwards;
-
-      @keyframes modal-fadein-wrapper {
-        from {
-          display: none;
-          opacity: 0;
-        }
-        to {
-          display: grid;
-        }
-
-      }
-    }
-
-  }
-
-  .MainButton {
-    position: absolute;
-
-    right: 40px;
-    top: 20px;
-
-    width: 40px;
-    height: 40px;
-    border-radius: 20px;
-    background: var(--text-secondary);
-    cursor: pointer;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    .ProfilePicture {
-      width: 100%;
-      height: 100%;
-      border-radius: 20px;
-    }
-  }
+	position: relative;
+
+	.ContextWindow {
+		position: absolute;
+		top: 70px;
+		right: 10px;
+
+		width: 200px;
+		height: auto;
+		border-radius: 20px;
+		background: var(--background-border);
+
+		font-family: "Poppins", sans-serif;
+
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+		padding: 10px 20px;
+
+		hr {
+			opacity: 50%;
+			width: 80%;
+			margin: auto;
+		}
+
+		.Button {
+			display: flex;
+			justify-content: flex-start;
+			gap: 20px;
+			padding: 0 0 0 20px;
+			align-items: center;
+			height: 40px;
+			width: 90%;
+
+			margin: auto;
+			border-radius: 10px;
+
+			cursor: pointer;
+			user-select: none;
+
+			transition: background-color ease .2s;
+
+			&:hover {
+				background: var(--background-popup-secondary);
+			}
+
+			color: var(--text-primary);
+
+			.ButtonTitle {
+				text-align: center;
+			}
+
+			&.Logout {
+				color: var(--action-fail);
+
+				&:hover {
+					background: var(--action-fail-background);
+				}
+			}
+		}
+
+		.S9gUrf-YoZ4jf {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+
+		.SignedInAs {
+			color: var(--text-secondary);
+			font-size: 12px;
+			text-align: center;
+		}
+
+		.UserName {
+			color: var(--text-primary);
+			font-size: 16px;
+			text-align: center;
+		}
+
+		.LoggedOut {
+			text-align: center;
+			padding: 7px 0;
+
+			svg {
+				font-size: 20px;
+				color: var(--action-fail-background);
+			}
+
+			p {
+				color: var(--icon-primary);
+			}
+		}
+
+		&:not(.Visible) {
+			display: none;
+
+			animation: context-fadeout .15s ease-in-out forwards;
+
+			@keyframes context-fadeout {
+				from {
+					display: grid;
+				}
+				to {
+					transform: translateY(-5px);
+					display: none;
+					opacity: 0;
+				}
+			}
+		}
+
+		&.Visible {
+			animation: context-fadein .15s ease-in-out forwards;
+
+			@keyframes context-fadein {
+				from {
+					transform: translateY(-5px);
+					display: none;
+					opacity: 0;
+				}
+				to {
+					display: grid;
+				}
+
+			}
+		}
+
+	}
+
+	.MainButton {
+		position: absolute;
+
+		right: 40px;
+		top: 20px;
+
+		@media (max-width: 600px) {
+			right: 20px;
+		}
+
+		width: 40px;
+		height: 40px;
+		border-radius: 20px;
+		background: var(--background-border);
+		color: var(--icon-primary);
+		cursor: pointer;
+
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.ProfilePicture {
+			width: 100%;
+			height: 100%;
+			border-radius: 20px;
+		}
+	}
 
 }
\ No newline at end of file
diff --git a/src/components/ui/ContextMenu.tsx b/src/components/ui/ContextMenu.tsx
index ad5367c..ea728b0 100644
--- a/src/components/ui/ContextMenu.tsx
+++ b/src/components/ui/ContextMenu.tsx
@@ -1,21 +1,21 @@
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faCheck, faTrash, faUser} from "@fortawesome/free-solid-svg-icons";
+import {faCheck, faLock, faTrash, faUser} from "@fortawesome/free-solid-svg-icons";
 import React, {useContext, useEffect, useRef, useState} from "react";
-import "./ContextMenu.scss"
 import LoginButton from "./account/LoginButton";
 import {UserContext} from "../context/UserContext";
 import {AppContext} from "../context/AppContext";
 import {ModalContext} from "../context/ModalContext";
 import SimpleModal from "./SimpleModal";
 import LogoutButton from "./account/LogoutButton";
+import "./ContextMenu.scss";
 
 const ContextMenu = () => {
 
   const [utilitiesOpen, setUtilitiesOpen] = useState(false);
-  const { setItems, writeItemsToCookies } = useContext(AppContext);
-  const { openModal, closeModal } = useContext(ModalContext);
+  const {setItems, writeItemsToCookies} = useContext(AppContext);
+  const {openModal, closeModal} = useContext(ModalContext);
 
-  const { loggedIn, name, picture } = useContext(UserContext);
+  const {loggedIn, name, picture} = useContext(UserContext);
 
   const ref: any = useRef("contextMenu");
 
@@ -27,6 +27,7 @@ const ContextMenu = () => {
           onClickOutside();
         }
       }
+
       document.addEventListener("mousedown", handleClickOutside);
       return () => {
         document.removeEventListener("mousedown", handleClickOutside);
@@ -34,49 +35,47 @@ const ContextMenu = () => {
 
     }, [ref, onClickOutside]);
   }
+
   useClickOutside(ref, () => {
     setUtilitiesOpen(false);
   });
 
   return (
-      <div className={"ContextMenu"} ref={ref}>
-        <div className={"MainButton"} onClick={() => setUtilitiesOpen(!utilitiesOpen) }>
-          {picture !== "" && (
-              <img className={"ProfilePicture"} src={picture} alt={""}/>
-          )}
-          {picture === "" && (
-              <FontAwesomeIcon icon={faUser} />
-          )}
-        </div>
-        <div className={`ContextWindow ${utilitiesOpen ? "Visible" : ""}`}>
-          <div>
-            <p className={"SignedInAs"}>Signed in as:</p>
-            <p className={"UserName"}>{name || "someone"}</p>
-          </div>
-          <hr/>
-          <div className={"Button"} onClick={() => {
-            openModal(
-                <SimpleModal title={"Are you sure?"} body={"This will delete all of your current saved history!"} buttons={
-                  <div className={"Button Save"} onClick={() => {
-                    setItems([]);
-                    writeItemsToCookies([]);
-                    closeModal();
-                  }}><FontAwesomeIcon icon={faCheck}/> Confirm
-                  </div>
-                } />
-            )
-          }}>
-            <FontAwesomeIcon  icon={faTrash} className={"ButtonIcon"} />
-            <p className={"ButtonTitle"}>Reset History</p>
-          </div>
-          <hr/>
-          {loggedIn ? (
-              <LogoutButton />
-          ) : (
-              <LoginButton />
-          )}
+    <div className={"ContextMenu"} ref={ref}>
+      <div className={"MainButton"} onClick={() => setUtilitiesOpen(!utilitiesOpen)}>
+        {picture !== "" && (
+          <img className={"ProfilePicture"} src={picture} alt={""}/>
+        )}
+        {picture === "" && (<FontAwesomeIcon icon={faUser}/>)}
+      </div>
+      <div className={`ContextWindow ${utilitiesOpen ? "Visible" : ""}`}>
+        {name ? <div>
+          <p className={"SignedInAs"}>Signed in as:</p>
+          <p className={"UserName"}>{name}</p>
+        </div> : <div className={"LoggedOut"}>
+          <FontAwesomeIcon icon={faLock}/>
+          <p>You're logged out</p>
+        </div>}
+        <hr/>
+        <div className={"Button"} onClick={() => {
+          openModal(
+            <SimpleModal title={"Are you sure?"} body={"This will delete all of your current saved history!"} buttons={
+              <div className={"Button Save"} onClick={() => {
+                setItems([]);
+                writeItemsToCookies([]);
+                closeModal();
+              }}><FontAwesomeIcon icon={faCheck}/> Confirm
+              </div>
+            }/>
+          );
+        }}>
+          <FontAwesomeIcon icon={faTrash} className={"ButtonIcon"}/>
+          <p className={"ButtonTitle"}>Reset History</p>
         </div>
+        <hr/>
+        {loggedIn ? (<LogoutButton/>) : (<LoginButton/>)}
       </div>
+    </div>
   );
 };
 
diff --git a/src/components/ui/ImportModal.tsx b/src/components/ui/ImportModal.tsx
index 1eaf865..87ce90b 100644
--- a/src/components/ui/ImportModal.tsx
+++ b/src/components/ui/ImportModal.tsx
@@ -2,9 +2,9 @@ import {faArrowRightArrowLeft, faCheck, faCodeBranch, faReply} from "@fortawesom
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React, {useContext, useState} from "react";
 import {ModalContext} from "../context/ModalContext";
-import "./ImportModal.scss";
 import {AppContext} from "../context/AppContext";
 import {mergeItemSets} from "../../utils";
+import "./ImportModal.scss";
 
 const ImportModal = () => {
   const { closeModal } = useContext(ModalContext);
diff --git a/src/components/ui/SimpleModal.scss b/src/components/ui/SimpleModal.scss
index 95b1f88..e6312e1 100644
--- a/src/components/ui/SimpleModal.scss
+++ b/src/components/ui/SimpleModal.scss
@@ -38,12 +38,14 @@
 				font-size: 32px;
 				text-align: center;
 				color: var(--text-primary);
+				font-family: "Poppins", sans-serif;
 			}
 
 			.ModalBody {
 				font-size: 16px;
 				text-align: center;
 				color: var(--text-secondary);
+				font-family: "Open Sans", sans-serif;
 			}
 		}
 
diff --git a/src/components/ui/WageModal.tsx b/src/components/ui/WageModal.tsx
index b2013fc..d3ceac9 100644
--- a/src/components/ui/WageModal.tsx
+++ b/src/components/ui/WageModal.tsx
@@ -33,7 +33,6 @@ const WageModal = ({wage, setWage, currency, setCurrency}: {wage: number, setWag
                   setLocalWage(-1);
                 }
 
-
               }} />
             </div>
             <div className={"Input"}>
@@ -46,7 +45,6 @@ const WageModal = ({wage, setWage, currency, setCurrency}: {wage: number, setWag
                   setLocalCurrency("€");
                 }
 
-
               }} />
             </div>
           </div>
diff --git a/src/components/ui/account/LoginButton.tsx b/src/components/ui/account/LoginButton.tsx
index 7b1ccfc..f80f5da 100644
--- a/src/components/ui/account/LoginButton.tsx
+++ b/src/components/ui/account/LoginButton.tsx
@@ -1,29 +1,28 @@
 import {CredentialResponse, GoogleLogin} from "@react-oauth/google";
-import jwt_decode from "jwt-decode";
-import {useContext, useEffect} from "react";
+import {useContext} from "react";
 import {UserContext} from "../../context/UserContext";
 
 const LoginButton = () => {
 
-  const { processJwt } = useContext(UserContext);
+  const {processJwt} = useContext(UserContext);
 
   const handleGoogleResponse = (credentialResponse: CredentialResponse) => {
     if (credentialResponse.credential != null) {
       processJwt(credentialResponse.credential);
     }
-  }
+  };
 
   return (
-      <GoogleLogin size={"large"} text={"signin"} locale={"en-US"}
-                   onSuccess={handleGoogleResponse}
-                   onError={() => {
-                     console.log('Login Failed');
-                   }}
-                   useOneTap={(localStorage.getItem("auth") === null)}
-                   cancel_on_tap_outside={true}
-                   width={140}
-                   shape={"pill"}
-      />
+    <GoogleLogin size={"large"} text={"signin"} locale={"en-US"}
+                 onSuccess={handleGoogleResponse}
+                 onError={() => {
+                   console.log("Login Failed");
+                 }}
+                 useOneTap={(localStorage.getItem("auth") === null)}
+                 cancel_on_tap_outside={true}
+                 width={140}
+                 shape={"pill"}
+    />
   );
 };
 
diff --git a/src/components/ui/account/LogoutButton.tsx b/src/components/ui/account/LogoutButton.tsx
index 59321b3..40a5a6e 100644
--- a/src/components/ui/account/LogoutButton.tsx
+++ b/src/components/ui/account/LogoutButton.tsx
@@ -1,4 +1,3 @@
-import SimpleModal from "../SimpleModal";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faRightFromBracket} from "@fortawesome/free-solid-svg-icons";
 import React, {useContext} from "react";
@@ -6,13 +5,13 @@ import {UserContext} from "../../context/UserContext";
 
 const LogoutButton = () => {
 
-  const { deleteJwt } = useContext(UserContext);
+  const {deleteJwt} = useContext(UserContext);
 
   return (
-      <div className={"Button"} onClick={deleteJwt}>
-        <FontAwesomeIcon icon={faRightFromBracket} className={"ButtonIcon"} />
-        <p className={"ButtonTitle"}>Logout</p>
-      </div>
+    <div className={"Button Logout"} onClick={deleteJwt}>
+      <FontAwesomeIcon icon={faRightFromBracket} className={"ButtonIcon"}/>
+      <p className={"ButtonTitle"}>Logout</p>
+    </div>
   );
 };
 
diff --git a/src/theme.scss b/src/theme.scss
index 1be213a..4be0ce9 100644
--- a/src/theme.scss
+++ b/src/theme.scss
@@ -13,4 +13,5 @@ body.dark {
 
 	--action-success: #3cda35;
 	--action-fail: #c74444;
+	--action-fail-background: rgba(199, 68, 68, 0.3);
 }