diff --git a/guide/making-a-pear-desktop-app.md b/guide/making-a-pear-desktop-app.md
index acd2316..22a334c 100644
--- a/guide/making-a-pear-desktop-app.md
+++ b/guide/making-a-pear-desktop-app.md
@@ -22,22 +22,15 @@ Start by defining the app's layout in `index.html`:
 <html>
   <head>
     <style>
-      pear-ctrl {
-        margin-top: 9px;
-        margin-left: 9px;
-        position: absolute;
-      }
-      pear-ctrl[data-platform="darwin"] { float: left; margin-top: 4px; }
+      pear-ctrl[data-platform="darwin"] { margin-top: 12px; margin-left: 10px; }
 
-      pear-ctrl:after {
-        content: '';
-        display: block;
-        height: 1.8rem;
+      #titlebar {
+        -webkit-app-region: drag;
+        height: 30px;
+        width: 100%;
         position: fixed;
-        z-index: -1;
         left: 0;
         top: 0;
-        width: 100%;
         background-color: #B0D94413;
         filter: drop-shadow(2px 10px 6px #888);
       }
@@ -122,7 +115,9 @@ Start by defining the app's layout in `index.html`:
     <script type='module' src='./app.js'></script>
   </head>
   <body>
-    <pear-ctrl></pear-ctrl>
+    <div id="titlebar">
+      <pear-ctrl></pear-ctrl>
+    </div>
     <main>
       <div id="setup">
         <div>
@@ -159,6 +154,12 @@ Start by defining the app's layout in `index.html`:
 </html>
 ```
 
+**Note**: To make the `<pear-ctrl>` element draggable in Pear applications, wrap it in another element that uses the following CSS property: 
+```css
+-webkit-app-region : drag;
+``` 
+This non-standard CSS property tells the application that this element should act as a draggable region for the entire window.
+
 Running `pear run --dev .` should show
 
 ![Layout of the app](../assets/chat-app-3.png)
