diff --git a/app/templates/base.html b/app/templates/base.html
index 558673b..a8f6f41 100644
--- a/app/templates/base.html
+++ b/app/templates/base.html
@@ -5,11 +5,11 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>FlowDeck</title>
   <link rel="stylesheet" href="/static/css/app.css">
-  <script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
+  <script src="https://unpkg.com/htmx.org@2.0.4"></script>
   <script src="https://unpkg.com/alpinejs@3.14.9" defer></script>
   <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js" defer></script>
 </head>
-<body>
+<body hx-headers='{"X-CSRF-Token":"__CSRF_PLACEHOLDER__"}'>
   <header class="app-header">
     <div class="header-left">
       <a href="/" class="logo">
@@ -46,6 +46,20 @@
     </div>
   </div>
 
+  <script>
+    // Inject CSRF token into HTMX headers before HTMX processes anything
+    (function() {
+      const getCsrf = () => {
+        const m = document.cookie.match(/csrf_token=([^;]+)/);
+        return m ? m[1] : '';
+      };
+      document.body.setAttribute('hx-headers', JSON.stringify({'X-CSRF-Token': getCsrf()}));
+      // Also update on every HTMX request
+      document.addEventListener('htmx:configRequest', function(evt) {
+        evt.detail.headers['X-CSRF-Token'] = getCsrf();
+      });
+    })();
+  </script>
   <script src="/static/js/app.js" defer></script>
   {% block scripts %}{% endblock %}
 </body>