diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 14d17d8..c476583 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -3,11 +3,13 @@ import {RouterModule} from '@angular/router';
 import {HomeComponent} from './home/home.component';
 import {DetailComponent} from "./detail/detail.component";
 import {ListComponent} from "./list/list.component";
+import {ManagementComponent} from "./management/management.component";
 
 
 @NgModule({
   imports: [RouterModule.forRoot([
     {path: 'home', component: HomeComponent},
+    {path: 'management', component: ManagementComponent},
     {path: 'location/:location', component: ListComponent},
     {path: 'location/:location/:id', component: DetailComponent},
     {path: '**', redirectTo: 'home'}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 4a9c5f4..a74bc39 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -9,13 +9,14 @@ import { DetailComponent } from './detail/detail.component';
 import {FormsModule} from "@angular/forms";
 import { HttpClientModule} from "@angular/common/http";
 import { SafePipe } from './pipes/safe.pipe';
-
+import { ManagementComponent } from './management/management.component';
 @NgModule({
   declarations: [
     AppComponent,
     HomeComponent,
     ListComponent,
     DetailComponent,
+    ManagementComponent,
     SafePipe,
   ],
   imports: [
diff --git a/src/app/management/management.component.css b/src/app/management/management.component.css
new file mode 100644
index 0000000..d4da017
--- /dev/null
+++ b/src/app/management/management.component.css
@@ -0,0 +1,141 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+}
+
+h1 {
+  margin:2% 0 1% 10%;
+  font-size: 30px;
+}
+
+/* Tabella degli utenti */
+table {
+  border-collapse: collapse;
+  width: 80%;
+  margin: 0 10% 0 10%;
+}
+
+th, td {
+  padding: 8px;
+  text-align: left;
+  border-bottom: 1px solid #ddd;
+}
+
+th {
+  background-color: #f2f2f2;
+}
+
+/* Form di aggiunta utente */
+.overlay {
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.form-container {
+  background-color: #fefefe;
+  border-radius: 5px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  width: 400px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.form-container h2 {
+  margin: 0 0 10px 0;
+  font-size: 20px;
+}
+
+.form-container div {
+  margin-bottom: 10px;
+}
+
+.form-container label {
+  display: block;
+  margin-bottom: 5px;
+}
+
+.form-container input {
+  width: 100%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-container select{
+  width: 100%;
+  padding: 8px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  box-sizing: border-box;
+}
+
+.form-container button {
+  background-color: #4CAF50;
+  color: white;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.form-container button[type="submit"] {
+  background-color: #008CBA;
+  margin-top:10px;
+}
+
+.form-container button[type="submit"]:hover {
+  background-color: #0d8bf2;
+}
+
+.form-container button[type="submit"]:active {
+  background-color: #0a5a8d;
+}
+
+.form-container button[type="submit"]:focus {
+  outline: none;
+}
+
+.form-container button[type="submit"]:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.form-container button[type="submit"]:disabled:hover {
+  background-color: #cccccc;
+}
+
+.form-container button:not([type="submit"]) {
+  background-color: #f44336;
+  margin-top: 5px;
+}
+
+.form-container button:not([type="submit"]):hover {
+  background-color: #d30f0f;
+}
+
+.form-container button:not([type="submit"]):active {
+  background-color: #8b0c0c;
+}
+
+.form-container button:not([type="submit"]):focus {
+  outline: none;
+}
+
+.button-container{
+  display: flex;
+  justify-content: flex-end;
+}
diff --git a/src/app/management/management.component.html b/src/app/management/management.component.html
new file mode 100644
index 0000000..c75c853
--- /dev/null
+++ b/src/app/management/management.component.html
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Management</title>
+</head>
+<body>
+<h1>Users</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Username</th>
+    <th>Password</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let user of userList">
+    <td>{{ user.name }}</td>
+    <td>{{ user.username }}</td>
+    <td>{{ user.password }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openUserForm()" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin: 10px 10% 0 0;">Add</button>
+</div>
+
+<div class="overlay" [style.display]="showUserForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add User</h2>
+    <form (submit)="addUser(newUser.name, newUser.username, newUser.password)">
+      <div>
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" [(ngModel)]="newUser.name">
+      </div>
+      <div>
+        <label for="username">Email:</label>
+        <input type="text" id="username" name="username" [(ngModel)]="newUser.username">
+      </div>
+      <div>
+        <label for="password">Password:</label>
+        <input type="password" id="password" name="password" [(ngModel)]="newUser.password">
+      </div>
+      <button type="submit">Add User</button>
+    </form>
+    <button (click)="closeUserForm()">Close</button>
+  </div>
+</div>
+
+<h1>Locations</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Location</th>
+    <th>Region</th>
+    <th>Latitude</th>
+    <th>Longitude</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let location of locationList">
+    <td>{{ location.location }}</td>
+    <td>{{ location.region }}</td>
+    <td>{{ location.lat }}</td>
+    <td>{{ location.lon }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openLocationForm()" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin: 10px 10% 0 0;">Add</button>
+</div>
+
+<div class="overlay" [style.display]="showLocationForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add Location</h2>
+    <form (submit)="addLocation(newLocation.location, newLocation.region, newLocation.lat, newLocation.lon)">
+      <div>
+        <label for="location">Location:</label>
+        <input type="text" id="location" name="location" [(ngModel)]="newLocation.location">
+      </div>
+      <div>
+        <label for="region">Region:</label>
+        <input type="text" id="region" name="region" [(ngModel)]="newLocation.region">
+      </div>
+
+      <div>
+        <label for="lat">Latitude:</label>
+        <input type="text" id="lat" name="lat" [(ngModel)]="newLocation.lat">
+      </div>
+
+      <div>
+        <label for="lon">Longitude:</label>
+        <input type="text" id="lon" name="lon" [(ngModel)]="newLocation.lon">
+      </div>
+
+
+      <button type="submit">Add Location</button>
+    </form>
+    <button (click)="closeLocationForm()">Close</button>
+  </div>
+</div>
+
+<h1>Waypoints</h1>
+<table>
+  <thead>
+  <tr>
+    <th>Name</th>
+    <th>Latitude</th>
+    <th>Longitude</th>
+    <th>Description</th>
+    <th>Location Name</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let waypoint of waypointList">
+    <td>{{ waypoint.name }}</td>
+    <td>{{ waypoint.lat }}</td>
+    <td>{{ waypoint.lon }}</td>
+    <td>{{ waypoint.description }}</td>
+    <td>{{ waypoint.locationName }}</td>
+  </tr>
+  </tbody>
+</table>
+
+<div class="button-container">
+  <button (click)="openWaypointForm()" class="btn gap-2 border-primary bg-primary text-secondary hover:bg-secondary hover:text-primary hover:border-primary" style="margin: 10px 10% 0 0;">Add</button>
+</div>
+
+<div class="overlay" [style.display]="showWaypointForm ? 'block' : 'none'">
+  <div class="form-container">
+    <h2>Add Location</h2>
+    <form (submit)="addWaypoint(newWaypoint.name, newWaypoint.lat, newWaypoint.lon, newWaypoint.description, newWaypoint.image, newWaypoint.locationName)">
+      <div>
+        <label for="waypointName">Waypoint:</label>
+        <input type="text" id="waypointName" name="waypointName" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="waypointLat">Latitude:</label>
+        <input type="text" id="waypointLat" name="waypointLat" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="waypointLon">Longitude:</label>
+        <input type="text" id="waypointLon" name="waypointLon" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="description">Description:</label>
+        <input type="text" id="description" name="description" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="image">Image (Base64):</label>
+        <input type="text" id="image" name="image" [(ngModel)]="newLocation.location">
+      </div>
+
+      <div>
+        <label for="locationName">Location Name:</label>
+        <select [(ngModel)]="newWaypoint.locationName" id="locationName">
+          <option *ngFor="let location of locationList" [value]="location.location">{{ location.location }}</option>
+        </select>
+      </div>
+
+      <button type="submit">Add Waypoint</button>
+    </form>
+    <button (click)="closeWaypointForm()">Close</button>
+  </div>
+</div>
+</body>
+</html>
diff --git a/src/app/management/management.component.ts b/src/app/management/management.component.ts
new file mode 100644
index 0000000..743ee25
--- /dev/null
+++ b/src/app/management/management.component.ts
@@ -0,0 +1,119 @@
+import {AfterViewInit, Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+
+interface User {
+  id: number;
+  name: string;
+  username: string;
+  password: string;
+}
+
+interface Location {
+  id: number;
+  location: string;
+  region: string;
+  lat: string;
+  lon: string;
+}
+
+interface Waypoint {
+  id: number;
+  name: string;
+  lat: string;
+  lon: string;
+  description: string;
+  image: string;
+  locationName: string;
+}
+
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './management.component.html',
+  styleUrls: ['./management.component.css']
+})
+
+export class ManagementComponent implements OnInit, AfterViewInit, OnDestroy {
+  showUserForm: boolean = false;
+  showLocationForm: boolean = false;
+  showWaypointForm: boolean = false;
+  newUser: User = {id: 0, name: '', username: '', password: ''};
+  newLocation: Location = {id: 0, location: '', region: '', lat: '', lon: ''};
+  newWaypoint: Waypoint = {id: 0, name: '', lat: '', lon: '', description: '', image: '', locationName: ''};
+
+  constructor() {
+  }
+
+  ngOnInit(): void {
+
+  }
+
+  ngOnDestroy() {
+
+  }
+
+
+  ngAfterViewInit() {
+
+  }
+
+  userList: User[] = [
+    {id: 1, name: 'John', username: 'john@test.com', password: '0790000000'},
+    {id: 2, name: 'Jane', username: 'jane@test.com', password: '0790000001'},
+    {id: 3, name: 'Bob', username: 'bob@test.com', password: '0790000002'},
+  ];
+
+  locationList: Location[] = [
+    {id: 1, location: 'New York', region: "US", lat: "40.7128", lon: "74.0060"},
+    {id: 2, location: 'London', region: "UK", lat: "51.5074", lon: "0.1278"},
+    {id: 3, location: 'Paris', region: "FR", lat: "48.8566", lon: "2.3522"},
+  ];
+
+  waypointList: Waypoint[] = [
+    {id: 1, name: 'Statue of Liberty', lat: "40.6892", lon: "74.0445", description: "Statue of Liberty", image: "", locationName: "New York"},
+    {id: 2, name: 'Big Ben', lat: "51.5007", lon: "0.1246", description: "Big Ben", image: "", locationName: "London"},
+    {id: 3, name: 'Eiffel Tower', lat: "48.8584", lon: "2.2945", description: "Eiffel Tower", image: "", locationName: "Paris"},
+  ];
+
+  addUser(name: string, username: string, password: string) {
+    const id = this.userList.length + 1;
+    const newUser: User = {id, name, username: username, password: password};
+    this.userList.push(newUser);
+    this.showUserForm = false;
+  }
+
+  addLocation(name: string, region: string, lat: string, lon: string) {
+    const id = this.locationList.length + 1;
+    const newLocation: Location = {id, location: name, region: region, lat: lat, lon: lon};
+    this.locationList.push(newLocation);
+  }
+
+  addWaypoint(name: string, lat: string, lon: string, description: string, image: string, locationName: string) {
+    const id = this.waypointList.length + 1;
+    const newWaypoint: Waypoint = {id, name, lat: lat, lon: lon, description: description, image: image, locationName: locationName};
+    this.waypointList.push(newWaypoint);
+  }
+
+  openUserForm() {
+    this.showUserForm = true;
+  }
+
+  closeUserForm() {
+    this.showUserForm = false;
+  }
+
+  openLocationForm() {
+    this.showLocationForm = true;
+  }
+
+  closeLocationForm() {
+    this.showLocationForm = false;
+  }
+
+  openWaypointForm() {
+    this.showWaypointForm = true;
+  }
+
+  closeWaypointForm() {
+    this.showWaypointForm = false;
+  }
+}