diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 16f977289..ec63d966d 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -29,7 +29,6 @@ import {
   OnboardingWizard,
   WaitlistPage,
 } from 'soapbox/features/ui/util/async-components';
-import GlobalHotkeys from 'soapbox/features/ui/util/global-hotkeys';
 import { createGlobals } from 'soapbox/globals';
 import {
   useAppSelector,
@@ -176,33 +175,31 @@ const SoapboxMount = () => {
       <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
         <CompatRouter>
           <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
-            <GlobalHotkeys>
-              <Switch>
-                <Route
-                  path='/embed/:statusId'
-                  render={(props) => <EmbeddedStatus params={props.match.params} />}
-                />
-                <Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
+            <Switch>
+              <Route
+                path='/embed/:statusId'
+                render={(props) => <EmbeddedStatus params={props.match.params} />}
+              />
+              <Redirect from='/@:username/:statusId/embed' to='/embed/:statusId' />
 
-                <Route>
-                  {renderBody()}
+              <Route>
+                {renderBody()}
 
-                  <BundleContainer fetchComponent={ModalContainer}>
-                    {Component => <Component />}
-                  </BundleContainer>
+                <BundleContainer fetchComponent={ModalContainer}>
+                  {Component => <Component />}
+                </BundleContainer>
 
-                  <GdprBanner />
+                <GdprBanner />
 
-                  <div id='toaster'>
-                    <Toaster
-                      position='top-right'
-                      containerClassName='top-10'
-                      containerStyle={{ top: 75 }}
-                    />
-                  </div>
-                </Route>
-              </Switch>
-            </GlobalHotkeys>
+                <div id='toaster'>
+                  <Toaster
+                    position='top-right'
+                    containerClassName='top-10'
+                    containerStyle={{ top: 75 }}
+                  />
+                </div>
+              </Route>
+            </Switch>
           </ScrollContext>
         </CompatRouter>
       </BrowserRouter>
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 040f6c677..ec3231688 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -135,6 +135,7 @@ import {
   EditGroup,
   FollowedTags,
 } from './util/async-components';
+import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
 
 // Dummy import, to make sure that <Status /> ends up in the application bundle.
@@ -511,60 +512,62 @@ const UI: React.FC<IUI> = ({ children }) => {
   };
 
   return (
-    <div ref={node} style={style}>
-      <div
-        className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', {
-          'backdrop-blur': isDragging,
-        })}
-      />
+    <GlobalHotkeys node={node}>
+      <div ref={node} style={style}>
+        <div
+          className={clsx('pointer-events-none fixed z-[90] h-screen w-screen transition', {
+            'backdrop-blur': isDragging,
+          })}
+        />
 
-      <BackgroundShapes />
+        <BackgroundShapes />
 
-      <div className='z-10 flex flex-col'>
-        <Navbar />
+        <div className='z-10 flex flex-col'>
+          <Navbar />
 
-        <Layout>
-          <Layout.Sidebar>
-            {!standalone && <SidebarNavigation />}
-          </Layout.Sidebar>
+          <Layout>
+            <Layout.Sidebar>
+              {!standalone && <SidebarNavigation />}
+            </Layout.Sidebar>
 
-          <SwitchingColumnsArea>
-            {children}
-          </SwitchingColumnsArea>
-        </Layout>
+            <SwitchingColumnsArea>
+              {children}
+            </SwitchingColumnsArea>
+          </Layout>
 
-        {(me && !shouldHideFAB()) && (
-          <div className='fixed bottom-24 right-4 z-40 transition-all rtl:left-4 rtl:right-auto lg:hidden'>
-            <FloatingActionButton />
-          </div>
-        )}
+          {(me && !shouldHideFAB()) && (
+            <div className='fixed bottom-24 right-4 z-40 transition-all rtl:left-4 rtl:right-auto lg:hidden'>
+              <FloatingActionButton />
+            </div>
+          )}
 
-        {me && (
-          <BundleContainer fetchComponent={SidebarMenu}>
+          {me && (
+            <BundleContainer fetchComponent={SidebarMenu}>
+              {Component => <Component />}
+            </BundleContainer>
+          )}
+
+          {me && features.chats && (
+            <BundleContainer fetchComponent={ChatWidget}>
+              {Component => (
+                <div className='hidden xl:block'>
+                  <Component />
+                </div>
+              )}
+            </BundleContainer>
+          )}
+          <ThumbNavigation />
+
+          <BundleContainer fetchComponent={ProfileHoverCard}>
             {Component => <Component />}
           </BundleContainer>
-        )}
 
-        {me && features.chats && (
-          <BundleContainer fetchComponent={ChatWidget}>
-            {Component => (
-              <div className='hidden xl:block'>
-                <Component />
-              </div>
-            )}
+          <BundleContainer fetchComponent={StatusHoverCard}>
+            {Component => <Component />}
           </BundleContainer>
-        )}
-        <ThumbNavigation />
-
-        <BundleContainer fetchComponent={ProfileHoverCard}>
-          {Component => <Component />}
-        </BundleContainer>
-
-        <BundleContainer fetchComponent={StatusHoverCard}>
-          {Component => <Component />}
-        </BundleContainer>
+        </div>
       </div>
-    </div>
+    </GlobalHotkeys>
   );
 };
 
diff --git a/app/soapbox/features/ui/util/global-hotkeys.tsx b/app/soapbox/features/ui/util/global-hotkeys.tsx
index aeb4d42fb..e54528a58 100644
--- a/app/soapbox/features/ui/util/global-hotkeys.tsx
+++ b/app/soapbox/features/ui/util/global-hotkeys.tsx
@@ -36,9 +36,10 @@ const keyMap = {
 
 interface IGlobalHotkeys {
   children: React.ReactNode
+  node: React.MutableRefObject<HTMLDivElement | null>
 }
 
-const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
+const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children, node }) => {
   const hotkeys = useRef<HTMLDivElement | null>(null);
 
   const history = useHistory();
@@ -48,9 +49,9 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
 
   const handleHotkeyNew = (e?: KeyboardEvent) => {
     e?.preventDefault();
-    if (!hotkeys.current) return;
+    if (!node.current) return;
 
-    const element = hotkeys.current.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
+    const element = node.current.querySelector('textarea#compose-textarea') as HTMLTextAreaElement;
 
     if (element) {
       element.focus();
@@ -59,9 +60,9 @@ const GlobalHotkeys: React.FC<IGlobalHotkeys> = ({ children }) => {
 
   const handleHotkeySearch = (e?: KeyboardEvent) => {
     e?.preventDefault();
-    if (!hotkeys.current) return;
+    if (!node.current) return;
 
-    const element = hotkeys.current.querySelector('input#search') as HTMLInputElement;
+    const element = node.current.querySelector('input#search') as HTMLInputElement;
 
     if (element) {
       element.focus();