diff --git a/frontend/src/ts/controllers/account-controller.ts b/frontend/src/ts/controllers/account-controller.ts
index ffeb71f36..884e44949 100644
--- a/frontend/src/ts/controllers/account-controller.ts
+++ b/frontend/src/ts/controllers/account-controller.ts
@@ -274,8 +274,12 @@ const authListener = Auth.onAuthStateChanged(async function (user) {
   const hash = window.location.hash;
   console.log(`auth state changed, user ${user ? true : false}`);
   if (user) {
+    $("#top .signInOut .icon").html(
+      `<i class="fas fa-fw fa-sign-out-alt"></i>`
+    );
     await loadUser(user);
   } else {
+    $("#top .signInOut .icon").html(`<i class="fas fa-fw fa-sign-in-alt"></i>`);
     if (window.location.pathname == "/account") {
       window.history.replaceState("", "", "/login");
     }
@@ -643,8 +647,12 @@ $(".pageLogin .login .button.signInWithGoogle").on("click", () => {
 // signInWithGitHub();
 // });
 
-$("#top .signOut").on("click", () => {
-  signOut();
+$("#top .signInOut").on("click", () => {
+  if (Auth.currentUser) {
+    signOut();
+  } else {
+    navigate("/login");
+  }
 });
 
 $(".pageLogin .register input").keyup((e) => {
diff --git a/frontend/static/html/top.html b/frontend/static/html/top.html
index f71618e42..ab8d3e5ea 100644
--- a/frontend/static/html/top.html
+++ b/frontend/static/html/top.html
@@ -143,9 +143,14 @@
         <i class="fas fa-fw fa-bell"></i>
       </div>
     </a> -->
-    <a class="textButton signOut" tabindex="2" onclick="this.blur();" data-link>
+    <a
+      class="textButton signInOut"
+      tabindex="2"
+      onclick="this.blur();"
+      data-link
+    >
       <div class="icon">
-        <i class="fas fa-fw fa-sign-out-alt"></i>
+        <i class="fas fa-fw fa-sign-in-alt"></i>
       </div>
     </a>
   </div>