diff --git a/api/app/Http/Controllers/PageController.php b/api/app/Http/Controllers/PageController.php
index ab39264..d36b55a 100644
--- a/api/app/Http/Controllers/PageController.php
+++ b/api/app/Http/Controllers/PageController.php
@@ -9,6 +9,7 @@
 use App\Models\FormItem;
 use App\Models\GenericItem;
 use App\Models\ImageItem;
+use App\Models\LocationItem;
 use App\Models\Page;
 use App\Models\TextItem;
 use Illuminate\Http\Request;
@@ -219,6 +220,16 @@ private function createPageItemsFromValidatedData(Page $page, $validatedData)
                         ]
                     );
                     break;
+                case 'locationItem':
+                    LocationItem::updateOrCreate(
+                        ['id' => $pageItemData['id'] ?? null],
+                        [
+                            'page_id' => $page->id,
+                            'sort' => $sort_counter,
+                            'location_id' => $pageItemData['location_id'] ?? null,
+                        ]
+                    );
+                    break;
                 default:
                     throw new \InvalidArgumentException("Unsupported field type: {$pageItemData['type']}");
             }
diff --git a/api/app/Http/Requests/StorePageRequest.php b/api/app/Http/Requests/StorePageRequest.php
index 5d1b192..d5f700f 100644
--- a/api/app/Http/Requests/StorePageRequest.php
+++ b/api/app/Http/Requests/StorePageRequest.php
@@ -16,12 +16,14 @@ public function rules()
             'page_items' => 'nullable|array',
             'page_items.*.id' => 'nullable',
             'page_items.*.sort' => 'nullable',
-            'page_items.*.type' => 'required|string|in:textItem,imageItem,formItem,filesItem,contactItem,groupsItem,sectionsItem,campsItem',
+            'page_items.*.type' => 'required|string|in:textItem,imageItem,formItem,filesItem,contactItem,groupsItem,sectionsItem,campsItem,locationItem',
             'page_items.*.title' => 'nullable',
             'page_items.*.body' => 'nullable',
             'page_items.*.show_fleur_de_lis' => 'nullable',
             'page_items.*.files' => 'nullable',
-            'page_items.*.file_id' => 'nullable'
+            'page_items.*.file_id' => 'nullable',
+            'page_items.*.form_id' => 'nullable',
+            'page_items.*.location_id' => 'nullable',
         ];
     }
 }
diff --git a/api/app/Http/Requests/UpdatePageRequest.php b/api/app/Http/Requests/UpdatePageRequest.php
index f91104a..611e77e 100644
--- a/api/app/Http/Requests/UpdatePageRequest.php
+++ b/api/app/Http/Requests/UpdatePageRequest.php
@@ -16,12 +16,13 @@ public function rules()
             'page_items' => 'nullable|array',
             'page_items.*.id' => 'nullable',
             'page_items.*.sort' => 'nullable',
-            'page_items.*.type' => 'required|string|in:textItem,imageItem,formItem,filesItem,contactItem,groupsItem,sectionsItem,campsItem',
+            'page_items.*.type' => 'required|string|in:textItem,imageItem,formItem,filesItem,contactItem,groupsItem,sectionsItem,campsItem,locationItem',
             'page_items.*.title' => 'nullable',
             'page_items.*.body' => 'nullable',
             'page_items.*.show_fleur_de_lis' => 'nullable',
             'page_items.*.files' => 'nullable',
             'page_items.*.form_id' => 'nullable',
+            'page_items.*.location_id' => 'nullable',
         ];
     }
 }
