diff --git a/src/components/compose-button.jsx b/src/components/compose-button.jsx
index 66dc5031..ceb452c4 100644
--- a/src/components/compose-button.jsx
+++ b/src/components/compose-button.jsx
@@ -1,26 +1,33 @@
+import { useHotkeys } from 'react-hotkeys-hook';
+
 import openCompose from '../utils/open-compose';
 import states from '../utils/states';
 
 import Icon from './icon';
 
 export default function ComposeButton() {
-  return (
-    <button
-      type="button"
-      id="compose-button"
-      onClick={(e) => {
-        if (e.shiftKey) {
-          const newWin = openCompose();
+  function handleButton(e) {
+    if (e.shiftKey) {
+      const newWin = openCompose();
 
-          if (!newWin) {
-            alert('Looks like your browser is blocking popups.');
-            states.showCompose = true;
-          }
-        } else {
-          states.showCompose = true;
-        }
-      }}
-    >
+      if (!newWin) {
+        alert('Looks like your browser is blocking popups.');
+        states.showCompose = true;
+      }
+    } else {
+      states.showCompose = true;
+    }
+  }
+
+  useHotkeys('c, shift+c', handleButton, {
+    ignoreEventWhen: (e) => {
+      const hasModal = !!document.querySelector('#modal-container > *');
+      return hasModal;
+    },
+  });
+
+  return (
+    <button type="button" id="compose-button" onClick={handleButton}>
       <Icon icon="quill" size="xl" alt="Compose" />
     </button>
   );