diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -3,6 +3,7 @@
 import 'basscss/css/basscss.min.css';
 import './theme.css';
 import { config as faConfig } from '@fortawesome/fontawesome-svg-core';
+import classnames from 'classnames';
 import _isEqual from 'lodash/fp/isEqual';
 import * as React from 'react';
 import { DndProvider } from 'react-dnd';
@@ -187,13 +188,26 @@
       navigationArrows = <NavigationArrows />;
     }
 
+    const headerClasses = classnames({
+      [css.header]: true,
+      [css['electron-draggable']]: electron,
+    });
+
+    const wordmarkClasses = classnames({
+      [css.wordmark]: true,
+      [css['electron-non-draggable']]: electron,
+    });
+
     return (
       <div className={css.layout}>
         <DisconnectedBarVisibilityHandler />
         <DisconnectedBar />
-        <header className={css.header} onDoubleClick={this.onHeaderDoubleClick}>
+        <header
+          className={headerClasses}
+          onDoubleClick={this.onHeaderDoubleClick}
+        >
           <div className={css['main-header']}>
-            <h1 className={css.wordmark}>
+            <h1 className={wordmarkClasses}>
               <a
                 title="Comm Home"
                 aria-label="Go to Comm Home"
diff --git a/web/components/navigation-arrows.css b/web/components/navigation-arrows.css
--- a/web/components/navigation-arrows.css
+++ b/web/components/navigation-arrows.css
@@ -7,6 +7,7 @@
   color: var(--fg);
   display: flex;
   align-items: center;
+  -webkit-app-region: no-drag;
 }
 
 .disabled {
diff --git a/web/style.css b/web/style.css
--- a/web/style.css
+++ b/web/style.css
@@ -85,6 +85,12 @@
 .wordmark > a {
   color: inherit;
 }
+.electron-draggable {
+  -webkit-app-region: drag;
+}
+.electron-non-draggable {
+  -webkit-app-region: no-drag;
+}
 
 div.main-content-container {
   position: relative;