diff --git a/api/app/Models/LocationItem.php b/api/app/Models/LocationItem.php
new file mode 100644
index 0000000..e1d5cf6
--- /dev/null
+++ b/api/app/Models/LocationItem.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+
+class LocationItem extends Model
+{
+    use HasFactory;
+
+    protected $fillable = ['location_id', 'sort', 'page_id'];
+
+    protected $appends = ['type'];
+
+    public function getTypeAttribute()
+    {
+        return "locationItem";
+    }
+
+    public function page()
+    {
+        return $this->belongsTo(Page::class);
+    }
+
+    public function location()
+    {
+        return $this->belongsTo(Location::class);
+    }
+}
diff --git a/api/app/Models/Page.php b/api/app/Models/Page.php
index b70fa4c..1815dad 100644
--- a/api/app/Models/Page.php
+++ b/api/app/Models/Page.php
@@ -54,6 +54,12 @@ public function filesItems()
         return $this->hasMany(FilesItem::class)->with('files');
     }
 
+    public function locationItems()
+    {
+
+        return $this->hasMany(LocationItem::class)->with('location');
+    }
+
     public function genericItems()
     {
 
@@ -69,12 +75,14 @@ public function getAllItems()
         $formItems = $this->formItems;
         $filesItems = $this->filesItems;
         $genericItems = $this->genericItems;
+        $locationItems = $this->locationItems;
 
         $items = $items->concat($textItems);
         $items = $items->concat($imageItems);
         $items = $items->concat($formItems);
         $items = $items->concat($filesItems);
         $items = $items->concat($genericItems);
+        $items = $items->concat($locationItems);
 
         $items = $items->sortBy('sort')->values()->all();;
 
diff --git a/api/database/migrations/2024_02_18_185901_create_location_items_table.php b/api/database/migrations/2024_02_18_185901_create_location_items_table.php
new file mode 100644
index 0000000..4e9831c
--- /dev/null
+++ b/api/database/migrations/2024_02_18_185901_create_location_items_table.php
@@ -0,0 +1,31 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Support\Facades\Schema;
+
+return new class extends Migration
+{
+    /**
+     * Run the migrations.
+     */
+    public function up(): void
+    {
+        Schema::create('location_items', function (Blueprint $table) {
+            $table->id();
+            $table->foreignId('location_id')->nullable()->constrained()->onDelete('cascade');
+            $table->integer('sort')->nullable();
+            $table->unsignedBigInteger('page_id');
+            $table->foreign('page_id')->references('id')->on('pages')->onDelete('cascade');
+            $table->timestamps();
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     */
+    public function down(): void
+    {
+        Schema::dropIfExists('location_items');
+    }
+};
diff --git a/frontend/src/components/admin/AddPageItem.vue b/frontend/src/components/admin/AddPageItem.vue
index 3ec17d6..0824a6f 100644
--- a/frontend/src/components/admin/AddPageItem.vue
+++ b/frontend/src/components/admin/AddPageItem.vue
@@ -49,6 +49,7 @@ export default {
         { name: "Groups", type: "groupsItem" },
         { name: "Sections", type: "sectionsItem" },
         { name: "Camps", type: "campsItem" },
+        { name: "Location", type: "locationItem" },
       ],
     };
   },
diff --git a/frontend/src/components/admin/PageItems/LocationItem.vue b/frontend/src/components/admin/PageItems/LocationItem.vue
new file mode 100644
index 0000000..dfb1349
--- /dev/null
+++ b/frontend/src/components/admin/PageItems/LocationItem.vue
@@ -0,0 +1,61 @@
+<template>
+  <DragItemBox
+    :boxTitle="boxTitle"
+    :item="item"
+    @delete="(event) => $emit('delete', event)"
+    @startedDragging="$emit('startedDragging')"
+    @endedDragging="$emit('endedDragging')"
+  >
+    <Card class="space-y-2">
+      <SelectComponent
+        selection="LocationItem"
+        @selectLocationItem="handleChange"
+        :value="item.locationId"
+        :options="options"
+      />
+    </Card>
+  </DragItemBox>
+</template>
+
+<script>
+import Card from "../Card.vue";
+import SelectComponent from "../SelectComponent.vue";
+import DragItemBox from "../DragItemBox.vue";
+
+export default {
+  components: { Card, SelectComponent, DragItemBox },
+  props: ["item", "boxTitle"],
+  emits: [
+    "updatePage",
+    "changeLocation",
+    "delete",
+    "startedDragging",
+    "endedDragging",
+  ],
+  data() {
+    return {
+      options: [],
+    };
+  },
+  methods: {
+    async getLocations() {
+      try {
+        const response = await this.callApi("get", "locations");
+        this.options = response.data.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    handleChange(value) {
+      this.$emit("changeLocation", { locationId: value, id: this.item.id });
+    },
+  },
+
+  computed: {},
+  async created() {
+    await this.getLocations();
+  },
+};
+</script>
+
+<style></style>
diff --git a/frontend/src/components/main/LocationItem.vue b/frontend/src/components/main/LocationItem.vue
new file mode 100644
index 0000000..edceca1
--- /dev/null
+++ b/frontend/src/components/main/LocationItem.vue
@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <MapComponent class="w-full h-96" :markers="[item.location]" />
+  </div>
+</template>
+<script>
+import MapComponent from "./MapComponent.vue";
+
+export default {
+  props: ["item"],
+  data() {
+    return {};
+  },
+  methods: {},
+  async created() {},
+  components: { MapComponent },
+};
+</script>
diff --git a/frontend/src/components/main/PageBuilder.vue b/frontend/src/components/main/PageBuilder.vue
index c561929..85a25ab 100644
--- a/frontend/src/components/main/PageBuilder.vue
+++ b/frontend/src/components/main/PageBuilder.vue
@@ -13,6 +13,7 @@
         :files="pageItem.files"
       />
       <CampsItem v-if="pageItem.type == 'campsItem'" :item="pageItem" />
+      <LocationItem v-if="pageItem.type == 'locationItem'" :item="pageItem" />
     </template>
   </PageWrapper>
 </template>
@@ -26,6 +27,7 @@ import ImageItem from "./ImageItem.vue";
 import PageWrapper from "./PageWrapper.vue";
 import SectionsItem from "./SectionsItem.vue";
 import TextItem from "./TextItem.vue";
+import LocationItem from "./LocationItem.vue";
 
 export default {
   props: ["page"],
@@ -44,6 +46,7 @@ export default {
     PageWrapper,
     FilesItem,
     CampsItem,
+    LocationItem,
   },
 };
 </script>
diff --git a/frontend/src/views/Dashboard/Page.vue b/frontend/src/views/Dashboard/Page.vue
index 16e7827..9c54f0b 100644
--- a/frontend/src/views/Dashboard/Page.vue
+++ b/frontend/src/views/Dashboard/Page.vue
@@ -112,6 +112,16 @@
         :key="i"
         :item="pageItem"
       />
+      <LocationItem
+        v-if="pageItem.type == 'locationItem'"
+        boxTitle="Location Item"
+        @delete="deleteItem"
+        @startedDragging="isDragging = true"
+        @endedDragging="isDragging = false"
+        :key="i"
+        @changeLocation="changeLocationItem"
+        :item="pageItem"
+      />
       <AddPageItem
         @changeOrder="changeOrder"
         @select="addItem"
@@ -147,6 +157,7 @@ import GroupsItem from "../../components/admin/PageItems/GroupsItem.vue";
 import SectionsItem from "../../components/admin/PageItems/SectionsItem.vue";
 import FilesItem from "../../components/admin/PageItems/FilesItem.vue";
 import CampsItem from "../../components/admin/PageItems/CampsItem.vue";
+import LocationItem from "../../components/admin/PageItems/LocationItem.vue";
 
 export default {
   components: {
@@ -165,6 +176,7 @@ export default {
     CheckBox,
     FilesItem,
     CampsItem,
+    LocationItem,
   },
   data() {
     return {
@@ -259,6 +271,15 @@ export default {
 
       this.content.pageItems[itemIndex].formId = formId;
     },
+    changeLocationItem(event) {
+      const pageItemId = event.id;
+      const locationId = event.locationId;
+      const itemIndex = this.content.pageItems.findIndex(
+        (p) => p.id == pageItemId && p.type == "locationItem",
+      );
+
+      this.content.pageItems[itemIndex].locationId = locationId;
+    },
     changeHeaderImages(event) {
       this.content.files = event.files;
     },