diff --git a/components/Shell.tsx b/components/Shell.tsx
index 0661318c06..4cee88fc4d 100644
--- a/components/Shell.tsx
+++ b/components/Shell.tsx
@@ -17,6 +17,11 @@ export default function Shell(props) {
         setMobileMenuExpanded(!mobileMenuExpanded);
     }
 
+    const logoutHandler = () => {
+        signOut();
+        router.push('/');
+    }
+
     return (
         <div>
             <div className="bg-gray-800 pb-32">
@@ -69,7 +74,7 @@ export default function Shell(props) {
                                                     <div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu">
                                                         <Link href="/settings/profile"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a></Link>
                                                         <Link href="/settings/password"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Login &amp; Security</a></Link>
-                                                        <button onClick={signOut} className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</button>
+                                                        <button onClick={logoutHandler} className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</button>
                                                     </div>
                                                 )
                                             }
@@ -126,7 +131,7 @@ export default function Shell(props) {
                                 <Link href="/settings">
                                     <a className={router.pathname.startsWith("/settings") ? "bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Settings</a>
                                 </Link>
-                                <button onClick={signOut} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</button>
+                                <button onClick={logoutHandler} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</button>
                             </div>
                         </div>
                     </div>