diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index bd7ac8955..27b49410d 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -8,6 +8,7 @@ import {
 } from '@ant-design/icons';
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { useState } from 'react';
+import { useHotkeys } from 'react-hotkeys-hook';
 import Modal from '../../ui/Modal/Modal';
 import {
   chatVisibleToggleAtom,
@@ -29,17 +30,23 @@ export default function UserDropdown({ username: defaultUsername }: Props) {
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
 
   const toggleChatVisibility = () => {
-    if (!chatToggleVisible) {
-      setChatToggleVisible(true);
-    } else {
-      setChatToggleVisible(false);
-    }
+    setChatToggleVisible(!chatToggleVisible);
   };
 
   const handleChangeName = () => {
     setShowNameChangeModal(true);
   };
 
+  // Register keyboard shortcut for the space bar to toggle playback
+  useHotkeys(
+    'c',
+    toggleChatVisibility,
+    {
+      enableOnContentEditable: false,
+    },
+    [chatToggleVisible],
+  );
+
   const menu = (
     <Menu>
       <Menu.Item key="0" icon={<EditOutlined />} onClick={() => handleChangeName()}>