diff --git a/.app_version b/.app_version
index b0bb8785..85b7c695 100644
--- a/.app_version
+++ b/.app_version
@@ -1 +1 @@
-0.9.5
+0.9.6
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5fd99163..38948f58 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,14 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
 
+## [0.9.6] — 2024-07-27
+
+### Fixed
+
+- Map areas functionality
+
+---
+
 ## [0.9.5] — 2024-07-27
 
 ### Added
diff --git a/app/controllers/api/v1/areas_controller.rb b/app/controllers/api/v1/areas_controller.rb
index 6aa6062c..2cca1b72 100644
--- a/app/controllers/api/v1/areas_controller.rb
+++ b/app/controllers/api/v1/areas_controller.rb
@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 class Api::V1::AreasController < ApplicationController
+  skip_forgery_protection
   before_action :authenticate_api_key
   before_action :set_area, only: %i[update destroy]
 
diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js
index 0817890e..0308dba3 100644
--- a/app/javascript/controllers/maps_controller.js
+++ b/app/javascript/controllers/maps_controller.js
@@ -57,7 +57,7 @@ export default class extends Controller {
     L.control.layers(this.baseMaps(), controlsLayer).addTo(this.map);
 
     // Fetch and draw areas when the map is loaded
-    this.fetchAndDrawAreas();
+    this.fetchAndDrawAreas(this.apiKey);
 
     let fogEnabled = false;
 
@@ -431,7 +431,7 @@ export default class extends Controller {
       const form = document.getElementById('circle-form');
       form.addEventListener('submit', (e) => {
         e.preventDefault();
-        this.saveCircle(new FormData(form), layer);
+        this.saveCircle(new FormData(form), layer, this.apiKey);
       });
     });
 
@@ -451,7 +451,7 @@ export default class extends Controller {
       }
     });
 
-    fetch(`"/api/v1/areas?api_key=${apiKey}"`, {
+    fetch(`/api/v1/areas?api_key=${apiKey}`, {
       method: 'POST',
       headers: { 'Content-Type': 'application/json'},
       body: JSON.stringify(data)
@@ -483,8 +483,8 @@ export default class extends Controller {
     });
   }
 
-  deleteArea(id, layer) {
-    fetch(`/api/v1/areas/${id}`, {
+  deleteArea(id, layer, apiKey) {
+    fetch(`/api/v1/areas/${id}?api_key=${apiKey}`, {
       method: 'DELETE',
       headers: {
         'Content-Type': 'application/json',
@@ -506,8 +506,8 @@ export default class extends Controller {
     });
   }
 
-  fetchAndDrawAreas() {
-    fetch('/api/v1/areas', {
+  fetchAndDrawAreas(apiKey) {
+    fetch(`/api/v1/areas?api_key=${apiKey}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json'
@@ -547,7 +547,7 @@ export default class extends Controller {
             document.querySelector('.delete-area').addEventListener('click', (e) => {
               e.preventDefault();
               if (confirm('Are you sure you want to delete this area?')) {
-                this.deleteArea(area.id, layer);
+                this.deleteArea(area.id, layer, this.apiKey);
               }
             });
           });