diff --git a/frontend/src/components/FilterComponent.vue b/frontend/src/components/FilterComponent.vue
index 440524d..da9772d 100644
--- a/frontend/src/components/FilterComponent.vue
+++ b/frontend/src/components/FilterComponent.vue
@@ -21,36 +21,35 @@
 
 <script>
 import ApiService from '@/services/apiService';
-import { mapActions, mapMutations } from 'vuex';
+import { useVespaStore } from '@/stores/vespaStore';
+
 export default {
-  data: () => ({
-    selectedMunicipalities: [],
-    municipalities: [],
-    selectedYears: [],
-    jaartallen: [2020, 2021, 2022, 2023],
-    anbAreasActief: false,
-  }),
-  computed: {
-    formattedMunicipalities() {
-      const formatted_municipalities = this.municipalities.map(municipality => {
-        return {
-          name: municipality.name,
-          id: municipality.id
-        };
-      });
-      return formatted_municipalities;
-    },
+  data() {
+    return {
+      selectedMunicipalities: [],
+      municipalities: [],
+      selectedYears: [],
+      jaartallen: [2020, 2021, 2022, 2023],
+      anbAreasActief: false,
+    };
   },
   watch: {
-      selectedMunicipalities(newVal) {
-          if (newVal.length === 0) {
-              this.$emit('updateFilters', { municipalities: [], years: this.selectedYears, anbAreasActief: this.anbAreasActief });
-          }
+    selectedMunicipalities: {
+      handler() {
+        this.emitFilterUpdate();
       },
+      deep: true,
+    },
+  },
+  computed: {
+    formattedMunicipalities() {
+      return this.municipalities.map(municipality => ({
+        name: municipality.name,
+        id: municipality.id
+      }));
+    },
   },
   methods: {
-    ...mapActions(['updateSelectedMunicipalities']),
-    ...mapMutations(['setSelectedMunicipalities']),
     async fetchMunicipalities() {
       try {
         const response = await ApiService.get('/municipalities/');
@@ -64,7 +63,8 @@ export default {
       }
     },
     emitFilterUpdate() {
-      this.$emit('updateFilters', {
+      const vespaStore = useVespaStore();
+      vespaStore.applyFilters({
         municipalities: this.selectedMunicipalities,
         years: this.selectedYears,
         anbAreasActief: this.anbAreasActief
@@ -75,4 +75,4 @@ export default {
     this.fetchMunicipalities();
   },
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/LoginPage.vue b/frontend/src/components/LoginPage.vue
index bd0c682..f7cba90 100644
--- a/frontend/src/components/LoginPage.vue
+++ b/frontend/src/components/LoginPage.vue
@@ -33,7 +33,7 @@ export default {
 
         const login = async () => {
             try {
-                await vespaStore.loginAction({ username: username.value, password: password.value });
+                await vespaStore.login({ username: username.value, password: password.value });
                 router.push('/map');
             } catch (error) {
                 loginError.value = "Failed to login. Please check your username and password.";
diff --git a/frontend/src/components/MapPage.vue b/frontend/src/components/MapPage.vue
index 94a5b00..7cebcf4 100644
--- a/frontend/src/components/MapPage.vue
+++ b/frontend/src/components/MapPage.vue
@@ -47,9 +47,8 @@
 
 <script>
 import { useVespaStore } from '@/stores/vespaStore';
-import L from 'leaflet';
 import 'leaflet/dist/leaflet.css';
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, onMounted } from 'vue';
 import FilterComponent from './FilterComponent.vue';
 import FooterComponent from './FooterComponent.vue';
 import NavbarComponent from './NavbarComponent.vue';
@@ -61,146 +60,14 @@ export default {
     },
     setup() {
         const vespaStore = useVespaStore();
-        const map = ref(null);
-        const markers = ref([]);
-        const selectedObservation = ref(null);
-        const isEditing = ref(false);
 
+        const selectedObservation = computed(() => vespaStore.selectedObservation);
+        const isEditing = computed(() => vespaStore.isEditing);
+        const markers = computed(() => vespaStore.markers);
+        const map = computed(() => vespaStore.map);
         const isLoggedIn = computed(() => vespaStore.isLoggedIn);
-        const parseLocation = (locationStr) => {
-            // Check if the string includes 'POINT'
-            if (locationStr.includes('POINT')) {
-                // Extract the numbers after 'POINT (' and before the closing ')'
-                const matches = locationStr.match(/POINT\s*\(([^)]+)\)/);
-                if (matches) {
-                    const points = matches[1].split(' ');
-                    // Assuming the format is 'POINT (lng lat)'
-                    const lat = parseFloat(points[1]);
-                    const lng = parseFloat(points[0]);
-                    return { lat, lng };
-                }
-            }
-            console.error("Unable to parse location:", locationStr);
-            return null;
-        };
-        const observations = computed(() => vespaStore.observations.map(obs => ({
-            ...obs,
-            location: parseLocation(obs.location)
-        })));
-
-        const filtersConfig = computed(() => ({
-            minCreationDatetime: { label: 'Min Creation Date', type: 'date', value: '' },
-            maxCreationDatetime: { label: 'Max Creation Date', type: 'date', value: '' },
-            // Assuming these options are loaded from the store or another source
-            municipalities: { label: 'Municipality', type: 'select', options: vespaStore.municipalities, value: [] },
-            years: { label: 'Year', type: 'select', options: vespaStore.years, value: [] }
-        }));
-
-        const filters = ref({
-            minCreationDatetime: '',
-            maxCreationDatetime: '',
-            municipalities: [],
-            years: []
-        });
-
 
-        const updateSelectOptions = computed(() => {
-            // Example logic to update options
-            filtersConfig.value.municipalities.options = vespaStore.municipalities; // Assuming your store has this data
-            filtersConfig.value.years.options = vespaStore.years; // Assuming your store has this data
-        });
 
-        // Function to update filters based on user input
-        const updateFilters = (updatedFilters) => {
-            // Loop through the updated filters and apply changes
-            Object.keys(updatedFilters).forEach(key => {
-                if (filters.value.hasOwnProperty(key)) {
-                    filters.value[key] = updatedFilters[key];
-                }
-            });
-            // Call a method to apply these filters
-            applyFilters();
-        };
-
-        // Function to apply filters and fetch data based on the current filter state
-        const applyFilters = async () => {
-            // Construct the filter query based on the current state of `filters`
-            // This query will depend on how your API expects to receive these filters
-            let filterQuery = '?';
-            // Append each filter to the query string if it's not empty
-            Object.keys(filters.value).forEach(key => {
-                const value = filters.value[key];
-                if (value && Array.isArray(value) && value.length) {
-                    filterQuery += `${key}=${value.join(',')}&`;
-                } else if (value) {
-                    filterQuery += `${key}=${value}&`;
-                }
-            });
-
-            // Remove the last '&' for a clean query string
-            filterQuery = filterQuery.slice(0, -1);
-
-            // Assuming you have a method in your Pinia store to fetch observations with the constructed query
-            await vespaStore.getObservations(filterQuery);
-        };
-        const fetchObservations = async () => {
-            // Assuming you have a method to construct the filter query based on some criteria
-            const filterQuery = ''; // Construct your filter query here
-            await vespaStore.getObservations(filterQuery);
-        };
-
-        const initializeMapAndMarkers = () => {
-            if (!map.value && document.getElementById('mapid')) { // Ensure the element is there
-                map.value = L.map('mapid').setView([51.0, 4.5], 9);
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    attribution: 'Map data © OpenStreetMap contributors',
-                    maxZoom: 18,
-                }).addTo(map.value);
-
-                // Now that the map is guaranteed to be initialized, call updateMarkers
-                updateMarkers();
-            }
-        };
-
-        watch(observations, (newObservations) => {
-            // Update markers based on new observations
-            markers.value.forEach(marker => marker.remove());
-            markers.value = [];
-            newObservations.forEach(obs => {
-                if (obs.location) {
-                    const marker = L.marker([obs.location.lat, obs.location.lng])
-                        .addTo(map.value)
-                        .on('click', () => { selectedObservation.value = obs; });
-                    markers.value.push(marker);
-                }
-            });
-        }, { deep: true });
-
-        const updateMarkers = () => {
-            if (map.value && observations.value) {
-                markers.value.forEach(marker => marker.remove()); // Remove existing markers
-                markers.value = []; // Reset markers array
-
-                observations.value.forEach(observation => {
-                    if (observation.location) {
-                        const customIcon = L.divIcon({
-                            className: 'custom-div-icon',
-                            html: "<i class='fa fa-bug' style='color: black; font-size: 24px;'></i>",
-                            iconSize: [30, 42],
-                            iconAnchor: [15, 42]
-                        });
-                        const marker = L.marker([observation.location.lat, observation.location.lng], { icon: customIcon })
-                            .addTo(map.value)
-                            .on('click', () => {
-                                selectedObservation.value = observation;
-                                // Additional logic for selecting an observation
-                            });
-
-                        markers.value.push(marker);
-                    }
-                });
-            }
-        };
         const startEdit = () => {
             isEditing.value = true;
         };
@@ -215,19 +82,16 @@ export default {
         };
 
         onMounted(async () => {
-            await fetchObservations();
-            initializeMapAndMarkers();
+            await vespaStore.getObservations();
+            vespaStore.initializeMapAndMarkers();
         });
 
-
         return {
             selectedObservation,
             isEditing,
             markers,
             map,
             isLoggedIn,
-            filtersConfig,
-            updateFilters,
             startEdit,
             confirmUpdate,
             cancelEdit,
diff --git a/frontend/src/services/apiService.js b/frontend/src/services/apiService.js
index 9f6965a..4009a79 100644
--- a/frontend/src/services/apiService.js
+++ b/frontend/src/services/apiService.js
@@ -10,7 +10,6 @@ const instance = axios.create({
 function getCookie(name) {
     const value = '; ' + document.cookie;
     const parts = value.split('; ' + name + '=');
-    console.log('parts', parts)
     if (parts.length === 2) return parts.pop().split(';').shift() || null;
     return null;
 }
@@ -20,7 +19,6 @@ const ApiService = {
     getAxiosInstance() {
         instance.interceptors.request.use((config) => {
             const csrfToken = getCookie('csrftoken');
-            console.log('csrfToken', csrfToken)
             if (csrfToken) {
                 config.headers['X-CSRFToken'] = csrfToken;
             }
diff --git a/frontend/src/stores/vespaStore.js b/frontend/src/stores/vespaStore.js
index 40c327d..0c976a8 100644
--- a/frontend/src/stores/vespaStore.js
+++ b/frontend/src/stores/vespaStore.js
@@ -1,31 +1,39 @@
-// Import the necessary utilities from Pinia and your ApiService
-import { default as ApiService, default as instance } from '@/services/apiService';
+import ApiService from '@/services/apiService';
+
+import L from 'leaflet';
+import 'leaflet/dist/leaflet.css';
 import { defineStore } from 'pinia';
 
-// Define a single store combining both previous stores
 export const useVespaStore = defineStore('vespaStore', {
     state: () => ({
-        // States from both stores
         isLoggedIn: false,
         username: '',
         userId: null,
         loading: false,
         error: null,
+        municipalities: [],
         selectedMunicipalities: [],
         observations: [],
+        selectedObservation: null,
+        markers: [],
         user: {},
         authInterval: null,
+        isEditing: false,
+        map: null,
+        filters: {
+            municipalities: [],
+            years: [],
+            anbAreasActief: false,
+        },
     }),
 
     actions: {
-        // Actions from the Vuex store
         async getObservations(filterQuery = '') {
-            console.log(`Fetching observations with filterQuery: '${filterQuery}'`);
             try {
                 const response = await ApiService.get(`/observations${filterQuery}`);
                 if (response.status === 200) {
-                    console.log("Observations successfully fetched: ", response.data);
                     this.observations = response.data;
+                    this.updateMarkers();
                 } else {
                     throw new Error(`Network response was not ok, status code: ${response.status}`);
                 }
@@ -34,17 +42,101 @@ export const useVespaStore = defineStore('vespaStore', {
                 this.error = error.message || 'Failed to fetch observations';
             }
         },
-        updateSelectedMunicipalities(municipalities) {
-            this.selectedMunicipalities = municipalities;
-            if (municipalities.length === 0) {
-                this.getObservations();
+        async applyFilters(filters) {
+            this.filters.municipalities = filters.municipalities;
+            this.filters.years = filters.years;
+            this.filters.anbAreasActief = filters.anbAreasActief;
+
+            let filterQuery = '?';
+
+            if (this.filters.municipalities.length > 0) {
+                filterQuery += `municipality_id=${this.filters.municipalities.join(',')}&`;
+            }
+
+            if (this.filters.years.length > 0) {
+                filterQuery += `year_range=${this.filters.years.join(',')}&`;
+            }
+
+            if (this.filters.anbAreasActief) {
+                // Include ANB areas filter
+            }
+
+            if (filterQuery === '?') {
+                filterQuery = '';
+            } else {
+                // Remove the trailing '&' if present
+                filterQuery = filterQuery.endsWith('&') ? filterQuery.slice(0, -1) : filterQuery;
+            }
+
+            await this.getObservations(filterQuery);
+        },
+        initializeMapAndMarkers() {
+            if (!this.map && document.getElementById('mapid')) {
+                this.map = L.map('mapid').setView([51.0, 4.5], 9);
+                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                    attribution: 'Map data © OpenStreetMap contributors',
+                    maxZoom: 18,
+                }).addTo(this.map);
+                this.updateMarkers();
             }
         },
+        async updateMarkers() {
+            if (this.map) {
+                this.markers.forEach(marker => this.map.removeLayer(marker));
+                this.markers = [];
+
+                if (!this.observations.length) {
+                    return;
+                }
 
-        // Actions from the Pinia auth store
-        async loginAction({ username, password }) {
+                this.observations.forEach((observation, index) => {
+                    const locationRegex = /POINT \(([^ ]+) ([^ ]+)\)/;
+                    const match = observation.location.match(locationRegex);
+                    if (match) {
+                        const [, longitude, latitude] = match;
+                        const marker = L.marker([parseFloat(latitude), parseFloat(longitude)], {
+                            icon: L.divIcon({
+                                className: 'custom-div-icon',
+                                html: "<i class='fa fa-bug' style='color: black; font-size: 24px;'></i>",
+                                iconSize: [30, 42],
+                                iconAnchor: [15, 42]
+                            })
+                        }).addTo(this.map)
+                            .on('click', () => this.selectObservation(observation));
+                        this.markers.push(marker);
+                    } else {
+                        console.log(`Geen geldige locatie gevonden voor observatie #${index}.`);
+                    }
+                });
+            }
+        },
+        async updateObservation() {
+            try {
+                const response = await ApiService.patch(`/observations/${this.selectedObservation.id}/`, this.selectedObservation);
+                if (response.status !== 200) {
+                    throw new Error('Network response was not ok');
+                }
+                const data = response.json();
+                this.isEditing = false;
+            } catch (error) {
+                console.error('Error when updating the observation:', error);
+            }
+        },
+        async fetchMunicipalities() {
+            try {
+                const response = await ApiService.get('/municipalities/');
+                if (response.status === 200) {
+                    this.municipalities = response.data;
+                } else {
+                    console.error('Failed to fetch municipalities: Status Code', response.status);
+                }
+            } catch (error) {
+                console.error('Error fetching municipalities:', error);
+            }
+        },
+        async login({ username, password }) {
             this.loading = true;
-            await instance
+            await ApiService
                 .post("/app_auth/login/", {
                     username: username,
                     password: password
@@ -53,11 +145,9 @@ export const useVespaStore = defineStore('vespaStore', {
                     this.authCheck();
                 })
                 .catch((error) => {
-                    console.error(error);
                     if (error.response && error.response.data) {
                         this.error = error.response.data.error;
                     } else {
-                        // Handle cases where error.response or error.response.data is undefined
                         this.error = "An unexpected error occurred";
                     }
                     this.isLoggedIn = false;
@@ -67,7 +157,7 @@ export const useVespaStore = defineStore('vespaStore', {
         },
         async authCheck() {
             this.loading = true;
-            await instance
+            await ApiService
                 .get("/app_auth/auth-check")
                 .then((response) => {
                     const data = response.data;
@@ -99,7 +189,7 @@ export const useVespaStore = defineStore('vespaStore', {
         },
         async logout() {
             this.loading = true;
-            await instance
+            await ApiService
                 .get("/api-auth/logout/")
                 .then(() => {
                     this.authCheck();
diff --git a/vespadb/app_auth/__init__.py b/vespadb/app_auth/__init__.py
index e69de29..198ce9c 100644
--- a/vespadb/app_auth/__init__.py
+++ b/vespadb/app_auth/__init__.py
@@ -0,0 +1 @@
+"""."""
diff --git a/vespadb/app_auth/admin.py b/vespadb/app_auth/admin.py
index 7ad3866..1167b43 100644
--- a/vespadb/app_auth/admin.py
+++ b/vespadb/app_auth/admin.py
@@ -1,4 +1,7 @@
-# type: ignore
+"""Session admin for the app_auth app."""
+
+from typing import Any
+
 from django.contrib import admin
 from django.contrib.auth.models import User
 from django.contrib.sessions.models import Session
@@ -8,20 +11,39 @@
 
 @admin.register(Session)
 class SessionAdmin(admin.ModelAdmin):
-    # Ceates an easy way to view/expire current sessions
-    list_display = ('session_key', 'username', 'expire_date', 'expire_session')
+    """A Django admin interface for managing Session instances."""
+
+    # Defines the columns to display in the Django admin list view.
+    list_display = ("session_key", "username", "expire_date", "expire_session")
+
+    def username(self, obj: Session) -> str | None:
+        """
+        Retrieve the username associated with the given session.
 
-    def username(self, obj):
+        Args:
+            obj (Session): The session object from which to retrieve the username.
+
+        Returns
+        -------
+            str: The username associated with the session, if any. Returns None if no user is associated.
+        """
         session_data = obj.get_decoded()
-        user_id = session_data.get('_auth_user_id')
+        user_id = session_data.get("_auth_user_id")
 
         if user_id:
             user = User.objects.get(id=user_id)
-            return user.username
+            return str(user.username)
         return None
 
-    def expire_session(self, obj):
-        return format_html(
-            '<a href="{}" class="button">Expire Session</a>',
-            reverse('expire_session', args=[obj.pk])
-        )
+    def expire_session(self, obj: Session) -> Any:
+        """
+        Generate HTML for an 'Expire Session' button linked to the expire_session view for the given session.
+
+        Args:
+            obj (Session): The session object for which to generate the expire button.
+
+        Returns
+        -------
+            str: HTML string for the 'Expire Session' button.
+        """
+        return format_html('<a href="{}" class="button">Expire Session</a>', reverse("expire_session", args=[obj.pk]))
diff --git a/vespadb/app_auth/apps.py b/vespadb/app_auth/apps.py
index 0527163..90bd615 100644
--- a/vespadb/app_auth/apps.py
+++ b/vespadb/app_auth/apps.py
@@ -1,6 +1,10 @@
+"""."""
+
 from django.apps import AppConfig
 
 
 class AppAuthConfig(AppConfig):
-    default_auto_field = 'django.db.models.BigAutoField'
-    name = 'vespadb.app_auth'
+    """."""
+
+    default_auto_field = "django.db.models.BigAutoField"
+    name = "vespadb.app_auth"
diff --git a/vespadb/app_auth/models.py b/vespadb/app_auth/models.py
index 71a8362..198ce9c 100644
--- a/vespadb/app_auth/models.py
+++ b/vespadb/app_auth/models.py
@@ -1,3 +1 @@
-from django.db import models
-
-# Create your models here.
+"""."""
diff --git a/vespadb/app_auth/serializers.py b/vespadb/app_auth/serializers.py
index 2c30328..5b1622b 100644
--- a/vespadb/app_auth/serializers.py
+++ b/vespadb/app_auth/serializers.py
@@ -1,35 +1,64 @@
-# type: ignore
-# app_auth/serializers.py
+"""Serializers for the app_auth app."""
+
+from typing import Any
 
 from django.contrib.auth.models import User
 from rest_framework import serializers
 from rest_framework.exceptions import ValidationError
-from rest_framework.serializers import Serializer
 
 
 class UserSerializer(serializers.ModelSerializer):
+    """IUser serializer for the User model."""
+
     permissions = serializers.SerializerMethodField()
 
-    def get_permissions(self, obj):
+    def get_permissions(self, obj: User) -> list[str]:
+        """
+        Retrieve all permissions for a given user.
+
+        Args:
+            obj (User): The user instance for which to retrieve permissions.
+
+        Returns
+        -------
+            list[str]: A list of permission strings associated with the user.
+        """
         return list(obj.get_all_permissions())
 
     class Meta:
+        """."""
+
         model = User
-        fields = [
-            'id',
-            'username',
-            'first_name',
-            'last_name',
-            'permissions'
-        ]
+        fields = ["id", "username", "first_name", "last_name", "permissions"]
 
 
-class LoginSerializer(Serializer):
+class LoginSerializer(serializers.Serializer):
+    """
+    Serializer for handling user login.
+
+    Validates the user's credentials and returns the user instance if successful,
+    otherwise raises a ValidationError with an appropriate error message.
+    """
+
     username = serializers.CharField()
     password = serializers.CharField(write_only=True)
 
-    def validate(self, data):
-        user = User.objects.filter(username=data['username']).first()
-        if user and user.check_password(data['password']):
+    def validate(self, data: dict[Any, Any]) -> User:
+        """
+        Validate user credentials.
+
+        Args:
+            data (Dict[Any, Any]): A dictionary containing 'username' and 'password' keys.
+
+        Returns
+        -------
+            User: The authenticated user object if credentials are valid.
+
+        Raises
+        ------
+            ValidationError: If the username or password is incorrect.
+        """
+        user = User.objects.filter(username=data["username"]).first()
+        if user and user.check_password(data["password"]):
             return user
-        raise ValidationError({'error': 'Invalid username or password.'})
\ No newline at end of file
+        raise ValidationError({"error": "Invalid username or password."})
diff --git a/vespadb/app_auth/tests.py b/vespadb/app_auth/tests.py
deleted file mode 100644
index 7ce503c..0000000
--- a/vespadb/app_auth/tests.py
+++ /dev/null
@@ -1,3 +0,0 @@
-from django.test import TestCase
-
-# Create your tests here.
diff --git a/vespadb/app_auth/urls.py b/vespadb/app_auth/urls.py
index 1712623..6bdf6bc 100644
--- a/vespadb/app_auth/urls.py
+++ b/vespadb/app_auth/urls.py
@@ -1,11 +1,11 @@
-# type: ignore
 """."""
+
 from django.urls import path
+
 from vespadb.app_auth.views import AuthCheck, LoginView, expire_session_view
 
 urlpatterns = [
-    path('auth-check', AuthCheck.as_view(), name='auth_check'),
-    path('login/', LoginView.as_view(), name='login'),
-    path('expire-session/<str:session_key>/',
-         expire_session_view, name='expire_session'),
-]
\ No newline at end of file
+    path("auth-check", AuthCheck.as_view(), name="auth_check"),
+    path("login/", LoginView.as_view(), name="login"),
+    path("expire-session/<str:session_key>/", expire_session_view, name="expire_session"),
+]
diff --git a/vespadb/app_auth/views.py b/vespadb/app_auth/views.py
index a7cd13b..4033946 100644
--- a/vespadb/app_auth/views.py
+++ b/vespadb/app_auth/views.py
@@ -1,33 +1,59 @@
-# type: ignore
+"""views for the app_auth app."""
 
-# app_auth/views.py
+from collections.abc import Sequence
 
 from django.contrib.auth import login
 from django.contrib.sessions.models import Session
 from django.http import HttpResponseRedirect
 from rest_framework import permissions, status
+from rest_framework.authentication import BaseAuthentication
+from rest_framework.permissions import BasePermission
+from rest_framework.request import Request
 from rest_framework.response import Response
 from rest_framework.views import APIView
 
-from .serializers import LoginSerializer, UserSerializer
+from vespadb.app_auth.serializers import LoginSerializer, UserSerializer
 
 
 class AuthCheck(APIView):
-    permission_classes = []
+    """API view to check user authentication status."""
 
-    def get(self, request):
+    permission_classes: list[BasePermission] = []
+
+    def get(self, request: Request) -> Response:
+        """
+        Respond with user authentication status and user data if authenticated.
+
+        Args:
+            request (HttpRequest): The HTTP request object.
+
+        Returns
+        -------
+            Response: Contains isAuthenticated flag and user data if authenticated.
+        """
         if request.user.is_authenticated:
-            user = UserSerializer(request.user, context={'request': request})
+            user = UserSerializer(request.user, context={"request": request})
             return Response({"isAuthenticated": True, "user": user.data})
-        else:
-            return Response({"isAuthenticated": False})
+        return Response({"isAuthenticated": False})
 
 
 class LoginView(APIView):
-    authentication_classes = []
+    """API view for user login."""
+
+    authentication_classes: Sequence[type[BaseAuthentication]] = []
     permission_classes = (permissions.AllowAny,)
 
-    def post(self, request):
+    def post(self, request: Request) -> Response:
+        """
+        Authenticate a user based on username and password.
+
+        Args:
+            request (HttpRequest): The HTTP request object.
+
+        Returns
+        -------
+            Response: Status indicating the success or failure of the login attempt.
+        """
         serializer = LoginSerializer(data=request.data)
 
         if serializer.is_valid():
@@ -38,10 +64,21 @@ def post(self, request):
         return Response(serializer.errors, status=status.HTTP_400_BAD_REQUEST)
 
 
-def expire_session_view(request, session_key):
+def expire_session_view(request: Request, session_key: str) -> HttpResponseRedirect:
+    """
+    View to expire a specific session.
+
+    Args:
+        request (HttpRequest): The HTTP request object.
+        session_key (str): The key of the session to expire.
+
+    Returns
+    -------
+        HttpResponseRedirect: Redirects to the session management page in admin.
+    """
     try:
         session = Session.objects.get(session_key=session_key)
         session.delete()
     except Session.DoesNotExist:
         pass
-    return HttpResponseRedirect('/admin/sessions/session/')
+    return HttpResponseRedirect("/admin/sessions/session/")
diff --git a/vespadb/settings.py b/vespadb/settings.py
index fd53e6e..16d6df8 100644
--- a/vespadb/settings.py
+++ b/vespadb/settings.py
@@ -11,7 +11,6 @@
 """
 
 import os
-from datetime import timedelta
 from pathlib import Path
 
 from dotenv import load_dotenv
@@ -31,7 +30,7 @@
 # SECURITY WARNING: don't run with debug turned on in production!
 DEBUG = True
 
-ALLOWED_HOSTS = ["0.0.0.0", "localhost", "http://localhost:3000"]  # noqa: S104
+ALLOWED_HOSTS = ["localhost", "127.0.0.1"]
 
 # Application definition
 INSTALLED_APPS = [
@@ -64,12 +63,15 @@
 ]
 
 CORS_ALLOWED_ORIGINS = ["http://localhost:4173", "http://localhost:3000"]
-CSRF_TRUSTED_ORIGINS = ["http://localhost:4173", "http://localhost:3000"]
+CSRF_TRUSTED_ORIGINS = ["http://localhost:4173", "http://localhost:3000", "http://localhost:8001"]
+
+SESSION_COOKIE_DOMAIN = "localhost"
+CSRF_COOKIE_DOMAIN = "localhost"
 
 CORS_ALLOW_CREDENTIALS = True
 REST_FRAMEWORK = {
     "DEFAULT_AUTHENTICATION_CLASSES": [
-        'rest_framework.authentication.SessionAuthentication',
+        "rest_framework.authentication.SessionAuthentication",
     ],
     "DEFAULT_PERMISSION_CLASSES": ("rest_framework.permissions.IsAuthenticated",),
 }
@@ -77,9 +79,9 @@
 SESSION_COOKIE_AGE = 60 * 60
 SESSION_SAVE_EVERY_REQUEST = True
 
-SESSION_COOKIE_SAMESITE = 'Lax' 
+SESSION_COOKIE_SAMESITE = "Lax"
 SESSION_COOKIE_SECURE = False
-  
+
 DATABASES = {
     "default": {
         "ENGINE": "django.contrib.gis.db.backends.postgis",
diff --git a/vespadb/urls.py b/vespadb/urls.py
index b42186f..30b8553 100644
--- a/vespadb/urls.py
+++ b/vespadb/urls.py
@@ -7,10 +7,6 @@
 from drf_yasg import openapi
 from drf_yasg.views import get_schema_view
 from rest_framework import permissions
-from rest_framework_simplejwt.views import (
-    TokenObtainPairView,
-    TokenRefreshView,
-)
 
 from vespadb.users.views import UserStatusView
 
@@ -33,9 +29,9 @@
     path("admin/", admin.site.urls),
     # User views
     path("user_status/", UserStatusView.as_view(), name="user_status"),
-    path('app_auth/', include('vespadb.app_auth.urls')),
-    path('api-auth/', include('rest_framework.urls', namespace='rest_framework')),
-    path('admin/', admin.site.urls),
+    path("app_auth/", include("vespadb.app_auth.urls")),
+    path("api-auth/", include("rest_framework.urls", namespace="rest_framework")),
+    path("admin/", admin.site.urls),
     # Include the observations app URLs
     path("", include("vespadb.observations.urls", namespace="observations")),
     path("", include("vespadb.users.urls", namespace="users")),