diff --git a/static/js/ui_init.js b/static/js/ui_init.js
index d7612498b8..16890bf2d3 100644
--- a/static/js/ui_init.js
+++ b/static/js/ui_init.js
@@ -154,6 +154,7 @@ function initialize_left_sidebar() {
 function initialize_right_sidebar() {
     const rendered_sidebar = render_right_sidebar({
         can_invite_others_to_realm: settings_data.user_can_invite_others_to_realm(),
+        realm_description: page_params.realm_description,
     });
 
     $("#right-sidebar-container").html(rendered_sidebar);
diff --git a/static/styles/app_components.css b/static/styles/app_components.css
index 62a20c04a9..aa82e72f7c 100644
--- a/static/styles/app_components.css
+++ b/static/styles/app_components.css
@@ -638,6 +638,8 @@ div.overlay {
     display: flex;
     justify-content: center;
     background-color: hsl(0, 0%, 90%);
+    color: hsl(0, 0%, 0%);
+    border-radius: 4px;
 
     span {
         color: hsl(0, 0%, 0%);
@@ -645,7 +647,7 @@ div.overlay {
 
     &:hover {
         cursor: pointer;
-        background-color: hsl(228, 96%, 71%);
+        background-color: hsl(240, 96%, 68%);
         color: hsl(0, 0%, 100%);
 
         span {
diff --git a/static/styles/dark_theme.css b/static/styles/dark_theme.css
index d891199fa8..a3953f091e 100644
--- a/static/styles/dark_theme.css
+++ b/static/styles/dark_theme.css
@@ -1150,14 +1150,14 @@ body.dark-theme {
     }
 
     .color_animated_button {
-        background-color: hsl(209, 32%, 5%);
+        background-color: hsl(211, 29%, 14%);
 
         * {
             color: hsl(0, 0%, 100%);
         }
 
         &:hover {
-            background-color: hsl(228, 96%, 71%);
+            background-color: hsl(240, 96%, 68%);
         }
     }
 
diff --git a/static/styles/right_sidebar.css b/static/styles/right_sidebar.css
index e0e0e46d03..59ac84fb5d 100644
--- a/static/styles/right_sidebar.css
+++ b/static/styles/right_sidebar.css
@@ -248,3 +248,14 @@
         padding-bottom: 0;
     }
 }
+
+.right-sidebar-shortcuts .realm-description {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .color_animated_button {
+        width: 100%;
+        margin-bottom: 10px;
+    }
+}
diff --git a/static/templates/right_sidebar.hbs b/static/templates/right_sidebar.hbs
index d9aa6e7b3f..d48d9a34a7 100644
--- a/static/templates/right_sidebar.hbs
+++ b/static/templates/right_sidebar.hbs
@@ -26,9 +26,22 @@
             {{#if can_invite_others_to_realm}}
             <a id="invite-user-link" href="#invite"><i class="fa fa-user-plus" aria-hidden="true"></i>{{t 'Invite more users' }}</a>
             {{/if}}
-            <a id="sidebar-keyboard-shortcuts" data-overlay-trigger="keyboard-shortcuts">
+            <a id="sidebar-keyboard-shortcuts" data-overlay-trigger="keyboard-shortcuts" class="hidden-for-spectators">
                 <i class="fa fa-keyboard-o fa-2x tippy-zulip-tooltip" id="keyboard-icon" data-tippy-allowHtml="true" data-tippy-content="{{t 'Keyboard shortcuts' }} <span class='hotkey-hint'>(?)</span>"></i>
             </a>
+            <div class="only-visible-for-spectators">
+                <div class="realm-description">
+                    <p>{{ realm_description }}</p>
+                    <a href="/register"  class="signup_button color_animated_button">
+                        <i class="fa fa-pencil-square-o"></i>
+                        <span>{{t 'Sign up' }}</span>
+                    </a>
+                    <a href="/login" class="login_button color_animated_button">
+                        <i class="fa fa-sign-in"></i>
+                        <span>{{t 'Log in' }}</span>
+                    </a>
+                </div>
+            </div>
         </div>
     </div>
 </div>