diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css
index 828fce4c2c..4b83bc7343 100644
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -410,9 +410,20 @@ li.show-more-topics {
     }
 }
 
-#login-link-container .login_button {
+#login-link-container {
+    color: var(--color-text-url);
     display: flex;
     align-items: center;
+
+    &:hover {
+        cursor: pointer;
+        color: var(--color-text-url-hover);
+
+        &.login_button .login-text {
+            color: var(--color-text-url-hover);
+            text-decoration: underline;
+        }
+    }
 }
 
 ul.filters {
diff --git a/web/templates/left_sidebar.hbs b/web/templates/left_sidebar.hbs
index 02a5fc4c96..41fa84a39b 100644
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -183,12 +183,14 @@
                 {{#unless is_guest }}
                     <div id="subscribe-to-more-streams"></div>
                 {{/unless}}
-                <div id="login-link-container" class="only-visible-for-spectators">
-                    <a class="login_button">
+                <div class="only-visible-for-spectators">
+                    <div id="login-link-container" class="login_button">
                         <i class="zulip-icon zulip-icon-log-in" aria-hidden="true"></i>
                         {{~!-- squash whitespace --~}}
-                        {{t 'Log in to browse more channels'}}
-                    </a>
+                        <a class="login-text">
+                            {{t 'Log in to browse more channels'}}
+                        </a>
+                    </div>
                 </div>
             </div>
         </div>